【转载】良好的用户界面【大神级】2013.12.10更新

No1:   一列布局，而不是多列

一列布局，会给你更多控制叙述的机会。这样做，更易于预测读者自上而下的顺序，便于引导浏览者。而多列布局的方法，则更易于让浏览者分心到一些核心内容之外的部分。单列布局，跟容易实现：引导人们进入一个故事，在最后突出一个行动号召。

No2: 尝试给于用户感兴趣的礼物，而不是关闭交易

一个友好的示意，比如给客户提供一份按照页面指导操作后可以得到的礼物。送礼也是一种有效的说服策略，这个策略是基于心理学中所说的互惠规则。很明显，因为馈赠了礼物，大多数人将会以再次回顾作为答谢你的方式，这便是回头客。

No3:尝试合并类似功能，而不是过于分散的UI。

UI设计中，很容易创建很多功能同、相似模块元素来执行相同任务。随着时间的推移，事情变得分崩离析，不受控制。同时，这些披着不同外衣的相同相近功能元素让你的用户疲于应付，无谓付出更多的学习成本。因此，考虑重构你的UI，合并相同相近功能是一个重要措施。

No4:尝试社会认同，而不是闭门造车。

社会认同是另一个伟大的说服策略，直接让你的转换率增加。看到别人认可你，谈论你的产品，这样的信息可以加强相同行动呼吁。将种信息巧妙展示，用来证明别人成功的使用体验。

 

No5:尝试重复你的主要动作，而不是显示它只是一次。

重复你的行动呼吁是一种策略，这种策略更适用于较长的网页，或在众多重复的网页。当然，你不希望自己的报价在同一屏幕上显示10倍以上来折磨人。然而，对于长页面，那种以半版以上或第一屏第二屏布局UI的常规思维瞬间褪色。重复你的主要动作，不会妨碍一个顶部的软性可操作项，而另外一个蓄意更加明显的重复性动作布局在页面底部。当用户到达页面底部时，他们可能停下来想想下一步该怎么做 ，此时，底部 —— 一个潜在的坚实的地方布局重复性动作，让客户作出要约或达成交易​​。

No6:尝试在可点击项与可选项中使用不同的风格取代模糊风格。

如颜色，深度和对比度的视觉造型可能被用来作为一个可靠的线索，帮助人们了解你的界面导航的基本语言：我在哪里，我能去哪里。为了让客户清楚可点击的行为（链接，按钮），选择元素（选择项），和纯文本的样式应该是彼此明显不同的。在页面保持一致风格。在视觉的例子中，我选择了蓝色，暗示那些可以点击进入的，黑色作为那些已经被点击。如果应用得当，人们会更容易学习和使用这些线索来浏览你的界面。而非模糊风格让人们摸不着头脑。

No7:尝试推荐，而不是平等的选择。

显示多个报价时，则强调产品的建议可能是一个好主意，因为有些人需要一点点微调。我相信有一些有心理学研究表明，有更多的选择时，人们可能就不会选择。为了打击这种分析麻痹，尝试强调和突出某些选项是上策。

No8:尝试使用撤销命令,而不是提示确认。

试想一下，你刚按下一个动作按钮或链接。考虑让用户感觉自主控制，行使撤消操作的能力，而不是要求确认。

No9：尝试告诉这是谁，而不是针对每个人。

针对每个人，你足够精确如同对你的观众 ? 这是一个想法转换，你能明确说明你的产品或服务究竟是为谁。通过交流，你可以更多的与你的目标客户沟通接触，但同时有一种排他性的感觉。这一战略的风险当然是,你可能会进一步削减自己的短板，限制潜在客户。不过，话又说回来，同时显示了透明度，建立了信任。

No10:尝试直接而不是优柔寡断。 

当你颤抖着传达你不确定的信息时，你可以说你很有信心。如果你用问号结束您的邮件，或者使用诸如“或许”，“也许”，“有兴趣吗？” “想什么？”。尽量用肯定助词，而非不确定性。

No11:尝试更多的对比对，而不是相似对比对。

让你的行动呼吁更加突出，有效的把他们与周围的元素区分开来，会让你的UI更强。通过多种方式的对比，你可以很容易地增加你的主呼叫行动。使用悦目的色调，你可以使某些元素相对于淡色显得更深。比如阴影和渐变的利用。最后，您还可以选择从色轮的互补色（如：黄，紫），以进一步提高对比度。综上所述，您的行动呼吁在剩下的页面之间应该考虑更高的对比度。

No12:尝试显示产地，而不通用。

下意识地指示你，你的产品或服务是哪里的，让你的沟通达到更个性化的水平。

No13: 尝试减少表单域。

人类天性懒惰，这样的特性也适用于填写表单字段。你所要求的每个表单，都会是你客户流失或终端服务的一个风险。不是每个人都有同样的速度与熟练度。在移动设备上输入，更是一件苦差事。如非必要，不设实体。如果你真的有很多字段需要用户填写，建议你拆分表单字段到多个页面上，每个页面表单域保持轻小。

No14：尝试公开选项而不是隐藏它们。

你使用的每个下拉菜单中，隐藏需要努力被发现的一组动作。如果那些隐藏的选项是核心任务环路让您的访问者所做的事情，那么你不妨考虑，罗列多一点在前端页面。尝试储备下拉菜单的选项是可以预见的，并不需要新的学习，在日期和时间的引用（如：日历）或地理台套。

No15:尝试建议的连续性，而不是虚假的底部。

虚假底部是一个转换的杀手。的确，滚动的长页面是挺大的，但要小心页面已经走到了尽头。如果您的网页滚动，试图建立一个可视化的模式或节奏，以便用户可以学习和进一步向下读。其次,要注意周围的区域差异较大的可以出现(当然我指的是在这里有这么多的区域范围大小设备)。

No16:尝试保持聚焦，而不是溺水的链接。

可以很容易地创建一个错综复杂相互交织的页面。然而，如果你正在创建一个叙事页，这个页面建立在底部有特殊呼叫行为，那么，请三思而后行。这样的页面，一定要以减少客户跳出我遵旨，删除多余环节，方便用户有机会到达这一重要的按钮。

No17：尝试显示状态，而不是状态无关。

在任何用户界面中，我们经常可以有不同的状态显示元素。有可以读取电子邮件，未读消息，发票状态、支付与否。接口状态，可以帮助人们了解到，不论他们过去的行为已成功开展，以及是否应采取行动。

No18：尝试创造效益，而不是仅仅停留在任务按钮。

试想一下，同时有两个按钮显示在页面上，一个告诉你“存款”，另外一个告诉你“注册”。第一个按钮有较高机会被点击。相反，注册过程需要努力，往往需要填写N多冗长的字段。这是一个假设，加强利益按钮，可能得到更高转换。另外，也可以放置跟利益密切相关的按钮，告诉人们为何要这么做。当然，任然有空间，基于任务环路，可以保留那些经常用到的入口按钮。

 

No19:尝试直接操纵，而不是上下文的菜单。

当显示数据表格时，我们通常要允许用户可以自由操作表格项。点击、或悬停在某一数据时，对数据进行快捷的删除、修改、重命名等操作。点击数据项（如文本），则变为可编辑则是另外一个典型例子。

No20:尝试公开领域，而不是创造额外的页面。

这个容易理解，直接看图：

No21:尝试转换，而不是瞬间变化。 

经常出现的界面元素，隐藏，移动，转移，并调整其大小，为用户体验各司其职。元素作为回应我们的互动，例如通过时间元素，能更容易让人理解刚刚发生了什么。而一个内置的动画或过渡的效果，故意延迟，让人适应位置变化所需的时间。但请记住，我们开始增加这种转变的持续时间超过0.5秒，会有如下情况，人们可能会开始感到疼痛。对于那些只是希望把事情做得很快的人，过长的延迟，当然可以是一种负担。

 

22：尝试逐步参与而不是仓促签约。

为什么不让用户首先执行一个任务通过它演示了一些有价值的东西，而不是要游客立即注册。像这样的交互产品既能展示它的好处，还可以有助于个性化。一旦用户开始看到你的产品的价值，看看他们如何能使它更个性化，他们将更乐于分享与你额外的信息。逐步参与是尽可能的推迟签约过程，让用户自定义产品与服务。

 

23：尝试减少边界，避免影响用户注意力。

用户真正需要的内容，如果存在边界的话，会更加分散用户的注意力。虽然边界可以准确清晰的定义划分一个片区，但却也成为用户认知能力的负担。为了定义屏幕元素之间的关系,元素可以仅仅通过靠近、对齐、不同背景，甚至只是一个相似的排版样式即可。

 

24：尝试销售福利，而非功能。

人们倾向于关心特性而不是利益。好处他们随身携带更多的清晰定义的值。克里斯·吉尔伯在《100美元启动》写道,人们真正关心有更多的:爱、金钱、认同和空闲时间，同时希望有更少的压力,冲突,麻烦和不确定性。 展示特性的时候，尽可能用给用户的好处来代替，当然，功能是可以偶尔出来一下的。（译者理解：把功能性的陈述转意成对用户得到好处的陈述。）

25：尽量使用零数据，而不是非常多数据。

一些情况下,你会有0、1、10、100、或10000 +数据结果可能需要以某种不同的方式显示。最常见的场景可能是第一次使用的过渡与零数据对未来使用更多的数据。我们经常忘记去设计这个初始情况仍没有任何显示,通过这样做,我们可能会忽视用户。一个零数据世界是一个寒冷的地方。当用户第一次看你的应用程序和它所做的就是显示一片空白,没有任何指导,那么你很可能错失一个机会。零数据状态是完美的候选人获得用户在最初的障碍学习跟他们下一步要做什么。好东西规模和用户界面也不例外。

26：试着选择退出,而不是选择。

选择推出策略，意味着用户会无需任何行动就可以做一些事情。或者，也有更多传统的推出策略，为了收到一些新信息，首先要让人们采取一些行动。两个更好的理由说明喜欢选择退出比传统推出更好：第一，选择退出减小了用户行为轨迹的阻力，因为用户不需要做任何事；第二，推荐选择，也是某种规范暗示 —— “因为别人需要它，所以，我可能同样需要。”当然，选择退出策略常被认为是有争议的，因为有很多人滥用这样的功能给用户制造麻烦。用户为了某些事，在不知情的情况下而注册。因此，在道德标准范畴内，如果你决定使用选择退出方法，确保你的默认选择退出对于你的客户清晰和容易理解。毕竟，这个策略也被使用在欧洲挽救生命。

27：尝试界面一致性，不要让用户重新学习。

争取在用户界面设计一致性。保持一个更加一致的用户界面或互动方式，以减少学习量。当我们按下按钮和换档滑杆，我们学会期待看到这些交互元素，我们的行为被我们所期望的方式反复。一致性巩固了我们的学习方式进行互动。如果界面不一致，我们会被迫进入重复学习模式。如：颜色，方向，行为，定位，大小，形状，标记和语言，等可以实现一致的元素。我们一度让一切保持一致，但是，请记住，保持不一致的事情仍然有价值。从我们潜意识中，要求不一致的元素或行为 – 它可以是一件好事。试试吧，这种潜意识让我们常常能够打破常规。

 

28：尝试使用智能默认值，而不是要求做额外的工作。

使用智能默认或预填充表单字段，这是一种常见的技术，帮助用户更快地移动表格，消除他们的工作量，尊重他们有限的时间。尝试显示预装值进行验证，而不是要求每次重新输入值的字段。更少工作，就会更好。

 

29：尝试公约，而不是重新发明轮子。

公约比一致性更具备共识基础。如果我们保持一致性的用户界面，人们便可以轻而易举的完成任务。另一方面，我们还可以让业务流程尽可能有相同的多个入口,进一步降低学习曲线。在这些帮助，我们学会了建立UI约定关闭屏幕窗口的右上角(通常),或期望一定看从我们的设置图标。当然有时候,在新模式下，一个约定不再服务的目的。非常规时,确保它目标明确，具备良好的意图。

 

30：尝试让用户厌恶损失，而不是强调收益。

人们都想赢得，而不是失去。说服力心理学规则表明，我们可能更倾向于避免损，而不是获得收益。这样的用户心里可以理论，可以应用到你页面中提供的产品信息是如何被选中，并取得沟通。

 

31：用视觉层次替代让视觉迟钝的结构。

良好的视觉层次结构，可以有效的把重要元素从不重要的元素中分离出来。视觉层次来自于元素间不同的对齐方式、靠近、颜色、色调、缩进、字体大小、元素大小、内边距（padding）等等。这些视觉语言元素应用正确，它们一起作用，有效指挥人们在访问一个页面时的注意力——有效改善页面可读性。视觉层次结构可以产生阻力，使得我们放慢从上到下浏览整个页面的速度——这要比快速浏览网页更好。良好的视觉层次虽然会让我们花点时间，但最后的结果应该是让我们记住更多的页面项目和特点。就像公路旅行，你可以走高速公路，快速到达你的目的地(底部的页面)，或者你可以走风景优美的路线并记住一路上更多有趣的事情。给眼睛一个停顿的地方。

 

 

 

最后更新于2013年12月10日