项目背景

网师分层对平台的重要性不言而喻，诸如阿里这类的电商平台都有完善的商家分级体系，明确了不同等级的权益和运营策略。

2019 年底 CCtalk 平台的网师数量达到了一定规模，平台的基础能力建设也相对完善，因此网师分层的事宜被提上日程。此前我们评估网师的方式是按照流水，将网师分为普通网师、中部网师和大 V 网师 3 类，不同网师对产品功能需求及运营要求差别很大。这种粗略的划分方式可以帮助简单评估网师，但并没有产品化，而且只有单一的 GMV 维度，不够全面客观。有些客单价较低的网师也有大量的购课学生，他们对平台的价值也高。因而我们需要推出一套综合网师流水、招生数量、内容质量等多个维度的方法来进行分层运营。

面对以上问题，相应的解决方案是：

• 建立商户等级体系
• 等级权益差别化
• 增加权益购买触点

价值分析

既然是涉及全平台网师的重大升级调整，当然要从全局的角度来进行价值分析。我在这个项目中探索了用于多角色价值分析的「三维价值分析法」，从整个关系链的角度来解析网师分层对网师和平台的价值。

Step1.列出相关利益者

分别包括：CCtalk平台、网师、学生。

△ 列出相关利益者

Step2.设定中心点并建立关系

分析连接这3种角色的关键点是什么。我们CCtalk作为一个在线教育平台，最核心的因素是内容，因而将中心点设定为「内容」。（注意，如果此时是做某个具体功能相关的项目，那么中心点可以是这个具体的功能，例如「作业」或「直播」）设定中心点后，建立不同角色和中心点之间的双向关系。

△ 设定中心点并建立关系

Step3.进行全局价值分析

在上一步的关系网的基础上，用圆弧连接相邻角色的价值走向关系，从全局的角度进行不同角色间的价值分析。

△ 进行全局价值分析

从上面的三维图中可以看出网师分层对于平台和网师的价值。
对网师来说，有助于：了解成长路径，获得更多产品运营支持，获取更多功能权益。

对平台来说，可以：筛选网师，激励网师自驱动，增加收入。另外，还有一些间接的价值，包括通过督促网师生产高质量的内容来提升平台的价值，通过督促网师积极招生来扩大用户规模。

△ 网师分层对于平台和网师的价值

项目拆解

刚接到需求时，我内心的 OS 是：大项目！概念大，范围广，都有点不知从哪里入手。

冷静下来分析，网师分层本质是一套针对商户端的激励体系。从下往上拆解：由底层商户活跃度来计算经验值，根据经验值划分商户等级，并赋予不同等级不同的权益，权益包括教学核心功能：直播时长，素材存储空间，课程人数等。再向上衍生到不同权益对应的使用场景，以及权益的扩展方式。

△ 分层拆解

从设计层面，分为信息展示和场景触达两部分。这么一看，其实又挺简单。

设计落地

由于项目涉及的底层逻辑多，时间周期跨度大，因此拆分成 3个小版本来实现：商户权益改造，经验值等级底层 & 商户等级外显。前期的功能实现后，先预埋在版本中。等到经验等级上线时统一发布。其中经验值等级底层项目是纯技术，不涉及设计。

所以下面将从功能权益分层和等级经验值外显两部分来讲解具体的设计过程。

Part1. 功能权益分层

功能权益分层是权益的使用层面，包括多场景触达和引导购买增量包。设计时分为场景梳理→设计要点→细化直播场景→具体设计这 4 步来实施。

Step A.场景梳理

拆解权益的生命周期，可分为三个阶段：充足可用，即将不足，已用尽。而功能的使用场景——直播，也分为三个阶段：直播前，直播中，直播后。

Step B.设计要点

将权益生命周期和直播场景结合进行交叉分析，列出设计要点和具体的设计拆解。

△ 不同阶段的设计要点及拆解

Step C.细化直播场景

发起直播的入口很多，除了「立即直播」的主场景之外，还有由预告进入直播的 3 种场景，如果在每个入口都做功能禁用判断的话，不仅逻辑会很复杂，开发实现起来成本也比较大。

于是将直播前的流程细化，发现「直播检测」是进入直播间的必经环节，因此将功能禁用的判断节点缩减为 2 处：「立即直播」&「直播检测」。

△ 细化直播场景

Step D.具体设计

有了前期的分析后，具体设计环节就相对容易了。下面以点击「立即直播」时的功能余量判断为例。

点击「立即直播」按钮，在按钮原有的逻辑上加上新的判断逻辑，此处要注意写清楚他们之间的优先级关系。如果在不了解背景的情况下，很可能就直接写点击按钮进行可用直播时长的判断，那需求宣讲的时候开发就会问你，和原来按钮上的逻辑是什么关系呢，此时就会一阵紧张。

△ 立即直播时判断剩余可用直播时长

Part2. 等级经验值

等级经验值属于展示层。对网师用户来说，最重要的是了解自己当前处于哪个等级以及相应的权益有哪些。对平台来说，除了明确每个等级及相应的权益，重要的是要引导网师升级，以激发他们的自驱力。

由此推导出相应的设计方法：锚定目标、降低门槛和利益点吸引。

△ 设计方法

在设计方法的指导下进行落地，分为网师后台首页的展示，以及等级详情页的设计两部分。

网师后台首页-个人信息模块的展示

由于等级和权益挂钩，涉及网师切身利益，因而在网师后台首页的个人信息模块，增加当前的经验值和相应等级的展示。同时，通过利益点吸引等方式，引导网师向下一个等级努力。

△ 个人信息模块展示

等级详情页的设计

点击等级进入详情页，除了 Lv0 是将所有权益无差别展示，其他等级都是优先展示新增部分，包括新获得的普通权益和附赠的高级功能。另外，用「箭头」和「NEW」的图标帮助用户区分是老权益的内容升级，还是新增的权益。

总结反思

1. 前期缺乏深入调研

由于涉及网师的切身利益，因而此功能受到了网师们前所未有的关注。上线前一周，运营以邮件、通知等形式向网师预热，3 月 5 日会上线这么一个功能。于是还没上线就有网师来咨询在哪里可以查看。刚上线就收到了大量的用户反馈，网师反馈群里的消息简直是秒速级地在刷屏。

其中，网师对每月直播时长限制的反响最为强烈，部分网师表示平台应该鼓励多直播，不能接受对直播时长的限制。因为直接关系到上课这个核心功能，时长不够课都上不了，网师们的言辞非常激烈。所以我们又重新评估了平台的直播成本，经过深入讨论，全面放开了每月的直播可用时长限制。

带来的反思是，如果前期有通过问卷、访谈等方式进行深入的用户调研，了解他们对核心权益的态度，那么在进行权益设置时就能有更全面的考量。

2. 中高等级跨度太大，缺乏激励效果

游戏任务的上手难度曲线一般是先平缓，再慢慢陡峭，越往上难度越大。我们的等级体系其实也是这个逻辑。初级到中级还较为容易，但再往上要非常难，要经过长时间的积累，一看就无望，难有激励效果。

因而我们之后的优化方向是在相邻等级中间设定一些小目标，达到可以提前赠送下一等级的新权益，以此来提高激励效果。

文章来源：优设    作者：鱼游设计

手把手教你 「如何 7 步从 0 ～ 1 设计一款产品经理一稿过，设计风格明确，用户粘性高的软件！」

据不完全了解，身边大部分的 UI 同事都从 0 到 1 参与过一款或多款软件的设计，设计过程中不知道你是否有过这样的疑惑：

• 设计稿都做了 100 版了，但产品经理还是不满意，是我设计不行吗？
• 产品目标、用户目标都标得清清楚楚了，但总是找不好设计关键词，来来去去只会用「年轻化、轻量化」？
• 产品目标明确了，设计关键词也有了，但为什么做出来的稿子不是太概念，就是跟竞品太像呢？

在解决这些困惑之后，我总结了一套自用的，适合从 0 ～ 1 进行软件设计或项目改版的方法 ，并在其他项目上进行了二次验证。

以实践项目 —— 有道少儿词典为例，上线一年期间，用户次日留存峰值 36% 以上，也非常幸运，被 App Store Today 推荐 4 次，App Store 编辑推荐 8 次，被 App Store 纳入 2019 本土优秀 App 盘点中，同时被预装到苹果线下直营店，作为样机体验软件之一。所以，这个方法亲测有效！

这篇文章，通过分析如何解决类似「产品经理不满意、设计关键词不对、设计风格无区别」这些问题，整理出 7 个帮你从 0 ～ 1 设计一款软件的步骤。

文章较长，大概需要花费 15 分钟，建议大家先看大纲，优先阅读符合自身情况的部分。

产品经理为什么不满意？

从 0 ～ 1 进行软件设计，免不了要多出几个设计稿，但做了 100 稿，产品经理对页面设计还是不满意的话，很有可能有 2 点原因：

原因 1：目标不明确

一拿到需求就开始做，很容易忽略需求背后的目标，从 0 到 1 做一款新软件更是要了解业务目标和用户目标。

在提出解决办法前，我们需要先捋清楚以下 2 个问题：

为什么要了解目标？

公司开发软件是为了达到某些目标或是实现某个目的的，只有了解目标才能更好地为公司创造价值。

什么是业务需求、业务目标和用户目标？

平时产品经理跟我们说，要设计一个页面，设计 一个流程，这就是一个业务需求，而这个需求的背后，能够解释清楚这个需求是为了什么，要做到什么程度，这就是业务目标（通常包括用什么手段，给用户带来什么价值，达到什么目的）。而软件的目标用户，他们在一个具体的时间、地点、环境下做了什么操作，想达到什么程度，满足自己的什么要求，这可以理解为用户目标。

解决办法 ：多使用 「为什么+动词」 的问法，向产品经理了解业务目标、用户目标。

从 0 ～1 做软件需要了解的业务目标和用户目标，我们都可以从产品经理那里得到。

少儿词典的产品经理很早就给出了业务目标和用户目标。但，当我们需要更多细节的时候，可以使用「为什么+动词」这样的问法。例如：

• 「我们要做一个少儿查词软件，定位是一款拥有权威释义背书，在视、听、触方面打造良好体验，紧扣教材和教学大纲的适合少儿和家长使用的伴学词典。你来做吧！」「为什么做这个？」
• 「现在儿童教育KOL越来越多，很多家长都很关心k12教育问题。市面上的很多产品都不太适合孩子使用」
• 「为什么这样的定位可以满足用户需求呢？」「为什么是适合少儿和家长使用呢？」
• 「为什么……」

在少儿词典项目中

• 我们的业务目标是：一款拥有权威释义背书，在视、听、触方面打造良好体验，紧扣教材和教学大纲的适合少儿和家长使用的伴学词典。
• 目标用户群体是：小学 1~6 年级的孩子和他们的家长。
• 用户目标是：当小学低年级的孩子在家学习的时候，他们的家长需要一款软件，能缓解家长伴学的压力。高年级的孩子需要一款软件，为他们提供准确教学。

原因 2 ：没有对产品关键词形成共识

我们既了解产品的业务目标，也知道用户目标的情况下，方案还是被 pass 的话，可能是因为你给出的方案和产品经理想要的不是同一个东西。为什么业务目标在这里不起作用了呢？怎么才能弄清楚产品经理想要的是什么？我们可以用产品关键词来回答这个问题。

为什么业务目标在这里不起作用了呢？

我们常见的业务目标的内容是很长的，用户目标的内容也是很长的，在这种所有已知内容都很长的情况下，如果没有准确理解内容，没有对重点内容达成一致，就很容易产生偏差。例如我要向你描述一位美女，她的头发很柔顺，脸蛋很漂亮，身材比例很好，衣品很好等…… 90% 的可能，我们脑海中想的不是同一个美女。但是，如果我跟你说，这是一个跟芭比娃娃很像的美女的时候，我们脑海中的形象会接近很多。

怎么才能弄清楚产品经理想要的是什么？

就像设计师在进行页面设计时，需要设计关键词一样，产品经理在描述自己的业务目标的时候，也需要能概括业务目标重点，突出卖点的产品关键词，这个产品关键词能帮助设计师弄清楚产品经理想要的东西。

部分产品经理为了方便大家达成共识，会早早亮出产品关键词，如果当你们的产品经理没有办法提供产品关键词的时候，我们要学会在讨论中找到。

解决办法 ：从业务目标开始跟产品经理讨论项目信息，直到获得双方达成一致的产品关键词

从业务目标和用户目标开始跟产品经理讨论项目信息，在讨论的过程中，我们可以留意产品多次提到的几个形容词，写下来，然后跟产品反复核对确认，最后双方确认且保留下来的这 3～4 个形容词，就是这个项目的产品关键词。

少儿词典的产品关键词是：权威内容，寓教于乐，适合孩子使用。这些关键词被我贴在屏幕的显眼处，就怕自己哪天忘记了。

设计关键词为什么总是找不对

寻找设计关键词，是设计师非常熟悉的步骤，但常常也在这里翻车，甚至还会出现，不管做什么软件，反反复复就那几个关键词的情况，我们可以把原因归结为：

原因：对用户不够了解

为什么不了解用户会导致关键词找不对？

我们的用户在选择软件、使用软件的时候，了解到的是软件的设计、体验和功能。用户下载软件时，他们已有的认知会影响他们对软件的幻想。就像给小男孩的衣服是天蓝色，小女孩的衣服是嫩粉色一样，如果用户想要一件天蓝色的衣服，而我们给他展示的是深蓝色或是嫩粉色的衣服，这都会让用户产生疑惑甚至离开。因此，如果对用户了解不准确，会导致我们输出错误的设计关键词。

而了解目标用户是又一件复杂的事情。

首先，我们的目标用户可能是一类人，如有道词典，下载软件用户和使用用户大概率是同一个人。目标用户也有可能是两类人或是更多，如少儿词典，下载用户是家长，使用用户是家长和孩子，企业协作软件也类似。

从接触软件，下载软件，使用软件，到判断是否继续使用软件，不同的阶段的目标用户是不一样的，目标用户在不同阶段的需求也是不一样的。

其次，开发软件的周期是很长的，在开发软件的过程中，我们的用户在不断地接收新的知识和观点，用户的喜好，认知可能会发生很大的变化。

因此，为了更好地了解用户，我们需要找到用户跟软件之间的交互关系，以及影响用户喜好的因素。一共有 2 个步骤：

步骤 1. 分析不同用户跟软件之间的接触点，从未来趋势和用户当前认知角度收集用户资料

在这一步骤中，我们加入了 2 个概念，接触点和未来趋势。

什么是接触点？

接触点指的是用户与产品发生交互的关键点，用来捋清楚我们刚刚提到 「用户跟软件之间的交互关系」。以少儿词典为例，家长和软件之间的接触点，可以罗列为：家长听说少儿词典 – 到应用中心下载软件 – 打开软件 – 使用软件……可见要想打造一款用户好评度高的好产品，仅仅优化软件的体验是不够的。

为什么要从未来趋势和用户当前认知角度去收集用户资料？

刚刚有提到新软件的周期是较长的，前期定好的风格、关键词等，到了开发上线后却不适用了，既浪费人力，也浪费资源，因此要考虑未来趋势对用户的影响。同时，用户在选择软件的时候，已有的喜好/预期/经验等用户认知会影响用户对软件的判断。就像大家想到夏天的冷饮时，脑海中会浮现冰块、西瓜等元素，因此雪碧、西瓜等符合用户对夏天认知的食品在天气炎热时会热销，但是受到大部分买家越来越注重卡路里这一未来趋势的影响，低卡的西瓜冷饮也可能在未来一段时间大卖。

接触点和未来趋势、用户认知之间有什么关系？

了解用户接触点之后，我们就可以猜测用户在这一接触点的需求和心理，加入未来趋势和用户认知，能让我们做出来的东西更符合用户预期。

寻找接触点。我们了解到，少儿词典的目标用户群体是 1～6 年级的学生和他们的家长，即 6～12 岁孩子，和 30～44 岁家长。然后，我们粗略地将用户的接触点划分为，筛选软件 – 下载软件 – 使用软件 – 判断是否再次使用软件，孩子、家长跟接触点之间的关系就可以展示为：

孩子是软件查询、练习、核心功能体验者，家长是内容审核者、软件筛选者、伴学时软件使用者。

找到接触点之后，我们还需要把影响用户认知的内容具象化。

例如，我们想了解夏天做什么口味的饮品更好，我们可以从夏日饮品口味销量排行榜，夏日新品类型，夏日广告等角度来获得更清晰的用户认知。应用到少儿词典中就是，家长在筛选软件时，老师的要求，未来孩子考试的内容、日常辅导内容、大 V 推荐的内容等会影响家长对下载软件的判断。每个接触点都可以使用这样的方式，来联想更多影响用户认知的内容。然后我们将得到类似下面的表格：

根据表格，我收集了 近 10 页的用户信息

步骤 2. 提取收集到的信息，并放入四象限中，总结出2～4个视觉关键词、体验关键词

杂乱无序的信息只有经过归纳之后才能被大家使用。

怎么归纳总结杂乱的信息呢？

UI 设计师都清楚，在进行界面设计时，大标题、缩进、分层等排版方式能让我们的页面看起来更清晰易读。处理杂乱的信息也同理，要做的是找到信息的重点，然后把信息归类，最后再用一句对内容进行总结，方便大家理解。应用到我们提取关键词的环节中就是，挑选重要信息、放入四象限中、总结出能归纳这些信息的关键词。

挑选重要信息。以家长筛选软件为例，当我们将热门大 V 推荐的教学方法、内容，进行整理的时候，会发现美学、乐感、编程、外文图书、儿童心理教育、英文教学方法（自然拼读）等内容出现的频率很高，在一堆内容中挑选跟少儿词典相关的内容，如美学、外文图书、儿童心理教育等。

放入四象限中。在这一方法中，我们将四象限划分为设计和用户认知 2 个方向，其中设计划分为视觉风格和体验风格，用户认知划分为当前认知和未来趋势 。以刚刚挑选的儿童美学教育为例，这是一个属于未来家长会越来越关注的少儿视觉发展方向，所以我们放在视觉风格、未来趋势这一象限中。其他内容也类似，不断地提取出现频率高、用户热点高的内容，并根据内容类型放入四象限中

总结出能归纳这些信息的关键词。以视觉和未来趋势象限为例，我们收集到大 V 的美学教育，未来的课本发展趋势，小学建筑风格发展趋势，他们都有一个特点，颜色柔和无攻击，色彩丰富，因此，我们总结出一个视觉关键词是柔和多彩。

其他内容也采用相同的方法进行总结，少儿词典的视觉关键词是柔和多彩，轻质感，亲和陪伴，体验关键词是，探索多变，感官刺激和重复熟悉。

为什么做出来的设计稿不是太概念就是没风格？

视觉关键词出来了，产品的业务目标也出来了，从关键词到页面样式的逻辑也很严谨，但出来的风格却会觉得跟关键词不太搭，或是跟竞品差异不大，在多款 App 实践后，我们发现可能是这样的原因：

没有把关键词的作用发挥出来

引用一句说烂了的名言 「一千个人眼中就有一千个哈姆雷特」。大家在对关键词的理解是有差异的，以「年轻」为例子，一款针对活力的年轻人的衣服和一款针对潮流的年轻人的衣服，设计风格上可能是隔好几条街的。因此，仅仅得到几个视觉关键词和体验关键词还不足以让我们找准方向，我们还需要将关键词组合和具体化。一共有 2 个步骤：

步骤 1. 分别组合产品关键词和视觉关键词，产品关键词和体验关键词，找到同时满足 2 组关键词的规则

为什么将关键词结合能让关键词的作用发挥出来呢？

我们的目的是要做一款满足产品需求，符合用户认知的软件。

从问题 1 和问题 2 中，我们得到了符合产品需求的产品关键词，和符合用户认知的视觉关键词和体验关键词，想要同时满足产品需求和用户认知，我们需要找到他们的重合点。如下图所示，将产品关键词和视觉关键词、体验关键词分别结合，这样的出来的规则就能最大限度地符合我们的要求，既满足产品需求，又符合用户认知。

具体怎么做呢？下面将分别从视觉和体验角度举例子。

视觉角度，以权威内容和柔和多彩结合为例：

「权威内容」 要求我们输出的内容是符合教材，符合老师标准的，内容是准确无误的、来源是可靠的；「柔和多彩」 要求我们在进行页面设计的时候减少大面积颜色的使用，色彩柔和，且颜色多样。

将两者结合，我们得到的规则是：

• 市面上的语文和英语教材以橙色封面为主，因此软件把橙色作为主色，仅在重点区域使用橙色；
• 展示内容要准确，在牛津内容布局上参考《牛津小学生》字典，中文字体采用跟教材相似的文鼎新中楷，英文字体采用跟衡水体相似的 Averta Std；
• 参考大 V 推荐的绘本、动画片常用的颜色，将颜色定为橙色、黄色、蓝色和绿色，降低颜色饱和度；
• 参考绘本的图案，选择圆形作为主要的形状，加入柔和色彩，使用深色和浅色叠加的圆形；
• ……

根据这些内容，我们将得到下面的 4 个颜色和圆形叠加的形式。（ps：通过这样的形式确定的是规则，如：以橙色为主结合另外 3 个颜色，圆形，使用深浅色搭配。具体颜色和叠加形式需要在具体页面中进行调整）

体验角度，以权威内容和探索多变为例：

体验上，「权威内容」要求我们的操作形式是跟老师的教学相似，学习方法需要参考成熟且有效的方法；「探索多变」要求我们在交互形式上可以采用多种形式，给孩子探索未知的机会，交互形式要符合儿童操作习惯，如涂抹、翻转、拖拉等

将两者结合，我们得到的规则是：

• 中文字体跟写，手写涂抹交互形式，添加错误抖动反馈；
• 单词记忆，参考如师通学习方法，采用卡片翻转形式，将单词和图片内容分离；
• 英文跟读，采用表情代替评分机制；
• ……

其他几个关键词的结合也是使用这样的形式，这里就不一一展开。下图是少儿词典的视觉关键词和产品关键词结合后的样式。

步骤 2. 选择复杂的核心页面，把具象化的体验规则、视觉规则融进页面中，确定设计风格

规则梳理出来后，我们就要挑选一些重要页面进行风格尝试，以结构复杂的中文查词单字结果页为例：

分析小学一年级到六年级的考试内容，我们了解到部首、笔顺笔画、跟写、发音等汉字的基础信息是低年级用户（小学三年级及以下）会使用到，他们要求信息完整且准确；像词组、造句这些信息则是针对高年级学生，要求快速准确定位到具体的内容板块。

分析完内容结构后，我们就需要根据内容布局，加入表格中总结的体验规则：

• 重复熟悉，针对低年级用户的使用习惯，我们将顶部信息划分为展示区域和操作区域，方便用户操作，降低用户学习成本；
• 重复熟悉，中文查词结果页中，使用田字格上下布局的形式，使用课本同款楷体字，满足学生的识别文字书写规范的需求，也符合用户认知；
• 探索多变，在 tab 切换的时候，我们将 tab 选中的颜色变成软件的 4 个主色循环切换，激发孩子对软件的探索欲望；
• 探索多变，按钮形式上采用出血的图案形式，打破常规；
• ……

最后，梳理好页面的体验形式之后，我们开始给页面添加视觉规则：

• 在推导中，我们选择多彩的颜色模式，常见的小学课本是以橙色为主，因此，软件也选择橙色作为主色，并加入黄色、绿色和蓝色作为辅助颜色；
• 图标采用的是孩子熟悉的元素+轻质感这样的组合；
• 结合绘本和孩子常见元素，使用两个圆形叠加的形式，作为软件的主要元素；
• 为了让内容更符合孩子阅读和使用习惯，使用大字号和大间距的形式，常用字号是 32px，最小字号是 28px；
• ……

对比产品原型和市面上的一些竞品，我们可以发现，查词软件在内容布局上相差无几。如果没有找到符合我们产品业务目标，同时符合用户认知的规则，我们将被淹没在一群查词软件中。

步骤 3. 建立一个画板，把用到的颜色、规则、字体、间距等内容罗列出来，并给他们限定使用范围，方便自己查阅和团队合作

最后一步，相信很多设计师都会在设计过程中建立一套方便好用的设计规范库，这里就不展开来说了。

总结

最后，再对上文的所有内容进行概括。从 0 到 1 进行软件设计我们需要用到下面这 7 步:

1. 多使用「为什么+动词」的问法，向产品经理了解业务目标、用户目标。
2. 从业务目标开始跟产品经理讨论项目信息，直到获得双方达成一致的产品关键词。
3. 分析不同用户跟软件之间的接触点，从未来趋势和用户当前认知角度收集用户资料。
4. 提取收集到的信息，并放入四象限中，总结出2～4个视觉关键词、体验关键词。
5. 分别组合产品关键词和视觉关键词，产品关键词和体验关键词，找到同时满足 2 组关键词的规则。
6. 选择复杂的核心页面，把具体化的体验规则、视觉规则融进页面中，确定设计风格。
7. 建立一个画板，把用到的颜色、规则、字体、间距等内容罗列出来，并给他们限定使用范围，方便自己查阅和团队合作。

完成这 7 步，将可以让你从 0 ～ 1 设计一款产品经理一稿过，设计风格明确，用户粘性高的软件。

文章来源：优设    作者：ukeyliang

用户体验地图（Customer Journey Map）是什么？

用户体验地图是从用户的视角出发，去理解用户、产品或者服务交互的一个重要的设计工具。

也可以说是以可视化的形式，来表现一个用户使用产品或者接受服务的体验情况，从体验的过程中来发现用户在整个体验过程中的问题点与情绪点，以此来从中提取出产品的优化点，方便对产品进行迭代，从而保证良好的用户体验。

经典案例

Chris Risdon绘制的欧洲铁路购票的体验地图

上图中是欧洲铁路公司整个体验地图的一部分。欧洲铁路公司是一家美国经销商，为北美旅客提供一个独立预订火车票去欧洲各地的平台，而无需用户去网站预定。他们已经拥有了一个良好体验的网站和一个屡获殊荣的咨询中心，但他们希望通过所有接触点来优化用户使用过程，这样可以让他们更全面地了解，他们应该专注的投资，设计和技术资源。整体的“诊断”评价系统，包含一系列的重点举措，体验地图只是其中派生的一部分。体验地图帮助建立同理心图，来理解随着时间和空间的推移，用户与欧洲铁路公司服务系统交互时接触点的变化。

在这张体验地图中采用了五个关键组成一个体验地图，一个体验地图可以直观的表示用户操作流、期望、特定的目标、用户情绪状态和整体的体验点，做到整体把控和评估产品体验。

作用 ：

用户体验地图能帮助我们创造出一个有大局观的用户体验，更好的帮助我们理解用户的痛点和需求，帮助Team达成共识，非常有利于跨团队合作。

用户体验地图包含的内容 ：

其中包括，人群（产品的用户是哪一类人）、 用户的需求（用户想得到什么）、 路径（在某特定的场景下体验的整体过程） 、接触点  （产品与人或人与服务接触的关键点）、行为（用户的行为是什么样的？）、情绪  （体验过程中的感受心情） 、机会点  （过程中可以突破的点，可以成为特色的地方）、 解决方案  （解决用户在体验过程的痛点）、 问题  （解决用户在体验过程的痛点）。

用户画像 ：

在准备开始绘制用户体验地图的时候，我们应该要确立用户群体 / 确定产品目标 / 了解用户目标，并作出用户画像。

视觉设计师怎么使用

举例（一）：

那我们看看作为一名视觉设计师应该关注哪部分的流程。

视觉设计师的用户体验地图 ：

我们的聚焦点应在上图的这几个部分。

所以当绘制完用户体验地图后，应该再绘制一份视觉设计师看的版本，我们设计师主要关注的视觉的触点。

定量方法（产品方向）：

我们在行为和情绪上一般会使用问卷法、后台数据分析法；而在需求和问题上一般会使用焦点小组、访谈法、观察法、日志法和田野调查，下面就为大家来解释下这些方法。

焦点小组：是指从研究产品中所确定的全部用户群(总体)中抽取一定数量的用户来组成样本,根据样本信息推断用户群总体特征的一种调查方法。

访谈法：访谈，就是以口头形式向用户进行询问，根据被询用户的答复搜集客观的、不带偏见的事实信息，以准确地说明样本所要代表的总体的一种方式。

观察法：观察法是指研究者根据一定的研究目的、研究提纲或观察表，用自己的感官和辅助工具去直接观察用户，从而获得资料的一种方法。

日志法：是由用研人员按时间顺序，详细记录自己在一段时间内使用产品的过程，经过归纳、分析，达到分析产品目的的一种工作分析方法。

田野调查：在日常生活中，在一个有一个严格定义的空间和时间的范围内，体验特定用户群的日常生活与思想境界，通过记录自己的生活的方方面面，来展示不同阶段用户群的基本需求。

注意事项（5要点）

1. 在制作地图前，应理清楚产品的前期规划和需求，并且与同事达成共识。

2. 避免以自己的经验或者认知来确定用户体验地图中的接触点，应当真正的从用户的行为中去提取。

3. 不要将一些落后的信息加入到用户体验地图中。

4. 最好先在Team内部脑暴一份地图，再去与所制作的地图进行对比。

5. 用户体验地图不会涉及到实现方案和现实机制，只涉及用户的体验。

团队人员的合理搭配 ：

将公司或者团队的PM、RD、运营、Leader等过来，详细的描述这一份用户体验地图，聆听他们的反馈。

在分析用户问题上 ：

分为四个等级：ABCD，在对优先级进行排列的同时应该，考虑到产品在每个阶段的侧重点，根据不同的进度和情况，来对优先级进行排列，帮助我们整理问题和提炼最核心的一些体验问题，区分问题还能帮助我们更好的把握产品的优化方向。

视觉设计师应该关注的点 ：

视觉设计师的任务是什么？是有效的传达出产品的信息、简洁并且优雅的传达、通过视觉设计制造出愉悦的用户体验。用户在很多的场景下都可能接触到企业的产品或者是服务，这个服务接触带给用户的感受更多是偏向于视觉感知方面的。所以我们需要尽可能的列举出企业的产品或者服务与用户可能产生接触的场景、服务触点，再根据服务触点延伸出相关的“视觉触点”，用来梳理出我们需要输出的视觉产物，做出相对应的查漏补缺和优化，输出指导企业的品牌建设工作。而用户体验地图就很适合作为这样的工具。

“体验地图”对于优化视觉体验的意义 ：

整体性：系统性地规划品牌的视觉统一化工作，提升品牌建设工作的全面性和完整度。也可以避免未来工作中不同的品牌 / UI / 运营设计师对于品牌概念的理解不同而带来的设计出入。

品牌设计，是用户对于公司产品的直接印象，所以在品牌设计的要求就是：建立特征、保持特征、推广特征、美化特征、对于以上的要求，来提供完整且匹配的设计方案。

运营设计，运营设计的目标就是让用户尽可能的感知到产品的好，把产品的特点通过设计包装传递给用户，一个好的运营设计，应该是在用户看到你的设计作品后，会产生足够好的兴趣和好感，并愿意去关注你的产品。

UI设计，这是产品与用户接触过程中，频率最高、最直观的部分，目的是为了让用户认识到产品的相貌和气质，UI设计需要注意界面视觉层次的强弱、信息划分、用户的视线轨迹、色彩的表达、质感、舒适度等，来让用户觉得这个产品设计真好。

例如 ：

OFO，以年轻人为主的共享骑行产品，无论是在品牌/运营/UI的设计上，都能让人感觉时尚、年轻、阳光、且有亲和力。

品牌设计 :

UI设计 :

运营设计 ：

UI设计 ：

运营设计 ：

设计师的进阶 ：

在一开始的初级设计师阶段（也就是1.0阶段），我们需要从交互设计师手中接过交互设计稿，来对它进行气质进行改造，做出独特的视觉设计，也就是将其翻译为高保真稿，然后再与开发同学进行对接，也要保持视觉走查，以防实际效果与预期效果的不符；在这个1.0阶段我们的表现力和创造力，是最为主要的，如何去做出差异化？这是这个阶段的设计师需要考虑的，在这个APP设计趋同的大浪潮下，你如果能够做出不一样的设计，那么你则可以一鸣惊人，从众多水平相当的设计师中脱颖而出，这时你便可以考虑进入下一个阶段，也就是2.0。

在高级设计阶段（即2.0阶段），这时候你就需要拥有更好的产品思维和逻辑能力，不仅仅只是从交互设计师拿到交互设计稿，直接上手开做，在这之前，你需要开始了解产品的业务定位、用户人群、产品目标、当前的问题、未来的迭代等，需求方这时候就成你的主要对接对象，需要你具备拆解需求、采集用户的需求、扩展业务、能进行设计验证的能力，能将产品的气质和品牌贯穿于整个产品(UI/运营/品牌)，设计是怎么推导的，现在就不是仅仅只在停留在好看的层面上了，毕竟设计师不是画师，而是解决问题的，我们在做了某个设计后，就要去关注它的变化了，看看用户的反馈、商业转化率等等，这都是为你的下一次设计迭代做的参考。

从

分享到脉脉

转自：脉脉

原文链接：https://maimai.cn/article/detail?fid=988630001&efid=N-uHKNnf7vXGBmaFd3lZHA&use_rn=1

在页面导航栏中，常会见到返回、取消与关闭三者按钮。许多同学会弄混它们的使用逻辑，所以写一篇小文帮助各位梳理下。

返回和关闭

先抛开图标，我们回到功能本身的含义上看。如果我们不在产品的语境里，就单看「返回」和「关闭」这两个词，你首先会想到什么呢？

当我这么去问自己的时候，脑子里出现的并不只是零碎的词语，而是一些场景和画面。比如我走错路了，需要原路返回；公司复工了，我要返程回去。或者，睡觉时间到了，我该关闭电脑了；饭菜烧好了，我得把油烟机关掉，等等。

如果仔细去想的话就会意识到，语义衍生出来的，都是我们日常生活中的经验和对世界的认知。产品中使用的各种语言，不管是文字也好，或者图标图形也罢，一直都是以我们对它最本能的理解为基础的。所以只要你联想自己对「返回」和「关闭」的看法，就能知道它应该在什么样的产品情境中出现，以及它为什么会出现。

于是，很自然的，我们会把「返回」和「路径」联系在一起，所以「返回」在导航设计中不可或缺。并且「返」也预示着我们会回到之前的路径节点，整个过程是连续性的，不被切断的。而「关闭」就完全不一样了，它一般和我们的动作有关，是一个短暂性的操作，相比返回也显得更为独立。

根据我们对语义的判断，再结合实际产品中「返回」的场景，我们可以概括出「返回」和「关闭」的特征差异。

1. 返回

连续性：按照产品的页面层级顺次跳转。但存在特殊情况，因为有些产品定义的功能出入口是不一致的，在信息架构层级已经做了一定的优化，所以返回不一定会按原来的路径回去，可能会按产品既定的路径。比如网易云音乐歌曲播放页进入直播后返回不是到播放页。

整体性：在产品功能页面关联性较强的功能中，「返回」需要连接各个页面与层级之间的架构关系，因此「返回」作为操作节点，可以帮助产品功能的各个页面之间建立联系，维持产品的整体性。

2. 关闭

非连续性：用于产品中的临时内容或临时动作，比如弹窗或活动页，与上一级页面没有直接关系。

独立性：非产品原生内容或是产品内的独立内容。比如小程序、浏览器标签等。

3. 返回和关闭的使用场景

知道了返回和关闭的特征后，我们可以从两者的使用角度上再去梳理一下。

现在产品中关于返回和关闭有三种状态：

1. 只有返回
2. 只有关闭
3. 返回和关闭同时存在

1 和 2 的情况很好理解，我们只要根据前面各自的特征去看就能够理清场景。

3 的情况会有特殊性，因为它同时具有返回和关闭这两种看起来相矛盾的特性。其实这是由内容决定的，当内容同时具有独立性和整体性时，就需要支持两种操作。如小程序可以作为一个独立功能，但其本身又可以看作是一个完整的小产品，具有自己的页面结构和页面层级。所以小程序对于它所属的产品，我们有关闭的需要，小程序内的页面导航又需要返回来实现。

除此之外，产品可能开始只有返回，后面临时出现关闭按钮，比如微博「疫情地图」中使用「小区疫情查询」和「7×24 小时疫情快讯」后会出现关闭功能（帮助用户快速退出）。

这里我们可以从连续性和非连续性的角度看，产品针对具有复杂层级和内容的页面设计了顺次（返回）和跳页（关闭）的导航方式，其中关闭随实际情境出现。以此为用户提供了更为灵活的导航路径，来同时满足用户逐级深入、连续返回浏览和选择性查看、临时关闭的需求。

取消和关闭

针对于「关闭」，它和「取消」会有重叠的含义，所以有时并不能很好地去区分这两个功能表达的应用场景。于是，我们可以借用之前的方式，先把「取消」单独拿出来理解。

一般来说，「取消」意味着行为过程中，还有后续行为，整个过程没有完成，当下后悔了，因此取消了当前操作。它更倾向于表达我们主动去做了什么改变，然后中途放弃了。

比如，想煮个饭，于是下了米，倒了水，定时，确认（取消），完成（关闭）。

这时候中间如果突然不想煮饭了，在定时之后，就停止当前行为，那就是取消。但点了确认并完成煮饭之后，这个行为就结束了，只能关闭。因此，它们之间就是行为上的差异。

就好比，打开微信公众号文章，内容已经加载出来，行为已经产生并结束，这时候左上角就一定是关闭。而发朋友圈的时候，左上角是取消，那是因为行为过程还在继续，没有发布，所以可以取消。而发布之后，就无法取消，想要关闭，也就只能删除这条朋友圈了。

所以在操作行为中的页面，左上角最好是使用「取消」。

当我们对词的含义有了进一步思考后，就可以去看它们在产品中的表现了。

比如广告的关闭、推荐内容的关闭。都是产品自身提供的内容，用户不想看到就选择关掉了，没有试图去改变什么。

包括内容页面，或者活动页面，被点开，且加载完成呈现出来之后，这个行为就结束了，没有取消的概念，只有关闭。

再比如，选择图片文件时的取消，微信发朋友圈、微博发帖时的取消等等，我们能发现都是用户主动采取了什么措施，但是又后悔了所以选择取消。

或者如游戏设置，就不适合用关闭，会让用户在理解上产在歧义，比如用户设置到一半，不想设置了，那现在关闭的话，设置是生效了么？所以用取消会更合适。

这些时候，不存在关闭的概念，因为没有内容可以关闭，只能是取消当前行为。如果使用关闭，与该场景下的用户行为不符，反而增加了用户对文案的理解成本。

简单来说，取消强调的是放弃改变，关闭强调的就只是抉择。

不过这里也有一个特殊例子，就是，微信公众号文章转发给好友，左上角是关闭，而钉钉里面内容转发给朋友，就是取消。为什么呢？

在一些特殊场景之下，「关闭」是包含「取消」的。

好比刚才煮饭的例子，现在的电饭煲很高级，如果在过程中不想继续了，拔掉电源就是完全关闭了，但同时这个行为也包含了人不想继续煮饭这个行为，想取消掉了，所以这时候关闭是包含取消的。它跟文章加载完成，已经呈现出来，是不一样的。

而上面这个微信与钉钉的例子，就存在这种包含关系。比如，内容已经加载完，要分享给好友，这时候加载出来的好友列表已经出现，只是选择发送给谁的问题，用户可以关闭已经加载完成的好友列表页面，或者理解为用户打算取消当前行为。

不过这样的设计并不建议大家将其定义为关闭，因为毕竟行为还在继续，使用取消反而更容易理解也更符合场景定义。

譬如，PC 的弹窗经常会同时出现叉（指代关闭）和取消，虽然操作的结果都是使弹窗消失，但是用户的操作目标是不一样的，事实上这里提供了两种选择，即我不想做决定，我要关掉弹窗，以及我决定现在不这么做，我要取消这个动作，这里的关闭其实就暗含了取消的动作。

在 PC 端，我们有足够的空间为用户提供不同的选择，给予用户充分的自主控制权，以满足他们对功能的不同期待。而在移动端，我们需要删减或合并功能，所以当用户同时产生重叠的诉求时，我们往往会选择当下最符合用户心境的功能，这是「场景细化」的结果。这也能解释为什么现在很多 PC 产品的弹窗中也只会保留取消，而不提供叉（指代关闭）的选择。因为用户面对功能不知所措、不做决定的情况已经越来越少，更多的用户已经明确地知道自己应该怎么做。

这就是「取消」和「关闭」的差异，以及移动产品对两者的取舍的根本原因。

同样的，有一些页面，取消和关闭都会用叉的图标来表示，只是在不同情境中，这个叉同样可以理解为取消，关闭，以及取消或关闭。差异点跟上述内容相同。

结语

返回、取消和关闭看起来简单，深入分析后又显得复杂，但相对复杂的分析都只是为了能简单地去运用。在这个问题中，每个人都可以从自己日常的经验出发，然后在产品不同的语境里去体会一个词语、一个图标背后隐藏着我们什么样的认知和使用的习惯。

那由这个问题延伸的，其实还有产品的导航方式，页面出入口的设计差异，产品中整体与独立，连续与非连续的内容结构，原生与非原生页面的差异等等。

小问题同样可以见大，但我们也不需要过度思考，本来问题的解读角度就是因人而异的，也无法面面俱到，上面的只是我的理解方式。设计还是需要回归到用户和产品的目标，再去结合场景和产品业务的使用模式才能得出合理有价值的方案。

文章来源：优设    作者：呆呆U理

菲兹定律在交互设计中的应用是很普遍和广泛的，有时候在我们设计界面之时，不知不觉就应用了菲兹定律，但是我们却未察觉。

关于菲兹定律的具体内容，可以说是大家耳熟能详，甚至在学生时代就有所了解：从一个起始位置移动到最终目标点所需的时间由两个参数来决定，到目标的距离（D）和目标的大小（W），可以用数学公式表达为：

在当今互联网背景下简单来解释说，就是大而近的目标区域意味着用户用需要耗费太大的精力即可轻易点击或者关注到目标，反之，小而远的目标区域则意味着用户将耗费一些时间和动作才能触及到目标。在一般情况下，让用户耗费时间和动作的操作，会使人产生负面的用户体验。

以上说的，其实是对菲兹定律表象的解释，每个人在网上也会搜到很多类似的解释。当你搜索时会发现，关于对菲兹定律的应用，网上绝大多数的资料都是在以PC端界面作为定律的解释，但移动界面却少之又少，这里面的一部分原因是菲兹定律提出的时间，一部分也是因为在移动端的设计中，菲兹定律会变得很零散和琐碎，很难真正用几句话来总结，这篇文章也是我第一次试着在移动端的交互设计的范畴内对菲兹定律的应用进行简单的总结。

1. 让按钮更大一些

我在这一部分分了几种情况，分别进行讨论，其一呢，就是fab button。在现有的fab button中，大家会发现，虽然按照正常iOS的设计规范，一般按钮的大小都会被设计为88px，但是在设计fab button时，我们一般都会选择大一些的尺寸，例如100px、110px、120px。

其二就是页面内功能按钮的大小，我们在做界面设计的时候，都知道做到统一性，但很少去深入地想，界面统一的背后是在像用户传达一个什么意思。

举个例子，这是【洋葱数学】和【360家庭防火墙】的登录界面，市面上的登录界面大多大同小异，基本组成就是账号+密码+按钮（或手机号+按钮等）的组合。

那我们来思考一个问题：为什么在手机号只有11位已经确定的情况下，输入框和【下一步】按钮还要做这么长，接近通栏的一个样式。

我试着来找到这个问题的答案，第一个，是对于品牌设计规范的执行，对边距是有一定要求的，也就是我们常说的保持页面元素的统一性；第二个，即是对菲兹定律的应用，在这个页面中，最核心的两个功能【输入】和【下一步】给予他们一个足够的大小，会让用户的注意力更加集中，避免被分散精力。

2. 让相关联的信息内容距离更近

这也和设计原则中的亲密性相一致。依旧可以用我们常见的信息输入界面来加以印证。这两个界面是我随手做的，对比一下即可看出优劣。

在相关性比较强的功能中，拉近彼此距离，既能够给信息一个清晰的层级，更能够减少用户的操作成本。

3. 界面的边界会让用户操作更加精准和容易

在研究交互界面的时候，我们总听到一个说法，“界面的边界是无限的”，它当然不是在说界面是无限大的，对于一块屏幕来说，在进行操作的时候，无论是PC的鼠标光标，还是移动屏幕的手指，在操作到界面边缘时，因为无法延伸，所以最精准。

这也是我们看绝大多数fab button弹出的菜单是在界面边缘，而不是在界面中央的原因。

除此之外，还有在很多安卓手机中，卸载app时会让用户把要卸载的app拖拽到屏幕上边缘的区域进行卸载，这样相比给一个【X】按钮，会更加精准，而且拖拽的操作也会给用户更多思考的空间和时间，减少误操作的概率。

但是，这个但是很重要，不要把所有既定的法则都奉为圭臬，所有事物都要辩证着看，在没有限定条件的情况下，菲兹定律的应用不会有任何问题，但是如果加以条件的限定，就不是这么简单了。

简单举个例子：在进行删除等负向操作时，很多app会把确认删除等操作做得离你的上一步操作区域更远，或者让确认按钮更加不明显，这是在帮助用户，或者说希望用户在做负向操作时，有更多的思考空间和时间，规避误操作的影响。

在《看懂设计》这个系列里，我会选择性地对在交互设计中常常被应用的设计心理学、方法论等进行简洁有案例的解析，例如大家耳熟能详的交互设计7大定律、斯金纳箱理论、边际效应、锚定效应、格式塔理论等等让大家尽可能地在实际案例中找到它们的应用，而不是让这些方法论成为我们脑海中的空中楼阁，知道、听说过，但是不会应用。

转自：站酷-鹿爷不是咸鱼