今天和大家聊聊我对「SaaS」和「SaaS 用户体验」价值思考及设计实践总结分享，本文从如下三个方面展开：如何理解 SaaS 和传统软件的差别重新认识 B 端用户体验的价值SaaS 用户体验设计体系实践思考。更多SaaS产品设计干货：想找B端产品分析？盘点30家免费可试用的SaaS产品前几天写过一篇国外可免费试用...

今天和大家聊聊我对「SaaS」和「SaaS 用户体验 」价值思考及设计实践总结分享，本文从如下三个方面展开：

如何理解 SaaS 和传统软件的差别 重新认识 B 端用户体验的价值 SaaS 用户体验设计体系实践思考。 更多 SaaS产品 设计干货：

想找B端产品分析？盘点30家免费可试用的SaaS产品 前几天写过一篇国外可免费试用的 B 端后台，感觉数量不够多。

阅读文章 >

一、SaaS 的本质是什么 SaaS，英文全称 Software as a Service，意思为软件即服务。是通过网络提供软件服务，可以理解为一种软件交付模式，因为交付模式的不同也决定了和传统软件的差别。

在 Saas 之前传统软件需要购买后本地化部署，两者最大的区别在于，卖软件是将软件作为一个软件实体卖给客户了；而卖 SaaS 软件的所有权还在厂商所有，提供的是“软件服务”。

Saas 模式的提出者是 Salesforce 创始人——马克·贝尼奥夫(Marc Benioff) 在98年的时候提出。有两个原因促使马克·贝尼奥夫思考并提出Saas：

传统软件部署实施交付的失败率非常高； 软件的售卖价格非常高，很多中型、中小企业有需求但无法承担高昂的费用。 基于以上两个痛点及当时的现状卖软件给企业造成的影响，已经形成了恶性循环，市场受到严重的阻碍（据 Gartner 高德纳公司（美国咨询公司）的调查研究曾表明：在所有 CRM 项目中大约 55%没有达到软件用户的完整交付和预期目的，通俗的说是实施失败。）

从卖软件变成卖服务，其中的技术方式的改变、交易模式的改变，促成了软件时代的变革，对于传统软件公司来说，是一次大革命。原来卖软件给客户，一次性（或者分几次）收到钱了；改为卖服务后，这笔钱就不能在短周期内一次性收了，现行的 SaaS 模式通常是按照用户的使用年费来收取。

两者差别在于，软件商需要先主动改变可以短期的一次性高收入，从短期收入向长期收入的转变；

所以 SaaS 是长期主义的事情。

失败的 Saas 生意会出现一个问题：把长期生意做成了短期不可持续的生意；而短期生意带来的就是经营成本的剧增，导致生意不可持续。

所以，Saas 模式决定了需要客户长期使用你的产品，才可以长期可持续赚钱，也就是通常意义上的客户终身价值（LTV）。

那如何做到客户长期使用，其实只有一种方式：长期为客户创造价值，做到帮客户成功（帮助客户的业务成功），从而持续续约。

吴昊老师，在《SaaS 创业路线图》中的讲到：SaaS 的本质是续费。这个观点我比较赞同，SaaS 的经营本质在于可持续。

二、从新认识 B 端用户体验 那么，决定 SaaS 的成功因素是什么呢？

我认为决定性因素有三个方面：产品强大且灵活、用户体验优质、服务的有效支持。产品强大和服务的有效支持不言而喻，具体我们来聊聊用户体验的价值。

传统软件在一次交付实施后，客户付 80%的钱，剩下的 20%能不能收回来就不那么重要。但 SaaS 模式，客户每年进行续费，若产品使用及用户体验满意度低，带来的影响和后果可能是客户终止续费。

因此，和传统软件相比 SaaS 的用户体验的价值就更为重要，它直接影响 SaaS 的续费和流失。

相信“用户体验”这个词大家应该非常熟悉，接下来我们重新认识什么是用户体验。

官方的定义是：用户在使用产品过程中建立起来的一种主观感受。“用户体验”这一概念是唐纳德·诺曼（Donald Norman）在 20 世纪 90 年代中期提出的。产品大神俞军老师说过用户体验的本质是“用户最小成本满足需求”。

基于俞军老师的定义、我的理解和思考，我认为是帮助产品和用户：最小成本满足需求，同时创造「美·好」体验。

怎么理解，因为用户体验是满足商业目标的一种行为手段，我们来看下用户体验的需要考虑的双边关系，就比较好理解了。

如下图：左边是用户最小成本满足需求，右边是我们企业最高效的服务用户。

企业的本质就是创造商业价值，商业价值来源于用户价值，同时考虑实现商业价值的效果和效率。我们常常会听到“投入产出比”或者叫“投资回报率”；对于商业行为中的一环用户体验也如此。

所以，用户体验的核心的就是：平衡用户最小成本满足需求，及企业最小成本服务用户。完成价值交换同时，满足持续性。

由此，可以看出在 SaaS 的产品设计中，用户体验其实承担着一个比较重要的责任，因为它关系到成本的边际和规模化的影响，一头是产品一头是用户。

那么作为产品体验设计师，我们需要具备一定成本意识，做好“成本管控的设计”，更本质来说设计过程中我们应该：把复杂留给自己，把简单留给用户。

因为我们在设计的过程中把握产品的交互方式、使用流程，在用户认知和效率层面有较强的把控空间，充分做到的以“用户体验”出发；那后续销售、交付、客户成功的全链路服务过程的学习效率和服务效率会呈指数级上升。

产品设计，应该把复杂留给自己、把简单留给用户。

关于用户体验，就不得不介绍一下“ 用户体验要素”模型，个人认为这是所有产品经理和设计师可以贯穿整个职业生涯中都需要经常性、反复对照思考的设计模型。

用户体验设计的价值远不止于让产品的视觉、颜值提升，设计更大的价值在于深入业务、洞察用户，帮助业务梳理产品信息架构、任务流程、交互体验。

构建系统的用户使用方式和工作模式，从而达成用户目标；通过达成用户目标完成价值交换、以此完成商业交易达成商业目标。

三、 SaaS 如何进行用户体验设计 回顾 Saas 的商业模式，Saas 的商业模式决定我们提供的这个服务不是靠人海战术，因为 Saas 软件即服务的含义是所提供的软件就等于提供自助化的服务，应该提供的是自助服务、开箱即用、开箱易用的服务。

那么 Saas 服务设计策略上，应该从降低系统使用门槛和提升用户的自主化服务两维度出发，根据这两个核心维度，我们构建了每刻 SaaS 产品体验的设计策略模型。

第一，设计“系统服务自动化”，这里的服务是功能使用的操作，符合“低认知、易上手”，那么从设计整个体系 需要遵守“易发现、低认知、高效率、有温度”的设计原则展开，以用户使用行为出发设计符合用户心智认知的功能形态和交互流程。

第二，设计“系统帮助自助化”，什么意思在全系统中构建帮助引导的自助化体系，用户需要帮助的时候提供人性化的引导帮助，我们从发现的维度、认知的维度，系统认知的维度，综合考虑用户系统的帮助引导。

设计原则，是指导我们做正确设计的方针。

设计原则的建立基于对用户使用体验全流程的基础上，以每刻报销的设计原则，围绕用户旅程、认知及行为出发构建。

当用户接触系统从看出发，看见系统界面、发现操作入口；（发现） 带着操作任务用户进入系统、看见导航、看见文字、看见按钮，都需要理解认知；（认知） 用户从何开始、如何操作，在完成整个业务事项的过程需要进行填写、选择、交互过程就产生了生产效率问题；（操作） 当出现误操作或系统出错时，需要系统纠错提醒、容错的设计、帮助及引导，当完成整个业务事项后，用户产生一种的情绪感受，这个感受即是印象、评价、口碑。（感受） 紧紧围绕产品业务、用户处理特性业务的基础上，以终为始，回归到用户、业务、系统进行思考归纳的产物。

设计策略，是指导我们如何进行做正确的设计。

在 SaaS 产品分类上，常见的 SaaS 产品主要分为 3 类，行业 SaaS、职能 SaaS 和通用 SaaS。

每刻报销产品从核心业务来说是职能类 Saas，从提升财务人员报销的发票审批、费用审核等效率展开，但报销的来源又源于普通员工的业务报销，业务报销发生又和所在行业的费用发生行为特征有一定相关性，所以是结合职能和行业 Saas 的属性，从用户体验的设计上需要考虑不同角色用户对于系统的业务理解、功能交织使用的不同诉求，这个设计过程探索研究是相对比较有难度的，以后有机会可以展开聊。

下图是每刻系统经过 6 年过程中统计的问题分布，分布比率呈现：认知问题 60%，效率问题 30%、情感问题 10%。

关于帮助引导

我们在访谈客户调研发现，企业服务虽然客户已经用了好几年我们的系统，但财务部门还是经常性会碰到新入职员工的系统使用问题，甚至财务部门来新人时 以前系统发生的使用问题会从新出现一遍，所以企业服务有一个现象，客户是老客户，但新用户不断增加，新人一旦增加第一个遇到的问题就是认知问题，也辅证了我们对于 Saas 系统认知问题是用户体验的第一大问题。

帮助体系建立可以从系统层面体系化有效降低用户使用的认知成本，围绕用户角色的核心业务操作使用流程、洞察用户旅程上的疑惑和障碍点。用户首次进入系统要建立介绍和引导，足够简单、降低陌生感，来减少人力咨询回复的投入。

相比人，系统的自助化和自动化的服务，更具有复用性和规模效应。

本文小结 SaaS 的商业模式，按年使用账号来收费和传统软件的付费模式区别非常大，因为需要先主动放弃自己本来可以唾手可得的收入，从短期收入向长期收入的转变。在 SaaS 模式的时代，商业模式决定其必须关注客户成功、客户持续续费、LTV 客户长期价值。

SaaS 的产品更需要重视用户体验，用户体验的优劣决定其产品的长期发展，SaaS 的用户体验设计则关注用户使用认知和行为效率，以及系统服务自主化设计和系统帮助自动化设计，用户体验将在产品成长期后半程，逐渐成为 SaaS 商业模式不可或缺的产品竞争力。

以上，对 SaaS 及 SaaS 用户体验设计实践和价值思考，希望这篇文章对同行的你有所帮助和启发。

今天和大家聊聊我对「SaaS」和「SaaS 用户体验」价值思考及设计实践总结分享，本文从如下三个方面展开：如何理解 SaaS 和传统软件的差别重新认识 B 端用户体验的价值SaaS 用户体验设计体系实践思考。更多SaaS产品设计干货：想找B端产品分析？盘点30家免费可试用的SaaS产品前几天写过一篇国外可免费试用...

今天和大家聊聊我对「SaaS」和「SaaS 用户体验 」价值思考及设计实践总结分享，本文从如下三个方面展开：

如何理解 SaaS 和传统软件的差别 重新认识 B 端用户体验的价值 SaaS 用户体验设计体系实践思考。 更多 SaaS产品 设计干货：

想找B端产品分析？盘点30家免费可试用的SaaS产品 前几天写过一篇国外可免费试用的 B 端后台，感觉数量不够多。

阅读文章 >

一、SaaS 的本质是什么 SaaS，英文全称 Software as a Service，意思为软件即服务。是通过网络提供软件服务，可以理解为一种软件交付模式，因为交付模式的不同也决定了和传统软件的差别。

在 Saas 之前传统软件需要购买后本地化部署，两者最大的区别在于，卖软件是将软件作为一个软件实体卖给客户了；而卖 SaaS 软件的所有权还在厂商所有，提供的是“软件服务”。

Saas 模式的提出者是 Salesforce 创始人——马克·贝尼奥夫(Marc Benioff) 在98年的时候提出。有两个原因促使马克·贝尼奥夫思考并提出Saas：

传统软件部署实施交付的失败率非常高； 软件的售卖价格非常高，很多中型、中小企业有需求但无法承担高昂的费用。 基于以上两个痛点及当时的现状卖软件给企业造成的影响，已经形成了恶性循环，市场受到严重的阻碍（据 Gartner 高德纳公司（美国咨询公司）的调查研究曾表明：在所有 CRM 项目中大约 55%没有达到软件用户的完整交付和预期目的，通俗的说是实施失败。）

从卖软件变成卖服务，其中的技术方式的改变、交易模式的改变，促成了软件时代的变革，对于传统软件公司来说，是一次大革命。原来卖软件给客户，一次性（或者分几次）收到钱了；改为卖服务后，这笔钱就不能在短周期内一次性收了，现行的 SaaS 模式通常是按照用户的使用年费来收取。

两者差别在于，软件商需要先主动改变可以短期的一次性高收入，从短期收入向长期收入的转变；

所以 SaaS 是长期主义的事情。

失败的 Saas 生意会出现一个问题：把长期生意做成了短期不可持续的生意；而短期生意带来的就是经营成本的剧增，导致生意不可持续。

所以，Saas 模式决定了需要客户长期使用你的产品，才可以长期可持续赚钱，也就是通常意义上的客户终身价值（LTV）。

那如何做到客户长期使用，其实只有一种方式：长期为客户创造价值，做到帮客户成功（帮助客户的业务成功），从而持续续约。

吴昊老师，在《SaaS 创业路线图》中的讲到：SaaS 的本质是续费。这个观点我比较赞同，SaaS 的经营本质在于可持续。

二、从新认识 B 端用户体验 那么，决定 SaaS 的成功因素是什么呢？

我认为决定性因素有三个方面：产品强大且灵活、用户体验优质、服务的有效支持。产品强大和服务的有效支持不言而喻，具体我们来聊聊用户体验的价值。

传统软件在一次交付实施后，客户付 80%的钱，剩下的 20%能不能收回来就不那么重要。但 SaaS 模式，客户每年进行续费，若产品使用及用户体验满意度低，带来的影响和后果可能是客户终止续费。

因此，和传统软件相比 SaaS 的用户体验的价值就更为重要，它直接影响 SaaS 的续费和流失。

相信“用户体验”这个词大家应该非常熟悉，接下来我们重新认识什么是用户体验。

官方的定义是：用户在使用产品过程中建立起来的一种主观感受。“用户体验”这一概念是唐纳德·诺曼（Donald Norman）在 20 世纪 90 年代中期提出的。产品大神俞军老师说过用户体验的本质是“用户最小成本满足需求”。

基于俞军老师的定义、我的理解和思考，我认为是帮助产品和用户：最小成本满足需求，同时创造「美·好」体验。

怎么理解，因为用户体验是满足商业目标的一种行为手段，我们来看下用户体验的需要考虑的双边关系，就比较好理解了。

如下图：左边是用户最小成本满足需求，右边是我们企业最高效的服务用户。

企业的本质就是创造商业价值，商业价值来源于用户价值，同时考虑实现商业价值的效果和效率。我们常常会听到“投入产出比”或者叫“投资回报率”；对于商业行为中的一环用户体验也如此。

所以，用户体验的核心的就是：平衡用户最小成本满足需求，及企业最小成本服务用户。完成价值交换同时，满足持续性。

由此，可以看出在 SaaS 的产品设计中，用户体验其实承担着一个比较重要的责任，因为它关系到成本的边际和规模化的影响，一头是产品一头是用户。

那么作为产品体验设计师，我们需要具备一定成本意识，做好“成本管控的设计”，更本质来说设计过程中我们应该：把复杂留给自己，把简单留给用户。

因为我们在设计的过程中把握产品的交互方式、使用流程，在用户认知和效率层面有较强的把控空间，充分做到的以“用户体验”出发；那后续销售、交付、客户成功的全链路服务过程的学习效率和服务效率会呈指数级上升。

产品设计，应该把复杂留给自己、把简单留给用户。

关于用户体验，就不得不介绍一下“ 用户体验要素”模型，个人认为这是所有产品经理和设计师可以贯穿整个职业生涯中都需要经常性、反复对照思考的设计模型。

用户体验设计的价值远不止于让产品的视觉、颜值提升，设计更大的价值在于深入业务、洞察用户，帮助业务梳理产品信息架构、任务流程、交互体验。

构建系统的用户使用方式和工作模式，从而达成用户目标；通过达成用户目标完成价值交换、以此完成商业交易达成商业目标。

三、 SaaS 如何进行用户体验设计 回顾 Saas 的商业模式，Saas 的商业模式决定我们提供的这个服务不是靠人海战术，因为 Saas 软件即服务的含义是所提供的软件就等于提供自助化的服务，应该提供的是自助服务、开箱即用、开箱易用的服务。

那么 Saas 服务设计策略上，应该从降低系统使用门槛和提升用户的自主化服务两维度出发，根据这两个核心维度，我们构建了每刻 SaaS 产品体验的设计策略模型。

第一，设计“系统服务自动化”，这里的服务是功能使用的操作，符合“低认知、易上手”，那么从设计整个体系 需要遵守“易发现、低认知、高效率、有温度”的设计原则展开，以用户使用行为出发设计符合用户心智认知的功能形态和交互流程。

第二，设计“系统帮助自助化”，什么意思在全系统中构建帮助引导的自助化体系，用户需要帮助的时候提供人性化的引导帮助，我们从发现的维度、认知的维度，系统认知的维度，综合考虑用户系统的帮助引导。

设计原则，是指导我们做正确设计的方针。

设计原则的建立基于对用户使用体验全流程的基础上，以每刻报销的设计原则，围绕用户旅程、认知及行为出发构建。

当用户接触系统从看出发，看见系统界面、发现操作入口；（发现） 带着操作任务用户进入系统、看见导航、看见文字、看见按钮，都需要理解认知；（认知） 用户从何开始、如何操作，在完成整个业务事项的过程需要进行填写、选择、交互过程就产生了生产效率问题；（操作） 当出现误操作或系统出错时，需要系统纠错提醒、容错的设计、帮助及引导，当完成整个业务事项后，用户产生一种的情绪感受，这个感受即是印象、评价、口碑。（感受） 紧紧围绕产品业务、用户处理特性业务的基础上，以终为始，回归到用户、业务、系统进行思考归纳的产物。

设计策略，是指导我们如何进行做正确的设计。

在 SaaS 产品分类上，常见的 SaaS 产品主要分为 3 类，行业 SaaS、职能 SaaS 和通用 SaaS。

每刻报销产品从核心业务来说是职能类 Saas，从提升财务人员报销的发票审批、费用审核等效率展开，但报销的来源又源于普通员工的业务报销，业务报销发生又和所在行业的费用发生行为特征有一定相关性，所以是结合职能和行业 Saas 的属性，从用户体验的设计上需要考虑不同角色用户对于系统的业务理解、功能交织使用的不同诉求，这个设计过程探索研究是相对比较有难度的，以后有机会可以展开聊。

下图是每刻系统经过 6 年过程中统计的问题分布，分布比率呈现：认知问题 60%，效率问题 30%、情感问题 10%。

关于帮助引导

我们在访谈客户调研发现，企业服务虽然客户已经用了好几年我们的系统，但财务部门还是经常性会碰到新入职员工的系统使用问题，甚至财务部门来新人时 以前系统发生的使用问题会从新出现一遍，所以企业服务有一个现象，客户是老客户，但新用户不断增加，新人一旦增加第一个遇到的问题就是认知问题，也辅证了我们对于 Saas 系统认知问题是用户体验的第一大问题。

帮助体系建立可以从系统层面体系化有效降低用户使用的认知成本，围绕用户角色的核心业务操作使用流程、洞察用户旅程上的疑惑和障碍点。用户首次进入系统要建立介绍和引导，足够简单、降低陌生感，来减少人力咨询回复的投入。

相比人，系统的自助化和自动化的服务，更具有复用性和规模效应。

本文小结 SaaS 的商业模式，按年使用账号来收费和传统软件的付费模式区别非常大，因为需要先主动放弃自己本来可以唾手可得的收入，从短期收入向长期收入的转变。在 SaaS 模式的时代，商业模式决定其必须关注客户成功、客户持续续费、LTV 客户长期价值。

SaaS 的产品更需要重视用户体验，用户体验的优劣决定其产品的长期发展，SaaS 的用户体验设计则关注用户使用认知和行为效率，以及系统服务自主化设计和系统帮助自动化设计，用户体验将在产品成长期后半程，逐渐成为 SaaS 商业模式不可或缺的产品竞争力。

以上，对 SaaS 及 SaaS 用户体验设计实践和价值思考，希望这篇文章对同行的你有所帮助和启发。

导读随着全球化贸易的进一步加深，不少互联网产品为了引入更大体量的用户体验并使用产品而开启了“出海之旅”。直接降低用户购买门槛的多币种支付，变成了产品必需品。如果说语言翻译是产品国际化的第一步，那么多币种支付能力的搭建就是紧随其后的第二步。

导读

随着全球化贸易的进一步加深，不少互联网产品为了引入更大体量的用户体验并使用产品而开启了“出海之旅”。直接降低用户购买门槛的多币种支付，变成了产品必需品。如果说语言翻译是产品国际化的第一步，那么多币种支付能力的搭建就是紧随其后的第二步。

更多出海产品设计方法：

产品出海如何做好本土化设计？来看京东高手的实战总结！ 互联网企业“出海”浪潮背景下，作为设计师，面对新鲜未知的市场，如何找到适合海外产品的设计方向？

阅读文章 >

为什么要“多币种支付”？

由于用户对非自己国家/地区货币价值概念欠缺，在支付场景需要自行汇率计算、衡量价值等一系列时间/学习成本，支付转化率较低。为了提升用户的支付体验，提高支付人数和支付转化率，产品需要将价格做的更加显性——所见即所付。

以 Amazon、AliExpress 为例，都为用户提供了多币种支付方案，支持用户使用本币付款。本文将重点对多币种支付方案设计及注意点进行说明。

Amazon 中多币种方案

AliExpress 中多币种方案

一、币种展示 1. ISO 代码 + 货币名称

每一种货币都统一由三位英文字母代表，而这一套三位英文字母，就是国际标准 ISO 4217。但是进行币种切换选择时，只看到 ISO 代码，部分用户也会定位难度。这种情况下，货币的名称就成为了辅助信息，帮助用户定位货币种类；用美元作为例子，如下图：

2. 货币符号+ISO 代码+货币名称

在币种展示中增加货币符号，可以提高用户币种寻找效率。不仅因为日常生活中用户接触更多的是货币符号，而且符号类视觉元素相比文案或者 ISO 代码更易用户阅读与聚焦。

需要注意的是，货币符号是存在多国/多地区通用的情况。单独的一个货币符号，并不能直观的表达一种货币。例如美元符号"$"，加拿大元、新加坡元、澳元符号相同，使用时可用 ISO 代码在货币符号前做以区分；如下图：

注意：通常在网站中，为了视觉效果等原因 设计师 会考虑国旗与币种共同使用。这个设计决策是非常危险的，首先同一国家不同地区也会存在使用不同货币的可能，另外国旗会有触碰敏感话题的风险。

二、币种界面和功能 1. 价格展示较长

当价格展示空间有限，可以考虑缩小货币符号和小数点后金额缩小的方式为整数金额争取更多位置。如图：

同时，金额较大时，别忘记为千位分隔符留下足够字符空间；

2. 考虑货币符号

如上文币种展示中提到的，币种符号存在多币种同用情况，例如符号“¥”，人民币和日元都在使用；符号“$”美元、加拿大元、澳元等共同使用；创建币种符号对照表可解决这一问题，同时方便设计师或研发定期更新维护；

币种符号$对照表

3. 千位分隔符

因为英文中没有“万”、“亿”，与之替代的只有“千（Thousand）”、“百万（Million）”和“十亿（Billion）”的概念，所以西方习惯在较长数字中每隔三位增加一个逗号，以方便在数字位数较多的情况下也能快速看出它的值。这种情况多使用在日元、韩元等货币位数较多的价格展示中，为用户简化金额阅读。如下图：

三、币种本地化 1. ISO 代码定期更新

ISO 4217 货币代码亦可改动，例如当一个国家发行新货币，进行货币改革，更换货币单位之时。俄罗斯的卢布就曾由代码 RUR，改成 RUB。

所以不要忘记定期关注 ISO 代码相关消息，发现调整，实时更新；

2. 币种默认初始逻辑

默认记住上一次用户的币种选择可以让用户免去重复的币种切换工作，直接享受畅通购买的体验。

使用 IP 定位确定新用户所在地区，并为用户切换至对应地区使用币种也是个不错的选择，但是对于正在出差的用户来说有些多此一举；

使用浏览器默认语言并为用户定位对应币种容错率相对更高些。

另外，用户登录与未登录两种场景也可以结合考虑添加默认币种逻辑；

3. 考虑提供参考价格

世界上大约有 170 种货币，产品不可能为每一种货币提供支付渠道。那部分不可支付币种，我们可以通过当天汇率，在前端页面展示参考价格，方便用户衡量价值。

例如，Amazon 中切换肯尼亚先令等，可以看到如下备注信息，提示用户页面价格只作为参考，用肯尼亚先令支付可能不成功。

四、切换币种功能 用户的购买支付流程根据不同用户习惯会有所区别，主要可分为两类：

① 先看价格范围再看商品详情

② 先看商品详情再查看价格

第一类用户在平台上首先会将币种进行本地切换。那么全局币种切换器成为这类用户的必需品。而第二类用户在意商品细节多过于价格或是默认币种与本地货币换算较为常见，所以通常到了最后一步支付时，用户切换到本地货币进行最终的价格确认。这种情况，支付时的币种切换器更有意义。

1. 全局的货币选择器

很多大型电商平台中，默认用户地区会使用网页 IP 定位，而地区确定后又可以推测用户使用货币，所以设计师会将币种设置与导航栏的语言/地区/国家设置进行入口合并。

这样做可以让用户在有相关设置需求时，较快的定位入口，同时也考虑设置内容的联动性，辅助用户批量设置。

当你的网站导航栏不固定时，在方案对比页面增加货币选择器是个不错的选择。用户查看方案详情或对比方案信息时，产生货币切换需求概率较高。在方案页面的币种选择器可以更快的满足用户需求，从而促进用户支付。

2. 支付链路中的货币选择器

在一些复杂的支付链路中，我们会使用弹窗让用户完成购买信息的细节选择。例如选择套餐的付款方式（优惠券/活动码）、套餐的付款周期（月/季度/年）等情况，而这也是用户最后切换支付币种的机会。

不要忘记贴心的为用户保留币种切换功能，帮助用户顺滑的完成支付链路。

结语 在“多币种”支付设计过程中，设计师需要选择合适的币种展示方式和币种时机（币种选择器位置），并结合支付场景、支付链路、开放币种范围等因素综合思考，才能保证国际化用户良好的支付体验和感知。“多币种”支付不仅可以传递产品国际化信息，也可以给业务带来营收价值。

国际化支付场景虽然常见，但是设计细节关注度较低，很多设计师无论是否拥有 国际化设计 经验都习惯凭主观直觉设计。因此，我们对国际化“多币种” 支付设计 抽丝剥茧，总结出比较系统化的设计方法。希望这篇文章可以帮助到更多刚接触国际化业务的设计师。

前言当我们提及“动效设计”这一词，第一印象往往是那一类炫酷的极具视觉表现力的动效，而有一类动效，它们如春风细雨般融入了用户交互过程的点滴之中，为打造符合用户心智的流畅体验默默做着贡献，它们就是「交互动效」。本文将从以下三个方面展开介绍——「什么是交互动效」「为什么要重视交互动效」「交互动效的设计流程和方法」，带领...

前言

当我们提及“动效设计”这一词，第一印象往往是那一类炫酷的极具视觉表现力的动效，而有一类动效，它们如春风细雨般融入了用户交互过程的点滴之中，为打造符合用户心智的流畅体验默默做着贡献，它们就是「交互动效」。

本文将从以下三个方面展开介绍——「什么是交互动效」「为什么要重视交互动效」「交互动效的设计流程和方法」，带领大家了解交互动效的基础概念，以及具体的设计流程方法，希望大家看完后能够对 交互动效 有更加清晰的认知。

更多 动效设计 干货：

新手科普！交互动效基础知识入门 什么是交互动效 界面交互动效： 用户与界面进行交流互动时以动效的形式进行信息传达。

阅读文章 >

一、什么是交互动效？ 交互动效指的是那些用于引导和响应用户交互行为的动效，它们与用户的交互行为密切相关，起到帮助用户理解、提供操作反馈、提升感知流畅性的作用。

与视觉动效不同的地方在于，交互动效主要作用于产品的基础体验和功能体验层面，为用户营造更加自然流畅的体验。而视觉动效除了在功能体验层面能帮助用户降低理解成本之外，更多作用于情感体验，增加产品趣味性、传递产品调性，目的是引起用户的情感共鸣，调动用户的正面情绪。

交互动效&视觉动效示例

交互动效与视觉动效的影响范围差异

二、为什么要重视交互动效？ 在实际的项目中， 交互设计 师往往会先处理任务流程和页面信息设计。在设计工作量大、时间紧张的时候，很可能遗漏掉需要增加交互动效的细节，到点检验收的时候才发现这些问题，这种情况在新人设计师中较为常见。

在验收阶段，由于项目排期时间紧，开发有别的 bug 要改，可能没有时间去处理动效方面的优化，从而导致了线上出现体验问题。

验收阶段才发现动效问题的尴尬

必要的场景缺失动效直接上线，可能会产生以下的体验问题：

不符合预期，产生理解困难：交互动效用于传达页面变化过程，如果过程缺失，可能会导致变化不符合用户预期，使得用户产生理解困难。 感知卡顿：缺失必要的手势动效会导致用户操作的不流畅，缺失必要的转场动效则会影响视觉观感的流畅性。

动效缺失产生体验问题例子

总的来说，不注重交互动效将会给产品体验埋下各种体验问题隐患，加上进入互联网下半场后，互联网产品将会更加注重设计上的精致精细度。由此来看，掌握系统化的动效设计方法，已然成为设计师们的必修课。

三、交互动效的设计流程和方法 1. 动效评估

在设计之前，我们需要先判断是否真的需要做动效？不能为了做动效而去做动效。

① 场景聚焦

首先，我们需要知道，什么样的场景适合做交互动效？可以总结为以下三类场景：

三种适合做交互动效的场景

「场的变化」指的是用户需要从产品中的一个「场」到另一个「场」，发生在页面间的转场、或页面内的转场。

「场的变化」相关例子

「内容的新增或减少」指的是由于用户的交互行为，导致页面中的内容（模块、组件、元素等）产生新增或减少。

「内容新增/减少」相关例子

「元素的属性变化」指的是由于用户的交互行为，导致页面中的元素属性产生变化，例如位置改变、状态变化、值变化等。

「元素属性变化」相关例子

② 优先级评估

筛选出适合添加交互动效的场景后，我们需要评估在这个场景中做动效的优先级。判断做动效的必要性，可以从以下四个维度从高到低的维度去进行优先级评估：

「一致性」——如果某个场景已经有定义好的动效规范，原则上需要遵循规范进行适配，以确保全局动效体验的一致性。这一个维度对于那些存在动效语言的产品是非常重要的，一致性是为整体产品调性和品牌所服务。例如iOS在全局都保持了高度统一的动效体验，如果某一个组件缺失了用户习以为常的动效，很容易被用户感知到且产生对品牌的负面评价。

「帮助用户理解」——不加动效是否会影响用户对当前页面变化的理解？如果因为缺失动效，在元素关系、页面层级、状态变化上造成用户较大的困惑，影响了用户体验，那么在该场景下添加动效的必要性是较大的。

「提升流畅度」——不加动效是否会影响视觉层面和操作层面的流畅度？即视觉上是否会产生闪跳、突变等卡顿感，操作上是否实时反馈、符合用户预期。

「引导注意力」——页面中的元素是否需要通过动效来引导用户的注意力？会不会对用户造成不必要的打扰？有时候产品会出于业务诉求希望通过动效的手段来引导用户注意力，达到业务的目标，但是我们需要站在用户的角度去思考用户的注意力是否应该被引导，不让动效成为对用户的干扰。

动效优先级评估

2. 动效设计

① 动效原则

设计原则用于指导我们设计动效的方向，确保不偏离正确的方向。结合行业内的各类动效规范的设计原则，我们总结出以下六个通用性较高的设计原则：

 舒适：动效需要符合现实世界的物理属性，贴近用户的心智认知，感知上舒适、同时兼具视觉美感。 高效：高效响应并减少过长的位移和时间，使动效触达不拖沓。 流畅：不卡、不闪、不跳，帧率稳定、响应及时、跟手操作是动效流畅体验的基础要求 统一：同个产品内的动效体验感知统一，体现在相同的控件动效保持一致、相似的动效编排一致。 简单清晰：界面元素运动尽可能少且简洁，减少路径及不必要的元素，确保动效过程清晰、重点突出。 克制有度：控制出现频率，不增加额外操作，不干扰用户，确保动效有意义。

交互动效设计原则

② 动效属性

变化

一个完整的动效是由不同元素的不同变化组成的，常见的变化类型有：位移、透明度、大小、旋转、3D 旋转...

动效常用变化类型

时长

小于 200ms 的动效不易被感知，多于 1000ms（1s）则让用户感到缓慢，交互动效时长一般在 200ms-500ms 之间，我们在设计时长时，可以从以下几个因素进行考虑：

i）复杂程度：复杂的动画比简单的动画需要更多的时间来表达

动效复杂程度对时长的影响

ii）区域范围：动效运动在一定的范围内进行，小范围内比大范围的运动所用的时间相对更短

动效区域范围对时长的影响

iii）入场/退场：一般来说，退场的动效时长要比入场短，让用户更把注意力放在后续的内容中

动效入场/退场对时长的影响

曲线

曲线与时长相互配合产⽣运动的韵律感。调整曲线能使物体实现加速和减速，⽽不是以恒定的速率运动。在自然定律下，物体不会突然开始或停止移动，它们需要一定的时间来加速和减速。以下是三种常用的曲线类型：

i） 加速曲线：适用原本在视线中的物体，需要消失或退场，逐渐加速符合退场行为特征，例如弹窗/浮层退出、卡片删除等。

加速曲线示意

ii） 减速曲线：适用原本在视线外的物体，需要出现或进场，逐渐减速符合进场行为特征，例如弹窗/浮层出现、页面进入等。

减速曲线示意

iii） 缓入缓出曲线：先加速后减速，适用于运动前后始终在用户视线范围内的物体，符合物体启动和停止的真实规律，例如图片缩放、tab 切换、开关等。

缓入缓出曲线示意

③ 动效编排

动效属性是针对单个元素进行设置的，那么如何对多个元素进行动效组合和编排？下面提供一些动效编排的技巧：

 淡入淡出

淡入淡出是通过透明度变化来实现过渡转场，也是最简洁实用、最常见的一种类型。其分为「单向淡入淡出」、「交叉淡入淡出」和「错开淡入淡出」

i） 单向淡入淡出：在前后层叠的场景中，只有前景元素进行淡入或淡出动作，下方元素无变化。

单向淡入淡出示意

ii） 交叉淡入淡出：存在退场元素与进场元素的场景下，一个淡入视野，另一个淡出。在整个过程中，会存在两个元素和它们后面的内容同时可见的时候。

交叉淡入淡出示意

如果退场元素和入场元素在视觉样式或者布局结构上差异较大，交叉淡入淡出可能会带来视觉上的混乱，这时候可适当错开出场元素淡出和进场元素淡入的时机。

可通过错开元素进出场时机避免带来视觉混乱

iii） 错开淡入淡出：在入场元素淡入之前，将退场元素完全淡出。这种方式可以规避视觉上出现重叠元素，但是可能会造成有一瞬间出现容器内容为空的情况。

错开淡入淡出示意

 一镜到底

一镜到底是通过共享元素、容器和动势来进行转场过渡的一种编排方式，有助于提升用户操作任务的效率，增强视觉的流畅感，是转场设计中重点推荐的编排方法。

i） 共享元素

共享元素是转场前后持续存在的界面元素，是在转场发生后希望用户关注到的焦点元素，它增强了转场的连续感。

共享元素转场示意

ii） 共享容器

当一组元素在过渡时包含明确的边界，可使用容器来让转换过程有连续感。容器通过大小、高度、圆角等属性进行补间过渡转换，容器内的元素可通过淡入淡出或共享元素的手法进行过渡。

共享容器转场示意

在使用共享容器转场时，有以下原则需要注意：

原则 1——尽量减少独立移动的元素数量。多个元素运动会争夺并分散注意力，我们可以通过淡入淡出减少元素移动，让注意力更聚焦。

原则 1：避免过多独立移动的元素

原则 2—— 避免焦点元素在运动过程中和其他元素重叠。焦点元素和其他元素运动轨迹重叠会产生杂乱无章的过渡，同样地，可以用淡入淡出来简化运动。

原则 2：避免焦点元素运动轨迹和其它元素重叠

iii） 共享动势

无法通过补间变化来实现柔和过渡，可以提取出可用的共享转换属性，来实现前后的平滑过渡。常用的共享运动属性有位移、缩放、旋转等。

共享动势效果示意

其它编排技巧

i） 运动路径

如果转场中的元素沿对角线移动，线形运动路径具有简单而实用的风格，而弧形运动路径则创造了更加强调和戏剧性的风格。

线形和弧形运动路径差异对比

ii） 振荡

一般情况下，转场动效在到达终点时会结束。当添加振荡时，过渡路径至少超过其端点一次，然后反向返回端点。振荡可以用来表达一种更加俏皮和充满活力的过渡风格。

有无振荡差异对比

iii） 纵深变化

一般情况下，背景内容在容器变换过渡期间保持静态。可以通过动画背景内容的比例来强调纵深变化。这种通过强调前景和背景内容之间的距离，使过渡看起来更加生动。

有无纵深变化差异对比

iv ）交错

一般情况下，入场元素会打包为一个组进行处理。「交错」是指通过对组中的元素应用短延迟，创建一种级联效果，将注意力非常短暂地集中在组中的每个元素或个别元素上。

通过交错将注意力短暂地集中在每一项上

交错还有可以用于强调页面元素，将需要强调的页面核心操作或元素在其他元素入场完毕后完成入场，能够吸引用户注意力，完成视觉引导。

通过交错突出核心元素

③ 动效落地

尽管我们把动效设计得再精美，最终还是要靠开发大哥们把它还原出来。交互动效需要开发通过代码来实现，因此动效标注如何让开发看得懂且能理解，就尤为重要。

这里推荐大家使用参数化的表格来进行标注，转场动效的标注文档中需要包括以下要素：

动效 demo 附件：方便开发直接查看整体的动效效果 触发条件：说明动效发生的条件，即用户通过什么行为触发该动效 元素示意：将动效中发生变化的元素进行拆解，通过图示清晰示意 变化属性：元素的什么属性发生，例如透明度、位置、大小等等 动效时间：「延迟开始时间」表示元素从触发条件发生后延迟多长时间开始执行，「持续时长」表示该变化持续发生多长时间 变化值&贝塞尔曲线：描述属性具体的变化值范围，以及相应使用的贝塞尔曲线参数

转场动效标注文档示意

手势动效的标注和转场动效略有不同，因为手势动效是跟手的效果，不像转场动效是在固定的时长内完成，因此不需要描述时长相关的参数和动效曲线，取而代之的是需要描述清楚页面元素跟手的联动关系。

手势动效标注文档示意

在动效验收的时候，如果发现有还原问题，那么可以将没有按照设计标注来做的地方在表格中圈出来，帮助开发快速定位问题，提高沟通效率。

在验收环节运用标注文档定位问题

结语 交互动效作为提升产品精致精细度的必不可少的要素之一，也是作为设计师不可或缺的技能，本文给大家讲解了从动效评估-动效设计-动效落地的全流程方法，希望能对大家了解交互动效、上手交互动效设计有一定的帮助。当我们希望给用户带来不一样的惊喜和极致体验时，不妨试一试从交互动效入手。

参考资料及部分示例图来源：

material.io/design/motion developer.harmonyos.com 欢迎关注作者微信公众号：「VMIC UED」

大家好，这里是和你们聊设计的花生~这两天有关人工智能聊天机器人 ChatGPT 的新闻频频冲上微博热搜，并引起广大网友的热切关注和讨论。2月7日的微博热搜榜，前10名中ChatGPT占据了两席如果说 2022 年是AI技术在文本生成图像领域的爆发之年，那么2023年这股冲击波已经延伸到文本语言的生成处理上了，而且...

大家好，这里是和你们聊设计的花生~

这两天有关人工智能聊天机器人 ChatGPT 的新闻频频冲上微博热搜，并引起广大网友的热切关注和讨论。

2月7日的微博热搜榜，前10名中ChatGPT占据了两席

如果说 2022 年是AI技术在文本生成图像领域的爆发之年，那么2023年这股冲击波已经延伸到文本语言的生成处理上了，而且相关技术已经开始深入到应用层面，无论是搜索引擎、程序编码还是文案写作、语言翻译，都能看到新的AI工具的出现，今天就和大家一起来看看最近值得关注的新工具~

了解 ChatGPT的详情：

地表最强AI聊天机器人ChatGPT诞生！会给设计师带来哪些影响？ 大家好，这里是和你们聊设计的花生~ 前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型，感叹它图像生成质量之高。

阅读文章 >

1）风头正盛的ChatGPT ChatGPT 发布之今不过 2 个多月，月活用户就突破了1亿，成为历史上增长最快的消费者应用程序，OpenAI 也凭借 ChatGPT 成功获得微软100亿美元投资。

ChatGPT 的出现给很多行业带来了实质性影响，首当其冲的就是学校教育。据调查，美国有 89% 的学生都在使用 ChatGPT 来完成老师布置的作业，也有老师利用 ChatGPT 制作教学大纲。

因为担心 ChatGPT 影响学生建立自己的批判性思维和问题解决能力，而且 ChatGPT 生成的内容在安全性和准确性上也没有保证，纽约市颁布了针对 ChatGPT 的禁令，规定无论是老师和还是学生，都不能通过公立学校的网络和设备使用 ChatGPT。虽然如此，但大家也可以在家里使用 ChatGPT，所以这个禁令的实际效果如何还不好说。

推特网友的分享：一位老兄用ChatGPT写作业被抓到了，成绩判为0。图片来源： (19) Chris Bakke on Twitter

ChatGPT 自推出后就有观点认为它会颠覆谷歌的地位，而谷歌也采取了一系列积极的措施来应对可能出现的危机。就在昨天，谷歌母公司 Alphabet 宣布将推出名为“Bard”的 AI 聊天机器人服务以及更多的人工智能项目。据体验过 Bard 的微博网友介绍，它的使用体验甚至好过 ChatGPT。

图片来源： https://weibo.com

谷歌官方公布的Bard 用户界面，图片来源： https://blog.google

由于与OpenAI 有密切的合作伙伴关系，微软则计划将 ChatGPT-4 集成到新版的 Bing 搜索引擎中，让用户可以直接获取简要的查询答案，并以与聊天机器人的对话的方式进行深入的信息检索。新版 Bing 在前几日 曾短暂上线，推特上已经有用户分享使用体验。

推特用户 @Owen_Yin 分享的新版bing界面

2）AI 搜索引擎 Perplexity Ask 网站直达： www.perplexity.ai （需搭梯子）

Perplexity Ask(意为“有困惑就问”)是一款与ChatGPT相似的AI搜索引擎工具，都是通过对话的方式直接获取整理好的答案，可以理解上下文的意思与用户进行持续交流。

针对提出的问题，Perplexity Ask 会给出一个简要的概述答案，并标明所给答案的信息来源。这在一定程度上解决了使用 ChatGPT 时会出现的“胡编乱造“的问题，保证了答案的可信度。就这一点来说，Perplexity Ask 是比 ChatGPT 更加可靠的信息搜索工具，可以极大简化我们写作时检索信息的流程，提升写作效率。

用中文在Perplexity Ask 提问后获取的答案（居然看到了自己的文章哈哈哈）

人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器 大家好，我是和你们聊设计的花生~ 有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。

阅读文章 >

Perplexity Ask 还有一个 Twitter SQL 功能，可以精准搜索你想要的推文。比如输入“上周点赞最多的 10 条 ChatGPT推文”，就能快速获取对应的内容。如果你不常用推特但是由想快速获取上面的有信息，Perplexity Ask让你的获取效率暴增。

与ChatGPT相比，Perplexity Ask没有繁琐的注册流程，搭上梯子后打开即用，并且是实时联网的，可以根据最新的咨询消息提供答案。它支持中英双语搜索，二者区别在于使用中文提问会主要从中文网站上获取信息，使用英文则会从外网上获取信息。

3）腾讯智能创作助手Effidit ChatGPT 的迅速发展也引起了国内对相关技术的关注，百度宣布将在今年3月份推出与ChatGPT类似的人工智能聊天机器人服务文心一言，英文名ERNIE Bot，目前项目已经在做上线前的冲刺。腾讯则是在2020年就推出了智能创作助手 Effidit，探索用 AI 技术提升写作者的写作效率和创作体验。

Effidit网站直达： https://effidit.qq.com/ （在线体验推荐使用 Chrome 或 Microsoft Edge 浏览器）

Effidit（Efficient and Intelligent Editing） 是由腾讯 AI Lab 研发的智能创作助手，有通用版和学术版两个版本，支持中英文双语写作，可以提供智能纠错、文本补全、文本改写、文本扩写、词语推荐、句子推荐与生成等功能。

Effidit 的操作界面，左边是文本输入框，右边是编辑功能。可以看到我们在输入文本的时候Effidit会根据内容自动补充语句。

纠错这种基础功能就不多谈了，个人感觉Effidit 比较实用的功能一是“文本润色”，二是“超级网典”。“文本润色”包括短语润色和句子润色，短语润色可以智能推荐或生成更为准确高级的词汇，对非专业写作人员来说非常友好；句子润色则包括句子改写和句子扩写，能使语句表达形式更多样。

“超级网典”则可以为指定的文本内容提供参考素材，比如我在写有关“二十四节气”的文章时，在“超级网典”内输入“二十四节气”，就会得到关于二十四节气的文章推荐、英文翻译，甚至有英文文献参考，这在一定程度上简化了我们的资料检索流程。

4) 专业AI英文写作工具 Deepl Write 之前在“设计师效率工具”第三期向大家推荐了一款超好用的长文本翻译软件 Deepl，它翻译出的内容逻辑通畅，语句衔接自然，效果堪比人工翻译，被认为是世界上最准确的翻译工具。

Deepl翻译： https://www.deepl.com/translator  （搭梯子浏览速更快）

这 5 款工具，让设计师工作效率提升 200%！（三） 大家好，我是和你们聊设计的花生~ 上一期为大家分享的神器都用起来的了吗？

阅读文章 >

今年 1 月份 Deepl 又推出了新的AI协助写作工具 DeepL Write，目前支持英语和德语写作修正。它不仅可以纠正语法和标点错误，针对整句或单词给出多种备选项，还能给出措辞、语气、风格方面的建议。无论你本身英语写作水平如何，都能通过DeepL Write 实现最真实自然的表达，达到英语母语者的写作水平，有效提升英语写作更有效率。

Deepl 写作： https://www.deepl.com/write  （搭梯子浏览速更快）

以上就是今天为大家推荐的几款最近关注程度比较高的AI工具，特别推荐大家试一试其中的 AI 搜索引擎 Perplexity Ask 和 腾讯腾讯智能创作助手 Effidit，对文案写作非常有帮助。喜欢本期推荐的话请大家多多点赞收藏进行支持，我会更有动力为大家推荐设计干货知识 ~ 有关于本文或者设计的问题可以在评论区提出 ，我会第一时间回复~

参考资料：

http://www.ce.cn/xwzx/gnsz/gdxw/202302/07/t20230207_38379618.shtml

https://medium.com/@apappascs/perplexity-ask-a-game-changing-search-tool-powered-by-ai-eb0da75ce87b

推荐阅读：

字节、腾讯也玩起AI绘画了，效果还非常不错！ 大家好，这里是和你们聊设计的花生。

阅读文章 >

清华出品！AI 神器 WantQuotes 让你的文案立马变高级 大家好，我是和你聊设计的花生~ 前两天刚盘点完一波人工智能在图像生成方面的超强工具，又在微博上看到了清华大学推出的一款“据意查句”的 AI 工具，可以按照你想要的意思快速查找出相关的名言、诗句、俗语等 。

阅读文章 >

我们每个人，都会与身边的服务或产品建立起某种情感上的联系，首先我们通过以下 3 个小故事来理解一下。一、3个故事故事一：爱购物的女人你有没有发现这样的一个现象：身边大多数女性会买回很多不一定会穿用的东西，这是为什么呢？那是因为他们购物的过程中，已经享受了购物过程带给她情感上的快乐，比如享受了试穿、被他人服务、被他...

我们每个人，都会与身边的服务或产品建立起某种情感上的联系，首先我们通过以下 3 个小故事来理解一下。

一、3个故事 故事一：爱购物的女人

你有没有发现这样的一个现象：身边大多数女性会买回很多不一定会穿用的东西，这是为什么呢？

那是因为他们购物的过程中，已经享受了购物过程带给她情感上的快乐，比如享受了试穿、被他人服务、被他人赞美的过程。

故事二：给美女主播打赏的工人

据相关数据调查，很多人会拿出个人工资的 80%给女主播打赏，为什么呢？

那是因为他们在直播当中喜欢与美貌女主播互动，在这过程中能够带给他情感上的满足感。

故事三：购买保健品的老人

另外还有一个现象，很多老人宁可省吃俭用也要买很多无用的保健品放家里，也不一定会吃，因为保健品能给老人情感上的安全感。

以上三个故事向我们表明：商家在面对个人消费者的时候，通过满足人情感需求的方式，让人感受到幸福快乐或避免恐惧忧伤，从而达到赚钱的目的。同样，我们产品的目的也是服务于人，也需要满足用户情感上的需求。

美事是 58 沟通协作的办公管理平台，作为一款 B 端的工具型产品，相比 C 端产品在设计上会更理性和更严谨些，但给产品注入更好的情感设计，是任何产品都需要考虑的，因为它不但可以增加用户在体验上的愉悦感，也能向用户传达它的品牌价值。

那什么是情感化设计呢？

唐纳德·诺曼在他的设计心理学提出： 情感化设计 是指以人与物的情感交流为目的的创作行为活动，旨在引起用户注意、诱发情感反应以提高执行特定行为的可能性设计。

简单理解是：它是一种顺应或唤起用户内心情感的设计方法，旨在让用户产生积极的 用户体验 和行为。

更多情感化设计干货：

17个优秀设计案例，帮你快速了解情感化设计 情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。

阅读文章 >

二、前期分析 1. 项目背景&目标

基于美事 6.0 全新升级之后，产品界面的还有部分品牌视觉不统一、基础体验待优化的问题，于是我们启动了以“情感化”为设计方向，打造更精致的品牌视觉体验，来增加用户对美事新品牌的认知以及提升产品的基础体验。

2. 应用场景梳理

首先我们对市面产品可以做情感化的设计场景进行了大致梳理，包括：缺省页、操作反馈、引导浮层、表情包、闪屏、皮肤、生日弹窗、登陆页面、loading、下拉刷新等。

由于 B 端产品和 C 端产品在各方面都存在较大的差异，B 端产品使用情感化的前提必须是在不影响产品本身的功能性与可用性的基础上，之后才能去考虑怎么从情感化的角度去优化这个产品。

3. 建立情感化设计模型

诺曼根据人类心理特征，将情感化设计分为：本能层、行为层、反思层，我们通过这三个层次，结合设计手段及用户心理搭建一套情感化设计模型。

首先在本能层，通过感官的传递，在视觉上呈现给用户的感受是美观的、愉悦的，唤起用户对产品的喜爱；

其次在行为层，通过简洁易用的互动模式，引导用户完成他的操作目的，建立起用户与产品直接的情感关联；

最后在反思层，在本能层与行为层的共同作用下，通过运营设计手段来加强用户对产品的情感连接，并带来情感上的共鸣，以此来赢得用户对产品的认同。

4. 关键词提取

结合情感设计理论和我们的目标，进行提取了 4 个关键词，分别是愉悦性、趣味性、品牌化、情感共鸣。

三、6个技巧 接下来我们会通过围绕 4 个关键词及结合情感化设计模型，将情感化设计完美的应用到产品当中。

1. 品牌符号化，传达品牌印记

在本能层上，我们希望传达给用户的视觉感受是轻松、愉悦的，因此在设计启动页的过程中，先通过赋予美事 logo 更多的含义，以 logo 图形+内容的组合的方式来诠释美事产品的特点，来提升用户对美事品牌的感知；另外画面做轻量化处理，既能让用户的视觉更聚焦，也更能突出品牌来加深印象。

2. 创意图形与文字，增加用户愉悦感

插画和文字都是传达信息的重要手段，同时也是情绪的重要载体。因此在美事缺省页设计的时候，我们采用了创意的插画表达形式，再结合风趣幽默的文字，当用户遇到阻碍时，通过增加产品的流畅性和愉悦性能很好的减少用户不良情绪。

这种良好的情感化设计，不仅能帮产品更好的传达品牌，还能引发用户的情感共鸣，为用户带来更愉悦的体验。

3. 沟通互动，拉近用户情感

美事作为沟通工具，表情包是用户沟通中最常用的表达方式，也更容易唤起用户的情感，并能有效的缓和或带动气氛，拉近用户之间的距离。

4. 注重仪式感，创造氛围与意境

反思层次的设计，在于更高层次地满足用户的精神需求，为了让用户感受到更多人文关怀，因此我们在新员工入职、生日、司龄的时候，会送上祝福和礼品，营造温暖舒心的工作氛围，向用户传递品牌温度。

在职天数场景也都能加深品牌对用户的情感触达，让用户感到温暖。

5. 打造设计周边，渗透品牌文化

通过对美事表情包元素的提取，设计创意的礼品周边，既能有效渗透美事的品牌文化，还能大大提升用户对于产品的好感度。

6. 情感运营，加强用户粘性

年底通过盘点用户数据，为用户营造一个个性化、情感化、有温度的视觉感受，打造一份具有仪式感的专属年度报告，易拉近用户间与产品的距离。另外在可通过制造些话题，形成一定范围内的传播效应。

总结 到尾声，简单做个总结：在整个项目过程，我们从用户角度出发并关注用户情感的多样性，洞察更多用户的真实诉求，从而不断优化我们的产品体验设计。为了给用户提供更愉悦的体验，我们思考如何更好的将情感化设计应用到产品当中，简单来说可以分为以下三个步骤：

首先明确项目的目标。这点非常重要，这能让我们在后面的设计过程中不跑偏方向。 然后梳理情感化设计的应用场景。根据自身产品的需求，可以对应用场景做个优先级，慢慢迭代设计。 最后通过符合或 IP 融合到设计创意并贯穿整个产品的设计中。拟人化的 IP 传达的信息，更容易引起用户共鸣。 以上是我想跟大家分享的有关情感化设计的一些思考，希望能给大家带来些启发，也借此与大家一起共同探索、学习成长，欢迎大家在评论区留言。

最后感谢大家的阅读。

欢迎关注「58UXD」的微信公众号：

俞军老师曾说：“用户是需求的集合。”需求的诱导因素是复杂的，需求的表达形式也是各异的。B 端产品与 C 端产品显然面向不同的人群，满足于不同的需求，简单来说，B 端产品多从角色视角出发考虑需求，服务于企业或组织，偏向于满足降本提效与资源整合的诉求，而 C 端产品多从用户视角出发考虑需求，服务于个人或消费者，偏向于...

俞军老师曾说：“用户是需求的集合。”需求的诱导因素是复杂的，需求的表达形式也是各异的。B 端产品与 C 端产品显然面向不同的人群，满足于不同的需求，简单来说，B 端产品多从角色视角出发考虑需求，服务于企业或组织，偏向于满足降本提效与资源整合的诉求，而 C 端产品多从用户视角出发考虑需求，服务于个人或消费者，偏向于满足市场发展与体验升级的诉求。本篇文章希望能够帮助大家更形象地理解 B 端与 C 端的区别以及如何上手 B 端调研。

一、B 端与 C 端的区别 在了解差异前，首先要明确 B 端与 C 端的定义：

B 全称是 Business，即商业，多指企业用户，使用的是具有业务管理思想的数字化工具，常见的 B 端产品有 ERP、OA、CRM、Slack、Notion 等。 C 全称是 Customer，即消费者，多指个人用户，使用的是能够满足某一群体需求的客户端，常见的 C 端产品有例如京东、微信、抖音、微博等。 在日常工作与生活中，我们都离不开使用 B 端与 C 端的产品。洗漱时，我们打开“网易云”听最近喜欢的音乐；出门时，我们打开“百度地图”查看路况并叫车；工作时，我们登录 Outlook、京 me、JoySpace 与营销中心等办公工具，进行邮件查收、业务沟通、会议记录与活动发布；下班后，我们在“美团外卖”挑选晚餐并下单，B 端与 C 端的产品就这样穿插在我们的生活与成长里，那它们在产品定位上到底有什么差异呢？

目标用户的不同

C 端面向个人用户，服务于在不同生活场景下的每一个人。C 端产品拥有更宽泛的受众群体，每一个核心功能都在解决大多数人的诉求，这也意味着，它需要更细致的用户画像，比如年龄、地域、收入、文化、职业、喜好等等。

B 端则面向企业用户，服务于在不同经营场景下的每一个“企业”，企业可以是商家，可以是团队，可以是组织。B 端产品拥有更垂直但复杂的受众群体，它不需要收集这类人在性别、年龄与地区等维度的差异，转而关注这类人所属角色之间的差异。“营销中心”是京东内各业务方开展京东营销活动时的中心化工作平台，一个典型的 B 端产品。我们在调研过程中会通过岗位/负责品类/工作年限明确用户所属的群体角色，比如是运营还是营销，负责的品类是图书还是汽车，至于用户年龄多大、哪里出生与性格怎样并不会影响对产品需求的判断。

使用场景的不同

C 端产品的使用场景具有极高的自由度，它会出现在各式各样的状态下，甚至在同一时间里或一个任务下可以使用多个产品，比如在在外出旅游的晚上，打开“腾讯视频”追着最近爆火的综艺，打开“轻颜相机”美化下白天拍摄的相片，再去到“微信”发一条旅游主题的朋友圈。使用场景的碎片化与任务的随机性，使得 C 端产品需要始终注重体验的提升。

B 端产品的使用场景则不同，用户是为了工作，工作包含特定的任务，任务具有明确的动线，因此用户需要长时间与沉浸式的使用，使得 B 端产品需要具备严谨高效的操作流程与简单清晰的页面设计，为了更准、更快、更好地解决问题。

核心诉求的不同

C 端产品对于开发者而言，核心诉求是拉新、留存、转化，通过对用户需求的挖掘，迭代优化出有价值的产品，大多 C 端产品最终目的为了盈利；但对于用户而言，核心诉求是满足自我情绪，通过“微信”与父母视频，满足思念的情绪，春节期间在“京东”购买新衣，满足能在春节收到货的期待。

B 端产品的核心诉求是基于业务规范，让业务流转效率更高，员工学习成本更低。相比于 C 端对用户体验的极致化追求，B 端产品的需求更易受到业务形态或是企业战略的影响。

更多B端和C端的差异对比：

如何区别B端与C端的产品设计差异？我总结了26条对比！ 随着企业数字化转型，B 端产品越来越受到人们的重视，B 端产品也越来越丰富，越来越多的 C 端设计师转行到 B 端产品的设计上来。

阅读文章 >

固然 B 端与 C 端存在各种维度的差异，看似 C 端产品对用户体验更为重视，但无论是 B 端还是 C 端，实际的使用者都“人”，C 端产品需要考虑商业价值与用户体验的平衡，B 端产品亦是，精准地洞察用户的需求，对企业效率的提升也大有裨益，但新人小白如何快速上手 B 端调研呢？

二、B 端调研的小经验 入职京东的第一个完整的项目是《通天塔用户体验研究》，通天塔是京东旗下一个快速搭建活动页面的平台，我们在京东看到的活动落地页大多是依赖于通天塔的能力。在调研过程中，作为新人的我，踩了很多的“坑”，也总结出些许经验，希望与大家分享，欢迎大家的批评指正。

全面理解业务

C 端产品是个体导向的，个体的偏好不影响他人的偏好，个体的痛点也未必是他人的痛点。但 B 端产品中的各方是广泛关联的，所以个体的偏好与痛点并不是随机的，也不是完全独立自主决定的，而是受到整个业务场景的影响。因此，在思考 B 端产品体验的时候，不应该仅仅思考其中某个个体的体验，还应思考他所处的业务场景。

“模板组件不丰富”是关于通天塔的一个最高频反馈，也是产品侧希望优化的重点方向。作为新手研究员的我们应该避免在访谈时问出“您需要什么样子的模板？”，并草率地给出“进一步丰富模板组件”的建议，而是需要把侧重点放到对业务场景的分析以及业务需求的梳理上。比如，“您的岗位职责是什么？”、“在页面搭建过程中主要负责的任务有哪些？”、“参与搭建的页面展示在前端的哪些位置？”、“希望通过活动页面达到什么业务效果？”、“重点关注哪些维度的效果数据？”、“负责的是什么品类？”、“这个品类有什么特性？”、“品类特性期望在页面中以什么形式展示？”等等，以此，我们会更清楚当前用户的业务范围以及这类角色的业务诉求，更好地站在业务的视角出发提出更有针对性的优化建议，找到真正被需要的“丰富性模板”。总之，调研过程中需时刻牢记业务目标，最大限度地为企业赋能，避免在细节中“钻牛角尖”。

深度熟悉产品

在入职京东前，我在京东购买过各类商品，参与过各类活动，在没有系统性的学习下，我也可以熟练使用各项基础功能。但在第一次接触“通天塔”时，我遇到了许多问题，比如“我不知道素材组是什么以及如何绑定”，“在没有素材组 ID 可用于测试时，也不知道如何去其他系统里创建素材组”，我意识到 B 端产品远比 C 端产品难上手。在对产品不熟练时，直接去邀约用户执行访谈显然是低效的，因为“你对用户的调研”会变成“用户对你的授课”。所以在调研执行前，能够熟练使用 B 端产品是必要的，特别是用户日常高频使用的功能，减少调研时的“讨教”与因功能盲点造成的理解偏差。此外，即使研究员已经可以熟练使用产品，在执行过程中，用户的“实操”仍比“口述”更有效，引导用户直观地展示操作动线，会更容易地挖掘卡点与痛点，也能减少研究员在操作任务上的理解成本。

拓宽竞品分析的边界

竞品，可以理解为一个参照物，观对手，明优劣。C 端的竞品是清晰好找的，比如京东的竞品有淘宝与拼多多等，抖音的竞品有快手等，爱奇艺的竞品有腾讯视频与优酷视频等，但通天塔的竞品是什么？大家会说自然是各大友商旗下搭建页面的工具，但这类产品往往是企业自行开发，供于内部员工与商家使用，作为一名个人用户，是难以获得权限进行走查的。此外，B 端产品往往是服务于特定企业，具有个性化需求，难以从市场中获取相关信息。所以应该如何进行竞品分析呢？

首先要敢于申请账号，想要全方位走查 B 端产品定需要足够的权限，但不能因此就放弃尝试。从申请一个账号开始，会发现部分 B 端产品并没有非常严格的使用界限。我在调研过程中，百度搜索了许多竞品，部分页面搭建的产品其实是同时面向 C 端与 B 端的，初次注册的个人账号虽缺少对一些高级功能的使用权限，但也足以给到一些启迪。其次，受访者的信息是重要的。在执行访谈的过程中，不要忽略询问受访者对竞品的态度，因为有些受访者有使用过相关竞品的经验或目前仍在多个渠道中负责搭建页面，他们对竞品能力的熟悉度与可提供信息的价值性要远大于个人走查所能带来的。

以上就是个人对 B 端的理解以及在 B 端调研时沉淀的小经验，作为新手研究员，仍有许多不足之处，欢迎大家批评指正。

欢迎关注「JellyDesign」的小程序：

我们每个人，都会与身边的服务或产品建立起某种情感上的联系，首先我们通过以下 3 个小故事来理解一下。一、3个故事故事一：爱购物的女人你有没有发现这样的一个现象：身边大多数女性会买回很多不一定会穿用的东西，这是为什么呢？那是因为他们购物的过程中，已经享受了购物过程带给她情感上的快乐，比如享受了试穿、被他人服务、被他...

我们每个人，都会与身边的服务或产品建立起某种情感上的联系，首先我们通过以下 3 个小故事来理解一下。

一、3个故事 故事一：爱购物的女人

你有没有发现这样的一个现象：身边大多数女性会买回很多不一定会穿用的东西，这是为什么呢？

那是因为他们购物的过程中，已经享受了购物过程带给她情感上的快乐，比如享受了试穿、被他人服务、被他人赞美的过程。

故事二：给美女主播打赏的工人

据相关数据调查，很多人会拿出个人工资的 80%给女主播打赏，为什么呢？

那是因为他们在直播当中喜欢与美貌女主播互动，在这过程中能够带给他情感上的满足感。

故事三：购买保健品的老人

另外还有一个现象，很多老人宁可省吃俭用也要买很多无用的保健品放家里，也不一定会吃，因为保健品能给老人情感上的安全感。

以上三个故事向我们表明：商家在面对个人消费者的时候，通过满足人情感需求的方式，让人感受到幸福快乐或避免恐惧忧伤，从而达到赚钱的目的。同样，我们产品的目的也是服务于人，也需要满足用户情感上的需求。

美事是 58 沟通协作的办公管理平台，作为一款 B 端的工具型产品，相比 C 端产品在设计上会更理性和更严谨些，但给产品注入更好的情感设计，是任何产品都需要考虑的，因为它不但可以增加用户在体验上的愉悦感，也能向用户传达它的品牌价值。

那什么是情感化设计呢？

唐纳德·诺曼在他的设计心理学提出： 情感化设计 是指以人与物的情感交流为目的的创作行为活动，旨在引起用户注意、诱发情感反应以提高执行特定行为的可能性设计。

简单理解是：它是一种顺应或唤起用户内心情感的设计方法，旨在让用户产生积极的 用户体验 和行为。

更多情感化设计干货：

17个优秀设计案例，帮你快速了解情感化设计 情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。

阅读文章 >

二、前期分析 1. 项目背景&目标

基于美事 6.0 全新升级之后，产品界面的还有部分品牌视觉不统一、基础体验待优化的问题，于是我们启动了以“情感化”为设计方向，打造更精致的品牌视觉体验，来增加用户对美事新品牌的认知以及提升产品的基础体验。

2. 应用场景梳理

首先我们对市面产品可以做情感化的设计场景进行了大致梳理，包括：缺省页、操作反馈、引导浮层、表情包、闪屏、皮肤、生日弹窗、登陆页面、loading、下拉刷新等。

由于 B 端产品和 C 端产品在各方面都存在较大的差异，B 端产品使用情感化的前提必须是在不影响产品本身的功能性与可用性的基础上，之后才能去考虑怎么从情感化的角度去优化这个产品。

3. 建立情感化设计模型

诺曼根据人类心理特征，将情感化设计分为：本能层、行为层、反思层，我们通过这三个层次，结合设计手段及用户心理搭建一套情感化设计模型。

首先在本能层，通过感官的传递，在视觉上呈现给用户的感受是美观的、愉悦的，唤起用户对产品的喜爱；

其次在行为层，通过简洁易用的互动模式，引导用户完成他的操作目的，建立起用户与产品直接的情感关联；

最后在反思层，在本能层与行为层的共同作用下，通过运营设计手段来加强用户对产品的情感连接，并带来情感上的共鸣，以此来赢得用户对产品的认同。

4. 关键词提取

结合情感设计理论和我们的目标，进行提取了 4 个关键词，分别是愉悦性、趣味性、品牌化、情感共鸣。

三、6个技巧 接下来我们会通过围绕 4 个关键词及结合情感化设计模型，将情感化设计完美的应用到产品当中。

1. 品牌符号化，传达品牌印记

在本能层上，我们希望传达给用户的视觉感受是轻松、愉悦的，因此在设计启动页的过程中，先通过赋予美事 logo 更多的含义，以 logo 图形+内容的组合的方式来诠释美事产品的特点，来提升用户对美事品牌的感知；另外画面做轻量化处理，既能让用户的视觉更聚焦，也更能突出品牌来加深印象。

2. 创意图形与文字，增加用户愉悦感

插画和文字都是传达信息的重要手段，同时也是情绪的重要载体。因此在美事缺省页设计的时候，我们采用了创意的插画表达形式，再结合风趣幽默的文字，当用户遇到阻碍时，通过增加产品的流畅性和愉悦性能很好的减少用户不良情绪。

这种良好的情感化设计，不仅能帮产品更好的传达品牌，还能引发用户的情感共鸣，为用户带来更愉悦的体验。

3. 沟通互动，拉近用户情感

美事作为沟通工具，表情包是用户沟通中最常用的表达方式，也更容易唤起用户的情感，并能有效的缓和或带动气氛，拉近用户之间的距离。

4. 注重仪式感，创造氛围与意境

反思层次的设计，在于更高层次地满足用户的精神需求，为了让用户感受到更多人文关怀，因此我们在新员工入职、生日、司龄的时候，会送上祝福和礼品，营造温暖舒心的工作氛围，向用户传递品牌温度。

在职天数场景也都能加深品牌对用户的情感触达，让用户感到温暖。

5. 打造设计周边，渗透品牌文化

通过对美事表情包元素的提取，设计创意的礼品周边，既能有效渗透美事的品牌文化，还能大大提升用户对于产品的好感度。

6. 情感运营，加强用户粘性

年底通过盘点用户数据，为用户营造一个个性化、情感化、有温度的视觉感受，打造一份具有仪式感的专属年度报告，易拉近用户间与产品的距离。另外在可通过制造些话题，形成一定范围内的传播效应。

总结 到尾声，简单做个总结：在整个项目过程，我们从用户角度出发并关注用户情感的多样性，洞察更多用户的真实诉求，从而不断优化我们的产品体验设计。为了给用户提供更愉悦的体验，我们思考如何更好的将情感化设计应用到产品当中，简单来说可以分为以下三个步骤：

首先明确项目的目标。这点非常重要，这能让我们在后面的设计过程中不跑偏方向。 然后梳理情感化设计的应用场景。根据自身产品的需求，可以对应用场景做个优先级，慢慢迭代设计。 最后通过符合或 IP 融合到设计创意并贯穿整个产品的设计中。拟人化的 IP 传达的信息，更容易引起用户共鸣。 以上是我想跟大家分享的有关情感化设计的一些思考，希望能给大家带来些启发，也借此与大家一起共同探索、学习成长，欢迎大家在评论区留言。

最后感谢大家的阅读。

欢迎关注「58UXD」的微信公众号：

.video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } } 当视频无法...

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

一、前言 莫奈是一款主要服务京东内部用户的数据可视化平台，它以容器的形式将京东城市各种与智慧城市建设及运营相关的能力聚合，并以可视化的形式面向客户呈现。

作为 京东 莫奈的设计负责人，过去三年一直负责 莫奈可视化 平台的用户体验设计工作，由于本人日常设计主要以智慧城市、数据可视化大屏为主，所以我既是莫奈的设计负责人也是莫奈的深度使用者或者说专家用户。在长期使用莫奈的过程中，本人梳理了大量与视觉、体验相关的问题，这些问题，部分在产品日常迭代中得到了优化，但是也有相当一部分解决起来具有一定的难度和成本；与此同时，作为用户体验 设计师 ，我日常与业务方、客户方以及用户接触紧密，所以在与大量用户沟通后，也从用户侧收集了不少使用体验相关的问题。我对以上两个渠道的问题整体梳理汇总，并与产品侧讨论沟通后，大家认为这些问题比较严重的影响了用户使用莫奈的效率，降低了莫奈对业务侧赋能的质量，提高了客户使用莫奈的成本。所以我们必须规划出一个产品迭代的周期，针对莫奈体验问题，进行一次密集的优化和革新，这便是本次莫奈体验升级改版的基础背景和原因。

本篇文章写作的主要目的，是想将本人在这次改版设计中用到的一些方法、流程和经验与大家做次交流和分享，希望能为同行在类似的改版设计中提供一定的借鉴和参考。

京东往期案例复盘：

让购物简单快乐！京东 APP 11.0 深度解读：视觉篇 在 APP11.0 深度解读系列的第一篇文章中，剖析了基于生态进行体系化大改版的解读与思考，本文将聚焦于视觉设计，阐明我们对此版本的设计主张与思路，在各个场景是如何外化以辅助达成改版目标的。

阅读文章 >

二、体验升级流程 实际上，在梳理出整个体验升级流程之前，通过与产品负责人的多次沟通，我们事实上已经对体验升级这个需求达成了共识，而流程图解决的是做什么、怎么做的问题。

下图展示的这套体验升级流程较为通用，大多数产品的体验升级都可参考下面的流程执行。

这套流程的主要作用有两个，一是通过它可以更直观的跟产品负责人、开发负责人等关键角色沟通，让大家对体验升级这件事儿有整体且全面的了解，方便大家评估工时、预估成本和安排排期；另一方面也能够使我自己的工作推进的更加有节奏有条理，避免工作内容长时间停滞在某一个环节而影响整体进度。

三、改版背景及产品简介

基于 STAR 法则，背景概况部分向大家介绍莫奈体验升级的必要性。在企业中，想要推动一个需求顺利执行，那一定是需求上下游以及相关方的利益都得到了体现和满足。莫奈此次升级，从体验设计师角度来讲，我们作为用户的代言人，在了解到用户大量反馈和建议后，有责任将用户的声音转化为需求，并推进落地为产品的一部分；从产品团队来讲，莫奈想要不断发展，持续为客户和业务方带来显著的效率提升、明显的成本下降，也必须对过去老旧的产品架构做一次深度的革新和优化；从前端工程师、研发同学的角度看，以往不合理的底层代码设计，使产品在性能、稳定性等方面留有大量隐患，因此在日常迭代工作之外，研发同学总要消耗部分精力去维护那部分不稳定的存在，从而导致研发同学人效比低、开发体验差；从上级 Leader 来看，公司的核心经营理念是“成本、效率、体验”，但成本的降低、效率的提升、体验的优化都依赖于强悍的技术和优秀的产品，而莫奈此次体验升级正是践行公司核心理念的有效尝试，综上，此次体验升级于多方有益，符合部门整体利益，所以大家很快达成共识。

四、莫奈典型用户场景梳理 通常我们说用户体验时，用户是一个群体的概念，而这个群体如上图所示，可以被进一步细分为多种角色，理想情况是每一类角色的体验都被满足，但现实执行中我们必须要有策略和取舍。所以要想产品有好的体验，首先我们要知道用户群体中不同角色对产品的使用情况如何，并找到对产品依赖度强使用频次高的那部分用户和场景，然后针对他们以及他们使用的场景做高优先级的优化。

从莫奈典型用户使用场景可以归纳出：

首先，莫奈的主要使用者为各个项目的产品经理及开发工程师，其中设计师也有相当大的使用强度，这三类用户他们直接使用莫奈，并把莫奈作为解决数据可视化场景构建相关需求的主要工具和方案，所以，以上三类用户，我们将其称之为莫奈的核心用户。核心用户使用莫奈产出的作品，经由上下游同事传达和部署给业务方及客户后，莫奈的商业价值便得以体现。

其次，每类用户使用莫奈不同功能模块的频次不同。从使用场景中我们也发现，莫奈的使用具有上下游的关联性，核心用户处于流程的下游，中上游的用户虽不是核心用户，但他们因为更接近客户和业务，往往具有比核心用户更高的决策权。因此我们优先让核心用户体验提升并不意味着放弃上游的体验，而是资源有限的情况下我们的工作必须有取舍有重点。实际上我们是通过建立核心用户的声量和口碑来向上游用户传达莫奈的价值和特色，通过核心用户使用莫奈交付的结果来证明莫奈的可靠。与此同时，我们也通过对内外的宣讲和培训，持续接收上游用户的反馈，并在迭代中持续优化。

五、体验痛点分析-用户调研 知道了核心用户是谁，那么核心用户的体验痛点是什么呢？

虽然在日常的交流沟通中我们已经获取了不少用户反馈、收集了相当的问题建议，但作为体验升级的系统性工作，为了更全面的了解用户体验痛点，我们还是设计了一次完整的用户调研活动。本次调研主要采用线上问卷调研、线下访谈+用户行为观察的方式进行。线上问卷采用京东良研问卷系统，除了面向核心用户推送，我们还面向莫奈主流用户及边缘用户推送了问卷内容，因此，问卷调研整体覆盖较为全面。线下访谈除了邀请部分核心用户，我们也从问卷系统中筛选了部分反馈问题多且愿意参加线下访谈的用户参与。线上线下均包含内外部用户，以期获得更加客观真实的反馈。

用户调研的核心目标是充分收集用户反馈，并将反馈结果量化及系统化，量化后的结果可做为设计侧推动产品执行体验优化的关键依据，也可以作为后续验证优化结果的对照项。

六、体验痛点分析-问卷设计 本次问卷设计我们参考了 PSSUQ 整体可用性量表，并结合本次调研目标做了部分调整。

PSSUQ 整体可用性量表可以从系统易用性、信息质量、界面质量三个方面将体验结果量化，然后通过与行业基本经验值比较，既可以知道用户对莫奈在以上三项的满意度，也可对莫奈当前整体体验结果有一个全局的概况性评价。同时根据三个方向的评分也可以更细致的指导后续的设计优化方向，为设计决策提供更多科学可信的依据。

PSSUQ 整体可用性量表作为一个通用模版，其内容比较固定，为避免多次打扰用户，提升问卷调研效率，我在 PSSUQ 的基础上添加了少量关键信息甄别、用户反馈积极性识别类问题，从而使问卷内容更加符合本次调研目标。

七、体验痛点分析-问卷调研 问卷设计好之后，接下来就是问卷发放以及结果分析了。

PSSUQ 量表内每个问题均有 8 个选项，「1-7」是对该项描述的认可程度，得分越低代表用户对该项描述越认可；「NA」代表用户对该项描述无法评价。本次调研通过京东良研发放线上问卷 100 份，共收到有效问卷反馈 87 份（大于 PSSUQ 所需的最少样本数量：20），说明问卷结果具有较好的可信度，其结果值得进一步研究。

通过整理和统计问卷数据，可以得出以下结论：

内外部用户在系统易用性、信息质量、界面质量三个维度对莫奈均不满意 对比行业经验值（均值），莫奈系统总体体验质量与行业同类产品存在明显差距 莫奈用户群体整体积极性较高，具有较强的沟通及反馈意愿 整体评分结果与日常同相关同学的沟通结果一致，以上评分结果也反映出此次体验升级的紧迫性，作为由设计驱动的改版设计，设计侧面临较大压力。

八、体验痛点分析-亲和图 在设计问卷的环节我也提到过我们的问卷在 PSSUQ 量表的基础上针对本次调研目标做了部分调整和优化，而线上问卷最后两个选项以问答题的形式向被调研用户提供了对莫奈各方面建议的反馈渠道，通过问答项我们收集到用户反馈的各类问题 80 多条，我们采用亲和图对这些反馈做整理，亲和图顾名思义，它可以使具有类似特征和关联属性的问题更加临近，从而将零散的问题被归类，方便从杂乱的问题中找到规律，并通过比较不同类型问题的占比，更直观的了解用户反馈的问题主要集中在那些方向。

如下图所示，产品的反应速度及稳定性、模板和组件丰富度是用户反馈问题最集中的两项，前者影响用户最基础的使用体验，后者决定产品能多大程度上便捷的服务用户。良好的稳定性和反应速度可以让用户专注于任务本身，而使用模板能最快速的产出作品，降低新手的使用门槛，丰富的组件能够满足用户在各类复杂场景下的业务需求，减少组件二开成本，提高交付效率。针对这两个大的问题点，首先，对于那些能够在当前产品日常迭代中优化的点，我整理后会以需求的方式向产品团队提出，并在日常迭代中逐步优化；然后，对于那些需要“伤筋动骨”做底层优化以及长期运营沉淀才能有效改善的问题，我们会进一步向用户收集和完善相关信息，并将相关问题梳理到本次改版任务中，做系统的解决和处理。

九、体验痛点分析-线下用户访谈 在「05、体验痛点分析-用户调研部分」已经介绍了本次参与访谈的用户来源，但在实际执行时，我们也邀请了部分在线上问卷反馈中描述模糊不清、难以理解，需要面对面交流或者演示才能理解的问题的用户。

访谈先通过与用户简短的沟通了解用户的岗位/职业以及使用莫奈的主要场景、频次、设备等，然后通过给用户设置一到两个简单的任务，观察用户在完成任务过程中的行为、表情、语气等，以了解莫奈在一些典型使用场景下的易用性及可用性。比如，对于视觉设计师：请在画布中添加一个条形图，并将条形图的颜色修改为绿色、激活纵轴辅助线、修改辅助线为虚线样式....；

对于开发工程师：请在画布中添加一个环形图，并使用 json 为环形图添加一组动态数据....。之后，在用户完成基础任务后，我们还会针对用户关心的问题进行更细致的沟通，了解用户更细致的反馈。对于用户反馈的问题，我们整理后会在公司内部的需求及研发管理系统“行云”中以需求的方式提交给产品团队并同步添加反馈问题的用户为该需求的关注者，后续，当该需求的状态有任何更新时，问题反馈者都能及时收到更新。如此，受访者反馈的问题从需求提交到需求最终提测验收，都能在线跟踪并闭环。这样做既是我们团队的责任，也可以增进用户对莫奈的信任，并期望活跃用户后续能继续为莫奈提供建议和反馈。

十、体验问题汇总-用户体验金子塔 通过线上问卷调研及线下访谈，我们已充分了解了用户心声，接下来我们通过用户体验 5 要素模型，将各类问题进一步归纳并按照产品建设的上下游协作关系，把每一个具体的问题汇总给对应的角色，并由对应的角色产出具体的解决方案，然后通过线下会议同步各自方案并对方案进行评审和沟通，由此，关于体验升级的所有事项及具体任务便可周密安排，之后便是资源投入、推进升级工作具体执行。

从用户体验 5 要素，分析「盒马鲜生」是如何收获百万好评的！ 前几天我去盒马鲜生凑热闹逛了一会，体验了一下盒马的商品品类、用户动线、展柜分布和设计、APP交互、品牌设计等方面。

阅读文章 >

用户体验 5 要素模型，从产品的战略层出发，层层递进直到表现层，把影响用户体验最根本的因素分层并可视化，借助这一模型可以让大家对“用户体验”这个概念有更好的理解，并能促成大家在更大的层面上达成共识。以往谈到用户体验，大家首先想到的是界面是否好看、交互是否流畅，然而一些对用户体验也有着重要影响但“不可见、不直观”的因素却往往被忽视，尤其对开发侧同学更是如此，他们鲜有意识到产品的目标、内容以及性能等这类的因素，也是构成用户体验的重要部分。对于莫奈这样一款长期维护持续迭代的产品来说，好的用户体验并不能以“毕其功于一役”的方式来实现，而是要通过持续不断的改进和优化才能持续满足并提升用户体验，所以借助用户体验 5 要素等模型，我们引导产品及研发团队更好的理解用户体验，这样不仅能帮助设计师在本次体验升级改版工作中与大家高效协作，也非常益于之后日常产品迭代的沟通与协作。

十一、体验问题汇总-体验升级方向

上一步，我们通过用户体验金字塔将体验问题汇总并划分给了不同的角色，之后各个负责人产出解决方案并与大家评审和沟通，而体验升级方向正是基于大家对各类方案一致沟通后达成的共识和结果，体验升级方向以设计为主导，同时兼顾产品和研发的部分目标，我们用 5 个短句将五个升级方向概括，每个方向尽量解决一个维度的问题，比如“界面视觉质量提升”解决表现层的问题、“信息层级优化”解决框架层的问题。体验升级方向作为对体验升级结果的导向，将指导后续设计动作的展开。

十二、策略制定-设计目标确定

基于体验升级方向，接下来就要制定具体的设计策略，来实现体验升级方向中要达成的结果。设计策略制定第一步先确定设计目标，我们将设计目标拆解为三个方向，每个方向通过两个关键词定义。设计目标主要分为视角与交互两个方向，同时兼顾产品侧“易拓展、易维护”的需求。实际设计中，视觉与交互并非独自分开进行，在设计开始的阶段，需要先定义设计风格等基础设计要素，之后视觉便可在此基础之上全面展开，此时视觉设计要考虑交互的效果，交互设计也需要斟酌设计的展现。

十三、设计执行-视觉风格定义 对于设计目标中关键词所代表的那些抽象概念，每个人的认知可能都不一样，但是搜索引擎和大数据推荐的算法，可以告诉我们普通大众对那些关键词所表现出来的意象是如何认知的，之后我们便可从符合大家普遍认知的视觉素材中，提取出符合关键词所表达出的意象的设计要素，之后通过在设计中应用这些设计要素，就能把关键词定义的抽象的设计概念转化为具象的认知，我把这个过程称之为“抽象概念的可视化”。而“情绪版”是我完成上述工作的主要工具。

我们使用搜索引擎以及 AI 推荐的关联算法，针对“科技和高效”这两个视觉目标的关键词收集了海量的音视频设计素材，把这些素材集合在一个画布上形成“情绪版”，然后通过归纳这些素材共有的特点/要素，就能将体现“科技、高效”这两个概念的所有设计要素剥离出来，并通过简洁的文字加以描述和归纳。此后，我们通过在视觉设计执行的过程中应用这些设计要素，通过合理的搭配和组织，将这些设计要素融入到莫奈新的设计语言，如此，产品最终便可在视觉上呈现出与视觉目标关键词定义的一致的视觉和心理感受。

十四、视觉风格定义中的 7 要素 基于情绪版提炼出的设计要素其实已经足够具体，但是如何将这些要素应用在设计中，我们还需要进一步归纳。我个人一直以来习惯从形、色、字、质、构、动、音 7 个维度分析一个设计作品的设计风格，就如同人体是由肌肉、骨骼构成的一样，以上 7 个维度也是构成一个设计作品的“经、骨、肉”。所以，我认为对于一个设计作品，尤其是 UI 设计作品，以上 7 个维度基本能够完全概况它的风格，所以当我要为自己的产品做风格设定时，我也是从这 7 个维度出发来为每个维度定义具体的风格和策略。

这种细分维度然后定义风格的方式有多种优势，其中最明显的是它能够将我们风格定义的设计工作条理化，避免反复尝试和摸索造成的大量返工和思绪混乱，比如，如果我对质感的定义有偏差，不符合情绪版中提取出来的设计要素的特点，这时候我只需要对“质感”这个维度的风格进行优化和调整，而不需要推翻整个 7 要素重新再来。这种设计方式让我的设计更加理性，也让后续设计执行的工作更加的有条理和舒适，从设计风格落地的角度来讲，这种方式我个人认为是最能够忠于情绪版所归纳出的设计感受的方法。

十五、视觉改版：造形演绎 对于产品界面的造形设计，一方面依照情绪版中提取的设计要素“透视、空间感、异构造形”来考虑，另一方面我也结合莫奈的产品 Logo 做了适当的抽象和演绎；两者结合最终确定了当前莫奈的造形设计。

首先，产品左侧主导航采用了具有一定透视角度的异形设计；产品顶部标题区域也采用了相同的设计思路：左侧为品牌 Logo 设计了一个容器，Logo 在其中容纳放置；Logo 右侧收起的区域预留了常用公告、跑马灯的设计，方便产品把日常重要信息同步给用户；最右侧呈现用户个人中心、空间管理、使用帮助等菜单项。

对于这种异形的设计，用户是否能够接受，在设计开始时我存在一定的疑虑，因此在设计初稿定稿后我们邀请了部分用户做了测试，大部分用户认为新的设计有创意具有鲜明的特点，也有部分用户认为透视的设计看着较为怪异，尤其是左侧主导航的文字在添加透视效果后识别性存在一定的问题。因此针对用户反馈我优化了透视的角度，从多个透视数值中选择了一个即能展示透视的设计效果、又不至于透视过大导致文本图标等变形严重而不易识别的角度，其次，我还配合开发同学对导航透视文本和图标的渲染做了一些优化，从而使其具有更好的识别性和清晰度。在以上两项优化完成后，新的用户测试表明大家对该设计的满意度有很好的提升。

十六、视觉改版：色彩搭配

莫奈在改版之前就已经有自己的品牌色，新的色彩升级围绕“科技与高效”两个关键词，结合情绪版提取的设计要素，将原有品牌色做了细微的调整。首先蓝色饱和度增加，绿色调整色相使其偏向蓝色的一端并增加亮度。如此，当两个颜色搭配使用时，蓝色作为主色调体现科技、可靠的视觉和心理感受；绿色作为点缀色和强调色，体现活力、高效与创新。蓝绿对比强烈，具有很好的场景适应性和品牌特色。

十七、视觉改版：字体选取 字体作为 UI 界面中最常见的元素以及作为信息呈现的主要载体，字体的使用对产品的易用性和视觉表现有着非常重要的影响。结合体验升级方向中定义的“增强品牌特色”的目标以及情绪版中提取的非衬线的设计要素，对于字体的设计风格，我将其归纳为"定制化、品牌性和非衬线"。

为了实现字体风格的设计目标，我选取了两款京东品牌的定制字体“京东朗正体”及“京东正黑体”。京东朗正体经过多次迭代，目前具有丰富的字重和独特的品牌特色，将该字体用于莫奈的品牌 Logo，可以很好的体现京东的品牌特色并体现出与其它产品差异化的字体设计。京东正黑体主要用于莫奈产品中的数字、拼音、英语、数值符号四个场景，该字体也是京东金融 APP 的系统数字字体，其最大的特点是等宽、简洁、紧凑具有很好的识别性与易读性，并且该字体有较小的字符宽度，所以当其用于大屏编辑器时，能够在相同的空间下容纳比其它字体更多的字符，而这个特点对于“寸土寸金”的属性面板尤为重要。此外，该字体在作为数字字体使用时，其小数点、千分符等也具有很强的特色，具有不错的辨识度与个性。

而产品中的中文字体 Mac 与 Windows 系统有不同的方案。在 Windows 下，由于系统自带的微软雅黑当字号小于 14pt 时，字符在水平方向上存在明显“参差不齐”的现象，加之该字体很少更新，没有针对当前高像素密度、高分辨率的屏幕特点做相关的适配优化，所以在高分屏下，其字体边缘会有明显的锯齿。之前在用户调研中，有用户反馈字体模糊不清、识别困难也是上述原因造成，所以 Windows 系统下莫奈界面字体选取了思源黑体，思源黑体是 Adobe 与 Google 联合开发的开源字体，其字重丰富、字形简洁、现代，能够很好的适应 PC 与移动端的显示，也能适应当前已渐趋主流的高分屏，所以使用该字体能够给用户带来不错的信息呈现。除此之外，思源黑体的字形特点与 MacOS 系统下的苹方字体相似，因而使用思源黑体在一定程度上也能够保证用户在不同平台使用莫奈时体验的一致性。

十八、视觉改版：质感表现 质感的呈现主要通过色彩、透明度的变化、毛玻璃效果的模拟来实现，色彩与透明度的变化搭配毛玻璃效果使用，可以呈现科技、轻盈的质感。

十九、视觉改版：结构设计 结构设计主要目标是组件化及原子化，莫奈最核心页面是大屏场景编辑器，该页面承载着可视化大屏由 0 到 1 构建所需的大多数功能，也是莫奈产品日常迭代维护投入资源和成本最集中的模块。以往编辑器的界面设计虽然也有不错的设计规范，但是并没有按照原子化、组件化的思路来考虑各类组件组合使用时的搭配问题，因此基于以往的设计规范，大屏编辑器页面的产品需求总是需要 UI 产出设计稿研发才能开发，且由于没有系统的梳理过编辑器页面各种组件的类型，所以部分组件在同一页面的不同位置存在不同的形态；还有一些组件，在具体页面中的使用并不符合该组件的功能和用途，存在错用乱用的情形，由此造成编辑器的界面设计、开发和维护都具有较高的成本。

新的改版设计，在设计之初就联合产品对编辑器内的各个模块所包含的各类组件进行了梳理，通过将各个模块的组件罗列出来，然后重新梳理组合、去重、合并之后，我们就可以知道当前编辑器界面总共有哪些类型的组件，以及每类组件用在何处，而组件原子化后也通过间距规范、使用场景示例等方式解决了如何用的问题。

原子化的组件，精简了组件的数量，同时每个组件也针对自身功能和用途的特点进行了优化，在此过程中也考虑了组件搭配、组合使用的适配和呈现问题。比如，针对颜色选择组件，我们默认以十六进制展示颜色色值，并在色值后以百分比显示该颜色的透明度，我们还在色值后面增加了色值预览的小色块，这样的设计兼顾了开发与设计同学使用莫奈的场景。对于开发同学，他们在代码中习惯使用十六进制色值，而设计师更习惯于 RGBA 或 HSLA 的调色模式，因此，虽然十六进制的色值也能包含透明度信息，但我们依然在颜色后面增加了百分比及小色块，已帮助设计同学确认颜色的正确性，此外我们还通过色彩显示模式切换、自动输入校正等手段，确保不管用户输入的颜色采用何种方式，最终属性栏都是按照用户设置的模式以统一的格式呈现。而诸如此类优化，在本次体验升级中不胜枚举。

二十、视觉改版：动效设计 莫奈的动效设计主要有两类，一类是用于页面视觉效果营造的氛围类点缀动效，另一类是用于功能及信息传递的交互类动效。两类动效都通过“节奏感、轻盈”的设计风格，传递科技、高效的视觉感受。

在本次动效交付中，为了保证动效的清晰度与流畅感、并减少动效的体积和提升动效加载速度，动效文件均采用 Json 代码的形式交付前端，该类动效由浏览器在网页端实时渲染，具有矢量动画的特点，能适应多种设备及屏幕分辨率，具有优秀的前端呈现效果。

首页科技感流光氛围动效

页面及大屏加载 Loading 动画

二十一、设计执行-典型页面效果 1. 产品登录页

2. 产品首页-我的可视化页面

3. 我的可视化页面改版前后对比

4. 大屏模板页面

5. 可视化场景编辑器页面

6. 可视化场景编辑器页面改版前后对比

7. 产品主要 ICON 设计

二十二、交互优化：图表属性配置优化 针对视觉层面设计优化后，接下来针对莫奈典型的用户使用场景以及之前线上问卷、线下访谈中用户反馈问题比较集中的一些场景进行交互层面的优化，我们交互优化的目标是“简单、流畅”。

首先进行交互优化的是各类图表的属性及配置项设置相关的交互优化。

莫奈作为一款可视化场景搭建平台，为用户提供了各类型的图表，每个图表均具有“样式、数据、交互”三大类配置属性，这三大属性，从图表看起来是什么样、图表展现了什么数据、图表可以与用户进行那些互动三个维度解决了图表在数据可视化呈现中最基础的需求。由于图表在数据可视化呈现中频繁使用，所以与图表配置相关的操作自然也是相当高频和常用。当前版本下，图表配置项主要问题有两个：一个是图表配置项层级过深，用户需多次点击才能对某一内容进行修改；第二是批量对多个图表的相同属性进行修改在当前版本不可用，导致用户图表配置成本高。针对用户最关心最影响体验的两个交互问题，我的优化方案如下。

优化图表配置项层级过深，用户需要多次点击才能对某一个内容进行修改的问题

要解决问题，首先要知道问题从何而来。经过深入与产品、研发同学及部分用户访谈沟通后，我发现当前导致图表配置项层级过深主要有两个原因，分别是产品规划与设计展现。

具体来讲，产品层面有三个问题：

① 产品对于当前图表配置项的结构梳理是以程序的逻辑来呈现，而非以用户的视角来归纳。举个栗子，在当前版本如果用户要修改柱状图某个柱子的颜色，操作路劲如下：样式>数据系列>系列名称>形状设置>颜色设置。而这一路径为何如此设计？因为颜色这个属性的后端代码就是这样的结构。这一路劲把用户最易理解、最直观的属性名放到了路劲的末位，而在它之前呈现的内容、名词其实都有一定的理解难度，尤其对于新手更是如此！用户想要更改颜色，Ta 首先需要知道什么是数据系列、其次还要了解形状设置可能包含哪些属性等，正因具有一定的门槛且不直观，所以用户初次进行上述设置时往往需要在样式一级菜单下点击多个属性、反复尝试确认，才能最终完成颜色修改的设置，这样一个使用的流程自然会给用户“层级过深”的感受

② 图表配置结构存在冗余、不够精简。还是上面那个栗子，用户修改颜色需要触达第 5 级。但是这种细致的分层分级的结构设计是必要的么？答案是并不是！因为只有用户关注的才是有用的，产品应该提供用户想要的内容而不是强塞给用户产品具有的所有的功能，所以我们没有必要把图表在后端具有的所有属性都罗列出来，适当的对配置项做些精简，合并一些同类的属性、然后通过“更多”按钮隐藏一些对图表呈现无关紧要的内容，如此，图表配置项便能瘦身，用户使用起来也更轻松。

③ 图表配置项的各个属性，在属性列表的排序没有遵循用户使用的频次和习惯。排列在前面的属性并非用户最常用的那些，因此用户要在列表中从上而下的“翻找”，这种使用过程中的顿挫感，一方面影响了用户使用产品的效率，另一方面也加深了用户“层级过深”的感受。

知道了问题从何而来，那么解决问题便也变的简单。首先，我们联合产品经理，对莫奈已有的 60 多个各类图表组件，逐个进行了配置项的梳理，当所有图表的配置项都以思维导图的形式呈现时，他们的共同点、同类项便一目了然。此时，之前存在的“图表配置结构存在冗余、不够精简”的问题便可解决。而对于先前存在的 01 与 03 问题点，在上述梳理工作完成后有了一定的优化和改善空间，但仍然存在一些不确定的因素影响设计和产品的决策。比如、“属性列表中，哪些属性是用户最常用的”，类似这样的问题我们通过访谈几个用户并不能得到可靠的结论，对此，一方面我们通过为配置项区域增加数据埋点，分析用户对各个配置项使用的频次来为后续的持续优化提供决策支持，另一方面我们也参考、调研了同类产品中一些用户量较大、设计质量较高的产品来进行当前有限的优化。

配置项层级过深的另一个原因，是属性配置列表的结构及布局设计存在“深层级、空间利用率底”的特点。

如下图，左侧图片示意了旧版莫奈的配置列表设计结构。可以看到旧版设计完全采用树结构的形式将各项自上而下排列，并且采用每级向右缩进一个字符的形式来做层级的区分，旧版的设计基准尺寸为 1440PX，属性配置栏本身较窄，而逐级缩进的策略更是导致信息展示困难；其次，树状的结构在展开层级较多时，部分一级属性会被挤到一屏之外，用户需要频繁滚动鼠标滚轮才能看全信息，综上，旧的设计策略也给了用户“层级深”的直观感受和交互体验。

新版设计首先增加了配置属性栏的宽度，让其能够在横向上展示更多信息；其次，新版设计，将提炼后的一级属性标签固定在属性配置列表左侧。相较于之前，这样的设计始终能够让用户清晰的看到所有一级属性，用户可以随时在各类属性中切换，并且右侧属性内容的滚动也不会影响一级属性的位置，如此就给了用户很好的全局观和使用的便利性与确定性。最后，新版设计采用分隔线与色块结合的方式来表达属性列表内的层级关系，去掉逐级缩进后，配置列表在视觉上更加整齐一致、且空间利用率也有了进一步的提升。

优化“批量对多个图表的相同属性进行修改在当前版本不可用，导致用户图表配置成本高”的交互问题

在数据可视化场景搭建过程中，用户对多个图表的相同属性进行统一修改、一次性调整的需求非常迫切和刚需。比如当前可视化大屏中有 N 个图表，此时，用户想要将其中 6 个图表的横轴颜色调整为相同的绿色，在用户的视角下，此时的操作应该是先选中 6 个想要调整的图表，然后找到横轴颜色设置项，之后统一调整色彩。但莫奈当前的版本，如果用户按照上述流程操作，看到的将是下图左侧的示例：图表多选之后，对齐、坐标等基础项仍然可用，而与属性相关的其它设置并没有被聚合并呈现，在此情况下，用户想要完成最初的目标就只能 6 个图表逐个依次调整！显然，这样的操作并不符合用户预期，它使用户的操作效率大大降低。

上述问题是一个体验相关的问题，同时也是一个强技术相关的问题，我们想要让多个图表的同类项聚合显示，首先要能在底层对各个图表的配置项有十分清晰的梳理，好在我们解决第一个问题：“配置项层级过深”时，已经完成了对 60 多个图表的细致分析，有了这项工作的基础，当前面临的问题便不那么棘手。如右侧示例：当用户多选图表时，图表的同类项会被聚合，并以用户视角的理解，将属性类别进行分类，这样的分类打破了传统的按照图表固有属性排列的惯例，而是把图表固有属性整合归纳到用户易于理解的类目下，如此，用户多选图表之后便能够便捷的对图表的各类属性进行统一的调整和修改，而这样的操作是符合用户习惯和预期的。

二十二、新建大屏交互流程优化 新建大屏作为创建数据可视化场景的第一步，它的易用与否直接给了用户最直观的对莫奈的第一感受。对于新建大屏的交互优化主要有三个方面：创建流程、模板预览与模板展示。

创建流程优化：首先，旧版的创建流程：新建可视化>选择模板>大屏命名>创建成功。 这一流程中“大屏命名”是没有必要的，因为用户在新建可视化大屏时可能存在多种需求的可能性，也许用户只是想看看创建完成后内部编辑器是什么样，或许用户有实际项目，但当前项目名称也并未确认，所以在此时添加一个不可跳过的步骤着实让人不爽，况且大屏创建成功之后在多个位置有多种方式都能便捷的修改大屏名称，因此，更快速的进入编辑器开始设计创作才是用户创建可视化最根本的目标，所以，拿掉“命名流程”，显然可以让整个交互的过程更加流畅。

模板预览与模板展示优化：原有的设计，当用户点击创建大屏按钮后，会在页面底部拉起一个小的抽屉，抽屉内包含一个空白模板以及有限多个其它内容模板，而在如此狭小的区域展示这么多内容，不管是从交互效率还是视觉效果上看，都显得格外的拘谨和难受。新的设计首先是全屏铺开，尽可能充分的利用页面空间。

在模板展示及预览方面，我设计了列表展示与缩略图分布展示两种方式，并添加了分类标签和搜索按钮，此外还联合产品增加了模板收藏功能，这样用户可以把自己喜欢的、常用的模板收藏，方便之后更快速的使用

模板预览方面，在两种布局模式下，用户鼠标滑过模板缩略图时，模板均会以较大的视图动态呈现模板内容。在列表模式下，模板预览窗口固定在页面右侧区域；缩略图分布的模式下，预览窗口根据鼠标指针的位置激活。当用户选中某个模板时，点击底部创建按钮即刻进入大屏编辑器界面，此时用户便可基于模板内容进一步完成自己的定制化设计。

二十三、全局搜索交互优化 如今移动端各类产品已经给用户养成了算法推荐+自主搜索的产品使用习惯，这种习惯当前也逐步从移动端往 PC 端转化。搜索能从海量信息中最快速的找到用户关心的内容，因而提高搜索功能的易用性，能明显提高用户使用莫奈的效率。

以往的搜索功能按照不同模块和场景分布在不同位置，用户需要先找到对应模块才能进行搜索，降低了搜索的便捷性和易用性。新的设计在保留之前搜索能力的基础上，新增全局搜索，用户在一个位置即可完成对组件（优先展示当前画板内组件）、属性、帮助等内容的搜索和查找，进一步提升搜索的效率。

二十四、图层管理交互优化 一个数据可视化场景，通常是由 N 个数据图表与其它数据要素一起构成的多个页面来呈现和展示的。这些页面内包含大量的元素，而对这些元素的管理主要通过大屏编辑器页面左侧的图层管理面板来实现。一般我们对图层管理的手段主要有三种：命名、分组和查找。

给组件命名是一个耗时且麻烦的行为，我们在做用户调研时发现，大部分用户都没有给组件规范命名的习惯，大多数情况下，组件在图层面板列表内都是以默认名称或者默认名称+1、2、3 的形式存在。这导致了当页面组件较多时，通过组件命名来查找组件其实相当困难，所以自动生成缩略图的形式相比让用户耗费大量时间为图层命名更能改善用户体验。缩略图以快照方式保存当前组件最新状态截图，从而帮助用户更快速的将图层组件与页面上的内容对应起来。

新的设计，图层成组后也取消了缩进字符的效果，我采用给成组对象设计更明显的分组示意图标以及为组内列表添加深色色块的方式，完成了成组对象与列表内其他要素区分的需求，新的设计使成组对象更易查找和识别。

此外，我们还增加了对图层列表的搜索功能，帮助用户快速定位名称已知的设计元素。

二十五、经验总结 此次体验升级是设计主导推动，产品与研发紧密配合的结果。体验设计师作为最接近用户的群体，是产品与用户沟通的桥梁。时刻关注用户心声，并能将用户细碎的吐槽和各类反馈转化为体验痛点、制定对应的优化策略是体验设计师的基本功。而对于设计和产品本身是否热爱，也是设计能否不断精进、体验是否能够不断提升的关键。好的设计不仅服务了产品、帮助了用户、同时也成就了设计师本身。

本人为莫奈提供设计支持的三年多时间，在没有 KPI 要求和外部压力的情况下，通过公司内部需求管理系统“行云”，为莫奈提交 231 个体验优化建议；以线下线上的形式面向莫奈产品及研发团队进行了 20 多次专业分享。正是日常这些积极主动且持续的努力，使我本人与莫奈产品团队建立了非常友好紧密的联系，这也为推动本次体验升级改版提供了巨大的助力。我认为作为体验设计师，我们不仅要对用户有同理心，为用户创造愉悦舒适的感受，同时也要对身边的同事、职场中的合作伙伴有相似的同理心和换位思考的意识，体验关乎人、环境与生活，尝试在生活中磨炼自己创造好的体验的能力，并将其应用到体验设计师的职业工作中，我相信，倘若如此实践，必能在职业和生活中都获得有不错的成就。

好的产品，必然是持续关注用户诉求，不断迭代发展的产品，好的体验设计也必然是陪伴产品不断优化、持续精进的设计，复盘的意义不仅是沉淀过去的经验，更是为未来更好的体验蓄能。

此次分享如能为大家带来那怕一点点的启发，本人便倍感荣幸、开心至极！ 期望大家能够与我有更多交流，么么哒~~

欢迎关注作者的微信公众号：「BYMD」