【译文】优秀Web设计的69条设计原则

web-ui-design-princs-00

译者:陈涛

好的设计能够帮助企业提升数据,同时还可以提供用户一个良好的使用体验。GoodUI 总结了一个长达69条设计原则的清单(不断增加中),列举了他们认为非常重要的设计要点。

与以往的一些文章不一样的是这里提到的69点其中有一部分 GoodUI 已经通过 AB Test 验证过可行性。当然分析报告是需要付费的,单篇39美金。

不过今天讨论的重点并不是付费报告,而是这69条设计原则。我按照自己的理解将它们翻译成了中文并配上图片,希望对大家有所帮助。

本篇文章内容及图片均来自于GoodUI,如有翻译不恰当的地方欢迎大家指正。

 

01 尝试使用一列的布局替代多列布局

web-ui-design-princs-01

02 给用户一些小的利益,别看上去那么赤裸裸

web-ui-design-princs-02

03 合并相似的功能

web-ui-design-princs-03

04 尝试展示来自用户的赞扬,而不是自我表扬

web-ui-design-princs-04

05 重复核心行动点

web-ui-design-princs-05

06 统一视觉规范,提升可识别性

web-ui-design-princs-06

07 尝试使用推荐的口吻,而不是让用户感觉面对一台冷冰冰的机器

web-ui-design-princs-07

08 给用户吃「后悔药」的机会

web-ui-design-princs-08

09 告诉用户产品适用的人群,而不是人人都通用

web-ui-design-princs-09

10 将文案写得更加的直接,而不是一堆废话

web-ui-design-princs-10

11 增强主行动点的视觉冲击力,提升它在页面中的可对比性

web-ui-design-princs-11

12 让用户知道你从哪儿来更易于拉近与用户的关系

web-ui-design-princs-12

13 将表单做的简单点,确保用户在抓狂之前能进入下一步

web-ui-design-princs-13

14 尽量将用户需要选择的信息展示出来而不是藏起来

web-ui-design-princs-14

15 页面的排版需要考虑用户是否会漏掉底部信息

web-ui-design-princs-15

16 如果页面的底部有需要关注的行动点,别让文中过多的外链带走了用户

web-ui-design-princs-16

17 确保用户知道自己目前的状态

web-ui-design-princs-17

18 将利益点融合在行动点中,增强用户的点击欲望

web-ui-design-princs-18

19 将行动点与当前信息结合起来

web-ui-design-princs-19

20 将简要的表单合并到页面中,减少调整页面带来的用户流失

web-ui-design-princs-20

21 适当的增加延迟动效,让用户感知到页面的变化

web-ui-design-princs-21

22 让新用户从尝试产品入手,而不是一来就面对冷冰冰的注册表单

web-ui-design-princs-22

23 减少使用线框,这会过多的吸引用户注意力,而且会让页面看上去透不过气

web-ui-design-princs-23

24 给用户推销你能给他带来的利益,而不是功能

web-ui-design-princs-24

25 一定要注意0结果页面的设计,这也是引导用户的好地方

web-ui-design-princs-25

26 给用户选择退出的权利,特别是邮件订阅

web-ui-design-princs-26

27 注意界面元素的一致性,降低用户学习成本

web-ui-design-princs-27

28 给下拉框增加一些预设值,降低用户填写成本

web-ui-design-princs-28

29 延续用户日常的使用习惯,而不是重新创造

web-ui-design-princs-29

30 尝试告诉用做些事情降低自己的损失,而不是提升收益

web-ui-design-princs-30

31 提升页面的视觉层次,增强可阅读性

web-ui-design-princs-31

32 将同类的操作合并在一起,降低用户的认知成本

web-ui-design-princs-32

33 表单及时校验,而不是统一提交后在告诉用户填错了

web-ui-design-princs-33

34 尝试将表单输入变得更加宽容,让用户的填写更加简单

web-ui-design-princs-34

35 通过时间增强紧迫感

web-ui-design-princs-35

36 提供用户可预见性的操作,降低用户的心理成本

web-ui-design-princs-36

37 尽可能的帮助用户选择,而不是让用户想破脑袋

web-ui-design-princs-37

38 尽可能将操作区域放大,降低用户操作成本

web-ui-design-princs-38

39 页面加载速度很重要,尽可能让用户感受到你的网站速度很快

web-ui-design-princs-39

40 如果可以,增加键盘快捷键,提升操作效率

web-ui-design-princs-40

41 尝试通过对比来让用户感知到性价比

web-ui-design-princs-41

42 尝试对进度条进行「设计」来降低用户等待的焦虑

web-ui-design-princs-42

43 根据用户选择逐步展示信息,降低无效信息对用户的干扰

web-ui-design-princs-43

44 有时候较小的承诺比「夸海口」会更容易让用户信服

web-ui-design-princs-44

45 尝试将提示信息弱化,减少对用户操作的干扰

web-ui-design-princs-45

46 尽量通过系统的功能来简化用户的操作

web-ui-design-princs-46

47 用文本配合图标来降低用户的认知成本

web-ui-design-princs-47

48 用更自然的语言代替冷冰冰的机器

web-ui-design-princs-48

49 放出一些摘要信息来帮助用户识别是否需要进一步了解

web-ui-design-princs-49

50 在关键的页面增加用户权益信息,增强用户进一步操作的信心

web-ui-design-princs-50

51 将价格进行换算,让用户感觉这很便宜

web-ui-design-princs-51

52 记得在成功页面感谢用户

web-ui-design-princs-52

53 将数字转化成易于用户阅读的形式,而不是冷冰冰的机器语言

web-ui-design-princs-53

54 告诉用户选择的权利和自由「诱惑力」

web-ui-design-princs-54

55 尝试让语言更具「诱惑力」

web-ui-design-princs-55

56 通过设计引导用户的注意力

web-ui-design-princs-56

57 通过友好的对比来展示产品,为用户做决定提供帮助

web-ui-design-princs-57

58 通过任务机制来提升用户的满足感

web-ui-design-princs-58

59 让用户了解接下来将要发生什么事情

web-ui-design-princs-59

60 尝试用更幽默一些的语言文案

web-ui-design-princs-60

61 任何操作之后都要给出反馈,让用户知道操作已经生效

web-ui-design-princs-61

62 注意动效的真实使用情况(Amazon 的类目菜单就是一个很好的例子)

web-ui-design-princs-62

63 注意排版的,不要让信息过于拥挤

web-ui-design-princs-63

64 尝试用讲故事的方式来传递信息,增强用户的代入感

web-ui-design-princs-64

65 尽量给用户展示真实的信息,不要欺骗

web-ui-design-princs-65

66 随着用户的不断熟悉简化界面

web-ui-design-princs-66

67 试着用用户的口吻展示信息

web-ui-design-princs-67

68 在表单中增加一些提示信息,减少错误的几率

web-ui-design-princs-68

69 最后,用简单的文案传递核心关注的信息,少一些废话

web-ui-design-princs-69

这69条设计原则虽然针对 Web 设计,但有些部分在移动产品设计中同样有效。翻译过程只保留了图片和标题,更多详细内容可以访问 GoodUI 官网:http://goodui.org/

 

文章编译来源:知乎专栏
 

 

 

发表评论

您的电子邮箱地址不会被公开。