设计流程、交互设计进阶、空状态设计

设计作品源于设计师的自我发现、情感和创造，在日常工作中我们加入字体、颜色、空间准则来让在我们感性的表达设计美学基础上更理性的表达设计思维；以上这些是众所周知的基本法则，是设计具备的基本能力；科学的、合理的、为用户设计才是设计师价值的体现。那么如何让我们的设计更理性？

在长期跟一条产品线的工作过程中，我们会发现每天做着很多事情，不知道会不会有以下感觉：1.感觉离用户很远；2.感觉对用户数据的增长好像没有什么明显帮助。那么用户增长和设计有什么关系？设计师该如何跳出感性思维进行科学的理性的设计产出？

举个例子

例子1:Hotmail情感话设计案例

Hotmail冷启动时在发出的邮件末尾签名处，增加了一行附言：“I love you.Get your free E-mail at Hotmail.” 这一改动在仅仅几个小时之后，使Hotmail的用户注册曲线发生了戏剧性的变化，原本无人问津的服务，开始以每天3000个新用户的速度增长。直至一年半后出售给微软之前，Hotmail的全球用户总量达到了惊人的1200万人——要知道当时全球的网民数量也才不过区区7000万人。

例子2:Facebook博客小挂件

向用户提供带有个人Facebook基本资料的博客小挂件，用户可以将小挂件的代码粘贴到自己的公共主页或者博客上，对外展示炫耀。结果，这个看似不起眼的小挂件每月为Facebook带来了数十亿次展示量、千万次点击量和百万级的注册量。并且，随着用户基数的激增，更多人愿意在自己的博客网站上贴出小挂件，以争取更多的好友和互动。

如果第一个案例让大家觉得不可思议的话，第二个案例就相对容易理解。即：通过设计满足用户潜在诉求的情感共鸣。Hotmail通过一句情感独白让发送邮件从冷冰冰的工具变成用户情感之间的交流，在当时的大环境下脱颖而出；

Facebook则通过头像挂件解决了新用户入场之后二度人脉扩张的诉求，试问进入社交软件发现没有好友会是多么的焦虑？即便你的设计再出彩（如line在国内仅火了萌宠大军，app却无人问津）。

所以，我认为判断一个科学的体验设计场景标准为：“刚好你有需要，刚好我能满足”。

不同的是Hotmail的案例可能是一次脑爆的结果，而Facebook则是用了6个月之久基于目标链路的用户行为数据诊断、结合业务需求深度剖析得出符合业务增长目标的“待发现用户诉求”，具备很强的科学性。那么在工作中如何建立科学的机制，在更深层次的产品用户体验设计中体现设计师的自我实现与自我价值？以我服务的产品“网易有钱”为例：

网易有钱是一款支持自动同步的全资产记账软件。目标定位：白领、骨干、精英用户（以下简称白骨精用户）愿景为年轻的渐富人群提供全方位的资产管理服务。2015.6月正式推出至今，已成为自动记账细分领域的领先者，2017年增长达到150%；网易有钱作为上线三年的产品相对功能趋于完善，任何功能的调整及增加都会对现有用户带来一定的影响，因此我们在进行3.0需求改版的时候结合以下五步设计流程来满足产品同学提出的业务需求。

Step1:明确战略目标及短中期业务目标

Slogan是产品与用户的第一次接触、也是第一次情感的传递和共鸣，简短的文字直观的告诉用户我是谁，我能为你做什么？浓缩了某个产品在一段时间内的愿景和战略目标。kpi则是中短期业务目标的直观反馈现阶段产品方向（ps：可参考AARRR模型“获取、激活、留存、传播和收入”）。

网易有钱现阶段战略目标

• slogan：支持自动同步的全资产记账软件
  

• 全资产记账：全资产记账除了需要登记资产账户的余额之外，也登记资产账户的变动和交易情况。如xx股票账户个股购买时间、金额、区间涨跌幅、持仓补仓、交易及收益情况等为一个全资产链路。

• 自动同步：即用户添加资产后、如房贷：后续的记录及剩余贷款金额和还款日期等事情交给我们来做。

业务目标

• 结合AARRR模型，有钱的短期业务目标：获取用户、提高留存、引导传播
  

以上两个目标可以帮助我们锁定设计思考的维度。设计方案能否在满足产品需时更好的服务于用户？这需要我们制定科学的数据策略模型来定位用户问题及潜在的用户诉求。

Step2:制定数据维度分析策略模型

Hotmail与Facebook的案例均是Growth Hacking的行为。Growth Hacking 以数据驱动产品增长策略的理念、用户在产品生命周期中各个阶段的重要指标的分析都可以让问题定位更聚焦，这非常适合网易有钱，精确的用户行为数据让我们做设计策略时有非常重要的参考价值。根据业务目标结合增长策略我们制定如下数据分析维度：

• 用户动态分析：核心功能用户行为发生了多少次，占比多少。

• 行为漏斗模型：关键行为是以什么样的形式发生的，每一步有多少留存和跳失。

• 用户活跃度：周期（日、月、季度、年）内用户活跃度的表现有什么不同。

• 单用户行为分析：用户进入app做了哪些事情，过程如何。

Step3:数据提取、整理问题

在核心流程上增加全链路埋点可以帮助我们了解各个模块之间的流量占比（用户行为数据提取），结合策略模型了解每一步流程的点击率、跳失率、转化率做到心中有数。使我们在新增功能设计时可以告诉需求放什么样的方案是合理的。（ps：一段时间后你会发现需求方不会再说这个字往左一点，放大一点）

例：添加资产流程全链路埋点“添加资产btn—资产选择list—账户登录—成功添加资产账户

多维度整理问题，使其更真实精准的反应用户行为。数据观察+用户访谈—— 采用数据提取及访谈的方式—提取7日及30日活跃，观察用户的行为，同时邀请用户访谈双向维度比对得出问题：

数据观察问题分析

• SEM渠道来源用户表现出手动记账的趋势

• 资产卡片的添加数量有限,造成首屏空间的浪费

用户访谈问题整理

• 手动记账结束后懵了，不知道在什么地方看账单

• 信用卡没有到期还款提醒，造成逾期还款

还原问题本质，数据反馈及用户访谈的问题是客观的且随性的、如用户永远想要一辆跑到比较快的马车。则需同相关人员一起分析定义落实到产品层面的本质问题，满足用户的潜在诉求：

数据观察问题分析

• 用户需要一款便捷的记账工具，合理兼顾自动记账和手动记账的需求

• 用户添加资产的意愿不够强烈，首页向用户传递情感不够友好，不止造成空间极大的浪费还传递出冷冰冰的工具感

用户访谈问题的本质

• 产品在主打自动记账的前提下对手动记账用户不够友好，须提升手动记账用户的权重

• 产品功能不够完善：如上所示提醒不够及时造成用户逾期还款的不友好体验

Step4:寻求资源帮助

善于寻求资源帮助，以上聚焦定位问题的工作穿插了产品、运营、BI、项目管理等不同职能、因此我们在明确目标之后积极寻求各职能同学的支持推进数据埋点、用户访谈、数据分析、问题定位等工作，很庆幸我们团队的同学给予了极大的支持。

Step5:设计方案产出

这一步很关键，设计师需要把上述的流程重新梳理一遍，以数据反馈、用户反馈为基础结合业务目标，制定符合现阶段“引导、提醒的用户诉求及拉新、促活的产品战略”设计解决方案。

我们针对上述流程中的数据反馈结果，做了如下设计策略

1. 用户引导策略：产品功能层面加强添加资产和记账引导，利用有限的空白空间交互告诉用户不止可以添加资产，还可以手动记账。

   

2. 事件反馈策略：手动记账结果反馈，在当前页面告诉用户记账结果出入口保持一致，让用户能明确的感知到做了一次成功or失败的操作。

   

3. 事件提醒策略：最理想的金融管理产品是类似于银行私人管家的服务，我们根据用户添加的资产账户自动计算入账并提醒雇主每笔资金的流入流出情况和时间排期避免出现遗忘或逾期的不人性化事件，建立起私人管家的情感化服务做到“刚好你有需要，刚好我能满足”。

   
   

为大家奉上以上方法总结的一套完整的流程图

在不同的时期设计师需要具备不同的思考维度，跳脱纯粹的设计思维以用户体验产品设计思维承担更多的责任，把自己对于设计提升产品价值的思想传播出去，让自己的设计作品有量化支撑的说服力，让不同职能的人员认识到设计的价值。以上是我的一些浅显感受，欢迎大家探讨交流。

作为交互设计师，工作几年之后，如果还处在 “从产品接需求输出线框图” 的循环中，或许就会产生一些迷茫：自己的价值和竞争力在哪里？如何突破，进一步提升自己的能力与话语权？迷茫，是因为无法定位自己，寻不得方向，找不到出路。所以，当我们提问该如何提升时，不妨先想一想，【用户体验设计】这座高塔，究竟是个什么模样，而自己又在什么位置。

此文中，我根据自己的一些工作经历和理解，将交互设计师的能力成长分出三个阶段：功能完善者、产品推动者、价值引导者。读者不妨对照自身，看一看自己正处在哪个阶段，又可以如何继续精进。

第一阶段，设计师需要具备基本的设计思维，掌握解决问题的基本思路和方法，主要工作包括：分析需求、确定目标、梳理逻辑、输出方案、跟进上线、追踪反馈，将产品需求转化为功能流程，以达成用户及业务的目标。 

相信多数同学，正式进入工作，都是从接手一些基础需求的设计开始起步的。然后，我们会发现，这也是一个不断发现问题并自我调整的过程。尽管多数人都可能在学校做过不少课题项目，但进入真实的工作环境，还是会遇到不少关于场景细节、业务规则、开发实现、时间管理、沟通合作等方面的现实问题，典型的如下面这几类：

• 忽视需求分析：

        接到需求后，感觉有了一些想法，就马上开始细化解决方案，而遗漏了对需求、场景及已有系统的深入了解和分析过程，导致解决方案暴露各种问题，甚至出现方向性错误被整体推翻重来；

• 缺少独立思考：

        产品策划在提出需求时，往往也会有一些自己对问题的解决思路。部分同学，可能就直接顺着已有的思路继续，而没有及时返回去，分析思考问题的本质，探讨更多的解决路径。

• 缺乏时间管理：

       当手上的任务一多，就无法兼顾已完成交互的跟进工作，忽视了对开发结果的验收、已经设计上线后的数据、用户反馈的追踪。

其实很多类似问题的出现，归根究底，还是设计师在形成自己的工作思路和方法前，忽视了对基本设计流程的遵循。

「 在网易邮箱大师设计团队内部中，为了避免设计师反复出现类似的问题，设计组会要求一些流程结果的可视化输出，如：我们将设计分析的常用方法整理形成模板，并要求设计师在拿到需求后，需要先完成这样一份简短设计分析报告（报告只需要包含关键性结果，不需要详细描述每个过程，因为这样反而会花费设计师大量时间在文档编辑上）。有了这样一份先行的设计报告，一方面会让很多思路上的问题可以在方案细化前及时暴露出来并调整，从而节省大量原本需要修改交互稿的时间；另一方面，完备的分析报告可以帮助设计师清晰自己的设计思路，在后续的设计评审中，也更容易让人信服。」

设计分析模板（局部）

在经过一系列需求任务的锻炼后，设计师不断调整完善自己的设计思路与方法，提升设计质量与效率，具备独立承接设计需求的能力：

• 形成设计思维，掌握解决问题的基本思路与方法

• 熟悉产品业务，明确目标用户，掌握工作流程

• 丰富项目经验，具备对问题的判断、解决、决策、推动能力

• 加强方案设计能力，了解相关平台的设计规范，可以兼顾方案的体验感、完整度、可行性与实现成本

达成以上这些，我们才开始成为一名合格的交互设计师。

熟悉基本的设计工作后，设计师便不应该始终处在功能体验优化的工作舒适圈中，而要更系统的关注产品和团队，主动运用自己的专业能力，推动产品项目更快更好的发展，逐渐具备发现问题和机会的洞察力与敏感度。

1、沉淀设计工具，促进团队效率

成熟的设计师作为团队的中坚力量，除了保证自己的设计输出外，还要分出一部分精力用于指导新人设计师。这个过程中，总结方法，形成规范，并生成可视化的工具，是一个十分有效的方式，既能对流程方法进行清晰的描述，有助于交流沟通，促进方法的落实，也让自己和团队可以从琐碎重复的事情中抽离出来，有助于工作效率的提升。

我们设计团队内部，除了之前提到的帮助初级设计师完善设计流程的设计分析模板，还陆续整理产出了其他几款针对帮助提升工作效率的工具：

• 帮助设计师快速绘制交互稿的axure控件库，一则避免设计师重复绘制控件，二则统一不同设计师的控件尺寸，确保工作衔接的顺畅。

• 帮助设计师之间统一输入格式的交互绘制规范，避免一人一风格，对后续阅读者造成困扰。

• 帮助设计组管理设计文档的文件管理规范，确保每一个功能细节都能在对应的模块文件中，设计师可以快速定位查阅，减少查找询问的时间。

• 帮助设计师查漏补缺的交互自查表。

2、主动挖掘产品机会点

过去，设计师的很多需求都会来自于产品，通常是已经处理过的具体的功能需求，如：我们要做一个来信分类的功能；我们要做一个会议邀请的功能。设计师的工作更多是分析需求是否合理以及如何提供合适的功能流程。

但进入新的阶段，设计师更要学会处理原始信息，这些信息主要来自于：产品发展规划、用研结果、数据表现、用户反馈、竞品情况…，它们大多数时候是模糊的，如：如何帮助用户更好的管理邮件？用户反馈邮件查找不便捷，应该怎么优化？需要我们更深入的分析和调研，去抓住理解用户的真实需求。

此外，产品现阶段的目标是什么？未来的发展方向如何？如何拉开与竞品的差距？…这些战略层的问题，设计师也需要纳入自己工作时的思考范围，逐渐对产品与其市场环境具备更全局的认知，并对产品的进一步发展提出自己的见解。

当设计师的经验与能力成熟后，慢慢会成为一个设计团队的Leader，甚至是一个新产品项目的负责人。此时，设计师的工作将不再只聚焦与功能需求的输出，而更需要战略性的思考自己的产品如何创造价值并引导团队去实现价值。

• 用户价值

        设计师需要有能力定义产品的价值观，即明确产品为用户带来的核心价值是什么？产品的目标、定位是什么？进而我们需要为用户提供哪些业务？同时，就此结论与团队成员达成共识，确保之后大家在工作中思考和评判问题的标准是尽量一致的。

• 商业价值

        作为设计师，很多时候会偏向用户的角度来做决策，而作为项目负责人，还需要思考产品如何为公司带来商业上的价值。这需要设计师就需要具备对市场有敏锐的洞察和富有前瞻性的战略眼光，并能从产品、市场、技术、推广等更多维度来考虑产品的发展并统筹资源。

• 团队成员的个人价值

        作为一个设计管理者，此时的设计师在规划产品方向、把控设计质量的同时，还需要考虑团队中每个设计师的能力培养与团队能力的平衡，综合考虑团队成员自身的发展意愿，让其个人价值得到发挥。如此，更有助于整体团队的健康发展。

不同阶段，设计师都各有困惑与挑战。以上，仅是我对交互设计师成长路径的一些整理，部分是对过去经历的总结，部分是个人对未来发展的思考，其中还有很多的地方需要继续在实践中总结。其实简单来说，设计师的成长就在于思维和眼界的不断提升，而不要只着眼于当前手上的工作。如果你目前也有类似的困惑，希望这篇文章对你有所启发。

空状态是APP内必然存在的一个状态，适宜的空状态设计可以提升用户体验，实现用户留存。

鉴于空状态在异常状态下的重要性及容易被忽视的现状，本文以实际设计需求为例，从拿到需求到提出疑问，再到解决疑问，提出解决方案，设计方案呈现，逐一展示空状态设计的正确打开方式。

文章大纲：

• 需求&提出疑问：了解空状态设计需求，了解空状态是什么？旧版本的问题在哪里？如何以及为何要带给用户关爱，背后的产品目标是什么？

• 解决疑问：空状态出现在APP初次使用、完成或清空内容、软件出错等情境下。旧版本的问题在于设计不全面，与5.0品牌认知不符。传递关爱意味着产品是有感情的，而有情感人性化的产品更受欢迎。产品目标是间接提升用户在产品内的留存，进而带来点击转化。

• 解决方案：如何让这个目标具体化？寻找被普遍认知&广泛使用的情感化空状态设计，通过对竞品的解决方案的分析，发现最常用的反思设计表现方式，从侧面寻找什么样的反思设计是受用户喜爱的，得到可以借鉴的信息。

• 设计方案呈现：结合美啦现有资源，完成设计方案。

一、需求&提出疑问

美啦5.0空状态的设计需求，即是对美啦5.0空状态进行优化设计，使之能够缓解用户遭遇空状态的挫败感，给用户关爱。

空状态是什么？旧版本的问题在哪里？如何以及为何要带给用户关爱，背后的产品目标是什么？

二、解决疑问

1. 从4个方面了解空状态

空状态的4个方面

（1）定义

空状态通常在初次使用、完成或清空内容、软件出错等情境下出现的页面状态。

（2）作用

空状态应该达成三个目标：教育用户、取悦用户、引导用户。每个空状态都有其核心需要达成的目标。

（3）出现场景

用户未进行操作、用户操作结果、出错。

（4）常用解决方案

使用系统推荐项、使用操作指引、使用缓存、情感化表达、提供新的任务。

2. 梳理旧版本空状态设计问题

（1）设计不全面

4.0的空状态设计不够全面，场景繁多，空状态里旧的品牌形象亟待更新，甚至部分空状态页面没有任何内容。

这都会使用户在遭遇异常情况时，疑虑的情绪得不到有效疏解，这些问题都需要在这次的空状态设计中解决。

（2）品牌认知不同

美啦5.0设计定位精致、时尚、品质感。而4.0的空状态设计已不能很好的承载全新的品牌认知。因此空状态的设计对于整个App的品牌统一有着重要的补充意义。

（3）空状态冗余

经整理需要优化新增的页面总计20个空状态，由于空状态页面较多，将某些提示功能相近的空状态使用通用的视觉表现形式。

3. 有情感人性化的产品更受欢迎

传递关爱属于情感化设计的第三层——反思设计的核心。关爱意味着产品是有感情的，而有情感、人性化的产品更受欢迎。

相比冰冷的流水线机器人手臂，拥有拟人化外型的「艾娃」更受欢迎。

冰冷的机器人手臂VS人形「艾娃」

4. 产品目标

通过人性化的空状态设计来缓解用户遭遇空状态的挫败感，给用户关爱。间接提升用户在产品内的留存，进而带来点击转化。

空状态设计优化目标

三、解决方案

1. 竞品选择

通过对竞品的解决方案的分析，发现最常用的反思设计表现方式，从侧面寻找什么样的反思设计是受用户喜爱的。

鉴于美啦的美妆及社区电商属性，分别选择了女性时尚类App：小红书、See、HIGO及电商类App：闲鱼、网易严选、淘宝。

竞品选择

2. 竞品空状态分析

（1）竞品空状态内容

小红书、闲鱼、淘宝使用品牌形象作为空状态的主体形象，主体形象使用品牌形象既能实现空状态功能，也能不断的增强品牌在用户心中的形象。网易严选、HIGO、See使用了文字、图形作为空状态的主体形象。

各App的空状态从不同角度体现了各自的品牌认知。

（2）情感关怀

小红书、闲鱼使用了萌萌的小红薯和闲鱼，淘宝使用了小人，网易严选使用了场景相关的物品，See和HIGO使用了文字及图标。拟人的形象更能拉近产品与用户的距离。

3. 结论

通过对竞品空状态的分析，主体形象使用品牌形象带给用户的情感关怀最好，同时品牌认知也比较明显。

四、设计方案呈现

1. 空状态主体形象

从上述分析得出，主体形象使用品牌形象带给用户的情感关怀最好，同时品牌认知也比较明显。

美啦5.0空状态使用了品牌新形象：美啦兔——活泼又爱美兔子和她的小伙伴——负责送妆品的博克斯，一起作为美啦的代表与用户互动。我们希望用户在美啦的体验是顺畅的，但当她遇到空状态时，有美啦兔陪伴她。

美啦兔和她的小伙伴博克斯

2. 脑暴关键词绘制草图

确定主体形象和基本的结构之后，就需要在脑海中构思不同的场景，赋予美啦兔故事情绪。把所想到的场景都用文字记录下来。

比如购物车：趁年轻要剁手，快来填满我，是时候拔草了；比如刷新，正在变美，马上就好了。

盒子里洒出妆品，你的包裹小盒到了。发散到一定程度的时候，可以进行收敛，把部分比较确定的场景用草图表现出来。

草图可以使大家更早看到实现效果，以及更快的做出设计调整。比如404，迷失在星空里，在山谷搜索信号，都可以表现出信号丢失的感觉，但是这样的场景跟美啦美妆、女性社区品牌相距较远。

于是考虑用户更熟悉的城市场景，同时用妆品替代城市的建筑，美啦兔在妆品的城市里，找不到回家的路。

3. 统一色彩规范

美啦5.0的品牌色仍然是美啦粉色，应用于主形象，并贯穿于整个空状态；辅助色黄色，应用于辅助形象等；辅助色绿色、蓝色作为场景元素等。

4. 统一设计元素

• 右侧来光，视角主要为正视。

• 形象全部替换为最新的美啦兔，以美啦兔为主体，产生互动。

• 微质感、浅浅的投影。主体元素有阴影，使之形象更丰富。局部描边塑造结构。

• 收敛出几个容易引起用户共鸣的场景，用详细些的文案故事来描述，同时把成品图和场景故事放出来，404的页面、通用为空、购物车为空、刷新。

5. 场景展示

场景一

通用的「网络异常」场景，美啦兔在妆品的城市里，找不到回家的路了。妆品的城市呼应美啦的品牌特色，形式的表达上选择最具有代表性的口红。美啦兔拿着信号接收器在口红的高处寻找方向。

场景二

美啦兔也跟所有的小仙女一样，想要一直都美美的。但是有时候美丽需要等待，就像刷新一样，遇到网络不那么好的时候，就需要小仙女美美的稍等一会哦。

更多场景(部分)

6. 空状态界面

空状态占页面的面积情况分为2种：

• 全屏空状态：导航+空白内容显示区域。

• 非全屏空状态：导航+部分内容+空白内容显示区域。

全屏空状态的空白区域较大，空状态的视觉表现属于主要内容，可以突出表现。

非全屏空状态有部分正常的内容显示，空白区域较小，空状态的视觉表现属于次要展示的内容，视觉表现需要服从主要的内容。

7. 小结与反思

空状态的设计已经完结，但是美啦APP内情感化运营并没有结束，在闪屏、运营活动、话题帖子、弹窗等的设计还在继续。

全面，并且连续不断的情感化设计像一股暖流，给予用户持续的关爱。