一个好的界面设计应该拥有高转化率且方便用户使用,换句话说:既能达到商业目的又能满足方便易用的要求。国外设计咨询公司根据自己的客户案例,总结了74项经过实践证明的原则。
布局篇
1. 使用单栏布局代替多栏布局
单栏布局能够让用户对全局有更好的掌控,对内容一目了然。而多栏布局可能会分散用户注意力。最好的做法是用一个有逻辑的叙述来引导用户并在末尾放上你的行动按钮。
2. 合并重复的功能,避免分散
随着时间的推移,不可避免的你增加了很多模块、元素,而且功能相同。碎片化的界面会增加用户的学习曲线,所以需要合并重复的功能,重构你的界面。
3. 重复你的主行动按钮
多次重复主行动按钮的方法适用于界面很长或者分页的情况。
4. 区分开可点击和已选择的样式
视觉风格,如颜色、深度和对比度都可以当做可靠的线索以帮助人们了解你的导航界面:我在哪里,我能去哪里。为了让用户清晰,可点击元素(链接,按钮)、已选择元素(选择的菜单)、以及纯文本的样式应该是彼此明显不同,而且在界面上要保持一致性原则。在视觉上,我们一般认为蓝色表示可被点击,黑色表示已被选择或是什么。
5. 使用恢复功能代替弹出对话框
假设你刚点击了一个链接或者按钮,撤销操作可以让操作流畅自然,也更符合人类的本能。而每次操作都弹一个确定框则好像是在质问用户你明白不明白这个操作会产生什么后果。其实只有极少数情况下才会发生误操作。所以,为了防止误操作而设计的确认窗口其实是不人性化的,用户每次操作都需要进行毫无意义的确定。所以请考虑在你的产品里实现撤销操作来提升用户的操作友好度吧。
6. 界面要对比鲜明让人容易区分
把主要功能区从界面中突出显示出来效果会好很多。使你的主要口号醒目有很多种方法。通过明暗色调的对比来突显。通过为元素添加阴影、渐变等效果让界面富有层次感来张显主题。最后,你甚至可以在色相环上专门选择互补色(比如黄色与紫色)来设计你的界面,以达到突出重心的目的。综合所有这些,最后得到的界面会使你的主要意图与界面其他元素有明显的区分,得到完美的呈现。
7. 让点击区域更大
像链接,表单的输入框还有按钮等,如果尺寸做得大一点则点击起来更方便容易些。根据费特定律,使用像鼠标这样的外设来点击需要一些时间,特别是元素比较小的情况下,时间会更多。鉴于此,最好还是把你的表单输入框,按钮等做大点。抑或者你可以保持原有的设计不变,只是把元素可点击区域(也就是热区)增大。这样的一个典型例子是手机设备上的文本链接和导航菜单,它们文字不一定很大但背景是拉伸的,在很宽范围内点击都有效。
8. 精简表单填写内容
人本性懒惰,没人愿意填写一大堆表单字段。表单中每个字段都会有失去用户的风险。多想想是不是每个字段都是必须的。如果你确实需要一大堆信息让用户填写,试着将它们分散在不同页面,在表单提交后还可以继续补充。
9. 暴露选项而不是隐藏
你使用的任何一个下拉框都会对用户造成信息的隐藏,需要额外的操作才能显示。如果这些信息是贯穿整个操作所必需的,那你最好把它展示出来做得更显而易见一点。下拉框最好用在选择日期,省份等约定俗成的地方。对于程序中重要的选项最好还是不要做成下拉形式。
10. 把界面做得环环相扣要好过直白的排版
一个平淡无奇行文无疑会让用户失去兴趣而放弃继续阅读。单列滚动的长页面是不错的,但是我们应该适当地设置一些小节,并且环环相扣,来提高用户的兴趣使其继续阅读。但需要注意的是节与节之间的留白不要太大。
11. 不要放太多链接分散用户注意力
为了满足各式用户的需求,在页面上放些链接链到这里、链到那里是常见的做法。如果你的主要目的是想让用户点击页面最后那个下载按扭什么的话,就需要三思了。因为用户可能点击了其他链接离开页面了。所以你需要注意页面的链接数量,把导航和操作链接用样式区分开,尽量移除页面不需要的链接。
12. 将操作的状态或者进度呈现出来
现如今大多界面当中已经呈现了各色样式的进度条或者标明状态的图标,比如邮件有已读或未读的状态,电子帐单有支付或未支付的状态。而在界面上呈现这样的状态对于用户来说是很有必要的。这样用户就可以知道某些操作是否成功,接下来准备进行怎样的操作。
13. 使用直观的操作而不是缺乏上下文关联的菜单
直接在元素身上进行操作是更直观明了的方式。比如在一个列表中,我们想让用户对每个条目进行操作那么就把按钮放到当前条目上,而不要把放到列表之外。再比如就是直接点击元素就进入编辑状态(比如页面上的地址信息点击后可以进行编辑)。这种方式比传统的选中再点击相应的按钮进行操作要简洁省事得多。当然,对于一般性的操作本身就不需要有什么上下文的,就没必要这么做了,比如页面上的前进,后退按扭。
14. 尽量直接显示表单而不要额外页面
在一个足够大的宽屏界面上最好还是直接给出表单,这比点击按钮再弹出表单要好很多。首先减少了点击操作,流程变得简洁也节省了时间。其次,直接呈现出表单可以让用户知道表单有多长,其实也是在告诉用户注册花不了多少时间。当然,这条规则适合注册表单非常简单的情况。
15. 让界面平滑显示而不要死板地呈现
用户进行操作过程中,界面上的元素会经常出现,隐藏,打开,关闭,放大缩小移位等。给这些元素增加些自然的动画,淡入淡出效果不但美观,也更符合实际,本来元素尺寸位置的变化就是一个需要时间的动画过程。但要注意动画时间不要设置过长,那样会让想尽快完成操作的用户不耐烦。
16. 使用逐步的引导代替突兀的注册
与其让用户马上注册,何不让用户先进行一些体验式的操作呢。这个体验过程可以展示程序的功能,特性等。一旦用户通过简单几步的操作了解了程序的价值所在,那么它会更愿意填写注册表单的。这种循序渐进的引导可以尽量推迟用户注册的时间但又可以让用户在没注册的情况下进行个性化设置等简单操作。
17. 减少边框避免浪费注意力
过程边框会喧宾夺主。不用说,边框确实在划分区域进行版块设置时有很大的作用,但同时其明显的线条也会吸引走用户的注意力。为了达到划分版块又不转移用户注意力的目的,在排版时可以将界面上不同区域的元素通过空白进行分组,用上不同的背景色,将文字对齐方式进行统一,还有就是为不同区域设置不同的样式。当使用所见即所得的界面设计工具时,我们经常在界面上方便地拖出很多区块来,这些区块多了就会显得杂乱无章。所以我们又会到处放些横线来分界。一个更好的做法是将区块垂直对齐,这样做不会让那些多余的线条来扰乱视觉。
18. 要设计好没有数据时的展现
界面上经常需要呈现不同数量的数据,从0,1,10,100到10000+等。这里存在个普遍的问题就是:在程序最开始使用的0条数据到过度到有数据之前,该如何进行显示界面。这也是我们经常忽视了的地方。当程序初始没有数据时,用户看到的就是一片空白,此时用户可能不知道该进行哪些操作。利用好没有数据的初始界面可以让用户学习和熟悉如何使用程序,在程序中创建数据。力臻完美永远是我们追求的目标,界面设计也不例外。
19. 保持界面一致性,不要增加用户的学习成本
自从Donald Norman的一系列著作面世后,界面设计中尽量保持一致性成了一个普遍遵循的准则。在设计中保持一致性可以减少用户的学习成本,用户不需要学习新的操作。当我们点击按钮,或者进行拖拽操作,我们期望这样的操作在整个程序的各个界面都是一致的,会得到相似的结果出来。不过在让界面变得一致之前,记住一点,适当的打破整体的一致性也是可取的。这偶尔的不一致性的设计用在你需要强调的地方可以起到很大的作用。所以世事无绝对,我们应遵从一致的设计准则,但适当地打破这种常规。
20. 使用合适的默认值,减少用户的额外操作
适当的默认值和预先填充好的表单字段可以大量减少用户的工作量。在节省用户宝贵的时间上面,这是种非常常见的做法,可以帮助用户快速填完表单或者注册信息。
21. 遵循惯例避免重复造轮子
界面设计中遵从惯例跟之前的界面一致性准则很相似。如果我们遵从了界面设计中的一些约定,用户用起来会很方便。相反,不一致和没有遵从惯例则会提高学习成本。有了界面设计中这些约定,我们想都不用想就知道界面右上角(大多数情况下)的叉叉是关闭程序用的,或者点击一个按钮后我们能够预测到将会发生什么。当然,惯例是会过时的,随着时间的推移,同样的操作也有可能被赋予新的含义。但要记住,当你在界面中打破这些常规时一定要目的明确,并且出发点是好的。
22. 具有层次的图形化展示优于直白的文字描述
具有层次的设计可以将界面上重要的部分与不次要部分区分开来。要让界面层次分明,可以在这些方面做文章:对齐方式,间距,颜色,缩进,字体大小,元素尺寸等。当所有这些调整运用得适当时,可以提高整个界面的可读性。相比在一个很直白的界面上用户一眼就可以从上瞟到底的设计,这样分明的设计也可以让用户放慢速度来慢慢阅读。这样也使界面更有特色一些。就好比一次旅行,你可以乘坐高铁快速到达景区(从页面顶部瞟到底部),但你也可以慢行以欣赏沿途风光。所以层次分明的设计让眼睛有可以停留的地方,而不是对着空白单调的一个屏幕。
23. 将有关联的东西分组避免杂乱无章
将各个功能项分组合并起来可以提高可用性。有点常识的人都知道刀子和叉子,或者打开文件和关闭文件是放在一起的。将功能相近的元素放在一起也符合逻辑,符合我们平时的认知。
24. 放宽对用户输入的要求
对用户输入的数据,尽量放宽限制,包括格式,大小写什么的。这样做可以更人性化一点,也使得界面更加友好。一个再恬当不过的例子就是让用户输入电话号码的时候,用户有很多种输入方式,带括号的,带破折号的,带空格的,带区号和不带区号的等等。如果你在代码中来处理这些格式的问题,代价也只是你一个人多写几行代码而以,却可以减少无数用户的工作量。
25. 优化页面加载速度,不要让用户等太久
速度很重要。页面加载速度和UI对操作的响应速度都直接关系到用户是否有耐心继续等下去。无疑地每多一秒种的等待都会失去一些用户或者机会。一个好的解决之道当然就是优化你的页面和图片。除此之外还可以运用心理学让这个等待时间显得不那么长。具体来说有两种技巧。一是显示进度条,二是展示其他相关或有趣的东西来吸引用户的注意力(就好比你沿着传送带走走总比傻站在原地盯着一个位置看要好得多吧)
26. 除了按扭外,建议增加快捷键支持
当你的程序广为流传,应该考虑下高级用户的感受。人们总是试图为一些重复性的操作找到更快捷的方法,快捷键就应运而生了。相比在界面上点来点去,快捷键无疑大大提高工作效率。一个好的例子就是现今流行于各个主流程序中的J(后退)K(前进)快捷键组合,比如在Gmail,Twitter和Tumblr中。按钮固然好,但快捷键会锦上添花。
27. 让进度条预设已经走了一部分
一件事越接近完成我们的动力越强,这被称为目标梯度效应。让人觉得自己已经取得了进展这件事宜早不宜晚。
28. 使用渐进显示而不是全部展开
渐进显示不让大量无关的信息直接暴露出来,而且展现的内容有上下文的关联,更容易让用户理解,不会一下展现太多表单把用户吓跑。
29. 替换模态对话框为更温柔的提示方式
虽然模态对话框更吸引用户注意力,但是也会带来一些其他问题,首先阻止了用户操作对话框之外的操作,而且打断了用户之前的操作动作,为什么不尝试行内或滑出等不那么碍眼的提示方式呢?
30. 尝试多功能控制而不是分成很多功能块
例如可以在输入框里实现筛选过滤的功能,而不用增加额外的筛选菜单。打分功能里增加悬停显示功能而不是增加额外的显示模块。但是不要滥用,否则会增加用户的学习曲线难度。
31. 尝试增加图标文本
图标和文字在一起可以减少很多歧义,比如以下下箭头到底是表示往下移?降低优先级还是下载呢?或者” X “图标代表删除?禁止还是关闭呢? 当用户没有时间理解你界面图标表达的意思的时候问题就麻烦了,所以为了理解,最好图标要配上文本,如果空间实在不够,可以用悬停图标显示提示文本的方式展现。
32. 尝试使用更自然的语言代替干瘪的文本
自然语言比简短、严格的短语更方便用户理解。
33. 让表格对比清晰明确
表格应该显示出最相关的属性差异,有助于用户做出单个决定。
34. 显示一组而不是单独的一项
人有收集东西的癖好,无论是物理的还是虚拟的。收集一整套东西会自然的成为奋斗目标。通常获得一整套东西带来的收益增加(蛋糕比其单独的成分更大、更好)。通过显示过去的收获也会增强以后的行为动机。
35. 使用宽松的间隔避免元素挤在一起
空白的填充可以让内容和表格的可读性更好,广泛适用于列表、表格、段落等元素。
36. 使用响应式布局避免静态布局
没有什么比出现横纵双滚动条更糟糕的页面了,让页面支持的响应式布局,这样在各种大小的移动设备上都能良好的显示。
37. 让视觉效果清晰明确
让不同的元素成组,使用不同的字号,使用不同的色调,让视觉效果清晰明确。
38. 让你的界面可纠错
出错是难免的,所以用户界面应该允许细微的纠正。如更换账号或更换地址等
39. 增加重试和重做的功能
例如:当上传图片时候,文件上传失败或者对上传的图片不满意想换一张的时候,重试和重做就很有必要。
40. 把过多的选择去掉
更多的选择让决策越难,甚至还会降低满意度,因为这让后悔和自责倾向增加。著名的果酱研究实验一次次的被验证。