如何作好的设计

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

本文的目的是为了给非专业设计人员（前端 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 指代明确

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

---

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