B端项目一般用到的颜色会很丰富，再带上数据可视化场景，那需要的颜色需求就会更多。像Ant design色彩体系包含12个主色以及衍生色：
Material design色彩体系包含16个主色以及衍生色:
那这种即能满足多种不同场景的同时色彩搭配在一起又很协调的色彩体系，是如何科学搭建的呢？
从各大厂的色彩规范中，可以总结将色彩划分为4种类型：
主色（品牌色）
常用于主按钮、文字高亮、重要信息高亮等场景～
中性色
常用于文字、图标、卡片背景色、分割线、边框之类的～用于处理页面信息主次关系，助力阅读体验～
功能色（语义色）
功能色代表了明确的信息以及状态（比如成功一般用绿色，出错失败一般用红色，提醒一般用橙色/黄色，链接一般用蓝色～）
扩展色
常用于更多颜色需求场景，比如Dashboard页面的图表（数据可视化）、插画配图等
通常会制定8色板、12色板、16色板。比如Ant design的色彩系统是制定了12个色板，Atlassian design是制定了8个基础色板（可以衍生16或者24色板），Material design色彩体系是制定了16个色板～
在创建之前，我们先了解一下HCT / HSL / HSB 色彩空间
这些色彩空间的区别，想要了解的可以到网上查找一些专业知识～我们这里只针对项目中使用哪一种色彩空间能够为设计师调色带来便捷性出发。
H-色相/色调
是色彩的基本属性，就是平常所说的颜色名称(如红色、黄色)等，取值在0—360度之间（黑色与白色无色相）；
S-表示饱和度/纯度
颜色的纯度，取值在0—100之间，饱和度高色彩较艳丽。饱和度低色彩就接近灰色；
B/L-表示明度
颜色的明暗程度。取值也是在0—100之间。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。
Ant design设计团队使用的是HSB颜色模型进行设计，认为设计师在调整颜色时更容易对颜色有明确的心里期望，并促进团队沟通。
HCT是Google研制的色彩空间～
H-Hue色相
取值在0-360之间；
C-Chroma色度
可以理解为色彩浓度，取值在0-100之间，数值越大，颜色浓度越浓；
T-Tone光度
也就是亮度，取值在0-100之间，数值越大，颜色越亮。
*个人认为无论采用哪一种色彩空间，只要真正能够帮助到我们运用在项目中，都是可以滴
品牌色是体现产品特性和传播理念最直观的视觉元素之一，常用于主按钮、文字高亮、重要信息高亮等场景～
确定产品主色的思路有以下几种：
了解业务属性
属于哪一个行业、产品的定位是什么、目标受众群体，想给用户传达怎样的视觉感觉；
竞品分析
了解同业务属性的产品一般用的哪些颜色，从而获得灵感；
满足WCAG2.0标准
文本的视觉呈现以及文本图像至少要有1:4.5的对比度，以确保所有的文字内容清晰易读，对比度足够。工具网址：Color review https://color.review
从B端领域里面一些国内国外大厂的设计规范中，我分别将主色在亮暗模式背景下进行可读性测试，学习到以下内容：
1. 亮暗模式下可以选取不同颜色做为主色，但亮暗模式的两个主色是在同一个色板的衍生色上；比如国内的TDesign，国外的Shopify\Atlassian\Salesforce色值不同；一般情况下会选用一样的主色在亮暗模式下；
2. Shopify\Atlassian\Microsoft无论在白色背景还是黑色背景上，都满足WCAG2.0的标准。剩下的要么在白色背景上不满足，要么在黑色背景上不满足。（当然这些都只是作为难捏不准主色时的一个参考，并不是规则～）
我负责的一款海外产品，主要是对服务器、数据库监控分析的工具，客户选定的主色是蓝色系，他们很喜欢datadog这个产品，我发现该产品的主色在HSB模式下，S色彩浓度高 B明度值76视觉上偏灰，加上客户产品的logo主色H值是偏紫色调，所以最终确定在亮模式下用#0756D5为主色（亮暗模式的选择，我打算采用Shopify\Atlassian\Salesforce的方法，暗模式下用主色的衍生色～）
功能色可以用于特定功能、状态反馈、应用图标、dashboard数据表盘等场景，最常用到的反馈的成功、失败、警告状态～
结合参看其他优秀的文章，加上我自己的一些实践思考，方法汇总如下：
1.以主色色相为基础，差值15°，围绕360°色环取24色～另外大家都知道相差15°的颜色为邻近色，那我们提取出来的任何两个相邻的颜色都是邻近色，我们拆分出来的色彩是比较和谐的~
以我负责的海外项目为例～
2.根据自身产品系统的复杂度，在24色板上去掉接近的颜色，筛选出一定说的颜色。前面也有提到一般是8、12、16色板。我负责的项目选择是10个色板～
3. 色彩校正
HSB色彩空间最大的弊端就在于相同 Saturation（饱和度） 和 Value（亮度）的色彩，在不同的 Hue （色相）上的亮度感知是完全不一样的，其原因是 HSV/HSL 色彩空间是应用于数字化图像处理领域，为了方便机器理解、计算、呈现而设计，是人类视觉的线性模型，但人类的感知却是非线性的，所以造成数值与感知不匹配的问题
市面上的校准方式一般是在颜色上面叠加纯黑色图层，图层模式选择色相，就可以直观地看到无彩色视觉感官明度～具体怎么调，是不是就按照这个方式全部都要调成统一的感官明度？我去研究了Apple/Material design/Ant design的色板，从里面选取统一编号的颜色，发现如下：
他们的色彩明度并不是完全一致的，一般是橙色、黄色这些带有语义的颜色明度会亮一些～所以色彩校正不能完全调成一样的感官明度，只能作为一个辅助。
为了满足界面对色彩的需求，需要对主色和辅助色进行色板延伸，建立不同梯度的调色板。常用的有2种方法：
第一类：手动调整
1.浅色调色板，在颜色上有序叠加（ 比如20%、40%、60%、80%、90%）不透明度的白色#ffffff；深色调色板，在颜色上有序叠加 （比如20%、40%、60%、80%）不透明度的黑色#000000。（数值并不是固定的，设计师可按需自行调整～）
2.浅色调色板，色相（H）往感光明度高的色相依次差值 2，饱和度（S）依次减少 15，明度（B）依次增加 5；深色调色板，色相（H）往感光明度低的色相依次差值 2，明度（B）依次减少 15，饱和度（S）依次增加 5。（Ant Design 和 Material Design 调色板也都加了色相旋转）
第二类：使用色板生成工具（走捷径）
1.Material Design
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
2. Ant Design
https://ant.design/docs/spec/colors
3. ColorBoX
4.figma插件Supa Palette(收费)
中性色包含了黑、白、灰，是页面中文字、背景常用的颜色，为产品界面创造结构、表达边界、建立信息层次，保持舒适的对比度是提高可读性和吸引用户注意力的关键。
最熟悉的常见文字颜色就是#333，#666，#999，我喜欢直接拿Material design的灰色色板来用，同时还会拓展蓝灰色板（在确定好灰色色板后，在上面叠加主色的不透明度即可生成蓝灰色色板～）应用于图标、背景、描边。
最后，得出所有颜色的同色系色阶：
从色板里面挑选亮模式下主色为Primary600，暗模式下主色为Primary400，实际效果图如下：
dashboard数据可视化页面的配色方案我是如何实践的呢？
结合AntV数据可视化色彩体系 https://antv.vision/zh/docs/specification/language/palette 和文章https://pixso.cn/designskills/shujukeshihuapeise/
汇总如下：
根据不同数据类型、使用场景扩展出 6 种可视化色板类型
适用于描述不同类别的数据，比如饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等
适用于表示数据样本中数值或梯度的变化，如排行榜等级变化、风险等级变化等
适用于描述数据正负值的变化，中间一般会有一个中间值（通常为0），比如气温的冷热、海拔高低、股票涨跌等
将两组顺序色板通过图层叠加模式产生一组新的色板，一个颜色代表两种变量数据，常用于观察一个事物两个维度变化的相关性
对比突出重点或特殊数据，将重点关注的数据标以高饱和度的强色调，其他普通数据标以低饱和、低明度的基本色。常用于对比重点关注事物与其他分类事物的差别
适用于气象预警配色、红绿灯配色、股市的红涨绿跌等
我负责的项目数据类型采用的是两种配色方案
1.不同类别的数据，图表类型有饼图、折线图、柱状图采用分类色板；
2.明确表明状态的用语义色板
如何从色彩系统中调分类色板呢，我常用的方法如下：
1. 参照Echart的配色规律(保守不会出错的方法)
2. 研究市面上做的好的表盘产品（比如Mixpanel）或者竞品Datadog的配色规律
3.无障碍测试校验-色盲群体的适用性
大约10%的世界人口是色盲，可以借助工具来校验：Adobe color 网页版 https://color.adobe.com/zh/create/color-accessibility
实践才是检验真理的唯一标准～色彩规范只是为了让设计更有章法、更有说服力，在运用色彩时还是需要谨慎克制，可以研究各大厂的设计规范，然后把学到的东西运用在项目实践中。
作者：志龙有妖气_zlyyq 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
今天带来的是《交互设计沉思录》第一部分的第二章「管理复杂性」。
主要讲述的是交互设计师是如何理解&组织所获取到的数字、文字数据。
通过这些步骤&方法能够帮助交互设计师更加清楚信息间的关系，建立很强的心智图景。
其间也穿插了很多职能相关部分的对比，如「交互设计师与信息架构师」「交互设计师与界面设计师」「交互设计师与电子工程师」。
作者：Viola_1241 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
莫奈是一款主要服务京东内部用户的数据可视化平台，它以容器的形式将京东城市各种与智慧城市建设及运营相关的能力聚合，并以可视化的形式面向客户呈现。
作为京东莫奈的设计负责人，过去三年一直负责莫奈可视化平台的用户体验设计工作，由于本人日常设计主要以智慧城市、数据可视化大屏为主，所以我即是莫奈的设计负责人也是莫奈的深度使用者或者说专家用户。在长期使用莫奈的过程中，本人梳理了大量与视觉、体验相关的问题，这些问题，部分在产品日常迭代中得到了优化，但是也有相当一部分解决起来具有一定的难度和成本；与此同时，作为用户体验设计师，我日常与业务方、客户方以及用户接触紧密，所以在与大量用户沟通后，也从用户侧收集了不少使用体验相关的问题。我对以上两个渠道的问题整体梳理汇总，并与产品侧讨论沟通后，大家认为这些问题比较严重的影响了用户使用莫奈的效率，降低了莫奈对业务侧赋能的质量，提高了客户使用莫奈的成本。所以我们必须规划出一个产品迭代的周期，针对莫奈体验问题，进行一次密集的优化和革新，这便是本次莫奈体验升级改版的基础背景和原因。
本篇文章写作的主要目的，是想将本人在这次改版设计中用到的一些方法、流程和经验与大家做次交流和分享，希望能为同行在类似的改版设计中提供一定的借鉴和参考。
实际上，在梳理出整个体验升级流程之前，通过与产品负责人的多次沟通，我们事实上已经对体验升级这个需求达成了共识，而流程图解决的是做什么、怎么做的问题。
下图展示的这套体验升级流程较为通用，大多数产品的体验升级都可参考下面的流程执行。
这套流程的主要作用有两个，一是通过它可以更直观的跟产品负责人、开发负责人等关键角色沟通，让大家对体验升级这件事儿有整体且全面的了解，方便大家评估工时、预估成本和安排排期；另一方面也能够使我自己的工作推进的更加有节奏有条理，避免工作内容长时间停滞在某一个环节而影响整体进度。
基于STAR法则，背景概况部分向大家介绍莫奈体验升级的必要性。在企业中，想要推动一个需求顺利执行，那一定是需求上下游以及相关方的利益都得到了体现和满足。莫奈此次升级，从体验设计师角度来讲，我们作为用户的代言人，在了解到用户大量反馈和建议后，有责任将用户的声音转化为需求，并推进落地为产品的一部分；从产品团队来讲，莫奈想要不断发展，持续为客户和业务方带来显著的效率提升、明显的成本下降，也必须对过去老旧的产品架构做一次深度的革新和优化；从前端工程师、研发同学的角度看，以往不合理的底层代码设计，使产品在性能、稳定性等方面留有大量隐患，因此在日常迭代工作之外，研发同学总要消耗部分精力去维护那部分不稳定的存在，从而导致研发同学人效比低、开发体验差；从上级Leader来看，公司的核心经营理念是“成本、效率、体验”，但成本的降低、效率的提升、体验的优化都依赖于强悍的技术和优秀的产品，而莫奈此次体验升级正是践行公司核心理念的有效尝试，综上，此次体验升级于多方有益，符合部门整体利益，所以大家很快达成共识。
通常我们说用户体验时，用户是一个群体的概念，而这个群体如上图所示，可以被进一步细分为多种角色，理想情况是每一类角色的体验都被满足，但现实执行中我们必须要有策略和取舍。所以要想产品有好的体验，首先我们要知道用户群体中不同角色对产品的使用情况如何，并找到对产品依赖度强使用频次高的那部分用户和场景，然后针对他们以及他们使用的场景做高优先级的优化。
从莫奈典型用户使用场景可以归纳出：
首先，莫奈的主要使用者为各个项目的产品经理及开发工程师，其中设计师也有相当大的使用强度，这三类用户他们直接使用莫奈，并把莫奈作为解决数据可视化场景构建相关需求的主要工具和方案，所以，以上三类用户，我们将其称之为莫奈的核心用户。核心用户使用莫奈产出的作品，经由上下游同事传达和部署给业务方及客户后，莫奈的商业价值便得以体现。
其次，每类用户使用莫奈不同功能模块的频次不同。从使用场景中我们也发现，莫奈的使用具有上下游的关联性，核心用户处于流程的下游，中上游的用户虽不是核心用户，但他们因为更接近客户和业务，往往具有比核心用户更高的决策权。因此我们优先让核心用户体验提升并不意味着放弃上游的体验，而是资源有限的情况下我们的工作必须有取舍有重点。实际上我们是通过建立核心用户的声量和口碑来向上游用户传达莫奈的价值和特色，通过核心用户使用莫奈交付的结果来证明莫奈的可靠。与此同时，我们也通过对内外的宣讲和培训，持续接收上游用户的反馈，并在迭代中持续优化。
知道了核心用户是谁，那么核心用户的体验痛点是什么呢？
虽然在日常的交流沟通中我们已经获取了不少用户反馈、收集了相当的问题建议，但作为体验升级的系统性工作，为了更全面的了解用户体验痛点，我们还是设计了一次完整的用户调研活动。本次调研主要采用线上问卷调研、线下访谈+用户行为观察的方式进行。线上问卷采用京东良研问卷系统，除了面向核心用户推送，我们还面向莫奈主流用户及边缘用户推送了问卷内容，因此，问卷调研整体覆盖较为全面。线下访谈除了邀请部分核心用户，我们也从问卷系统中筛选了部分反馈问题多且愿意参加线下访谈的用户参与。线上线下均包含内外部用户，以期获得更加客观真实的反馈。
用户调研的核心目标是充分收集用户反馈，并将反馈结果量化及系统化，量化后的结果可做为设计侧推动产品执行体验优化的关键依据，也可以作为后续验证优化结果的对照项。
本次问卷设计我们参考了PSSUQ整体可用性量表，并结合本次调研目标做了部分调整。
PSSUQ整体可用性量表可以从系统易用性、信息质量、界面质量三个方面将体验结果量化，然后通过与行业基本经验值比较，既可以知道用户对莫奈在以上三项的满意度，也可对莫奈当前整体体验结果有一个全局的概况性评价。同时根据三个方向的评分也可以更细致的指导后续的设计优化方向，为设计决策提供更多科学可信的依据。
PSSUQ整体可用性量表作为一个通用模版，其内容比较固定，为避免多次打扰用户，提升问卷调研效率，我在PSSUQ的基础上添加了少量关键信息甄别、用户反馈积极性识别类问题，从而使问卷内容更加符合本次调研目标。
问卷设计好之后，接下来就是问卷发放以及结果分析了。
PSSUQ量表内每个问题均有8个选项，【1-7】是对该项描述的认可程度，得分越低代表用户对该项描述越认可；【NA】代表用户对该项描述无法评价。本次调研通过京东良研发放线上问卷100份，共收到有效问卷反馈87份（大于PSSUQ所需的最少样本数量：20），说明问卷结果具有较好的可信度，其结果值得进一步研究。
通过整理和统计问卷数据，可以得出以下结论：
1、内外部用户在系统易用性、信息质量、界面质量三个维度对莫奈均不满意
2、对比行业经验值（均值），莫奈系统总体体验质量与行业同类产品存在明显差距
3、莫奈用户群体整体积极性较高，具有较强的沟通及反馈意愿
整体评分结果与日常同相关同学的沟通结果一致，以上评分结果也反映出此次体验升级的紧迫性，作为由设计驱动的改版设计，设计侧面临较大压力。
在设计问卷的环节我也提到过我们的问卷在PSSUQ量表的基础上针对本次调研目标做了部分调整和优化，而线上问卷最后两个选项以问答题的形式向被调研用户提供了对莫奈各方面建议的反馈渠道，通过问答项我们收集到用户反馈的各类问题80多条，我们采用亲和图对这些反馈做整理，亲和图顾名思义，它可以使具有类似特征和关联属性的问题更加临近，从而将零散的问题被归类，方便从杂乱的问题中找到规律，并通过比较不同类型问题的占比，更直观的了解用户反馈的问题主要集中在那些方向。
如下图所示，产品的反应速度及稳定性、模板和组件丰富度是用户反馈问题最集中的两项，前者影响用户最基础的使用体验，后者决定产品能多大程度上便捷的服务用户。良好的稳定性和反应速度可以让用户专注于任务本身，而使用模板能最快速的产出作品，降低新手的使用门槛，丰富的组件能够满足用户在各类复杂场景下的业务需求，减少组件二开成本，提高交付效率。针对这两个大的问题点，首先，对于那些能够在当前产品日常迭代中优化的点，我整理后会以需求的方式向产品团队提出，并在日常迭代中逐步优化；然后，对于那些需要“伤筋动骨”做底层优化以及长期运营沉淀才能有效改善的问题，我们会进一步向用户收集和完善相关信息，并将相关问题梳理到本次改版任务中，做系统的解决和处理。
在【05、体验痛点分析-用户调研部分】已经介绍了本次参与访谈的用户来源，但在实际执行时，我们也邀请了部分在线上问卷反馈中描述模糊不清、难以理解，需要面对面交流或者演示才能理解的问题的用户。
访谈先通过与用户简短的沟通了解用户的岗位/职业以及使用莫奈的主要场景、频次、设备等，然后通过给用户设置一到两个简单的任务，观察用户在完成任务过程中的行为、表情、语气等，以了解莫奈在一些典型使用场景下的易用性及可用性。比如，对于视觉设计师：请在画布中添加一个条形图，并将条形图的颜色修改为绿色、激活纵轴辅助线、修改辅助线为虚线样式....; 对于开发工程师：请在画布中添加一个环形图，并使用json为环形图添加一组动态数据....。之后，在用户完成基础任务后，我们还会针对用户关心的问题进行更细致的沟通，了解用户更细致的反馈。对于用户反馈的问题，我们整理后会在公司内部的需求及研发管理系统“行云”中以需求的方式提交给产品团队并同步添加反馈问题的用户为该需求的关注者，后续，当该需求的状态有任何更新时，问题反馈者都能及时收到更新。如此，受访者反馈的问题从需求提交到需求最终提测验收，都能在线跟踪并闭环。这样做既是我们团队的责任，也可以增进用户对莫奈的信任，并期望活跃用户后续能继续为莫奈提供建议和反馈。
通过线上问卷调研及线下访谈，我们已充分了解了用户心声，接下来我们通过用户体验5要素模型，将各类问题进一步归纳并按照产品建设的上下游协作关系，把每一个具体的问题汇总给对应的角色，并由对应的角色产出具体的解决方案，然后通过线下会议同步各自方案并对方案进行评审和沟通，由此，关于体验升级的所有事项及具体任务便可周密安排，之后便是资源投入、推进升级工作具体执行。
用户体验5要素模型，从产品的战略层出发，层层递进直到表现层，把影响用户体验最根本的因素分层并可视化，借助这一模型可以让大家对“用户体验”这个概念有更好的理解，并能促成大家在更大的层面上达成共识。以往谈到用户体验，大家首先想到的是界面是否好看、交互是否流畅，然而一些对用户体验也有着重要影响但“不可见、不直观”的因素却往往被忽视，尤其对开发侧同学更是如此，他们鲜有意识到产品的目标、内容以及性能等这类的因素，也是构成用户体验的重要部分。对于莫奈这样一款长期维护持续迭代的产品来说，好的用户体验并不能以“毕其功于一役”的方式来实现，而是要通过持续不断的改进和优化才能持续满足并提升用户体验，所以借助用户体验5要素等模型，我们引导产品及研发团队更好的理解用户体验，这样不仅能帮助设计师在本次体验升级改版工作中与大家高效协作，也非常益于之后日常产品迭代的沟通与协作。
上一步，我们通过用户体验金字塔将体验问题汇总并划分给了不同的角色，之后各个负责人产出解决方案并与大家评审和沟通，而体验升级方向正是基于大家对各类方案一致沟通后达成的共识和结果，体验升级方向以设计为主导，同时兼顾产品和研发的部分目标，我们用5个短句将五个升级方向概括，每个方向尽量解决一个维度的问题，比如“界面视觉质量提升”解决表现层的问题、“信息层级优化”解决框架层的问题。体验升级方向作为对体验升级结果的导向，将指导后续设计动作的展开。
基于体验升级方向，接下来就要制定具体的设计策略，来实现体验升级方向中要达成的结果。设计策略制定第一步先确定设计目标，我们将设计目标拆解为三个方向，每个方向通过两个关键词定义。设计目标主要分为视角与交互两个方向，同时兼顾产品侧“易拓展、易维护”的需求。实际设计中，视觉与交互并非独自分开进行，在设计开始的阶段，需要先定义设计风格等基础设计要素，之后视觉便可在此基础之上全面展开，此时视觉设计要考虑交互的效果，交互设计也需要斟酌设计的展现。
对于设计目标中关键词所代表的那些抽象概念，每个人的认知可能都不一样，但是搜索引擎和大数据推荐的算法，可以告诉我们普通大众对那些关键词所表现出来的意象是如何认知的，之后我们便可从符合大家普遍认知的视觉素材中，提取出符合关键词所表达出的意象的设计要素，之后通过在设计中应用这些设计要素，就能把关键词定义的抽象的设计概念转化为具象的认知，我把这个过程称之为“抽象概念的可视化”。而“情绪版”是我完成上述工作的主要工具。
我们使用搜索引擎以及AI推荐的关联算法，针对“科技和高效”这两个视觉目标的关键词收集了海量的音视频设计素材，把这些素材集合在一个画布上形成“情绪版”，然后通过归纳这些素材共有的特点/要素，就能将体现“科技、高效”这两个概念的所有设计要素剥离出来，并通过简洁的文字加以描述和归纳。此后，我们通过在视觉设计执行的过程中应用这些设计要素，通过合理的搭配和组织，将这些设计要素融入到莫奈新的设计语言，如此，产品最终便可在视觉上呈现出与视觉目标关键词定义的一致的视觉和心理感受。
基于情绪版提炼出的设计要素其实已经足够具体，但是如何将这些要素应用在设计中，我们还需要进一步归纳。我个人一直以来习惯从形、色、字、质、构、动、音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动画
针对视觉层面设计优化后，接下来针对莫奈典型的用户使用场景以及之前线上问卷、线下访谈中用户反馈问题比较集中的一些场景进行交互层面的优化，我们交互优化的目标是“简单、流畅”。
首先进行交互优化的是各类图表的属性及配置项设置相关的交互优化。莫奈作为一款可视化场景搭建平台，为用户提供了各类型的图表，每个图表均具有“样式、数据、交互”三大类配置属性，这三大属性，从图表看起来是什么样、图表展现了什么数据、图表可以与用户进行那些互动三个维度解决了图表在数据可视化呈现中最基础的需求。由于图表在数据可视化呈现中频繁使用，所以与图表配置相关的操作自然也是相当高频和常用。当前版本下，图表配置项主要问题有两个：一个是图表配置项层级过深，用户需多次点击才能对某一内容进行修改；第二是批量对多个图表的相同属性进行修改在当前版本不可用，导致用户图表配置成本高。针对用户最关心最影响体验的两个交互问题，我的优化方案如下。
要解决问题，首先要知道问题从何而来。经过深入与产品、研发同学及部分用户访谈沟通后，我发现当前导致图表配置项层级过深主要有两个原因，分别是产品规划与设计展现。
具体来讲，产品层面有三个问题：
01、产品对于当前图表配置项的结构梳理是以程序的逻辑来呈现，而非以用户的视角来归纳。举个栗子，在当前版本如果用户要修改柱状图某个柱子的颜色，操作路劲如下：样式>数据系列>系列名称>形状设置>颜色设置。而这一路径为何如此设计？因为颜色这个属性的后端代码就是这样的结构。这一路劲把用户最易理解、最直观的属性名放到了路劲的末位，而在它之前呈现的内容、名词其实都有一定的理解难度，尤其对于新手更是如此！用户想要更改颜色，Ta首先需要知道什么是数据系列、其次还要了解形状设置可能包含哪些属性等，正因具有一定的门槛且不直观，所以用户初次进行上述设置时往往需要在样式一级菜单下点击多个属性、反复尝试确认，才能最终完成颜色修改的设置，这样一个使用的流程自然会给用户“层级过深”的感受
02、图表配置结构存在冗余、不够精简。还是上面那个栗子，用户修改颜色需要触达第5级。但是这种细致的分层分级的结构设计是必要的么？答案是并不是！因为只有用户关注的才是有用的，产品应该提供用户想要的内容而不是强塞给用户产品具有的所有的功能，所以我们没有必要把图表在后端具有的所有属性都罗列出来，适当的对配置项做些精简，合并一些同类的属性、然后通过“更多”按钮隐藏一些对图表呈现无关紧要的内容，如此，图表配置项便能瘦身，用户使用起来也更轻松。
03、图表配置项的各个属性，在属性列表的排序没有遵循用户使用的频次和习惯。排列在前面的属性并非用户最常用的那些，因此用户要在列表中从上而下的“翻找”，这种使用过程中的顿挫感，一方面影响了用户使用产品的效率，另一方面也加深了用户“层级过深”的感受。
知道了问题从何而来，那么解决问题便也变的简单。首先，我们联合产品经理，对莫奈已有的60多个各类图表组件，逐个进行了配置项的梳理，当所有图表的配置项都以思维导图的形式呈现时，他们的共同点、同类项便一目了然。此时，之前存在的“图表配置结构存在冗余、不够精简”的问题便可解决。而对于先前存在的01与03问题点，在上述梳理工作完成后有了一定的优化和改善空间，但仍然存在一些不确定的因素影响设计和产品的决策。比如、“属性列表中，哪些属性是用户最常用的”，类似这样的问题我们通过访谈几个用户并不能得到可靠的结论，对此，一方面我们通过为配置项区域增加数据埋点，分析用户对各个配置项使用的频次来为后续的持续优化提供决策支持，另一方面我们也参考、调研了同类产品中一些用户量较大、设计质量较高的产品来进行当前有限的优化。
配置项层级过深的另一个原因，是属性配置列表的结构及布局设计存在“深层级、空间利用率底”的特点。
如下图，左侧图片示意了旧版莫奈的配置列表设计结构。可以看到旧版设计完全采用树结构的形式将各项自上而下排列，并且采用每级向右缩进一个字符的形式来做层级的区分，旧版的设计基准尺寸为1440PX，属性配置栏本身较窄，而逐级缩进的策略更是导致信息展示困难；其次，树状的结构在展开层级较多时，部分一级属性会被挤到一屏之外，用户需要频繁滚动鼠标滚轮才能看全信息，综上，旧的设计策略也给了用户“层级深”的直观感受和交互体验。
新版设计首先增加了配置属性栏的宽度，让其能够在横向上展示更多信息；其次，新版设计，将提炼后的一级属性标签固定在属性配置列表左侧。相较于之前，这样的设计始终能够让用户清晰的看到所有一级属性，用户可以随时在各类属性中切换，并且右侧属性内容的滚动也不会影响一级属性的位置，如此就给了用户很好的全局观和使用的便利性与确定性。最后，新版设计采用分隔线与色块结合的方式来表达属性列表内的层级关系，去掉逐级缩进后，配置列表在视觉上更加整齐一致、且空间利用率也有了进一步的提升。
在数据可视化场景搭建过程中，用户对多个图表的相同属性进行统一修改、一次性调整的需求非常迫切和刚需。比如当前可视化大屏中有N个图表，此时，用户想要将其中6个图表的横轴颜色调整为相同的绿色，在用户的视角下，此时的操作应该是先选中6个想要调整的图表，然后找到横轴颜色设置项，之后统一调整色彩。但莫奈当前的版本，如果用户按照上述流程操作，看到的将是下图左侧的示例：图表多选之后，对齐、坐标等基础项仍然可用，而与属性相关的其它设置并没有被聚合并呈现，在此情况下，用户想要完成最初的目标就只能6个图表逐个依次调整！显然，这样的操作并不符合用户预期，它使用户的操作效率大大降低。
上述问题是一个体验相关的问题，同时也是一个强技术相关的问题，我们想要让多个图表的同类项聚合显示，首先要能在底层对各个图表的配置项有十分清晰的梳理，好在我们解决第一个问题：“配置项层级过深”时，已经完成了对60多个图表的细致分析，有了这项工作的基础，当前面临的问题便不那么棘手。如右侧示例：当用户多选图表时，图表的同类项会被聚合，并以用户视角的理解，将属性类别进行分类，这样的分类打破了传统的按照图表固有属性排列的惯例，而是把图表固有属性整合归纳到用户易于理解的类目下，如此，用户多选图表之后便能够便捷的对图表的各类属性进行统一的调整和修改，而这样的操作是符合用户习惯和预期的。
新建大屏作为创建数据可视化场景的第一步，它的易用与否直接给了用户最直观的对莫奈的第一感受。对于新建大屏的交互优化主要有三个方面：创建流程、模板预览与模板展示。
创建流程优化：首先，旧版的创建流程：新建可视化>选择模板>大屏命名>创建成功。 这一流程中“大屏命名”是没有必要的，因为用户在新建可视化大屏时可能存在多种需求的可能性，也许用户只是想看看创建完成后内部编辑器是什么样，或许用户有实际项目，但当前项目名称也并未确认，所以在此时添加一个不可跳过的步骤着实让人不爽，况且大屏创建成功之后在多个位置有多种方式都能便捷的修改大屏名称，因此，更快速的进入编辑器开始设计创作才是用户创建可视化最根本的目标，所以，拿掉“命名流程”，显然可以让整个交互的过程更加流畅。
模板预览与模板展示优化：原有的设计，当用户点击创建大屏按钮后，会在页面底部拉起一个小的抽屉，抽屉内包含一个空白模板以及有限多个其它内容模板，而在如此狭小的区域展示这么多内容，不管是从交互效率还是视觉效果上看，都显得格外的拘谨和难受。新的设计首先是全屏铺开，尽可能充分的利用页面空间。
在模板展示及预览方面，我设计了列表展示与缩略图分布展示两种方式，并添加了分类标签和搜索按钮，此外还联合产品增加了模板收藏功能，这样用户可以把自己喜欢的、常用的模板收藏，方便之后更快速的使用
模板预览方面，在两种布局模式下，用户鼠标滑过模板缩略图时，模板均会以较大的视图动态呈现模板内容。在列表模式下，模板预览窗口固定在页面右侧区域；缩略图分布的模式下，预览窗口根据鼠标指针的位置激活。当用户选中某个模板时，点击底部创建按钮即刻进入大屏编辑器界面，此时用户便可基于模板内容进一步完成自己的定制化设计。
如今移动端各类产品已经给用户养成了算法推荐+自主搜索的产品使用习惯，这种习惯当前也逐步从移动端往PC端转化。搜索能从海量信息中最快速的找到用户关心的内容，因而提高搜索功能的易用性，能明显提高用户使用莫奈的效率。
以往的搜索功能按照不同模块和场景分布在不同位置，用户需要先找到对应模块才能进行搜索，降低了搜索的便捷性和易用性。新的设计在保留之前搜索能力的基础上，新增全局搜索，用户在一个位置即可完成对组件（优先展示当前画板内组件）、属性、帮助等内容的搜索和查找，进一步提升搜索的效率。
一个数据可视化场景，通常是由N个数据图表与其它数据要素一起构成的多个页面来呈现和展示的。这些页面内包含大量的元素，而对这些元素的管理主要通过大屏编辑器页面左侧的图层管理面板来实现。一般我们对图层管理的手段主要有三种：命名、分组和查找。
给组件命名是一个耗时且麻烦的行为，我们在做用户调研时发现，大部分用户都没有给组件规范命名的习惯，大多数情况下，组件在图层面板列表内都是以默认名称或者默认名称+1、2、3的形式存在。这导致了当页面组件较多时，通过组件命名来查找组件其实相当困难，所以自动生成缩略图的形式相比让用户耗费大量时间为图层命名更能改善用户体验。缩略图以快照方式保存当前组件最新状态截图，从而帮助用户更快速的将图层组件与页面上的内容对应起来。
新的设计，图层成组后也取消了缩进字符的效果，我采用给成组对象设计更明显的分组示意图标以及为组内列表添加深色色块的方式，完成了成组对象与列表内其他要素区分的需求，新的设计使成组对象更易查找和识别。
此外，我们还增加了对图层列表的搜索功能，帮助用户快速定位名称已知的设计元素。
此次体验升级是设计主导推动，产品与研发紧密配合的结果。体验设计师作为最接近用户的群体，是产品与用户沟通的桥梁。时刻关注用户心声，并能将用户细碎的吐槽和各类反馈转化为体验痛点、制定对应的优化策略是体验设计师的基本功。而对于设计和产品本身是否热爱，也是设计能否不断精进、体验是否能够不断提升的关键。好的设计不仅服务了产品、帮助了用户、同时也成就了设计师本身。
本人为莫奈提供设计支持的三年多时间，在没有KPI要求和外部压力的情况下，通过公司内部需求管理系统“行云”，为莫奈提交231个体验优化建议；以线下线上的形式面向莫奈产品及研发团队进行了20多次专业分享。正是日常这些积极主动且持续的努力，使我本人与莫奈产品团队建立了非常友好紧密的联系，这也为推动本次体验升级改版提供了巨大的助力。我认为作为体验设计师，我们不仅要对用户有同理心，为用户创造愉悦舒适的感受，同时也要对身边的同事、职场中的合作伙伴有相似的同理心和换位思考的意识，体验关乎人、环境与生活，尝试在生活中磨炼自己创造好的体验的能力，并将其应用到体验设计师的职业工作中，我相信，倘若如此实践，必能在职业和生活中都获得有不错的成就。
好的产品，必然是持续关注用户诉求，不断迭代发展的产品，好的体验设计也必然是陪伴产品不断优化、持续精进的设计，复盘的意义不仅是沉淀过去的经验，更是为未来更好的体验蓄能。
此次分享如能为大家带来那怕一点点的启发，本人便倍感荣幸、开心至极！ 期望大家能够与我有更多交流，么么哒~~
作者：BYMD 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
相信每一个设计师，在工作中或多或少都做过一些竞品分析的工作，正所谓知彼知己百战不殆，做竞品分析可以帮助我们快速了解竞对产品的优劣和核心竞争力。目前网上的很多竞品分析主要都做的大而空，好多都是偏行业分析，对于设计师而言，看完之后无法得到有用的信息，对于产品本身的设计体验而言，帮助意义不大。
在开展竞品分析之前应该想清楚两件事，弄清楚自家产品的基本情况，如产品定位，基本功能，目标用户等，另外要确定分析的目的是什么，最终要拿到什么成果赋能产品。如果想要提高用户活跃度，那就围绕竞争对手拉新促活方案进行研究；如果是要优化产品的用户体验，那就围绕影响用户体验的交互流程及功能操作去研究。
产品发展的阶段不一样竞品分析的目的也会不一样，可结合互联网产品发展周期辅助确定分析目标。一般产品引入阶段，功能架构还没有完全确定，需要了解市场行业现状、目标客户特点、商业模式、盈利模式等，从而更好为为后期发展指明方向；而产品成长阶段，需要占领用户心智及市场份额，所以要分析了解竞争对手的产品功能、推广路径、营销策略、体验设计等，优化核心功能及经营策略，实现用户增长及促活。 产品成熟期要考虑怎样维护市场份额，怎样跟竞品拉开距离，怎样创收增效，需要及时了解竞对产品的动向及用户经营数据。结合产品发展的阶段性目标及业务产品部门的相关规划才能更好地确定出比较有价值的分析目标。
选择竞品先要明确产品所在行业和细分领域、产品属性、用户群体，找竞品时需要找这些元素相同或者相似的产品。基本原则是选择行业第一梯队中，1.产品的定位及目标人群比较明确且有重合性，2.是否稳定且迭代成熟，3.是否具有独特亮点有参考价值。
直接竞品：功能和用户群体基本一致，有直接的竞争关系，可以考虑借鉴相似的功能设计。
间接竞品：产品用户相同属性相似，但是功能需求匹配度不是特别高，在细分的领域中做的比较优秀，在运营策略、操作流程、视觉设计等方面有借鉴参考的价值。
标杆竞品：目前互联网同类的产品同质化情况相对比较严重，如果只对直接竞品、间接竞品进行分析，忽略当下比较热门、比较具有先进性的产品，有可能会缺乏创新性，所以需要在用户重合度或者产品属性、营销策略等方面做得优秀的产品中选择1-2个作为标杆产品进行分析。将其优秀的部分深入转化应用到自家的产品中。
通过七麦数据、IT桔子、易观分析、比达网等第三方平台，找到类别排行榜，艾瑞网等可以查询相应的行业报告，有利于分析产品目标及功能范围。另外，如果是移动端APP，可以通过应用商店进行搜索。
七麦数据：https://www.qimai.cn/
IT桔子：https://www.itjuzi.com/
易观分析：https://www.analysys.cn/
比达网：http://www.bigdata-research.cn/
艾瑞网：https://report.iresearch.cn/
竞品分析的目的不一样侧重点不一样，但用户体验五要素给我们提供了一种通用的分析思路，从五个层次去逐步分析。但实际分析过程中还是会根据分析者的身份，产出不同，侧重点不一样。
了解竞品的产品定位，产品目标，目标，多平台等方面。做这些分析的主要目的是确定自家产品定位，产产品定位包括产品定义及用户需求：产品定义包括使用群体/主要功能和产品特色，使用群体帮你明确产品的主要为谁服务，所有的功能/内容/设计风格的设定都是围绕这类群体来进行的，主要功能划定了功能的范围和限制，产品特色使产品有别于同类的竞争对手。用户需求包括目标用户/使用场景和用户目标，一个用户需求可以看作是“目标用户”在“使用场景”下的“用户目标”，在做某一个功能的竞品分析时，需要对比分析真实场景下产品怎么解决用户的问题。相对而言产品经理会作战略层的深度分析，作为设计师需要明确这方面的内容，但在竞品分析阶段不用深究，需要重点分析的还是结构层，框架层和表现层。
我们需要思考的是产品需要什么功能实现产品需求，需要分析相同业务和场景下竞品的功能，例如同为电商产品，竞品在购物场景下的基础功能及衍生功能，相同的功能竞品的特点及优势。在竞品功能进行梳理时，可以通过表格对比功能有无，这样可以清晰地看到不同竞品之间的差异。功能对比并不是简单的功能罗列，要进一步思考功能设定背后的原因，可以从用户对功能的依赖程度/使用频率以及公司为实现这一功能要付出的成本，结合自身产品定位老考量自己的产品是否也需要这个功能，从而明确分析主要功能及次要功能进行分析
产品的整体架构包括功能结构/信息架构分析，首先需要理解什么是信息架构，很多人将思维导图理解为信息架构，其实思维导图只是信息架构的一种表现形式 。而功能结构是指功能的阐述，一般是动词+名词。功能结构则更侧重整体逻辑，各个功能之间独立或者关联关系，明确主要功能次要功能。功能结构就是按照功能的逻辑性及用户的操作习惯组织起来，更适合用流程图来梳理，通过优化功能与用户的每个触点优化体验。信息架构中信息指的是内容的载体，常见的文字、图像等都是信息；架构的含义则形容对应的组织和结构。信息架构就是将信息通过一定的形式组织起来，然后呈现出来。从本质上讲是信息的表达和传递，从而降低认知成本，提升使用效率。良好的信息架构是高效用户体验的基础，分析竞品的信息架构是分析竞品分类组织逻辑。随着互联网产品的同质化，其实竞品的很多功能都相似，但信息的组织往往会有所不同。相对而言资讯类，信息类产品需要着重对比信息架构。
任务流程分析，界面设计、导航设计、信息设计，页面的布局内容信息，页面之间的跳转方式，页面内部的交互逻辑等方面，工具类的产品如出行/外卖/购物等用户有明确目的的，这类产品需要着重对比竞品间任务流程的差异，从而寻找哪些步骤可以优化，哪些步骤可以借鉴。
在这个过程中输出使用体验即用户在使用过程中的整体感受，包含用户操作过程中的效率，对信息的呈现和布局的理解。是否存在干扰信息导致用户认知和操作出错，使用起来是否存在压力的情况，简单来说包括：操作效率/信息布局/使用成本/信息干扰/等
而交互体验更加具象，需要在使用反馈/防错/可见性/一致性/流畅度等细节方面需找设计的差异点和亮点。
最容易被用户直观感受的层面，可以从视觉风格，配色，图形，排版布局，情感化设计，动效等方面和竞品进行详细的分析对比，竞品分析并不是罗列细节，而是需要分析出操作体验的优劣，以及这样设计的原因。
产品概况、功能、流程和交互等方面进行全方位的分析后，还有非常重要的一步，即给出结论，且这才是最重要的，结论将其复用到我们产品中，这也是竞品分析的意义所在。在做最终的分析报告时不要只做分析没有结论。任何一个功能点都可以思考出一个结论，竞品为什么这么做，那我可以模仿或超越吗？或是我觉得不好，那么我改怎么避免；不要只有结论没有权威的分析过程。在任何分析中带着主观性的结论是最不好的，有时候会误导大家，所以得出的结论的因果条件要是合理的，分清楚充分条件和必要条件，写明这个结论的必然原因以及分析过程和可能的原因等；要带着目的性的去做分析，避免作数据及内容的拼凑。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
随着技术及经济的发展，人们对计算机系统、机器等的要求，从单纯的「 可以用 」逐渐变为想要「 更好用、容易用、用得舒服 」等更加丰富的使用体验，也就是常听到的好的「 用户体验 」。
「 用户体验（User Experience ）」这个概念，最早由唐纳德·诺曼（Donald Arthur Norman）提出，他希望用这个词，来涵盖个人使用系统时的体验、各个方面的体验 ，包括工业设计图形、交互界面、物理交互，以及与人的交互。
而「 用户体验 」产生的基础，是「 用户使用了机器 」，即人跟机器有发生接触、交流、互动等，然后用户会形成主观上的体会、感受。这里的「 机器 」泛指各种「 产品 」，类比诺曼所说的，即物理界面、虚拟界面、系统、硬件等。
因此，好的「 用户体验 」是基于好的交互设计。而对交互设计「 好/坏 」的影响因素，涉及到人、产品、使用环境这三者，也就是人机工程的内容。
概括一下百科对「 人机工程学 」的解释：
将 「 使用物的人 」和 「 设计的物 」以及 「 人与物共处的环境 」作为一个系统来研究（人-机-环境系统）。在人、机、环境这三个要素 本身特性 的基础上，科学地利用三个要素间的 有机联系，来寻求系统的 最佳参数。
其中关于人的「 本身特性 」包括人体结构和机能特性。主要有人体各部位的尺寸、重量、面积、活动、相互关系等，眼耳鼻舌身对应的视、听、嗅、味、触觉，以及动作习惯和认知。这部分大愚认为可以把「 结构特性 」当作人的硬件，具有一定的普遍/通用性；而「 认知 」则是人的软件，个体间存在一定差异。
然后，就到了这篇文章的主要内容，人的「 结构特性 」部分。
注：下文中提及的人体结构特征是基于大部分人的情况描述，内容也是围绕人机交互有关的方面，不是人体结构特征的全面介绍。
人体结构中对人机交互产生影响的主要有眼、耳、身（皮肤）对应的：视觉、听觉、触觉，以及四肢、颈椎的尺寸、受力情况和活动幅度等。下文将对这四部分的基础内容进行整理，还有聊聊一些交互、体验设计上的应用。
人与周围环境发生联系的感觉通道，最重要的就是「 视觉 」，约占80%的信息是通过视觉来获得。因此「 视觉显示 」是人机交互系统中用的最广泛的一种形式。
人眼正常感受光谱的波长约在400nm-780nm之间（大概这个范围，网上相关资料关于这个数值存在微小差异），对应的色相是紫色-深红色，也就是常说的彩虹色。
而负责感受光的细胞是视锥细胞和视杆细胞。
视锥细胞，约占95%，复杂感受强光及有颜色（彩色）的视觉，在环境光线亮时起作用，用来区分色彩。研究数据表明视锥细胞对光谱中波长为555nm的「 黄绿色 」部分最敏感。
视杆细胞 ，约占5%，复杂感受弱光及没有颜色（黑白）的视觉，在环境光线暗时起作用，用来区分黑白。研究数据表明视杆细胞对光谱中波长为507nm的「 青绿色 」部分最敏感，对极弱的光刺激敏感。
如果涉及一些特定的工作环境（昏暗）的应用设计时，就可以考虑下此时作用细胞的特性，进行合理的设计设置。
正常情况下，瞳孔会根据环境中的光量来调整大小。当有光线较强时，瞳孔会收缩变窄；当光线很暗时，瞳孔会膨胀来让更多的光进入眼球。
可以把这个理解为一个保护机制，在强光下，通过收缩来减少光对眼睛的高强度刺激；而弱光下，对感光细胞刺激不足，为了不让眼睛过分费力地去寻找目标和识别目标而引起视觉疲劳，所以瞳孔会放大，让更多的光进入。
而接收光的刺激，看到物体后，是否可以准确获取信息（看清物体、识别文本、图像等）则跟视敏度相关。
视敏度 ，就是眼睛能分辨物体细微结构的能力，也就是看清物体的能力。相关实验数据表明，增强亮度可以提高视敏度。也就是说，亮度越强，人眼对物体的识别能力就越强。
下面提到两个实验，其中「 正对比极性 」，指在浅色背景上显示深色字体文本，就是对应我们界面设计中的「 浅色模式 」；而「 负对比极性 」，指在深色背景上显示浅色字体文本，即「 深色/暗黑模式 」。
实验1. 德国杜塞尔多夫精神病研究所的Cosima Piepenbrock等相关人员，对「对比极性对视敏度和校对的影响」的研究结果表明：人眼在「浅色模式」下的视敏度要优于「暗黑模式」下，字体越小，浅色模式的优势就更明显。
实验2. Agelab实验室的乔纳森·多布雷斯（Jonathan Dobres）等相关人员，对「 环境光照条件（模拟白天/夜间）是否影响正对比度极性的优势」的研究表明：夜间，深色模式下阅读小字体文本比浅色模式下阅读要困难得多。 而人们对文本的识别，「浅色模式」下比在「深色模式「要快，白天比晚上更快。
对上面两个实验可以用环境光的强弱对视敏度的影响来理解：为方便理解，可以假设我们的界面尺寸足够大，大到覆盖我们视野范围，那就可以将浅色模式中的浅色背景类比为白天（环境光度亮），深色模式中的深色类比为夜间（环境光度弱），而屏幕内的文本、信息，就是我们要识别的物体。亮度越强，人眼对物体的识别能力（视敏度）就越强。
从上面的实验来看，无论在白天或夜间环境下，「 浅色模式 」都要比「 深色模式 」更好用。
但根据德国蒂宾根大学的Andrea Aleman等相关人员的一项研究表明，长时间处于「浅色模式」下可能会导致近视。其表现为，阅读「浅色模式」下的文本时，脉络膜（跟近视有关的一层膜）会明显变薄；而阅读「深色模式」下的文本时，这层膜明显变厚。
可以理解为长时间处于「浅色模式」下，意味着视敏度的持续维持在较高状态，就像人在长时间高强度工作下可能会导致健康受损一样，眼睛同样也可能会受到损伤。因此相对长期来说，「深色模式」则是更友好的一种形式。
那通过适当的设计，是否有可能找到这两者之间的最优解呢？
注视区域光照不足、光线过强、光线分布不均匀、光源闪烁、眩光、反光、目标过小、目标不稳定等，都会造成眼睛超负荷工作，导致视觉疲劳。
光照不足，对应界面交互，可以指屏幕亮度过低，也可以理解为内容和深色背景间的对比度不足。
光线过强，则是屏幕亮度过高，也可以理解为内容和浅色背景间的对比度不足。还有大面积高明度色彩的使用。而像汽车远光灯，也是常见的一种光线过强的产品，并且常常被错误使用。
闪烁，会对眼睛造成很大的负荷。在高亮度下，眼睛除了视敏度会增强外，对闪烁的感知也会增强。这方面涉及的产品设计，如显示器的刷新频率，要到达某一程度，人眼才感觉不到屏幕的闪烁。
目标过小，在可识别及相同环境下，目标过小，识别所需的时间越长，也就是更费眼。像界面中的元素，文本字号、图标等，都需要有舒服的可读性。
反光，跟工业产品设计的关系比较密，反光是很容易引起视觉疲劳的和视力伤害。但生活中好像处处有反光，高楼大厦连片的镜面窗户/墙、我们正在看的电脑屏幕、手机屏幕、公交车广告牌的保护罩、汽车的后视镜等等，都会在某些瞬间让你觉得眼睛受到了亿点伤害，这也是很常见的一种光污染。
水平方向上，双眼视野角度通常可达到120°视角。其中「 有效视域 」为30°，即人眼能立刻看清物体的存在和动作轨迹的范围。其余部分称为诱导视野，也就常说的「 余光 」。
而眼动（头部不动）「 舒适转动区 」通常为60°。
如果以眼睛距离屏幕40cm为例，水平最佳视野宽度大概就是21.6cm，在72dpi下，约为600px。在进行文本宽度设定时，可以以此作为依据，来设计内容的显示宽度。
垂直方向上，视野角度通常可达到135°视角，「 有效视域 」为30°，「 舒适转动区 」为55°。
关于「 最佳视角范围 」及「 眼动舒适区 」的应用，在汽车领域的HMI设计和一些较为复杂的交互活动中有比较多的体现。
听觉对信息传递的感知仅次于视觉，同视觉一样，利用以前的经验来解释输入。
相比视觉，听觉更容易引起注意，且反应速度快，可以捕捉各个方向的信息，不受照明条件限制。
人类听觉系统对声音的解释可帮助设计人机交互界面中的语音界面，而对有能力缺陷的人，如视障人士来说，「 听觉（语音交互） 」更是一种替代视觉显示的重要形式。
声音有三个要素：音调（频率）、响度（振幅）、音色（材质）。
人类可以听到的声音频率范围为20Hz-20kHz，正常情况下人耳可分辨出约 40多万种 不同的声音。
对语音的辨认频率范围为260Hz-5600Hz。正常情况下，人类语言的频率在：500Hz-3000Hz之间。
感受性、识别性最高的频率范围在1000Hz-4000Hz，低于500Hz，或高于5000Hz时，要达到一定响度才能被听到。
0－20dB，几乎感觉不到
20－40dB，相当于低声说话，轻柔的响声
40－60dB，正常谈话的声音
60－70dB，会感到吵闹、长时间会损害神经细胞
超过70dB，让人感觉烦躁，无法集中注意力
85-90dB，短时间内影响人的听力，破坏神经细胞
超过90dB，听力受损
超过140dB时，引起的是痛觉，而不是听觉，会完全损害听力（欧盟界定的导致听力完全损害的最高临界点）
人耳对各种音色的分辨能力非常强，对经常听到的音色也具有很强的记忆力。
比如在同一频段同时演奏不同的乐器，人耳依然可以分辨出有哪些乐器在进行演奏，也能识别出不同动物的叫声。
而对于熟悉的人，比如对父母兄弟姐妹等，经常只通过说话的声音，就能知道是谁；通过脚步声，也可以辨认出来是谁来了等等。
除了对声音的「 音调、响度、音色 」这三个要素的感知之外，人耳还能辨别出听到的声音是「 从哪里/哪个方向传来的 」，也就是声源方位感。
瑞士的神经科学家通过研究发现：粗糙的声音（上限约为130 Hz）激活了大脑某些特别的区域。
当重复的声音被认为是刺耳的、无法忍受的时候（特别是在40-80Hz之间），会引起持续的反应，刺激杏仁核、海马体和脑岛，特别是跟突出、厌恶和疼痛相关的区域，而正因为有这些区域参与声音的处理，才会使这类声音会让人感觉到难以忍受。
这也是警报声的应用原理，通过快速重复的频率来引起人们的注意。再结合声音传播不受光照、方向、角度等影响的特性，来提高警报声被人耳检测到的概率。
其他让人感到烦躁、难受的声音，如汽车喇叭声、尖叫声、婴儿哭声等等通常也是在这一频段。
视觉上的三维图效果，是眼睛先呈「 散焦状态 」，视焦点前后位移产生层次感，从而看到三维平面图画的立体效果。
而人耳的听觉跟视觉相反，可以从众多的声音中「 聚焦到某一点 」上，也就是听觉的「 聚焦效应 」。
比如我们听交响乐时，大脑皮层可以抑制其它乐器的演奏声，把精力和听力集中到其中的一种乐器声音上。还有在公交地铁上，我们同样可以集中精力听广播报站的声音，而忽略车上的其他喧闹声。
这个特性也让语音交互的场景拥有更多的可能性。
触觉属于动觉交流领域，即通过身体的运动/动作来交流。
跟视觉、听觉的感知相比，「 触觉 」最大不同是它的非局部性（全身皮肤），以人体为介质，对皮肤、肌肉的感受器进行刺激，能够 敏感、强烈和更迅速 的被用户感知，及时传递信息。也 不易受环境影响，无论环境吵杂，或是光线不佳，对其体验效果的影响都不大。
但「 触觉 」传递的信息远少于视觉和听觉，通常作为视觉和听觉反馈的补充。而对有能力缺陷的人，如听障、视障人士来说，「 触觉交互 」的应用则是一种很重要的形式。
同时也是用户体验过程中重要因素之一，会直接影响用户对产品的情感体验与交流。在工业产品设计中感受较多，如日常工作生活中常见的家居用品、鼠标、键盘、手机等的外形设计、材质触感等。
人类的皮肤表面散布着触点，一般指腹最多（人类手指的触觉敏感度是前臂的10倍），其次是头部，最少的是背部和小腿。触点的大小不尽相同，分布不规则。
通过对冷、热、尖锐物体的判断，让身体及时远离危险和伤害，可以对人体起到保护作用。
同时也具有表达情感，辨别情绪的功能。有说法认为「触觉」可能是用来传达人的情感的最佳途径，就像「 拥抱 」和「 安慰的文字/语言 」，体现的情感强度就很不一样。
借助Haptics技术，通过作用力、振动等「 触觉反馈 」，可以起到传递信息的作用。但想通过「 触觉体验 」来传达恰当的、有用的信息，需要先理解人类是如何诠释不同的「触觉体验」的。
比如想要通过「 振动感知 」来传递有用的信息，需要先了解怎样的振动频率、强度、节奏可以让使用者意识到其代表的是什么意思：成功、失败还是其他呢？这涉及到「 认知 」方面的内容。
通常情况下，「 触觉反馈 」是作为视觉、听觉反馈的一种补充。
如在触控屏上用虚拟键盘输入文字时，通过按键的「 振动反馈 」，让用户清晰及时地了解到自己已经成功按下了某一个按键。相关研究的结果也表明：虚拟键盘加入振动反馈后，是可以提升用户输入时的准确度。
而一些特定场景下，「 触觉反馈 」可以很好的替代视觉和听觉反馈。
比如驾驶汽车时，驾驶员需要将大部分的注意力放在道路环境上，那么通过「 触觉反馈 」，将部分操作结果传递给驾驶员，这一可以在一定程度上减轻驾驶员在视觉和听觉上的负担。
人类的动作通常分为三类：先天、模仿、训练得来的。
由于肢体的结构特点，「 先天 」和「 模仿 」的动作，通常存在一定的局限性。
颈椎前屈幅度35-45°，后伸35-45°，左右侧屈各45°，左右旋转各60-80°。
当颈部前倾时，颈椎承受的压力逐渐增大：
前倾0°时，为头部重量，约为4.5-5kg；
前倾15°时，承受压力约为12kg；
前倾30°时，承受压力约为18kg；
前倾45°时，承受压力约为22kg；
前倾60°时，承受压力约为27kg。
结合前面我们讲过的人眼转动的舒适角度和视野范围，可以为一些物品的设计提供参考。
直立，腰伸直自然体位时，腰部可前屈90°、后伸30°、左右侧屈各20-30°、左右旋转各30°。
人体平（仰）卧位时，腰椎承受的压力最小。
膝关节屈膝角度可达120-150°（小腿后部和股后部相贴）。人坐立时，膝关节弯曲90°，小腿和地面垂直放置对腿部最好的，屈膝小于90°时，长时间保持会影响下肢的血液循环。
伸直时一般为0°，有过伸状态5-10°。膝关节屈曲时，有轻微的内旋和外旋运动，约为10°。
肘关节弯曲角度可达140°、过伸角度为0-10°、旋前80-90°、旋后80°-90°。
打字时，手肘弯曲接近90°（水平放置）是最放松的。
掌侧可以外展约70°，指间关节屈曲约90°，掌拇关节屈曲约20-50°。
和手腕连接处的腕掌关节，能够进行较大程度的屈伸，收展，完成对掌运动。这是拇指特有的，是拇指骨外展，屈和旋内运动的总和，使拇指尖能跟其他的手指和掌面接触。
掌指关节屈曲约60-90°，近节指间关节屈曲时约为90°，远节指间关节屈曲时约为60-90°。
在使用手机等数字界面时，用「 食指 」和「 拇指 」进行触控是比较自然和常见的行为。
根据麻省理工对人类触觉的实验，食指、拇指的宽度和触控区域有以下数据：
食指平均宽度约16~20mm、指腹触摸区域尺寸约10~14mm、指尖触摸区域尺寸约8~10mm。
拇指平均宽度约25mm、指腹触摸区域尺寸约12~16mm、指尖触摸区域尺寸约10~12mm。
触控控件的最小尺寸要大于触摸的最小尺寸。控件过小，一方面会增大准确触控的难度，另一方面手指会造成遮挡，导致用户无法明确是否已经正确触摸了相应的控件。
（手指触控这部分本来放在上面关于触觉的内容里，后面想了下，「触觉」更多的是指「反馈信息」层面的作用，所以还会归在肢体动作、范围里比较合适。）
用键盘打字时，在某些瞬间，多数手指只是放在键位上，没有击键行为，因此键盘按键的驱动力需要大于手指重量产生的力，才足以支撑手指。
ANSI 1988 年建议键盘击键的理想压力应该在0.5N-0.6N之间，一般0.25N-1.5N的压力都是可以接受的。
而对于一些特殊的设备按键，比如工业键盘类的，则需要更大的按键驱动力，因为这类产品的工作环境和活动相对复杂，需要更谨慎的操作。
单手对手机等触屏设备进行操作时，一般以四个手指和手掌为依托，用大拇指操作为主，而成年人拇指长度约为6-10cm。
数据表明，一般成年男性，单手全屏操控的屏幕尺寸最大约为4.5英寸，而成年女性，单手操控的极限约为4.0英寸。超过这个尺寸，单手进行全屏操控会有一定困难。
而目前主流的智能手机基本在5英寸以上，根据拇指关节的活动幅度，单手操作时在手掌位置不动的情况下，拇指触及的区域只是很局限的一部分：
以上就是体验设计中涉及人体结构特性的内容部分。
感谢阅读，期待交流。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在上一篇《如何设计高质量B端调研问卷？用户研究方法(一)》一文中，详细介绍了如何通过调研问卷的方式，整理发现用户的浅层需求。
本文将分享另一个更为深层全面的B端用户研究方法——用户访谈。通过面对面地沟通，以及观察用户的表情、行为去挖掘更深层的需求。（文末附模板下载链接）
下面是本次分享的文章结构，标⭐️的为重点部分。
01
用户访谈的两种路径
用户访谈通常可以采用线上会议、电话或者线下面对面交流两种形式。
线上会议和电话访谈的优势显而易见，可以不受地域限制展开调研访谈，整体的成本也比较低，设计师可以自己找领导或者协调资源去推动。
缺点也是比较明显，沟通起来效率低下，比如我们一定有过“电话里说不清，我们见面详谈”的经历。
所以，相较而言线下访谈无疑是最佳的调研形式。首先当面沟通更加高效，其次对于搭载硬件设备的产品来说，让受访者在真实场景里操作演示，可以发现更多隐性问题。
02
常见的3种受访者类型
在访谈过程中通常会接触到以下3种类型的受访用户，不同类型的用户我们应该怎么接触交流呢？
话痨型的受访者占大多数，通常就是想法、意见比较多。他们不仅有一大堆不满意的点要诉说，甚至连对应的解决方案都想好了。
整体接触下来，我觉得该类型的受访者，可提供的有价值信息会更多一点。只不过我们要学会过滤信息。因为他们的修饰用词通常比较多，例如：“太难用”、“超级麻烦”、“哎 我真的是受不了啊”...
访谈话痨型的受访者，我们需要注意无论怎么聊都要紧扣主题，防止变成了吐槽专场。
其次也要表达肯定，安抚情绪，并对问题进行进一步提问：“您的这些建议真的很棒，也给我们提供新的思路，我都记下来了，我还想确认下，刚才您说的3个关于结算环节的问题，哪一个给您造成的困扰最大？”
顾名思义，受访者可能是因为性格内向或害怕说错了不好意思等缘故，在受访过程中问一句答一句，比较容易冷场。答案的价值也比较低，例如：“对，是的”、“还行吧”、“没啥感觉啊”、“反正就这样用用吧”、“说不上来”。
这种情况下要尝试缓解下氛围压力，换个形式沟通：“就是随便聊聊，公司派我们来呢，就是因为非常关注用户的使用感受，想收集一波用户反馈与建议，您有啥不满意的地方都可以跟我讲讲，越多越好。”
其次我们在提问的时候也要带有引导性，例如：“还有呢、然后呢、具体说说呢”，如果对方实在说不出所以然，最有效的办法就是进入上机操作环节，通常操作过程中那些问题也会随之暴露出来。
专业型的受访者一般是老板或者店长、经理岗位的员工，他们对于产品或整个门店乃至行业都了解的比较透彻。
和这样的受访者沟通，不仅是局限于产品的一些问题挖掘，他们会从这个行业的角度阐述一些个人的见解观点，给我们提供一些有价值的优化方案或者改进方向。
例如餐饮的老板其实并不是很关心点餐、结算的流程有多么的顺畅高效，毕竟他们不需要亲自去做这些执行，而且坦率的说，对于绝大部分产品而言，好用并不能成为其核心竞争力。
他们关心的是如何带来更大的商业价值，类似于如何提升坪效，如何提升门店会员的储值能力等等。而这些老板的关注点，也会给我们未来的产品优化方向打开新的思路，去思考如何给我们的用户创造更高的商业价值。
03
我们在做访谈之前，首先一定要熟悉产品业务的相关背景、受访商户的基本情况。
访谈过程中可能会提及一些专业名词，例如餐前餐后模式、明档、一鱼多吃、坪效、估清等等。我们具备了这些基础相关知识以后，省去了不必要的解释环节，可以使访谈推进地更顺利。
其次建议要了解下行业相关的基础知识。尤其是餐饮业态，华南、北方、四川等地都因为饮食习惯的不同，在产品的功能和使用上的需求也是相差很大。具备了这些知识点以后，在提问过程中，也更利于提出一些深刻的问题，而不是浮于表面的提问。
行业相关的分析报告，可以去艾瑞、36氪、发现报告等网站进行查询收集，在此不做赘述。
在访谈初期，需要准备一份访谈框架，但并不意味着我们整个过程只能按提纲来提问。尤其是B端这种千载难逢的访谈机会，只按规定的框架提问属实是太吃亏了。所以在时间允许的情况下，除了框架以内的问题，尽可能多发散的去提问。
例如餐饮业态，会有各种不同载体的终端设备联动使用，一体机POS、手持的POS、厨房KDS、厨显大屏、各类打印机等等都可以顺便了解、调研下，让我们对于全链路的协作流程也会有更深刻的认知。
再例如后厨会涉及到KDS大屏显示，可以问问目前的大屏显示是否够清晰（字够大），也可以和负责海鲜称重的工作人员聊聊，海鲜的售卖、计价流程，以及菜品双单位（例如：1【条】鱼，重量1【公斤】）的使用等等。
在沟通过程中，一定会有一些触类旁通的收获与问题被发现。这些问题也许来自一个模块、或者某个特定角色，又或者是主产品关联的其他后台产品。
在提问的时候要考虑到受访者的年纪和理解能力，如果措辞过于专业，可能会导致受访者理解不到位，因此沟通的过程中要尽可能的说大白话。
我们都知道没有经历过的事，很难感同身受。有时候看到客户群里，因为产品的各种原因导致商户情绪激动，我们理智上非常理解，但是情感上很难共鸣。
因此每次的门店调研，我都会抓住机会观察整个门店的运营情况，去感受那种忙碌的氛围。有时候开始进入营业高峰期，机器出现卡顿或者外卖不接单等情况时，自己的情绪都会一下子紧张起来，也能够深刻感受到产品给客户带来的困扰。
当再次有产品迭代优化时，这些体验总能让自己能更容易代入用户的角度思考问题。
除了去体会产品对情绪的直接影响，还可以关注下整个门店的布局、收银产品的数量与摆放位置、不同产品的协同使用等等。
这些都会帮助我们发现，到底什么是门店运营环节里最重要的模块。
在访谈过程中，不排除受访客户会反馈一些暂时无法解决的问题。这时候一定要告诉受访商户：“您的问题我已经记录下来，回去会针对这个问题反馈上报，最迟X天我会让顾问给您回复的”。
这么做一方面也是细节处维护公司品牌的整体售后体验，其次也有助于我们再次回访时，受访商户乐意花时间跟我们聊。
04
了解了用户访谈的一些基本信息和注意点以后，到了本文核心部分，关于整个访谈的推进过程，一共分为3个阶段。
首先明确访谈的类型，用户访谈的类型主要分为以下三种，最常见的就是第三种类产品使用回访。
新品调研的访谈，一般是由于业务的发展，可能需要升级或者打磨一款新产品来满足市场的需求。
在访谈的过程中，我们需要关注的点就是用户画像、商户诉求、使用场景、终端载体等一系列因素。
当去往一个城市进行批量客户调研的时候，偶尔会有拜访潜在客户的调研机会。这种类型访问的关注点集中在商户的痛点与需求上。
由于是潜在客户，我们势必是要了解他们想要购买或者替换产品的前因后果。也是借此机会了解到竞对的优劣势，他们放弃竞对的原因，以及我们当前产品的功能是否满足客户的需求，还有哪些点不满足，客户重点关注的是什么。
使用回访是最常见的访问类型，主要目的是对商户进行售后维护、提升使用体验。
且由于B端产品的复杂性和远距离特点，以及新功能同步给商户存在的滞后性，公司会安排定期的上门回访。如果有这样的机会，UED一定要尽量申请跟着去门店调研。
到了最关键的一步，就是关于访谈的问题设计。
总结一下，问题的设计渠道来源主要有3种。主要还是根据调研目标进行问题设计，另外两种方式，作为辅助。
那具体问题应该怎么设计，这边我们分为3个步骤，从面到点依次拆解进行问题设计。
B端产品的特点可以借用《U一点料》的9个字概括，“多场景、全链路、多角色”，所以设计问题前，我们可以从场景+链路+角色/节点功能的维度来设计问题。
以餐饮行业的产品举例，首先建议了解自家产品的全场景业务能力。即从商家端到消费端会经历的产品模块和具备的现有功能，做到心中有数即可，毕竟不会一下子调研这么多模块和功能。
其他ToB产品同理，可根据某个操作链路为主线，确定主流程后进行问题设计。其实就可以理解为确定调研的目标。例如下图要调研的主流程，就是提取点餐>下单>结算为主线。
根据刚才确定的主流程 我们找到所有关键节点进行问题框架设计。
以上3个步骤可以理解为，如何在功能极其复杂的B类产品当中，筛选出与访谈目标紧密相连的功能链路。避免我们的访谈提纲做的过于冗余没有核心。
这点也非常重要，每一次去门店调研之前，先由当地负责的顾问与受访商户提前沟通。
一方面是需要与对方预约时间，另外一方面这种访谈对商户而言就相当于优质的售后服务，会有受访商户提前列框架，准备问题。
那么这种情况更有利于调研，因为受访者明确自己的问题点在哪里，就等着调研团队（售后团队）来门店后，好好拉扯一番。
万事具备，只欠东风。我们再盘点确认下本次访谈的各类工具是否备齐，准备进入访谈阶段，大致需要准备的东西是以下4种材料工具。
在了解了受访者类型、采访者需要注意的点，以及带着我们设计好的问题，下面正式进入访谈阶段。
到达门店后，我们的顾问会给受访客户做一下来访成员介绍，并讲明此次到店的目的。一般都是产品使用回访，或者新功能推荐培训。
通常来说，受访商户对来访团队总是有很多”心里话“想唠一唠，因此暖场氛围比较容易起来，也有助于我们接下来的沟通
进入正题以后，我们会先大致了解下受访者最近使用的体验以及遇到的问题，而后会根据问题框架进行提问。在整个过程中也需要注意观察用户在描述问题时候的表情和肢体语言，搜集用户对于产品的真实态度。
其实整个访谈流程我们归纳一下，需要关注的就是四个关键点，手+口+心+颜。
关于实操演示放在第一个讲，是因为这个环节非常重要。线下访谈时强烈不建议“脱机访问”，这种形式对受访者而言需要花更多的时间去思考问题的答案。
会遗忘甚至想不起来当时的具体情况，随便的敷衍回答“嗯，还行”、“挺好的”，或者干脆彼此都不在一个频道上。
其次，在操作过程中，建议用手机进行拍摄记录。因为每个人对产品的理解方式与程度不同，在用户操作的过程中，会发现一些有意思的代偿方案。这些也是思考的切入点。代偿方案是否比原先设定的实现方法更便捷。
回去通过视频仔细分析受访者的操作路径，以及每个操作之前是否有迟疑等等。并且将问题点一一记录下来。
这个就是根据问题框架进行提问。在这个过程中，通常会穿插着上机操作演示，在现场记录的时候可以先记录个大概，等结束后再仔细整理。
问受访者的心理感受，其实就比较偏主观了，我们可以从“我们家的产品”和“人家的产品”两个维度去对比询问心里感受。值得注意的是，即使是这样开放式的提问，也有提问技巧。
比如“你觉得现在还有什么不好用的地方”就比“你感觉现在的产品好用么”这样的提问方式更有效。
因为产品一定是有可有优化的空间，“有什么不好用的地方”这样提问的方式就是具体到了某个点上面，具体什么点不好用。
而后者的提问方式是基于整个产品，受访者可能会出于不好意思等原因直接说“你们的东西还行吧，还可以”。
当我们提问产品优缺点的时候，受访者大部分都会带上表情和肢体语言，并且情绪表现和性格有比较大的关系。
性格比较雷厉风行、急躁一点的，通常会像连珠炮一样疯狂输出，并且措辞会比较极端。例如：“真的太难用了”、“太麻烦了”、“严重影响门店营业了啊”。
接受到这种信息我们首先要做的就是安抚对方的情绪，其次对于这些信息要学会剔除一些夸张描述。
而性格温和一点的受访者，在阐述问题的时候也会比较婉转。“不是太方便”、“这个改动没啥感觉”、“也还行、都可以”，如果某个高频操作真的很影响日常工作效率，往往会表现得很无奈，甚至还有点委屈。
那么无论是哪种表现，其实都要考验采访者的经验，结合产品的功能去考虑，找到反馈中真实有效的部分。
通过以上4个环节，其实就可以收集到很多有用的信息，语言信息、视频信息、动作表情信息等等。接下来的任务就是信息的梳理归纳。
访谈结束后，我们需要做个简单的总结回顾。将关键问题再次复述确认，进行查漏补缺并且再次感谢受访者，表达他们今天提的建议价值很大，后续会梳理出可落地的点优化到产品当中。
如果说聊得比较开心，大多数的受访商户都会邀请来访团队吃个饭再走，也算是额外的福利。在就餐过程中的非正式场合交流，也可以聊聊门店的一些运营情况等等，帮助我们更深入的了解这个行业。
我们在访谈过程中会有大量未整理的一手记录，结束后需尽快的梳理，尽可能详细的记录下用户描述的细节、肢体动作表情语言等等。建议使用石墨、语雀、腾讯文档等在线编辑工具，方便分享修改。（本文提供模板可下载）如果是连续访谈几位商户，我会在访谈结束以后，迅速地将刚才的访谈内容整理出一份原始资料。并罗列出一些受访者反馈但访谈提纲里没有的问题，去下一家受访商户的时候可以验证下该问题的普遍性。
② 整理落地
输出后我们需要再次进行提炼，将有价值可落地的问题点提取出来，进行汇报分享，并找到相对应的产品研发进行探讨排期，这样就形成了一个完整的闭环，真正做到了发现问题、解决问题.
③ 流程概括
前文絮絮叨叨说了很多，其实关于用户访谈这事用6个字就可以概括，简单理解：
问谁？问啥？答啥？改啥？
能够回答清楚这4个问题，那么这就是一次有价值的访谈经历。
ToB业务的特点就是会有一定的行业壁垒，设计师在刚接触的时候一定会有很多茫然时刻。对于各种专业词汇的一脸懵，对于行业的不了解。
或者很多人对于B端的认知还停留在，B端好像没啥好设计的，都是现成的组件库拖一拖，成就感比C端差远了。
那么做访谈、体验优化的意义是什么呢？
在《U一点料》一书中提到，B端产品做体验设计创新时，有2个要诀
要诀1：更好地帮助用户降低经营成本，增加企业收入
要诀2：更好地在业务链路上促进用户协同，提升工作效率
《U一点料》
所以，无论我们采取何种方式去研究用户，去挖掘需求，最终的目标与意义都是为了使整个系统，更贴合用户的真实使用场景，让系统可以成为用户在工作过程中一件“称手的工具”。
如何真正理解用户需求，给他们最想要的东西，比如高效协同、效率提升，或者创造更多的商业价值。这不仅仅是业务方的事，也值得每一位设计师参与深思。
模板下载链接: https://pan.baidu.com/s/15EaUUlqZUvq77wN197hUIw 密码: mn2g
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
// 写在前面
端到端导流是指在产品矩阵体系内引导优质产品的用户使用另外一款产品，带来使用量的提升，从而实现用户规模提升的一种增长手段。随业务快速增长，有驾从百度汽车频道衍伸出了有驾小程序、M站、PC站以及APP等多纬度的产品矩阵，依托各端流量实现矩阵产品间的导流，逐步积累用户规模，是有驾目前获客渠道中占比最高的方式。本文将以有驾导流体验升级的项目为例，分享导流增长探索的设计思路与实践经验。
// 为什么要做导流
导流的目的
对于业务本身而言，随着移动互联网流量红利期的结束，获取新用户的成本越来越高，不管是新产品还是成熟型产品，都需要通过导流的手段来持续扩充新用户。其次，对于有驾产品生态而言，需要各端产品间的相互联动，协同发挥优势，实现流量价值最大化。
导流的优势
成本低，相较于投放、活动等渠道流量获取方式，矩阵导流成本低；
高意向，用户购车意向明确更容易实现商业转化；
可共享，用户数据及行为关联互通。
// 如何做好导流设计
1.问题分析
通过梳理核心场景的4种导流条，发现各个场景导流形式各异，用户缺乏统一认知，导流引导语单一内容吸引力弱。在用户在浏览页面时，点击功能入口或想要继续查看更多内容，需要下载APP才能继续阻碍用户浏览：
缺乏统一认知：视觉表达形式不成体系，用户感知不够；
内容吸引力弱：内容单一缺乏吸引力，用户没有点击欲望；
阻碍用户浏览：打断用户正常使用功能，影响用户体验。
从导流链路的用户行为来看，整个流程下载路径过长，发现用户流失较大的转化点：
从小程序落地页到下载页：在进入小程序浏览页面时，用户没有注意到导流条就滑走了；
点击导流条进入下载页：点击导流条会先调起导流弹窗，点击确认后再进入到下载页，用户未选择下载就退出了。
2.明确设计方向
针对导流现状缺乏统一认知，内容吸引力弱、阻碍用户浏览、下载路径过长的问题，我们搭建了一个完整的导流链路图，根据用户增长模型，把用户生命周期各节点的用户行为与产品触点一一罗列出来，找到增长路径的设计机会点。
通过以上的问题分析，如何建立用户和产品的链接，保障友好的体验，是本次导流升级要解决的问题。根据用户关键行为，我们可以将整个导流链路拆分为3个阶段来挖掘主要机会点：
下载前：兴趣激发导流吸引，建立用户稳定认知；
下载中：强化用户转化动机，刺激用户完成下载；
下载后：保障还原体验畅通，提升首次使用体验。
下面将分别介绍导流下载前阶段的设计落地实践，以及下载中、下载后阶段的延伸设计思考。
// 下载前
1.强化触点吸引
是否能成功引起用户注意，是转化开始的第一步，统一的视觉风格和满足用户诉求的内容，有利于增强导流条的吸引力。
1）收敛导流条类型
针对【阻碍用户浏览】打断用户正常使用功能、用户没有跳转预期的体验问题，下线了阻断式和截断式两种体验不友好的导流类型，将原来4种导流类型收敛为2种，仅保留通用导流条和功能延展导流条，基于这2种导流形态进行深入的设计探索。
2）建立通用视觉标准
针对【缺乏统一认知】视觉表达形式不成体系、用户感知不够的视觉问题，建立了通用导流条标准化规范。统一视觉形态，优化为页面内通栏嵌入式，同时融入品牌色强化用户感知，根据页面布局制定了不同的展示规则。
上线后，内嵌导流条在展现受限的情况下，导流转化数据与改版前基本持平，为了进一步提升导流的点击效果，开始探索场景化定制提转的设计方向。
3）定制场景化内容
针对【内容吸引力弱】内容单一缺乏吸引力、用户没有点击欲望的内容问题，在通用标准化形态的基础上，根据不同场景用户诉求点，丰富导流内容。分别从内容定制、按钮文案优化、以及氛围强化3个方向验证对转化的影响。
内容定制：丰富导流利益点、场景化内容更能激发用户兴趣，促进转化达成；
按钮文案：转化按钮文案导向性明确、内容与导流利益点匹配，可以助力按钮转化提升；
氛围强化：导流样式上适度弱化氛围、样式更倾向于原生功能，有助于提升导流条点击。
2.拓展场景扩量
复利通用标准导流条的成功经验，应用到功能延展类导流条中继续验证有效性，从产品价值点出发，挖掘高流量场景的机会点从而带来转化增量。
1）价值传递
根据小程序和APP两端各自的不同点，分别从功能差异及体验差异两个方向进行优化。
APP特有功能：APP完善的功能体验可以更好满足用户诉求，例如参配浏览场景下，引导用户体验搜索及横屏查看的高频功能，对于导流转化有正向帮助；
各端体验差异：小程序和APP两端体验存在差异，例如图片浏览场景下，APP清晰流畅的浏览体验及放大全屏查看图片的交互体验，能够刺激用户转化。
2）价值延续
当用户完成核心内容消费后，是否可以引导用户去APP继续浏览更多相关内容，进而引导用户下载呢？
服务透传：平台服务内容传递，例如在内容落地页文末增加品牌广告导流条，帮助用户建立品牌认知；
相关推荐：引导相关内容消费，例如在文章或视频页增加相关推荐导流条，引导用户浏览更多相似内容。
// 下载中
当用户通过导流条进入到下载流程时，还有哪些手段可以刺激用户激活减少流失呢？
强化下载动机：下载页前置APP落地页内容，例如将通用下载页优化为场景化下载页，给用户超前产品体验吸引转化；
减少用户流失：缩短链路简化流程，例如可在下载中间页完成应用下载，同时退出下载页时增加挽留。
// 下载后
当用户在应用商店下载完成后，我们还能做哪些提升首次启动APP的体验呢？
还原链路畅通：提升场景还原成功率，减少频繁提示信息干扰；
建立用户心智：引导新用户探索功能，根据用户兴趣推荐适合的内容。
以上内容是下载中和下载后阶段导流优化方向的一些延伸设计思考，为大家提供可以继续探索的方向。
// 写在最后
总结一下本篇文章关于导流的体验设计要点：
全链路洞察，对导流链路进行拆解，通过盘点导流链路的用户行为，明确每个节点的设计方向；
降低广告干扰性，减少用户浏览过程中的阻断感，适度弱化广告氛围；
用户的视角引导，让用户专注于产品本身传递的价值，引领用户完成对产品的探索从而完成下载激活。
希望以上的设计思考，可以带给大家一些启发。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com