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

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

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

UI走查表有什么用？

一套成熟的UI走查表能更科学更地改稿；减少设计中的反复试错、评审交付时更言之有物；不仅仅停留于“看上去顺眼”、“我觉得挺好”、“先这样”的视觉表层。更深一层来说，走查表有助于培养设计师的结构化思维，形成一个完整的设计体系。

01.页面要表达的意思是否正确

在设计页面的时候，需要注意页面要传达给用户的信息重点，例如本次案例的产品需求中，该页面的功能是促使用户快速下单，信息上则要侧重于价格与优惠信息。

首屏信息是给用户的第一印象，在用户打开页面，尽可能展现出更多用户感兴趣的内容， 而此次页面需要突出促销优惠信息，次要信息则放在后面。

02.页面视觉重点

相信大家平时经常听说0.618的黄金比例（斐波那契数列），屏幕方寸间合理运用黄金比例可以让界面视觉重心更加平稳，视觉更加舒适。同时有助界面区域分割，集中视觉焦点，承载更重要的信息，让整个界面布局更加合理。

淘宝、京东到家等成熟的一线产品黄金比例运用，o在视觉焦点区域都向用户展示了关键信息。

02.元素间距符合各层级的关系

为什么页面会杂乱无章？主要是信息一味地堆砌，分布没有区别，但只要遵从以下方法，页面就会清晰很多，有节奏的呼吸感也出来了。

同类的板块不应被混乱的间距区隔开来，他们应该更集中，并且整体与别的板块区别开来，同理，不仅仅是板块，元素与元素之间也是如此，这样用户可以更加快速地看到自己想要的东西。

那么，如何更好地让信息按照相似属性分布合理呢？这就要利用5分、等分原则来让分布变得更合理，假设相同板块的间距值为a px，则不同板块为2apx。这样不仅在视觉可以将信息分布开来，还能让整体的布局更加规整，不会凌乱，尽可能使用同一或者同倍数的间距，更便于开发。

案例中，相近元素的间距为16px（a px），则不同类别的元素则为32px（2a px）。

01.字体种类的控制

一个产品如果字体种类过多，会导致界面的不统一与混乱。通常字体控制尽量在3种以内，中文字体、英文字体以及特殊数字字体。如下图：

02.字号与粗细控制

字号过多使信息失去重点，基础字号控制在3种以内，目的在于清晰区分信息的层级。正文字号建议为28px，副文案为24px，大标题、价格等重要信息需按实际情况加大，令信息的层级区分更明显。

加粗字体往往是整个界面的视觉焦点，重点的文本（如标题、价格）需要加粗处理，注意控制字体加粗的使用，以免造成信息层级的混乱。 下图为调整字号及粗细的前后对比：

03.行距控制

行距太小不便于用户阅读，太大会显得松散，所以控制在1.2-1.5倍的范围是较为舒适的范围。下图为调整行距的前后对比：

04.字体颜色

字体主要以黑白灰为主：#333333､#666666､#999999；字体颜色深浅有序能让信息层级主次分明，产品应该根据不同模块以及同一模块的层级需要调整不同的灰度值，并在产品中反复使用，统一规范输出。

信息越重要，字体颜色越深。除此之外我们还需要注意到什么呢？也是很多刚入行的设计小伙伴很容易忽略的细节，产品的实际使用环境。比如，我们此次改版的产品详情界面就是线上下单，线下提货的运营模式，不仅需要考虑室内使用环境，还需要考虑到特殊的室外强光环境。结合下图感受一下。

如何在强光环境下保证产品良好的视觉体验呢？这也是UI走查表需要注意到的细节点：强光测试(大于4.5:1)。

4.5：1经验数值参考前辈行业经验总结：

https://www.w3.org/TR/WCAG20/

https://www.sitepoint.com/making-bootstrap-accessible/

我们先观察一组颜色对比，如下图：

我们会发现字体颜色层级依然是深黑色、中黑色、浅黑色，相信很多设计师朋友已经注意到我们使用的颜色更深了，为什么呢？为了保证好在强光环境下的信息阅读可阅读性，如下图：字体信息最浅层级，浅黑色的色彩数值对比数值都大于4.5:1。

强光测试链接：https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF

有细心的设计师朋友或许已经注意到色彩值并没#333/#666/#999那么便于记忆了，为什么呢？

为了提升更好的视觉感受与界面的品质感，我们在字体颜色中采用了偏蓝灰，至于为什么，大家不防给我一起观察下图，上图灰色看上去略微有一些脏脏的感觉，下图视觉更耐看、更有质感。

腾讯新闻、金色财经App中的也应用到了偏蓝灰，带来种扑面而来的清爽。

除了常用字体层级的颜色对比，在界面中针对关键的卖点信息还用到强调色，即品牌色

品牌色也会经常运用到特殊字体、提示文字、链接等等。

改版前，促销信息缺少提示入口；改版后，以品牌色作为入口字体颜色，引起用户注意。

01.视觉比例

由于图标通常都是成群结对的出现，彼此之际的统一性显得非常重要，但是常常容易被忽略，可以制定如下图的图标盒子来规范尺寸。

02.图标设计要点

设计图标时应注意基础形状复用，保持整体识别性。如下图重复使用矩形、圆形、椭圆形等基础形状进行设计，既能统一大小又有整体感。

面性图标

设计时需要注意挖空比例的一致性，保持图标的整体性。如价格走势、降价通知这一排图标，挖空比例控制在20%

线性图标

设计时应注意保持良好的线条粗细的统一，案例中使用2px的粗细线条重复使用，所有图标的粗细与文字粗细一致，和谐统一

03.图标尺寸

在app中，功能图标大致可分成两种：可以点击的按钮；不可点击的展示图标。

可以点击的按钮常用于导航栏、tab栏、操作栏（吸底按钮图示）常用尺寸为：48x48px 64x64px。如下如的导航和吸底按钮都用了48x48px的大小。

不可点击的展示图标常用于信息展示位置（价格走势/规格/评论等图示）常用尺寸为：24x24px 32x32px，如下图，评论模块中的展示图标使用24x24px，价格走势则使用了32x32px的尺寸。

04.标签的走查规范

从商业的角度，标签是为了凸显产品卖点，比如你在商场时常能看到“全场低至2.9折”这类的促销信息，其实在界面中同样也会有，目的就是为了抓住用户贪小便宜的消费心理，对比没有标签的同类商品，用户会更佳倾向与有有标签的商品。

常用标签样式有三种表现样式，面性：填充一整个色块；线面结合：低饱和度的色块结合高饱和度的描边；线性描边：1px粗细描边；

如上图：为展示清楚，在原来基础上放大了1倍，运用规则与之前提到的图标一样，根据模块功能的重要性去搭配，按照重要到次要的排序是：面性>线面>线性

标签呼吸感规律：

很多初级设计师都在疑惑到底标签文字定多大合适呢？标签字号一般为：18-22px

以"自营"标签为例

如上图：外框边距横纵向成2倍的倍数关系，所以以后在画标签，只要先定好字号大小，剩下的边框边距就按照2倍的关系去拓展

为了确保我们做视觉稿的时候易于文本的阅读我们通常会用到一些配图，而这些配图通常也影响着我们整个界面的美观度，一个优秀的设计师在设计作品时都会特别的注重图形与图象的比例，图片的选取当然也是重中之重，那么我们在项目中应该如何选取图片并且正确的使用图片的比例呢？

01.图片使用的规范

第一点：首先就是要做到让图片的背景保持统一并且做到干净整洁

第二点：图片主体的比例大小跟其他图片保持统一避免出现有些图片展示局部有些图片展示整体

02.图片模块的常用使用比例

UI设计中图片的比例会比较的多常用的有下列几种

1：1，这种比例比较适用于电商，它可以让商品图片展示最大化。也是目前电商最主流的图片使用尺寸。如下图：

16：9，这种比例比较适用于视频，这是标准的人体工程学比例，根据人体工程学家的研究发现人的两只眼睛的视野范围并不是方的，而是一个长宽比例为16：9的长方形，所以我们看到的视频比例通常会采用16：9。如下图：

4：3，这种比例应用于新闻类APP比较的多，它源自于一些微小型相机最原始的尺寸比例，不需要进行过多比例的裁剪，应用起来比较方便，对于需要展示大量的图片信息类的产品来说特别的适用。如下图：

如果你还是不知道如何去使用尺寸，那么你可以直接查找相关竞品进行设计。

压轴给大家带来一个小惊喜，我们整理了一个较为完整的设计走查表，希望在实践中能够帮到大家。

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

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

上周和小伙伴一起翻译了一篇 medium 上点赞量超多的文章（8.1k赞），该文作者在电子产品的界面设计领域有13年的从业经验，也经历了从架构师到用户体验设计师再到如今的产品设计师的多次职业转换，文章主要是讲他对用户体验设计的犀利吐槽，以及对产品设计所代表的工作方法的无限看好。或许观点上并没有什么新意，但是，就像某大佬说的，设计是对混乱的驯服。想要驯服混乱仅凭理论套路是远远不够的，而设计师真正的价值或许也就在于此：投身于未知与混沌的灰色之中，并且还要从中分出黑白。

那么为什么我要翻译这篇巨长的文章呢？就我个人而言，单纯很喜欢作者傲慢中带着犀利的风格，就像看一篇文字版的吐槽大会般有趣。我在翻译的时候加上了自己的思考和看法，所以，文末也留了 medium 的原文链接，可以去查看作者的本意，并观看其中的演讲视频。

这是关于我从架构师转变到用户体验设计师的一段经历，以及我是如何看待行业现状的。

十年前的某一天，我决定要把我的职业从架构师改成用户体验设计师。我记得当时很多可用性专家、架构师、界面设计师、交互设计师对我说：这只是潮流而已，「用户体验设计」这个表述并不，简直就是胡说八道，体验怎么可能被设计？

然后在去年，我又突然决定把我的职业从用户体验设计师改成产品设计师。同样的，一群用户体验设计师又来对我说，这只是潮流而已，用户体验设计师和产品设计师之间并没有什么本质的区别。

但是，对我来说，它们是不同的。在我看来，产品设计更加的谦虚真诚。我觉得这是用户体验设计师不具备但最应该学会的：谦虚务实。

我不是在劝你像我一样改换职业名称（坦白地说，你最好别这么做），我真的一点儿也不在意。我只是想告诉你，我决定转变的原因，以及我是如何看待行业现状的。

很肤浅的话题，聊职称大概是世界上最无聊的事儿了，但是作为设计师们，我们又确实很喜欢讨论它。或许，这次我们可以聊的更深入一点。

用户体验设计的出现是因为我们设计师的需求

我一直很喜欢 Alan Cooper 提出的这个词：交互设计师（interaction designer）。我认为它很地抓住了这项工作的本质。但是早在十年前看来，这个词的定义就已经很狭隘了。数字产品的设计师们希望工作能触及到更多的内容，而「用户体验设计」似乎就承担了这个「需要触及更广泛内容」的责任。

它确实抓住了这个需求，现在 UX 这个词广泛流传，每个人都在使用这个缩写，但问题是每个人对它的理解是不同的。所以，直到现在它也是个令人疑惑的概念。

在Peter Merholz 的一次访谈中，Don Norman 对创造 UX 这个词的初衷做了如下解释：

我发明了这个词是因为我觉得人机交互和可用性这两个词儿太狭隘了。我想要创造一个可以覆盖人们体验各个方面的系统，包括图形设计，界面，体感交互和这个系统的使用手册。但从那之后，这个词就开始广泛地流传，慢慢地失去了它本来的意义。

如今它偏离本来的意义越来越远，以至于 Alan Cooper 先生说：根本没有用户体验设计这回事。

UX设计师是如何看待自己的以及他们真正做的是什么？

在我们尽可能扩宽工作边界的努力之下，我们把 UX 这个气球吹得快要爆掉了。UX 现在承担了「设计不同触点的体验」的任务，包括组织转型，制定策略，改革创新，市场营销，设计从 app 到广告、服务、设备、地点、事件，甚至公司文化在内的所有事情。

或许用户体验确实应该做到这些，但是问题是，没有一个用户体验设计师能一个人把所有的这些事情做好，要创造一个复杂的产品，你需要的是一个由不同领域专家组成的团队。

我不得不说很多 UX设计师真的是眼高手低，他们根本不具备足够的技能或者经验去支撑他们的野心。

我同时也负责招聘的工作，大多数申请 UX 这份工作的求职者可以分为以下几类：

• UI/UX设计师，其实就是图形设计师，他们并不擅长信息架构、定义目标和需求，创建交互模型，考虑商业利益。他们只生存在追波上。
• UX设计师，他们靠画规范的线框图谋生，有时候也做做可用性测试。（顺便说一句，他们是最有可能成长为优秀的产品设计师的人。很多有经验的 UX设计师叫他们「线框仔」，我真的很讨厌这种没必要的鄙视。他们忘了自己也是这么成长起来的。）
• 空想家，专注于建工作坊，喜欢在墙上贴便利贴和画布，但是通常没有把想法转化为实际设计方案的能力。

当然，以上只是一种简单的归纳，但是从我的观察来看，很多做 UX 的都可以归到这三类人当中，因为真的很少见到那种既懂战略又会战术，既有创造力又有执行力，既了解商业又懂设计的人才。

UX设计师日常做的事情以及他们对商业的价值根本配不上他们的自我认知：「用户体验设计很重要 」。

用户体验设计实际上并不像很多「什么是UX」的文章写的那样是所有事情的中心。我推荐你去看Paul Addams在UX London 2018上的优秀演讲——《The end of Navel Gazing》。标题「用户中心论的终结」很好地表达了这个意思。

UX专注于用户和工具，但是这两点并不足以解决真正的商业问题

我观察到的另一个现象，是关于用户体验设计目前的状态的。UX设计师们每天都会发表数不清的文章，它们大部分都是关于研究工具以及方法论（例如用户画像，用户体验地图，原型制作工具，用户研究方法等等），各种教程，无关紧要的图形设计趋势，或者用户界面细节。

Fabricio Teixeira 和 Caio Braga 写了一篇优秀的文章来说明这些理论的狭隘之处：

https://essays.uxdesign.cc/state-of-design-publishing/

然而，这些我们经常讨论的东西，对于处在残酷商业竞争环境下的产品设计团队来说，并没有什么用。因为计划与管理实际的产品开发进程和理想的「Design thinking 五步法」之间并没有太大的关系。

整个 UX 行业好像对商业这部分都没什么兴趣，也难怪，「用户体验设计」这个名字就暗示了他们只关注用户。商业是别人的事。

UX设计现在很像一个宗教，而且它的信徒的想法通常都很接近

也难怪会冒出 UX 的忠实捍卫者们了，如果你胆敢不同意他们的信仰，他们就会把你的心扯出来。

仅仅只要说一句：用户研究不是总是被需要和有实际意义的。他们就会告诉你如果你不会用户研究，你就不是一个合格的用户体验设计师。如果你个人并不是很喜欢一些方法论，像用户画像或者其他，你最好赶紧默默溜走。

可悲的是，UX们总是想成为最有创新能力的人。但是我认为他们并不是。因为，创新力需要尝试不同的工作方法，考虑新鲜的想法，要求与众不同以及灵活多变，敢于实验，勇于实践，并拥有商业头脑与落地思维。想要成为真正的革新者，需要的是自己去开创自己的道路，去突破规矩，去冒险。而不是重复说那些所有人都在说的简单的陈词滥调，遵从那些轻而易举的方法指南。我觉得 UX设计师整个群体都搞不清楚地图和实际道路，模型（或其他噱头）和现实之间的差别。（只有这些「革新者」的想法才很容易被预测：因为他们所有人都读一样的书，说着同样的话。）

我感觉我已经超越了UX

我从事数码产品的设计有13年了，现在我不觉得我和大多数的 UX设计师之间有什么共同点。我觉得我已经超越了用户体验设计。我跟产品经理或产品需求方之间更为投契。

Peter Merholz 在他的一次演讲中说过，用户体验这个行业的出现是因为产品经理对用户体验缺乏考虑，我同意这种说法。

数字产品就是我现在正在做的，像网页，app，界面。我的目标是为我的客户创造一个成功的产品，一个会帮助他们赚钱或者省钱的产品。可用性和用户体验只是实现这个目标的一部分，它们很重要，但是说实在的，并不是最终的目的。我不会像大多数的 UX设计师那样不切实际的浪漫主义。

我也需要为我自己和我的公司赚钱，所以我要擅长规划一个有效率的设计流程，估计好预算，有条有理地和客户进行合作，销售与推广我的工作，招聘人才等等。

我知道我很擅长数字产品设计，但是我可能并不擅长做所有类型的设计。这就是为什么我更喜欢「数字产品设计师」这个头衔的原因了。

我喜欢它的点在于，它更聚焦于产品而不是用户。它把我的工作放在了资本市场的背景之下。产品需要对顾客有用，但是也需要切实地有利可图。

对我来说，无论它是什么，听起来，「产品设计」比「用户体验设计」都更加的落地。产品设计更容易被所有人理解，甚至你妈妈也能懂。它不需要太多解释。用户体验只是它的一部分，但是从另一方面讲，比起想要解决世界上所有问题的万能药UX 来说，产品设计这个说法更加的谦虚。

现在我大部分时间依然是在做交互设计和信息架构这种传统工作。我大部分的精力也都是花在制定策略，进程管理和设想概念的层面。但是我也正在带上许多的帽子：决策者，界面设计师，架构师，文案，创意总监，项目经理，产品需求方，用户研究员，测试人员。总之，哪里有需要哪里就有我。

当然我需要和很多人（他们是各自专业领域的专家）一起合作来实现我的愿景，然后把它迭代变得更好，更完善。技术专家，开发者，图形设计师，内容设计师，项目经理，甚至律师等等。最后的用户体验其实是很多这些人的工作共同作用的结果。

用户体验是很多人工作的结果，是一个产品或者服务生产出来的，并不是一个职位的描述。

我会把产品设计师定位为这样一个角色：他们是那些为产品功能和形式的最终呈现负责，并能够以任何可能的方式对设计流程以及产品的发布进行规划和优化的人。（如果你还把产品设计仅仅看作是 UI/UX 的另一个名字，这对你毫无帮助）对于很多有经验的 UX设计师来说，并没有什么新鲜的，但是产品设计确实和 UX 不同。

我看到如今，越来越多的有经验的 UX设计师称自己是产品设计师了，所以，也许这是一个潮流吧。又或许是某种原因？

Andy Budd，一个有着很棒的见解的家伙，我一向很尊敬他，最近他发了一个推特说：UX就像爵士乐，产品设计就像朋克乐。

好吧，我的看法跟他完全相反。打比方说，如果你想成为一个 UX设计师，你现在要做的只需要去上个周末课程，学习设计过程的5步法以及5个方法论，像用户画像，用户体验地图，愿景图，你就可以开始干活儿了。

但是成为一个产品设计者，你需要把产品交付给市场的实际经验，这非常的难，因为经常是一团混乱，复杂的过程。产品设计就像自由的爵士乐。可能听起来混乱嘈杂，有一点像朋克乐，但是想要把它玩好，你需要很多的技能和经验以及音乐理论的掌握，也需要一些即兴创作的能力：改变规则甚至是反对它们。更不用说，在团队中，你需要成为整个团队工作的主导。

无论你想叫自己什么，无论你有多大的梦想，但，也要记得保持真实和谦卑

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

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

现在让我们关注最常见的设计专业：UI/UX设计师。

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

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

为什么是第一性原理

最早提出这个概念的是亚里士多德。他说：在任何一个系统中，存在第一性原理，是一个最基本的命题或假设，不能被省略，也不能被违反。

后来「硅谷钢铁侠」埃隆·马斯克在一次采访中提到「第一性原理」：

我们运用第一性原理，而不是比较思维去思考问题是非常重要的。我们在生活中总是倾向于比较，对别人已经做过或者正在做的事情我们也都去做，这样发展的结果只能产生细小的迭代发展。第一性原理的思想方式是用物理学的角度看待世界，也就是说一层层拨开事物表象，看到里面的本质，再从本质一层层往上走。

所以，我希望用第一性原理的思维方式，发现交互设计的本质，从而更好地理解和运用它。

什么是交互设计

交互设计，又称互动设计（英文Interaction Design，缩写 IxD 或者 IaD）是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式（the「interaction」即人工制品在特定场景下的反应方式）相关的界面。——百度百科

读完上面关于交互设计的权威解释，相信有读者和我一样，在短时间内很难弄明白：到底什么是交互设计？

下面，我们一起用第一性原理，拆解和分析交互设计的本质。

小学语文老师教会我们一种名次解释的方法——拆词法，那么，交互设计可以拆解成：交互层和设计层。

交互层是什么

交互，即交流与互动。具体点说，在某个场景下，一个对象为了某个事件目标，与其他对象产生信息的交流与互动。在笔者看来，交互的本质是信息的交流与互动，包含用户、目标、场景，它们共同构成交互设计的交互层，这是交互设计的前提。

而用户、目标、场景，也正是辛向阳教授定义的交互设计5要素其中的3个。

案例1：我们为「餐厅点餐」这个事件进行交互设计，那首先要知道这个案例的交互层是什么，也就是信息的交流与互动是怎样的。

这个例子的交互层是：用户（我们）需要在某个场景（餐厅），与其他对象（餐厅/服务员）产生信息的交流与互动，才能达到目标（完成点餐）。

案例2：我们为「地铁上听音乐」这个事件进行交互设计，按照上面的思路，我们知道这个事件的交互层是：用户（我们）需要在某个场景（地铁上），与其他对象（音源）产生信息的交流与互动，才能达到目标（听音乐）。

我小结一下，帮你理解交互设计的交互层。

当我们为某个事件进行交互设计时，首先要知道自己在一个什么样的事件前提下开展交互设计，而这个前提就是我所说的交互层，即用户在某个场景下，与其他对象产生信息的交流与互动，从而达到目标。

所以，在交互设计里的交互层，本质是信息的交流与互动，包含用户、目标、场景，主角是信息交流互动的双方或多方。

设计层是什么

在说交互设计的设计层之前，我们先来看「什么是设计」。

设计是把一种设想，通过合理的规划、周密的计划、通过各种感觉形式传达出来的过程。——百度百科

现在我们将上述解释放到「交互设计」里去理解。交互设计里的设计，就是在交互层的前提下，为一个事件合理的规划/计划（行为），并传达（媒介）出各种感觉（用户体验）。

所以，在交互设计里的设计层，本质是找到解决问题的手段，包括媒介和行为，主角是设计媒介和行为的设计师。

我们继续用前面的两个案例，理解交互设计的设计层。

案例1：为了完成「餐厅点餐」的交互设计，我们依据交互层这个前提，开始找到解决问题的手段，并为之设计媒介和行为。

在一些餐厅，用户还是通过纸质菜单，用口述的方式完成点餐。这里的媒介是纸质菜单和服务员，行为是口述。

在另外一些餐厅，用户用手机扫码点餐、下单、结账、评价等。这里的媒介是餐厅点餐的二维码和用户的手机，行为是用手机扫码、点餐、结账等一系列动作。

案例2：为了完成「地铁上听音乐」的交互设计，在非智能手机的时代，我们基本上是通过一个可存储的音乐播放设备和耳机完成这个目标的，那时候的媒介是播放器和耳机，行为是打开播放器播放音乐、在播放器调整音乐。

随着互联网和智能手机的普及，蓝牙传输技术的升级（aptX/LDAC等），以及用户诉求的升级和多样化，我们可以设计出更多贴近交互层（用户、目标、场景）的媒介和行为。比如音乐APP、蓝牙播放器、蓝牙耳机、线控耳机等。

此外，笔者认为：媒介和行为是相辅相成的关系，二者在交互设计的过程中会互相促进和限制。举个例子，一些带线控的蓝牙耳机自动连上手机后，按一下耳机上的播放键，就能直接启动音乐APP 开始播放了。这个「开始播放」的行为就可以设计在耳机上，而不仅仅是音乐APP里。

小结

用第一性原理，我将交互设计拆解成交互层和设计层，并结合辛向阳教授定义的交互设计5要素，得出结论：交互的本质是信息的交流与互动，由用户、目标、场景构成；设计的本质是找到解决问题的手段，由媒介、行为构成。

交互设计的本质：设计师为用户设计出在某个场景下信息交流与互动的媒介和行为，从而达成目标。

如何做好交互设计

1. 把握交互设计的行业差异化

本文从我个人的角度和经验，给大家分享了我对交互设计这个底层概念的理解，在我研究的过程中，最大的体会是，交互设计不仅仅表现在屏幕上，其实在线下场景下，同样有很多体现，比如现在热门的服务设计，我觉得它是对交互设计的场景化应用和延伸。

由此看来，交互设计会因行业和产品形态的不同，而存在差异化。拿B端产品来说，用户行为是完成某一项规范化的工作，而这项工作，往往具备行业和岗位专业性，设计师需要更好地理解行业和专业，才能贴近交互层（用户、目标、场景），设计出好的媒介和行为。

2. 具备相关思维

项目思维。交互设计师的工作往往贯穿调研、需求、设计、研发、测试等环节，我们需要把每一个设计Case 当成自己的项目一样去对待，而项目经理就是自己，充分发挥主动解决问题的意识和能力。

用户思维、产品思维、逻辑思维等。这3个思维网络上有很多解释，在这里就不赘述了。

3. 充实知识储备

点击下方标题，查看已更新的知识篇文章：

• 《用一篇文章，带你回顾桌面GUI 的设计发展史》
• 《用Airbnb 的产品，帮你快速理解尼尔森10大可用性原则！》
• 《用YouTube 为例，让你轻松读懂交互设计7大定律！》
• 《以Apple Music为例，为你解读格式塔7大法则》
• 《设计师应该知道的 iOS 设备常见差异化设计》

4. 提升专业技能和底层能力

《从今天起培养这5个好习惯，让你在 2019 年快速成长！》

写在最后

本文从构思到写完，断断续续有1个多月了，总希望找到一个合适的方式去解读交互设计，把这个概念说明白，但事实是越研究越觉得复杂，我需要了解的还有很多。

所以，我写这篇文章的目的不仅仅是分享我对交互设计的浅见，还希望用「第一性原理」这个拆解、分析、解决问题的思维方式，去研究「什么是交互设计」这个问题。

交互设计这个概念或领域，远比我写的要复杂和深入，我在研究「交互设计」路上才刚起步，希望能与读者朋友一起交流这个话题。

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

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

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

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

商业化思维的本质就是：创造价值，通过为客户创造价值和交换价值来驱动产品以及业务的运转。那么，如何为用户创造价值和交换价值呢？价值属性会跟着用户属性的不同而产生变化，所以，在探究这个问题之前，要根据将用户划分为不同的群体，再从不同的方面着手。

商业化思维这个字眼乍看上去很高大上，确实往大了说，商业化思维可以套用到各种宏观微观的商业模式当中。但我们的目的是让商业化思维能够成为一个活动运营真正日常可用的能力项，所以我们对这个部分要解读的商业化思维的定义稍微做一些边界设定。

——基于商业化思维的本质：创造价值。

我们将探讨：如何通过创造价值去驱动一个产品/业务？

通过创造价值驱动产品/业务运转是一种完全不同于体验驱动（也就是产品思维）的模式，也是绝大部分互联网从业者少有接触的（电商&广告类的业务接触可能较多一些），能够综合使用价值驱动和体验驱动来帮助你策划一个业务形态，就会极大拓展你的思路（比如：你能够策划出趣头条类似的广告费转移为用户成本的模式）。

同时，也能够朝着我们的核心目的：让一个业务叫座又叫好去演进。

再次回顾一下产品思维和商业化思维模式的概念：

• 体验驱动（产品思维）：如何让用户使用便捷、有趣、解决用户的某种问题和需求？
• 价值驱动（商业化思维）：如何为用户/客户创造价值和交换价值？

用户/客户分类

那么如何为用户创造和交换价值？

价值属性是跟着用户属性在变化的，要探讨如何创造和交换价值，我们需要先对用户/客户做一个分类：

C用户：个人用户。

• 素人用户：就是最普通的个体用户，看新闻的、买东西的、薅羊毛的、刷视频的普通大众们。
• 达人用户：依赖一些内容平台生存的，往往以创造内容换取价值的内容生产者角色。

B用户：机构/商家/团体等任何非个人用户。

• 职业经理人B用户：一般是大企业/机构里的业务负责人/对接人，他们并不在意公司的业绩，主要在意的是领导的认可。
• 生意人B用户：一般是小企业/个人店铺的直接负责人或者就是老板本人，整虚的对他们从来没有用，他们只想要赚钱。

一般互联网的各种业务形态，会面对的用户种类基本上就是以上四种，代表着完全不同的四种价值诉求。

我们对这四种角色分别进行价值创造以及交换的理解和研究，就能够帮助你在业务规划当中，真正有效的运用到商业化思维。

当然这只是商业化思维最基础的入门，感兴趣的可以基于这个原理再深入研究。

C用户——素人用户的价值

在面对素人用户的时候，商业化思维主导的用户价值和产品化思维主导的用户价值有一些交叉和模糊的地带，为了便于理解和明确另外一种思维模式，我们相对粗暴的定义商业化思维的价值更多在于“创造”，区别于产品化思维的“满足”。

怎么理解呢？

用户有购物的需求，打造一个电商购物产品属于“满足”需求。而在购物需求满足之后，我们让用户去进行商品分享，通过用户分享进来的订单我们给予一定的分拥，这就“创造”了额外的赚钱的价值，可以交换用户社交关系链曝光的价值。

当然，实际并没有这么明确的区分，用户购物本身也是一种商业行为，商品的品牌溢价、促销手段（买三减一）等也都可以归类为价值创造的范畴。不过，这个不重要，我们关键要理解的是创造价值的思维模式。

常见的可以额外创造的素人用户价值：赚钱、省钱、炫耀、情感共鸣等不属于用户刚性需求（购物，变美，解决问题）的这类可以额外创造的价值。

而常见的你可以置换的用户价值：额外的成本付出、用户的个人关系链（自主推广）、用户的时间、用户的内容创造等。

商业化思维在素人用户部分，提供一种截然不同的业务策划模式：并不是考虑用户的需求是什么，然后针对性的策划一个产品。而是先思考你想要交换的用户价值是什么，然后，思考你如何创造额外的价值可以有效的置换到用户的价值。

在这个思维模式下，我们并不以体验和操作为优先去考虑业务形态，用户付诸成本是核心考虑因素，成本小于价值这个业务模式就有效，反之则无效。

这个思维模式也解释了：为什么很多体验优秀的产品就是没有用户愿意去使用？

目前业内新兴的一些社交产品拥有比微信更优秀的体验，但是产品在社交上创造的额外价值并没有大过用户的关系链迁移成本（想要去交换的价值）。而一些价值巨大但体验糟糕的产品用户还是愿意一遍又一遍的尝试想要成功走通——一个分佣50%的商品，再复杂的操作用户也愿意去钻研和使用。

当然，通过成本-价值的模式去思考和规划业务模型，并不妨碍我们同步去进行产品体验的完善，以帮助进一步减少用户在操作上付诸的成本。

商业化思维在业务中的一种典型运用场景，基于一个明确的用户价值交换业务目的，我们进行价值交换过程的建立，以找到合适的业务模式。

例如：我们希望用户能够主动进行分享（而这个过程往往基于已经满足了用户基本需求的状态上，比如说一个电商网站用户已经完成了购物，但是我们还想要额外榨干用户的价值），贡献他们的社交关系链价值。

首先，我们需要进行的思考是：用户进行分享需要付诸的成本是什么？

——分享到朋友圈后造成的个人形象影响，思考和检索适合的分享对象的成本，分享动作的操作成本（可以通过体验优化极大降低）。

那么思考，基于业务特性，我们能够提供给用户合适的交换价值是什么？

——可以通过和商家分摊成本的额外现金激励？基于稀缺或者高价产品的炫耀内容？或是商品本身附带的情感属性？明确的定义清楚这个具体的价值是什么。

然后完整的对比，你创造的额外价值是否大于综合成本，当然这个对比不是一个绝对的数学对比过程，还掺杂了很多主观因素。

所以，一定程度的用户调研或者简单一些的自我洞察能够帮助你得出有效的结论。如果做不到价值大于成本，那么这个业务就是不成立的。其实这个思维模式的逻辑是显而易见的，但又往往被忽略。所以，很多分享10元满减优惠券的策划被创造出来，而根本没有人思考过10元满减优惠券的价值其实远远低于我分享到朋友圈的成本。

琢磨一下以上的过程，是不是提供了一种全新的思路。帮助你的不仅是简单的思考“我想让用户做什么，所以理所当然的策划一个产品去引导用户”，而是真正的考虑清楚业务是否成立的根基，然后再从容不迫的去优化体验。

时刻保持“成本-价值交换”的思维模式，不仅能够帮助你打造有效的价值交换业务形态，还有一个非常有用的场景。

基于一个明确的用户诉求，我们进行价值交换过程的分析，以找到业务的关键点。

我们还是用电商业务场景来举例：在电商场景中，用户付诸的最大成本是金钱，而购物操作的成本实际上优先级并不靠前。用户在价值交换过程中最优先的价值是：“买到想要的东西”和“足够的划算”。

所以，在电商业务的重点一定是：提供更丰富的商品库和更优惠的价格，能够极大提升价值的含金量。

而优化购物操作体验，页面动线逻辑等是其次的，可以一定程度减少用户成本但解决不了价值不足的问题。

这也解释了：为什么一个创造了诸多优秀产品（常规产品主要面对的用户成本确实是操作成本，而价值是比较单一明确的，例如邮箱）的大厂投入了诸多心血打磨产品体验但最终还是在电商战场战败了？

一个擅长做价值交换的电商大厂在一个社交产品（用户的主要价值是社交，成本是难以独立完成的关系链迁移）上投入了大量的推广资源和利益诱导确留不下用户。

你看，大家都在说的基因的本质问题，其实本质并不复杂。当然大厂的成败并不只取决于思路的差异，还有历史以来积累的资源类型和用户心智，这些也都是基因的构成部分。

我们也不需要操心这么多，学会运用这个新的思路足以在业务策划中帮助自己抓住真正的重点。

C用户——达人用户的价值

首先明确我们这里所讨论的达人用户，并不是普通用户当中乐于分享和创造低质量内容的那群人（当然也有高质量的但并不普遍），而是以内容生产为职业，创造真正专业有价值内容，能够构成你的平台核心竞争力的那群人。

区别于普通用户，我们希望置换的达人用户价值是比较高的，平台依赖这些达人用户去不断供给符合平台导向的优质内容，而内容生产的成本极大，也就需要更大的价值来进行置换。
达人用户常见价值诉求：变现、曝光、独特的内容生产能力、有效的粉丝互动和管理能力。

达人用户需要付诸的成本：内容生产成本。

基于创造价值大于成本的逻辑，要打造优秀的面相达人用户的业务，就可以从几个方面着手（增加提供的价值）：

提供足够价值的变现能力：

专业的达人往往以此生存，和普通用户一样的分佣价值只能作为额外的补充价值，并不能达到达人的标准。

所以，如果你的业务希望依靠变现价值来让达人自发留下，那么你需要考虑的核心问题和需要寻找打造的案例就是：有没有达人可以在你的平台赚钱养活自己。

当然如果没有内容独家协议的限制，达人可以依靠多平台存活，对你的要求就不会那么高，但变现的价值也一定是生存级别的（几千元）而不是福利级别的（几百元甚至以下）。达不到这个标准，你的业务逻辑确实就不成立。

提供足够多的曝光量级：

当然这个和你的用户规模以及流量分配机制有关，需要考虑的问题是：你给的曝光是不是有效的曝光？你的达人用户能否有效的把曝光转化为强关系的粉丝，或者是个人品牌认知用户？

这个目的达不到只是粗暴的给曝光并没有用（例如：很多内容平台会找我要稿子，一些平台只会放作者名字而不愿意曝光作者个人公众号，我就非常抗拒为他们提供稿件）。

很多冷启动的业务面对的是达人内容量级和用户量级循环驱动增长的问题，在这个逻辑下一定程度的达人内容补贴是常用的手段。但不能偏离的是，你的激励要做用户这个循环，要求仍然是激活的内容一定要对用户有价值而不只是凑数，达人的补贴规模也要达到生存级别。

提供独有的内容生产能力（生产素材）：

或者说独特的有效的粉丝互动管理能力等产品层面的价值也是一种办法。但说实话国内互联网KOL行业发展多年已成定局，大的MCN机构已经垄断了大的流量和真正专业的内容生产者，平台迁移成本极低；大流量主产品能力的抄袭门槛又不算高。

所以，除非你能纯粹的全面培养素人成为达人，否则这类型的手段可能只作为补充，要真的撬动达人价值还是要回归到以上两个点。

降低创作的成本：

当你的产品不足以让一个达人在这里养活自己，那么你可能就很难得到独家的内容。

要让达人愿意在你这里搬迁内容或者一定程度的定制创作，可走的路就只有尽量减少内容生产的成本——快速搬迁，极低门槛的排版能力，和行业通用规则一致的产品形态等等。

接下来，我们看一下另外一个截然不同的面对B客户的领域。

B客户相比于C客户，目的更加明确，愿意投入更大的成本交换更大的价值。在B的领域，商业化思维的主导就更加明确，价值的创造和交换成为了唯一的话题，产品体验起到的作用微乎其微，除非你提供的价值本身就是产品的体验（比如说：一些企业服务工具）。

B客户——生意人价值

要理解生意人B的价值诉求，先从一个个人经历的故事开始：

曾经牵头过一个面向B商家服务的工具平台，商家支付费用使用工具和流量等整合的服务。

在工具平台搭建的早起，我们以非常产品导向的思维进行了规划，重点考虑的是工具的各种功能、平台使用体验、对平台的流量等价值贡献等问题，设定了工具平台的点击率、跳转率、转化率等关键考核指标，在这些导向下不断的去优化工具平台。

然后，我们召开了第一次的商家推广大会，准备了精美的PPT，详尽的介绍了工具平台各种先进的能力，复杂的逻辑和优秀的体验，其华丽程度首先把我们自己都感动了。

但是，现场反应平平，几乎所有商家全程都在玩手机，似乎对我们精彩的演讲丝毫不感兴趣。

会后我们找到几个资深的商家咨询了原因，其中一句关键的点播对我们产生了至关重要的影响：

“我们只想知道在你这里能不能赚钱，投入多少回报多少，流量成本吧如何，比其他平台有没有优势。其他的真的不太在意。”

这一句话真正引起了我们关于“什么是商业化？”“怎么样才叫做生意？”的思考。

面对着实打实要和你做生意的商家，一切形式化的虚无的东西都没有任何意义，只有唯一关键的话题：赚钱（当然不同的业务模式又有其他的一些核心价值例如获客等但逻辑都是可以套用的）。

回去以后我们快速调整了整个业务的导向，弱化了所有关于体验的考核指标——点击率，转化率（还要保留的原因是：这个产品还涉及到C端的用户体验），而把一切涉及到投入产出，能不能挣钱的指标——流量成本，拉新成本，费用的投入产出比，作为主要的考核导向来指导所有的工作方向。

至此为起点，这个产品开始真正的在市场上迎来了爆发，每一次宣讲会后（新的宣讲会我们只强调投入产出效果）开放的名额都被一抢而空。

以上的故事即是我对与生意人B合作的商业化思维理解：剥离掉生意场各种复杂的规则和概念，要撬动生意人B的投入，实际上也是在和他们做生意。能不能帮他们赚钱是唯一应该考虑的问题。任何经过包装的，浮夸的，虚无的内容在真实的投入产出效果下都没有任何意义。

B客户——职业经理人价值

当你合作的对象从一个想要赚钱的生意人变成了一个大公司内部的职业经理人，你将面对的价值又从单纯的赚钱变成了更复杂的职业经理人价值。

一个职业经理人心里在意的价值第一优先级，并不是帮助公司更多的盈利和获取价值（虽然这个理念并不道德但这是现状你不得不面对），而是他在和领导汇报这次合作价值的时候是否能得到认可。

所以，面对职业经理人这样的B端客户，并不能仅仅考虑实现业务目标，你还需要从他的角度考虑：能否过让这次的合作有更多的标杆价值、项目意义能够挖掘和包装出来，以帮助他形成一个漂亮的汇报文件。

所以，和B端客户做生意，需要更多讲故事的能力。除了业务目标的承诺外，你还能够在方面销售合作谈判的时候，能够完整的描述出：未来他在做汇报时候能够拿到的完美的报告是什么样子的？

以此去考虑：你在一开始要销售方案应该如何设计？业务应该增加哪些模块？合作应该提供哪些支持？就能够更好的帮助你搞定一个职业经理人的客户。

以上便是基于活动运营应该掌握的最基本的一些商业化思维业务运用介绍，除了常规的运用外，更重要的还是要强调互联网非技术工种人员应该都要具备“创造体验”和“创造价值”两种思维模式，能够真的帮助你创造出叫好又叫座的策划。

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

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

二 发表能力建构

————————

同质化竞争突围

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

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

三 设计切入角度

————————

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

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

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

四 设计亮点引入

————————

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

为了让用户更主动的发表相册视频，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界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。