论一致性设计那些事

大纲如下

• 为什么ui要有一致性设计

• 一致性设计的好处

• 一致性的规范

• 颜色

• 字体

• 组件

• 交互场景

本文篇幅较长不喜欢勿喷

为什么ui要有一致性设计

大家有没有听说过一次性设计

一次性设计就是，我今天投入成本完成了一个界面或者营销需求，但也只是完成了这个需求而已，今后再碰到类似的需求依然吃瘪，还得重新投入一轮成本。这种设计就好像一次性的碗筷，用后即扔，非常非常得低效，它不仅没有办法复用，而且无体系、非模块的处理方式非常摧残设计师的精力。

所以保持一致性设计也是可以提升操作的一致性、提高工作效率、延续品牌定位……而且一致性设计是UI和开发交接的一种很好的办法。

一致性设计的好处

对于开发团队而言

1.复用资源，降低设计成本

很多不同的界面中会用到同一个资源，如果见一个重做一个，会很大程度浪费设计的人力资源

2.产品风格及体验不易出问题

因为资源的复用，能基本保证整个产品的风格不跑偏，而在用户体验上，也起码能保持在一贯的水准

3.新人可以快速上手

比较大型的项目中如果人员流动率较高，一致性就相当有必要了。新人先阅读规范后更容易展开工作，根据一致性也能更快了解当前产品

4.程序能提高开发速度

主要也是因为能够复用自用资源，有些界面和控件，程序甚至无需找设计出资源，在产品策划指导下可直接开发

对于用户而言

1.对界面和功能操作的认知统一，学习成本低

熟悉过主要界面/功能后，在其他界面/功能中能基本自由操作

比如在北京开车是靠右行驶，到上海你不用学就知道也是这样。因为中国道路交通相关法律中对此是做了统一规范的。要是这一点不一致的话，到上海突然让你靠左行驶，你肯定要适应一段时间并难免犯错.....

2.提高操作效率

在降低了认知成本后，用户很容易就熟悉了产品的设计风格，那么操作起来自然也更容易上手，效率也更高

3.加强对产品（品牌）辨识度

别人一看很容易辨识出：哦，这是某某等那个产品

常见的产品中保持一致性设计的例子非常多，相信各位天天见，我就不啰嗦了。

一致性的规范提现在哪里

什么是设计规范？

设计规范是一个老生常谈的话题了，网上相关的文章也非常多，但我相信有很多设计师对设计规范的理解还是比较模糊，认为设计规范指的就是字体，颜色，控件规范那些，这种理解其实是比较狭隘的。

于我而言，设计规范用一句话总结就是：设计规范是针对特定产品所制定出来的一整套产品标准，包括流程标准，技术标准，设计规则等等。

今天就只来说最基础的几个小方面（也算是干货满满了）

• 颜色

• 字体

• 组件

• 交互
  

其他的一些需要大家根据自己的产品定义

颜色

颜色的搭配和选择影响着产品最后呈现出来的视觉效果，合理的颜色配比能加深用户对品牌的印象。色彩无处不在。

那我们如何去定义颜色规范呢，下面本人分享一套规范，小伙伴们可以根据自己的产品进行套用（如果不对大佬勿喷，一起学习）

1.定义基本的颜色

首先要定义基本色。理想情况下应该有1-3个基本色与产品相关联。

基本颜色的使用场景主要是

• 突出显示重要的界面状态或信息

• 在交互方面：如文本字段切换、复选框等

• 提供视觉反馈，如新的消息等

2.60%30%10%配色原则

根据数据反馈60%+30%+10%是是整体画面最有平衡感，也是用户最满意的方案引导用户的视线从一个CTA区域平滑移动到另一个区域。

如图

按其他顺序搭配，它仍然有效

3.了解受众

好的用户体验的关键是理解受众。颜色在这里起着重要的作用，因为颜色的选择会影响用户与产品交互时的感受和情绪。

• 你需要考虑的问题

• 谁是你的目标受众？

• 他们的年龄？

• 产品的专业化是什么？

• 你想让产品唤起什么样的情感？

注意：与团队讨论选择时，请始终关注这些问题。

4.色重对比

如果你想把用户的注意力集中在特定的操作上，最好使用强对比度的颜色来帮助用户找到焦点。

通过这种小技巧检查颜色的饱和度，能看到别人看不见的东西。

5.命名方式

另外分享一些将图像生成调色板的实用工具：

• Coolors.co/image-picker（Web app）

• Alembic(Sketch插件)

• Image-Palette(Figma插件)

  
  

字体

在项目中文案风格也要和产品定位统一，各个界面出现的文字提示等要风格统一。

主要从五个方面入手

• 类型

• 字号

• 字重

• 行高

• 行宽

类型

iOS设备的系统默认字体，中文为苹方，英文&数字为SF UI Text。

Android设备系统默认字体，中文为思源黑体，英文&数字为Roboto。

字号

不同的使用场景，文字的字号也不相同。文字的主使用场景分为：一级标题、二级标题、三级标题、正文和提示文字 。

通常最小字号为12px也有文字最小字号为11px的，特殊情况下，字号为10甚至可能更小，例如标签里面的文字。

字重

字重就是指字体笔画的粗细。字重的等级是用来标明同一字体家族中不同粗细笔画的字型。

UI设计中，常用的字重有两个，一个是常规（Regular），另一个是中黑体（ Medium）。

正常文字使用常规体（Regular）。当需要突出层级展示，增加对比时使用中黑体（ Medium），中黑体（ Medium）常用于标题。

行高

字号大小等于文字高度，如下图所示，字号为16时，行高设置为16，那么其行高也是字体本身的高度（16pt）。

如下图所示：行间距距离文字上方为3pt，行间距距离文字下方也为3pt。字体高度为16pt。

举个例子，设计一个标签时，当字号为14时，行高为20，那么为了保持视觉上字体到四周距离相同，那么上下间距为4，左右间距为8。

因为行间距的存在，不能将上下间距和左右间距设置相同。

如果行高设置为14（文字本身大小），那么上下间距应该也为8pt，而非4pt。

下图是Sketch默认字号和行高对照表

行宽

行宽=字体宽度+两侧距离字体的宽度

将行宽拉长，代表着设置了文本内容范围，文本距离右侧语音图标为12pt，表示当文字内容距离语音图标12pt时，文字打点或截断展示。

组件

组件的使用场景有很多今天借一个例子来分析和总结，让大家了解和认识组件的使用和规范。

那就来个最基本的：顶部栏设计

• 组成

• 变化

• 交互方式

来认识组件的模式和规则

顶部栏的常见样式

顶部栏是什么样子，它由什么组成？

通常，顶部栏提供有关此页面总体的信息，以及用户可能对该页面进行的潜在操作。常见的顶部栏如下所示：

顶部栏中常见的组件包括：标题、容器、操作项、导航图标等，接下来为大家逐一介绍各个组件的使用。

顶部标题通常与底部导航一起使用，共同解释页面的信息。

如果一个页面中底部导航只有图标没有文字解释，用户有可能不了解图标的意思，那么解释页面信息的重任就落在了顶部栏的标题上。

大多数情况下，标题位于顶部栏的中间，有时也会在左上角有一个很大的标题作为导航（IOS应用中）。除了解释页面的目的，大标题还可以用于品牌推广。

标题也可以解释用户在这个页面上执行的操作。例如，当用户想修改个人资料时，标题会显示“edit profile”，用来解释操作。

有时，在顶部栏主标题的下方会有补充文本，这样方便为用户提供更多的信息。

容器的趋势越来越不明显。容器通常是灰色或者不饱和的颜色，有时容器也会使用品牌主题色，起到宣传和推广品牌的作用。

操作项通常以图标和文本按钮的形式出现在顶栏上 ，当需要时可以在顶栏上显示0-4个图标或文本按钮。

在不同的页面中操作项可能代表不同的含义，但一些常见的图标/操作遵循着一定的规则：

1、返回：当用户进入第二/第三层级页面时，“返回”通常出现在左上角。单击“返回”图标可引导用户回到原始页面。

2、关闭或取消的位置不固定，可以在左侧也可以在右侧，具体取决于是否有其他操作。

这里讨论一个常见的问题，顶部栏中“返回”和“关闭”分别应该在什么情况下使用：使用“返回”：当用户在一个漫长的探索过程中需要不止一步的操作，或者在该页面上没有一个简短而明确的目的时。使用“关闭”：表示一个完整的单页操作，它有明确的起点和终点，在页面上执行特定的操作实现特定的目的。

3、个人资料或帐户有时会出现在顶部栏上，以方便用户编辑个人信息，设置或切换帐户。

4、添加或搜索可帮助用户浏览更多内容或者扩展他们感兴趣的区域，通常出现在右上角作为易触摸的目标。

需要注意的一点是，为了避免引起不必要的关注，顶部栏上的图标/文本按钮通常是线性图标而不是填充图标，并且是非饱和颜色。除非它们确实想吸引用户的注意，或者为了提示用户进行操作。

搜索顶部栏 

使用App时我们会发现，有的页面顶部栏中没有标题，而是增加了一个搜索框(淘宝首页)。

根据特定的需要，可以将搜索用在不同页面的顶栏上，因为它在用户浏览内容时为用户提供了更多的价值。

什么时候放弃使用顶部栏？

当顶部有很多内容时，一些App会让顶部栏变得非常简单甚至完全舍弃。

在Robinhood顶部显示最重要的用户信息——每日投资增长，右上角只有一个提示文本按钮，用来邀请好友。

放弃使用顶部栏的常见案例是个人资料页面。这样做的目的是自我暗示，这个页面自己可以掌控，个人信息在顶部占据了很大的空间。

顶部栏的交互模式

一个页面中可以有很多交互发生，有时顶部栏需要通过改变样式或内容来反映交互动作。

反映滑动位置 

下滑出现顶部栏:当顶部栏有许多重要信息但又占用大量空间的情况下，顶栏的内容可能会根据滚动位置而变化。当用户下拉页面以获取更多内容时顶部栏会出现。

下滑隐藏上拉出现:另一种形式是在Google搜索中，用户向下滑动顶部搜索框会隐藏(Google猜测用户希望集中精力浏览内容)，但是只要用户向上滑动，中止浏览过程，顶栏搜索框又会出现。

不管交互形式如何，这类顶部栏能在用户需要时快速显示：

• 用户可以进行搜索功能或常见操作；

• 标题/重要信息作为参考，提醒用户在哪个页面。

下滑隐藏顶部栏:对于那些不会影响用户需求和操作求的顶部栏，通常会随着页面的向下滑动而隐藏。

星巴克顶部有一个令人愉快的问候语，当用户向下滑动并尝试选择要喝哪种咖啡时，它会随着页面滑动而消失。

Airbnb会在顶部展示房屋图片，以便给用户留下深刻印象，但是当用户向下滑动时，顶部的图片也会跟着滑动。

反映当前页面的变化 

有时，顶部栏的信息会根据内容的变化而实时发生改变。

最常见的案例是收到消息时的反馈：在微信中，顶部标题会显示用户收到信息数量的变化；Instagram通过顶部小红点的变化来展示收到的消息。

交互式顶部栏

作为页面中必不可少的一部分，交互式顶栏减轻了页面中其它元素的负担。除了常见的图标或文本按钮(添加、取消、后退)的变化，在顶部栏中还会发生哪些有趣的交互？

互动标题 

有的产品服务非常依赖于用户的偏好、位置，例如常见的外卖或打车软件。

在这种情况下，App通常依靠用户的初始输入来决定显示的内容，用户也可以直接在顶栏标题上编辑信息。

交互式图标/文本按钮 交互式图标/文本按钮意味着用户可以在顶部栏上执行某些操作，而不必离开此页面。在robinhood中用户可以在不用切换页面的情况下，直接选择购买股票要用的计算方法，或者把页面上的股票添加到自己的收藏中。

顶部导航 

有的App希望在一个页面中能显示多个平行的内容，所以会在顶部栏上设置多个选项，实现更方便的导航。

常见的顶部导航包括分段控件和标签导航:

分段控件导航选项一般不支持左右滑动,选项较少，；标签导航选项的设计更多样，支持左右滑动切换。

https://www.xueui.cn/experience/app-experience/top-bar-ui-design-patterns-and-rules.html

研究过程可能会花费很多的时间和精力，却能让我们真正受益。

总结

一致性设计大方向为产品有更杰出的体验，在保证用户体验良好的同时，我们需要与同类产品做出差异化竞争设计，这就需要我们平时多观察互联网设计趋势，国外设计趋势，集合自己品牌去打造一套好用的产品。

这里推荐几个必看的大厂设计规范官网，建议收藏。

苹果iOS设计官网：https://developer.apple.com/design/human-interface-guidelines

谷歌Material Design设计官网：https://material.io/design

微软Fluent Design System设计官网：https://www.microsoft.com/design/fluent

IBM设计官网：https://www.ibm.com/design/language

Facebook设计官网：https://design.facebook.com

蚂蚁金服设计官网：https://ant.design/index-cn

其实，规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化，又要在设计的过程中给用户制造惊喜。比如，整个UI的配色和字体需要保持统一，但在一些图形，动效上可以做出亮点，让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是需要一个动态平衡的过程。

最后希望打大家做一个有思想的设计师呀~点个赞呗

部分参考

https://www.xueui.cn/tutorials/color-tutorial/attract-users-and-increase-stickiness-through-color.html

https://www.xueui.cn/design-theory/style-guide/ui-text-design-specification.html

http://www.woshipm.com/ucd/647138.html

https://mp.weixin.qq.com/s/Dbyq5lL4-lEB-6BOjTJM_w

http://www.woshipm.com/pd/3293943.html

https://www.xueui.cn/design-theory/style-guide/design-specifications-should-be-understood-in-this-way.html

https://mp.weixin.qq.com/s/Ub_-h4KCFJ1FZuZ9CdN5Yg 

https://www.xueui.cn/design-theory/shejiyuanze/how-to-do-consistency-in-ui-design.html

https://www.xueui.cn/experience/app-experience/top-bar-ui-design-patterns-and-rules.html