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

蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。

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

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

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

我们平时在工作中完成的作品，里面基本都会包含文字、图片或图形、色彩这几种基本元素，不管你做的是海报、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) 浏览(2725)

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

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