你真的觉得缺省页就只是缺省页吗？

棉花糖啊

杭州/UI设计师/4年前/2288浏览

版权

你真的觉得缺省页就只是缺省页吗？

棉花糖啊

全文一万四千多个字，请耐心阅读～

你真的觉得缺省页就只是缺省页吗？

｜你对缺省页了解多少？

这次！！！

不搞毒鸡汤了！！！

发自灵魂的拷问！！！

｜你有没有深度🤔过？

☝️：你通常做缺省页是怎么做的？

☝️：你做缺省页有深度思考过吗？

☝️：你想过缺省页能为用户带来什么吗？

☝️：你见过有多少种缺省页的表达形式？

☝️：缺省页只有常见的插图+文字表达方式吗？

这次要讲的内容～💕

缺省页

缺省页用于指示在移动端APP界面中，加载错误、没有内容数据等视觉页面的补充，也可以理解是对零数据的情感化设计。但是呢，用页面中“空”来描述其实是不合理的，因为缺省页面中其实还有一些信息。

2.1 用户主动清除页面信息内容

在用户进行，任务或事项被清空，用户主动促成的空状态界面，比如垃圾邮件、广告邮件列表，有些用户会有清空这些邮件的习惯，清空了之后自然而然就会出现一个空状态。其次就是，当用户进行检索或者筛选的时候，没有符合的结果，这样子沉陷出来就是空状态。

2.2 新用户初次使用产品，没有内容信息

在用户初次使用一款产品的时候，特别是UGC应用的app，又是第一次打开，用户什么操作都没有，当然页面是空白啦～所以经常会出现无数据的页面，比如说空着的购物车，空着的聊天列表，这时新用户对产品本身也没有太多的了解，需要我们来告知引导用户接下来要怎么去使用产品，就像老师一样，降低用户的学习成本。

比如说在行动指令中给用户明确的操作目标，如去看看，点个赞，去逛逛等等。

2.3 在使用的特殊场景下的断网

空状态出现在异常流的时候。比如说，当网络错误的时候，可能就会出现空白状态。当然，这个原因也很简单。本来是要app里的一个新鲜的视频吸引你的注意力，突然你的手机欠费或者是WiFi路由器拔掉了，页面加载不出来了，所以当然就是空状态咯。

所以，一般来说，页面出现错误的时候也会有错误的提示描述。如果，只是有空洞的文案告诉我们因为你的客观原因导致你看不到这个界面，用户心里会感觉很不舒服的。在原本用户不富裕的心情上雪上加霜。所以，如果，只有两三行文案没有具体的引导告知用户如何进行操作，这种情况跟页面空白没什么太大的区别。

3.1 提升用户体验

“将情感融入产品设计，将解决设计师们的长期困扰，即产品的实用性和视觉性的主要矛盾。”对于缺省页来说，增加兴奋、畅快、情感和期待是在产品设计的过程中创造更好体验的方式。

3.2 减少用户负面情绪

产品表现不佳导致负面情绪，如操作复杂等设计问题，加载过慢、数据丢失等性能问题，搜索结果不足等内容问题，都容易让用户在操作过程中产生负面情绪，所以我们在缺省页设计也中也是如此，为了缓解用户因为等待所产生的绪，避免负面情绪产生是很必要的。所以我们就需要通过设计来缓解用户的负面情绪。

3.3 引导用户行为

人的记忆分为短期记忆和长期记忆。大脑是记忆的宝库，人脑经历过的事物，思考过的问题，体验过的情感和情绪，练习过的动作，都是人们记忆的内容。比如说在上线新功能、新交互方式时，要在使用前或使用中给用户恰当的引导，以帮助用户学习使用产品。所以在设计中感情化设计可以帮助我们引导用户减轻用户的记忆负担。

4.1 系统推荐型

既然在打开页面的时候影响到用户的体验，就把有趣的内容或者功能部分直观的填充在空白界面当中，这样就不是空空的界面了

对于信息浏览页面这是一个非常好的解决办法

增加产品对用户的吸引力，在整个使用的流程上用户路径不会轻易终止操作。

4.2 操作指引型

界面展示用户产生的内容时，用户并没有产生内容，需要我们来指引用户产生内容，可以有效激活用户操作，还可以解决用户在不知道生产内容的入口在哪里。

4.3 情感转达型

情感化设计是完善产品，提升用户体验的关键，比如说用活泼的插图+趣味性的文字，让用户根据目标引导设计，划定规则和目标路径，引导用户参与其中，让用户和产品之前的互动联系，产生情感互动。

4.4 板块隐藏型

板块隐藏也是在app里比较常见的一种手法，当页面各别某个板块内容信息为空的时候，可以考虑整个板块直接进行隐藏掉，能消除用户在这块信息获取的负面感知。

4.5 提供新的任务

前面的几种方法，都是在弥补当前任务为空的时候而产生的差落感。但是，我们的操作行动中还处于当前页面。在当前页面中已经完成任务或者是没有任务，这时候就要考虑到新的办法了。比如说给用户提供新的任务，让他忘记原本的任务，自然而然就不会有挫败感了。

通常缺省页的引导模块都局限于解决当前任务。如果碰到没有解决的方案情况下，可以提供给用户具有情感共鸣的新任务，既能消除挫败感，又能转移注意力。例如：淘宝的购物车中，购物车里没有添加任何商品，界面当中除了会显示提示状态之外，还会显示你可能还喜欢的内容推荐，将缺省页和系统推荐相结合。

4.6 使用缓存

这是我无意当中发现针对缺省页面还有一种其他的解释，使用缓存的方法把之前的内容存储下来，在展示页面的时候先展示缓存的内容，再加载新内容，这样就非常简单地把空状态消灭了。现在大多数的资讯浏览类的页面都会采用这种方式，比如说朋友圈，淘宝等，以至于大家都习以为常了，其实这也是消灭空状态的一种方式。

根据产品特性来判断，工具类、金融类等同类型产品不适合使用缓存；因为用户交互操作的数据必须保持实时性与真实性。而内容型、电商类等类型产品适合使用缓存来代替缺省状态；缓存内容可以代替产品的缺省状态，安抚用户操作失败所带来跳出率过高的风险。

除了常规的元素（字体、按钮、图片等）需要对齐外，布局也需要满足这一点。大方向的布局过于统一会造成整齐感，当布局中的常规元素满足对齐这一规律后，布局与布局之间的对齐更是需要被考虑到的。

界面中通常包含多个布局，每个布局中的元素因为存在一定的关联性而被放置在一起，因此相似且有关联的元素可统一成为一个布局。

缺省页面中将信息层级通过这种方式罗列在用户眼前。让用户最近视角展示产品的核心信息。提炼出用户在场景中最为关注的诉求，解决用户的问题。

这样的对齐方式有个好处就是让浏览者的视线集中在该区块内容上，其次从样式上的不对称感可以增加界面的层次感和设计感，这样的排版可以比较灵活的开发适配。

｜敲黑板！！！⚠️注意啦

由于有的APP中业务繁多场景复杂，有的存在多重信息导航，有的存在二级内容，有的甚至是在场景中间可能会出现异常，从而导致目前各个业务异常场景结构不一，这里是需要统一认知的。

5.1 通用布局

通用场景规范适用于App中网络异常、限流等全局异常场景，这些场景中除了异常提示信息没有别的内容出现,文案可配置，相同场景统一为一种文案。

5.2 一级内容为空

场景中第一级内容为空或者异常，并且只存在第一级的TitleBar，比如聊天为空等场景。

5.3 次级内容为空

一级内容一般高度无法控制，故仍然需要设计师配合各自链路开发适配组件位置，例如他人信息，消息，关注等场景，图示给出场景示例：

很多人可能会忽略掉屏幕中各种场景，导致缺省图放置的位置偏上或偏下，导致视觉感官非常难受。

以下是可能出现的页面布局，设计时也需要考虑到各种场景的布局来进行设计。

｜你犯过这错误吗？

记住啦～以后可不要犯这些错误啦～以下就是非常非常非常不合理运用对齐的视觉案例：

6.1 图标➕单行文本

图标➕文本的形式是比较主流的空状态内容，优点是从视觉上传达信息帮助用户理解当前所遇到的问题或者是状态；缺点是没有配合用户所处场景的解决方案。

6.2 图标➕单行文本➕描述文案

这类缺省设计形式一般应用于表达系统性无响应或初始空白态的缺省场景。视觉图案一般使用 app 吉祥物或主色调延展出的 icon 或插画来表示缺省状态；文字：通常为「标题」结构；描述文案则说明结束缺省状态的解决办法，如「请检查网络是否顺畅」等等。

6.3 图标➕单行文本➕按钮

在图标➕文案的信息模块的基础上增加了一个操作按钮，目的是为了更快直白地告知用户此页【无】的状态，其二是根据产品的类型，可以使用按钮来指导用户，这些明确的行动指令会比其他文案更引导用户点击。

6.4 图标➕单行文本➕描述文案➕按钮

此类缺省设计形式一般运用于需要用户引导操作来达到业务目标的缺省场景。在视觉图案+文案的基础上加入引导模块，主要作用于避免用户在数据边界的状态下，会因为无法达到操作目的而提高的跳出率。

6.5 图标➕单行文本➕超链接

希克定律指出，【做出决定所需的时间会随着选择的数量和复杂性而增加。】当操作要求最多保持在一个或者两个时，用户可能会更快地采取行动。

｜总的来说

缺省页的页面布局分为以上六种形式分别是：图标+单行标题，图标+单行标题+描述文案，图标+单行标题+按钮，图标+单行标题+描述文案，图标+单行标题+超链接，这6种结构的方式来展示。

｜风格上

7.1 场景插画

「场景」在百度百科里的定义是：戏剧、电影中的场面，泛指情景。

情景又指

(1) 感情与景色。

(2) 情形；景象。

(3) 环境：假设是在这个情景。在戏剧或影视剧里，场景由人物，时空，事件（行为），环境（社会环境和自然环境）等要素构成。

把插画和场景很好的结合在一起，可以创造令人难忘的构图，拉近与用户的友好度。

7.2 2.5d插画

2.5D矢量插画是这两年非常流行的一种插画风格，也叫2.5D轴侧等距插画，简单理解就是带有3D效果的二维画面。画风上看：

· 清新的色彩和集合线条搭建的色彩空间

· 渐变色来衬托背景空间，构造一个奇幻的空间。

· 同类色、互补色、类似色搭配出简单的几何形状，重构建筑空间。

7.3 扁平化插画

扁平化风格是一种极具有设计感的表现风格，其最特殊的部分在于图像减法处理。扁平化插图的配色有一定的特带你，过于繁杂的配色会削弱图形的特点，从而造成视觉信息传递不够清晰简明。它并不是还原事物的真实性，而是应该提炼出事物特点，用简练概括的手法将事物直白地表现出来。

7.4 MBE插画

是来自 Dribbble 一位设计师 MBE，他的作品风格设计十分特别，简约、有趣、好看，这可以算是一种创新的风格，暂称为 MBE STYLE 吧，目前已有小部分追波设计师也开始绘制类似风格的设计作品，也许MBE 风格能像长阴影一样，成为一个小的设计趋势。

· 特粗的深色描线

· Q 版化卡通形象，使其幼稚、可爱

· 圆滑的线条

· 鲜明的颜色配色

· 没有渐变颜色

· 能快速矢量绘制

7.5 线条+面插画

线条分为两种基本形式：一种是实体的线，另外一种是感觉中存在的线。线与点、面相比具有极大的灵活性，它可以任意变换方向，形态，也可以始终保持自身不变；它即可以表现严谨的形象，也可以赋予形体以赋情性的动感。插画的基础就是线条，线条的样式能够表达作者所要传达的观点及作品的内容。我们需要把画面中线条的样式，完整地，有粗细的，有曲直，有长短，主次，有疏有密的表现粗来，并通过赋予形体以赋情性的动感。

7.6 噪点渐变插画

在渐变的色彩当中，适当加入噪点，能够让原本柔和的插画当中信息量更大，让整体给人的感觉截然不同。噪点插画是将页面叠加了颗粒肌理的插画,也可叫作颗粒风插画。

噪点插画大部分被运用在大色块、画面元素简单、缺少细节性装饰元素的画面中。

噪点肌理常叠加在元素的高光及阴影处，通过颗粒感疏密的形式代替渐变的效果。

噪点常被用于商业插画中居多，且近几年越来越受到追捧。和2.5D风、流体渐变风等一样，噪点插画也具有+分独特的风格与优势。增加画面的细节感和质感，互联网快速迭代的生产方式不利于设计师慢慢描绘画面的细节。在时间不是很宽裕的情况下，在画面中添加噪点，可以增加图形的细节和整体的质感。

7.7 品牌插画

品牌价值作为用户潜意识层的影响因素，是一个需要持续发力的设计层面。成熟的产品团队都会结合自家产品特色，历史品牌建设来打造专属品牌形象，如钉钉的钉三多、飞猪的小飞猪等，一个形象打造好可以发挥极大地品牌价值，占领用户心智，从而间接提高市场占有率。打造专属品牌形象，与幽默风趣的主题插画配合，讲故事、谈理想、获取共鸣，强化品牌观一气呵成。而空状态界面正是其优质的载体，制作精良的品牌主题插画更可以缓解用户焦虑、张扬产品个性，与竞品构成差异化。

｜形状上

icon的一致性要做好（风格，视觉大小，粗细，圆角，复杂程度及特殊元素上要保持统一），线性图标要保证控制描边的端口、转折选择圆角或者直角的处理方式；面性图标；伪2.5d；3D；在不同形状下，各个统一区域各个尺寸icon视觉尺寸统一和谐。

图标的圆角，卡片的圆角，icon的风格与统一度，做好图标的一致性（风格，视觉大小，粗细，圆角，复杂程度及特殊元素上实现统一）

｜颜色上

合理的运用不同程度颜色的规范，颜色与颜色之间的互补、颜色与颜色之间的对比，用色平衡度的规范，在视觉设计中的色彩的运用极其重要的。

灰色

灰色，是一种介于黑色和白色之间的颜色，总体可分为深灰色和浅灰色。而灰色的色值为(128,128,128)。它又称为无彩色系，即没有色相和纯度，只有明度。灰色给人的感觉是比较沉稳的，最常在文字、背景、边框、分割等场景中应用。在我们使用的过程当中要注意避免使用纯灰色，在纯灰色上加偏向产品的品牌色，整体色调视觉上会很统一。

灰色+彩色点缀

灰色+彩色点缀运用了60％+ 30％+ 10％的比例是为了平衡颜色。因为它可以创造一种平衡感，让眼睛从一个焦点到另一个焦点舒适地移动。60％是你的主色调，30％是次要色，10％是强调色。用10%的强调色来吸引用户的设计情感，当然（主色、辅助色）给人的感觉也是大大不相同的。

彩色

在选择彩色的时候，我们可以选择品牌色作为我们的主色，因为色彩是设计当中很重要的一部分，在竞争激烈的互联网行业当中，好的品牌色能够帮助用户深入人心，想让色彩走入用户的心里，就要把品牌色和产品结合起来。同时品牌色是提现企业和产品品牌形象的文化理念重要元素，当然每一种颜色的寓意和文化带来的视觉感受也是不同的。

｜质感上

在质感上我们要注意界面的风格和产品的风格要统一再决定是扁平还是拟物风格；常用的质感是投影，阴影来源于现实生活的反映物体与物体之间距离的物理现象。在界面中，我们往往通过模拟元素的投影直截了当的来告诉用户，元素之间的高度距离与层次关系。

在做投影的时候从以下几个方面来思考：

高度

阴影是由两个不同阶层的平面产生，且强度由两者之间的距离决定。所以物体的高度直接影响物体的阴影，对象离地面越远阴影越大，模糊值越高。

光源

阴影的方向是由光源与物体的相对位置所决定的。假定光源所处高度不变，光源与物体的距离和物体与阴影的距离成正比。光源越远，则阴影距离物体越远。阴影的方向在界面里通常使用 X, Y 坐标轴来表示。

投影值

综上可知。阴影由光照而产生。主要影响其值的是物体高度与光源位置：

在不同高度上时，投射出的阴影颜色、模糊度、面积都有所区分。离地面越远的物体，产生的阴影颜色越淡、模糊度越高、面积越大；反之则颜色更深、模糊度越低、面积越小；而投影的方向主要由光源与物体的相对位置决定。投影的位置可从阴影向下、阴影向上、阴影向左、阴影向右4个方面。

渐变

微质感

｜动效上

界面动效能加强用户认知且增加活力。“界面动画”事实上是更高等级的设计展现形式：表达界面元素在即时和非即时事件下的行为动作。

动效价值

增加体验舒适度：让用户认知过程更为自然。
增加界面活力：第一时间吸引注意力，突出重点。
描述层级关系：体现元素之间的层级与空间关系。
提供反馈、明确意向：助力交互体验。

即时vs非即时交互

首先很重要的一点是，要区分“状态”和“行为”。用户体验中，状态是静态的，作为设计上的补充属性；而行为是基于时效和动态的。举个例子，一个元素能够被遮罩，这个遮罩可以是一种状态，也可以是一种行为。如果是行为，那么动效就可以加入，帮助提升可用性。

除此之外，所有的交互行为，从是时效性上，可以被分为即时发生和非即时发生。即时表示用户是直接与界面元素进行互动的；非即时表示界面元素的动作是在互动之后的：作为过渡，在用户操作之后才出现。

区分这两个概念很重要。

即时交互也可以被理解成“直接操作”，因为这种用户与界面元素的交互是直接而同时的。非即时交互通常在用户操作之后才发生，并且在过渡完成之前，都不允许用户进行其他交互。

语言是表达情感的主要载体，情感是语言传递的重要信息内容之一。“语言对于人们，不但只是表现他们的思想才有用，一样地为了表现他们的感情才是有用的。”如果在某一语言中缺乏影响人情感的成分。那么，这种语言只能属于教育活动的范畴。因此，了解语言的情感化，掌握和使用情感化的语言，就为了语言添增了“润滑剂”，使语言传递过程中，产生“情感效应”，大大提高语言交流的艺术感染力和信息传递的效果。

我们在界面中使用图形和色彩勾画故事，并用文案情感化表达来传递情感。我们设计的初衷很简单，就是想让界面表达可以更加有趣些。当用户看到故事和文案，能够会心一笑或者是吐个槽。

用户在用一款app的时候，就像两个人相识的过程。生活中，我们会通过一个人“言谈、举止、穿着、外貌”去认识他/她。然鹅在界面设计中，“图形➕色彩”就像是一个人的“穿着和外貌”，“交互”就好像人的“举止”，“文案”就像是人的“言谈”，就仿佛是软件对用户说的话。

｜怎么进行场景文案设计呢？

以下是部分栗子🌰呢～

8.1 购物车为空

当你的“朋友/闺蜜”看见你的购物车🛒是空的时候，他/她希望你能对自己好一点：

“再忙，也要记得买点什么犒赏自己”

8.2 足迹为空

当你的“朋友/闺蜜”看见你的足迹🛒是空的时候，他/她知道你迟早会把这个页面填满：

“明知买买买是个泥潭，还是忍不住往里面踩踩”

8.3 优惠券列表为空

当你的“朋友/闺蜜”看见你竟然连一张优惠券都没有领过的时候，他/她忍不住吐了个槽：

“你有没有考虑过优惠券的感觉”

8.4 搜索页面为空

当你的“朋友/闺蜜”搜索不到想要结果的时候，他/她忍不住吐了个槽：

“问题太费脑啦，我充个电再告诉你”

8.5 网络为空

当你的“朋友/闺蜜”加载页面的时候发现网络错误了，他/她忍不住吐了个槽：

“你的网络被外星人抓走啦”

｜字体

APP里面文字、图形、色彩是信息传达的三要素，字体则是这三要素中的重要因素之一。一般中文字体种类分为：苹方，宋体，微软雅黑，兰亭黑体等；英文字体种类分为：无衬线体、衬线体、意大利斜体、手写体、黑字体等。

9.1 中文字体推荐

线上中文字体推荐使用苹方字体、兰亭黑体、冬青黑体、华文黑体、思源黑体、冬青黑体、微软雅黑等。其中 iOS 系统默认中文字体是「苹方 (PingFang)」，Android 系统中文字体使用「思源黑体 (Noto Sans CJK)」。

「苹方」这款字体，苹果在iOS 9推出的一款中文字体，针对中文进行了深度优化，增大字间距提高可读性，同一字号、颜色下，显得更清晰。思源黑体」是Adobe跟Google合资开发的一套集设计素质、完整字数和泛用性于一身，是竞争力十分强的，重要的是它是免费使用的。

9.2 英文字体推荐

线上英文字体推荐使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans 。其中 iOS 系统默认英文字体为「San Francisco」，Android 系统默认英文字体为：「Roboto」。

「San Francisco」作为系统默认字体，San Francisco 字体是经过动态优化的，并非是单个字体，为了保持在不同平台上的清晰度，San Francisco字体拥有许多特别的设计和功能。「Roboto」这种圆润清晰的无衬线字体所包含的美学引领了Android 4.0的干净、几何的设计哲学。

9.3 数字字体推荐

线上数字字体推荐使用 DIN、Core Sans D、Helvetica Neue。

DIN 起源于 1995 年的德国，无衬线字体，易用耐看、字形开放，是设计师最爱的几类字体之一，适合显示比较长的大号数字，但是小字号的情况下识别度较低。

Core Sans D 是由韩国设计师设计的一款无衬线字体，支持 Thin、Light、Regular、Medium、Bold 等类型字重，对大号数字的显示效果不错，不过它是收费字体。

Helvetica Neue 除了上文介绍的简洁朴素、中性严谨、没有多余的修饰外，还是 Helvetica 的升级版，拥有了更多的字重，可以作为 iOS 和 Android 跨平台数字字体使用。

| 字号

字号是界面设计中另一个重要的元素，字号大小决定了信息的层级和主次关系，合理有序的字号设置能让界面信息清晰易读、层次分明；相反，糟糕无序的字号使用会让界面混乱不堪，影响阅读体验。

9.4字号大小

文字大小决定软件形象，文字标题的大小控制了软件的形象。放大标题会给人有力、活跃、自信的印象；缩小则表现出纤细和缜密的印象。另外，文字大小的对比也会左右印象。标题文字的大小与正文之比叫做跳动率。跳动率越大，画面越活跃；反之越稳重。

9.5 iOS 字号规则

在 iOS11 系统中，中文字体为苹方(Ping Fang SC Light)，英文字体为San Francisco。包含了以下几种字号的文本样式：

导航栏标题： 32-36PX

标题文字： 30-32px

内容区域文字：24-28px

辅助性文字： 20-24px

需要注意的是，San Francisco 字体有两种模式: 文本模式 SF Pro Text 和展示模式 SF Pro Display，文本模式适用于字号小于 20pt 的文字，展示模式适用于字号大于等于 20pt 的文字。

9.6 Material Design 字号规则

在 Material Design 设计体系中，英文字体使用Roboto，中文字体使用Noto。Roboto有6种字重：Thin, Light, Regular, Medium, Bold 和 Black。Noto有7种字重：Thin, Light, DemiLight, Regular, Medium, Bold 和 Black。规定了以下文字排版的常用字号：

· 12sp 小字提示

· 14sp (桌面端 13sp) 正文/按钮文字

· 16sp (桌面端 15sp) 小标题

· 20sp Appbar 文字

· 24sp 大标题

· 34sp/45sp/56sp/112sp 超大号文字

9.7 Ant Design 字号规则

Ant Design 使用不同的字号和字重来传递视觉的信息层次。默认字体为 12pt，展示型页面可以设置为 14pt，其他字体字号相应升级。

| 行高

行高的选择行高和字号的比值是随着字号减小的，从字号很小时的黄金比 1.618 逐渐衰减到 1。

行高会影响阅读的体验，西文的基本行高通常是字号的 1.2em 上下，而中文因为字符密实且高度一致，所以一般行高需要更大，1.5em 至 1.8em 之间是一个比较好的视觉阅读效果。

9.8 iOS 行高设置

Apple 的 iOS 字号与行高对应关系如下，Caption字号11/12pt的行高13/16pt：

9.9 Fluent Design 行高设置

Microsoft 官方的 Fluent Design 字号与行高对应关系Caption字号12px的行高为14px；body字号15px行高20px以下是详细的“

9.10 Ant Design 行高设置

Ant Design 规定默认文案字体行高为 1.5em，展示型页面可根据实际情况调整行高。字体行高绝对值为『字号 x 1.5倍』。例如：12 号字体的行高为 18px，14 号字体的行高为 21px。

行高计算公式: L = F + 8。其中 L 是行高 (Line Height)，F 是字号 (Font Size) ，F ≥ 12

｜字重

字重是指字体粗细的对比，在字体包里字体粗细的大小有 Light、Regular、Medium、Bold、Heavy 等字重名称。现在很多产品的视觉界面都是通过字体的粗细大小对比来拉开信息的层级，现下流行趋势大标题风格也是通过字体的粗细来拉开信息层级的。

9.11 字重的设置

字重的设置同样基于秩序、稳定、克制的原则。为了统一整体效果，一般情况下使用两种字重为佳，例如只出现 Regular 以及 Medium 这两种字体粗细，特殊情况下可以使用更粗或更细的字重进一步拉开信息层级。

当字号大小为 12-18pt 时，使用 Regular；20-26pt 时，使用 Light；28-34pt 时，使用 Thin；当字号大小超过 34pt 时，建议使用 Ultralight。

以上是按字号与字重反比的规则设置，即字号越大，字重越细。当然也可以按正比的规则或者自定义规则，具体还是要根据产品的定位和用户的特点来设置，以保证信息层级清晰明了为准。

9.12 字号使用原子理论

而我们在做设计时，字号的单位需遵循原子理论，也就是使用一个基数作为倍增，如2、4、6、8、10 或者3、6、9、12。但其实我们在做移动端设计时，单位需要遵循偶数原则，因为开发中的单位是以一倍图的基数来进行计算。那么其实在制定字体规范中，使用2为单位会导致字号过多，不易管理，且2号字体的差异化不大。

所以在字号方面我们使用4作为单位是比较合适的：一是适配后在@2x跟@3x不会出现半像素，二是使用4为单位，能满足字体大小的均衡。那么我们则可以制定相应的字体单位：

9.13 使用大字号作为标题

随着设计行业的发展，对于视觉的理解进步，现在更多设计师更愿意使用大号字体，大间距，来区分页面层级的信息。因为大号的字体阅读起来更为舒适，能精准快速的传达信息，提升阅读效率，降低视觉疲劳。

所以大家在平时项目中，也不妨大胆的使用一下大字号字体来作为主标题，拉大页面不同信息的层级关系。

9.14 减少颜色数量

在日常界面设计的需求中，有些较为重要的字段，可能业务方为了突出，第一时间，想到的就是把字体标红处理，或者添加各类各样，五花八门的颜色。但其实往往这样的设计，在最后上线后的效果，反而容易适得其反，因为颜色过多，而导致页面缺乏重点，视觉疲劳，反而增加了页面的跳出率，难以取得想要的效果。

经过调研显示：页面越干净，越整洁，页面的跳出率越低，而这套规则几乎适用于所有的界面设计。

所以字体颜色这块，颜色种类不宜过多。可以考虑通过使用同色系中的不同明度，来对不同层级字段进行差异化处理。我们可以通过先确认主色，再对主色进行名都延展，来适配多场景的文字颜色。配置好相应的色板之后，可以再根据页面层级关系对文字颜色进行合适的填充。

9.15 颜色的差异

红色：

热情、活泼、张扬、激动、轰轰烈烈，容易鼓舞勇气，同时也很容易生气，情绪波动较大，西方以此象征牺牲、战争之意，东方则代表吉祥、乐观、吉祥之意，红色也有警告的意思。

橙色：

激情、狂热、时尚、青春、动感，速度与激情，有种让人活力四射的感觉；炽烈之生命，太阳也是橙色。

蓝色：

宁静、自由、清新，欧洲作为对国家忠诚之象征，一些护士护士服就是蓝色的；在中国，海军的服装就是海蓝色的。深蓝代表孤傲、忧郁女性气质，浅蓝色代表天真、纯洁；同时蓝色也代表开阔，安定与和平。

绿色：

清新、健康、希望，是生命的象征；代表安全、平静、舒适之感。

紫色：

有点可爱、梦幻、高贵、优雅，也代表着非凡的地位。一般人喜欢淡紫色，有愉快之感；红紫一般人都不喜欢，不易产生美感。紫色有高贵高雅的寓意，高雅感十足，曾是西方帝王的服色。

黑色：

高深、黑夜、庄重、隐藏、神秘，无情色，是白色的对比色。有一种让人感到黑暗的感觉，如和其他颜色相配合含有集中和重心感。在西方用于正式场合。

灰色：

高雅、朴素、沉稳，代表寂寞、灰心丧气、拜金主义，灰色使人有现实感，也给人以稳重安定的感觉。

白色：

清爽、无暇、冰雪、简单，无情色，是黑色的对比色。表纯洁之感，及轻松、愉悦。浓厚之白色会有壮大之感觉，有种冬天的气息。在东方也象征着死亡与不祥之意。

粉红：

可爱、温馨、娇柔、青春、明快、浪漫、愉快。但对不同的人感觉也不同，有些房间如果搭配的好的话，会让人感到温馨，没有搭配好的话，会让人感到浮躁。建议最好不要用粉色来装修客厅。

黄色：

黄色的温暖、尊贵、辉煌，有着太阳般的光辉。黄色有着黄金的尊贵，象征着财富和权利，它是骄傲的色彩。

东方代表尊贵、优雅，是帝王御用颜色；是一种可以让人增强食欲的颜色；西方基督教以黄色为耻辱象征。

棕色：

代表健壮，与其它色不发生冲突。有耐劳、沉稳、暗淡之情，因于土地颜色相近，跟给人可靠、朴实的感觉。

银色：

代表尊贵、纯洁、安全、永恒，体现品牌的核心价值。代表尊贵、高贵、神秘、冷酷，给人尊崇感，也代表着未来感。

蓝绿色：

代表的是甜美、晴川、甜蜜、纯净，如果深一点的话，代表爱情比较浓郁。

9.16 颜色融合设计

红色

红色的色感温暖，性格刚烈、外向而激动，是一种对人心跳刺激性很强的颜色。红色容易引起人的血压上升，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳和心理疲劳的颜色。

1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。

2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。

3、在红色中加入少量的黑，会使其性格变的邪恶，趋于血腥、恐怖。

4、在红色中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇柔。

黄色

黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。

1、在黄色中加入少量的蓝，会使其转化为一种鲜美的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。

2、在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。

3、在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。

4、在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。

蓝色

蓝色的色感冷嘲热讽，性格聪明而敏捷，是一种有助于人头脑冷静的色。蓝色的智慧、灵巧性格，常能与那些性格躁动、具有较强扩张力和震撼力的色彩如红色和黄色，形成鲜明的对比，提供一个遥远、广阔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。