如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

二 发表能力建构

————————

同质化竞争突围

发表能力构建方面从最轻的发表成本以及最多的发表回馈两个维度做横向的铺陈，建构了除了拍摄以外，轻量主观表达的文字视频，不受时空与题材影响发表动机的影集，勾引起共同参与及话题的游戏，最多社交参与感的问答等发表能力等四种发表方式。打造轻量发表成本的文字视频可以确保发表量足够，以解决发表量与观看量不对等的问题，在小游戏与问答等发表方式，除了可以营造社交场景以外，创新的玩法也能与竞品拉开差异，在众多的短视频产品中具有自身的特色。

然而单纯的发表能力差异容易被模仿，能够保持自身优势与特色的时间十分短暂，建立起与用户情感上的连接可以有效的加深用户对服务的认可以及归属感，举个例子，前段时间笔者至上海出差数日，意料之外的一份小礼物却促使我成为该酒店的常客，这证明了建立情感连接确实可以成为与同业同质化竞争时不错的突围点。

三 设计切入角度

————————

建立情感连接，是视频设计“双面性”的一面

参考诺曼的理论，情感化设计分为本能，行为，反思三个层面。在打造视频制作工具的过程中，满足本能的外观愉悦以及确保行为过程的顺畅性属于基本要求，可以参照过去设计工具的手法，保证架构流程界面反馈每一环节的使用效能和低理解成本，而反思的范畴则与内容相关。为制作视频内容而设计，需要将用户的经验，喜好，文化转化成特殊符号，以触及情感连结最重要的反思环节。

用户与产品接触的过程按时间展开分为初次接触、逐渐了解、熟悉依赖三个阶段，若在每个阶段都能与用户保持情感连接，必能逐步加深用户印象，达到竞争差异化的目的。下文两个案例演示我们如何在引入期和成长期选择合适触点，制定相应设计策略和方案，从而达到此目的。

四 设计亮点引入

————————

唤起情感，拉近与用户的距离

为了让用户更主动的发表相册视频，QQ团队在影集发表模块上规划了智能相册的能力，借助用户回忆塑造超级符号，把用户的亲身经历与产品功能建立联系，提高使用意愿。在影集的引导步骤中，寻找合宜的契机，把零散的照片按特定线索重新组织，经过精心包装以回忆墙的方式重新呈现给用户。

影集功能的重新包装：

4.1 场景搭建

QQ经授权后访问用户相册，沿时间和位置线索用聚类算法对照片归类，产生与特定场景关联的照片组，再用图像识别技术从照片组中精选特定n张合成视频，为后续情绪升级埋下基础。

4.2 意境传达

为视频搭配转场音乐是主要增色手段。

转场效果设计要以情绪传达为目的，过渡动画和快慢节奏的灵活搭配打造大片质感，叠加细节让画面生动不僵硬。

在配乐标准上，我们基于用户习惯推导，明晰场景+节奏的音乐选择维度。

转场和音乐的挑选需贴合场景特征。在“聚会”场景中，设计师选用翻转重组的效果传递欢快愉悦氛围，曝光和光晕细节可以模拟真实光影效果。“往年今日”则表现出安静氛围，沉浸的复古滤镜和低调的叠黑效果让情绪表达含蓄收敛，涟漪波动仿若时光倒流。

4.3 捕捉时机，宣传专属回忆

在信息架构层的设计使用卡片横滑的方式，一方面可以暗喻时光隧道，另一方面考虑到大卡片比其他尺寸的缩略图在陈列和交互行为上更利于突出视频的优势。

4.4 案例回顾

我们采用情感符号引导发表的策略，得到数据的支撑，影集发表总量和发表转化率均有明显提升。经过市场横向对比，QQ团队在对影集的功能规划和整体设计理念上占据了优势位置。

五 设计亮点深挖

————————

打造情感体验峰值，强化用户印象

在任何体验中，都应该重视体验过程中的情感峰值，如同丹尼尔卡曼说，体验产品时能够被记住的只有峰值与终值的体验，我们在智能相册的环节之中建立起与用户情感上的链结，而链结后的情感峰值，则选择在发表成本最高发表频率的文字视频中深挖，让体验情感的峰值在高频率的场景中发生获取最高的投入回馈。

5.1 过程颇折

文字视频上线后发现用户发表意愿未达预期，症结在于其过程缺少能激发用户主观意愿表达的情绪触发点。我们提出两个优化思路，

1 降低理解成本，体验对齐于常见动态发表界面。

2 支持自定义背景，用带场景暗示的背景烘托情绪氛围。对比实验后发现2既可增加文字视频的意境表达又不干扰基础操作，是为更佳方案。

文字视频的初期方案和优化方向：

5.2 策略制定

QQ团队基于对用户发表场景统计，确定以传达心情和高频发表时间点为线索，策略制定是考虑到既要与用户表达有耦合但不能具体有所指。

5.3 意境传达

背景模版设计有以下原则：

1 界限分明，背景效果不要干扰主体信息。

2 意象与认知相符，有情理之中意料之外的惊喜，引起用户好奇心。

3 表义避免太具象。抽象表达腾出更大想象空间，让用户创意不受缚于环境。

以下是全部模版效果展示。

5.4 案例回顾

经优化后文字视频的背景从纯视觉角度转变成带动用户情绪刺激发表的触发点，后续团队结合运营策略，在特殊节日或特殊事件前更新模版可以持续刺激拉升文字视频发表量，该策略的运用屡建奇效。

六 总结心得

————————

设计经验

产品体验路径中植入情感因素意义重大。在引入期唤起情感降低用户心理戒备，产生熟悉亲切感。接触期有效调动用户情绪制造情感峰值，加深印象。成熟期创造互动机会，让情感得到延伸寄托进而巩固市场地位。此过程环环相扣层层递进，在用户心理推波助澜。

好设计是能影响用户非理性，改变情绪最终影响他的行为。设计的高境界在于只影响不明说，用户不需要领会设计意图，但情绪已经被感染了，在情绪的作用下，按照设计者预定的轨迹，自然做出选择。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在多人团队里，通常不同的设计师负责不同的流程，如果没有UI设计规范，不同的设计师就会对相同的组件做出不同的方案。产生大量重复工作，效率比较低。而制作设计规范和UI KIT之后，则可以直接利用KIT里的组件快速搭建好页面，把设计师从基础工作中释放出来，大大提升设计效率。

目录

一、为什么要建立规范

• 用户体验一致
• 塑造品牌感
• 利于多人协作
• 方便维护和更新，减少冗余内容

二、规范的适用范围

• 适用于处于成长期和成熟期的产品。
• 规范不是越全越好。适合就是最好。

三、如何建立规范 

• 整理产品的组件和复用的内容
• 基础规范（栅格 间距 基础网格  颜色 字体 ）
• 组件规范（按钮、导航、弹框、缺省图、标签、列表、卡片等等）

一、为什么要建立设计规范？

1 利于多人协作，提率

2 增强一致性，塑造品牌感

制作和遵循设计规范，能够保证整个产品的交互效果和视觉风格、乃至文案的统一性，提升用户的体验。

3 减少冗余内容，方便维护和更新

同类内容使用一样的组件，能够降低输出的内容量，减少冗余的控件和代码。同时也便于维护，在迭代时进行统一的更新和应用。

4 利于工作交接 

方便设计团队和其他团队交接，如果团队有人员变动，也方便后续入职的同事能够通过规范迅速熟悉产品，快速上手。

二、规范的适用范围

前面的文章我提到过，如果产品处于启动期的话，这个时候最重要的事情是圈到第一波用户，让自己活下去。在这个阶段产品会频繁的改版、验证，迭代非常快，整个团队可能都处于拼命加班的状态。在这种情况下做设计规范文档显然事倍功半，一个是浪费人力资源，另外就算做了，在频繁更新的背景下也很难去执行。

因此设计规范文档更适合于那些跨越0-1阶段的产品，这个时候产品已经用有了一定的用户，团队也会扩张。这个时候我们可以选择制作基础的设计规范，比如栅格、配色、字体、图标规范等等。对于成熟期的产品来说，大版本更新的周期是非常长的，这个阶段通常会制作更为详细的设计指南、设计原则、do & don’t、品牌书、图标手册等等。

三、如何建立设计规范

电商类的产品对于大家来说都是比较熟悉的，就算不从事这个方面，日常使用也会很频繁，所以此次案例我们以下面这个电商APP作为示范。

做规范时通常会有这两种情况：

1、不打算进行大版本更新的产品

对于小版本迭代的产品来说，建立规范只需要在sketch里把所有设计稿进行归拢和分类。直接根据现有的稿子梳理出规范，再对不符合规范的文件进行调整即可。

2、新版本 新规范

而对于需要做新版本并且建立新版本规范的产品来说，在做设计稿之前，我们就需要先统一一些基础的内容，比如颜色、字体、栅格等等，然后在设计过程中去制作KIT、对基础的规范进行补充。

四、基础规范

1 制定统一的栅格系统

因为现在都是一稿适配多端，所以首先需要确定设计的基准尺寸，是基于iphone8？还是iphone 8P？或者1080*1920等等……每个公司设计稿的基准都不一样，我们是以一倍图为基准进行设计的，所以我这里的基准尺寸就是375*667，单位为pt。

栅格一种情况是制定网格系统，网格系统的话首先要制定最小的设计单位，比如淘宝的最小单位是3，掌阅的最小单位是4，airbnb的最小单位是6……定好最小设计单位之后，界面中所有间距采用最小单位的倍数。

假定我们最小单位4的网格，排版时横向和纵向的间距都是4的倍数，比如8、12、24。

第二种情况是可以直接建立横向栅格系统，常用的是12栅格，12栅格比较好的地方是能够同时被2、3、4整除，因此能够根据具体需求灵活的设计各种模块。当然如果产品比较轻量化，是不需要这么复杂的栅格的，可以根据需求设置6、4甚至2栅格等等。

2 色彩规范

色彩规范主要表明色彩的色值和使用范围，一般会从品牌色、辅助色、基础色、状态用色等等。如下图所示。

如果产品常用到渐变的话，需要注明渐变的角度以及渐变色的色值。包括产品如果有夜间模式的话，要额外注明日间和夜间模式下各个颜色的对应色值。当然这里的夜间模式说的是真·夜间，而不是微博那种直接加一个黑色透明度蒙层的伪·夜间。

额外提一句，重要内容和正文内容要保证文本的可识别度，WCAG指南中指出，文本和背景色的对比度需要达到3：1。大家可以通过

https://webaim.org/resources/contrastchecker/ 的颜色对比检查器来核对颜色。我这里的品牌色和强调色对比度为3：1和6.3：1，而辅助颜色（比如标签）的对比度则在2-3之间。

3 字体

字体规范最需要注意的是提取出各个场景下需要用的字体和字号。

需要注意的是，要标注上应用场景方便其他人理解。不然其他成员也并不知道到底什么时候应用一级标题、什么时候用二级标题。

4 图标

通常来说图标分为两种，功能性图标和展示性图标。

功能性图标是为了引导用户理解和操作，需要表现和简介，方便用户识别其含义。功能性图标常规状态下为无彩色。

展示性图标通常为页面入口，会有更多形状、颜色、质感的表达，吸引用户的注意力和点击欲望，强调差异性，比如各种品类区的图标、徽章、等级图标等等。

图标规范通常来说会先定一些基础尺寸，梳理好各个页面的图标尺寸，进行整合，最后确定好几个基础尺寸，比如我这里的基础尺寸是4个。功能层级一致的图标尺寸要一致。

为了保证不同形状的图标在视觉上保持大小一致，会制作一个图标的基础制作说明。制作说明里会统一图标的圆角、描边的粗细；如果是涉及到展示性图标的话，还会有图标的视角选择、配色的选择、以及如何表现质感等等等等

5 默认图

电商APP的话有大量的产品图片，所以我们也把默认的占位图样式进行了统一。因为我们这里样式都是一致的，所以采用了统一的规范，如果有多种默认样式，或者有其他类型的占位图，需要分别进行说明。

五、页面组件

页面组件通常包括导航栏、工具栏、弹框、列表、卡片、空状态等等，按照原子设计理念来说，还可以把组件拆分为原子、分子等更小的基础设计组件，比如角标、标签、按钮、图像、优惠券、选择器、进度指示器等等

页面组件除了梳理出规范之外，通常会整理成一整套UI KIT，保存为sketch文件日常拖拽使用，或者导入为Libraries直接调用。当然，也可以直接在KIT上备注出规范和注意事项，具体输出什么格式这个看团队的需求即可。

因为组件部分是一个比较庞大的内容，需要根据具体产品

1按钮

按钮一般有悬浮按钮、填充按钮、线框按钮和文本按钮等类型。其中悬浮按钮具有最高的优先级，属于强引导型按钮。

按钮通常会有三种状态，常规状态、点击状态和不可用状态。因此在规范中需要标明按钮在这三种状态下的样式，比如颜色、投影、圆角、文字大小等等

除此以外，也可能会有加载状态，也就是在点击按钮后，如果有1S以上的数据延迟，通常会考虑触发按钮的加载状态。加载状态的按钮样式为按钮上显示进度指示器。

2 导航

对现有页面的导航进行收拢和分类，比如我这里分类为常规标题样式、标签样式、搜索框样式、无标题样式、字母导航……

标题需要注意文字的极限值，ICON尺寸和位置的话要考虑最小可点击区域，我这里icon的尺寸设置为24pt，但是热区是44pt，所以要注意间距的设置，热区不能重叠。

3 标签

标签通常有多个使用场景，我们可以对标签进行分组，比如运营类标签、内容属性标签、筛选标签等等

然后对每类的标签统一样式、文字内边距以及说明适用场景。

4 弹窗

弹窗是为了提示和通知用户而位于页面内容之上的一种控件。它是引导用户专注于某一项任务，用户可以通过操作来关闭弹框。弹框包含模态（对话框、操作菜单）和非模态（toast、 snake bar等）两种形式。

模态弹窗需要定义蒙层的样式（颜色、透明度），以及弹框内的文字说明和按钮。

我这里拿一个对话框的规范进行举例，这是一个无ICON的双按钮对话框，因此在这里我们需要说明标题、正文文本、按钮以及背景遮罩的信息，还有字号、行距、文字极限值、文字色、按钮的状态等等……

除此之外，组件类的规范可以配上常用案例、don’t&do，会更方便团队人员理解，防止错误状况。

5 列表

列表是由多个等宽的行组成的、按照一定规律排列的连续条目。列表在一些资讯类产品里会有更多的组合形式。我这款产品里用到的列表主要是单行和双行列表，那么我们就整理出对应的列表类型和需要说明的事项。

六、结语

写这篇文的初衷，是因为从去年底我建立公众号，并且在站酷发表了一些文章，得到了很多人的认可。很多粉丝私信我各种问题，陆续有人问我设计规范怎么做、交互规范什么样之类的问题。但是公司内部的文件确实没有办法公开分享，所以我就想说，那不如专门写一篇文章详细教大家制作移动UI设计规范吧。

这篇的基础部分我做的比较详细，组件部分写的有些概括，主要是因为组件部分不是通用的，要根据自己的稿子进行整理和归纳，归纳好之后做好标注和规范说明即可，这部分是一个罗列的内容，所以就不必展开了……

当然还有很多内容没有展开说，比如在Sketch里把KIT制作成Libraries统一使用，但是我想作为一篇设计规范入门教程目前应该足够了，更多的内容我在后续开新文去补充吧。

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1. 系统全面地了解文字的基础知识、显示方式、影响因素及当前网页设计中适合的文字系统；
2. 梳理出自己团队所有产品文字使用情况；
3. 综合第1步、第2步总结出适合团队业务的文字系统。

字符屏幕显示原理

1. 字符

字符是指计算机中使用的字母、数字、标点符号等等。

计算机最初发明出来是用来解决数字计算问题的。

后来发现，计算机还可以做更多的事，例如文本处理。其实计算机挺笨的，它读到的所有字符都是由1和0组成的字符串，因为计算机电路只有两种状态，「开」和「闭」，对应「1」和「0」。计算机也只可以直接存储和处理二进制数字。

2. 二进制

「二进制」是数字世界里的基本规则。

下面这些不同格式的文件，在本质上都是一串由1和0组成的代码，要了解这些文件首先要了解二进制。人有十根手指头，但计算机电路只有「开」和「闭」两种状态，所以满十进一位的计数方式更适合人类计算，而满二进一的二进制更适合计算机。计算机只需要1和0这两个数字就可以传递一切信息。

△ MP4

△ MP3

△ JPG

△ TXT

△ AVI

以图像为例，我们用电脑或手机看到的图像都是在某个角落里存储着下面这样的一串数据。开头的16位翻译过来就是 BMP文件开始的标识。

BMP文件标识后面的数字就是图像的各项基本信息。

△ 图像的各项基本信息

△ 颜色深度

最开始的24位，都是1，像素显示为红、绿、蓝三种颜色，相加后显示为白色。

接下来的24位，前8位是1，后面都是0，像素显示为红色。

再后面24位的前16位都是1，最后8位为0，像素显示红、绿两色，相加后显示为黄色。

根据这样的规则整个55×55的格子铺满颜色就得到一张完整的图片。所以一个 BMP图像文件中的1和0就在逐个记录图像中每一个像素点的颜色。

△ 二进制图片生成方式

△ 色光三原色和颜料三原色区别

下面所有文件的显示都和图像显示例子一样，文件中的1和0按照人们事先设计好的规则排列好，只需要找到正确的打开方式按照特定的规则来解读这些数据，我们就可以获得其中的信息。我们怎么才能知道某一个文件的1和0究竟是按什么规则排列的？我们又要用怎样的方式来解读？这就用到了扩展名，在文件的名字后面加几个特定的字符，就可以帮助系统辨别出文件的类型，从而提示电脑去按照某种特定的规则来正确解读其中的信息。

△ MP4格式扩展名

△ MP3格式扩展名

△ JPG格式扩展名

△ TXT格式扩展名

△ AVI格式扩展名

更多其他文件拓展名：

3. 字符编码

为了在计算机上显示字符，必须将字符转换成二进制数字。所以就有了统一、标准字符转换规则，即字符编码。字符编码是给所有的汉字定一个的数字编号，并用1和0来表示这个数字编号。

文字的一个字符对应一个编码（码点），而编码对应字符集里的一个「字」，字符通过字符集与「字」相连。像图中所示Unicode、GB 2312、Shift_JIS 都是字符集，其主要作用是为每一个「字」分配一个编码。

△ 文本编码流程

字符集里的每一个编码对应的是一个「字」而不是「字形」，也就是一个「字」在不同的地区或标准中可能有不同的「字形」，但字符集中只能对其分配一个编码（除非相差过大，比如简化字），要显示其不同的「字形」要通过使用为不同地区或标准设计的字体来实现。

△ 字异形（左简体中文，右日文）

4. 编码发展史

ASCII

ASCII（American Standard Code for Information Interchange，美国信息交换标准代码）出现在上个世纪60年代的美国，ASCII 一共定义了128个字符，包括英文字母 A-Z，a-z，0-9，一些标点符号和控制符号。ASCII 采用的编码模型是简单字符集，在英语系国家里 ASCII 标准很完美。但是世界上有好几千种语言，其他语言系的国家想使用计算机，ASCII 就远远不够了。所以编码进入了混乱的时代。

△ ASCII编码

混乱时代

计算机的一个字节是8位，可以表示256个字符。ASCII 使用了7位，所以人们决定把剩余的1位也利用起来。人们对于 ASCII 已规定好的128个字符没有异议，但是不同语系的人对于其他字符的需求不一样，所以对于剩下的128个字符的扩展千奇百怪。而且在亚洲语言系统中有更多的字符。于是就又产生了各种多字节表示一个字符的方法，每个语系都有自己特定的编码页（code pages），这就使整个局面更加混乱不堪。这时 Unicode 出现了。

Unicode

Unicode 就是给计算机中所有的字符各自分配一个代号。Unicode 可以认为是字符的编号，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，Unicode 字符集和编码方式解决了跨语言、跨平台的交流问题。但在 Unicode 里每一个字符都是用4个字节来编码，原本英文字母仅需1个字节编码，中文需2~3个字节编码即可，这对于存储或传输资源而言是很不划算的。

UTF-8

UTF-8 基于 Unicode 编码的一种节约字节的编码，是一种可变长度字符编码方式。在UTF-8编码中，英文字母是一个字节，中文（非生僻字）是2~3个字节。可以认为， UTF-8 是对 Unicode 的一种压缩算法。UTF-8 等编码方式有效的节约了存储空间和传输带宽，因而受到了极大的推广应用。并且 UTF-8 兼容 ASCII 字符集。

UTF：Unicode Transformation Format

5. 中文编码类型

△ 中文编码类型

文字基础知识

1. 文字

「文字」是信息交流的工具，可读性、易读性至关重要。在网页设计中文字使用需要考虑几个要素：首先考虑字体，其次是字重、字号、行高、字间距、行间距、段间距等。

△ 字体、字重

△ 字间距、字号、行高

△ 行间距、段间距

2. 字体

「字体」是文字的外在形式特征，不同的字体有不同的性格。

字体种类

综合中文、英文都适用的广义分类。

衬线、无衬线

△ 衬线和无衬线差异1

△ 衬线和无衬线差异2

字体 – 中文

字体构成：

△ 笔画

中宫，是指等分成九个小方格最中间的那一格。

△ 中宫

△ 中宫和字体关系

△ 中宫紧凑、中宫松散

间架结构，汉字种类众多，笔划不等，空间排布极为重要。字体的间架结构可分为两类：单体字、合体字。

△ 单体字 间架结构

△ 合体字 间架结构

汉字字形众多，有些字形会产生视觉大小变化，顶格、缩格、出格就是针对不同结构的字体笔画特征进行微调，让他们看起来更加均衡、等大、视觉更完整。

△ 调整前

△ 调整后

字形调整实例：

衬线、无衬线字形演变：

△ 衬线 字形演变

△ 无衬线 字形演变

字体对比：

微软雅黑、方正兰亭黑简体、思源黑体、苹方-简，笔画宽度均匀，横平竖直。同一字号，微软雅黑最粗，小字号时阅读会较为吃力。方正兰亭黑从微软雅黑派衍生出来，可以更好地适应其他应用场合。

黑体、华文黑体、冬青黑体笔画末端宽度不同。

字体 – 英文

「字谷」概念来自西文字母设计，字谷指字母中部分或完全封闭的空间，即字母当中留白部分。

英文的字体结构是由4条平行线组成，有时候是5条，但是一般大写线会忽略。「基线」在西文中是标准，单个字母的所有立脚点都是在这条线上（除了 g、j、p、y）。英文文字结构多种多样，4条平行线的位置也会发生改变。

升部：上缘线和主线之间的内容。

降部：下缘线和基线之间的内容。

字体对比：Helvetica Neue、Arial、DIN

Helvetica Neue：中性，无衬线，现代主义风格字体。字体末端严格保持横平竖直，性格严谨、保守，没有任何的修饰，适合不同分辨率的显示器。该字体是 Helvetica 字体的升级版本，拥有更多的字重，更易于不同场合的应用。字形则相对偏胖，笔画更清晰，而且小字号的情况下可读性也很高。

Arial：Arial 是一套随同多套微软应用软件所分发，无衬线。该字体比例及字重和 Helvetica 极相似，其实是 Monotype Grotesque 系列的衍变。在字体及字距上都做了一些细微的调整和变动，以增加它在电脑屏幕的不同分辨率的可读性。

DIN：字形瘦长，无衬线，适合显示比较长的数字，但是小字号的情况下识别度较低。DIN 字体在德国有着悠久历史，是交通标志、路牌、门牌和车牌的标准字体。虽然曾经是德国纳粹使用的字体，但是经过设计和重新升级。DIN 在杂志、海报以及其他各种设计领域都被广泛地使用。

Helvetica Neue、Arial、DIN 数字对比：

3. 字重

「字重」是同一种字体的不同字形粗细，即字体重量。字重的划分根据不同字体厂商各有不同，不同的字重称呼也可以不一样，常见的划分如下：

在排版中，一种字体会在标题、正文、说明注释等不同内容下使用，单一的字重不能很好适应排版需求，于是衍生出了同一个字体的不同字重。

4. 字号

「字号」是字体的高度，不同平台字号规范不同。

在界面设计中，文字字号决定了信息层次和权重。首先要设定基准字号（最小字号），然后可依据一定规律设定导航、标题等稍大字号。一般网页基准字号有12px、14px、16px等。

字号也受阅读距离影响，眼睛到屏幕距离40~70cm，为较适合的阅读距离。

Ant Design 定义的电脑显示器阅读距离（50 cm）从原先的12上升至14，以保证在多数常用显示器上的用户阅读效率最佳。

5. 行高

「行高」可以理解为一个包裹在字体外面的无形的盒子。字号和行高决定着一套字体系统的动态与秩序之美。

西文：西文基本行高是字号的1.2倍左右，字体有上伸部（ascender）和下延部（descender）可来创造行间空隙。

中文：中文因为字符密实且高度一致，所以一般行高需要更大，根据不同人群的特点（儿童、年轻人、老年人）以及使用环境，可达到1.5~2倍甚至更大。

Ant Design 受到5音阶以及自然律的启发定义了10个不同字号以及与之相对应的行高。

6. 字间距

「字间距」是指一组字母之间相互间隔的距离，受字偶距和字体影响。

字偶距：是指两个字母（或其他字符，比如数字，标点符号等）之间的空白。不同的字母有不同的外形，所以字体使用相等的字间距是不协调的。所以需要调整字偶距来提升可读性。

按字间距可分类为：比例字体（Proportional）和等宽字体（Monospaced）。

比例字体：根据字符外形特点设置不同字距的字体，这种字体外形协调，可读性好。

等宽字体：每个字符设置相同字距的字体，其优点是可以很好的控制排版对齐。

7. 行间距

行间距（line spacing / leading）：行与行之间的距离，作为一段文本中的留白，行间距让字与字之间有了可呼吸的空间，行间距对文章的易读性有很大影响。

排版推荐使用行间距1.2~2倍。

如何设定行间距，如何规范行间距

行间距由行高决定，为了确保可读性增加行间距，就需要增加行高。举个例子：字号12，行高设定20，那么行间距=「（行高-字号）÷2」×2，除2又乘2，我就简单的简化成行间距 = 行高 – 字号，那么行间距就是20-12=8，并且可以将这个数值固定下来，重复使用。

注：至于为什么是20，因为最初一个字节用8个二进制位来表示，所以现在的很多网页设计中常用到8。12+8=20，参考 Ant Design，网上有很多设计师总结的行间距计算方法，对于一个数学不好的我来说，参考已有总结和经验得出的数值，固定这个数值重复使用，这样最简单。

8. 段间距

段间距（paragraphs spacing）：段落与段落之间的距离，可保持页面节奏，与字体、行高相互关联。为保证文章易读性，正文段间距，可以简单地取一个空行（也就是一个行高），这是比较常规也比较合适的做法。举个例子：字号12，行高设定20，段间距 = 行高 + 行间距。

小结

要设置「有节奏感的文本内容」就要遵循这些规则：段间距大于行高，行高大于行间距，行间距大于字间距。

字体选用基础原则

1. 网页文字显示方式

网页设计内容一般都是通过电脑各种浏览器来承载显示的，浏览器显示字体是直接读取用户操作系统里的字体。

2. 字体选用原则

字体是界面设计中最基本的构成之一，科学的字体系统：始终保证信息具有优秀的易读可读性，提升用户的阅读体验及工作效率。

• 原则一：字体优先使用各操作系统默认的字体。
• 原则二：有版权、笔画严谨、清晰可读、经典。

3. 操作系统

下图数据来源：世界互联网市场份额统计网站 Net MarketShare。

△ 操作系统市场占有率 TOP10

各操作系统默认字体：

4. 浏览器

电脑浏览器直接读取用户操作系统里的字体，不同浏览器对文字的渲染方式不同，因此了解市场浏览器使用情况很有必要。

下图数据来源：世界互联网市场份额统计网站 Net MarketShare

5. 字体版权

除了操作系统默认字体，其次需要优先选择使用的就是已购版权字体，如果没有已购买的字体，可考虑一些免费字体，非免费字体使用时需谨慎。

△ 公司常购版权字体

文字规范

1. 字体规范

字体使用三原则

体系化：在同一个系统UI设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。

重复：重复设计中出现的一个或多个内容。任何事情都可以重复。字体、字重字号、颜色、一条线、各种形状（如圆形、正方形或三角形）等。字体使用最好不要超过3种，一般同一个系统UI设计内容的字体数量建议2种即可，中文一种、英文数字一种。且字体样式上也遵循重复原则，避免毫无意义的使用大量字号、颜色、字重、行高等。

韵律：在需要拉开差距的时候可以尝试选择对比大的字体字号，令字号之间产生一种微妙的韵律感。为保证良好的阅读体验，每行保持适当的字符数量。每行上拥有适当的字符数量是文本可读性的关键。如果每行文字太短，视线必须反复折回来，打破读者的节奏。如果一行文字太长，用户的眼睛将很难专注于文本。英文无特殊要求避免使用全大写字符，因为会大大延缓用户扫描和阅读的速度。

现有产品字体统计

字体规范

综合考虑不同操作系统选用最佳字体体验。

代码声明：

• Font-family：Helvetica Neue, Helvetica, Arial, 「苹方-简」, 「Microsoft YaHei」, 「微软雅黑」, sans-serif。
• 英文字体：首先查找Helvetica Neue（Mac），然后查找Helvetica（Win），都找不到就用Arial（Mac&Win）；若是以上三者都缺失，则使用当前默认的sans-serif字体（操作系统或浏览器指定）；
• 中文字体：选用平台默认中文字体 苹方-简（Mac），微软雅黑（Win）。

2. 字重规范

一般情况下会选用「一粗一细」两种字重。

粗体：在视觉面积上较重，笔画加粗，字腔（笔画间空间）小，突出显示，产生强调作用。常用于标题和标语。

细体：在视觉面积上较轻，笔画轻细，字腔（笔画间空间）大，结构疏朗清透，阅读时不会让读者产生压迫感。常用于正文和说明。

中文、英文推荐使用字重：

3. 字号规范

现有产品字号统计

字号规范

4. 行高规范

参考：Ant Design 受到5音阶以及自然规律启发定义了10个不同字号以及与之相对应的行高。

5. 字间距规范

使用比例字体，根据字符外形特点设置不同字距的字体，这种字体外形协调，可读性好。

6. 行间距规范

颜色规范

1. Ant Design 两大色彩体系

Ant Design 两大色彩体系：系统级、产品级。

系统级色彩体系

系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。

• 基础色板：12个主色（薄暮/火山/日暮/金盏花/日出/青柠/极光绿/明青/拂晓蓝/极客蓝/酱紫/法式洋红）以及衍生色共120个颜色。
• 中性色板：黑、白、灰，从白到黑共10个颜色。
• 数据可视化色板：敬请期待。

产品级色彩体系

产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。

• 品牌色应用：品牌色取自基础色板的蓝色#1890FF，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
• 中性色：中性色主要应用在文字部分，此外背景、边框、分割线等场景中也非常常见。
• 功能色：功能色代表着明确的信息及状态，如成功、出错、失败、提醒、链接等。

2. 系统级 中性色

中性色包含了黑、白、灰。在网页设计中被大量使用，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。中性色板一共包含了从白到黑的10个颜色。

3. 产品级 中性色

Ant Design 的中性色主要应用在文字、背景、边框、分割线等场景中。产品中性色的定义需要考虑深色浅色背景的差异，同时结合 WCAG 2.0标准。中性色在落地的时候是按照「透明度」的方式实现。

VIP大数据用户体验部 的中性色也是主要应用在界面的文字、背景、边框、分割线等场景中。考虑到深浅色背景的差异，中性色根据设计需求在落地的时候可按照色值和透明度两种方式实现，两种方式优先使用色值方式，尽量避免两者混搭使用。

4. 产品级 功能色

功能色代表了明确的信息以及状态，比如成功、警告、失败、提醒、链接等。

功能色的选取需要遵守用户对色彩的基本认知。在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。

文案

文案内容来源于 Ant Design，一文一字之间可研究琢磨的空间还很大。

分享一个感触很深的例子，里面有一个专业用语「阈yù值」和「阀fá值」，这两个字一开始我看了很久才看出来区别，查资料了解到，其实「阀fá值」在专业行业里是一个错别字，是一个错误的用词，其正确用法是「阈值」是所属行业认可通用词。「阈yù值」又叫临界值，是指一个效应能够产生的值或最高值。

所以精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，在使用和定义文案时要注意以下几点：

• 从用户角度出发；
• 表述一致；
• 重要的信息放在显著位置；
• 专业、精准、完整；
• 精简、友好、正面。

在有限的空间内将重要的信息放在最前面，让用户第一眼看到最重要的内容。（或通过高亮、留白等方式突出重要信息）。

结语

因为硬件软件一直在变化，设计规范和内容也要定时更新，规范是为了在繁多复杂业务中寻求一种平衡，帮助各团队更的完成任务，有些内容适合强制规定，有些内容适合规范一个范围，有些内容适合制定一种规律方法……当出现特殊情况时需要重新审视和不断完善灵活使用。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

之前听一位同学在公司看国外作品学习的时候，公司的一个老员工发现了，就过来语重心长地和他说，你看这些东西没用的，学不到东西，就是在浪费时间等等，类似这样的话说了一堆。听到这个话题的时候就特别的亲切，因为在开始接触设计的时候，和那位老员工的想法一样。但是随着对设计的理解越来越深，接触的项目多了以后，这种想法慢慢就淡化了。

其实新人对研究国外作品这件事存在误区是很正常的，毕竟应用的文字不一样，内容多数我们也看不懂，把时间花在这上面给人的第一感觉确实有点不合适，哪有直接去看国内的作品来得过瘾。我们暂时抛开作品的数量与质量不谈，来聊聊这个话题。

我们平时在工作中完成的作品，里面基本都会包含文字、图片或图形、色彩这几种基本元素，不管你做的是海报、logo还是画册都离不开它们，比如纯文字类型的海报、公告、条幅。

纯图片形式的灯箱、画册、展板、品大片。

纯图形的UI图标、布展装饰、logo徽章。

包括纯颜色的手机屏保、背景墙之类的设计，这些基本的设计元素，会在设计作品中单独出现。

而更多的设计作品都是这几种元素同时出现的结果，这些海报中，文字、图片、图形、色彩这几种元素都占全了。注意，这些海报用的都是中文，属于国内的海报对吧？也能够在这上面学到一些东西，那我们换几张国外的作品看看，有什么不一样的地方。

日本的、欧洲的等等都是优质的设计作品，我们可以来分析一下这些作品，风格、技法、表现形式暂时可以抛开。

构成他们的元素和国产海报有什么区别？都存在文字、图片、图形包括色彩，唯一的区别就是上面说的，不同的国家，使用的文字会不太一样。那么这种文字上的差异真的会影响到我们对这个作品的研究、欣赏吗？

答案很明显，不会的。了解一些构成知识的同学都知道，构成版面的基本元素就是点、线、面，而文字、图片、图形包括色彩，他们在版面中整体来看，本质上就是点线面的具象表现。那我们在欣赏这些作品的时候，完全可以把文字看成是点线面的存在，这样的话也就没有必要纠结他用的是哪个国家的文字了。

像这张国外的海报，我们把这里存在的视觉元素标注出来，他们本质上就是这些东西。

国内的也一样，如果你看到的是这些东西，还需要纠结这是哪个国家的作品吗？

版面中的所有视觉元素，都可以看成是点线面的存在。

来做一组实验，这张英文海报，我们把这里面的英文，替换成汉字。前后对比一下，海报的整体感觉，基本没有出现什么变化。

再换一组，感觉基本一致。

再来一组，这回我们把英文替换成日文。类似这个版面构成的形式，我们把文字替换成英文、汉字，变化也不会很多，依然很美观。我们研究、学习、欣赏优秀作品的时候，一定不能受到类似「看国外的设计没用」这类思维的束缚，不然的话你会错过很多的。

不光从构成的角度看这个问题是这样，其实从设计发展的角度来看，也能得出同样的结论。因为现代设计教育的起源来自德国的包豪斯，后来包豪斯的理念传到了美国，又通过美国传遍了整个世界。包括我们现在学习的平面设计体系，都是一脉相承的。从这个起源的角度来看，也不存在国内、国外那么大的差别。都是一个门派的，只要做的好，那看谁的都一样。说了这么多，应该能看出来，我们是鼓励大家去多看优秀作品的。那么坚持做这件事，又能得到什么呢？下面就来说一下，为什么要养成欣赏优秀作品的习惯？

欣赏优秀作品的习惯

先来看看这个习惯能给我们带来的好处有哪些。

1. 提升审美

长时间欣赏优秀的作品，会对我们个人的审美能力有质的提升，帮助我们开阔眼界。眼高手低虽然是个贬义词，不过这对于正在成长的我们来说是好事，最起码能让自己对自己的能力有一个比较清晰的认知，知道自己做的不够好，这样会有动力不断的鞭策自己学习新的东西，把专业做到更好。

2. 培养兴趣

如果我们对这个行业没兴趣的话，就算你再有设计天赋，也很难做好的。坚持看优秀的作品给我们提供持续的刺激，说不定哪幅作品就非常合你的胃口，勾起你的兴趣，让你花时间去研究。

3. 利用碎片化的时间学习

平时都很忙很累，再懒一点，就没什么完整的时间学习。这个时候如果能把碎片化的时间利用上，我们坐地铁、坐公交、午休、睡觉前，包括上厕所的时候都是可以通过欣赏这些优秀的作品提升自己的，这也是一个提升学习效率的习惯。

4. 为设计提供灵感和参照

这也是最重要的一点，不知道你有没有一接到项目，大脑就一片空白的感觉，是因为你干活干的太少的原因吗？不一定，有不少人每天不停的干活还这样。其实出现这种状况的主要原因就是看东西看的太少。很多好的形式我们见都没有见过，怎么可能有印象，没印象就更不可能把他们应用到我们平时的工作中了。

所以说，我们想有好的想法、无尽的灵感，必须通过看优秀作品这个成本低、见效快的方式来提升了，并且通过我们持续不断的积累，得到的东西会越来越多，这是一种可以不断提升自己的方式。

当然了，欣赏优秀作品也是有方法的，走马观花的看一大堆，最后能得到的可能只有审美的提升。就是感觉自己周围的人做的东西都是垃圾，轮到自己做，发现自己也很垃圾。那为了避免这个悲剧发生在你的身上，下面分享一些欣赏优秀作品的正确方法。

如何欣赏作品

我们欣赏作品的场景主要有两种，第一种是有目的、有针对性的去看；第二种是没有针对性的看。这两种场景要看的东西差不多，细节上会有一些差异，我们先来了解一下有针对性的。一般来说，有目的有针对性指的是我们接到了具体的项目，但是这个项目以前没有接触过，需要了解一下别人都是怎么做的，然后带着问题去寻找答案。

先从项目要求入手，就是看看你做的内容是关于什么的，比如你要做日本寿司海报，就去搜集这方面的作品。有些同学在搜索的时候很实在，要做关于寿司的海报就专门去找日本寿司的作品，这种方式的缺陷特别明显，如果你要做的这个项目品类能找到的优秀作品很多还好，不过多数情况下，优秀作品是不那么好找的。这个时候把思路打开，选择的余地就会大很多。

比如把日本寿司海报这个关键词缩减成日本料理海报，优秀作品的数量会成倍的增加。

或者你要做的是海报，那我们搜索的时候除了海报，还可以找日式的包装、画册。

网站、插画等等作品，都会给我们带来很多的思路。

数量的问题，这也是我们推荐看国外优秀作品的一个原因，光去找中文的作品，在一个小品类里，很难找到足够多的优秀作品，一般的东西又没有什么学习的价值，这时候加入国外的东西会让我们的选择余地更大、思路更广。我们在搜集作品的同时，连带关于项目的一些图片、文字材料都可以一起搜索，这样能帮助我们更深的理解这个项目，学到更多的知识。

其实学习这个行为不是非得上学、看书才能学，我们设计师在接触各种项目的时候，通过与客户沟通和查阅项目相关资料的过程也是在学习，而且我觉得这种学习方式比我们单纯的去上学读书更深刻、实用。学到的东西也是在工作中甚至生活中用得上。

在找到这些优秀作品以后，就可以尝试去寻找这些作品共同的规律。

比如文字，如果文字属于同一种题材的设计，就算是不同国家的作品，我们也会在里面找到一些共同的特征。比如这些关于食品的字体，都会表现出属于食物的那份圆润的特征，这就是一种规律。这些规律性的东西总结出来，就可以尝试应用到自己的作品中。这个是学习大的规律，在这个大规律的基础上，再去关注这里面的一些小的细节。想做好东西，稍小的细节也很重要。

再比如文字组的形式。文字的主要作用是传递信息，那么如何、美观的把文字表现出来就要靠文字组了。一款作品做的是否优秀，通过观察文字组的处理是否细致，很容易看出来。信息的层级关系需要文字组来表现，主标题、副标题、段落文字、时间、装饰性的文字等等，这些文字可不是随便扔到版面中就行了，它们都是通过设计师的处理，以文字组合的形式分布在版面的各个位置。

这里面每一个文字组合都是一个小的个体，比如很常见的日期的处理方式就有很多，像这张海报里日期文字组合的处理方式。

我们看到了觉得这个形式不错，就可以记下来。那这些处理方式我们见过了，遇到合适的项目，换一个字体，或者调整一下数字，就能应用到自己的项目中了，这些组合形式，你没看见、没有印象，自己拍脑袋是很难想出来的。

包括这种产品或图形的表现排列形式，在做画册、杂志、头图、详情页、海报、展板的时候经常会碰到。

自己排不好的话，就可以借鉴这些作品的形式和规律，再上手就轻松多了。如果你想做的是logo设计，也可以去观察优秀作品的细节，比如字体与图形的比例、文字与图形的间距是多少、文字与文字的间距如何控制，包括别人的创意点在哪，这些东西都是可以在别人的作品中学到的。

△ 《高手的平面课堂！解锁LOGO设计新技巧》

就像异形同构这篇文章，你看到了这类作品，就能回忆起这款 logo 使用的是异形同构中的边线同构这个方式设计的，这种方式有哪些特点？如何能设计出类似的作品？教程里都讲过了，这样又把之前学到东西巩固了一遍。

△ 《平面设计中，如何通过“抄袭”优秀的作品成为高手？》

包括你看过的作品，他们的网格是怎么划分的。使用的是什么样的字体、构图如何都可以作为我们思考学习的方向，关于这几点的详细内容，在之前的文章里很细致的讲过，没看过的同学可以去看看。

如果是没有针对性的看作品，和上面的思考路径是一致的，只不过是利用碎片化的时间来学习而已，更灵活一些，可以快速浏览，也可以观察细节。如果你有收藏整理这些材料的习惯会更好，拿出来就能用，收集整理的越多、越细致，以后工作起来越轻松。

案例演示

所谓的创意就是我们把不同的元素重新发散、打散、重组呈现的过程。能够保证有想法、思路的前提就是见识，要见过很多好东西，有了很深的印象以后才能凭借这些印象，学到的东西设计成新的、属于你自己的作品。下面给大家演示一遍，我们看多了优秀作品以后，再去做设计的时候会发生什么变化。

比如我们要用这些材料来设计一款网页头图。

看到这些材料，可能会想到以前在哪见过，类似这种左右放置的图配文形式。

产品价格的处理方式见过这样的。

文字的形式全部使用黑体和无衬线字体，很多作品都是这样处理的，放在一起很和谐。

还见过所有的文字组，都以左对齐的形式进行排列的作品。

只要有印象，我们在设计的过程中就会下意识的往这些方向上靠，设计出的作品也会接近前面的那些规则。

在这些规则影响的基础上，如果我们还见过衬线体搭配无衬线体的作品，图叠字的形式，也能做出接近的风格作品。

同样内容，不同的表现形式。你看过的优秀作品越多，选择的空间就越大。

我们再来看这个案例，一张艺术展的海报。

整体的骨架是这样的，这种骨架布局的方式来自于左边这个案例，类似的形式有很多。

主体文字组合的结构是因为见过类似的组合方式，在文字量近似的情况下，我们的文字组合也可以设计成类似的形式。

如果说我们设计的这个文字组合之间，距离稍远，也有很多的作品会使用线的分割来解决这个问题。

包括其他文字组合的布局方式，也是参照这种轴线式的排列方法。文字使用的是宋体搭配西文衬线体的方式，中文的宋体和西文的衬线体具有类似的笔画特征，基础文字的统一性能够得到保障。

将和主题相关的照片填充到划分好的网格中，这里面使用的照片是同一张照片的不同局部，这种对照片重复的处理方式也很常见，在给版面增加变化的同时，也会制造出一定的故事性，引发受众的联想。

一张海报从无到有的创作过程。

想设计出不错的作品，没有大量的积累，对优秀的作品没有印象是肯定行不通的。

总结

怎么样，是不是觉得多看看优秀的作品还是有用的？不管是国外的、国内的都一样能学到很多。类似我是做电商的，看印刷品的设计没用；我是做包装的，看版式的作品没用；我专门做商业项目的，看艺术类的项目没用；我们公司是做金融产品的，那看其他行业的东西都没用。遇到这种言论，我们可以冷静的思考一下，是真的没用，还是这个人，他不会用。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

为什么你的设计看起来很乱？在此之前我们先了解一个概念，我们怎样看这个世界？

我们通过眼睛看世界，眼（又称眼睛，目）是一个可以感知光线的器官。那么结论来了，我们看到这个世界，其实本质就是看到了光。举个例子，晴空万里时我们可以看到很远很远的距离，反之在漆黑的屋子里，我们什么都看不见。

我们再来了解第二个问题，眼睛是怎样成像的？眼睛通过调节晶状体的弯曲程度（屈光）来改变晶状体焦距获得倒立的、缩小的实像。简单来说，成像原理就是晶状体来改变焦距，简单一点解释决定成像的重要因素是焦距。

你的设计看起来很乱，往往在这几个方面出了问题：

• 明暗关系紊乱；
• 视觉焦点不明确，画面没有重点；
• 颜色杂乱，毫无章法。

明暗

明暗是指画中物体受光、背光和反光部分的明暗度变化以及对这种变化的表现方法。明暗分亮面，灰面，暗面，以及明暗交界线，反光五大调子。单个物体明暗关系，暗部（反光，投影）＞灰面＞亮面。整体关系，靠近光源暗部＞远离光源……画画核心画的是光，遵循光照的自然规律即可。

去色检查画面明暗关系

从上至下三张图依次是去色之后的黑白图；运用色相和饱和度给画面赋予一个颜色的单色图；原图。

从下图可以粗略得出结论，明暗（光源色）+固有色=色彩。调色之前先处理明暗，画面颜色处理起来就非常简单了。

最近火爆的国产硬核科幻片海报，即使去掉颜色，黑白关系依旧明确清楚。好的设计即使没有任何颜色，依旧是一副好的素描画。我所理解的明暗关系与色彩的关系相当于人体与衣服妆容的关系，对于一个美女是否漂亮，衣服妆容的搭配是你能达到漂亮的上限，然而你的脸型，身高，气质，皮肤才是你能达到的惊为天人的基础。

视觉焦点

视觉焦点究其概念，是让我们的视线多停留几秒的视觉元素，我们在画面中第一眼就能看到的元素，画面中的「主角」。

对画面的视觉漏斗进行分类：

• 视觉焦点：想看不见都很难，表现突出；
• 重要元素：不经意就能看见；
• 辅助元素：仔细看看也能看见（类似买理财产品的最右下角的小标注，「投资有风险，理财需谨慎」）

高斯模糊法看视觉焦点

眯着眼睛看形，睁着眼睛看细节。把画面模糊调到一定程度，然后看画面，如果画面仍然能看清楚「主角」，那么画面的视觉中心就是可以的。下图画面即使模糊了，我们依然能看清「男主角」沈腾以及飞驰人生四个大字，虽然原图背景复杂以及其他装饰物很多，依然不影响画面的整体协调感，元素多且杂而不乱。

这上面的两个例子看出，即使画面模糊了，还是能清晰看到画面表达的主题。那么模糊度多少合适呢，一般调整到上面所说的视觉漏斗中重要元素看起来刚好模糊到看不清就可以了。

色彩

色彩是附着在物品上由于光的照射产品漫反射的颜色，可以粗略按色彩元素分为光源色，固有色和漫反射产生的环境色。按照长期的实践经验来看，通常比较和谐的配色方式是除了产品的固有色之外，尽量把光源色和环境色统一在三种颜色（黑白灰不算颜色）之内，颜色比例尽量类光源色的主色调占据画面百分之八十的面积，其他环境色作为补充。

色彩插件检查配色

谷歌插件 palette.site 能分析出画面颜色的状态以及画面中几种主要的颜色，借助这个插件能很轻松检查画面是否超过了3种颜色（黑白灰不算颜色），如果超过三种颜色，那么页面就需要做减法，或者将颜色统一在一个色系里，用明度以及饱和度区分。

插件的使用方法：可以直接使用浏览器下载，然后也可以在浏览器中选择一张图片，右键「在新标签中打开图片」，然后再「点击右上角的插件按钮」分析颜色状态。

从上面的两个案例中可以看出，两个 banner 的颜色分析基本都在三种颜色以内，特别是下面的看起来比较复杂的颜色，总共分析的颜色也就红黄蓝，其中蓝色还是点缀色的存在。

今天的内容就说到这里了，我们回顾一下重点内容，解决画面看起来很乱可以有以下方法：

• 去色检查画面明暗关系
• 高斯模糊法看视觉焦点
• 色彩插件检查配色

设计虽没有近路，但可以少走弯路。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

作者： John Saito | 翻译： 正_青_春 审校： 凌艺蜻

我从设计中学到的一件事是你无法取悦所有人。你可以尝试，但你最终会得到一个大打折扣的设计，而且无法让任何人满意。

当你试图让所有人满意时，你会失去你的重点，你会开发一些人们不需要的功能，你所写的用户也根本不会去读。

好的设计就是完全围绕一个清晰的目标。这一点非常重要！

过去的一个月里，我一直在和在设计中有明确清晰目标的设计师交流，他们来自Google，Airbnb，Slack, Dropbox等等, 我想窥视他们的内心，看看是什么驱动他们做出决定以及是什么在指引他们的设计，以下是我学到的一些内容。

UXRen

1、从问题开始，而不是答案

 你是否注册了新产品，然后第二天就忘记密码？这已经无数次地发生在我身上。如果我向你求助，你会建议我做什么？

 有些人可能会建议我直接写下密码，轻松，问题解决了。但是安全专家不会推荐写下密码，因为那并不安全。

好的设计师不会直接跳到解决方案，他们会花时间去理解问题。

 那么，好的设计师会怎么做？好的设计师不会直接跳到解决方案。他们会花时间去了解问题。他们提出问题并找出原因、背景和限制：你一般怎么记录你的密码？你总是随身携带手机吗？你有多少密码？

你越了解问题，你越能找到解决问题的切入点。深入理解给你自信，深入理解就是把你的初步想法转化为实际深入的观点。

我询问了Google 智能助理的产品设计师Adriana Olmos关于她解决问题的方法。当她的利益相关者提出需求时，他们经常根据解决方案而不是问题来定位他们的想法。“我试图去了解他们解决问题的理论基础是什么”她说，从那时起，我与他们一起去了解用户最底层的需求，并了解背后的原因，然后来做优化迭代。了解了原因，如何去做就顺理成章了。

了解了问题的来龙去脉，你就可以找到解决问题的方法了。 评论(0) 浏览(3158)

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

网络上有很多关于Icon设计的文章，一些文章从部分维度切入讲述Icon的设计理念，但大部分缺乏整体性。

所以我尝试把自己的思考方式结合其他人的设计理念整理了一个完整的Icon设计法则，通过简单易懂的描述语言，并且结合设计案例呈现出来，希望能够对大家有所帮助。文章使用的案例只代表个人观点，并不代表相关产品。

本文重点讲述Icon设计思维，关于Icon的具体定义以及具体的制作过程就不再赘述，网络上有很多相关文章都有讲述。

从不同维度对Icon设计进行解析，整理一整套Icon的设计法则。每一个产品中都有不同类型的Icon，产品通过Icon可以快速的向用户传递语意，通过独特的设计语言让用户形成对于产品的认知心智。Icon的重要性就不言而喻了。

ICON的设计法则-菱形设计法则，主要包括语意、层级、设计形式、风格、一致性、范围。而其他的设计思考也是这个设计法则的变体，中心思想没有发生变化。通过对以上设计思考点的聚合，来设计能够传递Icon语意，并且能够清晰展现产品结构和信息层级的Icon系统，通过差异化的设计形式展现产品设计的独特风格，让具有一致性的设计语言传递信息，和用户形成共鸣。

层级

第一层级Icon

第二级别Icon

第三层级Icon

第一层级的Icon一般指首页的井字入口Icon，让用户快速获取入口信息，完成对产品流量的分流，让用户快速完成自己的任务。这种类型的Icon是级别最高的，无论是面积、形式感、视觉冲击力都应该是最突出的，这种高层级的Icon可以简单通过一下三种方法表现，1、拟物化的设计方式增加视觉重心和吸引力。2、通过细节的增加呈现Icon设计的复杂形式感。3、采用冲击力强的色彩对比，抓住用户的关注点。除此之外具体的思考过程，后文也会详细讲述。

下图分别是“自如” “每日优鲜” “大众点评”的首页入口Icon，分别采用了拟物化设计，细节添加，色彩对比的设计方法。

第二级Icon归纳为导航类型的Icon，引导用户操作产品，完成用户的任务，同时传递品牌特色。这种Icon类似真实街道中的指向标。第二层级的Icon不需要做的视觉重点非常重，能够让用户认知到，并且了解Icon传递的信息，在操作行为上产生预期就可以。通常的设计样式是线型Icon或者是面型Icon。

下图分别是“自如” “每日优鲜” “大众点评”的二级Icon系统

第三类Icon是语意型Icon，主要是向用户传递信息，烘托信息氛围，并且引导用户浏览信息。这种类型的Icon视觉相对较轻，且不可点击，具体的设计思考在后续的内容展开。

下图分别是“自如” “每日优鲜” “大众点评”的三级Icon系统

以上三级的划分并不是说Icon只有这几种类型，这样划分是从功能和视觉上进行区分便于设计同学理解，当然在具体的设计过程中也可以对Icon进行更细化的区分，最主要根据具体的需求去定义Icon的层级，然后再采用对应层级的设计语言。

语意    

1）、Icon背后的语意(Icon的特性归纳）

2）、Icon的可识别性(Icon的特点表现)

Icon的重要意义是抓住用户能够通过图像式的语言快速获取产品信息。所以在Icon的设计之前，需要思考Icon背后传递的文字语意，理解语意，构建对于语意的多维拆解（比如沙发是由靠背、两个扶手、四条腿构成，重心要稳，和床有哪些区别等等）。同时还需要思考Icon图形化之后的可识别性，基于对用户认知的了解，归纳Icon设计中需要具体表达的几个关键特点，迎合用户的认知心里。帮助用户快速的获取Icon想要传递的信息，如果不能快速的获取，反而增加了用户获取信息的成本，那就本末倒置，削弱了用户的使用体验。

例：下图是“大众点评”二级Icon设计的语意表现思考方法

设计形式

1）、外形

2）、表达方式

3）、色彩组合

4）、Icon特色

外形是Icon 的基本形态，不同的形态传递不同的视觉感受，构建不同的心智。同时Icon的外形决定了内部元素的设计。

Icon的表达方式主要两种，分别是线型Icon，面型Icon。线型Icon形式抽象、简洁，便于用户识别，用户认知成本较低，缺点是Icon容易极简，造成了似是而非，可识别性降低。面性Icon相对线型Icon视觉重心更突出，便于用户聚焦，设计表现形式会更丰富，缺点是可能会过于复杂，造成信息层级混乱，增加了用户的认知成本。

色彩组合，就是Icon中的色彩语言，在设计Icon的过程中通常包括单色系的Icon和色彩组合系列的Icon。通过不同颜色的组合传递产品的品牌形象和产品特质，在设计Icon的过程中，尤其是导航Icon的过程中不建议使用超过两种颜色的Icon，这样容易使用户视觉疲劳。

Icon特色是Icon在设计过程中的细节，这些细节是体现Icon自身精致的部分，同时也会影响用户对于产品和品牌的认知联系。影响产品的感性认知触达用户内心。

例：下图以“大众点评”中的“拍视频”icon做举例说明

风格

1）、品牌理念

2）、产品特色

3）、视觉特色

品牌理念是是指产品背后的定义和想要传递的价值。通过简介的符号、文字传递给用户的认知、理解、印象、感受。通过塑造品牌理念的塑造，和用户在感性层面形成共鸣。融入品牌基因的Icon系统具有更好的辨识性和认同感。这需要设计师和业务团队一起沟通产品，深入理解业务，总结出关键词语表达品牌，最终和业务团队达成统一共识。

产品特色指产品在同行业中的定位差异，核型竞争力。通过简洁的视觉语言进行表现。通常的产品特色体现在业务范围、用户群体，使用场景，产品功能等。在这四个维度中总结归纳成可落地的具体的表达关键词，进一步具象化。

视觉特色指在竞品分析中，总结得到在视觉层面其他产品中可以借鉴的感性共性和自己产品定位差异性的结合。通过可借鉴的共性传递行业的特点，而差异化的视觉表现可突出自己产品的特色和竞争力。

例：继续以“拍视频”Icon为例子进一步解释说明

一致性

一致性的综合表现在圆角、透明度、线条粗细 、间距、颜色、层级、渐变、特色细节。

Icon的一致性有利于降低用户的认知成本，便于品牌传递，而Icon的非一致性会增加用户的跳出感，降低用户对于产品专业度的认可。通常情况下可以通过以上8个维度进行分析和提炼。前七个维度大家比较好理解。重点解释一下第八个维度“特色细节”，特色细节是设计师通过对于产品和业务的理解主观加入的一些关键性视觉表现的点，增加产品一致性的基因，可能是断线，尖角，原点等等标志性元素。

例：下图通过对“大众点评”Icon做拆解进一步从六个维度说明Icon系统的一致性（并不是说每一个icon的设计必须包含八个维度）

范围

视觉范围和热区范围

随着Sketch的普及，更多的设计师开始采用一倍的设计画布输出设计方案，但在设计的过程中需要注意视觉面积和物理面积，两个Icon的物理尺寸大小是一样的，视觉感性的面积偶尔会变化。所以需要在设计完Icon之后，对Icon进行排列，进行视觉对比，发现视觉的不一致性。

热区范围是代码定义的用户可操作的交互面积，视觉是感知不到的。热区范围的确定有利于开发工程师和设计师达成视觉方案的一致。避免后期由于大家对于方案设计、开发理解的不同，增加后续沟通的成本。通常情况下会出现的问题就是

1、界面开发的还原度低

2、热区范围过小，用户无法点击

3、Icon的热区范围不一致。

总结

在设计的过程中，Icon的样式可以借鉴，但要根据自己的产品做形式上的调整，具体可以通过上述谈到的几个维度作为切入点调整Icon。同时在设计的过程中避免无穷的细化，因为有些细节用户根本不会观察到，这样做只能是设计师的自嗨。设计师容易漏掉的是热区范围的确定，尽管Ios平台和Android平台都有对于Icon范围的定义，但针对产品的icon热区范围调整还是要有设计师自己的想法。这样才能增加Icon设计的思考价值，也更符合产品自身的特色。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里 

 

科技不仅改变生活，而且正在改变着我们的生活习惯！不管哪行哪业，不去了解的科技，就面临着被淘汰的危险！电商作为离互联网最近的行业，或许能从这些高科技里找到一些方向和启发！

 

NO.10 踩不湿的鞋子

Vessi鞋，号称世界上第一个100%防水针织鞋

它看起来跟普通的鞋子无异，

但是它具有超强的防水性能，

100%防水能力

并且360°无死角

小水坑我们不放在眼里

甚至可以

直！接！踩！

Vessi鞋的秘密在于它的针织面料专利，

这个称为 Flash Knit 的面料一共有 3 层，

分为不同的功能面料，

这使得它比简单的防水涂层强得多。

第一层也是最外面一层是弹力编织层，由聚酯纤维和尼龙混纺而成，起到防水、拒水、防风的效果；

第二层是纳米过滤层，能进一步起到防水、吸湿作用，最里面一层是透气内层，帮助脚部排汗。

NO.9 材料界的“变形金刚”

下面这些彩色的小卡片—— Formcard

是由英国设计师PeterMarigold

所研发的一种神奇的修补塑料卡，

它可谓是材料中的百变星君，

想变啥就变啥

将原本硬邦邦的卡片放到热水中，

就会变软，

然后就可以捏成各种形状啦！

比如~

手机支架

高级一点的车载支架也是可以滴~

修补雨伞，哪里坏了补哪里

so easy~

虽然看起来软，

但是硬度堪比尼龙。

它的材料是一种

基于生物塑料而

完全无毒的淀粉材料

表面着色的颜料也是安全的。

值得一提的是——

这种修补塑料可以重复使用无数次，

只需要用热水泡一下，就能重新使用。

NO.8 一种“分裂”的材料

杜邦™ Tyvek® 特卫强®

有这样一种材料

防水的同时还透气

是一种会呼吸的材料

硬的跟纸一样

软的像布一样

明明脆弱的跟纸一样，

2个200斤的胖子都未必能把它撕破！

还能用于各种酷炫的手工艺品

既可以当作女生喜欢的包包

还可以变身为时尚的服饰！

杜邦™ Tyvek® 特卫强®

特别的材料特性让它成为设计师们的宠儿

各种创意设计、产品层出不穷

NO.7能修复的黑科技抹布

XG防水珠划痕修复布

这一款黑科技“魔术布”

只需3s即可快速修复车划痕

这块“魔术布”采用

聚酯纤维以及“氧化铈”成分打造。

氧化铈具有特有的切削力，

再加上聚酯纤维布具有摩擦力，

车漆表面的划痕可以快速被修复。

不仅如此，

修复的同时“魔术布”

中含有的乳化蜡成分，

可迅速附着保护漆面，

相当于再给车车做一个美容~

一块“魔术布”可使用15次左右

无论新车、旧车、深色车、亮光漆均可适用

绿色制剂成分还可以保护你的双手

NO.6 擅长堵的材料

FLEX TAPE 防水胶

水流不停

这胶带一拍就堵住了

网上称之为世界最强防水胶——

FLEX TAPE

家里水桶破了个大洞？

一拍，搞定！

家里水管爆了？

一拍，搞定！

NO.5 传说中最变态的黑科技涂料

LINE-X 涂料

据说任何东西涂上他

都刀枪不入坚不可摧，比如

西瓜涂上之后能抵抗锤子的猛击

鸡蛋涂上之后能弹起来了

汽车用钥匙刮都没任何损伤了

在活水表面涂上一层涂料

你都可以在水面

走起魔鬼的步伐

FLEX TAPE 材料

已经应用在各个领域，

尤其是军事、汽车领域

比如美国五角大楼

海军陆战队的悍马

NO.4 具有“生命力”的水泥

生物混凝土Bio-concerte

它依托于芽孢杆菌的神奇生命力

这种细菌产生的孢子

能在没有食物和氧气的情况下

存活200年之久

它将作为细菌营养来源的乳酸钙

混合搅拌成混凝土

若混凝土开裂

雨水渗透进去

休眠中的细菌通过代谢

把钙和碳酸离子结合

形成石灰石，逐渐弥合裂缝

建筑物的使用寿命

有望大大延长

实在是太神奇啦！

NO.3 能屈能伸，时软时硬的材料

P4U

国外有一种材料叫 D3O

在常规状态下是柔软的

却能防住突然的受力撞击

非常安全

鸡蛋摔不碎，防撞防震能力一流

目前已经有上百种产品用到了D3O这种材料

从手机壳到护膝再到芭蕾舞鞋

再也不怕手机碎屏了

中国市场对D3O也有强烈的需求

但 是

前期中国企业从国外采购时遇到不少阻力

难道国内就不能开发出类似的材料吗？

我们就不能做出“国产版的D3O吗”？？

可以的！

它就是前面提到的

P4U

NO.2 能吃的塑料袋

这款塑料袋非常环保

由红薯、玉米、马铃薯与植物油

等12种可食用原料做成

100%有机食品

就连印刷字的油墨都是可以吃的

不仅如此

它的韧性和耐用性

不输普通塑料袋

扛得住重物，挨得过焚烧

更重要的是

它具有生物可降解性

在野外它180天就可自然降解

埋进土里45天，扔进水中1天

沸水中15秒就可以完全溶解

一个塑料袋虽小，却足以改变世界啊

NO.1 点沙成土，造福人类

可以让沙漠变成土壤的黏合剂

重庆交通大学力学教授

易志坚带领研究团队

经过7年的反复试验

研发出一种

可以让沙漠变成土壤的黏合剂

这是一种从植物中提取的

植物纤维黏合剂

它能赋予沙粒一种约束

使得沙粒像土壤一样能从任何方向结合

具有自修复和自调节的特性

将沙子与黏合剂混合后

把水倒进沙坑里再也不会轻易流失了

这项伟大的发明可以让沙漠变良田

中国科研团队已经在内蒙古阿拉善盟的

25亩沙漠里进行了实地实验，并取得成功

未来，我们将会看到

越来越多的沙漠逐渐变成绿洲

沙漠不再是寸草不生

反而可以种植瓜果蔬菜

造福人类的发明，大赞！

 

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计