在当今互联网快速发展的情况下，每个行业竞争都非常激烈，所以对于我们设计师而言，有时候项目的周期也非常紧迫，导致当我们接到需求时，很容易会遇到这样的问题：需求方解释不清楚，设计师不知道从何开始，对项目也是不了解，后面临时想到什么就问什么，使我们工作效率低下，也会让对方觉得你很不专业，做完的方案，需求方不满意，改了又改，浪费了很多宝贵的时间。

那么我们如何在项目周期紧迫的情况下，通过有效的沟通准确的输出运营设计方案呢？下面，我将和大家分享一些我在日常和需求方沟通的一些小技巧。

什么是有效的沟通？

所谓有效的沟通，是通过听、说、读、写等载体，通过演讲、会见、对话、讨论、信件等方式将思维准确、恰当地表达出来，以促使对方更好的接受，使双方就某个问题可以达到共同认识的目的。

如何在工作中进行有效沟通？

当接收到一个设计需求时，不要忙着动手开始做，要先去与需求方沟通清楚，如果少了前期的沟通，后期你可能会在无休止的改图中，一点点的不仅失去了耐心，还磨灭了激情！

1. 前期准备阶段

首先了解项目背景、活动的文案和玩法以及活动的目标及用户人群。

根据活动的文案和玩法去网上搜索一些针对性的有启发性的图片案例作为参考，用来初探需求方的喜好，明确接下来该走的方向，最后达成对风格的整体认知。同时要整理好自己的设计思路。

2. 沟通阶段

随时记录

带着前期准备的内容去和需求方沟通，把自己的一些设计想法给对方讲清楚，这样做能保证我们在和需求方讨论的时候能做到心中有数，不会被牵着走！

与需求方沟通时随时记录在沟通中对方的想法，比如需求方想重点突出表现什么，想营造出什么样的氛围等。也可以记录在讨论中一些好的创意，再结合自己的思考运用到实际中。

「沟通过程中的 3 个小技巧」

先听：这一阶段很重要，一定要以求知的心态去了解需求，不要拿着一个自认为的结论去沟通，因为产品在提出需求时，也一定是经历过多次推翻自己的想法，最后才选择的这一版方案及玩法。

后问：这个时候有不明白或者没有理清的地方要及时的提问，问题要明确，避免后期重复沟通。

再复述：将接收到的信息总结后与对接人复述，查漏补缺，确认下没有出现任何的遗漏。

达成共识

前面的所有点都确定好了之后，这时候我们已经与需求方达成共识，就可以进行设计阶段了。

下面我将通过实际案例，具体说一下我是怎么通过有效的沟通与产品达成共识，从而减少多次改稿的问题的。

案例：到家精选双 11 预售专场

1. 前期准备阶段

项目背景：

此次双 11 大促活动借助京东这一平台，增加品牌的曝光度，吸引用户下单，为业务线吸引更多的流量，促进转化率。

头图文案：

• 主标题：保洁服务，11.11 预售专场
• 副标题：日常保洁 3 小时预售，仅 85 元

活动的玩法：通过预售提前付定金，享受折扣这样的活动方式来吸引用户。

针对的用户人群：用户群体年轻，女性占比较高，超过 80%的用户在 35 岁以下。

参考的搜集和对设计的想法

由对第一点的总结，得出设计目标：

• 着重渲染双 11 大促氛围，突出品牌调性。
• 采用三维场景搭建，趋于年轻化，加上到家精选专属优惠券和金币，再次刻画品牌，也使画面更加热闹具有层次感。
• 用到家的 LOGO 的小房子进行延展，用 C4D 搭建室内保洁阿姨打扫房间的场景，作为画面的主体，符合到家精选品牌性。

参考图的搜集:

了解完项目的背景，和对项目进行初步的思考之后，就可以带着自己的想法和参考图去找需求方沟通。

2. 沟通阶段

随时记录

给需求方看参考图，他们对用 C4D 搭建场景的创意表示认同与支持，也很期待。

在讨论时也说出了他们的诉求（这时候要拿小本本记下，好记性不如烂笔头）：

• 突出优惠券和定金抵扣内容，吸引用户点击
• 会员专享区块与整体页面风格统一
• 首屏要有大促氛围的沉浸感

达成共识

与需求方沟通完需求之后，心里有了方向和发力点，结合需求方的诉求和自己的思考，就可以胸有成竹的往下进行了。

这几个步骤虽然看似简单，但是做到了这几项，产出的设计稿可以减少改稿的次数！

最终设计结果：

把需求方说的每个点都着重考虑到，以免等完稿的时候再修改。

结语

最后我们来回顾总结一下

不管项目大还是小，每次做完都要去做一个总结复盘，把遇到的问题记录下来，多思考是哪个环节出了问题，或者请教有经验的同事,逐步优化自己的沟通流程。养成良好的沟通技巧，这样对于在下一次接到新需求的时候不至于手忙脚乱，做到心中有数，这样会大大的提高自己的工作效率！

如何有效沟通是一个需要长期去总结思考的事情，只要掌握方式方法，再经过刻意练习，就一定会有好的结果。

文章来源：优设网     作者：58UXD

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

编辑导语：如今可以说是短视频时代，各种短视频平台充斥着我们的娱乐生活，在如此快节奏的时代，碎片化的时间刚好可以被短视频满足；本文作者分享了关于短视频【单列沉浸式】的分析，我们一起来看一下。

谁能统一短视频领域？

抖音？快手？还是视频号？

目前来看，这个答案是【单列沉浸式】。

准确来说，单列沉浸式不是一款产品，而是一种产品形态。

过去这一两年，抖快两极越发明显，格局变化不剧烈的短视频领域发生的一个还算比较明显的变化是，所有的短视频都开始在产品形态上向抖音看齐了。

包括快手、微信视频号，甚至微博小视频，主流的短视频产品都已经全面拥抱单列沉浸式。

图：抖音（左1）、快手（左2）、视频号（左3）、微博（左4）

这是不是可以证明单列沉浸式就是短视频消费的最佳形态？

无论是成熟的老产品快手和微博，还是初出茅庐的新产品视频号，为什么短视频难逃单列沉浸式的真香定律？

如果要找一个正确的角度去切入，主要包括三个维度：

• 单列沉浸式更加适合短视频消费；
• 单列沉浸式让用户消费的时长增加；
• 单列沉浸式的商业化更加理想；

01

单列VS双列，沉浸式VS非沉浸式，到底区别在哪？为什么说单列沉浸式是更加适合短视频的消费呢？

短视频是高度碎片化、kill time式的消费，这个消费有个非常大的特征，就是无脑，也就是用脑成本极低。

图：系统1（左）、系统2（右）

我们在刷短视频的时候，大部分时间是处于左边的系统 1 状态，是快速的、本能的、自动化、情绪化的大脑工作状态，用脑成本低。

为什么同样是2个小时，明明可以完整看完一部电影，很多人仍然选择用短视频来消费？就是因为看短视频不需要动脑，只要被动的接受平台投喂的多巴胺、肾上腺素和荷尔蒙，产生愉悦感就好。

长短视频获得的快乐自然是不一样的，长视频虽然也大量充斥着价值极低的内容，但普遍认为长视频的内容价值远远高于短视频；因为长视频是比较完整、系统的去阐述，比如说长时间铺垫后的高潮、明线暗线的多方交织、一波三折、高潮迭起的情节等；而这些更加高级的价值感都是需要大脑去思考、分摊到时间上面才有意义的。

用户在看长视频是相对高唤醒的状态，在看短视频是相对低唤醒的状态。

单列沉浸式是更加完美的契合这种无脑状态的，因为它的消费成本更低、体验更好。

02

首先是单列相比较于双列，是更加短平快的消费方式，可以减少用户的思考、选择和操作。

在单列中，用户切换视频只需要上下滑，播放完自动切换甚至无需成本；而双列中，用户需要返回重新选择并点击观看；切换视频的成本，双列高于单列。

图：单列消费路径（左）、双列消费路径（右）

短视频因为时长极短，意味着用户在单次消费的过程中会消费非常多的内容单元，每多消费一个内容单元，双列与单列的成本差就会进一步扩大，双列成本相对的就越高，单列成本越低。

因为单列消费路径短、消费成本低，在相同的时间内，单列比双列能够看到的视频数就更多，效率就更高。

当然，双列可以给用户更多的选择，提高系统整体的容错率，但是这个选择的收益本身就不大；因为短视频价值极低，时长又极短、消费成本极低，这代表着选择的ROI低、选错的成本也低。

不妨将选择的成本分摊到视频消费时长中，长视频因为时长很长就会比较划算且必要性强，而短视频因为时长极短就不划算且必要性弱。

而且现在推荐系统越来越准，在短视频的消费中比人的主观选择还要准，基本上是抹掉了选择带来的收益，还省了选择的成本。

所以单列是比双列更加适合短视频的。

而沉浸式为什么比非沉浸式更加合适，是因为沉浸式可以使用户更快、更好的进入视频情境之中；而忘记真实世界的情境，因为没有其它视频信息的干扰，能够让用户只专注于当前的视频。

图：可对比视频号单列沉浸式（左）和单列非沉浸式（右）

抖音负责人张楠曾经将抖音的成功在消费端归结为“全屏高清、音乐、个性化推荐、传递美好”四个因素。

全屏高清其实对应的就是沉浸式的消费体验。

手机中的原生相机拍出来的视频就是全屏的，如果将一模一样的短视频放在不同的尺寸上去看，全屏效果无论是视觉冲击力，还是进入其中、身临其境的感受上都是最强的。

这说明全屏高清是当时沉浸式在视频尺寸和清晰度上体验最好的形态，到了现在，全屏依然是最佳，清晰度却已经变成了1080P甚至更高。

单列沉浸式的消费体验更佳、成本更低，且非常适合短视频这种无脑式的kill time消费，自然是最佳的消费形态。

同时，这种形态也是产品上瘾的基础之一。

03

为什么刷抖音会上瘾，停不下来，一刷不知不觉就一两个小时了？

主要的原因可以归结为两个，第一个是用户持续无脑、愉悦的状态，跟短视频的内容有关；第二个则是因为单列沉浸式上下滑。

沉浸式的视频构建了专注的情境，让人忘了时间的流逝；而单列上下滑切换视频成本极低，切换时间极为短暂，这点非常重要；因为这意味着用户基本无缝切换视频，无脑、愉悦的状态不会因为切换而被打断；上下滑简单、不用思考，容易形成习惯，甚至是自然反应。

用户打开抖音不知不觉就继续看下去了，不喜欢就立即划走，像个快乐的魔盒，没有尽头，自然而然就上瘾了。

上瘾后用户时长也就增加了。

时长的增长可以看做是短视频目前阶段绝对的核心指标，首先是因为短视频本来就是杀时间的利器，时长代表着一切；其次则是因为短视频用户数量的增长已经趋缓，只能靠争夺时长来保持增长。

• 时长增加，代表着平台给用户提供的价值增加，因为帮助用户杀的时间变多了。
• 时长增加，代表着用户生命周期价值增加，因为可变现的时长也增加了，用户给平台贡献的商业价值就变大了。
• 时长增加，也代表着打击了竞争对手，因为时长是绝对的存量竞争，人一天24小时是固定的。

这也是为什么那些原本不是单列沉浸式的短视频敢改版的原因，强推一个新的功能尚且要考虑用户的旧习惯、是否接受、学习成本如何，何况这是完全另一种产品形态。

单纯拿用户体验提高是无法有效说动的，因为没有数据去论证用户体验到底提没提高、提高了多少，大厂的产品运营都背着严重的KPI或OKR，但是用户时长的增长就是最有利的支持。

04

单列沉浸式对于平台商业化的贡献其实可以基本从单列的角度去分析，主要有两个层面：

NO.1 单列的变现效率远高于双列。

以目前最主流的信息流广告为例。

单列比双列消费的路径短、成本低，同样的时长内，单列比双列能够消费的视频总数更多，也就意味着可消费的广告更多。

更重要的是，单列的内容推荐完全由系统决定，用户无法选择，系统对流量可以做到100%的精准把控，决定推荐给用户内容就内容，决定推荐给用户广告就是广告；抖音可以做到让广告跟内容一样100%的曝光到用户面前，目前抖音基本上是每5个内容就插一条广告。

双列由于在消费路径上，还需要用户去选择点击观看，意味着转化路径多了一个环节：从瀑布流的图片封面到内容观看的CTR转化率。

双列形态下，广告的CTR是不可能达到跟内容一样的。

据快手《2019快手创作者报告》披露，快手的内容CTR为20%，但是根据【乱翻书】对实际从业者的访谈，内容CTR和广告CTR的差距要比想象中更大，甚至达到5-10倍的差距，也就是广告的CTR可能只达到1%-2%。

当然，有人说双列因为有了用户主动选择来表示较为明确的需求，所以理论上是可以为每个点击收取更高的价格，类似于搜索广告的价格远大于展示广告，有没有可能正负为零，完全弥补曝光率的不足？

很大程度上是不可能。

双列仍然是展示广告，它跟单列的差距会在一个有限的范围内，搜索广告之所以点击价高出这么多；除了明确的意图带来的高匹配度之外，另外一个很重要的就是搜索是比较急迫的需求，急迫的需求+高匹配度才使得搜索广告的溢价高。

而日常我们刷抖音快手这些娱乐性质的短视频是没有这些急迫的需求的，是需要短视频平台展示的广告来切中或者激发我们需求的；这也是为什么双列形态下，广告的CTR达不到跟内容一样的原因，娱乐性的内容跟广告的内容是不统一的，用户的心理接受度也不会很高——用户上来是看包袱消磨时间的，不是买买买的，而人的主观选择也会趋向于避免广告。

那么单双列展示广告的点击价的高低就来自于命中需求的准确程度+展示效果了，准确率由推荐系统决定，关乎算法和数据；而数据的维度是来自于非常多层面的，不仅仅只是点击广告的数据，所以这方面就算有差距也很难说差距多大；而展示效果的话，单列沉浸式的【大屏+视频】的展示效果远高过双列下的【小屏+图片】。

所以很可能的结果是，单列和双列的广告点击价之差在一个合理的范围内，是很难完全抵消掉内容和广告CTR的差距的。

这样综合来看，单列的变现效率是高于双列的。

单列不仅增加了用户整体变现的时长，同时也提高了整体变现的效率，因为增加的变现时长不仅仅来自于新增的总用户时长，也来自于抢夺了其它消费形态下的时长；比如说快手的单列会抢夺双列的时长，而因为单列变现效率比双列高，所以也提升了变现时长在用户消费总时长中的比例，提高了整体的变现效率。

05

NO.2 单列双列会造成不同的内容生态，影响到公域和私域的强弱，进而影响到平台的整体变现效率。

单列相较会强内容、弱关系，因为单列完全是系统推荐什么看什么，容错率低，系统往往就倾向于推荐头部优质的内容；而双列就弱内容、强关系，因为双列除了系统推荐之外，还要用户主动选择，加强了整体的容错率，所以系统推荐的内容就会更加多元。

相较而言，前者私域弱、公域强，后者私域强、公域弱，而公域强才有利于平台变现。

公域强意味着平台对于流量的掌控权，快手老员工就在内部信中提到：

双列下kol的私域流量粘性太高太强势，很不利于我们把用户的arpu（每用户平均收入）持续做高(直播电商虽然现在势头很好，但本质是kol的私域流量太强，所以我们公域的短视频推小店效果不好)，那么今年流量分配也要重新调整……

私域强是有利于平台创作者，公域强才能肥了平台自身，淘宝、拼多多和美团等超大型交易平台之所以收入这么高都是因为强公域，更好的掌握了流量的分发权，进而更的变现；抖音之所以成为超级印钞机，也是因为完全掌握了流量分发，公域能力极强。

单列可以将流量的分发权更加集中在平台的手上，提高了平台整体的变现效率。

或许是基于单列沉浸式在商业化上的这些优点，现在连以双列和中视频为主的B站都坐不住了，也开始加入单列沉浸式。

图：B站的【单列沉浸式】

B站因为文化氛围好、私域强，无论留存还是用户时长都很理想，但就是整体变现效率低：双列下信息流广告不好变现，同时也为了文化氛围而束手束脚。

新开一个单列沉浸式可以说是创造了新的消费场景，同时也有助于提高变现效率。但中视频在B站的单列沉浸式的视频中占据着比较大的比例，未必会真香。

06

短视频之所以真香，归根到底还是跟短视频这种载体和消费场景密不可分。

短视频因为冲击强（体验好）、消费成本低，所以非常适合碎片化、kill time式的消费。

冲击强跟视频这种载体有关，视频比文字、图片的冲击性更强；

而消费成本低则跟时长有关，因为时长极短，所以消费成本极低，同时时间弹性也极高，又因为时长短，很难承载比较有深度、有价值的内容；再加上碎片化的消费场景，所以用脑成本极低，看短视频大多数时候都是无脑状态。

商业的进化必然是往体验更好、成本更低、更加的方向去进化，单列比双列、沉浸式比非沉浸式的体验更好、消费成本更低，更符合短视频碎片化、kill time式的无脑消费；

但B站的中视频已经有点脱离了这个场景，中视频已经可以承载一些有深度、有价值的内容，很多人在B站也并非完全是单纯的kill time，而是看财经、涨知识等，需要用脑思考，消费成本也比较高。

在这个场景下，双列的多选择、强容错就是有必要的，因为选择的RIO变高了，选错的成本也高了，所以B站做单列沉浸式未必会有短视频这么香。

当然，B站也可以学微博，单列沉浸式只展示短视频，无异于在内部开一个抖音，创造一个完全的短视频产品。

具体会如何，拭目以待吧；希望对你有帮助。

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

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

完美，不是因为没有什么可以增加，而是没有什么可以减少。

创建美观、可用和的UI界面需要花费时间进行设计细节的打磨，本文从视觉和情感化设计两个方面来说说如何提升UI设计的高级感。 

1、视觉元素

在互联网产品日趋成熟的今天，你会发现所有的App越来越像，似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重，使得设计不精致，产品没有气质和品牌感。一个App设计是否精致，是否富有设计感，在于它的细节，这就意味着我们在进行设计的时候，要从细微之处着手，从多方面去钻研如何创造出打动人心的UI设计。本节总结了12个简单直观的提升设计感的小细节，一起来学习。

1.1 使用颜色深浅构建层次结构

在对UI 文本进行样式控制的时候，最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比，所营造的对比并不够，尝试结合色彩和字重来营造更好的对比效果。

每种颜色都有一个视觉权重，这有助于在内容中建立层次结构。通过使用颜色的深浅，为元素赋予不同的重要性。如果可以的话，你甚至可以采用两到三种颜色：

• 主要内容使用深灰色（诸如标题，但是不要用纯黑）
• 次要内容使用灰色（比如商品介绍）
• 辅助性内容采用浅灰色（比如发布日期）

类似的，在UI设计的时候，通常两种不同的字重足以营造出优秀的层次感：

• 大多数的文本采用正常的字重（400到500，具体取决于字体）
• 对于需要强调的文字采用较重的字重（600到700，具体取决于字体）

▲主标题字重为600，其他标绿点的文字字重都为400

应当尽量不要让正文部分字重低于400，因为这一部分字体本身尺寸已经较小，低于400会使得可读性不佳。如果你依然需要降低字重，那么不妨让字体色彩更浅一点，或者替换成其他识别度较强、字重相对较小的字体。

灰色文字在无彩/彩色背景下要分开处理

不要在有色背景上使用灰色的文本，在白色背景下，将黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不错的淡化其视觉效果的做法。

但是在彩色背景下，想要降低和背景色之间的对比，通常有两种方法：

一是降低白色文本的不透明度；二是让文本逐步接近背景色，而不是改为灰色。

▲左图设计师职位信息为白色文字降低不透明度，右图为和背景同色相高明度的颜色

其次当涉及长篇内容时，大面积的深色粗体字会给人一种沉重感，而且很跳跃。通过选择类似深灰色（#4F4F4F）这样的颜色可以很容易地解决这个问题，使文字更容易被识别。

1.2 统一色调

选择一种基础色，再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许，只需使用固定的色板，通过调整基础色的饱和度和明度，利用这种简单的方式为设计增加一致性。

1.3 干净的阴影

阴影是UI设计中最常见的视觉表现手法，它可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意力，同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。

这种轻柔的阴影呈现出的干净，增加了画面的精致。如果阴影的范围太小或颜色太深，位置也没有偏移，而是聚集在元素的四周，就会让画面更加扁平，让视觉变得厚重，呈现出不精致的画面感。

还有一种扩算阴影是模拟元素本身的颜色投射在背景上，由于阴影与元素的色调一致，因此呈现出十分融洽的画面感。在UI设计中，这种手法不宜过多使用，否则呈现出的各种色彩搭配会让人眼花缭乱。

1.4 个性的图标设计

合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致，圆角一致，线宽一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？例如下面这组图标设计，无论是在图形上的创新，还是颜色搭配上都呈现出无与伦比的创意。

标签栏作为一个App的全局导航起着至关重要的作用，它的设计影响着整个产品的视觉风格。通常，大多数App都是使用iOS规范的设计样式（默认灰色，选中填充品牌色），这样的设计太普通，太常见了。要想让标签栏图标设计精致和富有个性，可以丰富每一个选中态图标的视觉表现，例如给图标加上背景和表情，即显得生动有趣，又增加了用户的好感，给人留下深刻的印象。

3D立体图标设计是近几年来的流行趋势，看上去十分精致、华丽，但是看久了会让人产生轻微的视觉疲劳，同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。

1.5 Tab的设计感

Tab是App设计中最常见的控件之一，它源自Material Design的设计规范。现在很多iOS产品当中也开始使用这种导航栏样式来进行设计，而原本属于iOS规范当中的分段选择器变得不那么常见了。

在视觉表现形式上，Tab和标签栏同样也分为选中态和未选态，它的设计较为简单，通常是使用一组文字标签，通过颜色或在标签下加上小长条来区分两者的状态。因为它简单，却越难设计出彩，要发挥极大的设计想象力，跳脱出设计规范的限制，才能找到完美的方案。例如虾米音乐的Tab选中态是一段音频波线，再配合文字的大小对比，一个富有设计感又符合产品特征的Tabs就被创造出来了。

我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条，这样就建立起视觉上的联系，让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上，既让界面视觉，又进一步强化了用户对品牌形象的认知。

1.6 无框设计 去繁从简

在UI设计中，有许多的装饰元素，如卡片的边框、列表的分割线等，虽然边框，分割线是分隔两个元素的好办法，但是它不是唯一的方法，使用过多会让整个布局的设计感降低，或多或少都会干扰用户浏览的视线，让信息内容失去注意力，因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次，让画面变得干净，整齐：

使用阴影

阴影同样可以营造出边界感，而且相比边框分割线更加微妙，并不会显得突兀，不会分散用户的注意力。

使用不同的背景色来区分

通常，相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以，你所需要做的就是在不同的区块采用不同的背景色，并且尝试删除分割线，因为你根本不需要它。

增加额外的留白

创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。

1.7 统一设计元素

在App中的每一个界面都有许多元素，那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观，如椭圆矩形，也可以作为视觉符号的一种，延续到其他界面中，成为图形或按钮的外观。这样，整个界面就被统一的设计元素联系起来了，给用户始终如一的一致感。

1.8 符合产品气质的字体

选择符合产品气质的字体，可以与产品的定位相吻合，传递给用户正确的情感意识。虽然默认字体可以满足大多数App 的设计需求。但会出现一个问题就是，系统字体的普适性并没有什么特色，在一些特定的情境下就显得收效甚微。例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉，换成系统字体后，整体感觉在气势上就变弱了很多。

1.9 第三方图标风格统一

大多数App都支持三方登陆，他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口，这也是设计师最常忽略的内容，往往是直接将第三方图标调整一致大小和摆放整齐位置，没有针对它们再设计。一个设计精致的App不应漏过任何的细节，我们可以以自家App的图标风格为依据，对第三方图标进行优化设计。

1.10 图片中寻找色彩

App中优美的图文设计，能带给用户如沐春风的视觉享受，它非常重要。我们经常看到文字叠加在图片背景上的设计样式，为了减少复杂图片背景对文字的干扰，通常的做法是叠加半透明度的黑色蒙版，让白色文字清晰可见，但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色，这样就使文字、色块和图片融入到一起了，画面变得高级和富有设计感。

1.11 提高图片质量

图片的质量影响着整个App的格调和用户的情绪，高品质的图片给人愉悦的视觉享受，产生美好的联想。而低品质的图片会瞬间拉低App的质感。在App设计中，一张漂亮的图片从收集到上线，需要经过裁剪，调色等过程才能被使用。即使是普通的商品图片，我们将它抠图后调整成统一大小，再加上干净的背景，就能立刻提升商品的美感，界面视觉也会变得美观、整洁。

1.12 卡片式设计

现在的UI界面设计中，卡片式设计已经是一种非常常见的设计形式，它有利于信息分层和整合，划分出更加清晰的组织结构，实现复杂内容的简化处理，提高空间利用率。同时卡片式设计通常很依赖视觉元素，很强的视觉元素正是卡片式设计的一种优势，也是提升设计品质感的良方。

2、情感化设计

心理学认为，情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时，使他产生情感的变化，那么产品便不再冷冰冰，他透过眼前的东西，看到的是设计师为了他的使用体验，对每一个魔鬼细节的用心琢磨，人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈，有时候仅仅一句文案、一幅插图、一个动画就能打动人心，使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面，这些简单而美好的设计细节充满了积极情绪，它是满足产品的功能性和易用性之后，追求更高层次的目标。

2.1 提示性文字

语言是情感化设计最直接的利器，拟人化的对白相比冰冷的话语更能获得用户的好感，赋予产品的新的生命力。例如App那些push推送通知，因为用户每天收到的PUSH实在是太多了，早已心如止水！这个时候，你就需要一条成本低、效率高的PUSH文案，去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣，让人看到会心一笑。

2.2 下拉刷新

下拉刷新是用户在App使用中经常进行的操作，常见的下拉刷新设计是图标加文字的形式，这种设计简单、直观，但毫无设计感，不能引发用户任何的情绪。

下拉刷新是一种临时状态，丰富它的设计细节不会造成与产品界面的格格不入，相反，一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如uc头条在下拉刷新时会蹦出一只奔跑的小鹿，暗示正在快马加鞭的加载新内容，小鹿形象延续了品牌logo。作为资讯类产品，内容更新速度至关重要，奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感，瞬间就让下拉刷新变得生动有趣。

2.3 头像设计

个人中心页与用户信息密切相关，用户的虚拟形象在这里得以展现，常见的设计是一个用户头像加登陆文字的形式，这种默认的头像设计无法得到用户的认同感。

现在很多的产品已经放弃了死板的默认头像，给用户更多的选择。赋予产品一些人格魅力，可以让产品富有生命力，消除人机界面的冰冷交互，帮助用户和产品建立友好的联系。例如美团外卖和躺平，它们各自的身份都代表了产品的气质和用户的属性，让用户产生一种身份的认同感。

2.4 缺省页化解负面情绪

通常状态是，当前页面没有内容或无网络状态下出现的页面。常见的设计是图标加提示文字的形式，这种简陋的设计会给用户心理造成很大的落差，陷入负面情绪中。情感化设计在此时就可发挥巨大的作用，它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。 设计师可发挥的空间很大，根据产品属性和品牌延展图形，结合动效或插画等情感化设计，可以很好的丰富页面内容。例如躺平的空白页呈现出一种贱萌的场景，让用户会心一笑，使产品充满了趣味性。

2.5 标签栏微动效

情感化设计变得越来越丰富，图标设计上升至可以展示动画效果。通过动效的使用，标签栏切换变得不再死板。用户在频繁切换页面时，不再觉得单调。精心设计的动态效果，能够缓解用户等待时焦躁的心情，从心理上缩短用户等待时长，让品牌更加深入人心。

2.6 模拟用户行为

如果一个产品可以模拟用户的行为，将用户代入真实的情境中，用户就会对产品产生深刻的认同感。例如「潮汐」会根据时间场景和季节变化，播放不同的背景音乐来营造氛围。雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。

情感化设计可以拉近用户与产品之间的距离，在更深的层面体现出对人性的关怀，为人们带去情感上的愉悦和感动。洞悉用户的行为，换位思考去满足用户的需求，情感交流就产生了。例如当你截屏了一张图片，打开微信对话框时就会自动显示这张图片，提前预知了你发截图的需求。

再例如很多观众都习惯了在电影结尾等彩蛋的习惯，因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。在「淘票票」上购买电影票时，你会发现影片详情页会有彩蛋提醒，告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置。有了这个提示信息，就不必再为了不确定的彩蛋期待浪费时间啦。

2.7 有趣的细节设计

俗话说：有趣的灵魂万里挑一，可见有趣是可以引发交流进而让人们产生积极的情绪。 在UI设计中，有些有趣的设计是隐形的，需要用户自己去发现，当用户找到这颗彩蛋时，就会获得一份喜悦和乐趣，增强用户对产品的探知欲。例如在电脑端打开B站的鬼畜区长按这个返回图标10秒左右，你会打开鬼畜区的新世界(⊙o⊙)（友情提示：记得戴上耳机或调小音量）其实长按「返回」10秒后网页下方会出现一条黑框提示「尝试输入字母，发现鬼畜秘密」。按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕！

有些有趣的设计又是显性的，目的是让用户与产品引发交流从而产生积极的情绪。例如成为优酷视频会员，不仅可以尊享丰富的影视资源，还能让自己的ID在发弹幕时使用剧集相关角色的头像。带角色扮演头像的弹幕，让发言更有剧集代入感。这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性，一方面也丰富了弹幕区的多样化，可谓一举两得了。

文章来源：UI中国  作者：漂浮柠檬核Fyin印迹

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

在做设计的时候，经常会遇到一个问题，就是一个按钮，在同一页面的不同情况下，有时可用，有时不可用，我们到底是显示不可用时的禁用状态呢？还是直接隐藏这个按钮呢？

大家还是喜欢提这种通用性问题，希望有一个说法，可以概括所有情况。但我多次说过，不存在这样的好事，一定是具体问题具体分析的。

尤其是这个问题，想要聊透彻，得用不少例子来举证说明，不过也可以通过总结的方式长话短说了。

禁用按钮的使用，可以从两个维度来分析，分别是：「无效的禁用状态」和「有效的禁用状态」。

无效的禁用状态

有一种情况是，在一个页面里，一个按钮，可能会有几种不同的情况存在。那人要问了，既然是一个页面，为什么会有多种状态同时存在的情况呢？

比如，在出行场景中，普通乘客发起订单，司机接单后是可以发送消息的（左图）。但是从第三方渠道来的乘客，司机是无法发送站内消息的，只能通过电话联系乘客（右图）。

不同渠道来的用户，司机端的页面会呈现不同的按钮状态。相同的页面，第三方渠道来的乘客，在司机端就不需要露出消息按钮了，这样可以减少无效信息对司机的干扰，还可以避免司机习惯性操作带来的无效反馈，比如点击消息，显示「无法发送消息」。或者显示禁用，也会影响司机的操作判断。

从这个案例中我们可以看出，当一个按钮在某种情况下始终无法被触发时，就会选择让它直接消失，而不是呈现禁用状态。

很多人在这类设计里会给按钮提供一个禁用状态，以免按钮消失而打乱页面布局。但是要知道，在某种情况下，按钮无用时，无意义的展示反而会产生干扰信息，就像上面说到的那样。

所以这里有一个结论是：禁用按钮需要可触发的时机，如果没有这个时机，禁用状态就没有存在的必要。如果存在，那它也是一个无效的状态。

既然是无效的，最好就不要出现了。

有效的禁用状态

在上面的例子里，有一个前提不可忽略，那就是司机是否可以理解我们不显示的原因。当然，司机会接受相关培训，产品中也会有渠道标识，所以司机能够明白页面中存在的差异。

但在其他产品中，当状态不同，按钮变化无法自洽的时候，又怎么去处理呢？我们就需要通过合理的解释来消除用户潜在的困惑。

对于这点，比较典型的案例是在线上购物时，一件商品会有多个类型供消费者选择，比如不同的尺寸、型号等，当其中一种类型被抢光时，这个商品依然是可见的，只是无法选择，展示出了禁用状态。

在这种场景中，我们不能一下子把其他无法购买的类型隐藏，因为用户需要知道我们所有的商品类别，了解商品的全部属性，尽管当下无法购买，但有上新的可能，用户依然可以选择等待，并将其加入收藏，还是会有机会促成这笔交易。而且当可选类型变多的时候，只是禁用没有库存的类型，可以使其他可选项保持固定的位置，有利于我们二次搜索和加购。这种场景的禁用也是暂时的，直到商品下架或者上新。

但就像我以前说过的，常常我们见多了的东西，就认为是正常的，但它并不一定好的。禁用也是这种情况。

虽然我们现在还是会在各个地方看到禁用操作，但是禁用的原由始终没有给到用户合理的解释，以至于许多人见到类似的操作都是一头雾水。所以在设计过程中，尤其要谨慎对待，尽可能的避免出现无法解释的禁用操作。

好比淘宝的商品选择页面，如今也将原来的商品纯禁用按钮，替换成了「缺货」。选择缺货的商品之后，按钮会变成「提醒掌柜补货」。

从原来的用户单方面接收无法点击的按钮，到现在直观显示缺货，点击后同时提醒到商家，这样的操作从功能角度来说是一个升级。

这就是我说的，有效与无效的禁用按钮之间的区别。禁用不该是真的禁止使用，而是告知用户，它如何可被使用。

小结

如果一个按钮在不同的阶段有禁用和可用的状态显示，那么意图是很明显的。比如一些活动页面，某个按钮的禁用状态是倒计时，就像电影的前期宣传，为电影的上线制造话题和热度，来鼓励更多人的观看一样。

对于按钮来说，显示禁用则代表它在满足一定条件后即可拥有可点击性，让我们明确地了解它就在这里，未来是可操作的。按钮也有很多的设计空间来为未来的使用做好铺垫，特别是营销类的活动，像是「明日 8 点可抢」、「提醒商家补货」的按钮文案，无一不在传达「可用性」的信息，引导用户持续性的关注。

但是还有一类禁用状态只是静默地提示，多出现在表单中，当用户没有完成输入的时候则无法点击，因为看的多了，我们就以为这是正常的。但我们都知道它仍可优化，比如，在它以禁用状态出现时，用更为友好的方式去提醒用户应如何激活，而不是漆黑一片，且完全不知道它所存在的意图。

我们要知道的是，禁用按钮本身不是一个特殊的对象，只是禁用状态在页面中是一个特殊的存在，它是产品设计中的一种规则。为什么按钮不可用，或者说一定场景下为什么功能不可用，当无法依靠用户直觉理解的时候，是需要作出解释的，也就是怎么禁的问题。

但是最开始设计时就应该去想的是，禁用状态对用户和产品的意义在哪里，这和我们设计方案时脑海中涌出的无数目标一样，是一个基础的出发点。而后，一切迎刃而解。

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

编辑导读：产品经理在进行产品功能规划时，会遇到来自各方的需求。这些需求有大有小，有迫在眉睫的也有无关紧要的，应该如何规划产品功能呢？本文将从四个方面展开分析，希望对你有帮助。

产品功能如何定义？

一款产品一般会具备一定的盈利点（商业变现能力）、其独特的使用价值，偶尔还会掺杂个人创作时的产品情怀（初心），像锤子科技入场手机行业的时候，是定位于年轻小众的用户群体，为他们提供个性观感的用户体验，虽说后来败北了，但也曾收获了一批用户的喜爱，也有因为这个领域始终存在着它的壁垒，所以不是简单的情怀就能做成一款好的产品。

当然，如果不是创始人，创作的情怀可能会体现的没那么深刻，但是产品早期的定位在一定程度上已经确定了基础的业务方向和发展的基调。

很多企业可以靠一款核心产品，进而延伸到其他的产品创造，基础产品实现了赚钱能力后，从而支撑其他的产品的试水，即使失败，也不至于“关门大吉”。

而当产品经理切入产品设计时，一般有我们常用的两种产品类型，一种是基于基础核心业务延伸的从0到1的项目设计，一种是处于生命周期-成长期中从1到N的产品迭代。

而这2种规划产品的功能的方式也是不一样的。

01 从需求出发

不管是哪类产品，立足点都是基于需求，而需求池也分2种，一种是源源不断的需求池，一种是寥寥无几的需求收集；前者更为切合从1到N的产品，上线后的需求或反馈都是来自真实用户的声音，包括主动的从现有的产品进行回访、用户调研以及通过用户的反馈和建议收集有效需求。

有了需求，那是最直观的，对应的产品功能可以根据此展开进行规划。

而第2需求类型，常常是因为局限于没有经验，不熟悉不了解所以需求的声音很少，这时候，产品经理就需要主动的去对比竞品，去分析竞品，解析出产品的核心需求，并且去了解这个产品的一个市场背景、规模和场景范围了。

当然，竞品分析不是让你全部照搬抄写别人的产品，这是没有灵魂的，作为一个产品人，是需要有自己的想法的。B端产品的分析，更加倾向于功能模块及逻辑设计，而非用户体验或界面的细致优化。

从0到1的产品功能规划时，要明白企业是属于某个行业的，而行业的范围比较广泛，比如做教育的，器材可以属于教育装备的一种，教务管理系统也可以属于教育装备的一种。另外，书籍、校服、桌椅等面对的对象是学校的，他们也可以说自己业务涵盖了教育领域。

所以，我们设定或规划一种产品时，往往都是有关联性的，而不是完全切入一个新兴的领域，撸起袖子就干。

当然，有能力的并且有钱的企业是可以这么做的，但是对于门槛较高或需要积淀的领域，他们也不会贸然动手，起码会先观望一下，然后找一找这个领域内的老玩家，通过合作的方式获得了经验值再自己独立做，但是做肯定是不会做相同的事情，老的市场被吃透了，这时候只有把新的东西注入，才能获得一些收益，比如把自己独特的优势、互联网观念或用户个性化体感的设计再应用到传统的制造业中，摸清了其壁垒及门道，才能走出自己的道路。

02 定义场景

场景是功能使用的具象化，主场景作为该功能的一个核心定位。如做一款访客产品，定位于通用性产品，你将考虑到其面对的对象，包括：

• 购买者：政府单位、企事业单位、写字楼物业、小区物业、学校等（看重外观、整体系统的业务流程及效率、来访者的用户体验）安全需求较高的场景
• 使用者：公司前台、门卫保安（看重产品易用性，且门卫保安等存在学历较低、年龄较高等普遍情况）
• 受访者类型：集团大厦管理、公司部门、物业园区、政府机关、信访单位，政府机关、部队、学校、住宅小区、写字楼、会议展会

用户群体则可以细分：

• 访客：商务洽谈、应聘者、办理业务、长期驻场员工、后勤（物料配送、维修）、参观、临时出差人员、外卖/快递配送
• 受访者：企业高管、接待员/招聘者、业务办理人员、后勤管理人员
• 未知人员：广告人员/推销、系统故障、人工登记后等遗漏登记的人员

03 思维导图罗列大体功能

调研竞品后，也分析了产品的使用对象及场景，这时候可以提炼和列举出核心且必要的功能，分析并讨论，这个时候一般是产品经理之间的相互讨论及推敲，可以先个人提出自己的方案进行比对，再去重择优，一个个将一级和二级的功能模块确认下来（也可以是3级，视具体情况而定），将整一个产品框架定下来。

思维导图的使用和场景使用也是相辅相成的，此类场景是基于主场景下的细化。如，对于访客来说，他去拜访用户，是否需要提前预约，如果没有提前预约，现场登记的方式和提前预约的方式有什么不一样，这样就可以确定下来，两种方式：预约和现场登记。那预约又可以包括访客H5扫码主动登记或者企业邀约申请等等。

04 整理流程

功能模块确定后不要急于去画原型图，因为更重要的一步还是整理整个产品功能之间的关联性，即产品数据的来龙去脉。

流程可包括业务流程、限制流程、前后端交互流程图等。以下图进行例举：

1. 业务流程图

为业务模块核心的工作流程，数据流向及基础判断，及业务的几种模式都可归属为业务流程，涉及的模块和功能一般是自己的模块属内。

2. 限制流程图

如在增删改查的过程中，对数据的一些限制和参数判断后的不同流向，往往是由多个模块之间的规则限定的，涉及到不同模块之间的关联性较强的说明。

3. 数据流程图

数据传输的起点和终点。一般软件包括前端和后台服务器，后台主控数据的管理和分析，通过后台对前端应用进行管理，常见的为数据的上传下发和命令的顺序的判断。此流程图着重对数据前后端的交互及整体流程的绘制。

基于以上都整理清楚之后，就可以开始进行原型设计了，原型的布局和风格可以根据现有软件或UI专业的建议进行设定，对于B端产品来说，布局和排版对功能影响不是很大，即使从0到1，也可参照市场常见的布局或根据公司规定的统一。而风格和产品定位尽量贴合，假如你做一款小清新的APP，就不要使用暗黑风格的调调了。

这就是今天篇文章讲的，之后会分享一些关于功能规划时的一些细节点。

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

引人注目的UX设计背后的心理学

前文的原子设计中我曾经讲过，原子是构成所有元素的最小单元，没有办法再被细分。它通常对应着产品设计中的通用样式及构成组件的最小颗粒。而颜色，作为整个设计系统中极为重要的原子之一，在心智模型中占据了关键的地位。

我们看到红色能够感受到热情、兴奋和危险，看到绿色时往往就感受到安全、自然和平静。可以说，颜色调动我们的情绪只需要一瞬间，而且它在我们的记忆中可以停留更久。

接下来，我结合公司目前的业务CROV Dropshipping（以下简称DS），来进行色彩体系的探索，以输出一整套的色彩方案。但愿这次探索能够给予各位一点启发。

大纲走起：

• 业务背景
• 为什么我们需要色彩体系
• 如何创造一套色彩体系
• WCAG无障碍测试

业务背景

CROV DS是针对美国市场的线上一件代发平台（类似阿里巴巴的一件代发业务），属于跨境电商B2C行业。平台帮助用户无需任何初始成本、无需囤货即可顺利开展电商之路，时间灵活可控，让用户专注于销售本身。

为什么我们需要色彩体系？

1. 对于业务

目前CROV DS业务日益繁杂，但是除了品牌色之外，辅助色的定义过于随意。而且随着业务场景的扩展，临时增加的颜色很容易被遗漏在某个不知名角落的画板中，导致一次性用色的风险。（tips：一次性即前一篇我所讲到的用完即扔、未被复用的设计）

而且用色本身的随意也导致研发还原结果的不统一，一处地方色彩各异的现象比比皆是。

因此，我们需要基于我们自身的业务特征来产出一套足够完善的色彩体系，让业务从用色上达成基本的一致统一。

2. 对于设计师

我们设计师在定义颜色时，更多的是直接在色板上进行取色，但这样的取色方法存在诸多弊端。

增加决策

可能很多设计师选色时会有这种情况，一会觉得这个颜色脏了，一会又觉得那个颜色太刺眼了，有时候完美主义作祟，为了得到一个满意的颜色甚至花上大半天。这种情况尤其在多色搭配时更为严重。

其实这和不用网格系统来布局是一个道理。（注：网格系统是一种能够极大提升布局效率的方法，后面会讲～）

色板中取色的范围趋近于无穷。如果将HSB模式下的单个H、S和B作为一个最小单元格，那么我们可以选择的格子高达数百万个。颗粒度过细的情况（其实根本就没有颗粒度）导致我们在取色时往往会被迫进行反复的微调和尝试。

缺乏秩序和逻辑性

直接在色板中取色主要依赖的是”直觉“这种相对感性的存在。

比如一个按钮的状态可以包括normal、hover、pressed、disable等多个状态，如果我们仅仅靠自己的直觉自由调整明度和饱和度，最后的配色方案其实缺乏内在的逻辑性和秩序性。

难以复用

对于B端这些偏后台工具、场景复杂的业务，颜色运用得往往也比较广泛，如果我们没有一套完善的色彩体系，那每次一遇到新的项目及业务场景需要用到新的颜色时，之前定义的颜色难以复用，导致我们需要重新定义颜色。而且这种相对主观的方法也缺乏说服力，难以体现专业度。

而如果设计师提前定义好一套色彩体系，一方面只需要在对应的色板中选择即可，大大减少了设计决策。另一方面色彩体系所提供的不同色彩梯度也便于各个需求、业务场景的复用。而且色彩体系富有逻辑和秩序，因此从中挑选的颜色也同样是这样，显著降低设计师依赖”直觉“所带来的主观和不可控。

如何创建一套色彩体系？

Alipay Design团队提过：

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

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

接下来我以DS项目为例进行色彩体系探索——

首先，所有的色彩模型统一采用HSB模型进行，正如Ant Design设计团队说的那样，这个模型利于调整色彩时对颜色有明确的心理预期，同时便于团队沟通。

这里再简单普及下HSB模型。H指的是色相（Hue），S指饱和度（Saturation），B指明度（Brightness）。S控制颜色混入白色的量，S值越高，意味着混入白色的量越少，颜色也就越“纯”。B控制颜色混入黑色的量，B值越高，意味着混入黑色的量越少，颜色也就越“亮”。（通俗点说，它们分别代表了明色区域和暗色区域）

1. 品牌色

Crov Dropshipping基于其时间自由灵活、可兼职副业、成本风险低的业务特征，使得对应的用户群越来越多的集中在年轻一代的e-tailer（线上零售商）当中。他们不同于我们常规认知里那类传统的retailer（线下实体零售商），大部分的DSer拥有自己的事业和工作，为了赚取外快，将其当做自己的副业。因此，年轻化是这类用户群的主要标签。

所以，我们采用了高饱和度、偏向蓝色色相的紫色，来作为crov dropshipping的品牌色。它的HSB值是 （250，80，100）。

2. 基于品牌色生成24色“彩带”

为了覆盖掉Crov DS本身复杂的前后台业务场景，需要额外搭配各类型的辅助色。我们想要提取24类色相，所以直接通过360/24得出了色环中每类色相的基本角度15°。

因此，这里以品牌色色相为基础，在HSB 360°色环中，对色相（H）正向和反向各自±15°，饱和度（S）和明度（B）保持不变，得到24色的色环彩带。

后续我们的颜色体系就在彩带上的24个颜色上面进行提取。

3. 品牌色同色系配色

品牌色同色系是指，根据品牌色不同的饱和度和明度变化，生成不同深浅、不同明暗的一组颜色。同色系配色不仅传达了品牌性，多个梯度的变化也能够适应及通用尽可能多的业务场景，也便于多信息的层级划分。

而同色系配色的输出则遵循了antDesign发明的tint/shade 色彩系统算法，说人话，就是在颜色中分别加入一定比例的黑色或者白色来更科学地生成色阶。

sketch中可以直接将这套算法可视化处理，便于设计师直接生成所有颜色的色阶。需要注意的是明色区（就是上方横向的那块取色区域，白色至纯色时S由0过渡至100）和暗色区（右侧纵向的取色区域，纯色至黑色时B由100过渡至0）遵循了两种不同的规则，具体规则见下：

当S饱和度变化时（明色区域），S值以S/5的结果值为一个增量进行递减，B值以(100-B)/5的结果值为一个增量进行递增。我们品牌色的S和B分别是80和100，所以这里的两个增量分别是16和0。

品牌色在明色区的下两个色阶对应的HSB参数就是（250，64，100），（250，48，100），以此类推。

而当B明度产生变化时（暗色区域），S值以(100-S)/5的结果值为一个增量进行递增，而B值以B/5的结果值为一个增量进行递减。得出的两个增量分别为4和20。

品牌色在暗色区的下两个颜色对应的HSB参数即（250，84，80）、（250，88，60），剩下的所有颜色以此类推。

根据这两个定义规则推导出全部不同梯度的色阶，我们就可以将其作为品牌色同色系配色。

4. 定义辅助色

我们使用品牌色来传达品牌价值，还需要辅助色来满足多样化业务场景的需要，对用户进行不同的情绪引导，同时也可以缓解用户对单一主色产生的视觉疲劳。

辅助色的定义就可以直接用到我们之前基于品牌色所衍生出的24色“彩带”了。我们通过色环形式，来迅速得出品牌色的同类色、类似色、邻近色、中差色、对比色和互补色。

结果见下：

首先，由于相差15°的同类色与品牌色差距过小，色相对比感微弱，传递的调性过于相似，所以这里直接pass。而邻近色生成的粉色和青色在界面中基本不会作为功能色使用，这里同样直接舍弃。

类似色

类似色即色相差在30度左右的颜色，属于较弱对比色。我们基于品牌色的色相各自±30得出类似色。由于H280的类似色调性与品牌色类似，并且色彩体系中需要一个典型的冷色来覆盖一些场景，所以这里使用了H220的颜色作为冷系的辅助色。

中差色

中差色即色相相差90度左右的颜色，属于中等对比色。H340偏粉，与常规红色相差过多，所以这里借鉴了alipay的辅助色校正原则“色相差值不能超过15”，对H340进行了色相校正，调整至H355。

对比色

对比色即色相相差120度左右的颜色，属于强对比色。最后得出的H130调性与中差色的H160过于类似，直接舍弃。H10与H340调性类似，但是可以向橙色系发展，所以微调到同类色进行色相校正。

互补色

互补色即色相相差180度左右的颜色，属于高强度对比色。最后得出的H70偏绿，这里同样进行了色相校正，将其调整为H55。

最后，得出了共计5种辅助色。不过这些辅助色并不能直接使用，还需要进行感官明度的校正。

5. 感官明度校正

感官明度校正方法来自支付宝设计团队，这是是确认辅助色的最后关键一环。每种颜色都有属于自己的“感官明度”，即发光度。品牌色即辅助色的发光度不一致，就会导致视觉上会有明显的明暗差别。所以，我们需要通过发光度来进行最终的颜色校正。

明度较高的灰色意味着高发光度，明度较低则意味着低发光度。保持品牌色发光度不变，我们对其他辅助色进行微调。

我们只需要将那些视觉明暗差距明显的颜色进行调整。注意，并非所有的颜色都要调整到品牌色的感官明度，这些值仅仅是一个参考。最终的校正依然取决于我们的视觉！比如黄色感官明度本身很高，但是视觉缓和、不像绿色那么刺激，所以基本无需校正。

最后得到校正后的如下辅助色。蓝色、绿色、黄色以及红色在界面中可以作为功能色使用，可以分别代表常规、成功、警告和报错状态。而橙色则可以用作突出类的提示信息，它比bold字重要高出一个层级。

6. 辅助色的同色系配色

与品牌色一样，使用tint/shade规则推导出全部辅助色不同梯度的色阶。具体过程不再赘述～

7. 定义文本色

CROV DS的文本色并非纯粹的中性色，我们通过加入一点点品牌色来让文本呈现色彩倾向，以此提升页面的活力及年轻感，同时也可以让界面更加耐看，减缓B端产品长期使用时的视觉疲劳。

具体方法就是，分别在#222、#555、#888、#b3b3b3的一、二、三级中性文本色代表的色块上，覆盖一层10%透明度的品牌色。最后得出了四个层次的文本色。当然，中性文本色你也可以参考antDesign中通过透明度进行定义的方法，不一定需要按照某个具体色值来。

WCAG无障碍测试

我们必须要承认的现实是，设计师所定义出的色彩在mac上看上去是很出彩，但是这并不能代表所有用户。也许在用户中依然有一部分人群，他们的显示器配置低和老旧。而且我们无法判断用户们的使用环境，有可能是在刺眼的阳光下、有可能是在昏暗的环境中。如果色彩不去做可用性测试，在很多的情况下存在体验降低的风险。

而WCAG（Web Content Accessibility Guideline，Web内容无障碍指南）解决的正是这些障碍问题。WCAG中的POUR无障碍原则包括了：易于感知的（Perceivable）、便于操作的（Operable）、稳定理解的（Understandable）、稳定耐用的（Robust）。

而颜色则正是对应了易于感知的这一无障碍原则。网站中的文字和图像应该具备足够高的色彩对比度，使之更易被用户感知识别。

WCAG颜色对比度无障碍的两个标准分别为：「1.4.3条例：最小对比度标准」和「1.4.6条例：加强对比度标准」，分别对应着AA级和AAA级。

AA级的定义为：普通文本的视觉呈现与背景至少要有4.5：1的对比度，大文本与背景至少有3：1的对比度

AAA级的定义为：普通文本的视觉呈现与背景至少要有7：1的对比度，大文本与背景至少有4.5：1的对比度

（这里的大文本即≥18pt常规字重的文本或者≥14pt加粗字重的文本）

这两个条例被大厂们广泛运用到了产品的颜色标准当中。

比如MD规范中的文本移动性规范标准中的数据就是来自WCAG的1.4.3条例标准。

同样，阿里巴巴在前不久发布的B-Design中的无障碍色acs指标和WCAG本质上也是一样。

1. 颜色对比度验证

那该如何验证我们的颜色符合这俩标准呢？

easy。这里直接上个网址，https://contrast-ratio.com/#%23373247-on-%23fff

我们分别在背景及文本录入色值，即可得到最终的对比度数据。比如我录入了白色和一级文本色数值，最后的12.28即两者的对比度，嗯，达到了AAA级标准。

一样的步骤，分别测试了其他文本色的对比度（产品无暗色模式，所以此处仅验证白色背景下的颜色对比度），分别达到了7.59、4.71和2.38。可以看出除了2.38外，其他文本色的对比度均符合可见度标准。

不过WCAG中指出，一些特殊情况下的文本无对比度的限制，其中就包含了表单字段的占位符（placeholder）。而2.38对比度对应的文本色主要用于暗提示，因此这种情况就可以无视掉了~

最后

色彩体系的初步探索到此结束了，不过篇幅原因并没有面面俱到，比如渐变色、实际落地效果等等。另外，一些地方我自己也在摸索阶段，因此很多分析也可能存在不足，文章仅作参考。

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