页面优化Check List（三）-表现层＃产品经理的设计课＃

本文为转载整理的学习笔记，编号有所改动。关于表现层的优化将会陆续整理更新到这一篇。

文章来自@谢尔鱼翻译并授权人人都是产品经理社区发布

原文地址：http://goodui.org/

1.尝试将可点击/可选择的样式区分开来，而不是将其模糊

视觉上的样式，例如颜色、层次和对比，可以用来帮助用户理解你最基础的界面导航语言：我在哪里，我可以到哪里去。为了与你的用户清楚地沟通，你的可点击行为（链接，按钮）、可选元素（可选项），以及单纯的文本应该清楚地区分开来，然后在这一套界面中保持一致性。在下面的例子中，我选择蓝色标识能被点击的元素，黑色标识已被选中的元素或表明当前所在的位置。正确运用这些标记，更便于用户学习和使用这些线索来导航界面。不要模糊这三种功能样式使产品使用困难。

2.尝试用鲜明的对比代替相似性

将你的行动口号与周围的元素区分开来，使其更显眼一点，能让你的UI表达更强烈。你能轻易地通过多种方式让你的主旨口号更醒目。你能采用明暗色调的对比来凸显。你还能采用投影和渐变来实现层次上的对比。最后，你还可以从色轮上选取互补色（例如：黄色和紫色）来进一步提高对比度。综上所述，你应该考虑将你的行动口号与页面上其它元素明显区分开来。

3.尝试分模块有条理地叙述而不是长篇大论的平铺直叙

长篇大论的平铺直叙是很容易失去客户的。是的，很长的滚动页面是很帅，但是要小心给客户这样一种感觉——在页面还没有结束的时候误以为内容已经结束。假如你的页面需要滚动，尝试设置一个可见的标识，让用户遵循这个规律看下去。其次，内容间的间隙也不能过大（当然我指的是一个区间范围，况且有这么多的设备尺寸）。

4.尝试平滑过渡而不是突兀呈现

当用户进行操作的时候，界面元素经常会有出现、隐藏、移动、转换以及大小调整的动作。作为对操作的回应，为元素变化适当添加时间延迟有时候让用户更容易理解刚刚发生了什么。以动画或者过渡的形式刻意制造的延时，给了用户理解元素大小或者位置变化的必要的反应时间。当然了，你也要记住，我们应该将过渡的时间控制在0.5s之内，时间太久的话，用户可能就会感到不适。对于那些只想快点完成任务的用户，太长时间的延时当然会成为一种负担。

5.不要让过多的边框来分散用户的注意力

边框会让用户从真正的内容上分散注意力。注意力当然是宝贵的资源，因为我们只能在特定的时间内抓住它。边框也确实能清楚准确地划分空间，但其鲜明的线条也会吸引用户的注意力。为了清楚地划分屏幕上的区域但又不至于太惹眼，可以将相似内容的元素放在一块，每一块区域里的内容通过对齐方式保持一致，使用不同的背景加以区分，甚至仅仅只是使用类似的排版风格。当使用抽象的UI工具进行设计时，很容易弄得到处都是边框。通常边框被用来排列和整理界面上的元素，但往往这样做的结果是界面显得混乱不堪。有时候在界面上加一些分隔线也是有帮助的，但是考虑尽量用不太显眼的方式来替代，这样你的内容才会凸显出来。

6.考虑界面上记录为空的情况

在某些情况下，你可能会有0, 1, 10, 100，或10000+的数据结果需要以不同的方式进行展示。最常见的场景可能是第一次使用是0条数据到后来有非常大的数据量的中间过渡期。我们常常忘了设计什么都没有时的初始状态，而且这样做让我们有忽视用户的风险。零数据世界是冰冷的。当用户第一次登录你的app，看到的是一个没有任何引导的空白页，那么你很有可能因此错失机会。零数据状态是向用户展示接下来应该怎么做的最佳学习时间。好的事物就应该精益求精，用户界面也不例外。

7.尝试默认选中，而不是待选

选中状态意味着用户或客户不需要进行任何操作就已默认接受服务。另外，也有一些传统的选择策略要求用户先进行操作然后才能参加或接受服务。默认选中与待选相比有两个好处。一是减轻用户的负担，因为用户不需要作任何操作。二是这也向用户暗示了——“因为别人都需要这个，我也会这样做”。当然了，这种默认选中策略通常被认为是有争议的，因为某些居心不良的营销者滥用的缘故。一种滥用表现在故意降低默认选中文字的可读性，另一种是使用让人混乱的文字，比如说双重否定。这两种情况都会导致用户不太了解实情就稀里糊涂地注册了。因此在保持道德的前提下，如果你决定采用这种默认选中的退出方式，保持其清晰可见，让你的客户知道他们被默认添加的操作。毕竟，这种策略曾在欧洲被用来拯救生命。

8.尝试保持一致性，而不是让用户重学习

因为唐纳德诺曼那些很棒的书，保持用户界面设计的一致性可能是最广为人知的原则之一了。当用户使用界面或者产品时，一个一致的UI或者交互是减少用户学习量的一种很好的方法。当我们按下按钮，移动滑条的时候，我们希望这些交互元素看起来、用起来和被找到的方式是一样的。一致性让我们习惯了交互的方式，而一旦没有了一致性，我们被迫进入反复的学习中。一致性的界面元素可以通过多种方式来实现，比如说：颜色，方向，行为，位置，大小，形状，标签以及语言。然而在我们保持所有元素的一致性之前，请记住，保持元素的不一致性仍然是有价值的。不一致的元素或者行为的出现能从我们的习惯性潜意识的深处唤起我们的注意力——当你有想要获得关注的事情的时候，这是很有帮助的。试一试，但也要知道什么时候打破它。

9.尝试设置更大的点击区域

如果增加链接、表单以及按钮的大小，它们将更容易被点击。根据费茨定律，使用点设备，我们需要更长的时间的去点击目标，尤其是距离更远，或目标更小的时候。鉴于这个原因，考虑增加你表单字段文本框、行动口号以及链接区域的大小。或者，也可以保持视觉元素的大小，而是只增加热点或点击区域的大小。应用最广泛的例子就是在移动设备上的文本链接和导航菜单，将背景进行拉伸填充以增大点击的有效区域。

10.尝试添加图标标签，而不是点击图标打开后再解释

图标可能有多重解释，因此为其添加文字说明可以消除歧义。以向下箭头的图标为例，它是指将元素下移，降低优先级，还是下载呢？“X”图标是表示删除，禁止，还是关闭呢？当用户没有足够时间学习界面上图标含义的情况下，这种问题就更严重了。用文字标注图标，让图标更易于理解。如果空间确实不够的话，妥协的做法就是鼠标滑过的时候显示图标标签（鼠标滑过单个图标的时候，显示相应的标签）。

11.尝试为元素间保留适当的距离，而不是过度拥挤

合理的间距可以使内容和/或数据更具可读性。当元素的距离稍微拉开时，看以来就会比较独立。这种方法很适用于列表、表格、段落或屏幕上任何其它的元素集合。应用空白的一种最常用的方式是在项目周围添加额外的填充区域。另一方面，如果没有足够的填充，元素就很难与整体分离了。所以考虑增加可读性的时候，填充可能会有所帮助。