一个简易的小教程，一起Get起来~

文章来源：UI中国     作者：Tzw_n

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

   导读

 

你的设计是否能被理解？为什么设计的价值总是不被人认可？

 

设计不仅仅只是带来美感，好的设计能够为产品、公司甚至整个社会创造巨大的价值。而在创造好的设计这个过程中，最重要、也是最容易被人忽视的，便是设计思维。

 

何为全局性设计思维？它能够为设计师带来哪些价值？本文将从设计的本质出发，结合设计的发展趋势，带你了解全局性设计思维的真正力量。

 

 

  目录

 

写在前面

一个习惯性的序

一、我们为什么需要设计思维？

二、下一个时代在哪里？

三、互联网“下半场”，从大势中看变化

四、设计思维的转变，差异与融合

五、探寻全新的思维方式

六、全局性设计思维概述

七、如何运用全局性设计思维？

八、以全局性设计思维，构建设计体系

九、文章预告

末

 

 

  写在前面

 

这篇文章的主要内容，来自我在19年底的一个沙龙分享。整个分享以设计思维的角度入手，讲述了全局性设计思维的来源和重要性，以及我是如何在不同产品线上去运用这种设计思维的。

 

何为全局性设计思维？为什么要讲这种思维方式？

 

这是我一直在探索并实践的一种设计思维。从最开始的理论雏形，到各种项目的实践，不断进行修正和完善，最终形成了一套卓有成效的思维方式。通过这种思维方式，我逐步帮助产品解决了许多长期性的问题，并最终构建了各种不同类型的设计体系。最终，随着品牌矩阵与产品体系的落地，形成了一个完整的网易智慧企业设计体系。

 

网易智慧企业设计体系

 

因为篇幅原因，本篇文章将重点从理论层面阐释全局性设计思维的导论、价值及使用方式。而具体的实战案例，我之后将会以另外几篇单独文章的形式进行展现，并详细讲解在设计过程中的一些细节与过程。希望能够帮助大家更深入地去理解如何根据不同的场景正确地去使用这种思维方式。

 

未来可能会包含以下几篇文章：

 

全局性设计思维 | 如何打造强大的品牌体系

FishDesign组件库 | 从零到一构建企业级UI组件库

全局性设计思维 | 如何构建事业部级大型设计体系

 

 

当然，目前的设计体系仅仅只是一个开始，未来还有很长的路要走。

 

希望本文能够给为你带来小小的启发，让设计思维帮助你更好地发挥设计的价值。如果你对某一方面特别感兴趣，可以直接跳到这一章进行阅读，无需浪费过多时间。如果你有任何疑问，也欢迎随时与我交流。

 

 

 

✨

一个习惯性的序

-

 

“喵呜～”   我又出现了，那个爱写序的装逼作者。

 

这次把序放在了第二段，这样子看上去就不那么不务正业了哈哈。当然，写序更多的是为了记录生活，希望每一篇文章不仅仅只是传递知识，更是一篇有温度的文章。

 

经历了风风雨雨的2019，又度过了魔幻版的春节，我终于又开始正式地写文章了。但这次不同，我拥有了两只可爱的小伙伴——汽水和芬达。汽水8月18出生，芬达8月20出生，现在都已经是肥肥壮壮的两大只了。。

 

 

汽水总是在我码字的时候，睡在我的键盘上，或者以各种姿势吸引我的注意力。。  为啥拖了这么久才写写完文章，除了懒以外，汽水大概也要背点锅，哈哈。

 

整个2019年中，经历了很多事情，人生观也随之发生了些许变化。

 

从并肩作战的同事的不断离去，到逐渐需要考虑团队的发展。从单打独斗闯天下，到思考如何让整个团队更加优秀、如何建立完善的设计体系等等。

 

角色、心态、责任，以及如何坦然地面对自己。

 

活在当下，用心生活。这是我一直当作座右铭的语录，也是我希望给自己的承诺。总是试图去尝试这种状态，但却异常艰难。像我这样的人，看上去总是“积极向上”，总是“规划未来”，总是希望事事完美，强迫着每个细节的完善。但不知不觉中，人生好像开始进入了“自动驾驶”的模式，活在了过去的思索中，活在了未来的规划中，唯独对于当下异常麻木。

 

这并不是我想要的生活，我开始尝试做出改变。

 

偶然间，通过一些书籍，我开始尝试正念禅修。感受每个呼吸中空气的流动、感受身体的每个部分、感受当下空间发生的每一件事情。虽然只是很浅显的境界，但正念依然对我产生了巨大的影响。我开始重新地审视自己的人生，审视自己的生活状态。

 

网易蜗牛图书馆：与快乐的小伙伴们

 

这种感觉，就像再次地呼吸了新鲜空气一样。

 

我们其实只存在于当下的时空中，过去和未来，并非真实存在的事物。回想一下，我们有多久没有像小时候一样，完完全全、毫无杂念地享受在当下的时光中了？

 

用心活在当下，平静地接纳一切发生的事物，这种感觉真是太美好了～

 

 

 

✨

一、我们为什么需要设计思维？

-

 

对于设计师来说，什么能力更为重要？是设计这门“技术”本身，还是思考如何去设计的“思维”能力？

 

对于不同的设计师来说，一定会有不同的答案。

 

这两种能力本身并不矛盾，他们相互影响，互相促进——就像“术”与“道”之间的关系。设计能力决定了设计作品的输出质量，而设计思维则决定了你思考问题、解决问题的能力。

 

 

然而，在现实的大环境下，“术”的重视程度远高于“道”，造成了很多设计师与日常业务的“分离感”。以至于，多数的设计师，无法将自己的设计能力有效地用于日常业务中；抱怨他人不理解设计，也因此错失了许多机会。

 

重视设计美感，其实并没有问题。视觉是最直接的表现方式，我们从最初开始喜欢这个行业，并最终成为设计师，大概都是因为如此。包括我个人，也是美感的追求者，常常为了几像素的细节，调整无数稿。也常常沉浸于自己的作品无法自拔emmm…

 

但是，美感之后，设计还需要什么？

 

路易斯·沙利文曾讲过：“形式追随功能”。而功能存在的意义，则在于解决问题。视觉的形式、美感，很多时候只是包裹在外侧的表层，而解决问题才是设计真正的核心。视觉的表现，一定要遵循解决问题的方式，向用户传递恰当的信息，最终引导用户以此来解决问题。

 

 

因此，我更希望更多的设计师，在追求美感的同时，能够重拾设计思维本身，寻找设计最根本的价值。

 

我们其实可以站得更远一些。学会去理解事物，学会用设计去解决问题。再以此为基础，通过你的设计能力去塑造它、点亮它，让它成为一个真正美好而又有价值的设计。

 

而设计的价值，将会成为你的价值。

 

 

 

✨

二、下一个时代在哪里？

-

 

互联网时代中的数字产品设计，需要什么样的设计思维？或者说，当下我们需要什么样的设计思维？

 

这个问题的答案，好像一直在变。

 

互联网本身便是一个新的形态，1989年“万维网”发明，1996年中国引入互联网，到今年已经有大约24个年头。我们经历了不同的互联网时期，而“设计”的概念也一直在变化中。

 

 

Internet 1.0 PC互联网时代。在这个时代，我们将大量的信息虚拟化，并通过网络进行信息传递。而我们的“设计师”们大多被称为“美工”，我们的“设计思维”，便是将信息变得更好看。

 

Internet 2.0 移动互联网时代，或者称为消费互联网时代。自从2007年乔布斯发布第一代iPhone之后，叠加4G、wifi等技术，手机成为日益重要的终端，世界逐渐进入了移动互联网时代。伴随着iPhone与其应用的出现，乔布斯让所有人理解了“用户体验”的重要性。我们不再是“美工”，我们变成了“UI设计师”、“交互设计师”。而这个时代，我们的设计思维变成了“用户体验思维”。

 

那么，下一个时代在哪里？我们的设计思维又将如何转变，才能适应下一个时代？

 

 

 

✨

三、互联网下半场，从大势中看变化

-

 

1.红利消失、增长触顶，互联网下半场到来

 

最近几年，我们已经能够明显地感知到——互联网的“寒冬”真的来了。随之而来的，便是互联网的发展方向似乎也正在发生变化。于是大约从2017年开始，互联网圈内逐渐出现一个新的名词——互联网“下半场”。人们普遍认为，中国的互联网将会由消费互联网时代进入下一个时代，即互联网下半场。

 

我并不完全认同互联网”下半场“的称呼。互联网本身是一个年轻的行业，中国互联网“下半场”，其实更像是互联网发展方向转变的标志。

 

因此，我们认为的下一个时代的方向，也许将会是Internet 3.0——即产业互联网时代。

 

 

互联网会什么必须要进入下一个时代？

 

对于互联网企业来说，一方面在成本端，随着人口红利消褪，劳动力价格上升，企业的成本将逐渐升高，倒逼管理者使用系统和工具来提率；另一方面，在收入端，野蛮增长的时代结束，增量经济转向存量经济，红利经济转向效率经济。

 

 

在“成本”与“效率”的双重压力下，再加上整个市场经济的下行周期，整体经济出现下滑，而一些依靠融资的互联网公司将难以为继。因此企业不得不寻找方式来提升效率，降低成本——而这正是企业级软件（ToB产品）最擅长的地方。

 

 

因此，在互联网寒冬之下，ToB市场便理所应当地开始被重视。

 

让我们纵观整个中国市场的发展，互联网的兴趣虽然促进了消费领域的蓬勃发展，但产业领域的发展则因此受到了巨大制约。中国率先从消费端、从第三产业开始数字化，然而在第一、二产业的数字化进程似乎并不是很快。一个重要的原因是，人口红利促使了消费互联网的快速发展，而这种红利让人们忽视了产业互联网的重要性。

 

在寒冬之下，我们终于发现，消费互联网蓬勃的基石，正是底层坚实的产业互联网。产业互联网如果不能得到有效的发展，则整个市场经济将无法更进一步的发展。

 

因此，产业互联网时代的到来，是中国互联网发展的需要，也将是大势所趋。

 

 

2.ToB市场将迎来机遇

 

产业互联网的发展，需要依托B端领域的发展，并逐步融入并带动整个产业进入互联网时代。那么，B端产品在中国目前处于一个什么阶段呢？

 

对于整个中国的ToB行业发展现状，大多数的人并没有一个清晰的概念。盘点中美上市的科技公司会发现，美国toC领域与toB领域市值之比是6:4，但在中国这个数字是20:1。

 

虽然互联网的整体环境不同，但中国ToB行业的发展，显然是落后太多了。于是乎，2018年开始，BAT大举布局，PE、VC加速进场——中国B端产品已经逐渐进入必须发展的时候了。

 

中国市场已经坐拥全球最发达的发达的消费互联网体系，而产业互联网的发展则却严重滞后。

 

 

同时，对比B端中云计算领域的IaaS、PaaS、SaaS三层架构，全球市场中SaaS占据了52.5%的份额，在中国却是IaaS分走了最大的蛋糕，占比达61.2%。中国市场VC的投资总额已经与美国相当，在SaaS领域美国企业获得了全球70.1%的融资，而中国只有11.7%。

 

 

因此，在互联网下半场，相对于ToC行业的触顶，ToB行业将会迎来历史级的发展机遇，随之而来的将会是产业互联网时代的逐渐到来。而在整个B端产品的类目中，SaaS产品作为企业级软件中最集成的产品，也将随着这股浪潮迎来爆发式的增长。

 

什么是SaaS产品？很多同学并没有接触过B端行业，平时用到的也都是C端产品，所以对B端产品的了解比较少。在B端行业最热门的云计算领域中，目前普遍会分为三层架构。SaaS（Software as a Service–软件即服务）；PaaS（Platform as a Service–平台即服务） ；IaaS（Infrastructure as a Service–基础架构即服务）。

 

附：云计算领域，三种不同的架构与对应的服务。

 

 

PaaS基于IaaS实现，SaaS的服务层次又在PaaS之上，三者分别面对不同的需求。越往上层，产品的集成度越高，提供的服务也就越丰富，而用户所需要的自行解决的东西就越少。而最顶层的SaaS产品，便是用户可以直接购买并使用的云端产品。

 

我们为什么要了解这些趋势？

 

因为一个新的时代，对应一场变革，也将成为一次新的机会。不管是SaaS产品还是其他B端产品，都将在新的时代中逐渐得到重视。而C端产品的发展策略，也将迎来新的变化。对于许多设计师来说，这将会是一个新的机遇。

 

顺势而为，方能乘势而上。

 

 

 

✨

四、设计思维的转变，差异与融合

-

 

那么，在逐渐到来的产业互联网时代，设计师需要注意哪些东西？设计思维又将进行如何转变？

 

产业互联网时代，意味着B端产品将得到重视，并与C端产品逐渐趋于平衡。因此，了解设计思维的变化，我们首先要从B端与C端产品之间，在产品设计与产品策略之间的差异性说起。

 

 

1.服务对象的差异性

 

从服务对象来看，C端产品的服务对象是人，产品的目标是针对人们生活方式进行的变革、升级。而B端产品的服务对象则大多是企业，目标是帮助企业进行商业效率的提升，从而产生价值。

 

 

 

服务对象的差异性，决定了产品在发展策略也将存在着较大的差异性。

 

 

2.产品“打法”上的差异性

 

从宏观的打法上看，消费互联网时代会更求“快”，而产品互联网时代则会更偏“稳”。

 

C端产品的服务对象是人，而人的需求在个体差异性上相对变化较小，这就决定了C端产品通常都拥有广阔的用户市场。

 

因此，消费互联网时代就像是资本在辽阔平原的角逐，长驱直入。讲究快速占领市场，不断地试错、不断地调整。从团购到直播，从打车到短视频领域的兴起，再到最后的单车大战落幕。消费互联网时代的每一次风口，都伴随着各种“游击战”式的竞争。入场速度、快速调整能力、资本深度，都直接影响了最后的结果，而最终的结果也往往是胜者为王，败者将快速地被市场淘汰。

 

B端产品的服务对象是企业，而企业间的需求差异性则非常巨大，这就决定了B端产品通常需要较强的纵深能力。相对应的，其用户群里在总量上就比较小、但也相对稳固。

 

因此，产业互联网就像在崎岖丛林的蹒跚前行，渐次演进，如同一场旷日持久的拉锯战。一方面，产业互联网的链条非常长，需要长期的深耕、积累才能逐渐站稳脚跟。而这也导致了产品的壁垒足够深厚，同类产品在短期内无法快速跟进。另一方面，企业间的差距需求的差异性非常大，因此产业互联网存在非常多的细分市场，不同的产品各自在不同的赛道中深耕。而其最终的结果往往是百花齐放，各自盛开。

 

 

 

3.整体行业的协同发展

 

虽然整个市场都不断地强调——ToC增长触顶，ToB是一篇蓝海。但这并非是“取而代之”，而是逐渐走向整体的“协调发展”。中国ToB的发展的一个重要根基，其实是“中国拥有世界上最成熟的消费互联网体系”这一巨大的优势。

 

因此，ToC在很长的时间内，仍然会是互联网的主力，而ToC市场的转型，也将有赖于ToB产品所提供的服务。

 

而随着中国将“互联网+”政策上升为国家战略，更是明确了以互联网带动传统产业的发展方向。因此，互联网的下半场，即产业互联网时代的最终形态，将是互联网与传统行业的“融合式发展“。

 

 

ToB产品将会成为带动互联网下一轮发展的核心驱动力。一方面帮助ToC领域完成转型，进入更健康、更稳健的发展阶段；另一方向，ToB领域赋能传统产业与互联网相融合，并最终完成产业升级。

 

 

4.产品形态的融合与趋同

 

整体产业的融合趋同，意味产品的特性也将互相融合。一个很重要的现象是：C端产品逐渐变得不那么C端了，而B端产品也越来越变得得不像B端了。

 

 

比如C端产品的主流赛道中，随着头部产品的赛道日渐趋于稳定，其产品体量也因为业务扩展而不断增加。同时，因为产品体系的逐渐形成，为了服务更多的C端用户，会有越来越多的B类用户进入平台，而为了满足B类商家的需要，产品的B端属性变得越来越强了。

 

而随着B端产品的不断受到重视，原先不被重视的产品UI、用户体验也逐渐在B端产品中得到加强。B端用户虽然服务于B端，但使用者终究是人。而随着竞争的不断加剧，原来的“重功能、轻体验”思路逐渐式微。我们逐渐发现，许多B端产品长的越来越像C端产品了，甚至在UI和体验层面做的与C端产品不相上下。

 

因此，随着产品属性的融合趋同，意味设计思维势必会与消费者互联网时代存在差异。而我们的设计思维将不仅仅局限在诞生于消费互联网时代的“用户体验思维”。我们需要更新的、更广阔的设计思维，以满足下一个时代的产品发展需要。

 

那么，新的思维是什么？它将从何而来？

 

✨

五、探寻全新的思维方式

-

 

从整个市场的协同发展，到产品形态的融合趋同。那么，我们的设计思维需要如何进行相应的变化？是同样进行“融合趋同”，还是另辟蹊径，寻求新的视角？

 

 

1.关键词提取

 

首先，不管设计思维如何变化，它一定需要同时满足两种产品设计思维的特性。通过前文的分析，我们可以在产品设计特性的维度，提取各自的关键词进行分析：

 

 

产品体验：诞生于消费互联网时代的用户体验思维，在产业互联网时代依然是产品设计中最重要的部分。无论是C端还是B端产品，用户体验必然是产品的核心竞争力，只有足够好用、好看，产品才能获得更多用户，最终获得商业上的成功。

 

灵活性：在消费互联网时代，在激烈的竞争中，C端产品的灵活性的打法对于产品的突围至关重要。而未来的B端产品竞争将会加剧，这就需要B端产品也逐渐需要较强的灵活性。

 

成长性：产品的发展必将伴随着不断的变化，特别是具有一定体量之后，产品设计的成长性将至关重要。因此，产品的设计是否能够预见未来发展，满足不断变化的产品形态，伴随着产品不断地成长，也将成为产品是否能够持续获得成功的关键因素。

 

产品效率：因为产品服务对象的关系，B端产品一直是产品效率的代名词。而在人口红利消失与经济下行的压力下，产品效率将成为所有企业关注的重要因素之一。产品的效率不仅影响着企业的成本，也是产品竞争力的重要体现。

 

这四个关键词，将会是我们在未来所需要关注的四个重点关键词。越是往左，则“C”属性越强，因为它更多地从用户的角度出发，更关注用户体验。而越是往右，则“B”属性越强，因为它更多地从企业的角度出发，更关注企业的长期发展。

 

 

2.跳出单一层面，寻求新视角

 

在四个关键词中，我们会发现，特性越是靠右，其所需要的整体性就越强。要满足灵活性，就需要用户体验与产品策略相关联。要满足成长性，则要进一步结合底层的开发能力。而产品效率的提升，则需要产品的设计与不同层面都有着紧密的耦合。

 

在互联网设计发展的过程中，我们从单点只关注视觉表层的“美工时代”，逐渐发展为关注线性的“用户体验思维”。在对于产品用户体验层面，确实有着长足的发展。

 

但是，单一层面的用户体验思维，在逐渐成熟的互联网时代中，逐渐显示出了一定的局限性。我们的价值局限于单一的体验层面，我们似乎无法对产品形成更大的影响力，也难以为产品带来体验之外的更多价值。

 

 

因此，设计思维想要满足新时代的需求，就需要同时满足前文提到的四个关键词。这就要求我们需要跳出单一层面，以全局的维度去思考产品的设计。

 

因此，全局性将成为未来的关键，我暂且将这种思维方式称为——全局性设计思维。

 

 

 

✨

六、全局性设计思维概述

-

 

全局性设计思维，即在设计过程中，始终能以更高的维度去审视全局，思考当下的设计。

 

何以全局，如何跳出单一层面？这种思维方式的前提，是你要首先了解整个产品（亦或是物体、组织等）的运行方式，清楚的知道整个产品需要达到的目标，从而准确、合理地对针对目前的局部做出设计，并最终构成整个完整的形态。

 

 

而“全局”的前提，是你拥有更高的眼界。你的眼界越高，你对产品、市场、甚至整个社会的洞察就越全面，你就能够解决越大的问题，你能够实现的价值就越高。眼界是基础，解决更大的问题是目标，而全局性设计思维则是实现这个目标的方式与过程。

 

 

全局性设计思维，可以帮助我们跳出产品的单一层面，去思考从产品层、到体验层、再到开发层这一完成的整体。让设计满足体验层的同时，满足产品层面的目标，同时让产品的设计与开发高度耦合，将整个产品串联成一个完成的整体。

 

 

好了，讲了这么多，我们具体应该如何去运用全局性设计思维呢？

 

 

 

✨

七、全局性设计思维的运用方式

-

 

全局性设计思维，的应用方式非常广泛。它并不是一个固定的方程式，而是一个更高层面的指导性设计思维，能够通过不同的形式，来帮助你解决问题。

 

 

1.全局观——在生活思考更多可能

 

在尝试这种思维之初，我们可以通过一些小的实践，去锻炼这种思维能力。

 

在日常的生活、工作中，其实我们有大量的事物可以练习和运用这种思维方式。比如你在装修一个大房子，需要去选择房子里的家具。当你在购买家具时，常规的思维方式是：这个家具在某个房间时应该是怎样搭配的，所以我要购买什么样形状、颜色的家具，来满足这个房间的需要。

 

但是，用这么思维方式来购买家具，将为对家具的灵活性与长期价值造成一定影响。从居住环境的长远来看，也许这个家具有可能会因为某些原因，需要放到另一个房间，而它的形状、尺寸、配色却无法满足其他房间的需要。最终，我们只能重新购买，或者接受一个风格、尺寸上并不搭调的房间出现。

 

 

因此，当我们在购买家具时，我们是否可以利用全局性设计思维，从整体空间的角度出发（而非单个房间），去思考如何让家具满足更多空间需求。长此以往，我们不仅可以打造一个风格统一的大空间，同时也能增加每个家具的利用率，在无形中也增加了这个家具本身的价值。

 

之所以举家具这个例子，是因为这个原理与产品设计的原理非常类似。你可以将这个房子看成是整个产品，而家具则是不同的组件。通过不同的家具（组件），构成了我们的不同功能模块（房间/功能区），而所有的功能模块则构成了整个产品（房子）。

 

房子（产品体量）越大，房间/功能区（功能模块）就越多，家具（组件）的多样性、复杂性就越高，我们就越是需要从全局的角度去思考装修的统一性（风格体系化）和家具的通用性（样式组件化）。只有这样，我们才能更好地去打造一个风格统一、体验一致，同时又具备足够自由调整空间的“大房子”。

 

 

2.全链路——从全流程中重新思考设计

 

当你仔细地去理解许多非常著名的设计作品时。你会发现，几乎所有优秀的、巧妙的设计，往往在设计中都体现了全局性的设计思维。它不仅仅解决着当前的问题，同时也能够解决更大的问题，发挥巨大的价值。

 

比如著名的坂茂卫生纸的设计，看似普通，只是将卫生纸的轴心从圆形改成了方形，但它却成为了举世闻名的、公认的好的设计。为什么呢？

 

 

我们先了解一下这个设计为什么好。

 

首先，传统的圆形纸卷拉出来的纸会比你实际需要的更多。而方形纸卷则由于阻力的作用，让你用得更少，从而起到了解决资源的作用。其次，在运输过程中，圆形的纸卷之间会产生很大的空隙，而方形纸卷则能够紧紧靠在一起，提升空间利用率，从而起到降低运输成本的作用。

 

这简单的设计，居然发挥了如此大的作用。

 

那么，为什么我们在设计时就没有考虑到这些问题呢？因为我们从最开始，就没有从“纸”的整个全流程来去思考问题。

 

让我们“站的更远一些”，纸这个商品，并非只是我们见到的在商店售卖的那一刻。它从工厂中制造完成，通过运输送到每个超市中，当我们购买以后，它又会在很长一段时间内，出现在卫生间，陪伴你使用的每一刻。我们可以将整个流程分为3个场景，而每个不同的场景，又将会对纸本身有着不同的影响。

 

 

• 运输场景——卫生纸的运输成本——卫生纸的价格

• 售卖场景——卫生纸的造型、包装——影响用户购买

• 使用场景——卫生纸的使用过程——影响用户的使用体验

 

当我们能够考虑到卫生纸的运输过程时，我们就可以通过设计去降低运输成本；而当我们可以考虑到用户的使用场景时，我们就可以通过设计，去提升阻力，降低使用量，间接地去提升用户的使用体验。而当我们通过全局性设计思维，可以同时解决这三个问题时，我们的设计就是好的设计，就拥有了更高的价值。

 

发现了吗，为什么你没有想到相同的设计方案？设计能力并不是关键，设计思维才是指引你做出好的设计的前提。当你能按上述的方式，去思考整个流程、不同的场景，我相信大多数的人都能够设计出坂茂的设计方案，甚至比这个方案更好的解决方式。

 

 

 

✨

八、以全局性设计思维，构建设计体系

-

 

通过前面的两个案例，相信大家已经了解了全局观、全链路两种应用方式。

 

那么，我们最最最关心的问题——如何在业务中去使用这种思维呢？

 

在产品设计中，全局性设计思维也有着非常多样化的使用方式和场景，在之后的文章中我也会讲到很多应用方式。但是，在所有的方式中，我认为最为有效的，便是以全局性设计思维，帮助产品去构建一个完整的设计体系。

 

 

1.设计体系概述

 

什么是设计体系？谈及设计体系，大多数设计师会认为，设计体系就是设计规范。“不就是找个名次包装一下规范嘛？”

 

我们为什么需要设计体系？它与设计规范有何不同呢？

 

设计规范是设计师最为熟悉的一种规范文档。在产品设计时，优秀的设计师通常都会建立设计规范。然而在实际的项目中，设计规范往往无法难以有效实施。比如在开发眼中，规范并不符合开发规则，过于碎片化。而产品经理通常又不会去了解设计规范，因此在构建产品框架时也常常随意发挥。

 

很多项目做到最后，设计规范仅存在于纸面的意义，并随着项目的发展逐渐混乱。为什么会这样？ 

 

因为不同职能间的思考方式存在差别，设计规范对于其他职能来说经常难以理解与运用，无法与其他职能形成有效联动。

 

设计规范仅仅是基于视觉层面的规范，它是一个“平面”。而设计体系则是贯穿于产品的每个层面的、与产品深度结合的完整体系，它是“立体”的“有机生命体”。

 

 

设计体系的核心在于“体”，它是贯穿于整个产品的完整体系。设计体系由设计师创造，并深度融合于产品每个部分。它能够让产品更紧密、更统一、更有序，伴随着产品的生长，与产品共同进化，并最终推动产品的发展。

 

创造并推动这一体系，则要求设计师需要更全面的能力。只有充分地去理解并参与产品的每个部分的设计，才能让设计真正延伸至产品的每个部分。

 

而创造这一切的前提，便是全局性设计思维。

 

 

2.设计体系的构建法则

 

罗马不是一天建成的，设计体系也是如此。设计体系的建立是一个漫长的过程（与产品体量相关），需要在前期投入更多的精力。但若是你的方法得当，就会在项目中越来越轻松，并以此形成良性循环，而你也会越来越有成就感。

 

如何正确地去构建设计体系呢？我在这里总结了几个要点：

 

 

1）树立观念

 

首先，树立长期的体系化意识是必要前提。在任何项目中都要时刻保持体系化思维，着眼于整个项目，去寻找体系化的推动时机。当你在潜意识中拥有这种思维之后，你会自然而然的将其植入到设计中。

 

 

 

2）以解决问题为导向

 

体系化并非凭空建立，而是建立在解决问题的基础之上。设计体系的本质，就是由无数个标准化的解决方案，最终构成的一个完整的体系。因此，我们要以解决问题为导向，以全局性思维去思考问题的本质，最终建立适用于全局设计体系。

 

 

 

3）以小为始，重视质量

 

脚踏实地，从小处入手，去发现产品中最基础的一些问题。表面上看这些问题，对项目影响不大，但他们数量庞大，加在一起便会严重影响整个产品的效率。因此，我们要首先建立高品质的基础体系，再以此为基础构建更大的体系。

 

不要一开始就设法建立一个巨大的体系，那样只会是一盘散沙，因为它的结构是无序、混乱、不健康的。而这也是大多设计规范缺乏有效性和可实施性的根源。

 

梅拉妮·米歇尔的《复杂》一书中讲到，任何复杂系统，都是由无数个体通过简单的算法所构成的。在算法领域也是同样的原理，一个优秀而强大的代码，必然是由无数个小型模块，通过简单的算法耦合形成巨大的代码矩阵。基础算法越强大、代码结构越“健康”，可扩展性和灵活性就越强，其能力就越强大。

 

 

 

4）从规范入手，由面到体

 

从本质上来说，设计体系是由“多个个层面的规范”组合而成的。因此，由设计师推动的体系化建设，往往最初都是从设计规范这一“单层规范”开始。但是，设计体系的建设需要将单层的规范，通过不同的方式，转化为不同层面的规范，最终由面到体，形成体系化。

 

 

 

5）换位思考，寻求跨职能合作

 

设计体系的建立与维护，通常需要多职能的通力协作。因此，我们需要经常换位思考，在完成设计的工作，帮助其他职能完成目标。只有这样，才能得到更多的信任，并以此为基础推动更多体系化的建设。

 

比如我在设计一个功能模块的页面时，首先会与不同模块产品经理进行交流，了解不同的业务需求，并从产品层面就开始寻求统一性与通用性。这样的话，当其他模块需要同一个功能时，前端便可以直接复用，同时后端的数据也可以进行互通。而在开发端，我也会详细了解不同端的开发实现原理，务求设计规范与开发规则在理解上的一致性。这一既方便了开发理解规范，同时也从根本上提升了开还原的准确性。

 

长此以往，整个团队就能够建立良好的沟通和互信关系。有了这种默契，设计体系的推动就容易多了。

 

 

 

6）保持优化，不断成长

 

设计体系的另一个重要价值在于，它是可以伴随产品不断成长的。所有产品都是在发展中不断变化的，过分僵硬的规则，将会对产品发展起到反作用。

 

在业务发展中，产品一定会不断地加入新的功能模块，并对原有页面作出相应的调整。因此，设计体系需要时刻与产品策略保持一致，及时与上下游职能沟通，不断地针对产品发展进行优化，以保证设计体系能够符合产品的发展需要。

 

 

 

7）使用正确的推动方式

 

体系化最终能否成功实施，推动的方式至关重要。

 

在日常的项目中，大多数的业务方对设计体系了解甚少，也难以体会其中的价值。因此，他们通常会认为这些东西毫无必要，多数情况也不太愿意配合体系的推进。如果强行推进，反而会引起不必要的阻力，招致反感。那么，我们应该如何正确的去推进设计体系建设呢？

 

1.为他人带来价值：首先，寻找双方共同的利益点是首要任务。也许是可以让其他职能的工作更，也许能够促使其达成KPI，再不直接，那也一定能够为整个产品带来价值（不然你也没必要推了。。）。总之，设计体系一定要能够为他人带来价值，这样才能顺利推进。否则人家凭什么要协助你推进，因为你美丽可爱吗？你也可能比较可爱，但总归是不能一直这么来吧。。。

 

2.在解决问题后提出方案：不要一开始就啪一下抛出一个“宏大的理想”，大部分人会觉得你不切实际。你只需要通过这个体系，帮助业务方先解决一个问题，然后再提出你解决方式的来源——一个严谨的、可验证的、长远价值的体系化解决方案。

 

3.寻找合适的推动时间：最后，对于设计体系来说，寻找到正确、恰当的推进时机至关重要。比如当你在平时突然想要提出，对现有品牌进行升级时，大多数业务方都会认为你是没事找事。而如果情况是在新的一年中，产品进行了概念的升级，这时候你将概念以及未来的品牌规划融入在你的方案中，再去推进品牌升级，就会容易很多了。

 

 

 

 

✨

九、文章预告

-

 

本文旨在引导大家更好地理解和学习这种思维方式，想要用好全局性设计思维，光靠讲是远远不够的。最重要的是能将这种思维带入到产品中，为业务带来更大的价值。

 

因此，在后续的几篇文章中，我将通过不同类型案例，为大家深入讲解全局性的具体实践案例。

 

 

全局性设计思维 | 如何打造强大的品牌体系

 

为什么要建立品牌体系？品牌体系有哪些价值？设计师应该如何推动品牌体系的建立？

 

本文将带你了解网易智慧企业品牌体系的建设与推动全过程，聊一聊品牌体系建设的那些事儿～

 

 

 

FishDesign组件库 | 从零到一构建企业级UI组件库

 

我们为什么要建立组件库？在产品的什么阶段需要组件库？如何抽象业务组件？组件库设计过程中有哪些重要的细节需要注意？

 

本文带你深入了解，网易Web端组件库——FishDesign组件库从零到一的完整全过程。

 

 

 

 

全局性设计思维 | 如何构建事业部级大型设计体系

 

设计体系有什么价值？如何基于不同的业务建立设计体系？设计师如何推动体系化建设？在体系化过程中有哪些需要注意的地方？

 

我将会在这篇文章中，为大家介绍网易智慧企业设计体系构建全过程

 

1. 样式组件化+规范体系化，形成产品设计体系，整体重构产品线。

 

 

2. 结合品牌体系，推动事业部更多产品加入体系，形成智慧企业Web端产品设计体系

 

 

3. 推动更多产品/业务融入体系中，让智慧企业设计体系不断成长，赋能业务发展

 

 

 

 

文章来源：tob.design     作者：tob官方小编

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

交互设计之父的阿兰·库珀，最为人熟知的就是这句话：“除非有更好的选择，否则就遵从标准”。

1. Fitts’ Law / 菲茨定律（费茨法则）

a. 费茨定律，它是在1954 年 ，由保罗.菲茨心理学家 Paul Fitts 首先提出，当时用来预测从任意一点到目标中心位置所需时间的数学模型，在人机交互和设计领域的影响力最为广泛和深远。

b. 定义：从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小

（上图中的 D与W），用数学公式表达为时间 T = a + b log2(D/W+1)。

c. 费茨定律，在产品设计中的价值是提高产品的可用性和易用性。例如：界面设计中，按钮等可点击对象要合理的设置大小尺寸才能容易操作，所以在移动应用中，图标按钮会增加点击热区范围，以便用户轻松点击按钮，做到

产品设计上的可用性和易用性。

费茨定律的思考分析，如下图所示 。

1. 可点击对象的设计，需要设计合理的大小和尺寸。功能设计的越大，用户越容易点击操作，交互效率越好。

2. 界面设计的屏幕边缘或角，适合放置像菜单栏或按钮这样的设计元素，如果边角是目标，它们可无限高或无限宽，更容易触达到操作目标。不管你移动了多远，点击操作最终都会停在屏幕的边缘，并定位在按钮的上面。

3. 界面设计中，出现在用户正在操作的对象旁边的删除列表（右滑删除）比下方弹出选择对象容易操作，右滑删除交互可以被用户打开得更快，更有效率，因为不需要移动到屏幕的其他位置，就可以删除多余的列表。

4. Apple的iOS人机交互设计指南中指出，按钮的点击热区大于44x44pt，这样操作按钮才会让用户觉得容易使用。

5. 费茨定律案例：用户在使用产品时，比较重要的操作，我们会放在移动端应用的屏幕边缘处，方便我们的

用户点击操作产品的功能图标。如下图所示。

2. Hick’s Law / 席克定律（希克法则）

我们看一下，席克定律的数学公式表达是 : RT= a+blog2 ( n )。RT 表示反应时间，a 表示跟做决定无关的总时间，b 表示根据对选项认知的处理时间实证衍生出的常数，n 表示同样可能的选项数。

在人机交互的界面设计中，选项越多，意味着用户做出决定的时间就越长。

分布操作，专注当前行为，就可以节约用户作出决定的时间。如下图所示。

其他符合席克定律的案例，如下图所示：

a. 对于用户，低频率功能或不太重要的功能，可以收纳起来。比如：个人中心的设置功能模块。如下图所示：

b. 分布操作，专注于当前的行为设计，如下图所示：

c. 在人机交互设计中，我们对核心功能选项做好设计上的归类，可以提升用户做选择的效率。

比如：我们帮助用户选择 5 种核心的功能需求，它首先划分了旅游场景下的功能分类，让用户对分类进行选择。

然后进入选择机票入口，这样我们极大的化解了用户面对很多旅游功能选项的难度和纠结，节约了用户做决定的

时间。

d. 做好分类选择，可以提高交互体验设计的效率，选择你想要的商品并购买。如下图所示。

3. 神奇数字 7 ± 2 法则

1. 因为美国认知心理学 George A Miller 的研究，人们短时记忆广度大约为7个单位（字母、数字、中文等），也就是说每次只能处理 5 到 9 件事情。

2. 人的大脑认知信息的能力有限，所以我们通过把信息分组和模块分类，以此来认识和思考一些复杂性的问题。

3. 神奇数字 7 ± 2 法则，应用范围很广。例如我们记忆的电话号码，可以分成三组数字：159  5555  6666 ，

这样分组记忆起来就会容易很多。

4. UI 界面的导航设计，为了给用户提供明确的设计向导，两种导航（底部导航栏和顶部导航栏）的栏目设计通常都控制在 5 个之内，栏目功能过多用户不容易记忆，5 个之内的导航设计方便用户记忆和快速操作。

5. 移动应用的交互设计规律。神奇数字 7 加减 2 法则同样适用，蚂蚁金服的品类区的核心功能模块的设计，悬浮卡片上只显示 8 个 功能图标，如下图所示。

6. 同一类功能和同一层级的元素出现时，数目一般控制在 5-9 个，如下图所示。

7. 如果超过 5 个，可以右滑选择你想要的产品功能，如下边的右图所示。

8. 神奇数字 7±2 法则，运营广告图设计要抓住重点去设计，更好的引导用户去浏览内容和产品的交互体验。

如下图所示，数字符号标注-突出重点，主图、主题、操作按钮、主色氛围等，我们会作出优秀的运营设计。

4. The Law Of Proximity 接近法则

根据格式塔的心理学思考 ：当对象离得太近的时候，人的意识会认为界面元素之间是相关的。

在交互设计中，界面设计中的接近原则是对相似信息及功能类别进行内容分组和布局设计的优化设计。

接近法则在界面设计中的作用，能够直接影响到用户与产品界面之间的视觉互动，来引导用户的浏览及点击交互行为。因此，相似的内容和功能模块应该彼此靠近，而关联性较弱的内容应该保持大一点的间距。

接近法则运用的目的：在视觉上通过组与组的区分，来划分功能模块之间的关联性，让界面变得更加清晰，同时帮助用户在浏览页面时，能够清楚的看到到各个内容模块之间的关联性，就是视觉信息的划分和分组展示。

如下图所示。同一类的功能可分为一组，组内使用浅灰色的分割线来表达。而关联性弱的功能模块，组内的可以用浅灰色的分割面表达，拉开组与组之间的距离，做好视觉信息的划分效果。

5. Tesler’s Law 泰思勒定律（复杂性守恒定律）

a.  “复制粘贴之父” Larry Tesler (1945-2020) 说过，“任何事物都具有其固有的复杂性，无法简化”。

引入第三方登录，减少注册账号的复杂步骤，节约用户登录或注册这一流程上所耗费的步骤和时间。

复杂性守恒定律，认为每一个产品设计的过程中，都有其固有的复杂性，存在着一个临界点，超过了这个点产品设计的过程就不能再简化了，你只能将固有的复杂性从一个地方转移到另外一个地方。

b. 以用户为中心的产品设计，交互设计应尽量简化用户层面上的交互设计的过程。比如：顶部导航栏的更多图标，就是将常用的功能整合并隐藏在首页设计的更多功能模块中。如下图所示。

6. 新乡重夫：防错原则

a. 防错原则，认为大部分的意外都是由产品设计上的疏忽，而不是人为的操作疏忽。所以我们可以通过改变产品

体验设计把过失率降到。

我们在设计过程中，要从用户维度出发，做设计前思考用户的使用场景，预测到他们有可能发生的误操作状态，

做到操作前给用户的温馨提示、操作中的实时告知、操作后给用户的及时反馈。

b. 防错原则是著名的品质管理专家新乡重夫提出来的。原则最初是用于工业管理，在交互设计中也可以使用。

比如图 1，今日幸运星主题，分享给好友帮忙砍价。在没有满足条件时，通过弹窗来提示用户去邀请好友，以此

来完成产品设计的任务。

比如图 2，请输入验证码的弹窗，验证码错误，您还可以重复 3 次，只有信息都输入正确时，用户才能完成的这个界面任务，如下图所示。

7. Occam’s Razor 奥卡姆剃刀原理（简单有效原理）

简单有效原理，被称为“如无必要，勿增实体”（Entities should not be multiplied unnecessarily），即如有两个

功能相等的设计，那么选择最简单的、视觉干扰比较少的设计。在其他条件相同的情况下，要求得越少的那个就

越好，越有价值。

a.  合并多余流程，点击极速支付，支付成功弹窗提示。

b. 高频率使用的产品界面，保持清爽的设计感。

c. 优先展示核心功能，减少点击次数。如下图所示。

图 1，界面中清晰的品牌色的底部操作按钮，可以明确的引导用户去选择优质的理财产品。

图 2 ，摩拜单车首页，用户最关注的功能是扫码开锁的核心功能，方便用户直接操作，提高交互效率。

d. 苹果官方网站的简约设计做的很棒。苹果公司用一种很和品质感的设计提供了足够多的内容，网站的文案，交互和图片都比较集中展示，网页设计没有放一些使用户分心的广告和不重要的内容。如下图所示。

总结：

1. 在产品设计领域，有很多经过时间检验过的定律，可以作为产品设计的指导原理。作为交互设计之父的

阿兰·库珀，他最为人熟知的就是这句话 ：“ 除非有更好的选择，否则就遵从标准 ”。

2. 交互设计的定律，能够帮助产品设计师对界面上的各种视觉元素进行合理思考，从而发现一些用户使用场景中的可用性问题。从产品设计的维度思考看，我们来改善产品设计的操作效率和用户的满意度。设计服务于产品、设计服务于商业。

二.  用户体验地图的制作思考：

a. 什么是用户体验地图 ？

定义：用户体验地图，是一种梳理产品体验问题的设计工具。展示的就是用户在使用一款产品和设计服务的过程中，每一个阶段的体验、用户对产品直观的心理感受。将用户的所做、所思都展现出来，便于团队设计师全面思考产品带给用户的体验，挖掘设计的优化点。例如，你去三亚去度假旅游，用户体验地图就是用图形的形式，可视化的表达，将你在三亚的一天活动情况记录下来，其中包含你这段时间去过的旅游景点，以及在每个旅游景点的用户

体验感受。

思考用户体验地图，适合在产品设计的那几个阶段绘制？

1. 原型制作前，设计师从直观感觉的角度看，我们要了解自己的产品为用户提供了什么功能、交互体验，同时协助我们的产品设计团队，做好产品功能的体验设计。

2. 产品上线时，我们可以结合用户调研、可用性测试等方法论。以此获取用户的美好体验和真实的心理感受，来帮助我们公司的产品设计发现问题，以此作为产品设计的迭代优化的方向或者寻找新的创意设计机会点来解决问题。

b. 为什么要设计用户体验地图 ？

a. 我们做好用户体验地图的两个优点：

1. 产品设计的体验目标是让用户用起来，感觉到产品具有可用性、好用性、易用性，那么产品设计也应该从用户

视角出发，用户从产品那个触点点击进来，怎样点击交互下一步，怎样保持对产品的活跃度，如何传播分享；定位用户使用产品过程中的体验痛点。

2. 真正思考用户需要什么功能，让更多用户参与进来，换位思考我们产品带给用户具体什么感受，全局性的思维去思考产品的体验，与团队成员、产品交互设计、开发部门和项目负责人等达成一致性的共识、有效沟通和协作，一起制作出解决方案。

b. 思考用户体验地图的价值点

1. 基于用户使用场景的设计是基于用户达到某个体验设计目标的一系列场景的分析与产品思考，理解用户在每一个使用场景下的痛点及需求分析，同时结合用户的上一场景，思考用户下一步的体验目标，我们可以通过做好体验设计，来引起用户情感上的共鸣。

2. 使用用户体验地图，团队成员可以从用户的痛点出发，让产品设计师、团队成员全面的思考产品体验，从用户

体验地图中来挖掘产品设计的机会点。

c. 如何制作用户体验地图 ？

以途牛用户体验地图为例，如下图所示。

我们运用用户体验地图时，作为设计师或参与者需要切换成用户视角、第一次使用者的角度去思考，去发现产品体验上的问题，同时解决产品体验中遇到的问题，提升用户体验的满意度。 

制作用户体验地图时，四个关键点的思考：

1. 明确我们的核心用户人群等;  2. 研究用户的使用场景。3. 做好用户的访谈和调研。4. 制作好用户体验地图。

制作用户体验地图的具体步骤如下：

1. 前期准备工作：

我们可以先做用户的深度访谈、用户对产品反馈、产品设计的走查和交互的走查、产品的数据分析、同行业的竞品分析、访谈用户等方法，获取大量真实可靠的资料。

我们就会认识到：思考用户在使用产品设计的过程中产生的行为数据、用户体验和用户内心的真实感受。我们也可以思考产品的设计思路、产品的核心用户人群等，以此作为我们制作用户体验地图过程中的重要参考和依据，知道用户到底需要什么功能和流程，来帮助用户解决问题。

2. 用户调研的方法如下：

我们可以先采访用户或者做好调研和记录，将我们的采访或调研记录的内容做好整理归档，团队成员一起来拆解和记录用户的行为、用户的直观感受和用户心中真实的想法。

3. 我们要梳理好关键产品设计任务的流程，就是用户在使用产品功能的过程中，会面临很多不同的场景或复杂的设计流程和体验设计的目标。然后我们再撰写用户完成每个关键任务的时间：比如，对于我们日常所见的查找功能而言，用户希望更快的查找到自己想要的产品功能和体验目标。

我们再写出关键产品任务的用户操作产品时的行为：

指的是用户当下在做什么，通常是用 “我+动词” 来表示，例如：我购买基金产品。

4. 我们再确定好关键节点，写出用户调研过程中的痛点思考、用户的满意度思考，放在对应的行为点的下方。

我们思考和分析用户的痛点、用户满意度的调查，判断用户的情绪变化。分析结束后，需要将以上三类信息都写下来，方便后续整理分组。把行为按照达成用户目标的逻辑顺序整理出来，并做好归类。例如：美团 App 的例子中分为 4 个阶段，如下图所示。

5. 我们来判断：用户在每个阶段，体验产品设计任务中所产生的情绪高低的不同值，并把它们连成一条线，这样就形成用户的情绪曲线。

6. 也就是说，制作用户体验地图过程中，我们要思考用户每个行为背后的痛点和产品设计上的机会点。

最后，制作好一张实用性很强的用户体验地图，以此来挖掘用户的痛点问题，我们可以更好的去挖掘产品体验设计中的设计机会点，如下图所示。

网上的案例欣赏，出境购物的用户体验地图，如下图所示。

总结：

1. 我们制作用户体验地图，注重的是团队成员的洞察分析能力和对产品的思考能力，我们要用心思考产品设计中的核心用户的痛点和产品设计中的机会点，我们要输出一套符合用户价值、商业价值和和产品功能价值的体验设计方案，以此解决用户的体验问题，把产品做的更好，让用户使用产品过程中，产生愉悦感。

2. 制作用户体验地图的价值是，不仅能使我们以“用户视角”的维度去思考，引导团队和设计师去思考问题并做好

产品的体验设计。同时我们也可运用“全局性的设计思维” 去思考产品体验设计，去发现产品问题并解决产品设计中遇到的体验问题，让我们产品带给用户的是：产品设计的可用性、好用性和易用性的价值。

文章来源：tob.design     作者：峻溪POINTV

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

现代管理学之父彼得.德鲁克说过一句话很经典的话：“如果你不能衡量它，那么你就不能有效的让它增长”。

 

 

 

 

 

写在前面 

 

为了快速提升产品设计的商业价值，我们必须先明确思考商业价值的数据指标，用它来指导后续的设计工作，并

衡量其关键成果。步骤如下：

 

1. 分析我们产品的用户群体

做好用户人群的分析，定义好你产品的核心用户，找到核心设计思路，发现商业服务的设计逻辑，做好用户分析。

 

2. 制定产品设计的目标

找到商业产品设计的盈利点，做好商业设计价值的平衡和营收的策略，提升产品设计的商业价值。

 

3. 产品设计的整体规划

运用商业价值的思维做设计和严谨的科学态度，定义你产品的价值指标和商业增值的思路，做好用户增长地图。

 

4. 做好产品设计并科学测试

对产品设计进行科学测试，通过持续的测试和拆分变量，做好设计的迭代优化。

 

5. 最后跟进，做好产品设计的迭代和优化

产品设计需要设计的迭代和优化，经过科学严谨的设计流程，提升产品设计的价值感，定量为主，量化数据。

 

 

 

 

用户增长（UGD）的设计核心是 ？

1. 不断满足客户需求、创造客户价值；2. 不断与竞争对手进行区分，获得差异化的产品设计优势等。

 

 

一 重点思考：OKRs-目标与关键成果法

 

 

通过分析数据漏斗模型，以此来驱动团队使用数据思维，发现问题并成本的解决设计问题。

 

OKRs-目标与关键成果法，起源于德鲁克的目标管理框架也就是MBO,由因特尔前CEO安迪·格鲁夫演变成了iMBOs，意思是“英特尔公司的目标管理系统”。后来格鲁夫的同事约翰·杜尔为避免这个方法与德鲁克的MBO混淆，将其命名为OKR，OKR从此正式诞生.后来约翰把这套方法引入到谷歌,而真正让OKR火起来的是谷歌的风投合作伙伴瑞克·克劳，2013年他在网上发布了一段一个多小时的OKR视频，引爆了整个网络和企业界，从此OKR开始风靡全球。2013年底，OKR传入中国。

 

对于我们现在的互联网企业，如何通过OKRs思维细化设计的迭代优化和改版，结合实际工作的锻炼和思考，

我感觉具体可以拆分为以下 3 个方面 ：

 

1. 定义设计目标，（年度目标、季度目标、阶段性目标）。

2. 关键成果，设计目标通过哪些关键成果来达成。

3. 行动方案，这些关键成果或数据，应该采取什么行动来完成。

 

 

a. 定义：

 

OKR（Objectives and Key Results）即目标与关键成果法，是一套明确和跟踪目标及其完成情况的管理工具和

方法，由英特尔公司原CEO安迪·格鲁夫发明。

 

 

b. 为什么使用OKRs工作法呢 ？

 

在日常的设计工作和生活中，你是否会遇到以下的这些问题呢 ？

 

1：设计师，下班前回想一天工作时，感觉没有设计任务可以记。

2：团队设计师等开发工作人鱼，季度考核时，领导问你这个月，工作收获是什么时，你回想起来只是简单做了一些设计项目。

3：平时自己的目标太多，缺少产品设计的重点或创意点。

4：没有聚焦的产品设计目标和团队贡献感。

 

解决以上问题的思路，是今天我们所提到的OKRs工作法，OKRs工作法的主要目标是明确公司和团队的“目标”以及明确每个目标达成的可以衡量的“关键成果”。

 

OKRs工作法，可以在整个团队的工作项目中执行，产品设计的团队就可以明确工作的设计目标，集中精力去完成设计目标。

 

c. 如何去达成设计目标？

 

我们先确定团队的工作目标，确保团队成员的设计工作目标明确。每个人、每一天都聚焦到核心的设计目标上。

 

 

d. 设计目标的价值思考如下：

 

1. 明确产品设计优化的方向。

2. 有效的激励团队的设计成员。

3. 设计决策的认真思考和设计考核的思路等价值点。

 

 

e. 遵循设定目标的基本原则  ( SMART法则 ) ：

 

1. 明确具体（Specific）

2. 可衡量性（Measurable）

3. 可实现性（Attainable）

4. 相关性（Relevant）

5. 时限性（Time bound）

 

 

f. 举个例子 

第一步：O（目标）

星期一，设计网站分享关于国际平面设计排版的设计文章。

KR1：文章正常推送文章，并且文章阅读量大于600000 。 
KR2：文章点赞数量大于3000 。

KR3：文章互动评论大于100 。

 

 

第二步：关键成果，设计目标通过哪些关键成果来达成。

 

制定关键成果的建议是：

1. 必须是设计师能有效达成的设计目标。

2. 设计思考要具有创新价值的。

3. 输出的设计结果是可衡量的。

4. 设计目标一般三个目标以内。

 

 

第三步：超强的执行力，从关键成果到 “执行力计划" , 关键成果确定后，就要围绕关键成果来分解设计任务，每项关键成果就会做出一系列的设计任务，将这些合理分配至每周或者每天中去执行设计任务。

 

超强执行力的原则：

1. 必须写明最后的截止时间；

2. 必须写好完成的百分比。

 

温馨提示：

关键结果转化为具体行动后，我们就需要定期进行复盘确保每天工作都聚焦在重要目标上，所做的事情都服务于

设计目标上，使用专一、专注、专心的做事思路；要想发现痛点，我们需要考虑用户、场景、问题、动机。

 

痛点是用户增长的第一要素，用户增长的第一步是找到用户痛点。场景是同理心，站在用户的角度，去发现用户的痛点，为用户提供正确的产品设计和解决方案。

 

做好产品设计体验，提升用户的活跃度的三个关键性动作： 

 

 

价值，引导，刺激 ：

 

1. 产品设计的价值思考，首先要解决用户的痛点，产品的功能设计带给用户的好处和好用。

 

2. 帮助用户设计好功能模块，引导用户更好的使用产品。

 

3. 刺激点，首单减免、优惠价等奖励措施。信任背书，名人、大V等知名机构的影响力，触动用户愿意使用产品。

 

 

 

重点来了，我们具体看优秀的运营设计案例，站在营销的角度思考用户增长：

 

 

 

1. 700 元礼包等你领-运营设计活动的价值思考：

 

518-收益狂欢节，最高领取700元红包，时间限制在：5月8日到5月31日，领取红包，点击立即领取后，方可参与获得奖励。限制活动时间，提升用户的紧迫感。送518现金或120元京东卡和50元话费等68888的体验金，吸引

用户享受优惠的心理，提升用户使用产品的愉悦感和惊喜感，用户粘性、产品的营销设计价值得到大大的发挥，运营氛围和主视觉设计等，专业的品牌形象和主张，建立用户的信任感，设计创意能很好的驱动用户增长。

 

 

 

 

2. 天天领福利和15元快车券大派送的运营设计价值思考：

 

超级 9:30 的天天领福利和15元快车券大派送，首次借钱成果即可领取，这个是金融产品都有的一种营销策略，

降低用户的成本。这里先拿网商银行和滴滴金融的做任务-领福利活动为例子，因为网商银行的天天领福利运营设计和滴滴金融的15元快车券的运营活动做的很棒，做任务领福利、使用时间。还是滴滴金融的15元快车券的营销活动，低价优品，为滴水贷的引流等方面设计的都很合理，有利于用户去使用产品，参与运营活动，提升产品的

复购率和留存率。

 

 

 

3. 运营设计弹窗带给用户的价值和产品的价值，思考如下：

 

提升新用户的粘性价值和活跃度，比较常见的做法就是给予用户明确的优惠价格，提升用户的粘性和活跃度，或

通过天天领红包的折扣券或会员狂欢周的运营设计活动，引导用户在平台上进行的第一笔消费，加深用户对产品的好印象。比较典型的就是天天领红包或会员狂欢周的夜宵红包的运营弹窗的设计。

 

 

 

 

4. 城市生活享乐季 , 吃喝玩乐买买买的H5运营活动的产品设计思考，如下图所示 ：

 

招商银行，城市生活享乐季，吃喝玩乐买买买的活动，三重福利送给用户，通过优惠券、瓜分红包、两人同行，一人免单等活动，引导用户在产品中消费，提升用户的参与感，营销设计的场景感，主题明确，主视觉的美食和

商城券、红包、大礼盒等设计元素，运营氛围渲染的很好，底部招商银行的品牌设计记忆点，提升产品的粘性度和用户的留存率和转化率。

 

 

 

 

5. 支付宝-蚂蚁森林的社交化、游戏化的创新价值思考，如下图所示 ：

 

支付宝的蚂蚁森林，通过社交化、游戏化的创新，提升了用户的粘性度和留存率。

蚂蚁森林的用户每天步行、地铁支付、线上生活缴费等就能积累能量，当能量达到一定的数值时，我们就可以

种植一棵树，同时用户可以去偷好友的能量数值。蚂蚁森林的游戏，会促进用户打开支付宝的次数越来越多，提高了支付宝的打开率。同时用户可以获得更多的能量，也会经常使用支付宝，这样就可以大大的提升了支付宝用户的

活跃度和留存率。

 

 

小结：H5 运营落地页的增长设计三要素：1. 做好产品设计的优质内容。2. 设计的价值表现。3. 产品设计的

体验感。运用好增长设计的三要素，我们可以更好的去服务好用户的体验设计感。

 

 

 

对数据增长的总结-以教育平台的案例分析-在线语言学习类教育平台“多邻国”（如下图所示）

1 .  优化打卡文案使学习效果更明显，提高1%的DAU。

2 .  推迟强制注册页面，提高20%的DAU。

3 .  优化推送文案，使用户平均留存时间，增加了三周。

4 .  上线徽章功能提高了2%的DAU，双周留存提高了2%，App内购买收入增加了5%。

5 .  引入打卡对赌功能，14天提高了5%，APP内购买增加了600%。

 

 

 

 

附加：用户增长思维的地图示例：

1. 确定增长指标，增长指标拆解，AARRR增长模型分析。

 

 

 

 

 

 

二 用户增长关键的数据指标，如下图 ：

 

 

 

一 数据指标的定义是什么？

 

它是对当前业务有参考价值的统计数据，是通过对于业务需求的进一步抽象，并进行数据埋点后，加工出来的一套计算规则，并通过有效的方法论和数据可视化呈现，最终能够解释业务变化和用户行为。只有对当前业务有参考

价值的指标才可称作指标，同时要具备：可统计、可分析、可监测的特点。

 

产品中常见的数据及其表意：

分析一款产品，重点关注三项内容：用户、需求、数据。

 

 

 

我们可以从业务、产品、感知三个方向去强化产品：1. 业务方向：聚焦核心痛点业务。2. 产品方向：确定产品的

主线功能。3. 感知方向：强化产品的痛点感知。如下图所示。

 

 

以上三个方向都是指向用户的痛点，目的都是为了解决痛点问题，抢占用户心智，形成强大的竞争壁垒和

增长势能，形成用户增长的优化点。

 

 

 

数据对体验设计师来说很重要，功能上线后，关注数据的变化来了解用户的心理变化，这个对比看用户反馈要客观的多。数据量化结合用户反馈，做好用户增长的体验设计优化。

 

1. 点击率

是指网站页面上某一内容被点击的次数与被显示次数之比，即clicks/views，它是一个百分比。反映了网页上某一内容的受关注程度，经常用来衡量广告的吸引程度。

 

意向率 ：意向UV占曝光UV的比例，用户衡量运营活动/功能的导流能力。

 

 

 

 

 

 

 

 

 

2. 人均使用时长

在一段时间内，总活跃时长/总活跃用户数。娱乐游戏、社交等产品数值往往比较大，工具类产品数值比较低。

人均使用时长不一定越大越好，比如：内容类产品的人均使用时长较长，说明内容质量高，但是工具类产品如果

人均使用时长过长，反而代表产品使用效率低，用户学习成本较高，所以数据需要多角度灵活的去分析产品。

 

 

 

 

 

 

 

3. 留存率

互联网行业，用户在某段时间内开始使用产品，一定时间内，继续使用的用户，就是留存用户。（留存率=留存用户/新增用户*100%）。通常重点关注次日、3日、7日、30日即可，并观察留存率的衰减程度。留存率是判断产品价值的重要指标之一。留存率高的产品，更容易获得资本市场的看好。

 

留存率的计算：

 

7日留存率：第一天新增的用户中，在注册的第7天还有登陆的用户数/第一天新增的总用户数；这个时间段内，用户通常会经历一个完整的产品体验周期，如果这个阶段用户能够留下来继续使用，很有可能成为产品的忠实用户；

 

次日留存率：当天新增的用户中，在注册的第2天还登陆的用户数/第一天新增总用户数。

 

月留存率：即某一统计时段新增用户在第30天再次成功启动该应用的比例。通常移动端产品的迭代周期为2~4周为一个版本，所以月留存率能够反映出一个版本的用户留存情况，版本的更新，会影响部分产品的体验，所以通过

对比月留存率能判断出每个版本的更新对用户的影响，从而定位到设计问题进行优化点设计。

 

 

 

 

 

 

 

4. 活跃用户数

产品活跃度一般分为日活(DAU)、月活(MAU)、周活(WAU)，产品活跃用户是需要达到某一个指标，比如内容类

产品，阅读了一篇文章或电商类产品用户完成3次页面跳转，都可以算作是一个活跃指标。

 

提高新用户的活跃度，比较常见的做法就是给予用户最初的引导以及简化功能路径，降低新用户的使用难度，或者说通过一些优惠或者卡券引导用户在平台进行第一笔消费，加深用户对产品的使用印象。

 

 

 

 

 

5. 转化率

是完成转化目标的用户占总体用户的比例，注册、下单、登录、复购，都可以用转化率来进行量化，根据产品不同阶段来定义不同的转化率指标，转化率是互联网产品的增长的重要因素。

 

转化率=产生购买行为的客户人数/所有到达店铺的访客人数*100%

 

 

 

 

小结：各属性的产品更看中那些数据 ？

 

 

业务型产品：一般和 意向UV、CTR 点击率、跳出率、意向UV访购率 有关。

 

内容型产品：一般和 用户的停留时长、功能 CVR转化率 、跳出率 有关。

 

社交型产品：一般和 次日留存率、用户互动和使用时长、CTR 点击率 有关。

 

工具型产品：一般和 用户的活跃度高、次月留存率、用户使用时长、核心转化率 有关。

 

电商型产品：一般和 GMV成交总额、下单量、DAU 日活跃用户数、核心转化率 有关。

 

游戏类产品：一般和 玩家的付费率与ARPU值、用户使用时长、核心转化率 有关。

 

 

 

产品生命周期，可分为初创期、成长期、成熟期、衰退期，每个阶段的工作权重和数据关注点都会有所区别。

 

 

 

我们分析一下产品的增长思路：科学提升数据的方式，控制变量。

 

1、初创期

初创期的重点在于验证产品的核心价值，通过某种产品或服务可以为特定的人群解决某个问题。

在产品初期，快速验证痛点和需求的方法被称为MVP（Miumum Viable Product）,这里的MVP不是指最有价值的球员，而是最小可行性产品的缩写。

 

MVP是埃里克.莱斯（ Eric Ries ）在他的《精益创业》一书中关于精益创业的核心理念和思想。MVP是指用最快、最简明的方法开发初一个可用的产品原型，但MVP不仅仅是一个产品，还是一个过程，是由开发、测量、迭代三个环节形成的循环，即最小产品开发、产品验证、产品调整不断循环，同时我们也要注重产品的可行性，重视用户的质量很关键。

 

 

2、成长期

该阶段的产品已经能够解决用户的基本诉求了，所以将侧重点关注在用户的生命周期的管理，提升拉新和留存率。

 

 

3、成熟期

成熟期的产品，不再做整体的页面优化，而是一次只改一个内容模块的设计优化设计，或者只改一个元素的优化或颜色修改，或者只修改图标样式，团队内讨论和设计专家走查，思考那个颜色受用户欢迎；图标的设计风格符合用户的审美心理等。

 

第二轮优化，经过AB测试，页面的转化率就可以对比出来，最终选择转化率高的设计方案就好。

 

把AB测试作为一个测试设计方案数据提升的方法之一。

 

在产品的成熟期，设计师一般尽量做细节上的优化。看一次的结果，对数据影响不会太大，但是累计起来就非常惊人的。这就意味着必须经过长期的AB测试，才能测试产品迭代优化的数据洞察，多次优化后我们可以得到累积的效果，做到设计的量化。

 

下面几个案例来自《增长黑客实战》

Google 从2004～2007年历时3年逐步构建并建立了一套强大的内部AB测试系统，每个月会执行几百甚至上千次试验，小到将公司移动几个像素，广告上背景颜色序列稍作改变，大到对某个新产品反馈作出评断并决定去留。仅2010年，Google就进行了8000多次AB测试和将近3000次灰度测试。

 

亚马逊对AB测试的偏执，更是到了近乎苛刻的地步，甚至被赋予“AB测试公司”。不仅公司自行研发了AB测试系统，允许员工将网页拆分成不同版本进行对比和测量，就连办公室桌子的摆放角度，都要通过AB测试来决定。

 

所以，高价值的公司不仅在科技创新、用户价值、商业变现等方面表现突出，更重要的是他们利用数据思维去衡量每一个微小的改变，积累多了，最终大幅度提升产品设计价值。这对于追求科学严谨的成熟期来说至关重要。

 

 

4、衰退期

关注用户流失后的产品，分析竞品的商业模式和功能，同时监测流失的速度，拓展产品边界，寻找新的切入点。

 

 

小结：

 

1. 通过标准的设计流程和专家设计走查等思路，帮助我们学会用科学的方式，量化设计细节并提升设计效果。

 

2. 通过发现用户新的痛点，突破产品的生命周期，找到产品增长的第二曲线，实现产品的持续增长。

 

 

 

 

 

三  AARRR增长模型和用户增长案例分析

 

 

在《增长黑客》中，提出了AARRR的用户增长模型，将增长分为5个阶段：获取、互动、留存、变现、传播。通过递进式的引导，实现持续的增长闭环。设计师可以基于这个模型，探索设计在增长各阶段的作用。

 

 

 

 

用户增长的案例分析 ：

 

现在市场上有很多优秀的用户增长的产品设计案例，与用户增长模型有关 ：

 

a. 微信读书-无限卡为案例思考，如下图所示。

 

1. 每天限量派送7天无限卡

 

微信读书无限卡活动。同时面向老用户和新用户，老用户默认领取3天无限卡，分享到朋友圈后才能获得剩余的4天无限卡。新用户通过老用户的分享，注册后即可获得7天的无限卡。

 

这就充分利用了影响力 “互惠”、“喜好”、“稀缺性价值” 三要素。

 

“互惠” 微信读书，会给予用户无门槛，赠送3天无限卡，然后再要求老用户分享即可再获得4天，利用先让利再要求用户进行操作的态度，老用户内心非常愿意分享微信读书的无限卡。

 

“喜好” 是因为老用户分享出去，新用户因为老朋友的分享，生活情感上的一致性思维，更容易接受微信读书这个阅读性产品，同时可以领取微信读书的无限卡。

 

“稀缺性价值” 微信阅读很少做全场无限阅读的权益，我们可以购买微信读书的 Vip服务，看老用户，这个无限卡就是稀缺性价值，更愿意为稀缺性的权益而分享给好友。

 

 

2. 组队抽取无限卡

 

无限卡活动投放在微信读书的-用户重点关注的模块，每周成功组成5人队伍，就可以获抽奖机会，奖品是1、3、5、7、30、365天、终身无限卡会员，队伍中有了新用户，我们才能抽取终身大奖-无限卡活动。

 

组队抽奖活动依托终身无限卡这个“稀缺”资源，要求老用户每次组队都要拉新用户，老用户为了平台资源，一般会每周主动寻找 1 名新用户来组队，争取获得抽终身无限卡的读书权限。

 

对于新用户，“互惠”和“社会认同”会起到参与的价值，新用户参与这个活动，也能免费获得1天的无限卡会员；我们看到好朋友参与读书活动，我们也会想参与组队读书的无限卡活动。

 

 

 

b.  拼多多的增长案例分析

 

增长原因

首先，说明这个产品的核心模块，再分析拼多多是如何一步步引导用户注册、留存和传播的。

 

用户的裂变或分享

例如：天天半价购、好友互动等运营活动，为了做好营销设计而做的一些增长功能。

 

拼多多解决了用户两个问题

1. 商品价格低。2. 购买、支付方便快捷。 

 

天天半价购有 2 种运营形式，H5运营图展示和运营弹窗设计

第 1 种，天天半价购的流程，选择商品-半价拼单-团成开奖-每团必中。拼团后，马上就可以半价购物使用。新人首次发起半价团，中奖率高达99%哦～这个设计即可引导新用户马上下单消费，也实现新用户分享拉新的目标。

 

第 2 种，天天半价购这个活动，每团手气最佳获得商品，其余人立即退款，并送优惠券。而好友拼单=邀请新用户下单。

 

小结：用户为了实现某个目标，邀请好友帮助完成某项任务，从而影响更多的潜在用户，达到传播和裂变的目标。

 

 

 

文章来源：tob.design     作者：峻溪POINTV

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

2021年的第一篇万字长文，文章主题是一次偶然的反思中总结出的设计师思维进阶的过程，详细讲述了我在两年间从一名应届非科班设计师成长为一名高级体验设计师的思维进阶过程。与一篇UI教程、一篇交互分析的文章不同，这篇文章希望能够从底层的思维层面帮助你明确自己的状态，并提供一个快速进阶的思路，所谓授人以鱼不如授人与鱼正是这个道理。

一：前言：灵感与反思 

灵感始末

最初，在一个偶然的机会读到一本规范相关的书籍，然后我开始反思自己是否有积累成系统的设计规范、设计技能树，为了验证这一点，我便以设计一个弹窗为例子开始模拟演绎，演绎完毕后进一步思考，我是如何积累这些方法论或思维模型的？正因此发现了我作为非科班设计师，从最初开始自学设计到如今晋升到高级体验设计师的思考方式的转变。进一步从现象中探究原因，于是输出了本文。

如何设计一个弹窗？  

在做任何需求的时候，甚至是一个极小的需求，你有没有持续思考过？有没有进一步思考过？又有没有刻意、主动完善设计思路，积累思考模型？如果没有，你可以从接下来这个思考案例中反思一些东西。

设计弹窗时，我画的第一个元素——弹窗的矩形背景时，是如何思考的，考虑了哪些元素。进一步设计我还要考虑哪些因素？下面是我的瞬时思考能整理的有效信息。

方法1：根据弹窗内容进行界定（根据内容极限情况，及你的设计系统定义的间距来控制整个弹窗的尺寸）

方法2：根据固定比例，主要适用于移动端，例如3比4的矩形比例较美观，计算弹窗面积与屏幕整体面积的比例、计算留白与弹窗的比例、参考黄金比例Golden Ratio、白银比例Silver Ratio等。 

方法3：根据你的系统定义的栅格进行界定，如小弹窗使用1/4,1/3,1/2，大弹窗使用1/2,2/3,3/4栅格。

方法4：栅格+比例，方法3界定宽度，方法2界定高度 。

 

更上层规则

设计延展性：考虑弹窗内的内容发生变化时的自适应情况，内容过多的极限情况/内容过少的极限情况。 自适应的规则，弹窗窗口尺寸的延展方式（横向拓展/纵向拓展）

交互：弹窗又叫模态视图，其通过遮罩突出弹窗视区，在蒙层遮罩上方的最高层，根据通用规则，大部分情况我们不应当在弹窗上再次叠加界面层。若弹窗场景下有新的纵深层，如下一级操作或内容界面，此时如何处理？

如下方，PC端google drive，就在结构上使用类平级跳跃的形式来“借面板”解决新的操作需求。

而再下方的IOS使用的bottom sheet则采用了完全不同的解决方案，表面上似乎是违背了弹窗模态上重复叠加的规则，但在移动端一屏仅仅解决一个问题、完成一个任务的语境下，反而更加合理。（而这些成熟的模式、范式，或者说设计单元，正是在主动思考和被动思考阶段设计师需要积累的设计经验，它们将作为设计师知识库中的组成部分，指导设计并进一步提效和促使设计合规）

常规易用性：如退出机制——关闭的解决方案，通过关闭按钮退出，那关闭按钮尺寸在当前弹窗尺寸下定义为多少合适，视觉尺寸与hover实际可点击尺寸分别是多少？PC端是否只能使用关闭按钮退出？点击空白区域退出是否更，如下方的dribble，点击上方黑色空白区域即可退出，而无相关经验的用户也可以在右上角看到关闭icon的暗示线索。

场景与业务背景：详细了解当前需求的业务背景与场景，进一步概览整体业务背景，即兼顾其他可能性的业务场景。如我设计的B端系统包括办公室类工作场景，同时也包括站立、远距离观看屏幕的工作场景，这将涉及到信息能否直观清晰的被传达、获取。当前需求的业务是主流场景？可向上向下兼顾大部分同系统的其他业务场景？还是无法兼顾而需要同时列出更多场景来制定通用规则？以我所设计的B端系统为例，较高频的出现在弹窗下存在下一级操作或展示页面的场景，因此我考虑在工作空闲时输出一份弹窗场景下有纵深的下一级信息或操作的解决方案，并将其作为产品相同场景的应用解决方案。

视觉合规性：保证主要信息的对比度，清晰度，保证所有信息传递和展示时的节奏和梯度优先级。从字号到字重再到段落行高间距等，从弹窗中ICON的样式选择，到Icon语义清晰度等。

...

如果进一步思考，其实可以思考more and more。你会发现，从基础的结构涉及的栅格，到基础的视觉合规性涉及到的字体设计、icon设计。再到交互涉及到的典型设计单元，通用交互模型范式等，在设计一项内容前，我们有很多的思考空间，或者称之为思考机会点更为合适。将充足的思考纳入设计过程后，初期设计时间线被拉长，但长远来看避免了思虑不足引发的风险与反复更改的成本，合理的设计预测与分析则向上向下兼容未来场景，提高设计输出物的通用性与成效，即所谓的磨刀不误砍柴工。

那么这样成熟（我自己其实是伪成熟，还不够完善和系统）的思考过程，分析过程是如何学习或者说培养的？

二：设计思考的三个阶段

这其实是我接下来要讲的正题，我将设计中的思考分为三个阶段，无思考——主动思考——被动思考，这是一个初期线性发展，后期循环迭代的过程。其实我定义这一套思考阶段的分级是在短暂的灵感爆发后立即输出的，来源于我对自己2年间从一个非科班新手到如今高级体验设计师思考逻辑的发展变化的回顾。我发现其确实有迹可循，在地铁上很兴奋很兴奋的头脑沸腾过程中快速记录下大纲，到了工位立即记录并输出。 

无思考阶段

大意为，新手设计师，或没有刻意练习、思考、总结的习惯的设计师，最初由于没有通用的设计经验、没有相关成熟设计模型或组件与设计单元的使用和设计经验，因此设计一个新内容实际为从0开始，此时设计师可能会单凭直觉 随意设计，例如设计弹窗就随便画一个矩形，然后随机调整。或者使用成熟的组件系统，直接套用，纯粹执行。这就是处于 0思考阶段，凭直觉设计（注意和直觉性设计区分开，直觉性设计是从用户的维度定义的，即用户可以单凭直觉理解设计，这也是我们常说的可供性"affordance"原理）

主动思考阶段

而主动思考阶段的起点是，随着设计师接触的工作范围、工作内容、合作对象的扩大或增加，及接触同类工种（其他设计师、设计leader）的输出思考过程、输出物、行为模式、思维模型等等设计价值观与执行模式等信息后。 

前者会使新手设计师（或没有有意识的反思、总结沉淀的初中级设计师，或刚刚转换行业的各等级设计师）逐渐暴露并意识到自己的问题，大概率可能涉及到输出物质量、规范性、平台或行业壁垒造成的经验缺失等。

后者则是一个对比与发现的过程，即接触到更优质的输出物，更合规的输出过程，更的设计流程、协作流程等等。可能是被动接受的，如leader或同事的分享，及日常工作中为提高团队整体效率而被灌输的新的工作方法和进入新公司要强制适应的新的工作流，也可能是主动接受，如发现同事设计到输出的质量和效率等远优于自身而自发去了解，学习。

因此，在主动思考阶段，会有一个从发现问题到解决问题的过程，是不是和设计本身的职能很像，而在这个过程中，设计师自身就是被设计的对象，即如何解决自己身上存在的问题？如何使自己变得更完善更优秀？

你可以回顾下，在你初入行业时，最热情的接纳各种信息、知识、经验的阶段，你当时的状态是什么样的？概括来讲就是遇到感兴趣的内容-发现自己在此间的不足-了解学习并掌握。从基础的某个视觉效果的实现方式，到某个设计方法论、某个解决典型问题的交互设计等。

主动思考阶段与兴趣（对某个领域的衷情）、个人行为习惯（自学习惯，求知与自发研究的习惯）、周边环境等因素有关。因此核心是与本人、其他个人（同事，设计圈关系人）、团队相关。某些人天生对未知事物、信息及技能有浓厚的兴趣，所以会自发的广泛接收各种新的信息，并在这个过程中养成思考总结的习惯（比如在下），同理，个人在大学期间，甚至成长过程中有养成良好的自学习惯，有订立目标并逐步实现的习惯，他们会长期甚至一直处于主动思考阶段。另一种情况则是周边环境，社交关系人对你所产生的主动及被动的影响，如leader布置课题及学习计划，同事，好友，行业人员的协作共创活动，分享会等。

所以，主动思考阶段应该是优秀设计师需要长期自发维持的一个设计状态，持续的发现身边的问题，发现自身的不足，发现新内容新趋势新动态。并在发现新的内容并与自身能力模型对比的过程中，发现不足并持续思考和输入信息，反思，输入，巩固，沉淀。是一个升级打怪的过程更是一个知识资本的原始积累阶段，与无思考阶段相比，由于它是一个主动，刻意学习的过程，因此积累知识的效率要远远高于懵懂状态的初级设计师。（这应该也能解释为什么一些没有进入主动思考阶段的设计师，工作四五年却被一些一两年的新人设计师赶超）。

从新人设计师“无思考”阶段到主动思考阶段关系到一个设计师能否完成初级到中级的进阶。主要差别则是输出物的不确定性（初级）与输出质量趋于稳定并持续迭代提升（中级）。

这个思考阶段线性过程的第一个门槛，虽然是初中级设计师面临的门槛，却是能持续影响设计师整个设计生涯的关键转型点，奇异点。就像先赚它一个亿中所谓的一个亿启动资金。跨过这个门槛，设计师会迎来第一个爆发期，中级设计师我的理解是下限清晰，上限无穷。即在主动思考阶段，设计师可以将个人设计能力，从技巧到方法推动到一个较高上限的地步，概括定义———拥有在从事行业领域内输出高质量设计方案的能力。

如何跨过新手期，从无思考到主动思考？

刻意练习与学习

最优解是从兴趣到发现，即培养兴趣，调动兴趣去开展某个内容或者技能的研究学习，并逐步掌握为自身技能树的一部分。次解则是从目标到强制规划自我再到研究学习和逐步掌握。以兴趣为老师是最易收获的方法，但确定目标并刻意学习才是大多数人要走的路。完美解则是兴趣驱动同时严格规划。在我作为非科班设计师开始自学到工作的早期，每天固定不变的是大量浏览作品，大量阅读文章，大量练习技巧，后面逐渐选择性浏览，选择性阅读，选择性练习。这期间发生了什么？是综合当前工作场景和设计趋势等各方条件后的缜密思考所做的决策，也就是一个反思的过程，从发散到收束，以提高在当前工作场景下的个人能力，集中精力在核心能力的提升上。

也是这种能力使我快速B端转型C端，使我在上手新软件Figma后由一个新手使用者快速蜕变为讲师、分享输出者。刻意练习和学习的能力与倾向，应当在主动思考阶段养成为习惯。

What——How——Why

从浅层思考到深层思考，最简单的就是所谓的黄金圈法则。What仅仅让你了解到所见是什么,能提高你的审美，积累设计相关的表层信息。而当你思考How时，你将掌握如何实现该效果的能力。再进一步，当你开始思考Why时，你终于探寻到设计的本质，该设计是在遇到了一个什么设计课题、问题的基础上提出的，解决了什么问题，如何解决的，有没有更优解？目前的解法能否纳入自己的知识库？

T型构建能力模型

T型中纵深为你所对应的领域、行业、业务强关联的能力。 以UIUX为例，其中又以基础UI界面输出能力为例。

视觉：布局结构、栅格、字体、配色、间距、ICON及插画绘制、对应平台尺寸规范...

交互：信息架构、业务梳理、导航设计、流程设计、原型设计、交互演绎

业务：当前从事行业、细分领域、细分到业务的理解程度，细分需求的业务背景的理解程度

横向为拓展能力，通用能力如经常讲的共情能力，沟通能力，协作能力，逻辑思维能力，复盘输出能力等等。除此之外还有特殊能力，比如UI UX以插画 ，3D作为特殊能力项。

关注环境

在最初定义主动思考阶段时，我就讲过个人觉醒主动思考的过程中，他人和环境的影响因素十分关键，因为这是一个发现不足然后去解决问题的过程。整体环境如整个大的设计团队，及细分的每个设计组，从小环境到大环境都有相当多的团队沉淀和个人沉淀可以供你吸收成长。如我们设计团队定期举办的月度会议包含超高质量的分享，公共Drive保存有设计团队成立来的所有设计输出积淀。再如你的设计小组的定期分享，以及你身边拥有个人特长能力的同事们，关注优秀的内容，优秀的解决问题的思路，身边就是老师，万物都是书。例如我从C端转型B端后，在一两个月内快速融入团队，期间从不同的同事身上学到了时间管理（正经的）、项目管理、规范体系的制定等特长能力，而我给团队成员的反馈是智能组件系统的制定方法同时搭建了一套常用智能组件，大大提升了复用界面的设计效率，至少百分五十以上。没有对应的环境和社会关系人，靠自己闷头苦学很难有这样的效果 。

善用工具

这里专指记录，输出类工具，例如印象笔记。从旧的设计过程中获得收获与经验的核心在于复盘。忌讳对所知和所得模棱两可，因此需要在记录，总结的复盘过程中真正巩固从设计思考和实践中获得的反馈，并进一步加深为自身的持续性积淀。没有复盘过的设计师可能不会意识到，你的每一个需求设计经过一次复盘后都有可能发现新的问题，思虑不足的点或者仍然未解决的痛点等，当然也很可能发现能持续复用的思路、设计模块等优质资源。

除了笔记类工具，公开分享甚至私人交流都可以作为复盘工具，在这个过程中你会回顾自己的设计流程和思考过程，并在言辞交锋间发掘新的机会点。因此当你完成一次自我感觉良好的需求设计乃至小的版本迭代后，尝试着与身边的工具人同事沟通，尝试在设计小组内分享，在筹备分享与交流思路时，对于该需求的设计思路便跃然而纸上了。

被动思考阶段

被动思考阶段有两个核心特征，这里的被动不是指倾向性，而是指无意识且自动处理信息的状态。可以理解为游戏中的被动技能。

第一个特征，即达到在主动思考的基础上，持续积累和迭代知识库的信息，然后将设计规范，典型范式，通用经验思考模型等内化后的阶段。

何谓内化，抓起超烫的茶杯会自动放开手，反应速度不会超过零点几秒，这就是人自我保护机制的内化，即整个过程已经不需要刻意去思考和酝酿，而是在无意识的过程中自发的做出反应，完成系统的思考并形成一个规范的方案建议。

与主动思考阶段相比，主要差别在于对已有能力的使用熟练度，调用效率，及思考的全局性。

说的通俗些，遇到一个设计问题时，处于主动思考阶段的设计师会在遇到设计问题后，从过往经验，相似解决问题的思路中筛选，寻找一个合适的解，这些解是零散的，且需要设计师主动去回忆甚至浏览历史文件来搜集。而对于被动思考阶段的设计师来讲，若是面对一个较为熟悉的设计问题，如一个弹窗设计，此时该设计的解答方案会自然而然的出现在脑海，并且存在多个方案进行对比，并且每个方案都完整全面，从业务的考量到体验的权衡，再到业务与体验的相互平衡。方案如何推进，按照经验会遇到哪些阻力，需要说服哪些利益相关者，案例如何演示，有否有设计还原类风险？如何解决等等。

因此，处于被动思考阶段的设计师能够自然并的调用个人积累的成体系的技能和经验以及执行和推进设计的流程，从输出设计到推动方案落地一气呵成，宛若天成。在没有一定思考和实践经验积累的情况下，主动思考阶段的设计师则可能需要花费成倍的时间在方案探索输出再到落地的过程上，期间遇到的典型性问题则会一点点被消化并推动设计师向被动型晋升。

第二个特征则是视野与维度，视野也就是常挂在我们口中的全链路视野，维度则指的是看待问题或方案的更高维度。这一特征使用实际案例来说明或许更易于理解，

案例1微信红包早期推广的案例

微信红包作为微信的一个核心功能，初期花费大量成本推广并成为一个现象级“产品”，作为产品设计师，底层的视觉设计师与交互设计师在产品视觉交互逻辑等方面投入较大精力，他们只需要将自己负责的需求完成，输出达标的基础方案，可能会聚焦于如何设计红包样式更易于理解，如何设计红包样式能赋予其可供性，帮助用户快速理解产品与现实中的红包的映射关系，在进一步可能要考虑不同年龄阶层对红包样式的接受度，而交互设计师可能要考虑如何缩短用户路径，使红包开启的愉悦感能够最的被用户触达。

而此时产品负责人是如何考虑该红包功能设计的？答案是通过微信病毒式传播，的绑定银行卡，为微信支付业务铺路。绑卡才是当时该产品设计的核心。这就是维度的差异，同一个产品，不同的岗位不同的身份，不同阶段的设计师看到的会是不同的维度视角，更高的维度往往意味着更长远的考虑，意味着碾压式的决策。“为支付业务奠基”与“纠结红包是否要带花纹”相比，维度视野的差距，高下立判。

案例2与设计团队负责人评审 Logo方案

上图是该提案的部分PPT，在一次品牌LOGO提案的评审过程中，我花费较多的精力去宣讲Logo的品牌理念和故事，分析图形的演化过程，同时输出多个方案用于对比。设计负责人一针见血的指出几个核心问题。

第一点，在设计过程中不要过早的给图形设计融入颜色，颜色是第二层信息会干扰设计过程，当然也会干扰需求方的理解过程。一次只阐述一件事情，设计图形，讲解图形就使用灰度模式。

第二点，给群体及普通需求方宣讲可以使用较多包装或附上比较详细的设计思路，而需要给企业级Boss过稿时则切记简化一切过程，开门见山，直接铺陈LOGO图形，对不同利益相关者采用不同的策略。

第三点，该品牌LOGO的单独设计输出物看起来不错，但需要置于我们跨国的多个产品品牌构成的总的品牌体系中，判断其品牌一致性等问题，一致的产品品牌效果不仅能阐释品牌归属，同时也能很大程度上降低推广成本。作为设计师，既要细化到每一像素，又要高屋建瓴从全局层面考虑问题。

当你收到的反馈或建议都是你从来没有考虑到的问题和想法时，这有可能就是维度的差异。

资源3：周陟 《设计师如何解决全过程问题》

周陟分享的《设计师如何解决全过程问题》是一个全局性与高纬度思考的典型案例。该分享详细的阐述了设计师如何从产品的底层框架，结合业务的思考，市场趋势、历史数据对比分析，定义核心设计问题并探索设计方案的过程。

其中即有低维度的设计师底层能力方面的阐述，如从产品用户体验五个层面的设计思考（战略层、范围层、结构层、框架层、视觉层）到具体的可读性、视觉舒适度等具体的设计问题。更有高纬度的市场销售趋势、不同手机厂商间的用户流失流转情况、市占率、信任度等业务层思考。从上帝视角，全览产品各个阶段的场景及问题，并在对比分析中聚焦核心问题，探索方案去持续解决。 

《设计师如何解决全过程问题》资源链接

我们可以用一个超级朴实的方式来阐述主动思考阶段和被动思考阶段的差异。当一个设计师处于主动思考阶段，你可以把他置于他所熟悉的设计领域，他将会输出高质量的设计物，能够较好的解决当前遇到的设计问题，体验问题。

而一个被动思考阶段的设计师，你可以把他置于有一定相关性的各个设计领域（比如互联网方向的设计不能被置于广告方向），他会在较短的时间内理解不同领域的特征和需求，并输出高质量的解决方案，且能够兼顾各个利益相关者，主动推动产品实现进度，并提前规避各类问题。这其中的差别在于，是否有自己沉淀的一套解决问题的方法和过程，是否将通用设计经验系统化，是否有足够广阔的视野及更高的维度。这也映射了你是一名所谓的UI设计师，还是一名高级体验设计师，前者限制在一个领域内，后者已然破圈。 

如何从主动思考阶段跨越到被动思考阶段

在体验设计的领域，主动思考阶段的设计师与被动思考阶段的设计师，在单纯的设计能力上，其实没有太大的差距，即输出物本身没有太大差距。都能够快速输出达标的设计方案，解决大部分体验类问题。那么关键差距提现在哪里？

其一是从设计到落地的总的效率。主动思考阶段的设计师在整个设计过程中需要频繁的遇到问题，并陷入陷阱，然后持续的纠正方案，一步步推进，踩着荆棘摸到最终方案所在的那块石头。而被动思考阶段的设计师只需要在知识库中的成熟方案中选择一条更加应景的路，多个方案已经摆在那里，而设计师只需要去考虑低维到高维的一系列影响因素，从基础体验，用户习惯，再到业务和战略上的布局，最终选择全局视野下最正确的方案。

第二点差距在于可能性，被动思考阶段的设计师有精力和能力去思考如何把方案做到超标准，超出需求本身的要求，超出利益相关者的期待（如需求方和开发人员）。我们经常会讲行业标准这个词，作为一个设计方案的基础判断标准，但行业标准永远不是上限。微信的撤回功能，从仅撤回到撤回后可编辑就是一次体验上的超标方案。

第三点则是打通上下游的能力，即涉及到上游的需求理解与转化，详细的设计项目还会涉及到用研类信息的接受与转化，下游则涉及到开发还原的质量与效率问题。在有意识的关注设计全流程和生命周期的情况下，被动思考阶段的设计师可以更轻松的管理设计并反馈到整个项目的开发周期上。

想要从主动思考阶段跨越到被动思考阶段，我总结以下三个建议。

从输入到梳理

首先是核心的底层设计能力方面，表面上是基础能力与通用能力的的刻意学习锻炼，而关键在于对知识体系的梳理。在我们初入职场逐渐积累设计经验的过程中，一些典型的设计过程，流程，针对某个领域甚至模块的典型解决方案，将其拆解汇总然后梳理分类，不论使用印象笔记等笔记产品，还是思维导图等脑图类产品，都能够帮你实现这个目的。

忍受立即获得解决方案的诱惑

其次，在真正开始做项目时，主动思考，刻意将个人知识库梳理的信息与项目需求进行对照，主动回忆和验证积累的方案，尽可能多的罗列场景，罗列可能性，不要被第一时间想到的方案所诱惑而止于此。设计师在遇到一个设计问题后，会第一时间想到的方案往往是最普通，未经思考的初步方案，但往往该方案可以一定程度上解决当前的问题。此时设计师需要强制自己从最简单的方案中脱离，进一步思考，并大量的举例、演绎，探索更多机会点，调动脑海中更多可能性的方案。每当想要就此停下时，反问自己，我能否做的更好，是否有更好的方案可以解决这个问题。

视野和维度来源于广泛阅读、案例、及复盘

被动思考阶段的设计师横跨了高级体验设计师到设计专家这个范围。抵达这个阶段的设计师视野将拓展至整个企业机构，而不局限于设计团队的个人的视野。除了强大的解决设计问题的能力，相较于普通设计师，他们往往有更高的思考维度，全局性的设计视野，此类中后设计生命周期中的经验往往需要通过阅读、项目实践等多个方面持续输入，然后复盘并沉淀为自己的经验。

因此这要求设计师广泛的阅读各类设计项目总结，参考实际案例，并在真实的项目中持续计划、尝试、验证，然后复盘。需要脱离设计师基础能力层面的视野，更多的关注解决问题的思路与流程，最终掌握的设计思路或能力可以称之为通用性设计解决能力。 

当然，上面所讲的都是我从个人思考方式的转变中总结出来的经验，其目的是分享设计师应该如何思考？不同阶段应该聚焦于哪些问题领域才能最大化提升思考方式的进阶速度等问题，而不是在讲设计师如何从初级进阶到高级，进阶到体验专家（非设计师位阶的进阶）。因为不同企业对不同位阶、不同专供方向的设计师有不同的具体要求，比如设计leader可能更倾向于业务的理解与把控度，设计推进，研发流程中不同团队成员间的沟通合作等能力 。

如果有关于此的疑问，我只能以我的理解解答，不论是什么位置的设计师，判断其位置层次的标准必然是由上层的企业来制定的，而企业制定规则的出发点源于利益本身，换言之，你能获得的位置和你能够为团队和企业贡献的利益正相关，所以我们很容易理解，设计师的职业后期或者用于解决超级复杂的设计问题， 以对应的价值映衬其收入，偏具体设计能力层面，或者用于承担全局性企业需求，如带领设计团队支撑某个业务线，偏业务理解和统筹方面。

从线性流程到循环往复的迭代过程

我们回顾一个努力的设计打工仔的职业生涯，首先，一个新手设计师从纯粹执行的无思考阶段，进阶到主动思考阶段，当他的基础设计能力不断进阶后，开始拓展视野，思考业务，并在大量的项目锻炼中形成自己的一套成熟的设计方法论，从设计思考流程到具体的设计流程，从而进阶到被动思考阶段。但这是一个理想化的描述，真实情况是，设计师会在这三个阶段中循环往复，而甚至有些设计师可能会在前两个阶段循环往复。

人都有惰性，你我都如此。在主动设计思考阶段，因为一次小长假，因为种种原因，我们可能会退步回无思考的阶段。持续性学习是一件 令人兴奋的事，也是一件需要莫大毅力的事情。技巧经验会随着时间消磨，这是设计师需要警惕的问题，因为这个行业就是如此，我们只能变化，只能持续不断的学习。

而当将经验与成体系的思考范式内化后，设计师会养成核心的通用设计解决问题的能力。此时，设计师期去接触一个新的领域，不再需要从0开始，而是可以使用自己积累的通用设计能力，来指导和规范化新的设计领域的需求，并快速融入该领域。而新的领域的经验与视野会被纳入你的整体设计理解中。

从主动思考，到经验内化，不断脱离舒适区，纳入新的设计领域、新的视野维度，在这个过程中使个人的通用设计能力螺旋进步。

 

最佳启动：消灭设计的不确定性

我知道，我的读者中有很大一批人都处于设计能力良莠不齐，没有系统的设计思路与设计流程，介于初中级设计师之间的状态。而当今国内的设计领域也是如此，初中级别的设计师完全饱和，而企业对高级体验设计师又求而不得，这种人才断层既有培训爆火下的积弊，也和设计门槛与岗位收益相关，大环境无法改变，能改变的只有自身。

在这里，我总结一个更简单的设计思路，只要你按照该方法去执行和反思，应该会有很大的收获。即从今天开始，对你所接到的每个设计需求都提出唯一一个标准——消灭不确定性。现在停下来询问自己，你接到的每个需求，对于你输出的设计结果，你认为其最终效果是确定的吗？换言之，你认为你的设计真的解决了该需求的问题了吗？

你只需要把你个需求设计的思考分为设计前和设计后。

设计前请思考，我如何设计这个需求能确定以及肯定的解决这个问题，没思考清楚前不要动手设计，想到第一个方案后也不要动手设计，继续思考，延迟设计决策。

如果你乍一想到的方案自己都认为模棱两可，那不要执行设计。此时发挥主观能动性去思考，我如何能够获得相关信息，来辅助我做出这个设计决策，我需要去参考一些竞品？我需要列出目前存在的疑问点，或者我无法解决的问题点去询问设计专家设计leader？或者我把场景，整体的体验流、用户操作流都列出来，然后继续埋头探索方案？

千万千万不要在方案还没想清楚前就开始设计，这将输出无意义的方案，且浪费大量时间，千万千万不要在想到第一个方案后立即开始设计，这将不会给你带来任何进步，以后遇到相同场景你也仅有一个可选方案，千万千万不要忽略竞品忽略他人闭门造车。

千万千万试着思考尽可能多的方案，乃至输出多个方案（仅指体验设计类，而不是视觉设计）。作为体验设计师，必须锻炼的技能是方案演绎能力，在脑海中演绎可能的方案，如果有精力则可以借助工具甚至把演绎过程记录输出。  如下方我进行的一个需求的方案演绎与思考。

设计前保证方案确定性，第一关要能够经受自己的逻辑考验，当你探索多个方案后最终确定了一个符合业务场景，同时体验良好的方案，作为设计师自己给该方案打上一个“确定”的标签，此时再去执行并输出，而这过程中的思路，从纠结到决策都是最终设计输出的关键证明，既能提高设计说服力，又能锻炼个人能力，而这正是初级设计师容易忽略的部分。

设计后的确定性则是指，产品还原与产品验证方面。产品还原度是设计稿的视觉确定性，确保开发还原的线上效果与设计一致，这不仅仅要靠开发的努力，更要有设计师的具体标注说明的辅助。验证则是产品上线后的必要环节，不论是预先根据业务指标设定埋点，还是设计师通过各种途径获得用户反馈，最终都要保证你所设计的产品体验的确定性是达标的，确定解决了需求提到的问题，确定能满足用户需求。若没有，则重复这个过程，重新思考然后设计。

作为设计师，应该理解自己也能作为设计对象。在我看来，设计师就是遇到一个问题解决一个问题，遇到两个解决两个，直到面前再也没有问题。所以当不清楚自己该如何设计，下一步该如何做时？你只需要思考，把解决当前的迷惑作为一个需求，去思考，深入思考，列出所有可能性，不管是百度还是询问同事查阅资料，总归在思考后，你会有所收获。 

结语

最后，我们一直在思考，在定义，到底什么是设计？

我自己一直遵循的理念是——设计解决问题，形式追随功能。

而有人说设计是做选择（决策），有人说设计是永远做正确的事情。

事实上这些说法都有其正确性，也都有各自的评价标准，因为场景，趋势，市场各种因素都在发展变化， 设计最终要兼顾场景兼顾各种利益相关者，在正确的时间做正确的选择并最终做到正确的事情。

解决问题有多个方案 ，设计师需要在其中做出抉择，选择最佳方案，最佳方案如何判断的？对当下场景，对主流用户，对更多利益相关者来讲是更正确的选择。那它就是最终方案。

当设计被置于真实的环境，真实的市场下 实际上其倾向性和评价标准一直在发展变化从最初重视觉到重体验再到重商业。设计倾向性一直在变就像设计潮流，唯一不变的是设计师面对复杂的场景和问题时一如既往的优雅的解决问题的思路，并帮助设计师让世界变的更美好。

文章来源：UI中国     作者：AI-玲玲

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

降本增效一直是为B端赋能的首要宗旨，那么我们该如何从设设层面为用户提高表单录入的效率呢？

文章来源：UI中国     作者：AI-玲玲

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

大家好，今天给大家带来的是配色干货系列之第三期！！超级干货！！

前两期地址传送门：

1）用我这套方法，配出来的颜色很难不高级！

2）我常用的3个配色方法，搞定专家级配色！

前面两期，主要分享审美的培养与提升、配色的技巧与习惯。本篇更为实在，主要分析有哪些经典的万金油配色组合，满足日常工作使用。

看完这篇文章，相信你对色彩的掌握，能更深一步~~干货建议提前收藏！喜欢记得给咱们公众号添加星标喔~~

1）经典搭配-黄配黑 

色板 颜色组合 

Yellow & Black

黄配黑的色系非常经典耐看，普适度也很广。我在公众号里写的一些文章，也经常采用这套配色。

这套黄与黑的组合很适合一些生活、社区、人文、情感等场景进行使用，情绪温和。如果你的设计，会被频繁的在这些场景里进行使用，那么不妨使用一下这套黄黑配色试试看。

比如以下这些案例：

这里也给出我经常使用的两组黄黑色板，一组更为活泼鲜艳，更具娱乐化。一组更为内敛，充满文化气息。

推荐组合色板①：

推荐组合色板②：

2）科技搭配-蓝黑白 

色板 颜色组合 

Blue & Black

这套色彩就不多说了，蓝色可以说是我非常喜欢的颜色之一了。从咱们公众号的logo，还有日常发文的封面，相信大家就能感受到。

蓝黑白搭配，可以说颜色是百看不腻，并且蓝色色相偏冷，没那么多情绪倾向，所以更能够让人心平气和的阅读信息，提升效率。因此也经常被用到科技、数据、社交、工具等应用场景。

比如以下几组案例：

关于蓝黑白，我也给大家推荐两组我很喜欢的色号组合。一组更为明亮，显得年轻活泼些，而另外一组则更加深沉商务，更为内敛。

推荐组合色板③：

推荐组合色板④：

3）CP组合-红蓝配 

色板 颜色组合 

Red & Blue

这套颜色组合，在近几年可以说是非常流行了。颜色比较浅的，有经典的马卡龙色组合，被广泛运用到年轻社交等工具场景。而颜色重点的，直播娱乐等秀场平台，也都大量可见其身影。

红蓝搭配，颜色的相撞导致色彩充满了热情与朝气，社交娱乐化产品的场景，非常适合这套色彩组合。

比如下面这些案例：

这里也给大家分享两套红蓝搭配的色板，一套略显温柔，另外一套则热情如火。

推荐组合色板⑤：

推荐组合色板⑥：

4）经典国潮-赤金组合 

色板 颜色组合 

Yellow & Black

这几年国潮风格也越来越受到大众所喜爱，而在国潮色彩的搭配中，赤色与金色的搭配。一方面红色中国味特色浓厚，而搭配上高档的金色，瞬间浓厚的精致国民画风，就出来了。

比如每年的集五福，就是非常经典的赤金组合，精致的同时，还非常接地气儿。

关于赤金，我也从潘通色里挑选出了一组很经典高档的色彩组合，色板色号也分享给大家。

推荐组合色板⑦：

推荐组合色板⑧：

5）尊显高贵-黑金色 

色板 颜色组合 

Yellow & Black

黑金组合相比其它颜色更显高贵，在很多知名的APP里面，也都是能看得到，比如淘宝的88vip，京东金融的小金库。这套色彩组合往往代表着商务、尊贵，高级，既内敛又隐蔽，通常被用到各类会员、金融等尊贵体系中。

比如以下这些案例

关于黑金里面的金色，也分为两种，一种颜色更为纯金，还有种偏向于玫瑰金，玫瑰金的色彩相对要更温和一些，没那么冰冷。这两套色板，我都分享给大家啦~~

推荐组合色板⑨：

推荐组合色板⑩：

6）其它色彩组合 

色板 颜色组合资源下载 

Yellow & Black

除了我上面分享的这五套经典配色，还有很多其它的色彩组合，也都非常优秀好看，比如上次分享的这些：

这段时间的积累收集，又更新了下面这些新色板。

还有很多，就不一一展示了。方便大家收藏，我把这些色彩组合的图片+色板文件，都进行了打包，方便大家直接借鉴这些色彩。

文章来源：UI中国     作者：UX小学

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

色彩是影响用户最简单和最重要的一个因素。研究表明，人们只需 90 秒就能对一种产品做出下意识的判断，而其中高达 60%以上的判断仅基于颜色。因此，选择合适的颜色对于改进产品的转换率和提高产品的可用性是非常有用的。在没有文字的场景中，颜色的搭配非常重要。如何配色可以使设计感更强，如何配色更好看，哪些配色不好看，解决这些问题就需要学习色彩理论。

色彩基础知识

我们身处在一个多彩的世界中，物体的不同颜色，会让我们产生不同的情绪。色彩，即光从物体反射到人的眼睛所引起的一种视觉心理感受，按字面含义上理解可分为色和彩。「色」是指人对进入眼睛的光传至大脑时所产生的感觉，「彩」则指多色的意思，是人对光变化的理解。色彩的基本理论虽然老生常谈，但在 UI 设计中具体怎么运用，还有关于色彩的性格和含义，都是我们需要了解的。因此在学习 UI 配色之前我们先来了解色彩的基础知识。

1. 色彩常识

原色

所有的色彩都源自“红黄蓝”三种原色，很多人误以为三原色是“红绿蓝”，其实不是。红绿蓝是显示上的三原色，计算机屏幕的显示是色光三原色（红 red，绿 green，蓝 blue）即 RGB 组成的，每一个像素的颜色都用三原色值来显示，与美术上的三原色不一样。原色是其他颜色调配不出来的。把原色相互混合，可以调和出其他种颜色。

虽然 RGB 在显示设备上表现良好，但并不够人性化。因为人们判断颜色，往往是通过：这是什么颜色？是不是太艳了？是太亮了还是太暗了？这样的感官维度，而很难通过红绿蓝的亮度层级去判断。所以人们后来基于 RGB 衍生出了 HSB 模式和 HSL 模式。

印刷三原色为青（Cyan)、品红（Magenta)、黄（Yellow)。是减色模式，混合为深灰色，并不能产生黑，所以在印刷时加上黑色油墨，才能产生纯正的黑，就是 CMYK 颜色模式。

间色

又叫“二次色”。它是由三原色两两混合调配出来的颜色。红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫“三间色”。在调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化。

复色

也叫“复合色”。复色是用原色与间色相调或用间色与间色相调而成的“三次色”复色是最丰富的色彩家族，千变万化，丰富异常，复色包括了除原色和间色以外的所有颜色。例如，黄色与橙色混合得到橙黄，红色与紫色混合得到紫红。

冷暖色

最后由三种原色、三种间色和六种复色组成的系统就称为十二色环，从紫色至黄绿为冷色，黄色至紫色为暖色。冷色令人联想到天空、海洋、冰雪等，产生寒冷、理智、宁静等感觉；暖色则令人联想到太阳、火焰、热血等，产生温暖、热烈、危险等感觉。

虽然可以用「冷」、「暖」色系来划分色彩，但配色的变化却有千种万种。借着色彩的组合方式，从「非常冷」到「凉爽」到「暖和」再到「炎热」都可以用不同的配色组来表现色彩的印象。

• 知识点：

不同的色轮由不同的人发明，他们对于色彩的见解不一样，因此创建出来的色轮用途也不一样。比如：伊顿色轮又被称之为美术三原色，是由颜料的三原色混合叠加而成；RGB 色轮主要运用于电脑、手机、平板等一系列科技产品，RGB 的三原色是光的三原色；CMYK 色轮主要用于印刷领域。

2. 色彩三属性

丰富多样的颜色可以分成两大类，即有彩色系和无彩色系。彩色系的颜色具有三个基本特征：色相、明度和饱和度，在色彩学上被称为色彩三大要素或色彩三属性。

色相（Hue）

色相是自然状态下的色彩，是色彩的相貌。简言之，色环上没有改变明暗的色彩。色相是色彩的首要特征，是区别各种不同色彩的标准。例如红、橙、黄、绿、青、蓝、紫就是其中不同的基本色相。黑色是没有色相的中性色。不同的色相在人眼中的差异是色相本身对应光的波长不同而造成的。红色波长最长，紫色的波长最短。

饱和度（Saturation）

饱和度是色彩的纯度，他表示颜色中所含有色成分的比例。增加饱和度，色彩会变得更强烈、鲜艳生动；降低饱和度，颜色中灰色成分越大，色彩会变得暗淡乏味。当一种颜色掺入黑、白或其他色彩时，纯度就产生了变化，当掺入的颜色达到很大的比例时，人的眼睛就无法感知出来了。

饱和度为 0 的颜色为无彩色，就是黑、白、灰。数值越大，颜色中的灰色越少，颜色越鲜艳。饱和度高的地方给人感觉靠近，而饱和度低的地方则给人的感觉很遥远。高饱和度和低饱和度的色彩都给人坚硬的感觉。

明度（Brightness）

明度，指色彩的明暗度，反应的是色彩的深浅变化。以自然界为例，一些物体在早晨和晚上的色彩不同。如树木和山脉，早晨色调浅；傍晚因为光线减少了，色调变得偏暗。距光源越近的物体，明度越高，反之，则明度越暗。

明度在 UI 设计中扮演重要的角色，明度运用得好，可以实现好的对比效果。明度达到 100%时，色彩就会变成白色（黑白模式下）；明度是 0%时，就会变成黑色。色彩的明度变化往往会影响到纯度，例如蓝色加入黑色以后明度降低了，同时纯度也降低了；如果蓝色加入白色则明度提高了，纯度却降低了。

3. 色彩的搭配

完整的 UI 配色应包含主色、辅助色和中灰色。主色通常与品牌色一致，辅助色一般选择与主色色调一致且能拉开层次的颜色，强调色选择与主色相对立的互补色。下面我们来学习几种常见的配色方案。

单色

单色是指某个色彩的明度变化，即在色彩上叠加 10%-90%白色或黑色得到的一组颜色。单色搭配由于彼此之间色彩相同，因此能和谐共处，但因较为朴素也就不容易引人注目，而且会给人一种单调的感觉。单色配色在色彩变化上也适合长时间阅读，颜色波动较少，比较适合沉浸式交互的界面设计。

虾米音乐就是单色搭配的最好例子，它将主色橙色用在主要功能入口、标签栏图标等所有界面的关键元素上，给人非常精致和统一的视觉体验。

如若想要在色彩变化上融入一点微妙的变化，可以尝试在色环中选用两侧相近的颜色，这样色彩层次丰富了而统一感也不会变，称之为“邻近色配色”。

邻近色

是指在色相环中相邻的两种颜色，在色相环上相距 60°，或者相隔五六个数位的两色。它可以在同一个色调中建立起丰富的质感和层次，优点是阳光、活泼、稳定、和谐但不单调，理所当然称为最安全的配色法则。邻近色色相相近，冷暖性质相近，传递的情感也较为相似。例如，红色，黄色和橙色就是一组邻近色。邻近色表现的情感多为温和稳定，没有太大的视觉冲击。

美颜相机的主色是粉色，将浅粉色和浅紫色作为辅助色，既能信息区分又和谐统一。

互补色

互补色是指在色相环上对立（180°）的两个颜色，色相环上夹角呈现一条直线，例如黄色和紫色、橙色和蓝色、红色和绿色等。互补色有着非常强烈的对比度，在颜色饱和度很高时，可以产生许多十分强烈的视觉效果，就会使这两种颜色都显得更加鲜明，也将视觉冲击力强度提升至峰值。这类配色形式优缺点和对比色很相似。常给人一种潮流、刺激、兴奋的感觉，把互补色放在一起，会给人强烈的排斥感，搭配不好会很山寨。

Airbnb 的主色为红色，界面设计中使用主色的互补色「墨绿」作为主色调，给人清晰、简洁的感觉。

分裂互补色

分裂互补色是指寻找三种颜色，其中两种互为邻近色，另一种与它们形成互补色，例如黄色和蓝色、洋红。这种搭配既能保持互补色强烈的对比及视觉上的趣味性，又能让颜色变得柔和。

36Kr 将蓝色作为主色，互补色黄色作为辅助色用在图标、标签上，再选择黄色的邻近色红色作为另一辅助色，用在不同的信息上，有助于用户区分产品信息。

对比色

指在色环上相距 120°～180°之间的两种颜色，也是两种可以明显区分的色彩，包括颜色三要素的对比、冷暖对比，彩色和消色的对比等。对比色能使色彩效果表现更明显，形式多样，极富表现力。需要注意的是，互补色一定是对比色，但是对比色不一定是互补色。因为对比色的范围更大，包括的要素更多，如冷暖对比、明度对比、纯度对比等。这类配色形式优点是视觉冲击力强烈、富有跳跃性、突出、点缀能力强，比如常用作画面中的点缀色，或与主体固有色成对比关系的背景色，用于突出主体。缺点是大面积使用比较难把控。

马蜂窝的主色是黄色，对比色蓝色作为辅色用在标签、小图标上，红色作为强调色用在价格等信息上。

对比色也不单纯是两个颜色之间的对比，而是色调之间的对比！对比色还包括：补色对比、色相对比、明度对比、饱和度对比、冷暖对比，饱和度越高对比越强烈，明度反差越大对比越强烈。

四元色搭配

四元色搭配在色环上形成了一个矩形，使用不是一对而是两对互补色。将其中的一个颜色作为主色，其余颜色作为辅色进行搭配可以得出不错的效果。

四元色是比较难以平衡的颜色，不过搭配好了会非常出彩。不信可以自己用用感受一下，尤其是使用其中一个颜色作为主色，其他的三个颜色作为辅助色的时候。

4. 色彩和光源关系

了解了色彩的基本知识，下面说说色彩和光源的关系。如果想描绘好对象的色彩，那么就必须了解对象的固有色、光源色、环境色及它们之间的关系和变化。

固有色

即物体本身的颜色。是指在光源条件下物体占主导地位的色彩，如红色的罐子、绿色的植物等。物体的固有色并不存在，在绘画过程中为了观察方便经常引入“固有色”这一概念。从实际方面来看，即使日光也是在不停地变化中，何况任何物体的色彩不仅受到投照光的影响，还会受到周围环境中各种反射光的影响。所以物体色并不是固定不变的。

光源色

物体只有在光源的照亮下才能观察到它们的色彩。光源有自然光（太阳、天光）和人造光（灯），这些光源都各自具有不同的颜色。太阳光是偏黄色暖色光，月光是偏青的冷色光，阴天则更多的是蓝灰色的天光，普通灯光是偏黄色的暖色光。光源的颜色对物体的颜色影响很大，想象一下一个置于红色光源照射下的蓝色物体会是什么颜色。

环境色

物体周围环境的颜色就是环境色。环境色对物体的影响非常大，如在红色背景下的白色物体，由于光源打到红色背景上的背景反射光也会“染”到白色物体上，因此白色物体的部分表面会蒙上一层淡红色的色彩。所以，设计师在用电脑作图时也需要考虑并想象环境色的影响。

5. 色彩空间

Lab

Lab 的全称是 CIELAB，有时候也写成 CIE L*a*b*。最突出的特点是它的生理特性，一是它包括人眼所看到的所有颜色，是目前为止色域最宽的色彩空间，二是跟人眼一样，首先看到的是明暗，其次是色彩，可以用数字化的方式描述人的视觉感应，在计算机视觉中广泛应用。

LAB 颜色空间中，L 表示亮度，取值[0-100]对应[纯黑—纯白]；A颜色表示从绿色到红色的范围，取值[-128—+127]对应[绿—洋红]；B表示从蓝色到黄色的范围，取值[-128—+127]对应[蓝-黄]，正是暖色，负是冷色。Lab颜色空间中亮度和颜色是分开的， L通道没有颜色，a通道和b通道只有颜色。不像在RGB颜色空间中，R通道、G通道、B通道每一个既包含有明度又包含有颜色。

在表达色彩范围上，最全的是 Lab 模式（其次是 RGB 模式，最窄的是 CMYK 模式），它弥补了 RGB 色彩模型和 CMYK 色彩模式色彩分布不均的不足。也就是说 Lab 模式所定义的色彩最多，且与光线及设备无关，并且处理速度与 RGB 模式同样快，比 CMYK 模式快数倍。

Hsb

HSB 和 HSV 是同一个东西，只是名称不同。在 Photoshop 拾色器上可以看到每个颜色都有一组 HSB 值，H 表示色相、S 表示纯度、B 表示明度。色相值为 0～360 度，即圆；纯度和明度值为 0～100%，因此，了解 HSB 模式的原理，就能了解色彩的本质。

当我们需要调配同色系色彩，保持色相不变，只需要改变纯度和明度即可。如下图所示的 3 种同色系绿色，他们的色相（H152）都一致，仅在纯度和明度上有所变化。

当色相和纯度都为 0 时，色彩称为中性色，也称为灰度色，即黑白灰。其中，灰不是单指某一种颜色，而是一系列从黑到白的过渡色。

灰度色多用于文字，通常一个应用中的文字不应超过 3 种灰度色。深黑用于标题、正文等主要文字；浅黑或深灰用于辅助、提示性文字；浅灰用于禁用、失效等状态文字；纯白用于深色按钮文字。

此外，灰度色由于没有任何色相，始终沉着冷静，减少对内容的视觉干扰，因此常用于界面背景色，例如 MOO 音乐的界面设计。

Hsl

HSL 色彩模式是工业界的另一种颜色标准，是通过对色相(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。在原理和表现上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（饱和度）不一样，L 和 B （明度 ）也不一样。

取一个颜色试试看，先选一个颜色 #0688F9，放入 “HSL Color Picker”，显示 HSL 数值为：H(208), S(95), L(50)，但是我们放在 Sketch 里面看一下，显示的 HSB 数值为，H(208), S(98), B(98) 。

HSL 的 H 代表的是人眼所能感知的颜色范围，这些颜色分布在一个平面的色相环上，取值范围是 0°到 360°的圆心角，每个角度可以代表一种颜色。色相值的意义在于，我们可以在不改变光感的情况下，通过旋转色相环来改变颜色。在实际应用中，我们需要记住色相环上的六大主色，用作基本参照：360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红，它们在色相环上按照 60°圆心角的间隔排列。

HSL 相比 RGB 的优势

我们来做一个基于 HSL 的调色实践。你可不可以快速说出“海棠红”所对应的 RGB 色值？如果再加一点橙色进去，把亮度提高一点，色值又是多少？想想那应该是一个介于洋红和红色之间的，性感娇艳的颜色。我们可以假定它在色相环 H 上的角度是 330°左右，饱和度较高，亮度适中，看看那是什么颜色？

em…我们想要的颜色应该再接近红色一点，让我们把色相（H）+20°到 350°，现在好多了。

通过改变色相值 H，我们实现了色相从洋红向海棠红的偏移。 大感觉接近了，但还是略微有点灰暗，我们可以通过增加饱和度（S）+15%，让这个颜色变得更鲜活，看起来更亮丽。

感觉还是差点，海棠红是属于少女的颜色，应当再嫩一点、通透一点，不会这么强烈。那可以通过增加亮度 L，+10%试试看，嗯，这才是我们想要的颜色。

同理，如果想加点橙色进去， 再亮一点，我们通过心算就大致可以确定色相环的相位和亮度值。在这里，我们需要让 H 增加 20°，L 增加 5%。

在使用 HSL 调色的过程中，不需要了解复杂的色光混合原理，这是一个自然的、感性的、易于理解的过程。相比之下，RGB 调色方式显得非常笨拙复杂、难以理解，而 HSL 是多么的友好。

• 知识点：

需要提醒一下的是，CSS 代码里支持的是 HSL，而不是 HSB。如果和前端对接时，UI 给到的是 HSB 的色值，那么最终落地的颜色效果会与设计稿有出入。Photoshop 中的 Hex 和 RGB 颜色可以直接在 CSS 文件中使用，但是 Photoshop 中的 HSB 模式颜色和 HSL 是不同的。

Yuv

YUV，是一种颜色编码方法。常使用在各个影像处理组件中。YUV 在对照片或影片编码时，考虑到人类的感知能力，允许降低色度的带宽。Y 表示明亮度（Luminance 或 Luma），也就是灰度值；U(Cb)表示色度（Chrominance）；V(Cr)表示浓度（Chroma）；通常 UV 一起描述影像色彩和饱和度，用于指定像素的颜色。

采用 YUV 色彩空间的重要性是它的亮度信号 Y 和色度信号 U、V 是分离的。如果只有 Y 信号分量而没有 U、V 信号分量，那么这样表示的图像就是黑白灰度图像（回想一下小时候看的黑白电视）。彩色电视采用 YUV 空间正是为了用亮度信号 Y 解决彩色电视机与黑白电视机的兼容问题，使黑白电视机也能接收彩色电视信号。

色彩心理学

色彩心理学是美术知识学习中非常重要的一部分。他所研究的是色彩通过对人视觉上的刺激，而引发人情感和感官上的变化，通过日常生活中人们对应用色彩的经验积累而归纳总结出人类对色彩心理上的预期感受。在生活中，色彩心理学对人们对颜色的认知有很大的影响。为什么交通信号灯用红色表示停止通行而不是绿色呢？为什么大多快餐店用红色或黄色作为品牌的主色？这都是色彩心理学的相关知识。

虽然红、蓝是受到最普遍喜爱的颜色（通过对 App Store 应用流行颜色分类统计得知）。但并不意味着这一准则可以套用在所有产品上。产品的属性是什么，用户定位是什么，要传达的产品气质是什么等等，这些都是选择应用图标的颜色时需要考虑的问题。世界上第一间 Airbnb 房间是在一条叫 Rausch street 的街上诞生的，因此 Airbnb 的主色被命名为「Rausch」的温暖颜色。在挑选主色调的时候，4 名设计师前往世界 13 个城市，只为了更好地理解 Airbnb 的理念：热情、能量和自信，这正是 Rausch 要传递的信息。除了 Rausch 以外，Airbnb 还有其它九种颜色，包括 Kazan、Beach、Tirol、Foggy 等等，它们也都是以 Airbnb 的社区街道命名的。

下面来讲解每一种颜色都各自带有什么样的性格，只有理解了颜色的性格才能正确的使用它们。

黑色

黑色代表着品质、高端、时尚、低调、权威、严肃、稳重，是一种充满质感的颜色。它是所有色彩中最有力量的，能很快吸引用户的注意力。作为一种无彩色，能让它和其他色彩百搭，黑色+金黄色，给人一种奢华精致的感觉；黑色+银灰色，则给人一种成熟稳重的感觉；黑色+红色，给人一种时尚潮流的感觉。因此黑色是一种永远流行的主要色彩。

白色

白色代表着纯洁、简单、纯真、朴素、信任、开放、雅致，白色常常被认为是“无色”，即不是色彩。单一使用白色通常不会引起任何情感，但是当白色与其他颜色配合使用时，白色能很好的衬托，大量的留白让其他元素脱颖而出。在界面设计中，作为无彩色的白色，常用于背景色，缓和各种颜色的冲突，以衬托其他色彩，提高画面明度，提高文字可读性。

灰色

灰色是代表着睿智、老实、执着、严肃、压抑、沉稳。介于黑色和白色之间，也属于无彩色，没有色相也没有纯度，只有明度的变化。它和任何颜色都能很好的搭配，也常常用于背景色或用于突出其他彩色。灰色不像黑色那么坚硬刺眼，他更有弹性，它比黑色更有深层次的力量。因此在画面中，很少出现纯黑，基本都是用深灰色来代替黑色，也可以用浅灰色来代替白色。

红色

红色代表着喜庆、热情、欢乐、斗志、奔放、自信，是一种充满能量的颜色。这是最醒目和强势的颜色，一登场即获得全场的关注，甚至能引起一些生理反应，例如心跳呼吸加快等。红色最能烘托气氛，在中国传统节日里都使用热闹的红色来装饰，因此也就不难理解每逢佳节各大电商应用活动页一片红，为的就是发冲动，引人消费。同时红色也代表了警示、告诫。所以在界面设计中常用红色的文字和按钮来警示用户慎重操作。

橙色

橙色代表着温暖、欢乐、辉煌、健康、阳光、年轻、华丽，是一种充满朝气的颜色。橙色并不像红色那样咄咄逼人，而且它烘托出的活跃气氛没有危险的感觉，反而是一种友好。因此越来越多的应用避开常见的红色和蓝色，而选择橙色的原因。

黄色

黄色代表着信心、青春、聪明、尊贵、辉煌、时尚，是一种充满活力的颜色。黄色是明度极高的颜色，其鲜亮的色调使它在众多图标阵列中显得尤为突出。尽管在警示效果上没有红色那么明显和强烈，但是还是能给人很醒目和危险的感觉（例如道路警示牌）。同时因为过于明亮，也是一种非常难以运用的颜色，性格不稳定常有偏差，和别的颜色配合使用易失去本来的性格。不过黄+黑的搭配很流行，例如站酷和美团外卖。

绿色

绿色代表着健康、生命、青春、宁静、自然、和平、安全、舒适，是一种充满希望的颜色。绿色给人无限的安全感，当情绪低落与消极时看一些绿色，能缓解我们焦躁的情绪。绿色在生活中被广泛运用，如安全出口的颜色就是绿色，但绿色的饱和度要适当控制，如高饱和度的绿色也会令人兴奋，引起注意。

青色

青色代表着坚强、古朴、活泼、清爽、柔和、优雅、希望，是一种充满灵动的颜色。青色是一种介于绿色与蓝色之间的颜色，如果无法界定一种颜色是蓝色还是绿色时，这个颜色就可以被称为青色。豆瓣的主色调是青色，很符合豆瓣小清新的气质，带给用户恬静的感受。

蓝色

蓝色代表着冷静、科技、灵性、自由、放松、未来、理智、纯净、商务，是一种充满理性的颜色。蓝色是天空的颜色，是大海的颜色。在色彩心理学的测试中发现，几乎没有人对蓝色反感。纯净的蓝色通常让人联想到海洋和天空，可以抚平内心的伤口，让人的内心感到平和，有助于人的头脑变得冷静。例如 twitter 的主色调是蓝色，在社交应用里蓝色是一种很安全的颜色，高纯度的颜色传递了信赖、年轻和沟通的氛围。

紫色

紫色代表着高贵、浪漫、优雅、性感、幸运、梦幻、时尚、创造性，是一种充满神秘的颜色。是小孩子和有创造力的人十分喜欢的颜色。紫色的光波最短，在自然界中较少见到，所以被引申为象征高贵的色彩。紫色的明度在所有有彩色的颜色中是的。与不同的颜色结合会展现出不同的风格特色。紫+粉常用于女性化的产品调性，黄色是紫色的对比色。

色彩对用户体验的影响

当我们讨论色彩的时候，聊的更多的是色彩的搭配。虽然有些设计师认为有些色彩是一些纯粹的美学上的选择，但是实际上，色彩对于用户的心理和行为的影响相对更深，最终会反映在用户体验和行为反馈上。

当然，色彩理论是一个相对复杂的主题。从用户体验的角度上来说，色彩所涉及到的远不是配色方案这一个维度。通常，我们聊得最多的是不同色彩所产生的心理效应，以及多色彩搭配时，相互之间的影响和可访问性上的问题。设计师可以将色彩更好地运用到设计中，而无需重新考虑整个过程。一旦设计师掌握了基础知识，色彩理论中最有意义的部分之一就是学习将更多意想不到的色彩融入他们的设计中。

1. 色彩心理学和用户体验紧密关联

界面颜色的情感影响不容忽视。尽管有些颜色在 Ui 设计中是“通用的”（例如，黑色，白色和灰色，实际上几乎所有好的设计中都使用了其中的至少一种），但它们结合使用的颜色可能会对体验设计产生巨大影响。当然，颜色的使用方式也会对颜色的感知产生巨大影响。以蓝色为例，在简约的布局当中，大面积使用蓝色作为主色调，和在大面积白底上使用很小的一抹蓝色用来强调 CTA 按钮，所带来体验是截然不同的。

尊重文化差异

人类对于色彩都有着共通的认知，但不同国家对于色彩赋予了不同的含义。红色在中国象征着喜庆、财富和爱情，而在西方国家被赋予了流血、牺牲、暴力和激进的文化意义，贬义的味道更重一些。而白色与红色相反，白色在中国代表了死亡、反动和投降，以白色为主的设计常常会被视之为过于「素」，认为不够吉利。而西方国家却认为白色高雅、纯洁和幸运，因此要根据不同的文化背景，使用不同的色彩，才能更好地降低被误解的风险。

另外一方面，随着现代主义运动的普及，白色也拥有了更加现代的特征。在日本，白色甚至和当地文化结合，延伸出更加细腻独特的精神特质，随着日本战后设计领域的发展和崛起，白色在这一地区的含义则更加丰厚。原研哉在《白》一书当中，针对白色的含义和特征进行了非常深入的探讨，之后的《Subtle》一书当中，虽是围绕纸来探讨微妙的体验，但是也没少提及白色本身的特征。

例如股票交易市场，在国际股票市场通常是绿涨红跌，这是因为红色在西方国家代表着财政赤字，绿色代表着财富；而在中国正好相反是红涨绿跌，这是因为在中国红色象征着财富。

设计师必须根据产品的目标受众来审视其调色板的文化含义，这一点很重要。如果产品要面向全球受众，请确保在使用的颜色和图像之间取得平衡，以防止负面的文化内涵。如果产品主要只针对特定文化，则设计师可以不用太关心所选调色板在其他文化中可能产生的影响。

历史对配色的影响

时间变化对于配色所带来的影响不仅仅如此。比如中日两国在色彩使用上，还存在一个非常典型的差异，历史上日本在一个很长的周期内是作为中国的属国所存在的，这也使得中国自古以来崇尚饱和度较高的正色，而日本则大多使用饱和度偏低的间色，这一特征可以从两国的传统色上体现出来：

△ 中国传统色：https://color.uisdc.com/

△ 日本传统色：https://color.uisdc.com/jp.html

性别误区

或许天生如此，女性不喜欢灰色、棕色和橙色。她们钟爱蓝色、紫色和绿色。而男性不喜欢紫色、棕色和橙色。男性喜欢蓝色、绿色和黑色。只要记住，当你的产品目标用户群是男性时，选择能传达男性气概的色彩，想象下你把运动类应用的界面使用女性色彩，结果可想而知。

△ 男女最喜欢的颜色

△ 男女最不喜欢的颜色

3. 针对色盲用户群体的设计

你有没有想过你的 APP 使用人群中会有视力障碍者？

当人们谈论色盲时，他们通常指的是不能感知某些色彩。 大约 8％的男性和 0.5％的女性患有不同程度的色盲——他们在识别部分或者全部颜色时有困难。面对如此庞大的特殊受众，设计师理应关注他们的需求。

△ 正常人和红绿色盲看到的相同色彩

因为色盲有多重表现形式，例如红绿色盲，蓝黄色盲和单色色盲。所以运用多样的视觉线索来连接你 APP 的重要状态是很重要的。绝不要仅仅依靠色彩来表示系统状态。 相反，应使用元素（如笔画，指示符，图案，纹理或文本）来描述操作和内容。需要注意的就是不要简单认为色盲就是简单的分不清红绿，色盲用户对色彩的感受差异不仅仅是单独某种的问题，是某些范围色光的敏感程度问题。

有趣的事实：Facebook 的标志和不怎么讨喜的蓝色配色是特意挑选的。因为 FB 创始人马克·扎克伯格是红绿色盲，他对蓝色的识别是最好的。他曾说过，“蓝色是我生命中最丰富的颜色，我几乎可以看见这世上所有的蓝色。”

△ facebook

Photoshop 有非常实用的工具来帮助模拟色盲，在「视图」的「校样设置」菜单内选中就可以使用了。这个功能让设计师可以看到在色盲用户的眼中你的界面是什么样子的。

△ pinterest登陆页红绿色盲视图

下面以点状图信息图形为例，来说明如何为色盲用户优化信息图：

优化采用了这样一些手段：1.调整配色，将色盲人士容易混淆的红、绿、橙色换为红、蓝、黄色。2.调整明度，使图中几个颜色在明度上差异更明显。3.为不同元素赋予不同形状。所有使用点元素的信息图，都可以参考这种解决方式。

在实际设计过程中，我们需要在美观和友好之间进行权衡。我们也可以采用一些交互手段，避免同一界面中元素太多太过杂乱的问题。

4. 流行趋势对色彩的影响

这是更长维度上的变化，在短时间以内，流行色的趋势变化，对于用色也同样存在影响。这种影响在时尚行业有着非常直接的体现，而在网页和 UI 设计行业，同样存在。比如 2020 年的潘通年度流行色是「经典蓝」（Classic Blue），也就明白了为什么 iphone12 今年的主打色是蓝色了。

2020潘通年度流行色 「经典蓝」新鲜出炉！（附配色方案）

一觉醒来，2020 年潘通年度色就这么发布了。 2020年年度潘通色：「经典蓝」 这款被命名为为「经典蓝」（Classic Blue）的色彩沉稳耐看，隽永优雅，按照潘通官方的说法，「经典蓝」仿佛暮色四合时的天空，宁神静心，让人驻足。

阅读文章 >>

所以，当你在设计的时候，如果你的目标用户群体有着清晰的地域或者性别偏向，你可以有目的地利用这些知识来规避设计陷阱，更好地发挥色彩本身的功能和优势。如果受众广泛，则可以尽量使用通用性更强的色彩来进行设计。

• 知识点：

你知道世界上的颜色是什么吗？

是否存在一种色彩，是不分性别文化，大家都会喜欢的呢？确实有人通过大规模的调研和探索找到了一种世界上的色彩：马尔斯绿（Marrs Green）。来自全世界 100 多个国家 3 万多人响应号召完成了这项投票，并且最终选取出来的一款绿色。

世界上的色彩出炉了，她的名字叫马尔斯绿！

如果说有一种色彩是世界上的色彩，那么它会是什么颜色呢？今天，这个问题的答案出炉了：马尔斯绿（Marrs Green）。

阅读文章 >>

色彩在UI设计中的应用

1. 色彩的应用

人脑对于色彩的记忆度要高于形态，即一个 App 给用户留下深刻印象的往往是界面的色彩。例如说到支付宝，我们可能想不起它的首页长什么样子，标签栏图标是那些，但能马上记起它的界面主色是蓝色。因此运用好色彩对 UI 设计十分重要，它能直观的呈现产品的气质和性格，能有效的帮助用户组织和阅读信息，与界面设计产生联系和记忆。好的配色往往依靠设计师审美、感觉搭配出来，但合理的颜色搭配必定存在合理的配色规律和配色方法论的支撑，下面结合相关案例为大家讲解色彩运用的几个技巧。

不得触碰的禁区

分析研究了很多优秀设计作品，发现他们在用色的时候有一部分区域是不会使用的，也就是我们常说的“配色禁区”。当然，这里的“禁区”是带双引号带的，并没有什么绝对的禁区，只是说这些颜色不易控制，在连基础色都没有驾驭好之前，尽量少碰。

配色禁区大概分为这三种：三角形禁区、矩形禁区、扇形禁区（红色为禁区），如下图：

综合看来，不管是那种禁区，右下角区域的颜色是很少用的。毕竟他们又脏又深，当然什么颜色都能驾驭的大师请略过。

• 知识点：

在界面设计中，一般主色和辅助色都集中在右上角，次要的和不可点的颜色都集中在中上方，而文字信息和背景色则集中在左侧，右下角禁区是我们要重点避开的对象。

色调一致

在 App 设计之前应先确定界面的主色调，主色将占据界面中很大的比例，通常是品牌色，而辅助色、点缀色、背景色等都应以主色调为基准来搭配，这样才能保证 App 整体色调的一致。色调一致的界面，能带给用户始终如一的视觉体验。例如马蜂窝将黄色（品牌色）作为主色，以及从主色搭配出的蓝色（对比色）贯穿 App 始终。

60-30-10 原则

60% 30% 10%的原则，是达到色彩平衡的最佳比例。在 60%的空间使用主色，可以运用到导航栏、按钮、图标等关键的元素中，使之成为整个 App 的视觉焦点和色彩关系；30%的空间使用辅助色，可以平衡过多的主色而造成的视觉疲劳；最后剩下 10%的空间为点缀色，可以用在一些不太重要的元素又需要区分的时候。6:3:1 原则构建了一种丰富的色彩层次，让界面看上去和谐、平衡和不杂乱。

哔哩哔哩将粉色运用到页签、标签栏、按钮、入口图标等上，蓝色的辅助色用在角标、图标上，还有黄色、红色用在一些小图标、小标签上，主次非常清晰明了。

色不过三

经常很多大神在网上说配色不要超过三种色，其实就是「色不过三」原则，即在一个页面中不要使用超过 3 种颜色搭配，这也和上面说的“60-30-10 原则”类似，即一个主色、一个辅助色和一个点缀色。但在实际 UI 设计中，迫于产品的需要可能会使用更多数量的色彩，但切记不可超过 7 种色相（注意不是 7 种色值），每个色相还可以运用其饱和度、明度的变化分解出丰富的色彩搭配。

美团外卖的首页 20 个功能入口大图标的背景用了 9 种不同的色彩，每种色彩又包含一种低饱和度色彩进行彩色渐变，但并没有显得杂乱，而是呈现一种年轻时尚的律动感。这是因为这里虽然使用了 9 种不同的色彩，但仔细观察发现只使用了 3 种色彩，其他 6 种则是从前者邻近色中提取出来的搭配，再将它们错落放置，呈现出丰富多彩的色彩搭配，整体和谐统一。

远离纯黑色和纯灰色

黑色就像没有生命力的深渊，使用户陷入冷冷的负面情绪中。远离纯黑色和纯灰色，是因为它们不存在于现实世界里。尝试在纯黑和纯灰中加入一些色调，会让界面看上去更柔和自然。另外，纯黑色还会与白色产生强烈的对比度，看久了会使人疲劳，让用户产生焦虑的情绪。MONO 的导航栏并不是深黑色，而是加入了蓝色的低饱和度蓝黑色，它的界面背景也是加入了蓝色的的浅色，这样就不会让界面看上去死气沉沉的。

遵循色彩心理学

前文我们已经了解过各种色彩的心理学知识，就是为了我们在进行 App 设计时提供依据。这些色彩都是源于人类对大自然最原始的感受，蓝色的天空、绿色的草地、黄色的沙漠等等，自然的色彩，对于我们来说是司空见惯的，但其中却蕴含着丰富的美感，并达到了和谐统一。网易云音乐使用红色作为主色，这种热情奔放的颜色传递出一种充满能量、自信的气质。

良好的可读性

良好的可读性在界面设计中能为用户提供主次分明、层次清晰的阅读体验，而一个可读性差的界面则会成为用户浏览的障碍。那如何确保界面具有良好的可读性呢？这就需要在界面设计中注意色彩搭配的对比，如在浅色背景上使用深色文字，在深色背景上使用浅色文字，使用高对比的度的亮色展示重要的元素，用低对比度的浅色来体现需要弱化和次要的内容。例如苹果 Music 的主要功能入口，标签栏图标、按钮等都是用了高纯度的红色，与其他元素形成鲜明对比，就连深灰色的辅助文字都有着清晰的可读性。

从大自然中获得灵感

配色中尽量使用大众熟悉的色彩，如自然界中人们常见的色彩等。从大自然中获取的配色灵感可以使你的设计更加切合用户的审美，非常自然。而艺术是对自然的直接反映，是非常宝贵的资源，值得好好利用。我们可以搜集各种与自然风光相关的图片，从中提取色彩运用到设计中，这些几近完美的搭配呈现出来的和谐美感能瞬间打动人心。天气应用 Marline 就是一个很好的例子，它的界面背景渐变就参考大自然的变化，随着不同时间段呈现出清晨、日出、正午、日落、深夜、雨天等渐变色，打开应用即唤起了用户的快乐情绪。

将 UX 颜色与品牌相匹配

品牌价值在创建调色板中发挥关键作用，但是它们不是唯一重要的因素，行业规范也是关键。使用与品牌主要竞争产品几乎相同的配色方案不失一种好方法。配色在品牌视觉中所发挥的作用是不言而喻的，但是，色彩本身的内涵和情绪特质并不是全部。比如一个行业当中，很多产品都使用了蓝色，那么你的产品继续使用蓝色，可以让用户更快「识别出」你所属的领域，但是本身也存在让人混淆的风险。如果你想要在视觉上脱颖而出，可以试着使用不同的色彩。

△中国区或美国区，红色和蓝色都是最流行的颜色。

在进行品牌设计的时候，选择配色的第一步，始终是了解各种颜色或者色相的气质和情感属性。然后，在具体设计的时候，再进一步根据品牌的气质和需求，再在色相的基础上调整明暗和饱和度。也可以打破常规创造出与众不同的配色方案。

从强调色入手

想要让配色方案更加突出，在设计中添加强调色可能是最容易入手的地方。举个例子，一个律师咨询的 App 可能会使用传统的蓝色作为基础配色，但是，如果能够加入柠檬绿作为强调色，会显得独特很多。

冷暖色对比搭配

冷暖对比色是自然平衡的规律，可以在设计中大量使用，这样的配色会使作品非常的出彩，同时不显单调，让用户感觉舒服平和。而且这种搭配方法基本没有啥缺点，使用在设计中，技巧性比较多，对设计的细腻感受要求比较高，需要多练习。

黑白色搭配不过时

黑色是所有中性色中最强的，而白色是最常用的背景颜色。黑色是一个很好的选择，有种高端和永恒的感觉，而白色可以带给用户自由，宽敞和透气的感觉。如上所述，黑色和白色也是最大的对比色，如果合理的使用黑色配合白色，会营造出一种优雅的氛围。

强交互色彩

交互色彩在执行过程中必须清晰且在界面中保持一致。号召性用语必须相对于背景具有足够的对比度，并且相对于其他组件必须具有足够的视觉权重，以便用户可以轻松识别它们。Nike 健身应用中，「开始」按钮以高饱和度的柠檬绿作为主色，从背景中脱引而出。

但是，交互色彩并不总是以最具饱和度或最亮为特征，而是通过色调、形状、大小或对比度，从屏幕上脱颖而出。因此，交互色彩的有效性将基于用户识别交互区域和执行任务的速度来衡量。同时，次要功能权重要更轻，并在视觉上更接近信息元素。如上图 Nike Training 界面中，“设置”和“声音”按钮只用简单的白色，减轻对主按钮的干扰，也避免了页面中出现多个强交互按钮。

保证良好的可读性

可读性是任何设计中的重要因素。你的颜色应该清晰易读，尤其是在处理文字时。因此对比度对视觉效果的影响就非常关键，对比度过小，就会使得界面出现灰蒙蒙的效果。清晰的对比度，一般会采用色彩的两极，黑纸白字或白纸黑字。而在彩色背景上要让内容清晰可见，就需要搭配纯白或高明度的文字，避免灰色文字。也要注意避免彩色背景上搭配互补色和明度接近的文字，因为这两种搭配会产生一种“震颤效应”，发出光晕的视觉效果。

UI 中的阴影

没有完全纯黑的阴影，阴影的颜色是会受到物体本身固有色的影响，一定要避免使用纯黑色（#000000），使用不太深的灰色，效果会更好。对于有颜色的元素，好的做法是为阴影设定与元素相同的颜色，并使其更暗一些。

如果是有颜色的元素，并且它处在黑暗的背景下，一般情况下，是不建议使用阴影的。但是如果你一定要用，把阴影透明度调到小于 10%及以下，并且颜色跟随主色调来。比如按钮为绿色，则可以为按钮设定一个更深的绿色阴影，并加上小于 10%的透明度数值。如下图，左侧的按钮阴影很自然，右侧的则有一层模糊发光的效果，显得不够漂亮。

• 知识点：

为什么「超链接文字」要用蓝色？

简单说，因为在最早期的网站页面中，蓝色能呈现最高的对比度。

Tim Berners-Lee——web 的主要开创者，被认为是最早用蓝色链接的人。

一个很早期的 web 浏览器 Mosaic，用的是深灰色背景和黑色文字。那时候，能用的非黑色、最深的文字颜色，就是蓝色。所以，让超链接文字突出显示，同时保证可读性，就选定了蓝色。此后超链接文字都用蓝色的传统沿用至今。

2. App 设计中的色彩搭配

App 的色彩搭配能直观、快速的反馈到用户的大脑中形成记忆思维。好的色彩搭配可以加深用户对产品的印象；明确界面的视觉层次，让用户分清主次信息；同时还能给用户赏心悦目的视觉享受。那么，在 UI 设计时该如何进行色彩搭配呢？我们可以从 App 中都包含了那些色彩开始，通常一个 App 中包含了主色、辅助色、点缀色、背景色这 4 类，下面就以微信读书为例进行详细的讲解（个人角度）。

主色

主色是指在配色中处于主导地位的色彩，给用户的第一眼印象，通常是产品的品牌色。在 App 设计中，主色一般占有色相色彩的 60%的比例。这里指的是 60%的界面都使用到的主色比例，而不是使用面积（因为通常一个界面中使用面积最大的是背景色）。还有就是背景色多为浅灰色或白色，它们都属于无色相色彩，因此不涉及到配色过程中。我们看到微信读书的第一印象，就可以判断它的主色为蓝色，这也是它的品牌色。在标签栏、按钮、图标、注册登陆全都使用了这种纯净的主色，使界面看上去非常和谐一致。

辅助色

辅助色与主色相辅相成，辅助色的功能是帮助主色建立更完整的形象，使界面丰富精彩起来，避免画面过于单一。通常，主色的邻近色、互补色、分散互补色和三角对立色都可以成为优秀的辅助色，但注意辅助色不宜过多，否则就会使界面看上去花哨分散了主题。根据 6:3:1 原则，辅助色可以占有色相色彩的 30%或更少为宜。

在微信读书中，绿色、橙色、梅红、蓝紫色是除了主色以外使用最多的颜色，它们都是辅助色，主要用于功能图标和栏目分类上。虽然辅助色看起来有点多，但其实都是从主色的邻近色和对比色（及其邻近色）中提取出来的搭配，而且只用在页面中很少的地方，这种搭配技巧既可以丰富色彩的搭配，传递出年轻活跃的产品气质，又保证了整体搭配的和谐统一。

点缀色

点缀色是除了主色和辅助色以外的另一种色彩，通常体现在细节上。其作用是，当页面中主色和辅助色不能满足关键信息的提示时，就需要点缀色来吸引用户眼球，还有就是利用点缀色来平衡画面的冷暖色调。点缀色通常都是分散的，使用面积小，颜色非常显眼，能与主色形成强烈的对比。一般点缀色是主色的互补色。在微信读书中，使用了香槟金、梅红和红色作为点缀色。香槟金用在文章分享按钮上，梅红色用在点赞图标上，强调其特殊性，红色用在通知及退出登录提醒上，用于警示。

来康康这三种点缀色与主色之间存在什么样的关系，在色相（H）上，3 种点缀色为邻近色，与主色为互补色；在明度（B）上，3 种点缀色均为高明度色彩，起到强提醒的作用。这种强对比的互补色的点缀色可以快速引起用户注意力。

背景色

背景色就比较好理解了，通常为了衬托内容，大多数 App 都是用浅灰色作为背景色，以白色作为背景色的对比色，来区分视觉层次。建议是可以根据前景色来提取背景色，将其调亮或变暗，这样可以让界面色调更加统一。在微信读书中背景色是偏蓝色调的浅灰色，而不是纯灰色，背景对比色是在白色里加入了蓝色色相，而不是纯白色，整体对比较柔和，给人清爽通透的感觉。

• 知识点：

支付宝 Alipay Design 团队提出过一个配色原则：

以同色系配色为主导，多色搭配为辅。

同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。

3. 迷人的渐变色

不同于单一色彩，渐变色不属于任何色彩，它营造出千变万化的视觉效果，却又不会增加视觉负担。相较于单一的色彩，渐变色的复合性质让它在界面设计中具有更强的视觉冲击力，有助于快速抢占视线。如今，这种的色彩正逐渐成为一种潮流，究其原因是目前大量的扁平风格造成 UI 设计的严重同质化，人们需要追求更加个性的视觉语言来满足日益增长的设计需求。下面我们来了解几种常见的渐变的使用技巧。

色相、饱和度、明度的渐变

色相（H）渐变是指由一种色彩向另一种色彩的过渡，这种渐变因跨度大产生的视觉效果非常明显；饱和度（S）渐变是指同一种色彩不同纯度的过度，其产生的视觉效果比较和谐单调；明度（B）渐变是同一种色彩不同明暗的过度，这种渐变的视觉效果给人一种沉静的氛围。

渐变的表现形式

在界面设计中经常看多各种各样的渐变表现方式，使用最多的有以下几种：

• 水平渐变

这个很好理解，是指角度为 0 的线性渐变，是最流行的渐变形式。界面设计中多用在导航栏、进度条、按钮等元素上，能让画面变得精致而通透。例如京东使用橙红渐变的设计语言贯穿整个 App，从应用图标到导航栏、按钮、标签，全部都运用了这种由红色到橙色的过渡。仔细观察发现在很多小标签上都使用了水平渐变设计手法，使产品看起来更年轻化。

• 知识点：

在水平渐变中，通常把轻（亮）的色彩放在左边，重（暗）的色彩放在右边，这样由左向右的方向感刚好与人的浏览习惯保持一致。而反过来就会与人的浏览视线相悖，应避免。

垂直渐变

即角度为 90°的线性渐变，它通常被用在正方形或竖条形的元素上，如注册登陆页，个人中心头部等。垂直渐变中上下两种色彩的深浅变化会产生截然不同的视觉效果，上浅下深会让给人一种凸起的立体感，而上深下浅会给人一种凹陷下去的空间感。例如「纪念碑谷」的背景是采用了单色相和多色相的垂直渐变作为游戏背景，在让整个画面丰富的同时又不会太抢夺主体的色彩，使画面显得清新透气而不沉闷。

角度渐变

角度渐变通常有对角渐变和多角度渐变。有角度的渐变相比水平和垂直渐变，它的使用场景更广，如图标背板、启动页、注册登录页、标签等。想让界面更加绚丽、动感和迷人，这时候我们可以考虑多组渐变搭配使用。

色块渐变

渐变的颜色不只可以运用在一个色块上，还可以运用在一组色块上。设计师运用一组近似性色彩，将每个菜单项清晰区分开，让界面平衡在一个频率上，这样的画面更有节奏感和舒适性。不同于平滑的渐变，色块渐变不再是单纯的背景装饰，在某些地方还具有一定的功能性，比如使用不同的色块来分割的列表样式。Clear Todos 是一款日常任务清单的 APP，它抛弃了传统的列表样式，使用了一系列色块来作为列表的分割，非常漂亮和精致。

径向渐变

是指色彩以圆心向四周扩散的渐变，是一种模拟光源照射的视觉效果，因此光源是整个画面的视觉焦点，将关键元素放在光源中心就会成为主角。通常被运用到大背景上，如启动页、引导页等。Solar 天气应用的背景就是径向渐变，光源扩散的效果营造出一种梦幻般的美感。

和谐的渐变色

渐变色是由一个色彩走向另一个色彩的过程，有着迷人的视觉效果。如果你仔细观察两种色彩的过渡关系，就会发现不是每次都会得到满意的效果，例如红绿渐变就很糟糕，因为它们两者是互为对立的色彩，但是如果加入黄色的过渡色就会好很多。原因是当两种色彩之间超过 90 度就会导致其渐变色看上去不太和谐自然，只有控制在 90 度之内才会产生美妙的变化。如何改善超过 90 度的两种色相的渐变呢？这时候可以在两色之间加入过渡色进行调和。例如当从黄色到蓝色渐变时，就可以加入紫色作为过渡才能呈现完美的视觉效果。

• 知识点：

在搭配渐变色时，尽量只改变其色相（H）、饱和度（S）、明度（B）中的一项，这样才能创造出和谐的渐变色方案。

创建调色板及配色工具

调色板帮助我们在设计项目中建立色彩规范、提高工作效率。通过上文对色彩基础知识的学习，接下来为大家介绍几种简单易用的创建调色板的小技巧，以及 Materia design 配色方法和配色网站推荐。

1. 从设计作品收集色彩

打开 dribbble，每一幅作品预览页左下角都有一份自动生成的配色板，很多同学可能不知道这个配色文件是可以下载的。将调色板保存到本地，为自己在创作时提供灵感。在 ps 里的操作步骤是：点击“窗口—色板”，然后在色板的属性面板右上角打开“导入色板”，载入刚下载的色彩文件即可。

它也有颜色搜索工具，输入或选择颜色值即可搜索相关配色的设计作品。

2. 从图片取色

这种方法也很常用，不需要任何插件，丢一张图片到 Ps，然后将图片「马赛克」处理下就可得到一组配色。例如，我们需要一组同色系的绿色，在网上（建议 unsplash 或 500px 等专业图片网站）找一张树叶的图片，接着将图片在 Ps 中打开，进入“滤镜—像素化—马赛克”，在打开的窗口里调节单元格大小即可。

同时，建议平时多去收集好看的摄影图片和优秀的配色方案，看的多了就知道什么是好的什么是 Low 的配色，对提升审美也有很大帮助。

△ pinterest画板

3. 自定义色块叠加

该方法稍微复杂一点，示例步骤如下：第一步绘制一个正方形做底板，填充一个颜色#5354F0；第二步分别在正方形的上和下 1/3 处叠加 20%的白色和黑色；第三步分别在正方形中和右 1/3 处叠加 40%、80%的紫红色#DF56FA；最后改变紫红色图层的混合模式为叠加即可得到一组蓝紫色色调的调色板。

4. 色彩系统

Materia design 调色板

Materia design 从生活场景中提炼出 19 个充满活力的色彩，旨在和谐地协同工作，可用于开发品牌调色板。Materia design 提供了一整套调色板，从原色开始，延伸出其他许多色彩，这些色彩和谐相处，可用于产品设计的品牌色。基础色的饱和度是 500，Google 建议以此作为产品应用的主色调，可以再选择一种辅助色，并在主色的基础上进行饱和度，明度变化，构成一套配色方案。

如果上面的色板不能满足你的需求，你可以选择一个主色，Materia design 调色板生成工具会为你生成完整的色板。

主色和强调色

在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，建议选择饱和度为 500 的基础色作为主色，根据设计需要在主色的基础上增加 1～3 种不同饱和度、明度的色彩建立层次感，再选择一种强调色突出重要内容或操作，例如 FAB 的背景色。

深/浅背景上的文字

Materia design 通过文本的不透明度建立在不同背景上的深浅对比，对于浅色背景上黑色文字，主文字不透明度 87%，次要文字不透明度 60%，禁用文字不透明度 38%；而黑色背景上的白色文字正好相反；彩色背景上的白色文字不透明度 100%，分割线不透明度 12%。Ant Design 也定义了一套用于界面文字、背景、分割线的中性色，在落地的时候同样也是按照透明度的方式实现的。

背景

为了提高应用之间的一致性和阅读的可读性，背景色根据设计需要选择纯白色或饱和度依次为 50、100、300 的灰色。

5. 配色工具推荐

颜色是一个很难掌握的概念-因为有无限多种可能的颜色组合，对于很多设计师来说还是一件蛮困难的事，为了让设计配色变得容易些，下面推荐几个常用的配色网站，希望能帮助大家在日常工作中节省更多的时间。

Adobe Color

Adobe Color 是一个基于网络的应用程序和创意社区，提供免费的色彩主题，并且在 Adobe 相应的软件中也提供了扩展程序，比如我们常用的 Photoshop 和 Illustrator。

△ https://color.adobe.com/

Adobe Color 通过拖拽色轮或输入自定义色值，可以创造出基于相似、互补、三原色、正方形等不同色彩规则的配色方案。除此之外，还支持 CMYK、RGB、HSV 多种色彩模式的配色调整。用法很简单，点击颜色块上的小三角确定基础色，就会自动生成 5 个基于你所选色彩规则的配色方案，拖动下方的颜色条时相应的也会改变配色方案。如果没有灵感可以通过顶部导航进入“探索”页，这里为我们提供了很多提取好的颜色和图片，有的是摄影作品，有的是设计作品，上方的轮播图提供的一些其他内容，比如潘通流行色、Adobe 社区和手机端的 APP 等等，非常的实用。

Eva Design System

Eva Design System 是一个基于深度学习算法的配色网站。适用于给我们的产品或品牌生成一个系统的配色方案。右上角可以切换浅色模式和深色模式的对比。

△ https://colors.eva.design/

Colorhunt

Color Hunt 是由设计师 Gal Shir 创建的开放调色板集合，每天更新丰富的配色方案。颜色卡片下方可以看到更新的时间和喜欢人数。鼠标悬浮在任一色块上显示颜色值，点击颜色卡进入详情页可下载和分享，惊喜的是还可以添加到 chrome 浏览器，方便随时随地使用。

△ https://colorhunt.co/

Grabient

Grabient 是一个非常漂亮且实用的渐变配色网站，支持 CSS 样式代码复制、360 度渐变旋转、自由增加或删除渐变颜色等功能。设计师可以在色块下方自由添加和调整渐变的色系、以及线性渐变方向。

△ https://www.grabient.com/

当然，以上这些配色工具只是为我们提供方便的，而不是主导我们的，所以在使用配色工具的时候最好是要有一定的理论基础作为支撑，让你的配色有理有据，切忌生搬硬套。

• 知识点：

对于新手设计师来说，颜色越少越容易把控画面。色彩层级越精简，就越容易达到整体色彩平衡，掌握好色彩的功能划分必然会让你的配色过程保持思路清晰从而提率。

同时，不管是 2C 还是 2B，很多大公司都构建了自己的设计系统。如果你想学习别人是如何进行配色布局的，最快的方式就是研究他们的设计源文件。

6. 关于色彩空间配置(附加内容)

建议设计软件使用 sRGB 作为色彩空间的默认配置，而不要采用未管理（ Sketch 中默认是未管理），若团队协作请提前保持色彩空间配置的统一性。如果有需要针对广色域色彩空间做项目，可以单独设置该项目文档的色彩空间为 Display P3 或者 Adobe RGB。

Mac 系统色彩空间配置

建议所有 macOS 用户都在系统偏好设定的显示器颜色设定当中换用 sRGB IEC61966-2.1 这个校色方案，可以极大改善系统显示效能。如果有外接显示器，也建议使用外接的默认选项，默认选项一般可以发挥出该显示器的最大色彩性能。

Sketch 色彩空间配置

Sketch 默认颜色配置是 Unmanaged「非托管」， 我们可以在「偏好设置」中为 Sketch 指定默认的色彩空间配置，如此一来每次新建设计文档将会默认采用我们的设置作为默认的色彩空间，不用每次新建文档都单独设置一次。

设置方法：Sketch → 偏好设置(Preferences) → 通用(General) → 颜色描述文件(Color Profile)，修改下拉框选择器的内容为 sRGB IEC61996-2.1。（其他设计软件设置方法类似）

如果要更改已有的文档为 sRGB 色彩配置，可以通过文件——更改颜色配置，在弹出的对话窗里对文件进行色彩空间的更改即可。

写在最后

其实无论是色彩理论还是配色方法，最本质的东西就那些，更多的还是需要设计师在日后的工作中不断的摸索和积累。这篇文章全部写下来耗费了不少时间（小声 BB：其实每篇都是），抱歉内容确实有点多，但其实已经是收着点写了。就像大树一样，有很多分枝不断生长，需要了解很多细分出来的深度知识。这也是写这类文章的乐趣，通过不断的查阅资料，把过去很多模糊的概念摸清楚了。果然学透一个知识点的最好方式就是把它讲出来才能真正为自己所有。关于色彩的知识先分享到这里，希望对大家有所帮助，文中有不严谨或错误的地方，欢迎大家指正，一起学习成长。

文章来源：优设网     作者：印迹

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

2020 年，新冠疫情席卷全球，后疫情时代的需求也促使设计师们不断提出更有意义的医疗解决方案。作者梳理了医疗保健类 APP 的类型，从产品的研究、功能特性、导航、颜色等角度提出了针对医疗保健 APP 的一系列设计建议，简单直观的界面、便捷的功能，以及积极的情感，才能使用户接受并喜欢原本 “令人生畏” 的医疗产品。

△ Justas Galaburda 绘制的插画

在移动应用市场中，的应用类别是 “游戏”，而 “健康与健身” 类勉强跻身前十名。2020 年是十分艰难的一年，但也创造了很多机会，例如，移动应用市场中医疗行业的产品大热，受到多方关注，这类产品直接影响人们的健康行为，可以使人们的生活更加轻松愉快。

为此，大批创业人士开始关注医疗这一领域。首先，你需要制作一个功能强大的 APP，因为如果一款产品不能交付使用的话，它就一文不值。但是，这种功能必须通过设计能力来呈现。一个好的医疗保健 APP 设计，应突出其最重要的细节，引导用户进行操作，并提出下一步建议，从而产生必要的行动。APP 本身可以成为有效的潜在客户开发工具和公司的主要产品。对于一个健康或医学相关的产品来说，用户界面或用户体验设计尤为重要。

△ George Frigo 设计的呼吸检测 APP

本文将探讨一些医疗保建 APP 设计的成功案例和经验，这对设计师和企业来说都很有帮助。

医疗保健应用的类型

值得注意的是，“医疗保健类 APP” 是一个综合性概念，涵盖了许多与健康和医学相关的数字产品。

医疗保健 APP 类型很多，包括但不限于：

• 医护人员与患者进行远程咨询的 APP（远程医疗）
• 患者与其电子健康病历（EMR，Electronic Health Records）进行交互的 APP
• 记录和管理患者生命体征的 APP
• 提醒患者何时服用药物或进行运动的 APP
• 用于医学计算的 APP
• 包含医疗信息的参考型 APP
• 健身和运动类 APP
• 健康生活方式和健康管理类 APP（日常饮水量、睡眠管理等）

这似乎是一个相当宽泛的主题（例如，卡路里计数 APP 和医学教育解决方案相差甚远，却都属于这个领域）。但是，有一些通用的设计方案，可以提高任何一款 mHealth APP 的易用性。（ mHealth（Mobile Health，移动医疗或移动健康）：通过移动设备提供与医疗相关的服务，例如，通过 PDA、移动电话和卫星通信来提供医疗信息和医疗服务等。）

△Victor Nikitin 的医疗类 APP

如何设计移动医疗保健 APP

一款 APP，即使它不是企业的主要产品，也可能具有巨大的价值。例如，用于医疗工作的配套 APP，能够为客户提供信息和服务，从而减轻员工的负担。如果一款医疗保健类 APP 是企业的主要产品（例如，健身或冥想 APP），因为没有硬核的业务场景支持，会有很大的风险。有时，这类 APP 设计中的不足会导致用户完全放弃使用它。

为了避免这种情况，我们来看看设计医疗保健 APP 的 12 个要点，以及它们如何帮助设计师们设计出更具针对性、更直观、更的 APP。

△ Anatoly 设计的 Healthcare APP

1. 研究 – 成功的第一步

在制作 APP 界面原型之前，你需要了解产品的目标受众是谁，他们的地理分布、社会人口特征以及心理特征是什么。因为没有一种产品可以满足所有人的需求。用户的兴趣和能力决定了他们如何与 APP 进行交互。因此，回答以下问题将对你有所帮助：

• 产品的目标受众是谁？
• 他们喜欢什么？
• 他们每天都使用哪些 APP？
• 他们使用这些 APP 是出于什么目的？

一般来说，患者和医生都会使用医疗保健类 APP（假设我们将生活方式类 APP 的用户也视为患者）。这两类用户在功能和 UI 设计方面有不同的需求。

医务人员通常需要快速找到一些数据项，例如 EHR / EMR、药物规格、诊断和治疗建议、参考材料等。但是，患者希望能与尽可能少的信息进行交互，且这些信息应该简单易懂。因为这类用户中有很多是老年人，或是存在某些障碍的人。

只有在进行适当的用户研究，并得出相应结论后，设计师才可以着手进行医疗保健类 APP 的设计。

△ Chahua 设计的健康管理 APP

2. 每一个案例都简洁明了

对于一般人来说，医学是一门复杂的学科。所以在设计医疗保健类 APP 时，请尽可能地让它们保持简单，这有助于让用户平静下来，并保持专注。

“复杂性是你的敌人。很多傻瓜都可以让事情变复杂，而让事情变简单是很困难的。” — 理查德·布兰森

为了让医疗类 APP 看起来很重要并给人留下深刻印象，而将其界面做得过于详细，是没有意义的。即使该产品是为医务人员设计的，也最好 让界面和逻辑易于理解。

△ lgor Savelev 设计的医疗类 APP

在设计医疗保健类 APP 的用户界面时，请提供有意义的用户引导，并 使界面直观易懂。否则，用户可能会在触达该应用核心内容之前就对其体验感到沮丧。

如果该 APP 清晰明了，医生及患者双方都更容易接受。这样一来，用户易于学习上手。即使它是针对医疗的解决方案，人们也不会感到不习惯。

为帮助用户在比较舒适的节奏下了解产品功能，请使用渐进呈现的原则，逐步为用户提供指示。从新手指引开始，将应用程序中的每个操作分成可管理的小模块，每次仅提供一个指引。（渐进呈现（progressive disclosure）：每次只展示用户当前需要的信息，引导人们平缓地由简单状态进入复杂状态。例如将原本复杂的逻辑隐藏起来，通过更易于认知的界面形式帮助人们轻松完成最为基础的任务。）

另外，采用被动输入、自动输入、调整键盘和动态验证字段的方式，能够限制用户必须输入的信息量。

所有医疗信息必须由受过相关教育且具备专业知识的专家提供。否则，内容要么不完整，要么包含错误，对于医疗产品来说是不可接受的。

△ yurig 为医生设计的医疗类 APP

3. 功能和特性

医疗保健类 APP 的 功能及特性取决于其用途和目标受众。例如，医疗中心 APP 需为用户提供个人帐户，在该帐户中，用户可查看其就诊记录、就诊建议以及预约情况。如果没有安全加密的视频会议和通讯功能，远程医疗 APP 将毫无意义。毕竟医疗类 APP 依赖的是可靠且有用的通知。

主页承载着一个 APP 的主要功能。请试着回答这个问题：用户为什么使用你的 APP？或与之类似的 APP 呢？如果用户访问 APP 是为了记录或接收某些信息，或是联系医生，查看他们的进程等，那么这个功能应该位于 APP 的主页。

重要的是，正如前文所提到的，避免一次性出现太多功能，从而造成混乱。不可否认的是，这种情况经常发生在老版本的 APP 上。这些 APP 常常不断添加新功能，偏离焦点，以至于只有专家用户才能理解它。

（专家用户（super-users）：专家用户在生活中愿意给予企业反馈，主动做口碑，或是积极分享、点赞等，这些无法以价钱衡量，却能在品牌价值传递、产品创新、营销推广等经营各环节，为企业带来实质贡献。）

根据帕累托原理（二八法则），80％ 的用户倾向于使用不超过 20％ 的功能。因此，务必确认哪些功能对用户来说是最重要的。

（帕累托原理（ Pareto’s principle）：也称二八法则。在任何特定群体中，重要的因子通常只占少数，因此控制具有重要性的少数因子，即可控制全局。）

△ Manoj Dalvadi 设计的 Medicine APP

4. 便于探索与享受的导航

清晰的导航结构是一个有效的医疗保健类 APP 的必要条件，也是医疗保健类 APP 用户界面设计的基础。没有清晰的导航，APP 是不会被广泛使用的。完善的导航意味着率和易用性，这对用户来说是十分有价值的。医疗专业人士需要的是能够快速开展工作的应用，因为他们花费了太多时间在处理电子健康档案（EHR）上。一项由斯坦福医学院展开的调查发现，医生花费在每个病人身上的时间，有 62% 是用于处理电子健康档案。如果针对医务人员的 APP 不够简洁，那 APP 便失去了使用价值。同样的，对于患者来说，他们也不会喜欢混乱的导航，即使当前的任务不是很重要。

重要的信息应放在明显的位置，并在必要时提供详情。根据 3 次点击原则，系统应保证用户在 3 次点击之内，找到所需信息。

为了使 APP 导航结构清晰，可采用标准的 APP 导航组件，如汉堡菜单、标签栏或抽屉式导航等。

△ Alex Samofalov 设计的医疗类 APP

颜色的选择

一般来说，APP 的颜色选择取决于目标受众以及该 APP 的主题。

医疗保健类 APP 设计通常采用中性色调，尤其是冷色调的蓝色和绿色，背景一般为 白色。设计师这样做是为了达到以下效果：利用柔和的色彩和医疗保健行业的联系，缓解用户焦虑并增加可信度。因此，在医疗保健类 APP 的用户界面中，亮红色或黄色是很少见的。

△ Adam Sokołowski 设计的医疗类 APP — Pharmagy

但是，考虑到医疗类软件的多功能性，颜色选择并没有特别的限制。主要思路是，这类 APP 的整体外观应营造积极的印象，不应引起焦虑、恐惧或其他不良情绪。

例如，深色的健身 APP 看起来优雅且有品味：

△ Saepul Rohman 的 UI 设计—健康及锻炼类 APP

而亮色为 APP 增添了许多活力：

△ Michal Parulski 设计的移动健身 APP

追求个性化

APP 的个性化定制是近年来最显著的设计趋势之一。特定的功能与特定的用户模式相适应，并且系统会暗示用户下一步可执行的操作，以免被用户忽略。

这些技术的目标是，帮助用户更快地利用 APP 解决问题。因此，有必要识别和分析用户模式，并跟进他们的变化。

正如每个人都有着不同的健康状况，用户希望他们所使用的 APP 也能提供同样独特的体验。除此之外，在非医疗保健行业，也有 33％ 的用户会因个性化程度不足而卸载应用程序。

在设计医疗保健类 APP 时，可以使用许多自定义选项，如颜色主题、个性化通知、交互元素，以及利用 AI 定制个性化推荐等。

△ Jawad 设计的在线咨询 APP

无障碍性是必需的

无障碍的 UI 设计对任何 APP 来说都很重要，对于医疗类 APP 尤为重要。

移动医疗解决方案针对的是不同年龄，具有不同视觉和听觉能力、身体和心理特征的用户。因此，医疗保健类 APP 主要功能的设计，应保证每个潜在用户都能访问。请考虑可能存在的限制，并努力克服它们的负面影响。例如，有晕动症的人不会喜欢过多的动效。

但这并不意味着一个医疗保健类 APP 的界面中只能有两种颜色，也并非所有文本字号都要非常大，但这确实意味着设计师将面临一些挑战。对于医疗保健类 APP 来说，其中的挑战也许相对多一些。无障碍设计能带来更多的机会，而不是负担。试着从浏览 W3C 网页中关于无障碍指南的内容开始，尝试使用色盲模拟器，如下图这种。

无需多言，试试移动端无障碍设计的常用方式：将主要元素的尺寸控制一个拇指大小的区域中、添加将视图改为水平模式的选项，以及放大文本的选项等。

△ keithar 的对比度分析仪和色盲模拟器

积极态度的力量

医学不仅复杂，而且通常令人生畏，即使涉及的医学内容不多。一个比较聪明的办法是使 APP 看起来与医学毫不相干。这将消除用户因刻板印象而产生的压力，并使体验更加愉悦。

除了使用柔和的颜色，还可以在用户使用 APP 的不同阶段 推送鼓舞人心的消息、有趣的图片、欢快的语音或其他元素。医疗保健类 APP 用户界面中的图像和图标，应始终带给用户积极、愉悦的情绪，并 营造一种无痛感和安全感。

△ Mahdieh Khalili 设计的冠状病毒 APP

区别于 Web 设计

当产品已具备现成的网站，企业方甚至设计师为了降低制作成本，可能会想从产品的网页版中 “借鉴” 一些解决方案直接应用在移动端设计中，这很可能导致用户拒绝使用 APP。

用户与移动设备间的交互不同于与电脑间的交互。移动设备的屏幕比显示器屏幕或笔记本屏幕小。此外，用户与移动设备交互的方式不同于在电脑上进行的操作。在移动设备上，我们做任何事情都依赖手指的移动，不愿意输入冗长的文本，但同时希望系统能更快地工作。

一般来说，尽管 APP 中的导航也很重要，但对于移动设备而言，更需关注的是交互设计。在大多数情况下，人们喜欢使用网站来获取信息，使用 APP 来完成任务。此外，APP 还集成了智能手机的功能，如加速度传感器和摄像头，这也是导致 APP 的用户界面设计与 Web 版有所不同的原因。

△ Grace Saraswati 设计的健康健身类 APP

好事过头反成坏事

视觉吸引力与功能性之间的平衡是非常重要的。医疗保健类 APP 必须便捷，且不能分散用户对内容的注意力。

图形元素，包括动画，应始终以满足使用目的为前提，来考虑是否需要，如数据输入，以及说明用户与系统间的微交互等。不能仅仅因为它看起来不错而添加。不要过度使用渐变和阴影，要将用户注意力集中在主要信息上。字体也只需选择一种，可以通过改变字号和其他特征（如斜体、粗体）来做区分。

使用简单的配色方案可以更清晰地传达品牌信息，并创造更好的导航效果。

△ Dibbendo Pranto 的健康及活动追踪交互设计

是否借鉴竞争对手

你可能会在某些点上考虑，是否要借鉴一些竞争对手的成功案例。好吧，如果这有用的话……一方面，抄袭其他产品是不明智的，因为 它们的设计可能并不完善。你采纳的可能是竞争对手的错误决策，以至于阻碍 APP 的未来发展。

另一方面，你应该先对其他应用进行分析，对竞品进行研究。应该参考用户以前使用其他 APP 的经历，并进行借鉴，从而降低用户的学习成本。添加太多创意会使 APP 显得很烦人，用户需要花大量时间去习惯并学习操作。为此，可以参考苹果制定的人机交互指南（Human Interface Guidelines ）和谷歌制定的材料设计指南（ Material Design）。

“用户大部分时间是花在别人家的网站上。” — 雅各布定律

（雅各布定律：用户在其他千千万万个网站中积累经验，学会如何使用网站，当一个网站跟其他网站一致时，用户会立刻知道该如何操作，但如果违反了雅各布定律，用户会毫不犹豫地离开。）

必须根据品牌、服务和产品细节来进行设计。例如，健身类 APP 与医学计算器有着很大区别。设计必须完全符合目标受众的要求、APP 的功能细节及主题场景等。

△ Martyna Zielińska 的医疗提醒 APP

可用性测试

最后，重要的是要记住，每个设计师都有自己的观点，认为这个或那个决定是合理或有效的。他们可能会对 APP 架构和导航的一致性，严谨的设计解决方案，以及产品的实用价值深信不疑，以至于忘记了测试。通过不断的实践，设计师提高了自己的共情能力，可以更好地理解用户需求。但事实上，直觉和经验带来的潜在陷阱也会给应用带来负面影响。

只有在分析用户与 APP 界面交互的相关数据后，才能得出相对准确的结论。测试有助于及时获得反馈，覆盖 APP 中的所有行为场景，并检查交互模式。

用户的积极参与是成功的关键。相关测试受众的年龄、职业、地理位置、性别、文化和宗教背景等要尽可能接近目标受众，越接近越好。尽可能多地让他们使用 APP 的主要功能并收集反馈。

△  Alex Samofalov 设计的患者卡片 APP

结论

设计所关注的并不仅仅是颜色和字体，而是创造价值和解决业务问题的能力。健康是一个敏感且具有挑战性的问题，需要特别注意。设计师们一直努力地在医疗类 APP 极高的安全性及可用性要求与界面美观性之间取得平衡。

经过深思熟虑的医疗保健用户体验和 UI 设计是一种极好的工具，它能凭借简单直观的界面、便捷的功能以及它所带来的积极情感等，吸引用户参与体验。

文章来源：优设网     作者：TCC翻译情报局

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

今天给大家带来的是如何建立设计师个人的插画组件库，因内容过长并知识点过多，请泡杯枸杞观看。

一、关于个人插画组件库的3大疑问点：

 

1、为什么要建立个人插画组件库？

其实最主要目的是为了给自己的插画提供一个设计轴心，我们可以围绕着这个轴心创作出更具有效率规范的插画内容，演变更多的插画风格，让我们使用插画时变得游刃有余，提升率的设计输出，衍生更多的组件化运营设计与品牌插画组件库。（注：按照以下步骤设计，插画手残党也能轻松学会哦！）

 

2、品牌（产品、项目）插画组件库与个人插画组件库的区别？

01-规范区别：

品牌插画组件库：组件品牌插画库前会做很多细致的规范，如：颜色规范/情景规范/光线规范/关节细节处理/景别元素处理等等；

个人插画组件库：为了让我们的插画更具有灵活性，所以在做个人插画组件库时不会做太多的规范，反而为了插画的衍生要更注重人物构造、比例、小组件等等，目的就是为了成立个人插画轴心。（注：个人插画轴心是针对于第一个插画系统的原型，我们后面的插画风格衍生都会参照第一个插画系统的原型，后面会给大家详细讲解）

 

02-使用效率：

品牌插画组件库：使用更加，拖入即可更换组件使用；

个人插画组件库：因为我们采用的是不断迭代式做法，所以在刚建立个人插画组件库时，我们的组件替换效率是比较低的，但是在逐渐迭代中，我们的使用效率会逐步提升。

 

03-拓展力：

品牌插画组件库：因为有很多规范的约束，所以拓展力偏弱，不过针对于自己的品牌已经足够了，它本身就是为了自己的品牌服务的；

个人插画组件库：因为从我们插画组件库的层级分区来看本来就是为了衍生拓展，所以拓展力非常强，不仅可以衍生出相同类型的插画风格，还可以衍生出不同类型的插画形势，甚至可以以个人插画组件库为基础创建单独的运营设计组件库，或者升级为品牌插画组件库。

 

3、个人插画组件库哪些人最应该去建立？

我认为UI设计师是最应该去建立的，在我们线上接触的banner、功能页、启动页、海报等等，很多都可以用到插画去设计，不管是针对于在公司还是针对于自己私下接私活都是一大利器，可以让你的完成甲方的任务，更大程度保证设计的统一性以及输出的质量。（相信大家都遇到过到处找插画素材拼凑banner的时候吧，有了个人插画组件库就不用愁了）

当然除了UI设计师还有插画设计师、平面设计师、美工也都可以去建立插画组件库，不过具体还是要看每个人所接触的不同设计内容，有些设计师的设计内容很少接触到插画部分，或者很少接触到可以组件化的插画（比如材质复杂、偏手绘插画），所以就没有必要去建立插画组件库。

 

二、如何建立个人插画组件库？

 

想要建立个人插画组件库就要从它的本质特点出发去考虑，个人插画系统归纳下来一共有三大特点：可复用、适应力强、效率高。那么接下来我会围绕着这三点来阐述该如何制作UI设计师个人的插画系统。

 

1、可复用性方向出发设计

可复用性是做插画系统的一个基础，如果不能解决可复用问题，那么做个人插画系统根本没有任何意义。

如果想要达到插画可复用性，我们就要把插画内容进行不同的拆分，在它可替换的部分都作为一个复用样式，让它可以更换不同的组件，那么我的解决方案有五步：

 

第一步：

设定基础人物组件（肢体细节、型体比例），规范组件内容。如果你是第一次做人物组件，可以多在网上找一些可参考内容：

下图是我做的一个基础人物组件案例：

从人物组件上面来看我一共把它们分为了9个小件，它们分别为：头部、上身、上臂、前臂、手掌、臀部、大腿、小腿、脚掌。

从人物比例来看，男性比例为10a，男性略高，上身宽大，整体壮硕；而女性比例为9a，稍矮于男性，纤细苗条。不管是男性还是女性整个身体构造简单常规，符合真实人物比例，有利于后期的组件改造。（第一个插画组件最好使用常规比例，后面会提到为什么要这样做）

在人物组件上的划分并不是固化的，你可以把它细化分为9个部分，也可以分为7个部分，如果分为7个部分就把上臂与前臂统一融为手臂，大腿与小腿统一融合为腿部，到底要怎么去进行组件化，还是要取决于自己设计的插画人物特性。

除了男性、女性外也可以建造更多的人物进来，例如老人、小孩、婴儿...人物越多，后续的延展空间也越大，前期为了更快的制作插画组件库，可以先建立1到2个人物，后续可以逐步完善迭代。

 

第二步：

为了后期人物的动态延展，我们可以用人物组件制定一些高频的人物基础动态，例如标准站姿、坐姿、跑动等，以便于我们插画的延展，图示如下：

做人物基础动态可以让我们在后面的插画设计上少花很多时间，例如工作中要用到跑步动态时，那么就可以直接用人物基础动态里面的跑步动作进行添加人物细节，会节省很多工作时间，提升工作效率。

 

第三步：

有了人物组件的基础，我们就可以开始设计插画的风格。

在设计前我们可以多参考一下别人的插画风格，这里所说的风格主要是指插画的处理方式，比如：颜色的选择、表情的处理、衣服材质的处理、曲线直线的选择等。

我们需要注意的是建立第一个插画系统时可以先做一个风格简单的，不仅容易调节组件也有利于后期的风格衍生，以下是我为人物添加的简单基础风格（ 特点：纯色/完全按人物组件贴合设计/无渐变）：

第四步：

设计人物组件（可以让你的插画在不同的场景应用不同的动作/服装/表情/肤色等）

 

1/发型：

在发型上面我们可以进行一些人物的区分，可以适用于不同的场景，例如：男性第一个适用于公司场景，第二个适用于学生，第三个适用于军人...

2/肤色：

做肤色的变化最主要原因是让插画适应于国际化，在不同的场景中可以加入不同肤色的人物。

3/表情：

表情是为了更好的体现出人物在环境中的状态，如：领取红包插画，人物的表情就应该是开心或者大笑。

4/角度：

在插画的角度上，我们采用了最常用：正面、半侧、正侧，让它在插画中的适应力变得更强。

5/纹理：

我们目前设计了6个基本纹理，基本纹理不仅可以设定于服装中，还可以设定于辅助元素以及背景中。

6/服装：

在整个人物组件中，分为3大块可替换服装组件，分为别：上身、下身、鞋子。例如上身可以替换为短袖、长袖、卫衣、背心等，同时在它的下一个层级还可以替换服装纹理、服装动作、服装颜色。

结合以上的人物组件我们就可以组合出各种不同的动作，如下：

第五步：

设计通用组件库：

通用组件库中的元素最开始要用黑白灰来表达，因为在不同的场景中元素的运用也有很大差异，例如花盆作为近景元素会多许多细节，作为远景元素可能只是作为线条来点缀，这些表达方式我们可以在日后使用过程中添加到它的子级库即可，这样可以让我们在使用组件库时更加灵活，也有利于我们迭代组件库，后面会逐一的讲解。

这5个步骤下来我们的可复用性插画就做好了，那么接下来看看运用效果：

 

我们可以看到以下4个场景，运用到了不同的景别处理方式，例如：第一组为背景渐变；第二组背景则采用了大面积的纯色；第三组背景用线性表达；第四组则用浅色面表达。

 

这也是与品牌插画组件库的很大区分点，虽然都是可复用性插画，但是品牌插画组件库大部分是使用现有的、具有规范的，而我们所做的个人插画组件库可以用同一个辅助元素增添不同的插画表达形式，不断迭代子级，迭代的子级越多它的内容选取性就越高，后续就可以直接拖入使用，比如图4中的植物就有2种状态，第一种是显示部分颜色，第二种则直接为灰色。（注：后面会详细讲解）

以下活动页中，背景元素也可以运用同样的方法，在我们的背景组件库中调取想要的单个插画元素，把它们组合放入活动页背景中，进行再次调色得到不同的背景组合，以下三种背景组合都可以相互替换使用。

2、让你的插画具有极强的适应力

适应力强是指我们的插画系统可以匹配大多数的产品，因为个人插画组件库是以设计师身份做的，我们会面临各类产品，而各类产品风格都会有不同的变化，要解决这一点我们可以使用以下三个方法：

 

方法一：改变人物结构

例如：你想为产品A做一些插画类的功能页或banner时，发现你现有的第一套插画组件库并不符合产品特性，产品A想表达更多夸张的成分，而我们所做的插画系统显示更多的是柔和与大众，这样就完全不匹配，那么我们就要去改变一个基础点，那就是人物结构，通过人物结构的重组我们可以得到想要的夸张效果，那么我就男女各举一例结构重组对比图，如下：

我们为了在身体结构中达到人物夸张的效果，在原有10a比例不动的情况下对原本的身体结构做了重大调整，男性：上身的缩短，下身的延长以及手部脚部的突出；女性：整体更加硬朗，手脚放大，腿加长。

 

如果把他们用相同的插画风格表现出来，就会出现如下效果：

当你在做人物结构调整时，你会发现有一个常规的人体结构作为基点去设计是多么重要，也就是之前所提的为什么第一版插画组件让你做常规的，因为如果不是常规人体结构，调整起来会非常麻烦，就很难有参考意义。

 

方法二：改变插画风格

除了人物结构外我们还可以更多的考虑插画风格，通过不同的插画风格去适应不同的产品，例如：线面/渐变/杂色/极简...同样我就男女各举一例，如下：

上图改变风格后，男性的风格则更偏向于线条的表达与高亮色调；女性的风格则简单直接，更注重凸显配色的碰撞。

 

方法三：改变人物结构+插画风格

在上面两种方法中除了已有的基础人物结构A与插画风格A，我们还得到了人物结构B、C与插画风格B、C，如果我们用人物结构B（或C）与插画风格B（或C）结合又可以形成新的插画状态。

按照这样的方式下来我们就可以逐步添加自己的插画系统，假如当你的插画系统人物结构有5组、插画风格有5组时，你就可以组合出25组不同的插画，这样你的插画系统适应能力就极强了，甚至你要为产品做插画系统时，也可以大幅度参考你的个人插画系统，当然这一切都是需要自己去慢慢迭代添加的。

 

3、用软件规范插画组件库（层级详解），提升应用效率

为了更好的替换组件，提升输出的工作效率，我们可以从一开始就使用软件对插画进行管理。市面上可以提供复用样式的软件也蛮多的，这里我就使用应用率最高的Sketch来进行讲解。

 

首先我给大家讲一下我的插画组件库的构成，我的插画组件库一共分为了5大块，分别为：人物组件库、非常规人物组件库、动物组件库、辅助元素组件库、辅助背景组件库，而这5大块中也细分出了很多小层级，我就一一为大家分析下我所用的层级。

我们可以从以上图中看出从风格分类开始直至最小的组件，我用到最多的层数是5层。

如果大家看的有点懵，我们就拿一块从层级1到层级5举例说明：

风格分类（A）-角度分类（正侧）-四大组件（下身）-动作（B）-颜色（B）

这里所用的是sketch复用样式中的“套中套”，“套中套”的组件方式看似复杂，其实挺简单的，并且在软件中换取都在大组件内，因为不是软件讲解所以就不带入过多的软件知识。

在制作时我们不要想着一次性就做出很多小组件，比如你想做表情时，一来就想做10多20个全部包含完，其实没有必要，我个人是比较建议最开始小组件做个3-5种常用的就可以了，因为组件库是要不断添加优化的，所以可以在后续工作应用中再不断的添加。

 

有了层级的划分，我们可以用sketch的复用样式简单、的规范插画组件库，想要覆盖替换组件内容也是十分方面，如下：

 

2/非常规人物组件库

 

除了常规的人物组件库外，我还单独罗列了非常规人物组件库，这一类组件库主要是作用于人物特殊的动作形态，比如下面3个透视类的插画动作形态，这些动态与常规的插画组件库的内容很多是不互通的，比如脸的角度、鞋子的角度、身体的透视尺寸，所以我们就单独给他罗列一个非常规人物组件库。

都是同为组件库，当然也有可替换内容，非常规人物组件库与常规的人物组件库的层级逻辑有所不同，常规的人物组件库是用小组件替换人物动作，但是非常规人物组件库是先替换整体的动作然后才可以替换小组件，这也是对他的特殊化管理。（注：不想舍弃它，又不想为他做出更大的调整，所以就单独让它成立出来。）

 

根据非常规组件库的设定给大家做个小案例：

以上可以看出我在这个透视化的插画人物中可以替换表情、发型、纹理、上身、下身。

 

3/动物组件库

 

我这里做的动物组件库是用来辅助人物以及调和场景的，所以在层级划分上并不会做的非常细，满足我的日常插画需求即可，当然如果你想把动作组件库做的非常细，那么可以参照人物组件库的层级来划分层级。

 

根据我使用的动物组件库层级，给大家举一个正确小案例与错误小案例，先看下错误小案例：

可以看到下图（狗子）是一个非常粗糙的动物组件库，里面只能替换动作以及动物的动作，当选在狗子的状态下，狗子除了换动作没有其他的组件选项，虽然我想让动物组件库简化，但是也不至于什么都不能替换。

接下来看看正确的案例：

我们可以看到在猫咪的状态下就有很多组件可以选择，不仅可以替换猫咪的动作，还可以替换展示形式（展示形式我是按照景别来做差异化，当然也可以用其他方法）、猫咪表情以及猫咪的颜色，这样的动物组件库已经完全能够满足我的设计需求。

 

4/辅助元素组件库

 

辅助元素组件库层级最好要添加景别，因为我们经常会遇到同一个元素在不同产品中体现出不同的景别，如果不区分，在选取组件时就非常的伤脑经，经验之谈、强烈要求。

为了大家更好的理解，我给大家举一个小案例：

我们可以看到我不仅可以切换元素，还可以切换景别以及颜色，至于其他的小组件我并不需要，因为这些已经足以满足我的日常运营设计需求，这个层级划分简单实用非常推荐。

 

5/背景元素组件库

 

背景元素组件库一共分为两种类型，分别为：组合场景背景与纹理背景。

 

组合场景背景：

组合场景背景是用辅助元素组件库拼凑而来，它是一个可以直接用的完整场景，想要替换的组件如果在辅助元素组件库能够替换，那么在背景组件库也是可以的。（注：这里牵涉到组件库的重组调动，在后续出的文章中会详细提到）

上面的插画由白天变为黑夜只需要用组件库就能轻松完成，而这些组件库也不是现做的，全部是辅助元素组件库里提取过来的，也就是我所说的组合场景背景是用辅助元素组件库拼凑而来。

大家可以发现插画中山上的小房子只用一个组件就可以全部替换颜色，而左右两边的树却要做6次不同的替换，树木需要多次替换的原因这就是没有做重组，如果想要相同元素做相同的替换，那么建议在调换过程中重组组件，优化层级。

 

纹理背景：

纹理背景相对于来说就是最简单的，它里面只存在纹理的不同样式，并且只可更换颜色。

三、人物插画组件库如何结合到运营设计中？

 

1、创建常见运营设计规范

 

在做设计前，我们先要做好运营设计的规范，以便于组件库的插入应用。

 

那么我就用卡片弹窗来举例：做设计前我们先确定卡片内容，当内容确定后，根据内容进行卡片的运营设计规范：

我们需要注意的是初步规范里并不需要涉及到用什么字体，也不需要罗列出插画的尺寸规范，我们可以在后面的设计中一步步去实现。

 

2、结合运营设计的两大方法：

 

当规范做好时，我们就可以利用规范去制作相应的组件库，利用组件库来结合运营设计，按照不同的情况可以分为以下两种方法：

 

1/重组组件库（无人物动态组件的情况下）

在一些运营设计中，如果我们要用到的人物动作之前并没有做过，那么就需要我们重新设计人物动作，设计完后再把可以重组的人物组件拖到我们现在的组件中进行重组，分以下几步进行：

 

第一步，根据卡片的规范做出卡片的设计内容，如下：

第二步，把设计好的内容分板块，以便于组件库的层级划分。在这里我把他们一共分为了4个大块，分别为：文字组件、人物组件、辅助装饰组件、背景元素组件。

 

第三步，在大的板块下划分小组件，结合小组件就可以得到我们组件库的层级，可看下图：

在小组件里，很多都是个人组件库里原本有的内容，这时我们就可以把它们拖进来进行重组。

假如你替换的元素不够用，那么就需要你自己手动设计了，这样也能反过来扩充你总的人物组件库内容，其实组件库的内容就是这么一点点迭代添加的，当你的组件库内容越来越多时，你的设计成本就会越来越低。

 

三步下来我们就把组件库融入到了运营设计中了，有了新的子级运营设计组件库。

 

2/直接替换（有人物动态组件的情况下）

如果你做的运营内容组件库里都有，那么就可以按着规范直接拖入即可，也没有必要去进行重组。

总结：

总的来说组件库的建立是一个庞大的工程，在你有了基础架构的时，你就要慢慢往里面塞更多的内容进行填充，当你的内容足够多时它就可以反向为你提供更多的便利，它是你的宝贵的设计资源库。

 

因为这期的内容实在太多，所以插画组件库的应用、运营设计常用模块组件案例、重组技巧以及品牌插画组件库的建立我会另外抽时间给大家总结。（做案例太费时间希望大家谅解）

 

参考资料提取：

我为大家提供了一些组件库的可参考性文件，里面包含成套组件库（sketch）、成套的插画图片、宣传动画、一些参考性的图片（构图、表情、发型等等）。

文章来源：tob.design     作者：黑狮力

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