「翻译」网页设计中的「Do」&「Don’t」
时间：2023-09-27 03:12:01 | 来源：网站运营
时间：2023-09-27 03:12:01 来源：网站运营
「翻译」网页设计中的「Do」&「Don’t」：
一直以来，网页设计都是件棘手的事。当你在设计时要考虑的东西太多了。为了简化这个任务，我准备了个网页设计师进行设计时需要考虑的「Do」和「Don‘t」原则列表。不要怕，都是些简单的原则。
下面我们开始！（译者：哎呀，翻译完已经七夕啦！）
阅读信息：
- 文章出处：Medium - UX Planet
- 阅读时间：8 分钟
- 流量预估：2.4 MB
作者信息：
- 姓名：Nick Babich
- 介绍：I’m a software developer, tech enthusiast and UI/UX lover.
- 联系方式：Twitter | Facebook
1、在不同设备上提供相似的体验：
用户会使用许多不同类型的设备访问你的网站：他们会在台式机或笔记本电脑，平板，手机，音乐播放器甚至手表上访问。体验设计的很大一部分是确保用户无论通过什么方式访问你的网站，都能得到相似的体验，而不会因设备而异。
如果用户在手机上访问你的网站，他们应该能够毫不费力地找到需要的东西，就像他们在家里的台式机上访问你的网站一样。
2、设计清晰易用的导航：
好的导航是可用性的基石。请记住，**无论你的网站有多好，用户迷路的话就一文不值。**你网站上的导航应该是：
- 简单：每个网站都应该有最简单的结构
- 清晰：导航选项对访客而言必须不言而喻
- 一致：主页和每个页面上的导航系统都应该一致
设计你的导航系统，让用户在尽可能少的点击下达到他们想去的页面，同时仍易于找到他们需要去的页面。
3、更改访问过的链接的颜色：
链接是导航过程中的关键因素。当访问过的链接不改变颜色时，用户可能在无意中重复访问相同的页面。
知晓自己之前和现在的位置使得用户更易于决定下面去哪。
知道自己去过哪些页面，可以让用户免于在无意中一遍又一遍地访问相同界面之苦。
4、轻松快速扫描页面：
当用户访问你的网页呢时，他们更有可能快速扫描屏幕，而不是阅读所有内容。因此，如果用户想要查找什么内容或完成一个任务，他们会在发现目标前持续扫描。而你作为设计师，可以通过设计好的视觉层次结构来帮助他们。视觉层次是指以信息权重高低（例如，他们的眼睛应该先看何处，再看何处）来排列或呈现网页上的元素。
将网站 logo，登录框，导航系统或其他重要的内容作为视觉焦点，以便用户一眼看见。
Basecamp 采用的 Z 字视觉层级。
5、仔细检查所有链接：
当用户点击站点上的链接并看见「404错误」页面时，他会很容易变得失落。当用户正在搜索内容时，他希望每个链接都可以带他去链接所指的地方，而不是「404错误」或者不想去地方。
6、确保可点击的元素识别度高：
网页上元素的外观暗示了用户如何和它交互。看起来像是链接或按钮的视觉元素，但不可点击（即不是链接的含下划线的文字）可能会使用户迷惑。用户需要知道页面的哪些区域是静态内容，而哪些区域是可点击的（或是可用手指敲击的）。
让可点击的元素显而易见
Menagerie Climb：橙色的框是一个按钮吗？答案是：不。形状和标签使这歌元素看起来像按钮，但它并不是。
1、别让你的用户在内容加载时干等：
网页用户非常缺失注意力和耐心。根据NNGroup研究：
10秒是用户将注意力集中在一个任务上的极限时间
当用户必须等待网站加载时，如果加载速度不够快，他们将变得沮丧，并可能离开。即使是最精美的加载动效，如果时间过长，也可能迫使用户离开。
加载动效 by Ramotion
2、别在新标签中打开链接：
这种粗鲁的行为会使返回键无效，而返回键是用户返回到上一个页面的习惯方式。
3、别让乱花迷人眼：
促销和广告可以让他们旁边的内容失色，并阻碍用户达成自己的目的。不要说任何看起来像广告的东西都会被被用户习惯性忽略（这种现象被称为广告失明）。
通常，任何看起来像广告的东西都被用户习惯性忽略（这种现象被称为广告失明）
4、不要绑架滚轴：
绑架滚轴是设计师或开发者控制滚动条滚动幅度，使在其网站上看上去不同。可以包括动画效果，固定滚动点，甚至重新设计的滚动条本身。绑架滚轴是许多最烦人的事情之一，因为它从用户手中抢夺了操控权。当你设计网站或用户界面时，想让用户通过网站或应用程序控制自己的浏览节奏。
5、不要带着声音自动播放视频：
自动播放视频，音乐或声音会吓到用户。这些元素应谨慎使用，只有在适合并符合预期的情况下才能使用。
Facebook 的视频设置为自动播放，但不会出现声音，除非用户以某种方式表明他们正在观看视频（例如通过与视频进行互动）。
6、为了美视觉效果牺牲可用性：
网页或用户界面的设计不应干扰用户在屏幕上获取内容。避免在背景上制造视觉噪音，妨碍网站的可读性的糟糕配色，或对比度不足的颜色（例如下面的例子）。
低对比度的配色根本看不清文字
7、使用闪烁的文字和广告：
闪烁的内容可能会触发某些过敏用户的癫痫发作。它不仅会引起癫痫，而且对于一般用户来说也令人讨厌并导致分心。
避免闪烁的内容！
其他文章- 插件：CRAFT | Sketch Material | WeSketch | Runner | Paddy | Diya
- 技法：Library | Colored Text | Symbol | Shared Text | Resizing | 流程图 | 文档 | 表格
- 工具：InVison Studio | Nucleo | Feedly
- 案例：Swarm | YouTube | Uber | Oscar | Atlassian | Adobe | Adobe
感谢阅读，祝大家七夕快乐
在线咨询
