优秀Web设计的69条设计原则

blank

优秀Web设计的69条设计原则

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

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

blankblank

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

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

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

blankblank

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

blankblank

03 合并相似的功能

blankblank

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

blankblank

05 重复核心行动点

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

35 通过时间增强紧迫感

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

blankblank

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

goodui.org/

blankblank

What do you think?

Written by marketer

「知+」推广全量上线,为企业带来全新内容营销⽅案

blank

运营工具篇|追热点做排版找图数据分析!!!