今天继续给大家讲交互方案的设计思路。

你们会发现其实想做交互设计比 UI 设计难很多，那为什么交互设计比较难呢？因为 UI 设计相当于从 0.5 到 1，而交互则是从 0 到 1。但并不意味着 UI 就比交互来的层次低，交互注重逻辑，UI 注重对品牌和质感的表现，没有孰优孰劣，但是在入手和执行层面，UI 相对简单一些（我自己也是 UI 出身）。

交互设计也可以说是体验设计的核心。我们需要根据已有的“材料”来进行任务流程、用户行为的设计，以确保用户能高效、满意的完成任务达成目标和解决问题。所以在这整个环节中，要思考的信息和判断的逻辑会更复杂。交互设计往往觉得很有成就感的地方在于自己设计的流程或者一些创新的交互能够获得用户的好评以及业务数据的提升，在这个方面 UI 设计的成就感知会来的不够明显，因为视觉表现很难量化，用户也只能通过好不好看来表达，所以 UI 设计师们也希望通过一些方法来找到属于自己的成就感，例如我们也会选择一些平台发表自己的视觉创意来获得同行们的认可等等。

那么今天我们一起来聊一个交互案例，来看看需求从“材料”到具象化表现都需要思考什么。当然，学案例是为了扩充自己的知识面，但是想要真正学会，我们要从底层开始学。

首先来讲一个发布菜谱的功能：一个美食类产品中需要设计一个用户自己创建菜谱的流程，基于这个概念我们可以如何设计流程。我们都知道商业设计离不开业务，那么这里我们先不考虑这么多，只考虑如何将流程设计做到最高效，有需要的时候再将业务加入进来。

第一步：来尝试进行一下脑暴
这里和工作中常规的步骤不一样，在工作中我们往往第一步都是去分析这个需求的背景、用户的定位、业务目标什么的，但是这里不用，我们只单纯的做交互方案，所以就不去啰嗦那些了。

在脑暴前，准备好 3 个问题：

1. 什么是菜谱
2. 为什么要发布菜谱
3. 怎么发布菜谱。

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

通过这 3 个问题我们就可以大致知道这个任务所包含的信息、形式、流程。

1. 什么是菜谱：菜谱是通过图文、视频等方式给用户提供做菜步骤的教学内容
2. 为什么要发布菜谱：希望通过用户自主发布内容的形式来提高整体用户的活跃度以及平台对用户个人品牌的塑造。让用户之间产生更多的互动。
3. 怎么发布菜谱：这里要根据第一个问题脑暴之后再进行流程的设计。

接下来我们根据菜谱这个概念进行拓展：1.菜谱的基本介绍 2.菜谱的制作流程 3.其他支线选项。

在真实工作中其实产品经理会把这个流程要包含的功能和信息点都列举清楚，只是我们现在自己来从 0 到 1 设计一次。

菜谱的基本介绍可以包含菜谱的封面、菜谱的名称、菜谱的简介、难度、时间、食材，菜谱的制作流程可以包含需要的图片、文字描述。但是这里的颗粒度大小不一，例如难度、时间颗粒度小，但是食材我们可以再继续细化拓展：食材的名称、用量。菜谱的其他编辑选项，例如菜肴的口味、菜系的分类，编辑这个选项是有助于其他用户在筛选菜系和分类的时候更快的找到这个菜谱。

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

第二步：根据信息和内容进行触点分析和控件使用
例如菜谱的封面，那么我们就需要一个容器来上传图片或视频，可以用一个占位图 image 来代替，先不用考虑放什么位置以及在哪个节点，先将每一个信息点都进行控件化。接下来菜谱的名称和简介都是输入模块 text。难度和时间有两种形式：输入和选择，那我们当然用选择，因为操作和理解成本更低，能用选择就不要用输入。选择用什么形式呢？可以用 picker、action sheet 动作面板、展开单选，那哪个更方便高效呢？这里如果需要选择的选项不多，也不需要滚动、联动，那么用 action sheet 就可以了。如果你想让选项更直观更方便操作那么你可以把选项直接放出来。

交互控件科普系列！ Sheet 的常见样式和设计注意事项总结
还在频繁地使用弹窗对用户展示重要提示吗？

阅读文章 >
从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

接下来是食材，食材又分为食材的名称和用量，那么也是一个输入的行为，需要两个输入框，这里就不能用选择的交互了，因为在这个场景中选项是根据用户需求随机、特定的，需要用户自己输入。

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

最后是菜谱制作流程中的图片和文字描述，也是图片和视频的上传和文字输入模块。这样我们就把这些控件具像化了，就更直观的帮助我们进行接下来的操作。

第三步：将控件进行组合以及场景的补全
根据用户的操作习惯和场景，我们将操作顺序捋一遍。什么样的操作顺序更符合我们上传的习惯呢？先填写制作顺序吗？不对，应该先编辑基本信息，也就是我们通过烹饪的流程，先想好要做什么菜，再去准备食材，再开始一系列烹饪的步骤。

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

所以我们要先让用户去添加封面编辑标题和介绍，烹饪难度和时间其实放在开头和末尾都可以，但是考虑到这些信息在列表中会一起展示，那么我们索性就在开头就直接一起编辑。

接下来是添加食材，添加食材的场景中会涉及到对食材的添加、删除、清空以及智能编辑（类似添加收货地址），所以这里的场景不要漏掉。那有的小伙伴要问是不是可以再加一个拍照识别食材的功能？其实不需要，因为我们在准备做菜谱之前肯定对这道菜有了解，知道每一个食材的名称我们才会去做菜，否则连什么食材都不知道就去做，那万一有毒呢？所以这个场景是不存在的。

再接着是编辑制作步骤，依然是思考用户场景，除了上传图片和文字以外，还需要提供步骤添加、删除、调整位置、批量传图等功能。这些场景我们在脑暴的时候或多或少会遗漏掉。

第四步：制定步骤和流程
移动端产品的层级和路径主要是根据页面来划定的，所以页面越多路径就越深，但是路径深并不意味着一定就多余，路径少也并不意味着操作就简单。路径阶段的划分主要是根据这几点来考虑的：

1. 当前页面内容是否溢出、符合场景、满足预期也就是说当前页面中的内容是否符合当前场景的用户，以及是不是过载了。例如我们去购买电影票的流程，当我们在查看电影详情的时候，不会出现电影院和电影场次的选择，因为不符合当前场景的用户需求。

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

1. 场景是否独立我们在选择回收自己的手机时，在选择型号页面不会再让用户编辑估价信息。这个场景是独立的，并且只有完成了前置操作步骤后才能进行下一步。

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

1. 任务是否需要阶段性结束，为什么需要进行新建界面，是因为当前界面在满足 1 和 2 两个约束后，要考虑第一个步骤是否阶段性完结了，例如我如果把菜谱编辑基础信息界面单独做一个界面，而编辑步骤再单独做一个界面，这里第一界面是否阶段性完结呢？还没有，因为你可以随时要去修改标题、封面、食材等等，而经常返回上一页并不是一件很简单的事，用户也会担心我编辑好的步骤会不会保存等一系列问题。

这里再用一个蔚来 app 中选购车辆配置的流程举个例子。他这里也将选择配置流程划分成了几个界面，但这个流程结构就不是单纯的线性结构了，虽然他每个不同的配置单独做成一个界面但是顶部利用 tab 来切换不同配置选项的界面。

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

所以当任务需要阶段性完成时候，例如只有先输入手机号点击发送验证码之后才能收到验证码，在这样的流程中我们可以使用下一步来进入下一个环节。如果要分不同的界面，而又没有出现阶段性完结的情况，那么前一页的内容编辑再下一页也需要有，例如我们把标题编辑单独做一个界面，但是下一个编辑基本信息界面也依然要能够编辑标题。

第五步：设计原型和布局
通过对用户场景和触点的分类，以及对第四步的思考，我们可以发现其实编辑基本信息和编辑步骤是需要放在同一个页面中去完成的，因为没有阶段性结束。但是放在同一个界面也有一些问题比如单个界面需要编辑的信息太多，比较繁琐，再次编辑需要上下滑动浏览不方便等问题。所以我们也可以看一下市面上的竞品都是怎么做的，有一些产品会将编辑标题单独划分出一个界面，这其实没改变前者的问题，单独作为一个页面或许是基于这两点考虑：

1. 希望用户通过认真对待标题来提高菜谱的点击率和引起别人的兴趣
2. 业务需求，通过让用户了解优质内容的协议来谨慎对待上传菜谱的质量
3. 对于一个复杂操作前的一个准备和引导，让用户更容易接受接下来的大量表单的填写。

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

接下来是填写的界面，那么我们就可以根据信息展示的优先级和第三步设定好的控件进行布局，这里涉及到的原理就不讲了。我们主要来分析一下某些功能在布局的时候为什么这么放。

首先封面和标题还有简介从上至下应该没有什么问题，因为有两个输入模块咱就无法左右放，因为这 3 者是强关联信息所以是一个整体。其次是难度和时间，这两个字段包含的内容和形式我们在之前的步骤中提到有两种形式，一种是 actionsheet 还有一种是选项标签化平铺，前者的好处是节省空间，易扩展，后者则更加直观和方便选择，另外也要考虑类似控件在整个产品中的统一性。

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

接下来是食材添加和编辑，这里涉及到食材名称和用量的文本输入，这里可以直接用一行输入模块来放单个食材的编辑，因为整个页面表单很长所以尽量简化上下空间。同时还有对食材的删除、清空、调序和新增。那这三个按钮怎么放比较合理呢？我们要看用户使用的场景，可以考虑的维度有：操作频率、操作优先级以及任务的主方向。

所以在食材编辑这个模块中，最高频的是新增其次是删除，再次是调序最后是清空。而当食材新增后内容会向下延伸，所以新增的按钮不适合放在上方，也不适合放在每个输入模块的右侧。删除和调序则是最某个食材信息的编辑所以是针对单个输入模块的，那必须跟在后面。最后的清空可以放在新增按钮的左侧。这样就完成了添加食材的模块。

再接下来是烹饪步骤。上传图片和编辑文本没什么问题，上下布局是因为在正式浏览的时候需要大图和文字搭配的形式，所以为了形式统一就只能这样布局。

目前调整步骤在最底部，同时删除操作也需要点击调整步骤后才能出现，这里因为调整步骤和删除不是高频操作，弱化层级可以理解，但是如果放在底部，那么如果我想要删除第一步和调整前 2 步顺序的时候，就要上下来回滑动，不是很方便。

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

那其实我们可以这么做，把烹饪步骤作为一个 bar，在页面向上滑动的时候置顶，添加食材也可以这样操作。就是为了让用户在上下滑动的时候可以随时进行一个编辑，步骤在任何位置都可以直接进行换位和删除。另外由于是大图模式，在换位的时候进行长按拖动其实对拇指的操作有一定的要求。既然这样为什么不用上下切换的按钮进行调序。

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

我们来看一下拇指拖动要激活两个阶段，首先要长按激活拖动，然后需要按住不放进行拖拽，由于卡片面积较大拇指滑动的距离就要长，对于手小的用户就不太方便了。那我们是否可以做成一个上下切换的按钮，这样只要通过单击就可以完成顺序的调换，并且通常调换顺序并不需要跨越多个步骤进行，一般也只是相邻两个步骤的顺序换一下即可。所以这里首先我会把编辑按钮和批量传图都放在烹饪步骤 bar 右侧并置顶。

从零开始！五个步骤教你做出「上传菜谱」的交互流程与原型设计

最后再补上剩余的选项模块和发布、预览、草稿的按钮即可。预览和草稿必须放在导航栏，因为这俩功能是随时需要进行操作的所以不能在页面底部，而发布按钮可以放在最底下。也有小伙伴想问，为什么不在底部做一个固定的 bar 来放这些按钮呢。因为页面纵向信息很复杂，不仅底部占用了高度也容易误操作，在没有编辑完时，发布按钮还是比较鸡肋的，所以是不会出现一个底部固定的 bar。

好啦，今天分享的交互流程案例大家学废了吗？我们下期再见，有更多想法和交流欢迎在留言区留言！

前言
公开演讲者 Hamza Yusuf 曾这样说过“永远不要削弱语言的力量，言动于心, 心动于身”。笔者相信，在谈正事时，大家应该都很反感说话总是拖泥带水又模棱两可的人，因为在听一大堆废话后、你还不知道对方到底要表达什么，甚至有可能在理解错误的情况下产生误导。

在互联网产品设计中，语言本身就是一种界面、一种架构，是链接用户与产品的桥梁，在交互过程中能帮助用户更好地理解产品、如何跟产品沟通顺畅。更有甚者，一个产品语言表达方式的好坏，在用户眼中就代表着这个产品是否友好、好用，所以，有时候简短的几个字就能决定着用户的去留，而这些通过给用户传达信息的语言，我们就将它称之为微文案。

作为设计师，大多都会将自己的专注力集中在了视觉和交互上，潜意识的认为文案只是产品、运营者的工作，殊不知作为经常都在研究用户、跟用户打交道的人，在一些细节上会比产品更懂用户，相比美观的视觉设计，精致、简短文案的引导，则更加清晰、直接。

微文案对产品和用户都有着巨大的影响，清晰、准确、友好、一致的文案设计不仅能为产品带来好的体验，还能拉近用户与产品的距离，甚至可以当做改良用户体验和吸引用户的工具，因此文案设计就显得非常重要。下面，笔者就和大家简单地聊一聊那些在设计中看似不起眼的微文案设计。

了解微文案
Joshua Porter 在 2009 年诊断过一个电子商务网站，用户在该网站购买流程中填写表单时，有 5%-10%的用户因地址填写错误而终止交易流程，导致用户流失。于是，Porter 提出在地址栏旁增加“请务必输入与您的信用卡关联的地址”的文本提示，后来他在自己的文章中说道“就这样，错误消失了”。这种做法不仅节省了用户时间，还改善了网站的转化率、提高收入。

Porter 最终得出的结论是“在正确的位置、正确的时间、添加正确的引导性文案，就可以完全改变用户体验”，并把这类文案命名为“Microcopy”。

1. 微文案的定义

微文案（Microcopy）指的是在界面中，能够引导、帮助用户与界面交互行为的简短文案，可以是一个单词、也可以是一句话，常见的有表单文案、按钮文案、弹窗文案、错误提示等，大部分微文案都会对用户的行为产生直接的影响，如下所示：

4500字干货！写给设计师的微文案设计指南

交互前-引导用户去完成某个行为

交互中-鼓励、帮助用户去完成某个行为

交互后-及时给予用户行为之后的反馈（问题和解决方案）

1. 微文案被重视的原因

用户在与产品交流时，微文案作为最接近于用户与产品交互的位置，它可以帮助用户预测问题的发生、并鼓励用户进行下一步操作，提前预判操作过程中可能碰到的问题并提供解决方案，在很大程度上降低用户跳出率。

好的微文案可以清晰的表达出症结所在，消除用户疑虑，让其更快作出抉择，从而为产品带来收益。另外，在情感化方面，微文案的语气态度影响着用户的情绪，用户随时会在当前心情好坏的驱使下决定是否在这个流程中继续走下去。有很多产品在进行体验上的优化时，微文案就是其中的一大版块。

4500字干货！写给设计师的微文案设计指南

我们都知道，在这个互联网时代，个人信息早就不是什么秘密，但还是会遵循能不提供就不提供、能不注册就尽量不去注册的这一原则。用户体验专家 Jared M. Spool 就利用人们的这一心理在界面增加一段微文案创造了 3 亿美元的利益，基于用户在购物前不愿意提供太多个人信息，Jared M. Spool 在购物页面上写道「您无需注册即可在我们的网站进行购买，只需要点击继续按钮。为了方便您在网站的后续购买，您可以在完成付款流程后创建一个账号。」结果购买的客户数量增加了 45％；另外，Maggie Stanphill 在曾经对谷歌的一个旅店预定广告中将微文案「预定房间」改为「查看可用房间」，其点击率增加了 17%，结果是显而易见的。

1. 微文案专业岗位的出现

在国外，如谷歌这样这样的大型公司，对微文案设计非常重视，为了更好进行品牌文化传播以及给用户创造更好的使用体验，会有对应职位的「UX Writer」人员对微文案进行把关。

相比国内，虽然微文案岗位还处在一个比较尴尬的位置，但对微文案的重视程度明显在快速上升。

微文案设计的基本原则

1. 去开发化

首先，微文案需要简单直白，让用户一眼就能看懂，要规避掉开发语言（如 404、505、错代码 xxx 之类的描述）、双重否定等用户不易懂的文案，避免用户在操作前总是要去思考、陷入不知所措的境地，用户需要明确的知道当前发生了什么，以决定接下来的行为。

4500字干货！写给设计师的微文案设计指南

其次，避免模棱两可的文案，需要将发生的问题、行为指引等，清晰的表述出来，需要注意的是清晰表述并不是要长篇大论，能用词语表达的就绝不用句子、能用一句话标明就绝不多加半句，用户没有耐心来看你写小说。很多时候，用户在完成任务的过程中总是被很多「下一步」搞得一头雾水，用几个个字的简短描述来代替「下一步」需要完成的任务不是更好吗？当然刻意制造惊喜或氛围的除外，前提是你的惊喜真的能给用户或产品带来价值。

1. 委婉+鼓励

回想一下我们小时候做家务的情景，当父母用命令的语气对我们说“赶紧去扫地，等会我来检查”或者“我这会有些忙，你去帮忙把地打扫一下，扫的干净有奖励哦”，虽然都是不可抗拒事情，但很明显第一种方式是极不情愿的接受，做起事来可能是为了应付，以后会尽量找理由不去做；第二种语气则接受程度更高，还具备一定的吸引力。微文案也是如此，友好的表达方式会显得有诚意，用户更易于接受。

4500字干货！写给设计师的微文案设计指南

1. 应时应景

在一些特殊的场景下，微文案能起到安抚用户情绪、引导用户选择后续行为的作用。例如空状态/缺省页，可清楚的告知用户发生了什么问题以及解决方案，再通过按钮（按钮文案上述有说明）加以引导；在支付过程中，出现余额不足时，应明确提示金额还差多少、以及在附近提供便捷的充值入口；当用户有多张优惠券，下单时却无法选择使用，则需要将使用条件在原有文案的基础上强化、突出显示。

4500字干货！写给设计师的微文案设计指南

常见所处位置

1. 按钮

按钮微文案的好坏对产品、用户来说是至关重要的，尤其是「行为召唤按钮」。产品历经千辛万苦将用户带到转化（开通 VIP、下单、支付、登录）页面，就差按下这个按钮，如果因为文案的不清晰让用户有疑惑、增加了操作、理解、时间成本，或对用户产生误导，极有可能让用户从这里溜走，得不偿失，请记住。不管前面付出了多少努力，在用户按下决定转化的关键按钮前，都不算成功。

按钮是引导用户按下的关键因素，如果想要通过按钮为产品提高一定的转化率，那么你的按钮就需要一个优秀的微文案。通过下图中按钮微文案的左右对比，你更倾向于哪一种呢？

4500字干货！写给设计师的微文案设计指南

1. 表单

在表单页面，作为方向指引，标签只是一个清晰明确的简短文案，真正能给予用户更多帮助的是占位符，它能准确的提醒用户输入区域的交互位置，所以就成了每个表单项的必备元素，但就是因为这点，很多设计师站在必备的基础上，为了占位而占位，让占位符失去了本该发挥的作用，毫无价值。

下图是淘宝新增地址的表单页面，左侧的占位符直接重复标签内容，没人说这种搞法是错误的，但右侧描述了应输入内容的说明、规则、注意事项等，明显降低完成表单内容的难度。设计师可能没有感觉，怎么看都能看懂，但有没有想过填写这个表单的用户根本不是互联网人群，只是第一次想在网上买个东西而已。

4500字干货！写给设计师的微文案设计指南

道理大家都懂，说起来大家都会，但如果你真的玩了很多APP就会发现，除了那些大厂的产品设计之外，见过最多的不就是左侧的这种表达方式吗？

1. 错误/温馨提示

提示，并不仅仅是告知用户问题所在，而是需要在用户操作之前就给出温馨提示（如注销账号）；出现问题后自动定位到具体位置并提供解决方案（如填写表单），如果实在无法解决，尽可能的提供备用方案或求助渠道，尽可能的降低用户损失（如误删某数据）；操作即将完成或完成之后给予用户鼓励（如就差一点、太棒了）。

4500字干货！写给设计师的微文案设计指南

1. 缺省/空状态

空状态是产品中必然存在的一种状态，不管是用户初次使用还是系统出错，都可能给用户带来焦虑、挫败或疑惑的负面情绪。

优秀的微文案能达到安抚用户糟糕情绪、取悦用户的作用，从而弥补空白页面带来的失落，然后配合按钮中引导性的微文案帮助用户去消灭空白状态，避免下次出现同样的情况（部分特定的空状态只需安抚用户即可，无需/无法进行引导）。

4500字干货！写给设计师的微文案设计指南

微文案设计方向及思路

1. 清晰易懂

应使用用户熟悉的语言，尽量让微文案清晰明了、易于理解，避免使用一些专业术语和网络名词。如果不是写“小说”，就不要长篇大论，浓缩才是精华，没有必要在一个位置反复强调同样的内容，需要做的是精简语句，减轻用户的理解负担，降低时间成本。切记，产品每多一点使用成本就可能流失掉一批用户。

4500字干货！写给设计师的微文案设计指南

1. 统一性表达

对同一类型事务/事件的微文案，其语法、语种都需要保持统一性的表达，避免因用词偏差增加用户认知负担。频繁出现的词汇如新增/新建、您/你、确定/是否…等，即便不影响用户理解，也需要在无歧义的情况下选择其中一种表达方式始终保持一致。

4500字干货！写给设计师的微文案设计指南

1. 尊重用户

微文案需要永远站在用户角度考虑，不要使用命令和强迫的语气，多给予用户理解与包容、并加以支持与鼓励，让其感受到产品足够的友好、尊重。即便需用户自行承担相应的责任，文案也要克制谦逊，利用相对（万事没有绝对）的语气将出现问题的原因和结果反馈给用户，如果可能的话，尽量提供补救措施，将用户的损失降到最低后，利用微文案对用户情绪进行安抚。

4500字干货！写给设计师的微文案设计指南

1. 「您」和「你」的区别

「您」-正式且过于认真、严肃，刻意强调对用户的尊敬，感觉时刻保持着距离，少了一份亲切感；

「你」-距离更近，有种打成一片的感觉，试想一下，如果你跟朋友之间总是过于尊敬、客客气气，很可能会缺少一种默契，至少不会去交心。产品也是一样，在交互过程中与用户扮演的就是「你」和「我」的角色，为了拉近与用户之间距离，不妨多使用「你」「我」跟用户进行交流，会更亲切。

4500字干货！写给设计师的微文案设计指南

1. 两相矛盾的微文案

将两相矛盾的文案融合在一起，看似具有强烈的冲突性，却是一种因果关系。这种方式在营销文案中很常见，当用户害怕失去时，产品顺势给用户一种失去后的打击，文案就起到了“激将”的作用，然后再给予合适的引导，用户转化率很可能得到大幅度的提升。

4500字干货！写给设计师的微文案设计指南

1. 不要拒绝用户

不要拒绝你的用户，切记要避开如“不要、不能、不可以…”等负面的词汇，一开始就摆出一副拒人于千里之外的姿态，用户凭什么要惯着你的产品。多使用正向且具有引导性的文案，协助用户解决当前的尴尬处境，就算用户迫不得已离开，至少没有留下不好的印象，或许下次还有机会。

4500字干货！写给设计师的微文案设计指南

1. 省略不必要的标点符号

一句话或一个词就能说清楚的内容，可省略掉不必要的标点符号，例如标签、标题、小提示…等。另外，在部分弹窗中有两段语句的折行文案，去掉标点会显得更干净。

4500字干货！写给设计师的微文案设计指南

结语
很多初中级设计师认为，文案不属于设计的工作范畴，殊不知文案也和图形一样，都是引导用户的重要元素，在某些场景中，文案更能直击用户内心，起着不可替代的作用。好的微文案能为产品助力，让用户在完成任务的过程中不会迷路，甚至在关键环成为用户在黑暗中的一盏明灯，确保每一步都给用户带来更加顺畅、愉悦的产品体验。

以上是笔者对微文案的理解，不足之处敬请谅解，欢迎大家一起探讨，一起学习、取长补短。

前言
在现如今的社会中，每天都有各式各样的商战。运营设计则是至关重要的一部分。所谓运营设计即是运用完善的设计思维、产品思维和设计技能去完成视觉设计，在保证设计美感的同时，兼顾用户和产品营销的需求，达到流量多、曝光量多、积累口碑等目的。运营活动具有周期较短、业务目标明确、用户群体明确、玩法简单等特点。

运营类活动生命周期较短，常在某一段时间(也可能是周期性的)，一般跟随时节热点或者运营节奏来进行。较短的生命周期给设计、开发、数据等带来较大挑战，那么作为运营设计师怎么才能做出一系列快速、高效、高质的运营设计呢？

如何高效完成运营设计？大厂高手总结了这3个方面！

本文主要从运营设计师，需要什么样的思路、技巧？并明确哪些步骤是可以快速搞定的？哪些内容是需要精修打磨？怎么归类？怎么统一？等内容去引导大家做好运营设计。

灵活把握设计思路、避免陷入程式化
设计师长期处于单向业务线的设计中，往往都会有思维模式固化的特点，每做一个项目，可能需要清楚设计目标、背景、品牌定位、用户人群等等。岂不知一个短短的运营设计，哪有那么多时间去深入了解，我们要做的就是依据项目的重要程度，做思路筛减，灵活运用，了解到哪些是必要的，哪些是非必要的。

我们依据项目的重要性，大致分为四类运营活动：S 级大促活动、A 级节日&平台类主题活动、B 级品类&渠道等日常活动、其他助力玩法&推广类活动等。那么接下来我们考虑以什么样的设计思路去应对这四种不同级别的项目活动。

如何高效完成运营设计？大厂高手总结了这3个方面！

1. S 级大促活动

S 级大促活动，常见的有双十一、年中大促、春运大促等。此类的活动有爆发量高、活动周期较长、促销力度大、出现次数较少等特点。那么此类活动对于无论是产品运营还是设计师都是重中之重，而且 S 级活动往往涉及到的物料输出非常多，包括各个会场、换肤、顶通等等，所以针对每个环节，我们都要做到深入了解，精细打磨。

我们要做的有：

1. 理解活动目标，包括活动效果目标、业务转化目标、品牌形象目标、设计影响力目标等；
2. 明确目标用户，掌握用户行为特征、思想和情感需求，洞悉目标人群的特征才能实现精准的设计触达；
3. 制定设计策略，包括规划设计排期、定义设计风格、设定活动符号、把控节奏点等内容；
4. 细化流程，规避风险，视觉风格定好后，依据关键词，先草图绘制，进行创意联想，避免过早陷入细节，待方案确认后，再进行精细化打磨，按照时间节点，各个端口物料输出；
5. 关注设计结果，总结复盘，要及时了解用户反馈、可量化数据验证，项目结束后做总结和复盘，把项目过程中遇到的问题及时列出，好的经验和方法延用。

如何高效完成运营设计？大厂高手总结了这3个方面！

A 级节日&平台类主题活动

A 级活动，常见的就是节日节点和平台主题类活动，例如春季家装节、回收焕新季等。此类活动一般上线时间为 3-8 天左右，频次相对较高，此类活动可以根据活动属性和项目特点，打造系列化运营设计，既可以保证设计质量又可以节省时间。

我们要做的有：

1. 规划时间、统筹归类，将一年内的 A 级活动，依据活动特征属性，进行归类整理，进而为做出系列化的运营设计做好准备；
2. 确定阶段性设计风格，依据当前设计趋势结合业务熟悉，打造适合业务转化的视觉风格，包括 C4D、插画、酸性、场景合成等；
3. 定义设计语言，包括设计版式、构图、色彩和字体符号等，将此类信息进行明确定义，在设计时，就可以直接使用，也不需要每次投入时间去考虑；
4. 关注数据，及时总结，A 级类活动相对频次较高，所以实时的总结经验教训，为下一次活动做准备是非常有必要，也只有这样，才能使每次的运营设计越做越好；

如何高效完成运营设计？大厂高手总结了这3个方面！

B 级品类&渠道等日常活动

B 级活动，也就是我们所说的日常运营活动。此类活动一般我们打开 app，每日都会看到，常见的有福利日、品类日等主打活动。此类活动有上线周期长、频次短、营销力度小等特点，基本上一个月或一个季度更换一次、有的甚至半年或一年，基本是跟业务及品牌主打相关。此类活动的目的，一方面是为了促活、留存、流量汇聚等，另一方面是为了传达品牌理念，提升业务及品牌形象。

我们要做的有：

1. 深入了解品牌形象和业务属性，根据品牌规范对运营活动进行设计，B 级活动对用户来说，曝光率会比较久。所以我们在设计的时候，尽量依据品牌关键词，选择规范中的品牌色、字体、符号等内容，加深用户对品牌的印象，从而提高知名度和业务转化；
2. 模版规范化、统一处理，针对于 B 级活动，做相应的模版规范，统一视觉样式，是非常有必要的。不但能提高设计效率，同时也能逐渐沉淀出符合产品调性的品牌基因，从而保持产品的一致性；
3. 视觉降噪、简洁处理，B 级活动视觉避免花里胡哨，能够让用户在有限的时间内 Get 最有价值的信息，找到所得，从而实现转化就可以；
4. 版本优化，迭代更新，总所周知，一个 app 要想保证用户留存和拉新，是必须不断升级和改进，那么 B 级运营活动同样也是如此，会伴随着主 app 的设计调性，不断优化迭代。

如何高效完成运营设计？大厂高手总结了这3个方面！

其他助力玩法&推广类活动

除了以上分析三种类别的活动外，我们常见的运营活动还有助力玩法和推广类活动，通常依赖游戏化手段或任务类玩法带来优秀用户体验，有领红包、领劵、抽奖、限时秒杀等形式，从而获得成功拉新转化的一类活动。此类活动有运营感强、行为体验丰富、流程触点多等特点。另外此类活动对产品运营和交互设计的要求比较多，需要对玩法策略和交互逻辑有清晰的设定，那么作为运营设计师我们需要怎么做呢？

我们要做的有：

1. 参与策略制定、提出创意想法，针对玩法推广类活动，在设计前期，我们一定要参与策略制定，能够将自己的一些设计创意和灵感，融入到活动中；
2. 了解玩法逻辑，强化设计价值，当设计玩法确认后，我们一定要配合交互设计师，对玩法中的每个流程逻辑，要有清楚的了解。并对每个流程页面中的内容进行层级分析和强化处理，包括利益点、文案和激励机制等；
3. 市面设计分析，融入自身创意，在开始对活动进行设计的时候，我们首先要对此类玩法市面上的设计进行收集整理，吸取别人的优点，同时将自己的创意融入，最终做出更好的玩法设计；
4. 案例整理，提高复用，当我们做完一系列的玩法活动时，要学会对其进行整理，做成通用模版，从而提高设计复用性，降低设计成本。

如何高效完成运营设计？大厂高手总结了这3个方面！

综上所述，对四类活动进行了一些设计思路分析，其中的思路方法也不是一成不变的，有些点是互通的，这就在于设计师在设计中要学会灵活把握，找到快速有效适合自己的方法，只要有了清晰明了的设计思路，我们做设计的时候才能达到事半功倍的效果。

运营物料规范制定
众所周知，运营设计师的需求内容有专题页、详情页、H5、Banner、闪屏海报等等，分别对应不同的设计要求。我们在运营设计的时候，在输出物料上花费的时间是非常的大。所以运营设计物料做统一性的规范标准是非常有必要的。一般来说我们针对运营物料，需要明确规范的有尺寸大小、图文结构、字体字数、配色、元素等内容；

用一个项目实例来具体说明一下：为 58 同城本地服务运营活动入口的 banner 图，涉及到 APP 和 PC 端。当我们已知素材和文案内容后（如下图左），我们就可以制定其版式结构，包括尺寸大小、字号间距、主视觉等内容（如下图右），那么我们每次设计的时候，只需要更改文案、主视觉和配色即可。

如何高效完成运营设计？大厂高手总结了这3个方面！

以下两张图是按照 banner 规范做出来的效果：

如何高效完成运营设计？大厂高手总结了这3个方面！

另外再举个例子，就是我们的活动页面设计，常见的页面信息结构：首屏+副屏，首屏：主副标题+氛围图，副屏：模块平铺/叠加，我做设计之前就需要对页面中的内容进行布局的规范化，包括位置尺寸等等，有助于我们更清晰的表现画面内容和层级的划分，如下图所示：

如何高效完成运营设计？大厂高手总结了这3个方面！

组件化降低设计成本
对比设计规范来说，组件库更像是一个强大的工具库，是提高工作效率和保证团队协作一致性的基础。组件库作为设计系统的一部分，在运营设计过程中设计师可直接调取，组合构建出新的页面，通过组件库带来的价值主要体现在三个维度：

1. 设计一致性

当我们使用统一的设计模式和组件库，能够在保持基础体验一致的同时，针对业务特性做差异化设计，给用户带来一致体验和品牌感知。在团队中有新成员加入时，也能够快速上手工作。

1. 提高设计效率

我们做运营设计的时候，总会使用到相同的元素和组件，通过组件库的调用能够减少重复性设计时间。当组件设计细节有改动时，只需要改动组件库，所有共用组件库的页面即可实时响应。针对新的业务线也能够快速进行页面搭建，实现设计效率的提升。

1. 高效协同

我们在进行运营设计的时候，可能会涉及到产品、开发及数据等人力侧的支撑，组件库能够随着业务发展不断的优化和完善，在不同的需求和各人力侧之中，能够灵活支撑页面内容进行延展和扩充，从而实现全链路、多场景的高效协同。

以下是我们在做 58 到家的家庭服务运营设计中，部分的组件样式，包括服务列表、弹窗等等。

如何高效完成运营设计？大厂高手总结了这3个方面！

在组件库的构建过程中，我们需要整体思考，明确组件化的设计内容，不断去优化和完善组件细节，包括设计原则、应用场景以及拓展性等。同时组件库需要根据产品的发展不断迭代和创新，才能让它的可持续性特性发挥至最大。

写在最后
设计行业是一个不断发展、推陈出新的行业，新的风格和形式层出不穷。而随着互联网和人工智能的发展，运营设计也在大的时代浪潮下产生着变化。我们需要在新的维度上进行思考，充分调动用户的感官，用更具有创造性的思维完成设计表达，在更丰富的场景下实现多通道的感官设计，创造更新鲜的体验。设计师需要不断学习和成长，为设计行业注入新的活力。

以上是个人在运营设计中的一些经验总结，从设计思路、物料规范和组件化三个方面进行了论述，不足之处请多包涵，同时篇幅有限，关于运营设计的内容无法一次详尽，欢迎大家一起讨论。

作为设计师都会时刻关注设计趋势，以 UI 设计来说每年都会出现很多相关的趋势总结，基本是结合预测和实际相结合的。趋势可以让我们把控设计的方向，带给用户更好的感官体验。

最近黑马哥结合落地产品所呈现出来的设计趋势，进行了这方面的探索，今天以其中之一的趋势-极光风和大家先聊一聊。

极光风趋势的来源
极光（Aurora），是一种绚丽多彩的等离子体（发光）现象，在夜间出现灿烂美丽的光辉。在南极被称为南极光，在北极被称为北极光，视为自然界中最漂亮的奇观之一。（来源于百度百科）

有案例有方法！帮你完全掌握热门的极光风设计趋势

这样的自然奇观被摄影师捕捉到静态的影像中，设计师再结合这样的影像作品，视觉化之后出现在了一些设计作品中。在 2021 年被广泛运用，形成一种流行的视觉风格。在众多的互联网产品设计中，也经常运用这种类似极光的视觉影像风格，称之为 Aurora UI。

有案例有方法！帮你完全掌握热门的极光风设计趋势

在产品设计底层需求获得满足之后，感光体验的提升被重视，视觉感的强化对 UI 设计师来说至关重要。基于不改变本身的结构层，在背景层和装饰性元素上面发挥，使得 Aurora UI 得到了发挥的空间。

有案例有方法！帮你完全掌握热门的极光风设计趋势

富有创意的极光风在背景层和装饰性元素上面发挥得淋漓尽致，助推了其成为 UI 设计趋势的关键，下面就让我们一起来看看落地产品中的 Aurora UI。

UI 场景中的极光风设计
由于在众多落地产品中被广泛运用，形成了近些年影响 UI 设计趋势的风格。极光风和弥散光在表现形式上类似，也有设计师将该风格归类为弥散光，下面就看一下具体的运用场景。

弥散光设计！网易阿里大厂都在用的刷屏级新设计风
这阵子不是有一种设计流行风悄悄刮了起来嘛！

阅读文章 >

1. 强化导航栏设计的视觉感

如果想要强化顶部导航栏的视觉感，通常是利用品牌色作为背景颜色，这样也会显得顶部比重较大。通过白色或者浅灰色作为背景属于比较弱化的处理方式，而极光风的处理形式处于轻重之间的理想状态。不仅可以丰富视觉表现力，也能使得整体风格更加年轻化。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 强化个人中心顶部视觉区域

随着互联网用户年轻化的趋势，在配色上面逐步趋近于年轻化，众多产品在个人中心界面的设计上面亦是如此。利用极光风效果呈现出的设计比较符合年轻化的趋势，可以是同色系的饱和度变化，也可以是不同色相的相互融合。利用低饱和度高明度的配色原则，使得整体的视觉感更加轻量化，视觉效果清新自然且通透力更强。

也有基于品牌色结合极光风进行融合，相对单色来说效果更加丰富自然，使得背景的变化更加多样。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 丰富背景设计的视觉感

除了在顶部区域进行运用以外，也有一些产品会在背景层面进行强化，相较于白色或者浅灰色的背景来说色彩感更丰富。运用到整个界面背景层相对比较少，在局部背景层上的运用比较多些，可以强化局部模块的视觉感。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 点缀弹窗设计局部

极光风的设计表现也会出现在一些局部功能的细节处，比如运用到弹窗的色彩处理中，作为背景局部或者插画部分等的衬托。带来的视觉感更加亲和自然，也不会过度干扰其他元素的呈现。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 强化卡片式设计局部

卡片式设计也是近些年运用比较多的设计趋势之一，基本是以白色卡片居多，具有整合信息的好处。在卡片的边缘位置强化色彩，可以使得卡片色彩更加丰富，也有一些电商产品是起到与商品形成色彩呼应的作用。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 突出搜索设计的差异化

搜索框的设计在大部分的认知里面都是白色或者浅灰色，也有一些是带有边框的形式，利用低饱和度高明度的配色原则来进行设计，带来的效果更加年轻化。也是一种差异化设计的尝试，打破常规的设计认知。也可以举一反三，在一些按钮或者标签设计中运用。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 分类标签的装饰设计

这是一个装饰性的设计尝试，在突出模块分类的当前状态时，通常都会通过装饰元素来进一步强化。可以通过字体粗细、颜色深浅、字体大小和装饰元素来强化，装饰元素除了线段和一些图形元素以外，极光风的背景元素也是一种不错的表现手法。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 图标设计中的运用

运用到图标设计中通常是出现在质感类图标，辅助强化图标的色彩感和层次感。有时候无法通过常规的渐变形式达到要求，就可以尝试运用极光风的处理技巧，将颜色通过模糊和剪切蒙版的形式融入到图标中，可以使得图标色彩丰富和强化光影变化。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 深色卡片色彩强化

以上案例属于在浅色或者白色的环境中运用，在深色主题中依然会用到极光风进行设计强化。在界面背景和卡片背景中运用，效果也是非常不错的，可以给深色的卡片一些色彩感和丰富度。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 作品包装中的背景强化

除了在 UI 设计场景中运用以外，最近发现在设计师作品包装中的运用也是非常普遍，用于背景层的渲染带来的视觉体验度也是非常不错的。在作品包装环节中作为背景运用和局部装饰，也有在封面设计中重点运用，使得作品集紧贴设计趋势，提高作品的打开率。

有案例有方法！帮你完全掌握热门的极光风设计趋势

1. 其他场景中的应用普及

在 UI 场景还有很多运用场景，这里仅为抛砖引玉，无论是作为背景强化还是元素装饰，都能带给用户更加年轻化的感官体验。

除了在 UI 场景中呈现以外，极光风的设计也会出现在更多其它场景中。在 Banner 设计、海报设计、专题页设计等视觉设计层面也是运用广泛，是一个影响范围比较广的设计趋势之一。

有案例有方法！帮你完全掌握热门的极光风设计趋势

实现极光风设计的方法
通过一些线上的案例欣赏和分析，相信大家对于极光风在 UI 场景中运用都有一定的了解，在项目设计中也能轻松尝试。这一类风格从技法实现的角度来说并不难，关键因素在于控制好配色原理，下面就为大家总结几种实现的方法。

方法 01：利用不透明度渐变融合

不透明度渐变在设计中的运用比较普遍，利用的是不透明度从 100%-0% 之间形成渐变，让色彩逐渐消失或者淡化。

画一个圆形，选择径向渐变，渐变两端的颜色选择同一个色相。然后设置中间颜色不透明度为 100%，另一个颜色不透明度设置为 0%，这里颜色适合选择低饱和度的范围。同样的方法反复绘制几个不同颜色的圆形进行组合，即可完成极光风背景设计。

有案例有方法！帮你完全掌握热门的极光风设计趋势

方法 02：利用模糊度变化融合

这个方法是结合了形状和模糊设置（高斯模糊等），绘制几个大小不等的圆形进行排版组合，然后选择所有圆形一起进行模糊设置。形状的绘制上面最好是有大小差异，排版错落有致，这样形成的效果比较富有变化。

在颜色的选择上面需要根据背景的强化程度选择，低饱和度的颜色融合性更高，适合作为弱化性质的背景使用。

有案例有方法！帮你完全掌握热门的极光风设计趋势

方法 03：利用背景模糊融合

背景模糊在 Sketch、Figma 等设计软件中有该功能，是一个影响设计趋势较为常用的功能，特别是在实现玻璃质感和一些质感图标上面非常实用。

在背景层绘制图形，颜色和形状均可自由发挥，然后再绘制一个形状作为调节层，调节层是用于控制模糊效果的。在调节层的形状上面设置一个带有透明度的颜色（必须要带有透明度），然后再设置背景模糊，背景模糊数值的大小决定模糊的程度，不透明度的大小决定整体效果的亮度。

有案例有方法！帮你完全掌握热门的极光风设计趋势

方法 04：利用图片模糊融合

以上的方法都需要进行配色处理，如果色感方面比较薄弱的设计师，也可以挑选一些不错的图片来实现极光风效果。

挑选一张色彩符合要求的图片，然后在 Photoshop 等设计软件中执行高斯模糊，半径值的多少决定了模糊之后的自然度。我们在选择图片的过程中除了整张图片进行操作以外，也可以截取其中的一部分，也许会带来意想不到的效果。

有案例有方法！帮你完全掌握热门的极光风设计趋势

除了这几个方法以外还有更多不一样的实现方法，大家可以根据自己的探索选择最适合自己的方法。根据使用软件的差别选择最简单的形式，根据想要实现的效果选择最灵活的方法，这样才能便于后期的反复调整。

极光风案例实战
有案例有方法！帮你完全掌握热门的极光风设计趋势

有案例有方法！帮你完全掌握热门的极光风设计趋势

有案例有方法！帮你完全掌握热门的极光风设计趋势

小结
研究落地产品的设计细节和视觉趋势，将有助于提高我们对于当前有效设计趋势的把控，而不仅仅只是停留在概念化的预测阶段，而是行之有效的真实案例。

极光风是近些年运用在落地产品中的 UI 设计趋势之一，通过大量案例验证之后的有效方法，希望大家能够掌握并灵活运用到项目设计中。落地产品的 UI 设计趋势还有很多，本次分享的仅为抛砖引玉，后续将和大家探讨更多的有效设计趋势，辅助提高我们的设计能力。

从零做一款产品的时候，需要制定产品的主色。怎么制定呢？

“归纳产品特性和理念-提取关键词-建立情绪版-选择色相-制定色系”，这是很多文章里面归纳出来的几步，使用的时候也有理论依据。但我想说点不一样的。在这个时代，产品五花八门，想用哪一类别的产品一搜一大把，在七麦数据搜索购物类的 APP 榜单，光第一页单榜就有 200 多个。

如何制定产品主色？试试超容易上手的色彩理论取色法

我们模糊一下这张图，你会发现 APP 最终记忆点是色彩。

如何制定产品主色？试试超容易上手的色彩理论取色法

换做在手机看也是一样的，打开你的 APP 列表，快速往下滑去找一个 APP，你会发现它们最终只剩下色彩——“我想找爱奇艺，它在我记忆中是绿色的，刚才快速滑过的红色黄色都不是”。当然，这只是拿来举例，通常你不需要这样去找一个APP。用这个例子只想强调APP主色的意义——它是区别于竞品的第一特征，是调性概括，是一种态度，甚至是你趁手的兵器。

所以当你去确定产品主色的时候，有三种思路：随大众；反着来；搞特殊。

如何制定产品主色？试试超容易上手的色彩理论取色法

随大众

不同的行业发展至今，已经自带色相了。比如电商购物是红黄色、医疗健康是蓝绿色、商务是蓝色…如果我们每次都用产品或者行业特性去推导色相，出来的大多数都是第一种思路。

反着来

使用和竞品色相相差大于 90 度（中差色、对比色、互补色）的，差别较大的就是反着来。这是逆向思维，通过差异较大的色相能让你在一堆颜色同质化的竞品中跳出来。

搞特殊

抖音和 keep 是我心中搞特殊的 top，既不使用行业相同的色相，也不使用相反的色相，而是双色相或双色相叠加。

用我做的小易 APP 来做例子说一下制定色系的过程吧

基于行业与场景确认色相
色相偏移
WCAG 标准验证颜色
色系拓展
基于行业与场景确认色相
小易是一款助力销售的 CRM 产品，主打销售智能化。取色就要看你立足点是“数据智能”还是“销售”了。与数据智能相关的绕不开蓝绿色，与销售系统相关的绕不开橙色。这个产品是内部定制化的，不存在有竞品的情况，因此随大众更容易取得方案的通过。为免出现“这个颜色一点都不科技和智能”的质疑和返工，我非常科学（识相）地选择了蓝色作为主要色相。

如何制定产品主色？试试超容易上手的色彩理论取色法

色相偏移
用 HSB 参数来看，正蓝色的 H 值（色相）是 240。引用优设大课堂态爷的一句话是：要想颜色好看，色相别太正。那么正蓝色就要偏移：往冷色偏移或者往暖色偏移。

这里加入一个空间的概念：假设产品是一个空间，里面主打智能和数据，我设定了大环境偏冷光，所以里面的物体会受冷光的影响。

如何制定产品主色？试试超容易上手的色彩理论取色法

在冷光环境下，蓝色的色相受环境影响，会往冷色偏移。色相偏移 15 度是同类色，偏移 45 度是近似色。我在两者之间取了中间值，约 25 度。对市面上的产品取色进行研究的时候，会发现它们的色值一般在拾色器九宫格的右上格，所以 S 值（饱和度）的取值范围大致在 77%-100%之间，我取了中间偏下的值 89%。B 值（明度）一般为 100%，除了黄绿色相本身明度偏高，则会适当降低明度。

如何制定产品主色？试试超容易上手的色彩理论取色法

WCAG 标准验证颜色
WCAG 是网页无障碍指南其中关于颜色的使用标准，简单来说就是色彩要在页面中达到一定的对比度，才能让人看清。WCAG 用色标准中普通文本与背景对比度不低于 4.5：1，那么对于高亮文字颜色（通常是产品主色）是不是也需要达到这个标准呢。我用几个 APP 进行了测试，下列 APP 的对比度在白色页面中范围是 2.3-4.5。

如何制定产品主色？试试超容易上手的色彩理论取色法

我估计原因有二，一是饱和度太高有点太艳了，二是现在很多 APP 都有暗夜模式，观察这张图上的 APP 颜色情况，可以发现一个颜色在白色背景对比度越低，在黑色背景对比度就越高。且高亮文字使用的频次相比文本文字少，多数伴随色块按钮使用，所以 3-4 是较合适的对比值范围。

如何制定产品主色？试试超容易上手的色彩理论取色法

有个快速计算对比度的网页很好用，输入色值就可以得出结果。

contrast ratio：https://contrast-ratio.com/#%23FF784A-on-white

还有个网站会更直观，输入色值后下面还有网页例子预览效果。

color review：https://color.review

如何制定产品主色？试试超容易上手的色彩理论取色法

我选择的蓝色对比值在白色背景是 3.9，黑色背景是 5.2，在正常范围内。其实小易 APP 大概率不会有暗夜模式，因为需要投入更多的开发资源，浅色模式也不是不能用。在这个考量下，可以抛开黑色背景不考虑，但是话又说回来，做好准备总是没错的。

色系拓展
色系拓展需要拓展两类：中性色和辅助色。

中性色相对来说比较简单，所以放在前面先讲。前面我已经选定主色是#1b7aff，打开拾色器，将明度调为 10%，就可以得到一个深色偏蓝的颜色。用这个作为界面中性色最深的颜色，叠加白色（白色的透明度以 10%作为基础依次递减），得出中性色的色板。

如何制定产品主色？试试超容易上手的色彩理论取色法

我看过很多写得不错的文章，文末会放相关参考的链接。下面的四种选色思路，是根据他们的归纳为基础，加入一点其它的角度来进行辅助色系的选定。

如何制定产品主色？试试超容易上手的色彩理论取色法
如何制定产品主色？试试超容易上手的色彩理论取色法
如何制定产品主色？试试超容易上手的色彩理论取色法
如何制定产品主色？试试超容易上手的色彩理论取色法

看到这里你应该也发现规律了：

选色离不开色彩的理论知识。在理论的基础上不断尝试搭配，组合出不一样的色板。

而且要基于目的来选择搭配，跟画画一样。如果想要画面和谐，就不要出现多组互补色。画面中有一组互补色时，要取两者中间的颜色来劝架，以达到和谐的目的。如果希望画面冲击力强，则相反。基于这样的色彩理论，可以让我们不出错且有依据地搭配出界面的色系。

我的选色
我希望颜色能有更细腻的色相变化，所以我把色环按照 10 度作为基准细化。选择互补辅助色的时候，我没有选正互补色，偏移了 10 度。从黄色到绿色的亮度都很高，所以我的选色更多偏右边。以选取的这六种颜色作为小易的基础色，微调饱和度稍微降低色彩的黑白灰差值。

如何制定产品主色？试试超容易上手的色彩理论取色法

如何制定产品主色？试试超容易上手的色彩理论取色法

参考文章：

如何科学地建立色彩体系？我总结了这5个方面！
最近我在想一个问题：假如设计师负责一款全新的产品，不受已有规范的束缚，我们该如何定义产品的色彩体系呢？

阅读文章 >
如何抛弃惯性思维，重新定义一款产品的主色？
不知道大家有没有听过这么一个故事：某家餐厅销量一直不太好，老板究其原因也没有查明白到底是为啥，明明选址在闹市区，价格也很实惠，就是卖不出去；后来老板请了个 “大师” 帮忙一探究竟，大师说你家盘子颜色不行，换成橙色保准牛X；老板立马认购了一批橙色盘子，从那以后这家餐厅火爆了，王境泽都觉着他

阅读文章 >
授权 W3G 文档，网页无障碍指南（WCAG2.1）翻译版

优设态爷手绘提高班关于色彩的内容（课程链接）