本文说的“设计”只是狭义的特指互联网行业中的交互和视觉设计；

本文的目的是为了给非专业设计人员（前端 or 后端 or ....）提供一些让你的交互和视觉更好的方法（相对于自己捣鼓）。当然，任何剥离具体场景的最佳实践都是耍流氓，还是需要具体情况具体分析的，莫要较真 o(╥﹏╥)o

因为本人也是一个前端开发工程师，非专业设计人员，本文仅代表个人看法，如果能给你一些帮助那是我希望的，如果你觉得你对这部分有更深刻的见解，可以左上角或者私信。

本文是结合 Ant Design 官网 和自己的见解写的，文中一些语句和配图都是出自：ant.design/components/… ，因为涉及到的案例太多，所以还在慢慢积累素材。侵删~~

开始关注用户体验是去年和 D2 大会同一天举办的 蚂蚁金服体验科技大会，虽然没有到现场，但是光看 PPT 和视频就感慨设计师这个职业就和后端对我们前端说“原来你们不止是画页面的呀”一样一样的（虽然我现在仍然是一个切图仔 /(ㄒoㄒ)/~~）

好的设计不止是说一句“这样设计好看”，而是有一定的设计标准和原则。

比如：为什么 Ant Design 推荐主字体字号是 14px？ 不是设计师的一句：我看这个字号顺眼。而是基于电脑显示器阅读距离（50cm） 以及最佳阅读角度（0.3）计算出最佳字号，保证多数常用显示器上用户阅读最佳体验。

然后找到了 Ant Design 的官网，看到了右上角的 “设计语言” 点进去，仿佛发现了宝藏 !

因为之前是做 B端 相关的业务，很多的需求都是产品只给 PRD，最终页面虽然是靠组件拼接起来的，但是还是感觉“很丑” 原因就是没有遵循一些设计规范；

在详细阅读了 “设计语言” 和 林外 大佬的一些文章之后，感觉对如何做更好的用户体验有了更深的理解。

其实最开始关注用户体验的目的很简单：解决选择困难症，因为之前在 B端 做项目的时候，产品对交互和视觉的要求并不怎么高，很多时候都是一句话：“自由发挥”

那么问题来了， 十六进制的颜色值那么多，我要怎么选择？ 字号从 12px - 24px， 我要怎么选择？ 间距从 1px - npx， 我要怎么选择？

为了解决自己的选择困难症，开始慢慢关注用户体验和交互设计，原来这些都是有迹可寻的；

好的设计并不是简单的一句：我觉得这样比较好看，而是有一定的设计标准和原则； 所以我们就要探索怎么才能做出更好的设计

0. 什么是好的设计

对于什么是好的设计，一百个人心里有一百个哈姆雷特，但是有一点是大多数人的共识：自然

• 我不知道下一步该怎么操作？
• 我不知道我刚刚的操作的结果是什么？成功 还是 失败？
• “是否取消该订单？ 是 取消” 那我选择 “取消” 到底 有没有取消订单？
• ...

当你在使用某产品的过程中，遇到这些让你花费很长时间思考如何使用时，那么该部分的设计就是不好的。

我认为好的设计需要符合的首要条件是 —— 自然

• 让用户和人机交互的行为更加自然
• 将自然界中的客观规律运用到界面设计中

好设计比差设计更难发现，因为它是如此的自然，自然到你发现不了。 -- 林外

这里只想到了这一点，因为时间原因，还没有再去系统的归纳总结，只想到了这一个，先挖个坑

1. 极简：传达给用户最重要的信息

在当今信息爆炸的时代、用户每天接收到的信息都是数以万计的，所以一个好的产品、好的设计应该向用户展示最为重要的信息。

试想一下，如果你打开一个网页，密密麻麻的全是文字，那么你的第一反应会是如何？虽然展示的信息很多，但是有哪些是真正能被用户所接收的呢？

在当今社会，如何能够精简信息，将最重要的信息传达给用户，才是我们应该思考的。

1. 设计极简

苹果就是一直以极简设计著称，下面是我随便在苹果官网截了几张图。

可以看出

• 在首页，就把当季推荐款推荐给你 —— iPhone 11 pro，并且只有这一款；
• 在“列表页”，一个产品占据一屏；并且只展示最基本信息，想了解更多可以 “learn more”
• 整个网站都使用同一种风格
• ....

我们可以看出，苹果的一些平面设计有以下特点：

• 保留最基本元素：屏幕上的元素越少，焦点越有效。根据此逻辑，如果你的屏幕只有一个元素，你可以确定这个信息一定可以传达到用户。
• 留白：不要睡得太晚，不要爱得太满~~
• 对比：你可以使用更少的元素进行设计，在创建视觉层次结构时需要更有创意 最少颜色：在简约设计中，我们使用颜色创造视觉兴趣或直接注意，而不添加任何额外的设计元素或实际图形。

重点信息重点放置、次要信息有迹可循放置、无关信息不要放置。

1.2 功能极简

上面是平面设计上的极简主义，在我们的应用的功能上也是如此；

比如 微信 发现页，之前是全部展示的，但是在 微信6.6.2 版本中增加了对 发现页的管理 设置。极大地减少了用户查找信息的时间。

根据用户自己的喜好来设置，能够很大程度的避免用户接收无用信息。

并且现在很多应用也都在做功能的减法，功能越纯粹的应用也会受到一些人的青睐；

提供最好的选择，但是要足够少，做产品设计如此，生活也是如此。

还是开头说的，具体情况具体分析，这里苹果可以在官网使用极简主义很大一部分原因是因为苹果的产品相对而言比较少，能够做到将所有的产品都展示出来；相反的，淘宝肯定就不能用这种方案。

同样的，功能的极简也是看你想解决用户的什么问题，如果你就是想做功能的聚合那也是没问题的，看你自己的受众群体和你设计的初衷。

2. 统一：减少用户的学习成本

更多将人机交互行为控制在无意识状态下，这样才能让人机自然交互。

2.1 颜色、字号

比如最基本的，一个系统要有自己的主题色、要有自己统一的布局风格、统一风格的 icon...

我个人觉得统一这些的意义在于：能够让页面中尽可能多的元素有自己的“语义”，形成统一的标准，减少用户大脑的思考；

这样在我们设计页面的过程中结构更加清晰，随之带来的是培养用户习惯，让用户的潜意识能够直接判断出设计者想要传达的含义，节省用户的脑力。

比如当用户操作后，在右上角有一个 绿色的 message，那么即使没有注明 “成功” 和 “错误” 用户也值得这是一个错误的标识。因为有 “X” 的 icon 和红色的主题色

同样的，如果你应用的字体颜色使用的很“正确”，那么用户如果只想看关键信息就会选择阅读颜色最深的（color-text-primary）、字号最大的。

如果用户更关心一些细节的描述，那么就会着重看颜色稍微浅一些（ color-text-secondary ）并且字号小一些的文字。相信你在购买机票或者保险的时候一定会找最不起眼的责任条款或者退款协议去阅读。

这样就自然给我们的产品信息进行一个分层，然后用户根据经验和潜意识就可以自然地知道你要传达的信息。

2.2 布局

还需要统一的就是布局，一旦使用了一种布局，就不要轻易改变，不然会让用户无所适从；

比如我们办公司的垃圾桶，一个是“可回收”一个是“干垃圾”，两个垃圾桶除了最上面的标签其他完全相同，

保洁阿姨经常会调换两个的位置，导致每次扔垃圾之前都要先看一下标签，不看就经常容易扔错。

2.3 文案表述一致

• 描述同一个事物的词汇要保持统一;
• 上下文的语法、语种、语序要保持统一;
• 操作的名称和目标页面标题的名称保持一致。

还是想要最开始说的那个案例，这个弹出框相信你一定是要思考一分钟或者有一次错误的实践才能选对。

这个的问题在于文案表述不一致，提示的内容是

“是否”取消该订单，但是给的选项并不是 “是” 和 “否”

3. 前馈: 让用户知道要做什么

有助于执行类的信息叫前馈（Feedforward）；有助于理解发生了什么的信息叫反馈（Feedback）。每个人都知道反馈是什么，它可以帮助你知道发生了什么事。但你怎么知道你能做什么？这就是前馈的作用。前馈是控制理论中借用的一个术语。

3.1 使用导航

导航就是在沙漠中的指南针，能在用户迷路的时候给用户指路。 在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。

• 导航菜单（Menu）
• 面包屑（Breadcrumb）
• 标签页（Tabs）
• 步骤条（Steps）
• 分页器（Pagination）

3.2 合理使用表单提示与帮助

3.3 提供邀请

• 新用户引导页
• 引导操作邀请
• 推论邀请：用于交互期间，合理推断用户可能产生的需求。
• 更多内容邀请：查看更多内容。

4. 反馈: 让用户知道做了什么

• 实时查询
• 实时反馈（eg:密码强度）
• loading

真的很想吐槽一些应用，没有反馈，根本不知道我的操作的结果成功与否，都要返回再去重新确认。

然后就是白屏这些没有处理好报错情况，会让用户不知道发生了什么。

5. 分类：减少沟通成本，让用户更快的接收信息

5.1 增加元素的亲密性：让用户对页面结构和信息层次一目了然

将关联性越高的元素放在一起

5.2 使用合理的对齐方式：引导用户视觉流向，让用户更流畅地接收信息

• 文案类对齐 —— 左对齐：统一视觉起点
• 表单类对齐 —— 冒号对齐：让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
• 金额数字对齐 —— 相同有效位数右对齐：快速对比数值大小

5.3 适当的增加对比：在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。

• 主次关系对比
• 总分关系对比
• 状态关系对比

5.4 重复相同的元素：快速识别元素之间的关联性

6. 简化交互：不打断用户心流

每多一次交互，用户的心流就可能被打断。特别是页面之间的跳转。

6.1 足不出户：能在当前页面完成的操作就不要进行页面跳转

• 页面内编辑
  • 当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』。
  • 当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
• 覆盖层
  • 删除确认（尽量避免使用 Modal，会打乱用户心流）
  • 详情一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。
  • 将所有的 流程处理 在一个页面内完成
• 嵌入层
  • 下拉框：将一些详细信息放入下拉框
  • tab：将消息分类，使用 tab 切换展示

6.2 简化交互

• 善于使用拖拽
• 列表排序
• 拖拽上传

7. 专业：开发者的必备素养

7.1 用词精准完整

• 通用基本用词要规范，不要写错字，词语表达要完整。
• 专业用语要精准，并是所属行业认可通用用词；时间的表述必须明确。

7.2 大小写和标点符号

• 英文名词大小写规范
• 统计数据使用阿拉伯数字
• 谨慎使用感叹号: 感叹号会让文案显得过于激动，容易让气氛变得过于紧张。

7.3 指代明确

不要在同一个句式中混用『你』和『我』，交互中指代混乱会让用户相当纠结。

复杂事情简单化；简单事情标准化；标准事情流程化；流程事情自动化，万事莫不如此。