转：好的用户界面-界面设计的一些技巧

今天看到一篇很是棒的关于UI设计的文章。拿出来分享下， 文章连接

1 尽可能使用单列而不是多列布局

单列布局可以让对全局有更好的掌控。同时用户也能够一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨没法很好表达。最好的作法是用一个有逻辑的叙述来引导用户而且在文末给出你的操做按钮。  

2 放出礼品每每更具诱惑力

给用户一份精美小礼品这样的友好举动再好不过了。具体来说，送出礼品也是之有效的得到客户忠诚度的战术，这是创建在人们互惠准则上的。而这样作所带来的好处也是显而易见的，会让你在日后的活动进展（无论是推销，产品更新仍是再次搞活动）中更加顺利。  

3 合并重复的功能而使界面简洁

在整个产品开发期间咱们会有意无心地建立不少模块，版面或者元素，而它们的功能都是相近的。此种状况已经代表过分设计了。时刻警戒这些冗余的功能模块，它无用且下降了电脑性能。此外，界面上模块越多，用户的学习成本就越大。因此请考虑重构你的界面使它足够精简。  

4 客户的评价好过自吹自擂

在得到项目机会或提升项目转化率时客户的好评是一种极为有效的手段。当潜在客户看到其余人对你的服务给予好评时，项目机会会大增。因此试着提供一些含金量高的证据证实这些好评是真实可信的。  

5 频繁展现你的主旨来加深印象

屡次重复主旨口号这种方法适用于界面很长或者分页的状况。首先你确定不想满屏刷出相同的信息，这样会让人生厌。但当页面足够长的时候这些重复就显示天然多了而且也不显得拥挤。所在在页面顶部放一个按钮而后在页面底部再适当放个突出的按钮的作法没有什么不妥。这样当用户到达页面底部在思考接下来该作什么的时候，你提供的按钮就能够得到一个潜在的合同或者即便用户不须要你的服务这个按钮也能够起到过滤的做用。  

6 将选项与按钮区分开来

诸如颜色，层次及模块间的对比这些视觉上的设计能够很好地帮助用户使用产品：他时刻知道当前所处的页面以及能够转到哪些页面。要传达这样一个好的界面，你就须要将可点击的元素（好比链接，按钮），可选择的元素（好比单选多选框）以及普通的文字明显区分开来。在下图的例子中，我将点击操做的元素设置为蓝色，选中的当前元素为黑色。这样适当的设计可让用户很方面地在产品的各模块间切换。但千万不要把这三种元素设计得混乱不堪。  

7 给出推荐而不是让用户来选择

当展现许多项服务时，给出一个重磅的推荐项是个不错的作法，尽管推荐的设置没法知足全部用户。这么作是有理论依据的， 一些研究已经揭示了这么一种现象：当面临的选择越多时，用户就越难作出决定。因此你能够高亮某个选项来帮助用户作出选择。  

8 给出撤销操做来代替肯定操做

假设你刚点击了一个链接或者按钮，撤销操做可让操做流畅天然，这也符合人类的本能。而每次操做都弹一个肯定框则好像是在质问用户你明白不明白这个操做会产生什么后果。我仍是更习惯假设用户每次操做都是正确的，其实只有极少数状况下才会发生误操做。因此，为了防止误操做而设计的确认窗口实际上是不人性化的，用户每次操做都须要进行毫无心义的肯定。因此请考虑在你的产品里实现撤销操做来增长用户的操做友好度吧。  

9 指出产品适用人群而不是作成整年龄

你是想把产品作成大众化的呢仍是有精确的适用人群？在产品定位上你须要更精确些。经过不断了解目标客户的需求及标准，你能把产品作得更好获得更多与客户交流的机会，而且让客户以为你很专业，在这方面是独家提供的优质服务。把产品定位得精确的风险就是可能缩小了目标潜在客户的范围，也使自身变得不那么全能。但这种作得更专业的精神却反过来会赢得信任，权威。 （贴士：喜欢下图中可爱的小人物造型么？去了解 MicroPersonas吧）  

10 试着直接果断而不要惟惟诺诺

你能够经过不肯定而颤抖的声音来表达传递本身的意思，固然也能够经过很自信的方式表达。若是你在界面中的表述用语多以问号结束，好比"也许"，"可能"，"感兴趣？" 或者"想要试试么？"，那么你彻底还能够把语气变得更坚决一些。不过万事无绝对，或许适当放松措词让用户有自行思考的余地也是能够的。  

11 界面要有鲜明对比让人容易区分

把主要功能区从界面中突出显示出来效果会好不少。使你的主要口号醒目有不少种方法。经过明暗色调的对比来突显。经过为元素添加阴影渐变等效果让界面富有层次感来张显主题。最后，你甚至能够在色相环上专门选择互补色（好比黄色与紫色）来设计你的界面，以达到突出重心的目的。综合全部这些，最后获得的界面会使你的主要意图与界面其余元素有明显的区分，获得完美的呈现。  

12 指明产地

指明你的地区，所提供的服务，产品来自哪里意义重大，同时也将与客户的沟通引入了一个更具体带有地域特点的场景中。指出具体来自哪里，国家，省分及城市，也是一种在进行自我介绍或产品展现时被经常说起的。当你在界面设计中实现这点时，让人以为很是友好。同时指明区域也会隐形提升产品的声誉，好上加好。  

13 精简表单内容

人生性就懒惰，在填写表单时也是一样的道理，没人愿意填写一大堆表单字段。表单中每一个字段都会有失去用户的风险。不是每一个人打字都很快速的，而且在移动设备上进行输入更是至关麻烦的事情。问下本身表单中是否是每一个字段都必需，而后尽可能减小表单中的字段。若是你确实须要一大堆信息让用户填写，试着将它们分散在不一样页面，在表单提交后还能够继续补充。过多字段很容易让整个表单显示臃肿，固然想简洁也很容易，只放少数字段。  

14 暴露选项而不要将操做隐藏

你使用的任何一个下拉框都会对用户形成信息的隐藏而须要额外的操做才能显示。若是这些信息是贯穿整个操做所必需的，那你最好把它展现出来作得更显而易见一点。下拉框最好用在选择日期，省份等约定俗成的地方。对于程序中重要的选项最好仍是不要作成下拉形式。  

15 把界面作得环环相扣要好过直白的排版

一个平淡无奇行文无疑会让用户失去兴趣而继续阅读。是的，单列滚动的长页面是不错的，可是咱们应该适当地设置一些小节，而且环环相扣，来提升用户的兴趣使其继续阅读。但须要注意的是节与节之间的留白不要太大。  

16 不要放太多连接分散用户注意力

为了知足各式用户的需求，在页面上放些连接链到这里链到那里是常见的作法。若是你的主要目的是想让用户点击页面最后那个下载按扭什么的话，就须要三思了。由于用户可能点击了其余连接离开页面了。因此你须要注意页面的连接数量，最好将用于导航与用于操做的连接用样式区分开。尽可能移除页面不须要的连接会让用户点击到你的功能按钮。  

17 将操做的状态或者进度呈现出来

现现在大多界面当中已经呈现了各色样式的进度条或者标明状态的图标，好比邮件有已读或未读的状态，电子账单有支付或未支付的状态。而在界面上呈现这样的状态对于用户来讲是颇有必要的。这样用户就能够知道某些操做是否成功，接下来准备进行怎样的操做。  

18 不要让用户以为是在完成任务

试想界面上有这样两个按钮：一个是"获取折扣"，另外一个是"当即注册"。我敢打赌大多数人会点击第一个，由于第二个按扭让人感受不到有利可图，而且"注册"让人联想到填不完的表单。也就是说让用户感觉到获利的按钮更有可能被点击。这种让用户感到好处的文字信息也但是放在按钮旁边，不必定要作为按钮的标题。固然，正常的按钮仍是有用处的，通常用于重复性操做频繁的地方。  

19 让操做直观而不是让人以为找不到上下文

不用说直接在元素身上进行操做是更直观明了的方式。好比在一个列表中，咱们想让用户对每一个条目进行操做那么就把按钮放到当前条目上，而不要把放到列表以外。再好比就是直接点击元素就进入编辑状态（好比页面上的地址信息点击后能够进行编辑）。这种方式比传统的选中再点击相应的按钮进行操做要简洁省事得多。固然，对于通常性的操做自己就不须要有什么上下文的，就不必这么作了，好比页面上的前进，后退按扭。

20 尽可能显示所有内容而不要额外页面

在一个足够大的宽屏界面上最好仍是直接给出表单，这比点击按钮再弹出表单要好不少。首先减小了点击操做，流程变得简洁也节省了时间。其次，直接呈现出表单可让用户知道表单有多长，其实也是在告诉用户注册花不了多少时间。固然，这条规则适合注册表单很是简单的状况。  

21 让界面平滑显示而不要死板地呈现

用户进行操做过程当中，界面上的元素会常常出现，隐藏，打开，关闭，放大缩小移位等。给这些元素增长些天然的动画，淡入淡出效果不但美观，也更符合实际，原本元素尺寸位置的变化就是一个须要时间的动画过程。但要注意动画时间不要设置过长，那样会让想尽快完成操做的用户不耐烦。

22 按部就班的引导而不要直接让用户注册

与其让用户立刻注册，何不让用户先进行一些体验式的操做呢。这个体验过程能够展现程序的功能，特性等。一旦用户经过简单几步的操做了解了程序的价值所在，那么它会更愿意填写注册表单的。这种按部就班的引导能够尽可能推迟用户注册的时间但又可让用户在没注册的状况下进行个性化设置等简单操做。

23 过多边框会让界面四分五裂

过程边框会喧宾夺主。不用说，边框确实在划分区域进行版块设置时有很大的做用，但同时其明显的线条也会吸引走用户的注意力。为了达到划分版块又不转移用户注意力的目的，在排版时能够将界面上不一样区域的元素经过空白进行分组，用上不一样的背景色，将文字对齐方式进行统一，还有就是为不一样区域设置不一样的样式。当使用所见即所得的界面设计工具时，咱们常常在界面上方便地拖出不少区块来，这些区块多了就会显得杂乱无章。因此咱们又会处处放些横线来分界。一个更好的作法是将区块垂直对齐，这样作不会让那些多余的线条来扰乱视觉。  

24 展现产品带来的好处而不要罗列产品特性

市场就是这样的，用户永远只关心自身利益而产品特性对他们来讲倒不是那么重要。只有利益才更直观地体现出使用产品所带来的价值。Chris Guillebeau在他的著做《100美圆起家》中指出，相比压力，冲突，烦心事和未知的将来，人们在意得更多的是爱，金钱，认同感和自由支配的空闲时间。因此我相信在展现产品特性时回归到利益上是必要的。  

25 不要把产品设计得过于依赖于数据

界面上常常须要呈现不一样数量的数据，从0，1，10，100到10000+等。这里存在个广泛的问题就是：在程序最开始使用的0条数据到过分到有数据以前，该如何进行显示界面。这也是咱们常常忽视了的地方。当程序初始没有数据时，用户看到的就是一片空白，此时用户可能不知道该进行哪些操做。利用好没有数据的初始界面可让用户学习和熟悉如何使用程序，在程序中建立数据。力臻完美永远是咱们追求的目标，界面设计也不例外。  

26 默认将用户引入

将界面作成默认用户选中想要使用你的产品，意味首若是用户真的须要使用，那么能够直接点击肯定而不须要额外点选了。固然，也有另外一种作法就是默认不选中服务，用户须要的话能够手动点选。前者这种设计更好的缘由有两点。一是用户不须要额外点选，很是省事，由于默认设置为用户须要咱们的产品或服务。二是这种作法某种程度上是在向用户推荐产品，暗示了其余人都选择了咱们。固然，将界面设计成默认选择的样子多少存在点争议，有点强迫用户的感受。若是你想道德一点，你能够要么把让用户选择的文字写得模棱两可，要么使用双重否认这样不那么直白的描述，这两种方式均可以让用户以为没有那么强的感受是被强迫选择使用产品的。  

27 界面设计得一致，不要增长用户的学习成本

自从Donald Norman的一系列著做面世后，界面设计中尽可能保持一致性成了一个广泛遵循的准则。在设计中保持一致性能够减小用户的学习成本，用户不须要学习新的操做。当咱们点击按钮，或者进行拖拽操做，咱们指望这样的操做在整个程序的各个界面都是一致的，会获得类似的结果出来。反之咱们须要新情境下从新学习某种操做会产生何种结果。能够在不少方面下功夫来实现一个一致的界面，包括颜色，方向，元素的表现形式，位置，大小，形状等。不过在让界面变得一致以前，记住一点，适当的打破总体的一致性也是可取的。这偶尔的不一致性的设计用在你须要强调的地方能够起到很大的做用。因此世事无绝对，咱们应听从一致的设计准则，但适当地打破这种常规。  

28 使用较贴切的默认值会减小操做

适当的默认值和预先填充好的表单字段能够大量减小用户的工做量。在节省用户宝贵的时间上面，这是种很是常见的作法，能够帮助用户快速填完表单或者注册信息。  

29 听从一些约定而不要去从新设计

界面设计中约定俗成的东西跟以前的界面一致性很类似。若是咱们听从了界面中一愣的约定，用户用起来会很方便。相反，不一致和没有听从约定的设计则会提升学习成本。有了界面设计中这些约定，咱们想都不用想就知道界面右上角（大多数状况下）的叉叉是关闭程序用的，或者点击一个按钮后咱们可以预测到将会发生什么。固然，约定是会过期的，随着时间的推移，一样的操做也有可能被赋予新的含义。但要记住，当你在界面中打破这些常规时必定要目的明确，而且出发点是好的。  

30 让用户以为能够避免失去而不是得到

咱们喜欢成功，没有谁愿意失败。根据心理学获得的可靠结论，人们通常更顷向于避免失去拥有的东西而不是得到新的利益。这一结论也适用于产品的设计和推广中。试着说明你的产品会帮助客户维护他的利益，保持健康，社会地位等要好过告诉客户这个产品会带来一些他不曾拥有的东西。好比保险公司，它是在销售咱们出事以后能够获得的大笔赔偿呢仍是在强调能够帮助咱们避免失去拥有的财产？  

31 具备层次的图形化展现优于直白的文字描述

具备层次的设计能够将界面上重要的部分与不次要部分区分开来。要让界面井井有条，能够在这些方面作文章：对齐方式，间距，颜色，缩进，字体大小，元素尺寸等。当全部这些调整运用得适当时，能够提升整个界面的可读性。相比在一个很直白的界面上用户一眼就能够从上瞟到底的设计，这样分明的设计也可让用户放慢速度来慢慢阅读。这样也使界面更有特点一些。就比如一次旅行，你能够乘坐高铁快速到达景区（从页面顶部瞟到底部），但你也能够慢行以欣赏沿途风光。因此井井有条的设计让眼睛有能够停留的地方，而不是对着空白单调的一个屏幕。

32 将有关联的功能分组而不是杂乱无章

将各个功能项分组合并起来能够提升程序的可用性。有点常识的人都知道刀子和叉子，或者打开文件和关闭文件是放在一块儿的。将功能相近的元素放在一块儿也符合逻辑，符合咱们平时的认知。  

33 使用内联的验证消息而不是提交后再验证

在处理表单时，最好当即检测出用户所填写内容是否符合要求而后给出验证消息。这样错误一出现能就能获得改正。相反，提交后再检查表单会给出错误消息，会让用户感到乏力又要重复以前的工做。

34 放宽对用户输入的要求

对用户输入的数据，尽可能放宽限制，包括格式，大小写什么的。这样作能够更人性化一点，也使得界面更加友好。一个再恬当不过的例子就是让用户输入电话号码的时候，用户有不少种输入方式，带括号的，带破折号的，带空格的，带区号和不带区号的等等。若是你在代码中来处理这些格式的问题，代价也只是你一我的多写几行代码而以，却能够减小无数用户的工做量。

35 让用户感受须要快速作出响应而不是毫无时间观念

适当的紧迫感是个有效的战术可让用户当即作出决定而不是等上个十天半个月。重要的是这种战术屡试不爽，由于它暗示了资源的紧缺或者活动的时间有限，今天能够买，但明天可能就没法这么低价了。另外一方面，这一战术也让用户感到会错失一次大好的机会，再一次，应用了人们惧怕失去的本性。固然，这种战术会被一些人嗤之以鼻，认为是不耿直的作法。不过，这只是种战术而以，而且在保持合法性的前提下应用也无伤大雅。因此请不要为了营销而在界面上制造紧迫的假象。  

36 使用饥饿营销

物以稀为贵。饥饿营销给出的信息就是东西很少，只剩几件，明天再来，可能没了。你去比较一下批发与限量版的东西他们的价格差距有多大就知道了。回过头来看，那些批发商或者大零售商，他们也使用饥饿营销，以得到更好的销量。但在软件行业，咱们常常会忘记有饥饿营销这回事。由于数字产品是能够很容易拷贝复制的，不存在缺货的状况。其实，在界面设计中，也能够将其运用起来与现实中的资源紧缺进行联系。想一想一次网上研讨会的门票，想一想你一个月能够服务的人数限制，这些信息均可以告知用户是有限的。  

37 让用户选择而不是从新填写

这一界面设计中的经典准则是有心理学依据的，相比要让某人回想一想某样东西，从一堆东西中认出某样东西会更容易些。辨识出同样东西只须要咱们稍微回忆一下，经过一些线索就能够完成。而回想则须要咱们全面搜索本身的大脑。也许这也是为何试卷上选择题会比简答题作得快的缘由。因此试着在界面上展现一些用户以前涉及到的信息让他们进行选择，而不是让他们想半自然后本身填写。   原文地址：Good UI  http://goodui.org