莫奈是一款主要服务京东内部用户的数据可视化平台，它以容器的形式将京东城市各种与智慧城市建设及运营相关的能力聚合，并以可视化的形式面向客户呈现。
作为京东莫奈的设计负责人，过去三年一直负责莫奈可视化平台的用户体验设计工作，由于本人日常设计主要以智慧城市、数据可视化大屏为主，所以我即是莫奈的设计负责人也是莫奈的深度使用者或者说专家用户。在长期使用莫奈的过程中，本人梳理了大量与视觉、体验相关的问题，这些问题，部分在产品日常迭代中得到了优化，但是也有相当一部分解决起来具有一定的难度和成本；与此同时，作为用户体验设计师，我日常与业务方、客户方以及用户接触紧密，所以在与大量用户沟通后，也从用户侧收集了不少使用体验相关的问题。我对以上两个渠道的问题整体梳理汇总，并与产品侧讨论沟通后，大家认为这些问题比较严重的影响了用户使用莫奈的效率，降低了莫奈对业务侧赋能的质量，提高了客户使用莫奈的成本。所以我们必须规划出一个产品迭代的周期，针对莫奈体验问题，进行一次密集的优化和革新，这便是本次莫奈体验升级改版的基础背景和原因。
本篇文章写作的主要目的，是想将本人在这次改版设计中用到的一些方法、流程和经验与大家做次交流和分享，希望能为同行在类似的改版设计中提供一定的借鉴和参考。
实际上，在梳理出整个体验升级流程之前，通过与产品负责人的多次沟通，我们事实上已经对体验升级这个需求达成了共识，而流程图解决的是做什么、怎么做的问题。
下图展示的这套体验升级流程较为通用，大多数产品的体验升级都可参考下面的流程执行。
这套流程的主要作用有两个，一是通过它可以更直观的跟产品负责人、开发负责人等关键角色沟通，让大家对体验升级这件事儿有整体且全面的了解，方便大家评估工时、预估成本和安排排期；另一方面也能够使我自己的工作推进的更加有节奏有条理，避免工作内容长时间停滞在某一个环节而影响整体进度。
基于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咨询、用户体验公司、软件界面设计公司
// 写在前面
端到端导流是指在产品矩阵体系内引导优质产品的用户使用另外一款产品，带来使用量的提升，从而实现用户规模提升的一种增长手段。随业务快速增长，有驾从百度汽车频道衍伸出了有驾小程序、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咨询、用户体验公司、软件界面设计公司
当你使用形形色色的APP时，是不是时常不由自主地感慨“这个APP的界面太丑了”、“这个APP太难用了，连入口都找不到”，是什么原因造成这种感受呢？
认知心理学中有个概念叫做认知负荷「cognitive load」，它表示大脑在工作中记忆资源的使用量，会影响用户的信息阅读和产品使用体验。本文将从信息层级、信息结构、阅读顺序、信息密度、文案表述五个层面来探讨如何降低用户认知负荷。
格式塔心理学的封闭性原理告诉我们，人们在认知某个东西的时候首先看到的会是整体、而不是单独的部分。如图所示，你首先看到的是一个蓝色的字母U和深褐色的人头侧脸，其次才是构成这个形状的各种细节。
从人类视觉系统成像原理来说，人类天生对于颜色对比非常敏感（彩色视觉是因为视网膜中3种视锥细胞分别感知特定颜色所致，当用户同时看到多种不同的颜色时，不同视锥细胞就会被激活眼睛感受到强烈的对比）。
因此，在设计界面时通常会通过大面积的色块对比来凸出层级更高的信息。
总结来说，我们在平时的设计中常用形状大小差异和颜色对比差异来拉开信息层级。
此外，由于人眼视度（舒适的垂直视场角度为-30°~25°）和用户使用不同设备时的阅读角度问题，人眼对于屏幕上不同区域的关注度有着天然的差异。
因此，我们在设计时若想拉开信息层级，除了使用面积和颜色对比外，也可以通过位置对比来实现，即将层级较高的信息置于舒适阅读区内。如图所示，移动端设备位于屏幕中央偏上的信息在阅读舒适度上会优于屏幕下方的信息。
我们知道了如何通过设计手段来区分信息层级，那在信息层级区分上是不是越多越好呢？
显然不是，信息层级过多也会增加人脑的认知负荷（整个页面显得很花哨）；而信息层级过少，则页面的内容展示会比较平均、不一定能突出所有重点信息。一般来说，我们可以将信息划分为重要信息、次重要信息、一般信息和和辅助信息，也就是信息层级控制在4个以内比较合适。
如图所示，我们把聚划算的页面做高斯模糊后，里面的信息层级就一目了然了。
在讨论信息结构之前，我们首先对基本的信息单元做拆解：信息单元 = 信息本体 + 信息容器，这里我们把信息本体定义为我们主动让用户感知并能辅助其进行下一步动作的信息元素，而容器定义为具有明显视觉区隔的信息承载物。信息本体一般包括图片、文案、icon、行动按钮等，而信息容器可以大到页面小到一般的模态、非模态控件。
如图所示，在典型的电商场景中商品卡片可拆分为信息本体（商品图、商品名、商品价格、利益点）+ 信息容器（卡片）：
熟悉格式塔原理的朋友都知道相近原则——即彼此位置相近的物体会被人们看成是一类东西。同时，保持相同的信息结构意味着视觉焦点内不同层级信息的相对位置是固定的，这样用户在快速扫视某个产品时会降低记忆负担——即无需寻找同属性的信息。反之有一定的记忆负担，不利于用户快速扫视重要信息。
如图所示，滴滴我的钱包页面5张轮播图的信息结构相同，遵循左文右图和主文案在上、辅助文案在下的信息结构。
而支付宝理财页面的轮播图则有着不同的信息结构，如辅助文案和按钮在不同轮播图中的位置和大小、样式均不一样，轮播时同类属性的信息会以不同样式在不同位置切换，增加用户的眼动成本和认知负担。
从页面整体动线看，同类或关联信息会有明显的区块分隔。如下图所示，滴滴「我的」tab在页面整体动线布局上有着非常明显的区块划分来承载关联信息：
用户信息（个人信息+会员信息）→常用工具→促活福利（卡券 + 福利）→平台服务（金融服务 + 企业服务）→低频工具。
从信息单元内部来看，同样会对关联信息做位置上的划分。例如一般的社区信息流卡片结构基本都是生产者信息→内容信息→互动入口。
我们前面提到过信息单元=信息本体+信息容器（容器为具有明显视觉区隔的信息承载物），而信息容器的排布也有其内在的规律。
笔者体验过大量产品后，大致总结了3种较为常见的容器排布结构，即三角结构、宫格结构和列表结构，每种结构容器的排列规则会遵循一定的主次关系并根据其特点有不同的适用场景。
（1）三角结构
我们都知道三角形是多边形里最稳定的结构，其容器排布主次突出（根据主要容器与次要容器的位置关系可分为上下结构和左右结构），用户纵向的视觉迁移路径较短，一般比较适用于数量较少、且有明显优先级的场景。
（2）宫格结构
宫格结构适用于优先级相同或相似的功能入口，一般以四宫格和六宫格为主，数量过多时容易造成视觉疲劳和信息密度过高。四宫格信息容器和六宫格信息容器如图：
值得注意的是容器内也可以是宫格结构，但这种宫格结构的信息主体数量会比信息容器更多：
（3）列表结构
列表结构同样适用于优先级相同或相似的功能入口，但与宫格结构不同的是列表结构的一般具有排布逻辑或规则，如按照时间线排布。
列表结构包含横向列表和纵向列表，横向列表适用于短文案卡片（比如活动或功能入口），方便用户扫视更多图片；纵向列表适用于长文案卡片，用户可以快速扫视较多文字。
在B端设计需求中，我们经常会遇到让用户输入一堆信息的场景，这时候如果我们把所有信息都罗列在1个页面中，可能会造成高跳出率和低完成率。
表单设计领域的专家Adam Silver通过实际项目发现：将较长表单按照关联性拆解为若干部分，能有效提升用户满意度以及完成率。除此之外，Adam还总结了这种设计理念的16个优点，我们认为其中比较有价值的是这3个点：
市面上将长表单拆分成几个步骤做分页处理的产品比较多，如下图小红书就将店铺申请流程拆分为了填写店铺类型、经营类目、个人信息3个部分。
我们都知道用户的阅读习惯一般是近似于从左往右、从上至下的Z字形结构，且基于人眼视度和不同设备屏幕角度的差异，人们扫视屏幕时一般会先注意到屏幕中央偏上一点的位置，因此我们在设计信息结构时也要考虑用户的阅读路径和习惯，将对用户高价值或者高优先级的信息置于视觉焦点容易触及的地方。
那什么是对用户高价值或者高优先级的信息呢？我们判断的标准是哪种信息形式（图片or文字）更能高效地传递有效信息以辅助用户决策，比如在电商产品或外卖产品中一般采用上图下文或者左图右文的信息结构，且会将图片的信息层级拉到最高，这是因为用户在快速扫视过程中仅通过看图即可看到这件商品，初步了解外卖商家卖的是什么。
但如果我们换一个场景，这种形式就不那么适用了，用户仅通过看图并不了解这条资讯的大致含义，因此，此时文案的优先级更高，常常采用上文下图或者左文右图的形式。
国外的用研团队曾通过眼动热力图的AB实验发现通过在图片中加入人类面部表情的视觉引导对于信息的阅读率有明显提升作用。如图所示在第一张广告图中，用户的视觉焦点大部分集中在了婴儿的脸部，而右侧的文案则很少有用户关注，第二张图中婴儿由正脸转化成了侧脸同时眼睛看向右侧的文字，此时右侧文字的眼动热力成像明显提升。
这里的信息密度指的是在单位容器内（卡片、页面）所呈现的信息量，比如在1个页面中如果信息密度大，则相对屏效较高，但却容易增加用户的认知负荷；反之，1个页面中信息密度低则相对屏效较低，用户的认知负荷也相对较低。
我们来看1个关于信息密度对于阅读体验影响的案例：在美国开车，人们常常因为看不懂街边的停车牌而违停被罚款，我们可以看到左图中的停车牌上密密麻麻全是字，想要阅读根本无从下手。
Nikki Sylianteng是一个华裔的设计师，当她初来乍到美国时也因此遇到了很多不便，针对这个问题她简化用户的需求，即：
于是她将文字信息做了可视化处理，通过较少的文字+色块极大地降低了停车牌的信息密度，让司机看到后一目了然。Nikki Sylianteng的这种设计被美国各地的市政部门广泛采用。
在传统媒介中，一张充满文字和图片的报纸与一个时尚杂志封面的信息密度对比更加明显，给读者带来的阅读体验和认知负荷也完全不同，这也是为什么很少有人会耐心读完报纸上的文字。
关于海报与杂志设计还牵涉到图版率这一个概念，简单讲就是图片面积所占整体版面的比率，通常来说图版率越高则表现力和亲和力就越强，有兴趣的读者可以自行上网了解图版率的相关知识，在这里就不做详细阐述了。
在广告场景下，当用户被图片吸引视觉焦点后，文案表述就显得尤其重要了。这时候我们要搞清楚3个问题：
首先，我们得搞清楚核心目标受众是谁，同一款产品来自一线城市的年轻白领和三四线城市的中年人关注点和付费动机可能完全不一样（比如同样都是手机，一线城市的年轻白领更关注颜值和性能，而三四线城市中年人更关注价格和质量）。
这时候产品的广告文案也必须依据核心目标受众的需求点来设计才能命中用户，小米手机的线下广告语在一线城市的地铁站（左图）和农村的大字报广告（右图）就采取了完全不同的描述策略。
在回答完以上3个问题后还需要注意，我们的文案描述目标受众是否能够理解，因为人群不一样，其受教育程度和理解能力也会不一样。
在设计动作文案时，我们时常会受到惯性思维（常态场景下的通用做法）的影响而忽略了动作本身的意涵。
比如下图的二次确认弹窗用户取消上传和取消订单是一个对当前行为的否定，但我们习惯于用“确定”和“取消”来让用户回应是否进行某个行为（我们也可以从另一个角度理解，否定的否定就是肯定，点击「取消」按钮即继续用户当前行为，但这种理解很绕），这个时候就会带来理解上的歧义，当出现这种情况时，最好的做法就是将动作本身简单明了地描述出来避免产生歧义。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
2022卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。那你有听过懂球帝这款足球APP吗？作为国内用户规模和影响力最大的足球社区，据官方统计，懂球帝在全国足球迷中的渗透率高达83%，甚至有这样一句口号——十个足球迷，八个用懂球帝。本期设计大侦探，全面拆解体育行业的独角兽懂球帝，看看一款足球类APP是如何设计的！
一、导读
1. 内容结构
全文8517字，分为五个部分，分别是导读、产品画像、内容服务、变现服务和设计总结，你可以通过下面的思维导图对本文内容结构有全面的了解。
2. 适合人群
第一类，UI/交互设计师，可以跳出执行层，去思考懂球帝的产品设计策略，提升产品分析能力；
第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；
第三类，体育产品行业从业者，通过对懂球帝的全面拆解，获取竞品设计参考。
3. 分析模型
我们主要运用三种模型对产品的功能、设计进行拆解，由于没有权威的官方数据，所以我们更多以推导的形式去思考懂球帝为什么这样设计。
第一个，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的5个重要环节，主要用于分析产品的功能价值。
第二个，上瘾模型。由尼尔·法埃尔提出，通过对上千种习惯类产品的调研，总结出一款产品如果要让用户习惯、上瘾，可以按照触发、行动、多变的酬赏和投入四个步骤去设计，主要用于分析产品的功能价值和推导产品的策略设计。
第三个，社会心理学。主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺，去推导产品设计的用户心理设计，主要用于推导产品的策略设计。
二、产品画像
1. 产品介绍
懂球帝是一款体育类APP，首个版本发布于2013年12月5日，根据易观千帆2022年8月的最新数据，懂球帝月活跃用户人数301.8万。懂球帝持有中超、德甲、足协杯等赛事直播版权，靠着多年的积累，吸引了众多国内外豪门俱乐部、足球媒体和运动员在懂球帝开通官方懂球号，目前是全国用户规模和影响力最大的足球内容平台和社区。
2. 商业模式
2.1 客户细分
懂球帝的客户群体主要以足球迷为主，年龄区间在24-35岁，男性居多。据官方数据，在足球球迷群体中，懂球帝APP的渗透率高达83%。从这些数据可以看得出来，懂球帝是一个覆盖大众足球用户群体的产品，不仅为用户提供专业的足球资讯、直播、竞彩和游戏等服务，还满足了很多小众用户群体的需求，比如球星卡交易、赛事举办曝光等。
2.2 价值主张
懂球帝以懂足球，更懂你为价值主张。
2.3 渠道通路
懂球帝主要通过网络媒体平台进行拉新引流，比如微信、微博（56.6万）、抖音（110万粉丝）、知乎和小红书（3.7万）等平台，其次还会通过赞助线下足球比赛活动进行宣传，比如懂球帝足球星火公益计划等，还有会直接投入广告进行宣传，比如在世界杯、欧洲杯、欧洲五大联赛投入广告，邀请世界巨星为产品代言等。
2.4 客户关系
懂球帝主要通过社区、圈子和粉丝群等方式和用户建立紧密的关系。
2.5 收入来源
懂球帝的收入来源主要通过会员VIP、商城、竞彩、游戏和广告等方式实现营收。
2.6 核心资源
懂球帝在足球领域深耕已有十年，无论是技术、数据、资源、口碑还是球迷用户，都已经有了非常夯实的积累。
2.7 关键业务
懂球帝的核心业务包含足球资讯、球迷社区、体育彩票、比赛直播、球星卡交易和游戏等。
2.8 重要合作伙伴
第一类，体育行业的知识创作者，通过签约合作的形式为平台输出高质量的内容，比如专栏和懂彩帝；第二类，体育运动员、解说员及具有一定名气的体育从业者，通过在懂球帝建立懂球号和球迷进行深入的沟通，提高个人知名度和影响力；第三类，体育机构和俱乐部，比如亚足联、欧洲各大联赛豪门俱乐部均在懂球帝开通了懂球号，和中国地区的球迷第一时间进行交流互动，提高球队知名度和影响力。
2.9 成本结构
作为一个互联网产品公司，懂球帝的成本开销主要是产品运营和开发人力等成本。
3. 用户画像
懂球帝的用户群体主要以男性用户居多，占比75.55%；从年龄分布看，以31-35岁的用户群体最多，占比39.55%，其次为24到30岁的用户，占比33.21%；从用户消费能力看，懂球帝的中等及中高消费者占比67.11%；从地域分布看，三线城市用户最多，占比21.62%，新一线城市占比23.05%，二线城市占比19.39%，一线城市仅占12.42%，其中广东省最多，山东和四川省位居前三。
4. 信息结构
懂球帝的一级菜单包含首页、比赛、主队、发现、数据和用户中心。「首页」采用千人千面的信息流方式，根据用户的兴趣、标签和浏览记录推荐新闻，其中包含了头条、精选、快讯、游戏等热门栏目；「比赛」主要为球迷提供最新足球、篮球比赛的体育赛事直播，球迷可在直播间和专家进行互动；「主队」是为球迷设置自己喜欢的球队，当球队开启比赛时，会第一时间通知球迷；「数据」主要为球迷提供各大主流联赛的当季的联赛排名、积分、射手榜和赛程等数据；「用户中心」设计成抽屉导航，聚合了懂球帝整个产品其他功能的入口，比如赛事、公益足球、系统设置等功能。从信息结构看，懂球帝的产品功能并不复杂。
5. 重要迭代记录
根据七麦数据统计，懂球帝APP首个版本发布于2013年12月5日，截止到11月20日，APP版本已经更新至V7.8.8版本，近一年版本更新次数为17次。
版本重要迭代记录
2015年1月，发布V3.0版本，全新UI，球员球队资料页改版，新增实时聊天室、订阅等功能；
2016年2月，发布V4.1.1版本，Slogan为「足球迷神器（足球、直播、新闻、足彩、足球论坛社区）」；
2016年7月，发布V4.6版本，上线商品搜索功能，方便用户购买装备；
2017年1月，发布V5.1版本，圈子功能改版，新增Twins功能（球员twitter和ins动态）
2018年4月，发布V5.9.9版本，新增球队数据页，为用户提供丰富的足球数据；
2019年1月，发布V7.0版本，全新UI，提供舒适的阅读体验，新增世界功能；
2020年3月，发布V7.3.5版本，上线球队球员人气榜功能，支持用户为喜欢的球队球员打榜；
2020年7月，发布V7.4.2版本，Slogan升级为「不只是一个足球APP」；
2021年9月，发布V7.6.6版本，上线会员连续包月服务；
6. 产品生命周期
根据易观千帆2022年8月数据，懂球帝月活跃用户人数301.80万。官方数据公布目前懂球帝下载量超过1.5亿次，注册用户4000万，在足球迷群体中，懂球帝用户渗透率超过82%，是国内最大的足球聚合平台。 懂球帝目前在2016年就拿到了C轮融资，明年即将年满的十周岁的懂球帝，目前处于产品生命周期的成熟期，当下聚焦于商业变现的探索和创新。
7. 竞争图谱
截止到2022年11月21日，懂球帝APP在苹果的APP Store应用市场，体育分类排名第11，腾讯体育位居第一，月活跃用户人数1,205.75万；在体育彩票分类，懂球帝位居第一，是中国体育彩票月活跃用户人数的3倍；在体育资讯分类，虎扑以555.25万月活跃用户人数排名第一，懂球帝位居第二。
三、内容服务
「内容服务」是产品实现用户留存的关键方式。作为一个足球媒体，懂球帝不仅覆盖了欧洲五大主流联赛，还包含中超、中甲、电竞等联赛资讯，为球迷提供了丰富的内容。作为一个社区，懂球帝以UGC用户生产内容模式，吸引了全国众多足球爱好者和创作者加入了平台，并设计了圈子（球迷可根据自己的喜好加入不同的圈子，比如皇马球迷圈、梅西球迷圈）等栏目，为全国球迷提供了一个创作、交流和娱乐的足球平台。其次懂球帝利用自身强大的技术资源能力，为用户提供每日足球/篮球比赛的直播，满足众多球迷无法观看比赛或需要付费支付观看的痛点。懂球帝还提供了非常强大的数据查询功能，球迷可以在「数据」栏目查询到当季各大联赛最新的赛程、排名和射手榜等信息。
1. 内容频道
作为一个足球媒体社区，懂球帝的内容频道主要分为以下几类。按联赛分，有欧洲五大联赛（英超、西甲、德甲、意甲和法甲）还有中超和中甲联赛；按内容长短分，有「快讯」（提供每天最新的足球资讯）；按内容质量分，有「精选」和「深度」；按兴趣分，有「关注」和「头条」；按传播形式，有「视频」；其次还有电竞和彩经等栏目。从内容频道设计分类看，懂球帝的内容非常夯实，可以满足不同球迷们的需求，但是内容设计的创新度有一定缺失，比较中规中矩。
1.1 头条
「头条」作为懂球帝的首页，采用千人千面的信息流形式为用户推荐足球资讯。头部的轮播主要以当日或当周热点赛事或活动为主，轮播下方内容为当日热点比赛预告或比分，方便球迷第一时间获取比赛数据。从第一屏开始，平台主要结合用户的个人兴趣、标签和主队（球迷群体一般会选择一个主队，比如廖尔摩斯是阿森纳球迷，就会把阿森纳设置为自己的主队）进行个性化资讯推荐。
1.1.1 新闻详情页
足球社区是一个充满了爱恨交织的大江湖，比如皇马和巴萨、AC米兰和国际米兰的球迷往往水火不容，所以往往在足球新闻的评论区，会非常闹热，甚至形成独特的球迷文化。从懂球帝的内容详情页可以看出，懂球帝的用户活跃度非常高，一篇头条的新闻评论数有上百条评论，甚至单条评论还支持多人评论、点赞、分享和举报，非常热闹。
1.1.2 用户主页
「用户主页」主要指用户的个人主页，主要包含发表、评论、关注和粉丝四个内容。用户之间可进行相互关注，但不支持发送私信或其他互动方式，无法进行建立更深的关系链接。
1.2 精选
「精选」主要按资讯的热度来设计，从上至下分为今日赛事、战报、12小时热门、24小时热门和今日推荐五个部分。这个栏目的设计有利于让球迷看到过去24小时的热门新闻，避免因为个性化推送错过当天重要新闻。
1.3 圈子
「圈子」就像贴吧，用户可自行加入喜欢的圈子和其他用户一起交流。懂球帝的圈子非常丰富，有按俱乐部、国家队和球星分类建立的圈子，也有根据用户兴趣爱好建立的圈子。从官方数据看，足球彩票圈子发帖数超过1000万，一支欧洲明星球队的圈子发帖数均在100万以上，可以看出用户活跃度非常高。圈子的设计，本质就是细分用户，让有共同爱好的球迷相聚在一起，从而建立用户关系，最终提高用户留存率。
2. 懂球号
懂球帝是一个UGC内容模式的球迷社区，社区内容主要由用户创作。懂球号分为企业机构和个人自媒体两种类型，企业机构主要针对国内外俱乐部和足球媒体机构，个人自媒体主要针对球员教练以及热爱足球创作的的球迷群体。
懂球号的认证分为两种，第一种是个人认证标识，黄V，主要针对在业内有一定知名度的记者、球员、KOL和优秀创作者；第二种是团体认证标识，蓝V，主要针对各大俱乐部、媒体和有公众影响力的团体。
懂球号作为一个知识创作平台，创作者通过写作获取流量曝光也可以获得收益，以此形成内容创作闭环，为社区提供专业的资讯内容。从官方公布数据看，目前懂球帝已经吸引了众多知名俱乐部开通了懂球号，包括亚足联、欧洲五大联赛众多豪门球队和中国男女足，可谓星光熠熠，具有很大的号召力。
3. 比赛
「比赛」这个栏目，主要为球迷们提供各大足球联赛的比赛预告和直播。从赛事分类看，懂球帝几乎包含了世界足坛所有主流和非主流联赛，从最热门的欧洲五大联赛到巴甲、阿超、墨超这些南美联赛，都有比赛播放源和精准的数据。
3.1 直播间
直播间分为直播君、球迷直播间和专家直播间。「直播君」就是官方的直播间，由懂球帝官方负责解说。「球迷直播间」就是球迷们一起聊天看球，这就像在B站看视频弹幕一样，非常热闹，属于独特的懂球帝看球文化。
「专家直播间」加入了很多足彩内容，首先完全由懂球帝的足彩专家负责解说比赛，其次在比赛中会向球迷推送自己的竞彩方案，用户需要购买专家锦囊或开通红单会员才能观看，对付费用户的激活有很大帮助。
3.2 数据
3.2.1 赛况
「赛况」就是记录一场比赛的真实数据，包含比赛动态（GIF动图）、高评分球员、进攻心率图、技术统计和完整事件。
3.2.2 阵容
「阵容」记录了整场比赛运动员的详细数据，包括出场时间、进球数、射门数、跑动距离和比赛评分等。
3.3 竞彩
3.3.1 情报
「情报」是付费服务，用户需要开通小红单会员（懂球帝足彩会员服务，售价每月588元）以后才能查看。从内容设计看，非常丰富，包含专家方案、欧亚对比、高斯大小球、会员专享情报、得失球时间分布、必发冷热分布和必发大注倾向等内容。这是懂球帝的核心优质内容，通过直播看球的场景，提升用户开通VIP的激活率。
3.3.2 分析
「分析」内容包含猜胜负（球迷竞猜数据）、大数据锦囊（付费服务）、近期战绩、未来三场、综合实力（包含近10场战绩、场均进球等）、场面控制（控球率等）、双方特征（射门进球效率、射门次数等）、角球、半全场（近10场半场进球数平均值）和事件统计（犯规次数和红黄牌）。
3.3.3 专家
「专家」主要指懂球帝彩票板块的足彩专家，这是懂球帝足彩内容的核心创作团队，他们通过对比赛的分析输出精准的投注方案，用户需要购买才能查看。
3.3.4 指数
「指数」是指欧亚各大博彩公司对当场比赛竞彩赔率的数据，这个栏目为用户提供更多全面的投注参考。
4. 数据
数据分为欧洲足球、亚洲足球、美洲足球、非洲足球、全球足球、篮球和电竞7大类，几乎覆盖了全球所有足球联赛。
①积分主要查看当前联赛的积分排行榜，包含胜平负场次和进失球等数据。
②球员榜的数据非常精细，几乎可以查询到一个球员的所有比赛数据，从射手榜、助攻榜、关键传球、射门、越位、传球再到拦截、成功过人、抢断和解围，应有尽有。
③球队榜和球员榜也很相似，颗粒度非常细，从进球数、控球率到扑救点球数、领先情况下丢分数据都包含了。
④赛程主要提供当前联赛的比赛进程，方便球迷查询。
⑤懂球帝还为球迷提供过往赛季数据查询的功能，甚至可追溯到1986~87赛季的数据。这就像一座足球博物馆，球迷可以查询过往赛季各大联赛、各支球队的详细数据，非常方便。如此专业强大的数据服务，也能提升球迷对产品的满意度，提高用户留存率。
4.1 球队主页
「球队主页」包含球队当前战绩、动态、赛程、数据、球员、圈子、资料和转会8个内容模块。
①「动态」就是把球队的新闻资讯汇总，方便球迷可以看到和俱乐部相关的所有新闻。
②「赛程」展示球队当前赛季的比赛记录，懂球帝还提供了一个历史赛季查询的功能，最高可追溯到1920赛季，跨度超过100年。
③「数据」主要展示当前赛季球队的联赛数据，包括进攻、组织、防守、关键球员等数据，懂球帝统计了近10个赛季的球队数据，非常完善。
④「球员」主要展示球队当前的球员信息，包含出场数量、进球数、助攻数以及合同到期时间。
⑤「圈子」关联了球队的球迷圈，用户可以在圈子发帖，和其他球迷一起交流。
⑥「资料」展示了球队的历史资料，数据非常丰富，包括历任主教练、队史纪录（进球、出场记录）、荣誉记录（联赛冠军、杯赛冠军等）。
⑦「转会」就是统计球队的球员转出和转入记录，包含球员转入转出的去向以及转会费，懂球帝统计了近10个赛季的数据转会记录。
4.2 球员主页
「球员主页」就是展示球员的详细信息，主要包含球员的动态、数据、能力值和资料。
①「数据」统计了球员整个职业生涯在联赛、杯赛以及国家队的数据，包括出场时间、进球数、助攻数、射门次数等，非常全面。
②「能力值」就是对当前球员的能力评估，包括速度、射门、力量、防守、传球和盘带等；
③「资料」统计了当前球员职业生涯中的所有荣誉，包括基础资料、球员身价变化、转会记录、俱乐部生涯以及个人荣誉。
④「球星卡」是一个竞拍交易的版块，球迷可以出售和当前球星相关联的等物品。
5. 赛事服务
「赛事服务」面向的用户人群主要是拥有举办体育比赛活动组织能力的机构或球迷团体，但由于赛事规模或资金的缘故，无法获取更高的曝光以及获取专业的技术设备。懂球帝从技术、数据、直播以及流量四个维度为用户提供专业完善的服务，吸引全国各地的体育爱好者加入懂球帝，实现用户拉新（已经单独设计直播君APP运营），提高知名度。目前该服务官方显示为免费，满足条件的用户都可以免费申请。
5.1 赛事详情页
「赛事详情页」包含了赛程、积分榜、球队榜、球员榜和参与球队等内容，有效帮助赛事举办方实现精准的数据化统计，方便球迷查询。
6. 公益足球
「懂球帝公益」在2016年开始运营，在2021年升级为「懂球帝足球星火公益计划」。这个活动的主要目的是为贫困地区和专项足球小学的学生提供爱心足球，在帮助他们快乐健康成长的同时，也扩大了中国足球的青少年基础。目前APP显示已向916所学校捐赠足球14441个，其次公益版块显示正在全新升级，暂停捐款。
四、变现服务
懂球帝在商业变现的形式设计上，主要通过体育彩票版块切入。通过「彩经」版块，招募了众多足彩KOL组成了懂彩帝专家团，以撰写比赛分析向用户销售竞彩情报。用户不仅可以直接购买，也可以开通懂球帝的小红单会员和红单会员，获得专业可靠的竞彩方案。其次，懂球帝还有球星卡、周边商城和游戏三个变现业务。
1. 彩经
「彩经」就是体育彩票，作为体育产品最重要的变现服务之一，懂球帝的彩经版块包含了足球、篮球、电竞和数字彩四种类型。从页面内容结构看，从上至下主要分为热门专家直播、金刚区、专家和足彩情报。
1.1 懂彩帝
「懂彩帝」就是懂球帝官方的专家团，包含了足球、篮球和电竞的各种竞彩专家。竞彩专家主要通过对赛事的分析，以撰写竞彩情报向用户销售。懂彩帝的专家库非常完善，从欧洲主流联赛到中超、中甲、美职联这些联赛，都有不同的专家针对对应的联赛研究分析。
其次懂彩帝还设计了三个排行榜，非常有趣，不仅可以吸引粉丝关注，还能利用攀比心理，倒逼专家写出更精准的投注方案，分别为命中榜（推荐的方案命中率）、连红榜（连续推荐命中的比赛场次）和回报榜（通过购买专家方案获取的回报排行）。
1.2 专家主页
「专家主页」主要包含专家资料、命中率数据趋势图和在售方案三块内容。用户可以关注专家，成为他的粉丝，还可以购买真爱卡（虚拟货币）加入专家的粉丝团，成为他的忠实粉丝；其次通过命中率趋势图可以查看专家近期的竞彩命中趋势；「在售方案」就是专家最新的竞彩方案，用户可直接购买查看。
2. 球星卡
「球星卡」作为一种实物珍藏品，近两年在国内市场非常火热，由于其独有的稀缺性和投资属性，所以催生了球星卡的拍卖模式。从懂球帝关于球星卡科普的文章可以看出，一张稀有的球星卡售价可以超过百万美元，在美国每年的球星卡成交额高达上亿美元。
球星卡版块主要包含每日截标卡推荐、牛卡博物馆、圈子、数据库和商品等内容。球星卡采用拍卖的形式进行销售，商家设置竞拍底价以后，在截止时间内出价最高者胜出。
3. 商城
懂球帝的商城主要包含运动休闲、配件和足球周边三大类服务，商城的设计比较简单，除了分类，就是商品信息流，用户可直接加入购物车购买。
4. 游戏中心
游戏是体育产品的最重要的变现方式之一，懂球帝的游戏中心包含了电竞、足球、篮球、休闲挂机和魔幻修仙等游戏，以小程序的形式游戏，非常方便。
5. 付费会员
懂球帝的会员主要分为三种类型，分别是小红单会员、红单会员和D+会员。
5.1 小红单会员
小红单会员售价588元每月，主要针对足彩的用户，主要权益包含专家方案解锁、专家方案公布、每月神券、冷门提前预警、关键情报推送、高斯大小球模型、必发冷热分布、深度数据分析、欧亚大盘对比、昵称红名、入场广播、红单会员标识和会员免广告13种会员权益。
5.2 红单会员
红单会员售价1998元，主要针对足彩用户，和小红单会员特权相比，增加了专家方案折扣（9折）、免费大数据锦囊（每月2次）、会员专属圈子三个服务。
5.3 D+会员
D+会员属于平台的基础会员，售价19元每月，可享受免广告特权、极致画质、尊贵身份和炫彩名牌4种特权服务。
五、设计总结
1. 商业层
从懂球帝的商业模式看，懂球帝的盈利模式比较单一。除了传统的线上广告收入，盈利模式主要围绕体育彩票设计，比如懂彩帝专家团以及小红单和红单会员等。而体育彩票这块，由于国家的政策等原因，懂彩帝更像一个知识付费服务，只是向球迷销售投注方案。另外体育彩票服务也容易导致球迷购买了方案去境外网站Du球，触及国家的红线区。对于马上年满10周岁的懂球帝来说，对商业模式的设计还需要拓展和创新。
2. 内容层
懂球帝这个产品，在内容设计方面，其实比较中规中矩，缺乏创新。作为一个足球媒体，懂球帝欠缺有深度、特色、个性化的内容栏目，虽然依靠UGC内容模式可以降低大量人力成本，但在内容深度的缺失就很难让懂球帝拥有核心竞争力。其次在整个产品的功能、内容以及结构的设计上，也看不到太多的亮点。比如周边商城，就只是最简单直接的商品销售，而如果你有看过樊登读书的商城设计，你就会发现同是各自行业的独角兽，懂球帝的产品设计创新力就太弱了。
3. 体验层
体验层包含产品的交互、视觉以及用户在使用产品整个过程中的操作体验。从交互和视觉看，懂球帝的产品设计不够精细，比如像「比赛」版块，无论是内容布局，还是字体大小、颜色，在视觉上给人的感觉比较粗糙。还有彩经版块，金刚区的图标都是模糊的，整个版块的设计显得杂乱又廉价。其次在产品的使用中，广告实在太多，而用户屏蔽广告的方式除了花钱开通D+会员，只有通过观看其他广告获取免广告卡才能屏蔽，这样的设计，让人略失所望。
4. 运营层
懂球帝在用户运营方面的功能设计得比较浅，整个产品只设计了一个任务中心，内容也比较常规，用户通过签到或者做任务可以领取金币（金币可以兑换成现金提现，5万金币可以兑换5元），其他的功能就再也没有了。相比脉脉和樊登读书这些具有丰富用户福利的产品，懂球帝和站酷很像，其实我也是懂球帝的老用户（注册时间超过7年），但迄今为止并没有看到任何官方粉丝交流群，也无法和平台建立任何链接，甚至在球迷圈，即便我关注了同是阿森纳的球迷朋友，也无法建立更深的链接。
参考文献
易观千帆 - 懂球帝/虎扑/腾讯体育APP数据分析
七麦网-懂球帝迭代记录
懂球帝官网
2017年中国互联网体育服务行业研究报告
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。根据国际足联主席因凡蒂诺预测，2022年的卡塔尔世界杯赛事将会吸引到全球超过五十亿人观看，这一人数占全球总人数的比重超过60%。
以往球迷们观看世界杯，更多是通过电视或者央视频、优酷这种传统的互联网视频平台，而在2022年这个冬天，抖音花费10亿巨资，成为了国内首个获得世界杯直播版权的短视频平台。作为拥有6亿日活的抖音，将会如何跨界设计世界杯专题，让亿万球迷能在抖音享受四年一次的足球盛宴，本期设计大侦探，就来全面拆解抖音世界杯专题。
一、栏目入口
抖音世界杯的入口在抖音头部一级导航栏最左边，和周边、关注、商城以及推荐并列。世界杯的栏目首页从上至下主要分为5个部分，分别是轮播（当日热门赛事以及活动）、金刚区（包含赛程、积分榜、有奖预测和我的主队入口）、比赛直播（当日赛事）、名嘴聊球（签约足球大咖）、赛事热点（热点头条资讯）、热门球星（入驻足球巨星）、世界杯好物（周边商城和抖音生活服务）、重磅热播（抖音自制节目）、大家都在拍（平台用户自创视频）和视频信息流（世界杯专题相关视频）。
二、内容策划
抖音在内容策划方面，几乎把前央视解说团队都邀请过来了，比如黄健翔、段暄、刘建宏这些家喻户晓的的足球主持人，都在抖音单独负责至少一款足球综艺栏目。除了解说团队，抖音还邀请了众多跨界娱乐综艺大咖，为球迷一口气送上8个原创足球综艺节目。从这个版块可以看出，抖音对此次世界杯的重视度之高，就像卡塔尔为了举办世界杯投资2200亿美元一样，劣势可以用金钱弥补。
1. 内容专题
1.1 观赛指南
「观赛指南」是指在一场比赛开打之前，各方媒体对这场比赛进行的赛事分析和预测。足球这项运动，由于充满了竞技性，一场焦点比赛，从赛前到比赛，再到比赛后，都充满了无数话题。而观赛指南，可以为球迷提供完整的比赛情报和指南，为比赛做预热。
1.1.1 分组解析
「分组解析」是针对世界杯的8个小组（世界杯有32支参赛球队，分为8个小组，每个小组4支球队，前两名可以晋级到淘汰赛）进行出线形势分析。作为四年举办一次的比赛，对于每支球队来说，都是非常宝贵的机会，所以关于小组的出线分析也往往是世界杯的热门话题之一。从内容设计看，抖音的分组解析包含了专家预测（名嘴大咖）、小组赛程、历史数据（历史对战记录）、热门球员（小组热门球星）和热门动态（相关的足球资讯）五个内容。
1.1.2 赛程解读
「赛程解读」就是针对单场比赛进行解读，包含比赛前瞻（专业的足球分析）、专家点评（世界杯专家团，含金量高）、网友热议（精选网友的高质量分析）、近5场战绩、球队名单、球员PK（核心球员）、积分榜以及相关的最新足球资讯。从这个栏目的内容策划看，由于缺少足彩竞彩和有深度的内容，显得中规中矩，稍显严谨，欠缺互动。
1.2 比赛日报
「比赛日报」就是根据每天结束的比赛生成当天所有比赛的战报，这个页面包含了直播回放、图文战报、视频集锦、赛况详情、技术统计和积分榜等内容，球迷也可以切换不同的比赛查看当场比赛详细的战报。
1.2.1 直播回放
「直播回放」对于体育赛事来说非常重要，比如像深夜场的比赛，大部分球迷都很难熬夜观看，这个时候只能通过直播回放来观看比赛。抖音的「直播回放」提供了全场录播回放、全场集锦（分长集锦和短集锦）、球星集锦和精彩时刻集锦，可以满足不同用户的观看需求。
1.3 热议话题
当一场比赛结束以后，话题讨论的热度将会达到最高值，比如阿根廷输给沙特的比赛，全网球迷都在心疼梅西。抖音在「热议话题」的内容设计上，不仅有独立的图文专题页还有白岩松的「白说世界杯」短视频栏目，给球迷带来全方位的内容解读。
2. 视频节目
2.1 DOU来世界杯
「DOU来世界杯」是抖音官方自制的视频节目，这个节目合计29期，每天更新1期，内容非常丰富，包含比赛复盘、每日看点、球星球队故事和赛事预测等。从栏目定位看，这个栏目直接对标曾经央视体育最知名的《天下足球》栏目，更是邀请了主持多年《天下足球》的主持人段暄亲自负责，这不仅可以确保内容质量，还可以帮助抖音赢取众多80、90后球迷的好感（国内80%的80、90后球迷都是看着《天下足球》长大的），既卖专业，也卖情怀，一举两得。
2.2 宏哥侃球
「宏哥侃球」是资深体育解说员刘建宏独家打造的足球直播综艺，合计12期。刘建宏和段暄一样，是央视体育另一个王牌节目《足球之夜》的制片人和主持人，甚至是第一位获得“金话筒奖”的体育节目主持人。从内容定位看，这个栏目主要以刘建宏通过邀约足球名宿和名人明星聊天的形式，为球迷带来不同角度的比赛解读和话题讨论。从嘉宾阵容看，不仅邀请了李明、徐亮、徐云龙这些足球大咖，还邀请了苏醒、姜昆、樊登、大能、隔壁老樊等跨界名人，可谓群星熠熠。
2.3 黄健翔谈
「黄健翔谈」是前央视主持人黄健翔的个人脱口秀节目，合计24期。从内容定位看，这个栏目主要是黄健翔针对每日比赛进行看点分析，讲述队伍、球员之间的渊源与故事，专业性较强，差异化低。
2.4 依然范志毅
「依然范志毅」是前国足名宿范志毅打造的直播节目。从内容定位看，这个栏目集合了脱口秀、电竞PK、国际球星挑战等娱乐内容，其次还会邀请02年世界杯国足的众多足球大咖一起聊球。范志毅作为前国足名宿，不仅知名度高，近年来在社交媒体平台也以独特的“范式辣评”成为了众多网友崇拜的偶像，话题热度非常高。
2.5 懂球大会
「懂球大会」是以段暄、黄健翔和刘建宏为常驻嘉宾，搭配各路懂球大咖赛前或赛后连线的足球直播节目。从内容定位看，这个节目主打前央视解说铁三角的卖点，再邀请其他足球嘉宾围绕每期的热门话题以直播火热开“吵”的形式为球迷们打造一款直播时代的另类足球节目。
2.6 黄家足球班
「黄家足球班」 是黄健翔联手德云社打造的直播节目，合计12期。从内容定位看，这个节目把足球的专业性稀释，加入了相声的元素，从而拓宽用户人群，让大众都能看得懂，看得进去，感受到足球的乐趣。
2.7 大咖侃球
「大咖侃球」由抖音官方出品。从内容定位看，这个节目主要以邀请体育、文化、财经、商业等领域的名人大咖，围绕世界杯开展泛人文社会热点话题讨的论，旨在打造一个专业又具有趣味性、互动性的世界杯抖音脱口秀。不过这个节目话题宽度太广，目标用户不精准。
2.8 Hi！足球少年
「Hi！足球少年」是世界杯官方赞助商海信独家打造的一款足球少年选秀节目，通过节目选拔足球热忱最突出的4名少年奔赴卡塔尔。这个节目邀请了李明、米卢等国足退役名将，还有柳岩、梁汉文这些娱乐明星，从嘉宾阵容看，这个节目以娱乐选秀为主，目前8期节目已全部更新结束。
三、比赛数据
历时29天的世界杯，将会进行64场比赛，最终决出冠军、MVP和金靴奖等。随着互联网泛娱乐的发展，相比过往大家主要通过电视观看比赛这样静态的形式，现在的足球比赛不仅拥有丰富的直播形式，而且每个平台都有自己独特的看球文化。
1. 直播间
抖音的比赛直播间，功能非常丰富，主要包含六个内容，分别是直播、聊天、阵容、赛况、看点和预测。
①「直播」就像视频弹幕一样，大家可以畅所欲言的一边看球一边聊天。在底部的聊天窗口，点击「分享」后，不仅可以保存本场比赛即时生成的精彩瞬间，还能邀请好友一起观看比赛直播，互动非常强。
②「聊天」这个功能，充分利用了抖音的社交属性，通过邀请好有，可以像建立群组一样快速创建一个直播聊天群，非常便捷。这个功能就像一个VIP包厢，为用户提供了一个相对私密的空间，满足不同用户的需求。
③「阵容」是指当场比赛的出场人员统计，包含首发阵容、球员统计和替补球员等信息，点击球员头像以后，可查看球员当场比赛的数据，包含进球、射门、传球成功率等，非常全面。
④「赛况」是指当场比赛的详细战况，包含各种技术统计，比如控球率、射门数、传球成功率等。
⑤「看点」就是把一场比赛的精彩时刻快速生成GIF，不仅可以作为当场比赛的赛况回放，也降低了用户传播的行动成本，吸引用户分享传播。
⑥「预测」就是竞彩，球迷可以通过金币预测当场比赛的胜平负、两队总进球数以及其他话题。
1.1 播放器
「播放器」的功能非常丰富，除了弹幕、倍速、视频画质和电视投屏这样的常见功能，抖音还支持多种类型的解说和视角方式。比如同一场比赛可以切换不同的主持人（央视主持人、退役运动员还有粤语主持），还支持球星、无障碍字幕、现场原声、战术机位、场馆全景等四种视角方式，观看体验非常丰富。
2. 数据
作为一项体育运动，比赛数据的统计分析至关重要。球迷需要查询世界杯的详细赛程、积分榜、射手榜、球队和球员的详细数据。
2.1 赛程
「赛程」主要为球迷提供世界杯的详细比赛赛程，用户可以直接预约比赛直播。当球迷预约后，抖音会一键生成比赛海报吸引用户传播，设计得非常巧妙。其次抖音的设计团队非常用心，相比其他产品的「赛程」栏目，他们会用一句简短的话来描述每场比赛的结果或前瞻，让「赛程」这个冰冷的栏目加入了温度。
2.2 积分榜
「积分榜」主要为球迷们提供8个小组的积分排行详细，包含胜平负场次、进失球数和小组积分。
2.3 晋级图
「晋级图」主要为淘汰赛服务，当小组赛结束以后，每个小组的前两名会进入淘汰赛，球迷可以通过这个图俯瞰世界杯的晋级明细路径。
2.4 射手榜
「射手榜」主要针对球员个人，统计的数据非常全面，包含进球、助攻、射正、关键传球、红牌、黄牌等数据。
2.4.1 球员主页
「球员主页」就是足球运动员的详情落地页，主要包含六个部分，分别是基础资料（姓名、年龄、身高、体重、位置、身价、效力俱乐部等）、精彩集锦、球员单场表现、球员累计数据、球员赛程和球员百科。
2.5 球队榜
「球队榜」和「射手榜」一样，包含进球、助攻、射正、关键传球、红牌、黄牌等数据。
2.5.1 球队主页
「球队主页」就是参赛球队的详情落地页，主要包含六个部分，分别是基础资料（世界排名、总身价、平均年龄、历届最佳成绩等）、精彩集锦、球队单场表现、球队累计数据、球队赛程、热门球星、球队阵容、历史数据和球队百科。
3、互动
从2014年开始，世界杯就成了一个全民狂欢的盛宴，可谓全民参与，全民娱乐。由于受政策限制，抖音没有足彩版块，而是通过虚拟金币的形式设计了有奖预测和世界杯乐园、足球答人等游戏。其次为了鼓励用户参与到世界杯的盛宴中，抖音还设计了一套世界杯特效，提升用户的参与度。
3.1 有奖预测
「有奖预测」其实就是足球竞彩。足球竞彩作为支撑足球运动发展的重要支柱，也是全民世界杯的主要动力之一。由于国家政策等原因，抖音使用了虚拟的金球币用来作为竞彩的筹码，增加娱乐性。
①「有奖预测」的页面设计比较简单，头部为用户的钱包（金币和红包数量），主视觉为当前比赛的对阵双方，右上角是活动规则和预测记录，右下角是赚金钱币和预测榜。预测的内容主要是比赛的胜平负、总进球数以及其他根据当前比赛设计的竞彩内容，比如梅西会不会进球，比赛会不会出现头球等。
②整个预测页面的内容，相对而言比较简单，主要以提升用户参与度和用户拉新为目的。当用户确认预测后，抖音设计了一个用户拉新的功能，只要邀请好友助力就可以获得10万金币，如果是一个新用户，则可以获得3倍奖励。
3.1.1 钱包
「钱包」的内容主要分为三块，头部是数据板，包含金球币数量、现金金额（金球币可以兑换成现金，提现到自己的银行卡）、奖品数量、优惠券数量和抖音成就（类似勋章）；中间是「金球币抽奖」，用户可以使用金球币进行抽奖，奖品包含足球、优惠券等周边商品；底部是「公益版块」，用户可以使用金球币购买足球等方式助力贫困地区的乡村学校捐建足球场。
3.1.2 预测榜
抖音统计了全站预测榜的球迷，分为全国榜、本地榜和朋友榜。榜单的设计，能增加球迷的攀比心理，提升用户活跃度。
3.1.3 金币游戏
3.1.3.1 世界杯乐园
「世界杯乐园」是一款足球游戏，玩法比较简单，用户通过体力可以让角色不断前进获取福利。而用户获取体力的方式需要做任务、看比赛以及邀请好友。
3.1.3.2 足球答人
「足球答人」是一款问答竞技类型足球游戏。这款游戏设计得非常有创意，三人随机组队，通过答题的形式模拟足球比赛在线PK。第一个回答正确的用户会有模拟进球的画面，吸引球迷抢答，其次模拟世界杯的赛制，胜利后可以晋级下一轮，最终决出冠军，非常有趣。
3.2 我的主队
每个球迷都有自己喜欢的球队，这支球队就称为「主队」，比如一个喜欢阿根廷的球迷就会把阿根廷看作自己的主队。这种带有鲜明爱恨的元素，也是足球这项运动的魅力之一。用户进入「我的主队」以后，需要设置自己的主队，选定后，将会展示主队的赛况、比赛数据和视频集锦。用户如果更换主队，还需要消耗金币，可见抖音产品团队对球迷的研究足够透彻。通过建立「主队」，不仅可以增加用户的黏度，还能建立关系链接，提升用户的留存率。
3.3 世界杯好物
3.3.1 燃情好物
「燃情好物」就是向球迷销售世界杯相关的周边商品，比如世界杯吉祥物、钥匙扣、手办、纪念品等物品。
3.3.2 吃喝玩乐
世界杯独有的文化就是喝着啤酒看比赛，所以「吃喝玩乐」这个版块接入了抖音的「生活服务」，球迷可以在抖音购买夜宵、小吃、奶茶等，非常方便。
3.4 大家都在拍
为了鼓励用户参与到世界杯的狂欢中，抖音为世界杯专门设计了一套视频特效，用户可以选择喜欢的特效录制，提升用户参与度。
四、总结思考
1.商业层
作为一个短视频平台，抖音为什么舍得花费巨资打造世界杯栏目，通过此次对抖音世界杯专题的拆解，我认为这是一次对针对80、90后群体的二次拉新和激活。从抖音重金邀请前央视主持人阵容看，抖音正在尝试通过世界杯这样能激发球迷情怀的载体把那些边缘用户重新拉回来。「DOU来世界杯」不仅直接对标央视体育曾经最知名的《天下足球》栏目，甚至连主持人都不变，既卖内容，更卖情怀。像笔者这样以前每周只会打开几次抖音的用户，通过此次世界杯的直播，变成了日均使用超过6个小时的重度用户，这在以前简直不敢想象。
当然，和四年前的优酷等互联网视频平台面临的情况一样，当世界杯硝烟散完以后，抖音又如何通过高质量的内容留住这部分用户群体，是一个问题。
2. 内容层
在过去，多数用户对抖音的印象是一个内容质量低劣、靠娱乐搞笑博眼球的短视频平台，但从此次世界杯的内容策划看，抖音不仅诚意十足，一口气推出8档原创足球直播节目，更是邀请了众多体育名嘴、知名运动员和跨界嘉宾输出高质量的内容。这对广大球迷来说，实在太过瘾了，已经很久没有这样的足球盛宴。而且相比过去传统的图文时代，加入了短视频传播媒介的世界杯，给了亿万球迷全新的看球体验，切换不同的解说风格、直播视角，在抖音直播间邀上几个好友，就可以一边聊天，一边看球，这样的看球体验，太爽了。
3. 体验层
抖音产品设计团队对世界杯专题的设计，无论是视觉、交互还是产品体验，都非常用心。比如在「赛程」页面，通过一句简短的赛况描述，不仅丰富了设计形式，还传递了设计的温度（其他的体育产品相比，「赛程」页面更像一个冰冷的机器，除了播报数据，没有任何情感）。还有像「足球答人」这样的游戏，完全以模拟世界杯晋级赛制的形式设计，在我首次试玩的时候，就开始为了“进球”进行“抢答”，最终拿下比赛冠军。这样让用户尖叫的设计，真的让人爱不释手。
参考文献：
当抖音进军世界杯，TikTok挖了NBA墙角
终于，我们都能在抖音看世界杯直播了
“抖”来世界杯：流量盛筵，意义几何？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
从事互联网医疗行业的年头也不短了，做过慢病的健康管理产品，负责过互联网医院整条产品线的建设，也参与过AI健康检测硬件产品的设计。
行业中互联网医疗行业中一些公司在对外的宣传中也衍生出了数字医疗、数智医疗等新名词，无论是服务于医生、还是医院或者是药企或者是保险，最终落地或者说绕不开的都是C端患者。那么，如今市面上互联网医疗C端产品的组成成分都有哪些呢？
在谈互联网医疗C端产品的组成前，我们先用一小段介绍下人体有哪些重要组成部分：
“脏”是指实心有机构的脏器，“腑”是指空心的容器。
人体五脏包含：心脏、肝脏、脾脏、肺脏、肾脏。
人体六腑包含：小肠、胆囊、胃、大肠、膀胱等分别和五个脏相对应的五个腑，另外人体的胸腔和腹腔分为上焦、中焦、下焦，统称为三焦，是第六个腑。
五脏和六腑的关系：脏与腑是表里互相配合的，一脏配一腑，脏属阴为里，腑属阳为表。脏腑的表里是由经络来联系，即脏的经脉络于腑，腑的经脉络于脏，彼此经气相通，互相作用，因此脏与腑在病变上能够互相影响，互相传变。
人体各个器官按照一定的顺序排列在一起，完成一项或多项生理活动的结构叫系统。
人体的八大系统：消化系统、呼吸系统、循环系统、泌尿系统、运动系统、生殖系统、内分泌系统和神经系统。
八大系统在神经和内分泌系统调节下，互相联系、互相制约，共同完成整个人体的全部生命活动，以保证人体生存和种族绵延。
看到这也许大家会纳闷，文章标题是“互联网医疗C端产品的组成和优势的建立”，PM大白怎么在开篇讲起人体的五脏六腑和八大系统呢，因为PM大白认为产品同样也是一个生命体，产品的0-1即是产品的出生、产品的迭代即是产品的成长、产品的矩阵即是种族的绵延，那么产品作为一个生命体，并且是互联网医疗产品，那么她同样存在着类似五脏六腑八大系统的组织，只是组织的名称不一样，大家不这样称呼而已。
不多说了，下文进入正题，看看互联网医疗C端产品的组成成分有哪些：
上文中提到了人体的五脏六腑：“脏”是指实心有机构的脏器，属阴；“腑”是指空心的容器，属阳。
那互联网医疗C端产品中（下文中简称为“产品”）的五脏六腑PM大白如何定义呢？
上文中选择互联网医疗C端产品中的几个重要模块定义为其“五脏六腑”，那互联网医院C端产品中将这“五脏六腑”串联起来的八大系统又有哪些呢？其实本质是各个维度中的供需关系的维护。
上文我们介绍了互联网医疗产品的核心组成模块，但是好像现在互联网医疗行业并没有迎来爆发期或者说没有得到大范围的应用和产生价值，那又是为何呢？
之前我在生物实验室工作，那个时候社会上就说生物行业是朝阳产业，未来可期；后来我转行到了互联网医疗行业，身边的朋友又说，互联网医疗可是互联网垂直行业中的朝阳行业，可是互联网医疗这个朝阳一直在海平面附近起起落落，一直没有升起来，更不用说什么日到中天的趋势，反而是不温不火。
更有甚者，同行们开始怀疑互联网医疗的价值到底在何处，难道互联网医疗就是卖药卖保险卖医疗周边延伸服务的工具吗？个人没有怀疑过互联网医疗价值，至少从没有怀疑过这个行业的未来价值的，只是限于当前的用户就医习惯、政策法规、相关技术以及医疗体系，医疗是一个严肃的产业，必须循序渐进与互联网、AI等新技术结合，这才是负责任的医疗行业从业者该有的态度，因为医疗健康事关生死。
如何在现在的这个行业处境下默默地建立起自己的优势才是正道，那么互联网医疗产品的优势在何处建立呢？其实有两个方向：资源和技术（也许对从事互联网医疗行业的大家来说，这就是大白话）。
资源型优势：通过不断地积累医疗业务相关的核心资源建立优势。
1）数据优势
定义：这里提到的“数据”仅指患者在所有医疗、健康活动中产生的用于组成患者健康档案的数据。
来源：线下医院（核心）、线上问诊、用药记录、医保数据、健康险数据、移动设备检测数据……
政策：近期国家相关部门出台了《“十四五”全民健康信息化规划》正是一个信号，出于患者个人医疗健康数据的重要性、复杂性、安全性、隐私性，也只有国家力量才有这种能力去实现；以下是从《“十四五”全民健康信息化规划》摘录的部分信息 ：
坚持统筹集约，共建共享。坚持统筹布局，深化共建共用，增强全民健康信息化发展的系统性、整体性和协调性，以构建大平台、大系统、大目录为导向，加大信息化建设统筹力度，加强信息化基础设施集约化建设，巩固政务信息系统整合成果，进一步破除数据共享壁垒，畅通数据共享通道，推进数据全生命周期管理。
到2025年，初步建设形成统一权威、互联互通的全民健康信息平台支撑保障体系，基本实现公立医疗卫生机构与全民健康信息平台联通全覆盖。
数字健康服务成为医疗卫生服务体系的重要组成部分，每个居民拥有一份动态管理的电子健康档案和一个功能完备的电子健康码，推动每个家庭实现家庭医生签约服务，建成若干区域健康医疗大数据中心与“互联网+医疗健康”示范省，基本形成卫生健康行业机构数字化、资源网络化、服务智能化、监管一体化的全民健康信息服务体系。
目的：打通各个医疗数据孤岛，构建患者全生命周期的健康档案、属于整个现代医疗体系的底层基础建设，服务于上层所有与医疗相关的应用服务，对线上互联网医疗尤为重要；
最终在健康数据这块的发展趋势，应该是国家完成居民全生命周期的健康档案的统筹和建设，制定授权标准，然后通过授权的方式提供给具备相关资质的互联网医疗企业在其产品中进行调用。
我们选取了腾讯医疗官网以及腾讯医疗面向C端用户的一款产品：腾讯健康（小程序），看看对方在数据建设方面的的产品。
①腾讯官网
产品服务对象划分为了两类：医疗机构与患者、区域医疗。
面向不同的服务对象，腾讯提供了不同的解决方案；面向医疗机构与患者，解决方案有：
前两种方案的实现必然需要与医保系统和医院his系统的对接，则涉及医保数据和his数据的互通；后两种方案则涉及到疾病和药品数据知识库的建设。面向区域医疗，解决方案是：微信电子健康卡开放平台、全名健康信息平台、区域智慧医疗平台、区域大数据云，这类方案完全符合了《“十四五”全民健康信息化规划》的目标。
②腾讯健康小程序
进入首页是不是发现与其他互联网医疗APP呈现的内容有所不同呢，腾讯健康既没有直接呈现大量的医生和科室，也没有直接呈现各种医疗服务包，金刚区显示的是“医保电子凭证”和“防疫健康码”，首页还还在功能区显示了“我的医保”入口，以及在服务推荐区1号位显示“本地医保码”领取和查看入口。
2）知识优势
定义：这里提到的知识主要指与健康管理，疾病治疗相关的医学知识。
来源：医生、医院、协会、医学百科以及权威医学书籍。
形式：直播、短视频、音频、图文。
目的：培养患者的健康习惯、提供患者自我健康管理的科学方法、提高患者对疾病各方面的认知以及自我治疗和线下就医的各种渠道和流程信息，对产品来讲是前期的流量入口。
我们选取百度健康官网和腾讯医典APP，看看同行在医疗健康知识这方面的重视程度和所做的努力：
我们可以看到百度健康的PC端官网没有一个医生，没有任何线上问诊等其他医疗服务入口，展示的是不同形式的疾病知识，其中包含短视频、直播、图文等形式，其实百度健康是用它的“医典”模块作为的PC端官网，如果不是百度健康搞错了，那就足以看出百度健康认为健康知识这块的重要程度；还有就是腾讯很早就做出了一款定位医学科普知识的产品——腾讯医典。
3）服务优势
定义：这里提到的服务主要指线上的问诊、开药、健康管理、挂号、等需要医生或其他专业医疗健康从业者或医疗机构参与的业务。
来源：医疗机构、专家、医生、药师、健康管理师、营养师等。
目的：医疗健康服务是最直观的能让患者感受到当前产品所具备医疗健康价值的模块，也是能帮助患者解决实际需求的重要模块，对定位于互联网医疗的产品长期发展来讲，医疗健康服务必定是后期的主要盈利入口，互联网医疗也必然会像现在的线下医疗体系改革一样摆脱以药养医的依赖。在所有的互联网医疗产品中，好大夫便是聚焦服务和坚持线上医疗服务为主要方向的一款产品。
4）商品优势
定义：这里提到的商品主要指药品、健康险、保健品等与医疗健康相关，由医疗服务延伸出的需要付费交易的实物产品。
来源：药企、健康险公司、移动健康设备等。
目的：在患者对线上医疗健康服务付费接受度还没有那么高时，采取的一种盈利生存手段；如果一家互联网医疗公司是靠药品、保险或其他非服务产品维持发展和成长的话，医疗服务型产品只是为这些盈利手段服务的话，也许会是一个成功的生意，但是个人宁愿将这类公司直接称之为医药电商公司、医疗设备提供商，而不是今天全篇讲的互联网医疗公司（或产品）；目前在京东健康上的药品收入与医疗服务收入占比接近7:1。
技术型优势：通过发明或优化新的技术让线上的互联网医疗服务流程发生革命性的变化，并且获得医生、患者以及医疗权威机构或政府相关单位的认可。
1）检测技术
大家去线下就医见到医生后的第一件事是做什么？是各种抽血化验等检查，检查前的医生问诊只是为了缩小检查范围。
我们必须接受的一个现实就是：如今没有设备检查，没有具体定量的检查指标，医生可能都不会下诊断，这也不能怪医院或医生，西医就是这个流程：检查-诊断-给药或手术，而这个流程中哪些是可以在线上真正解决的呢？我想应该只有“给药”了，这也是目前大多数互联网医疗公司以药品为突破口的原因之一。
说到第一步：检查，互联网医疗是无法在线上做到医院要求的各种指标检查的，所以最终线上问诊，医生给出的结果多是“可能”、“建议线下就诊”等结论，同时也是现在线下问诊开药不支持首诊的原因，因为在没有线下确诊的情况下开具处方药是有很大风险的。
SO如果患者不用去医院就能完成医院要求的部分疾病确诊的核心指标的检测，理想情况下那是不是互联网医疗就可以实现部分疾病的检查-诊断-给药的流程了，特别是常见的慢性病或者季节性疾病。
这就依赖于便携式家庭健康检测技术和设备的发展了，例如：血管纳米机器人，全体24小时记录生物体的各种生理指标。
2）沟通技术
患者另一个不愿意接受线下问诊治疗，或不相信在不去医院的情况下，就可以给出一个满意的健康问题的解决方案的原因是——信任的力量。
因为千百年来患者就医都是与医生面对面接触进行检查诊断，线上的方式中，也许目前的视频沟通比起之前的文字或者语音的方式更进了一步，但是不光是医生无法确认是否完整地了解到了相关的病情信息，就是患者自己也会担心自己是否把病情完整陈述给了对面的医生，医生是否有认真在给自己看病。
因为每个患者的语音表达力都不同，很有可能患者对症状的描述并不是真实的疾病表现；更何况线下就医，患者都有可能去多家医院咨询问诊。
这种线上的沟通方式与面对面的沟通相比，以及加上患者早已习惯的线下就诊方式，新的沟通问诊形式让患者对另外一头医生的信任感大打折扣。
文字沟通到语音再到视频，问诊沟通方式在不断进步，但还不够，与线下相比越真实越好，越趋于线下面对面的体验越能增强患者的安全感和信任感，也许目前比较火的虚拟现实、元宇宙在沟通方式上的应用在一定程度上改变这种状态。
以上提到的案例基本并不会在单一维度努力去沉淀自己的产品优势，而多会综合去发展，但是需要根据自身的优势和能力范去选择建立优势的方向。
例如做医药电商的建东健康，也在大力发展医疗服务，家庭医生方面的产品；专注做医生问诊服务的好大夫也有在向药店、医院合作方面发展；上文还未提到的平安健康更是在医疗服务、医药、健康险等方面同时发力（目前平安健康财报显示其在医疗服务和医药上的营收占比已接近1:1）。
其实上文提到的这些维度大致可以分为：基础能力建设层（数据+技术）、知识引流层、医疗服务层、医疗商品层。
医疗医药医保医健康，诊前诊中诊后整闭环；线上线下，院内院外，医院医生医护医全家；上有政策，下找对策，To G To B To C To all in；深挖坑，广积粮，医路漫漫修远兮！
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
界面设计的好坏，会直接影响到用户的使用体验，很多时候我们往往会直接拿到竞品的页面搬运到自己产品上，而没有针对自身产品的特点和业务加以思考。
这种做法理论上不会让自己的页面出错。但是很多人往往忽略了一点，就是别人这么设计的出发点是什么，是否匹配自身产品的业务流程，如果不了解这些贸然的去搬运设计，那么时间久了就会养成一个不好的习惯，导致思维不能得到足够的刺激和知识的沉淀。当需要我们专门进行设计构思时，就会遇到诸多困难。
如果是刚入手的领域，前期可以去进行适当的搬运参考，但是一定要了解别人设计思考点，明白其背后的原因，将其沉淀成自己的知识储备在脑海中。
过去60年，人类社会的数据发生了爆炸式增长。2008年人类大约创造了近10亿张DVD能存储的数据，这等同于过去5000年的人类创造数据的总和。12年，调研机构预测信息每隔18月会翻一倍20年，调研机构预测信息每隔73天会翻一倍
在信息爆炸的年代，人类进化的速度却是缓慢的，我们现在的大脑跟250万年前的原始人并没有太大区别。
我们的大脑每秒钟要接收约4000万次的感官信息输入，但意识一次能注意到其中约40个，其中短期工作记忆能处理的只有4±1个。
正是由于现代信息数据的大爆炸，多数产品日益臃肿的结构，以及人类有限的处理能力，所以呈现什么信息，以何种形式呈现的信息层级设计就非常重要。
作为设计师，我们有必要根据自身产品的业务方向，以及用户的行为和特征，结合信息环境，选择合适的信息，并以适合的方式进行组织和呈现，以便让用户获取并理解信息更容易，完成信息的组织和传达作用。
相关联信息需要进行归类，无论是什么类型的产品模块，我们在设计中应当做好信息分层，当两段内容元素具有关联性时，他们应当作为一个整体给用户展现。
（1）层级数量应靠近“3”
信息层级作为影响页面信息传达效率的重要因素之一，那么怎样做好页面的信息层级便尤为重要。网上资料大多都在围绕对比、对齐、亲密、重复四个基本原则讲解。
不可否认的是这四个方法对于我们排布信息层级确实起到了很大的作用，并且也是我们非常熟悉的。但其阐述得太过宽泛，在我们实际工作中面对复杂层级排版时，仍会面感到困惑，很难直接有效地利用。
于是我把优秀的案例进行收集并整理分析。
经过线上页面与概念的整体研究发现，他们在遵循排版原则的基础上，都存在着一个简单的规律：主内容的层级控制在三层左右。
如下图所示：
可以发现，三层左右的层级是最容易被用户识别的，且视觉上不易混乱。三层往后，随着层级越多其复杂性会成比增加。
比如我们看下面这两个例子，左边层级方面平铺直叙没有重构区分，使得层级复杂，造成用户识别效率变低。但其实我们只需要对信息加以归类并控制层级数量，瞬间就变得更简单且易懂。
因此，我们需要在着手设计前，首先思考一个逻辑：尽量将我们的内容层级控制在三层左右，且这三层内有比较明显的对比关系。
有朋友看到这肯定要问了，这个道理大家都懂啊，可是在实际工作中大多数拿到的信息都非常多，根本做不到保持在三层以内。别着急，本文的重点当然不是告诉你这么简单的道理，而是在面对复杂层级的时候，我们应该怎样去控制它的层级表现，从而让它在最终呈现上保持在三层左右，让用户获取信息的效率更高。
（2）源头筛选处理
源头筛选的关键在于接手复杂信息时，我们首先需要从源头上进行第一层的判断，了解这些信息是否真实地被需要。这也是我们大多数人容易忽视的一点，当然这也不能完全怪我们，因为通常需求给到我们的时候都是大致的概括，好一点的话还有个交接文档，甚至有时候需求拿到我们手上时，已经转好几手了交接人可能也不知所云，导致很难知晓其底层出因，
源头筛选的本质就是判断我们当前所要呈现的信息是不是必要的。
比如某些时候产品给到了我们很多信息，但我们并不一定会全盘接受，而是通过当前页面的业务场景去进行判断。确定每个信息的合理性，从而可以决定有些元素是否可以删减，提高整体信息设计的一致性。
过程需要我们对以下2点进行思考：
上述两个问题的确认，会影响我们对后面的信息排布。因此我们需要在源头，比如去和产品或者业务沟通，弄清楚该信息呈现的缘由以及必要性，这样能够帮助我们最后理清楚信息层级。
（3）在排布上降低复杂度
信息排布的本质是通过我们对信息进行主观的排列上的组织重构，来将复杂的层级控制在三层左右的区间里。从而保证我们页面的简洁性、规律性、识别性。
通过目前的实践总结，合理地安排信息层级的方法大致可以分为：分组、组件、组织、融入、弱化。
① 信息分组
信息分组是大家在设计时都能够想到的形式，分组能够将复杂的信息归组从整，从而降低整体复杂度，清晰线索。
我们常用的分组方式主要有三种：间距、分割线、卡片。
那么这三种方式有没有区分呢？
VIVO设计团队曾经就这个问题展开过用户调研，但结果表示，如果纯粹从用户的角度来讲，对其变化感知不大。但这三种分割方式会影响我们在呈现信息时的整体视觉观感，因此我们可以根据当前信息的复杂度作出以下规则：
② 利用组件拆分
组件其实是目前大部分设计师在进行信息排布时必备的部分，因此对于这部分设计师的熟练度也是最高的。而本篇想要强调的是，目前这几种组件对于我们信息层级的划分起到了比较重要的作用：树形结构、表格结构、步骤条、选项卡。
③ 灵活组织
通过对组织方式的调整，我们可以将多层结构的样式通过拆分布局来将其控制在三层内。
举个简单的例子：
从图中你可以看出左侧的层级较多，尤其是两层tab的叠加，视觉上就会显得稍微有点凌乱。我们可以通过将第二层tab换个布局，从上下结构变为左右结构，达到从视觉上简化层级的作用：
当然以上只是举了一个简单的例子。这里底层逻辑就是当遇到相对比较复杂逻辑时，我们可以通过改变结构使其交互逻辑更清晰，从而减少其复杂度。
④ 巧妙融入
我们可以利用信息融入的形式来减弱其对层级的影响。信息融入从本质上讲就是将某两种层级信息通过不同的组合方式，让其融入到同一个层级中。比如我们看下面这一个例子，产品设计中将button与查询项利用分割排列在一起，从而变为同一层级，通过这种方式有效降低了页面的复杂度。
当我们在进行B端布局时，信息融入这个方法用得比较多。比如我们最常见的标题、搜索和按钮等都放在同一行上。这样既能够节省视觉空间，还能够降低信息层级的复杂度。
但在进行信息融入的过程中，我们需要注意的是：如果放在同一层级会造成理解上的误解时，这个时候不要采用该方案。比如搜索框的位置，放在哪个层级决定了对应的搜索范围。
⑤ 信息弱化
信息弱化的原则是：将某些超出层级的部分进行弱化。
比如图中有5个层级，但其巧妙地将功能筛选融入到了当前的结构中，使得即使超过3层我们也不会觉得其特别复杂。
在很多时候，我们觉得信息混乱的原因，就是页面要素太多太花哨。
比如工作中的一个小卡片，也就是利用信息弱化去减少画面的复杂度：
因此我们需要学会对信息分级，不重要的信息就进行弱化，这样整体的呈现上会好很多。
但不可否认仍会有更复杂的页面，即使缩减也仍有过多层级，那么这个时候就一定要记得最开始的从源头去追溯这些所有信息是否必要。
（4）突出热区
当模块具有按钮、文字链、图片入口等需要下一步操作的关键元素，需要进行高亮显示，以此帮助用户快速定位目标。
图中 “Learn more” 使用文字高亮进行处理，通过颜色让用户快速定位入口，且不影响用户正常阅读，若使用色块按钮进行突出，模块会冗余，过于喧宾夺主。
当产品需要用户进行多步骤完成任务时，应当展示系统进度，让用户了解他们的行为操作在界面中所处于的位置。
比如下图中房屋装修信息填写流程，用户面对这种多流程任务时，耐心往往很低，我们可以在设计时添加系统状态进度条，时刻提示用户当前的节点，此方法应用场景还有注册登录、信息完善等更多场景，目的都是为了让用户达到交互可预测的状态，提升用户体验。
我们在设计内容复杂的网页时，建议根据产品诉求和用户目标，合理的放置元素，以此来达到目标，另一方面符合眼动规律的浏览顺序，可以让用户不会产生视觉疲惫，每个视觉点停顿时看到元素都是不同，提升用户体验。
在设计大面积文字排版时，应当注意字体粗细，它决定着我们的设计是否易读性高。
无论标题还是内容，字体过重或者过轻都会降低文本的基本识别度，而且遇到文字信息过多的情况，长时间专注文本的识别很容易出现视觉疲劳的情况。
在设计UI界面中，无论是长文字体还是模块元素字体，我们都要注意字体的重量，保证基本识别度的同时，优化视觉重心，确保用户在阅读时不容易陷入疲劳。
当界面中存在多个入口时，我们可以对这些入口进行优先级处理，以突出核心功能为目的，用户浏览界面的动作是大面积扫读的形式，这就意味着我们需要弱化无关信息，既保证了界面的基本美观性，又能够具备良好的体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
B 端设计离不开设计规范这个话题，而做好设计规范是一个庞大复杂工程，很多人对这些处于一知半解状态，在这个系列文章里我通过结合自己平时的项目案例来谈谈自己对 B 端设计规范的一些理解，希望可以带来一些启发。
本篇先谈谈设计规范制作的指导思想--设计原则，后续文章再展开讲一下常见各种组件的设计规范。
设计规范作为 B 端设计中非常重要的一环，它的作用主要体现在以下三个方面：
在日常工作中，当项目组收到一个新的需求时，如果已经具备了成熟的设计规范体系，其工作效率往往会得到很好的提升。最后上线的页面不用走查还原度。以下是具体工作流程：
通过前面内容我们知道了设计规范对于产品设计意义重大，那么制定设计规范制定依据又是什么呢？这里就要引出设计原则这个话题，设计原则是设计规范的总的纲领，所有的设计规范都应当以设计原则为基准。设计原则主要包含以下内容：
接下来就围绕设计原则清晰、高效、友好、可控这四个方面展开讲解。
清晰原则主要从视觉角度让界面信息传达合理，提高用户信息获取效率。主要包含对比，亲密，对齐，重复四个方面。
① 对比：
对比是指界面中为了区分信息层级，强化元素对比度，使用的很常见的一种手段，例如下图中利用大色块按钮与线框按钮形成对比来凸显关键按钮；又比如通过对文字字号加大，字体加粗，颜色加深来与弱文案形成对比，凸显关键文字信息。
② 亲密：
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
③ 对齐：
在界面设计中，将元素进行对齐，既符合了用户的认知特点（我们往往倾向使知觉对象的直线延续还是直线，曲线延续还是曲线），也能引导视用户视觉流，让用户更流畅地接收信息。
④ 重复：
重复是指相同的元素在项目中重复引用，作用是可以有效降低用户的学习成本，同时提高这些元素之间的关联性。
高效原则体现在便捷、轻量、简化、一致几个方面，目的是通过合理的方式让产品操作更加便捷；交互体验与内容更加轻量和简化；以及产品风格保持一致。下面结合几个常见案例说明如何应用这一原则。
① 合理利用拖拽--便捷、轻量：
在涉及到诸如上传文件，排序，滑动输入，搭建等需求时，合理采用拖拽交互往往可以打造更加便捷用户体验。
② 尽量减少不必要的跳转--便捷、轻量：
用户操作过程尽量减少跳转，以实现交互减步长，从而使用户操作更高效轻量。例如能用原位操作就不考虑展开收起；能用展开收起就不用气泡...依次类推（优先级从高到低：原位 ＞ 展开收起 ＞ 气泡 ＞ 弹窗 ＞ 抽屉 ＞ 新页面）
③ 放大点击热区--便捷：
放大可点击按钮热区，相对于较小点击热区，具备更丝滑操作体验。
④ 悬停即现--轻量：
利用悬停即现，避免信息过于重复啰嗦，简化页面提高阅读体验。
⑤ 折叠次要功能--简化：
页面功能按钮过多时，可将次要按钮收纳到一起，点击时再展开，外面只展示高频操作或重要按钮，保证页面内容简洁。
⑥ 统一样式--一致：
一致性是指在不同页面中相同操作应保持一致视觉与交互样式，可有降低用户学习成本与企业开发成本。
友好原则应贯穿用户操作前，操作中以及操作后三个阶段，给予用户及时反馈与帮助。
① 操作前：
在用户操作前给到合适的引导与帮助，有效减少用户迷茫感。
② 操作中：
通过交互效果以及页面样式让用户可以清晰感知到自己当前操作。
③ 操作后：
利用界面中元素变化清晰直观展示当前的状态
可控主要体现在自由和导航两个方面。
① 自由：
自由即指用户可以自由完成一些操作，例如回退，撤销，终止等。
② 导航：
导航是指用户随时知晓当前所在位置，而且可以利用导航随意到达目标页面。
通过本篇内容我们大概知道了制作设计规范主要方向，那么具体到每个组件上，我们该如何去设计呢？后续篇章将细分聊聊如何去设计 B 端常见组件的一些内容。
部分参考资料：
作者：huang。亮 来源：优设网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
谈到 B 端组件，很多人的印象是多且杂，想要全面准确的熟悉这些它们，需要我们对它有个合理的归纳总结。可能每个人会从不同的视角去做这件事情，我一般是按照使用场景去对组件分类整理。
下面我们根据这个分类框架来逐个聊聊这些组件。
说到基础组件，我想再将其细分成两个大类：一类是通用组件；一类是栅格/导航。怎么去更深刻的理解这两类的区别呢，我们可以打个这样的形象比方：
通过这个比方我们不难理解，栅格/导航是先给页面定下了基本框架，而通用组件则是在这个框架基础上搭建页面的所用到基本元素。
常见通用组件一般包含：色彩/字体/间距/圆角/分割线/按钮。需要注意的是，通用组件看起来似乎很简单，但却是决定产品品牌调性、界面细节品质的重要因素，在设计过程中需要引起我们的高度重视。
色彩
色彩可分为主色，功能色，中性色三类。下面谈谈这三类颜色如何配置，以及如何定义这些颜色梯度。
① 主色
主色的选取
主色作为产品的主要色调，在选取时应当优先选择品牌色，但有一点要注意的是 B 端和 C 端不一样，B 端一般不适合采用暖色系作为主色，如果品牌色为暖色调，则尽量考虑另选取一个冷色系作为主色，原因有两点：一是为了避免和警告、错误色冲突，产生歧义；二是冷色系带有商务、专业、冷静的情感，更符合 B 端产品调性。
同时主色选取应避免高亮、荧光色、灰调高的颜色。
主色的应用
主色在设计中常见的应用包括可交互、选中状态、可视化、插图、图标等场景。
② 功能色
功能色主要用于页面表征状态，常见有成功色、警告色、报错色等。
成功色
主要用于操作结果成功提示以及标签配色等。
警告色
主要用于警告提醒功能以及标签配色等。
报错色
主要用于系统报错提示、圆点提示、以及标签配色等。
③ 中性色
中性色在页面设计中应用非常广泛，从线条到文字再到图形等等都可以见到它的影子。
Tips：无论我们主色调是什么，中性色在调色时建议可加入适量的蓝色调，可让页面观感更清爽。
④ 颜色梯度
选取好了颜色后，怎么去更合理的定义每个颜色的梯度呢？（这里主要指对主色以及功能色定义梯度）
我的方法是给颜色加一层半透明黑/白遮罩，当我们需要浅色，通过调整白色遮罩透明度得到合适颜色；而当我们需要深色时，则通过调整黑色遮罩透明度得到合适颜色。
这样定义颜色梯优点是后续如果需要更改配色，只需一键替换全局色即可，大大提高工作效率。
文字
文字规范包含字体、字号、字重、行高等。
① 字体/字重
B 端字体/字重一般按照如下规范即可：
② 字号
不同于 C 端，B 端在字号选择上应当尽量保持克制。研究表明，Web 端上正文字号为 14 时，可以带来最佳阅读体验。因此在字号选取上应尽量优先选取 14 号字。如果想要区分文字层级，优先级从高到低的手法应该是颜色、字重、字号，也就是说一般尽量不采用字号大小区分文字层级。
③ 行高
行高可以参照下面的公式或行高参照表快速获得，如果通过公式算出行高非整数或非偶数，可就近取偶整数。
间距
关于间距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考虑到 4 的颗粒度偏小，因此可优先考虑 8px 的倍数作为间距值，在一些特殊场景可采用 4px 的倍数间距值。
分割线
分割线宽度一般统一为 1px 即可，同时注意颜色不可过深，以免干扰主体信息。如果需要不同层级分割线，可用颜色深浅来区分。
圆角
圆角大小一般根据使用场景控制在 2-3 个梯度即可，既不能全部统一一个圆角值，同时也不适合出现过多圆角值。同时圆角值不要过大，建议控制在 2-6px，以符合 B 端产品严谨专业调性。
按钮
这里从按钮的大小/状态/排放位置几个纬度来讲。
① 按钮尺寸
按钮高度一般情况下可以设置 3-4 种尺寸按钮，足以满足各种使用场景。至于按钮宽度，我们一般定义一个最小值，当超过最小值时，可设置 padding 值，按钮宽度根据内容自适应。
② 按钮状态
操作按钮过程中，按钮会呈现不同的交互状态。
③ 按钮位置
对于主次按钮组合，主次按钮排放位置应该怎么规定呢？可分为两种场景：一是当为从左到右阅读顺序时，主要按钮应当排在次要按钮左侧。二是当为从右到左阅读顺序时，主要按钮应当排在次要按钮右侧。而当一些特殊场景与这个原则冲突时，应权衡优先级做出取舍。
熟悉通用组件后，我们要通栅格/导航来确定产品页面框架。
栅格
栅格可以有效地保证设计的一致性、让页面布局更具规律，并提高团队协作效率。应该如何设计栅格呢？
① 栅格区域的划定
我们一般习惯将页面从下到上划分为背景层、全局控制层、内容层、临时层，而栅格区应当用在内容层。以下为常见几种页面布局栅格区的划定。
② 栅格自适应规则
随着页面宽度变化，一般来说是通过栏宽变化实现自适应。
③ 栅格栏数的确定
根据页面内容丰富程度，栅格栏数一般定 12 或者 24 栏，考虑到 B 端产品功能往往比较复杂，建议采用 24 栏即可。
④ 上下布局栅格
⑤ 左右布局栅格
导航
导航可分为全局导航与局部导航。
① 全局导航
全局导航包含顶部导航、侧边导航、混合导航。
这三种导航样式各具特点，应结合产品特性选择合适的导航样式。这里要注意的一点是，当产品可用性和用户体验产生冲突时，应优先保证产品可用性。
② 局部导航
局部导航包含面包屑、标签页、步骤条、分页器。
面包屑
面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系，并且可以快速回到上几级导航。
标签页
标签页可以帮助用户在一个页面实现快速切换不同内容，提升单个页面内容扩展性。可分为基本样式、标签样式、卡片样式。
步骤条
当任务复杂或者存在先后关系时，可将其分解成一系列步骤，这里就会用上步骤条。步骤条是引导用户按照流程完成任务的导航条，作用包含 3 点：一是让用户对操作流程长度和步骤有个预期，二是明确知道自己目前所在步骤，三是可以对用户的任务完成度有明确的度量。
步骤条一般分为横向与纵向两种样式。
步骤条小 Tips：当步骤条中有操作难度偏大的内容时，为了提高用户操作完成率，我们可以考虑把其放在靠后的步骤中，原因是用户前面已经完成了大部分简单操作，后面碰到高难度操作后，出于损失厌恶心理，不会轻易放弃操作。
分页器
当有大量内容需要展现时进行分页加载处理，分页器作用是可以让用户清楚的知道自己所要浏览的内容有多少页、当前所在页码、快捷前往目标页码。
分页器一般分为迷你、简易、自定义三种样式。
妙用分页器小 Tips：当表格中需要对数据全选操作时，为了提高操作效率，可将自定义每页跳数调到最大。例如一共 100 条数据，默认每页 10 条数据，要完成全选需要点击 9 次翻页，10 次全选（表格的全选框勾选后一般只选中当前页面全部数据，而不是所有页面总数据），当把每页条数调整为 50 后，则只需翻页 1 次，点击 2 次全选即可。
到这里关于 B 端的基础组件就全部梳理完了，后续我们就来揭开展示组件的神秘面纱。
部分参考资料：
作者：huang。亮 来源：优设网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
SaaS，英文全称 Software as a Service，意思为软件即服务。是通过网络提供软件服务，可以理解为一种软件交付模式，因为交付模式的不同也决定了和传统软件的差别。
在Saas之前传统软件需要购买后本地化部署，两者最大的区别在于，卖软件是将软件作为一个软件实体卖给客户了；而卖SaaS 软件的所有权还在厂商所有，提供的是“软件服务”。
Saas模式的提出者是Salesforce创始人——马克·贝尼奥夫(Marc Benioff) 在98年的时候提出。有两个原因促使马克·贝尼奥夫思考并提出Saas：
1. 传统软件部署实施交付的失败率非常高；
2. 软件的售卖价格非常高，很多中型、中小企业有需求但无法承担高昂的费用。
基于以上两个痛点及当时的现状卖软件给企业造成的影响，已经形成了恶性循环，市场受到严重的阻碍（据Gartner 高德纳公司（美国咨询公司）的调查研究曾表明：在所有CRM项目中大约55%没有达到软件用户的完整交付和预期目的，通俗的说是实施失败。）
从卖软件变成卖服务，其中的技术方式的改变、交易模式的改变，促成了软件时代的变革，对于传统软件公司来说，是一次大革命。原来卖软件给客户，一次性（或者分几次）收到钱了；改为卖服务后，这笔钱就不能在短周期内一次性收了，现行的SaaS模式通常是按照用户的使用年费来收取。
两者差别在于，软件商需要先主动改变可以短期的一次性高收入，从短期收入向长期收入的转变；
所以SaaS是长期主义的事情。
失败的Saas生意会出现一个问题：把长期生意做成了短期不可持续的生意；而短期生意带来的就是经营成本的剧增，导致生意不可持续。
所以，Saas模式决定了需要客户长期使用你的产品，才可以长期可持续赚钱，也就是通常意义上的客户终身价值（LTV）。
那如何做到客户长期使用，其实只有一种方式：长期为客户创造价值，做到帮客户成功（帮助客户的业务成功），从而持续续约。
吴昊老师，在《SaaS创业路线图》中的讲到：SaaS的本质是续费。这个观点我比较赞同，SaaS的经营本质在于可持续。
那么，决定SaaS的成功因素是什么呢？
我认为决定性因素有三个方面：产品强大且灵活、用户体验优质、服务的有效支持。产品强大和服务的有效支持不言而喻，具体我们来聊聊用户体验的价值。
传统软件在一次交付实施后，客户付80%的钱，剩下的20%能不能收回来就不那么重要。但SaaS模式，客户每年进行续费，若产品使用及用户体验满意度低，带来的影响和后果可能是客户终止续费。
因此，和传统软件相比SaaS的用户体验的价值就更为重要，它直接影响SaaS的续费和流失。
相信“用户体验”这个词大家应该非常熟悉，接下来我们从新认识什么是用户体验？
官方的定义是：用户在使用产品过程中建立起来的一种主观感受。“用户体验”这一概念是唐纳德·诺曼（Donald Norman）在20世纪90年代中期提出的。产品大神俞军老师说过用户体验的本质是“ 用户最小成本满足需求 ”。
基于俞军老师的定义、我的理解和思考，我认为是帮助产品和用户：最小成本满足需求，同时创造「美·好」体验。
怎么理解，因为用户体验是满足商业目标的一种行为手段，我们来看下用户体验的需要考虑的双边关系，就比较好理解了。
如下图：左边是用户最小成本满足需求，右边是我们企业最高效的服务用户。
企业的本质就是创造商业价值，商业价值来源于用户价值，同时考虑实现商业价值的效果和效率。我们常常会听到“投入产出比”或者叫“投资回报率”；对于商业行为中的一环用户体验也如此。
所以，用户体验的核心的就是：平衡用户最小成本满足需求，及企业最小成本服务用户。完成价值交换同时，满足持续性。
由此，可以看出在SaaS的产品设计中，用户体验其实承担着一个比较重要的责任，因为它关系到成本的边际和规模化的影响，一头是产品一头是用户。
那么作为产品体验设计师，我们需要具备一定成本意识，做好“成本管控的设计”，更本质来说设计过程中我们应该：把复杂留给自己，把简单留给用户。
因为我们在设计的过程中把握产品的交互方式、使用流程，在用户认知和效率层面有较强的把控空间，充分做到的以“用户体验”出发；那后续销售、交付、客户成功的全链路服务过程的学习效率和服务效率会呈指数级上升。
产品设计，应该把复杂留给自己、把简单留给用户。
关于用户体验，就不得不介绍一下“ 用户体验要素”模型，个人认为这是所有产品经理和设计师可以贯穿整个职业生涯中都需要经常性、反复对照思考的设计模型。
用户体验设计的价值远不止于让产品的视觉、颜值提升，设计更大的价值在于深入业务、洞察用户，帮助业务梳理产品信息架构、任务流程、交互体验。
构建系统的用户使用方式和工作模式，从而达成用户目标；通过达成用户目标完成价值交换、以此完成商业交易达成商业目标。
回顾Saas的商业模式，Saas的商业模式决定我们提供的这个服务不是靠人海战术，因为Saas软件即服务的含义是所提供的软件就等于提供自助化的服务，应该提供的是自助服务、开箱即用、开箱易用的服务。
那么Saas服务设计策略上，应该从降低系统使用门槛和提升用户的自主化服务两维度出发，根据这两个核心维度，我们构建了每刻SaaS产品体验的设计策略模型。
第一，设计“系统服务自动化”，这里的服务是功能使用的操作，符合“低认知、易上手”，那么从设计整个体系 需要遵守“易发现、低认知、高效率、有温度”的设计原则展开，以用户使用行为出发设计符合用户心智认知的功能形态和交互流程。
第二，设计“系统帮助自助化”，什么意思在全系统中构建帮助引导的自助化体系，用户需要帮助的时候提供人性化的引导帮助，我们从发现的维度、认知的维度，系统认知的维度，综合考虑用户系统的帮助引导。
设计原则，是指导我们做正确设计的方针。
设计原则的建立基于对用户使用体验全流程的基础上，以每刻报销的设计原则，围绕用户旅程、认知及行为出发构建。
1. 当用户接触系统从看出发，看见系统界面、发现操作入口；（发现）
2. 带着操作任务用户进入系统、看见导航、看见文字、看见按钮，都需要理解认知；（认知）
3.用户从何开始、如何操作，在完成整个业务事项的过程需要进行填写、选择、交互过程就产生了生产效率问题；（操作）
4. 当出现误操作或系统出错时，需要系统纠错提醒、容错的设计、帮助及引导，当完成整个业务事项后，用户产生一种的情绪感受，这个感受即是印象、评价、口碑。（感受）
紧紧围绕产品业务、用户处理特性业务的基础上，以终为始，回归到用户、业务、系统进行思考归纳的产物。
设计策略，是指导我们如何进行做正确的设计。
在SaaS产品分类上，常见的SaaS产品主要分为3类，行业SaaS、职能SaaS和通用SaaS。
每刻报销产品从核心业务来说是职能类Saas，从提升财务人员报销的发票审批、费用审核等效率展开，但报销的来源又源于普通员工的业务报销，业务报销发生又和所在行业的费用发生行为特征有一定相关性，所以是结合职能和行业Saas的属性，从用户体验的设计上需要考虑不同角色用户对于系统的业务理解、功能交织使用的不同诉求，这个设计过程探索研究是相对比较有难度的，以后有机会可以展开聊。
下图是每刻系统经过6年过程中统计的问题分布，分布比率呈现：认知问题 60%，效率问题 30%、情感问题10%。
我们在访谈客户调研发现，企业服务虽然客户已经用了好几年我们的系统，但财务部门还是经常性会碰到新入职员工的系统使用问题，甚至财务部门来新人时 以前系统发生的使用问题会从新出现一遍，所以企业服务有一个现象，客户是老客户，但新用户不断增加，新人一旦增加第一个遇到的问题就是认知问题，也辅证了我们对于Saas系统认知问题是用户体验的第一大问题。
帮助体系建立可以从系统层面体系化有效降低用户使用的认知成本，围绕用户角色的核心业务操作使用流程、洞察用户旅程上的疑惑和障碍点。用户首次进入系统要建立介绍和引导，足够简单、降低陌生感，来减少人力咨询回复的投入。
相比人，系统的自助化和自动化的服务，更具有复用性和规模效应。
SaaS的商业模式，按年使用账号来收费和传统软件的付费模式区别非常大，因为需要先主动放弃自己本来可以唾手可得的收入，从短期收入向长期收入的转变。
在SaaS模式的时代，商业模式决定其必须关注客户成功、客户持续续费、LTV客户长期价值。
SaaS的产品更需要重视用户体验，用户体验的优劣决定其产品的长期发展，SaaS的用户体验设计则关注用户使用认知和行为效率，以及系统服务自主化设计和系统帮助自动化设计，用户体验将在产品成长期后半程，逐渐成为SaaS商业模式不可或缺的产品竞争力。
作者：周大虾07 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com