Date 2025-11-20 12:45:54
莫奈是一个数据可视化平台，主要服务于京东内部用户。它以容器的形式聚合了京东城市与智能城市建设和运营相关的各种能力，并以可视化的形式呈现给客户。
作为京东莫奈的设计总监，我在过去三年里一直负责莫奈视觉平台的用户体验设计。由于我的日常设计主要是智能城市和数据视觉屏幕，我不仅是莫奈的设计总监，也是莫奈的深度用户或专家用户。在长期使用莫奈的过程中，我梳理了大量与视觉和体验相关的问题。这些问题在产品的日常迭代中得到了优化，但也有相当一部分难以解决和成本；同时，作为一名用户体验设计师，我与业务方、客户方和用户密切接触，因此在与大量用户沟通后，我也从用户方面收集了许多与使用体验相关的问题。在我总结了上述两个渠道的问题，并与产品方讨论和沟通后，我们认为这些问题严重影响了用户使用莫奈的效率，降低了莫奈授权业务方面的质量，提高了客户使用莫奈的成本。因此，我们必须规划一个产品迭代周期，对莫奈的体验进行密集的优化和创新，这是莫奈体验升级和修订的基本背景和原因。
本文的主要目的是与您交流和分享我在本次修订设计中使用的一些方法、流程和经验，希望为同行在类似的修订设计中提供一些参考。
京东以往案例复盘：
在 APP11.0 在深度解读系列的第一篇文章中，我们分析了基于生态系统修订的解释和思考。本文将重点关注视觉设计，阐明我们对本版本的设计理念和理念，以及如何外化各种场景，以帮助实现修订目标。
阅读文章 >事实上，在梳理整个体验升级过程之前，通过与产品负责人的多次沟通，我们实际上已经就体验升级的需求达成了共识，流程图解决了做什么和做什么的问题。
下图所示的体验升级流程比较通用，大部分产品的体验升级都可以参考以下流程进行。
这个过程有两个主要功能。一是可以更直观的与产品负责人、开发负责人等关键角色沟通，让大家对体验升级有一个全面全面的了解，方便大家评估工作时间、估算成本、安排时间；另一方面也可以让我自己的工作更有节奏，更有组织，避免工作内容长期停滞在某个环节，影响整体进度。
基于 STAR 介绍莫奈体验升级的必要性，背景概况部分。企业要想推动一个需求的顺利实施，就必须体现和满足需求的上下游和相关方的利益。从体验设计师的角度来看，作为用户的代言人，我们有责任将用户的声音转化为需求，并在了解了用户的大量反馈和建议后，将其推广到产品的一部分；从产品团队的角度来看，莫奈希望不断发展，不断为客户和业务方带来显著的效率提升和显著的成本降低。他还必须对过去旧产品架构进行深入的创新和优化；从前端工程师和研发学生的角度来看，过去不合理的底层代码设计使得产品在性能和稳定性方面存在很多隐患。因此，在日常迭代工作中，必须进行精细化导致研发学生人效率低，开发经验差；从上级开始 Leader 从成本、效率和体验的角度来看，公司的核心经营理念是“成本、效率和体验”，但成本的降低、效率的提高和体验的优化都取决于强大的技术和优秀的产品。莫奈的体验升级是实践公司核心理念的有效尝试。综上所述，体验升级有利于多方，符合部门整体利益，因此我们很快达成共识。
一般来说，当我们谈论用户体验时，用户是一个群体的概念，如上图所示，这个群体可以进一步细分为各种角色。理想情况下，每种角色的体验都是令人满意的，但在实际实施中，我们必须有策略和选择。因此，要有良好的产品体验，首先要了解用户群中不同角色对产品的使用情况，找到对产品依赖性强、使用频率高的用户和场景，然后优化他们和他们使用的场景。
从莫奈典型用户的使用场景可以总结出来：
首先，莫奈的主要用户是每个项目的产品经理和开发工程师，其中设计师也有相当大的使用强度。这三种用户直接使用莫奈，并将莫奈作为解决数据可视化场景建设相关需求的主要工具和解决方案。因此，我们称上述三种用户为莫奈的核心用户。在上下游同事将莫奈生产的作品传达并部署给业务方和客户后，可以反映莫奈的商业价值。
其次，每种类型的用户使用莫奈不同的功能模块的频率是不同的。从使用场景中，我们还发现莫奈的使用是上下游相关的，核心用户处于流程的下游。虽然中上游用户不是核心用户，但他们往往比核心用户有更高的决策权，因为他们更接近客户和业务。因此，我们优先考虑改善核心用户体验并不意味着放弃上游体验，而是在资源有限的情况下，我们的工作必须有选择和重点。事实上，我们通过建立核心用户的数量和声誉，向上游用户传达莫奈的价值和特点，并通过核心用户
了解核心用户是谁，那么核心用户的体验痛点是什么？
虽然我们在日常沟通中获得了很多用户反馈，收集了相当多的问题和建议，但作为体验升级的系统工作，为了更全面地了解用户体验的痛点，我们仍然设计了一个完整的用户研究活动。本研究主要采用在线问卷研究、离线访谈+用户行为观察的方式进行。在线问卷采用京东良好的研究问卷系统。除了向核心用户推送外，我们还向莫奈的主流用户和边缘用户推送了问卷内容。因此，问卷研究的整体覆盖范围相对全面。除了邀请一些核心用户进行离线访谈外，我们还从问卷系统中筛选出一些反馈问题较多、愿意参与离线访谈的用户。在线和离线都包括内部和外部用户，以获得更客观和真实的反馈。
用户研究的核心目标是充分收集用户反馈，量化和系统化反馈结果。定量结果可作为促进产品实施体验优化的关键基础，也可作为后续验证优化结果的对照项。
我们参考了这个问卷设计 PSSUQ 结合本次调查的目标，对整体可用性量表进行了部分调整。
PSSUQ 整体可用性量表可以从系统可用性、信息质量和界面质量三个方面量化体验结果，然后通过与行业基本体验值的比较，不仅可以了解用户对莫奈的满意度，还可以对莫奈当前的整体体验结果进行全面的总体评价。同时，根据三个方向的评分，也可以更详细地指导后续的设计优化方向，为设计决策提供更科学、更可靠的依据。
PSSUQ 作为一个通用模板，整体可用性量表的内容相对固定。为了避免多次打扰用户，提高问卷调查的效率，我在 PSSUQ 在此基础上，增加了少量关键信息筛选和用户反馈热情识别问题，使问卷内容更符合本研究目标。
问卷设计完成后，下一步就是问卷发放和结果分析。
PSSUQ 量表中的每一个问题都有 8 个选项，「1-7」是对该描述的认可程度，得分越低，用户对该描述的认可程度越高；「NA」代表用户无法评估此描述。本次调查通过京东良研发发放在线问卷。 100 共收到有效问卷反馈 87 份（大于 PSSUQ 最低样本数量：20）表明问卷结果具有良好的可信度，其结果值得进一步研究。
问卷数据的整理和统计可得出以下结论：
内外用户对莫奈在系统易用性、信息质量和界面质量三个维度上的行业经验值（平均值）不满意。莫奈系统的整体体验质量与行业内同类产品存在明显差距。莫奈用户群的整体热情较高，沟通和反馈意愿较强整体评分结果与相关学生的日常沟通结果一致。以上评分结果也反映了体验升级的紧迫性。作为由设计驱动的修订设计，设计侧面临着巨大的压力。
在设计问卷的过程中，我也提到了我们的问卷 PSSUQ 在测量表的基础上，对研究目标进行了部分调整和优化，在线问卷的最后两个选项以问答的形式为研究用户提供了反馈渠道，我们通过问答收集了用户反馈的各种问题 80 在许多情况下，我们使用亲和图来整理这些反馈。顾名思义，亲和图可以使具有类似特征和相关属性的问题更加接近，从而对分散的问题进行分类，便于从混乱的问题中找到规律，通过比较不同类型问题的比例，更直观地了解用户反馈的问题主要集中在这些方向上。
如下图所示，产品的响应速度和稳定性、模板和组件丰富度是用户反馈问题最集中的两个项目。前者影响用户最基本的使用体验，后者决定了产品能在多大程度上方便地为用户服务。良好的稳定性和响应速度可以让用户关注任务本身，使用模板可以最快地输出工作，降低新手的使用阈值，丰富的组件可以满足用户在各种复杂场景下的业务需求，降低组件二次开放的成本，提高交付效率。对于这两个大问题，首先，对于当前产品日常迭代中可以优化的点，我将向产品团队提出需求，并逐步优化日常迭代；然后，对于需要“伤害肌肉和骨骼”进行底部优化和长期运行沉淀的问题，我们将进一步收集和改进相关信息，并将相关问题整理到修订任务中，进行系统的解决和处理。
在「05、体验痛点分析-用户研究部分」本次访谈的用户来源已经介绍，但在实际实施过程中，我们还邀请了一些需要面对面沟通或演示才能理解的在线问卷反馈中模糊、难以理解的问题的用户。
访谈首先通过与用户的简短沟通了解用户的职位/职业以及使用莫奈的主要场景、频率和设备，然后通过为用户设置一两个简单的任务，观察用户在完成任务过程中的行为、表情和语气，了解莫奈在一些典型的使用场景中的易用性和可用性。例如，对于视觉设计师：请在画布中添加条形图，将条形图的颜色修改为绿色，激活纵轴辅助线，将辅助线修改为虚线样式..；
对开发工程师而言：请在画布上添加一个环形图，并使用它 json 为环形图添加一组动态数据..。之后，用户完成基本任务后，我们会更详细地沟通用户关心的问题，了解用户更详细的反馈。对于用户反馈的问题，我们将以需求的形式提交给产品团队，并在公司内部需求和研发管理系统的“云”中同步添加反馈问题的用户。随后，当需求状态更新时，问题反馈可以及时更新。这样，从需求提交到需求最终测试验收，受访者反馈的问题就可以在线跟踪和闭环。这不仅是我们团队的责任，也可以增强用户对莫奈的信任，并希望活跃用户能继续为莫奈提供建议和反馈。
通过在线问卷调查和离线访谈，我们充分了解了用户的愿望。接下来，我们通过用户体验 5 元素模型，根据产品建设的上下游合作关系，进一步总结各种问题，将每个具体问题汇总给相应的角色，并由相应的角色制定具体的解决方案，然后通过线下会议同步各自的解决方案，并对解决方案进行评审和沟通。因此，可以仔细安排所有关于经验升级的事项和具体任务，然后进行资源投资，促进升级工作的具体实施。
几天前，我去盒马鲜生参观了一会儿，体验了盒马的商品类别、用户移动线、展示柜分布设计、APP交互、品牌设计等方面。
阅读文章 >
用户体验 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 输出设计草案的研发可以开发，由于编辑器页面的类型没有系统地梳理，一些组件在同一页面的不同位置有不同的形式；有些组件在特定页面中的使用不符合组件的功能和使用，导致界面设计、开发和维护成本高。
新的修订设计，在设计开始时，联合产品对编辑器中每个模块中包含的各种组件进行梳理，通过列出每个模块的组件，然后重新梳理组合、重量和合并，我们可以知道当前编辑器界面中共有哪些类型的组件，以及每个组件在哪里使用，组件原子化也通过间距规范和使用场景示例来解决如何使用的问题。
原子化组件简化了组件的数量。同时，每个组件也根据自身的功能和用途进行了优化。在这个过程中，还考虑了组件匹配和组合使用的适应性和显示性。例如，对于颜色选择组件，默认情况下，我们在16个系统中显示颜色值，并在颜色值后以百分比显示颜色的透明度。我们还在颜色值后面添加了一个小的颜色块来预测颜色值。这种设计考虑了学生使用莫奈的开发和设计场景。对于开发学生来说，他们习惯于在代码中使用16进制色值，而设计师更习惯于 RGBA 或 HSLA 因此，虽然16进制的颜色值也可以包含透明度信息，但我们仍然在颜色后面增加了百分比和小色块，这帮助设计师确认了颜色的正确性。此外，我们还通过切换颜色显示模式和自动输入校正来确保无论用户输入的颜色如何，最终属性栏都以统一的格式呈现。在这次体验升级中，这样的优化数不胜数。
莫奈的动态效果设计主要有两种类型，一种是用于页面视觉效果创造的氛围装饰动态效果，另一种是用于功能和信息传递的交互动态效果。这两种动态效果都通过“节奏感、轻”的设计风格来传达技术和高效的视觉感受。
在这次动效交付中，为了保证动效的清晰度和流畅性，减少动效的体积，提高动效的加载速度，采用了动效文件 Json 该动态效果由浏览器在网页端实时渲染，具有矢量动画的特点，能够适应各种设备和屏幕分辨率，具有优异的前端呈现效果。
主页科技感流光氛围
加载页面和大屏幕 Loading 动画
1. 产品登录页
2. 产品主页-我的可视化页面
3. 改版前后比较我的可视化页面
4. 大屏幕模板页面
5. 可视化场景编辑器页面
6. 可视化场景编辑器页面修改前后对比
7. 产品主要 ICON 设计
在视觉设计优化后，我们将优化莫奈典型的用户使用场景，以及一些集中在线问卷和线下访谈中的用户反馈问题的场景。我们的互动优化的目标是“简单、流畅”。
各种图表的属性和配置项设置相关的交互优化是首先进行交互优化的。
莫奈作为一个视觉场景构建平台，为用户提供各种图表，每个图表都有“风格、数据、交互”三种配置属性，三个属性，从图表外观、图表显示数据、图表可以与用户互动三个维度解决数据视觉呈现中图表最基本的需求。由于图表经常用于数据视觉呈现，与图表配置相关的操作自然是相当高频和常用的。在当前版本中，图表配置项有两个主要问题：一是图表配置项太深，用户需要多次点击修改内容；二是批量修改当前版本中多个图表的相同属性，导致用户图表配置成本高。我的优化方案如下。
优化图表配置项太深，用户需要多次点击来修改某个内容
要解决这个问题，首先要知道这个问题来自哪里。在与产品、研发学生和部分用户进行了深入的采访和沟通后，我发现图表配置水平过深的主要原因有两个，即产品规划和设计展示。
具体来说，产品层面存在三个问题：
① 产品对当前图表配置项目的结构梳理是基于程序的逻辑，而不是从用户的角度进行总结。例如，在当前版本中，如果用户想修改柱图的颜色，操作强度如下：样式>数据系列>系列名称>形状设置>颜色设置。为什么这条路径是这样设计的？因为颜色属性的后端代码就是这样的结构。这一路把用户最容易理解、最直观的属性名放在路金的最后，其实很难理解之前呈现的内容和术语，尤其是新手！用户想要改变颜色，Ta 首先，我们需要知道什么是数据系列，其次，我们需要知道形状设置可能包含哪些属性。正是因为它有一定的门槛，不直观，用户在第一次进行上述设置时，往往需要点击风格一级菜单下的多个属性，并反复尝试确认，以最终完成颜色修改的设置，这样的使用过程自然会给用户一种“太深层次”的感觉
② 图表配置结构冗余，不够简洁。或者上面的栗子，用户需要触摸第一个来修改颜色 5 等级。但是这种详细的分层结构设计是必要的吗？答案不是！因为只有用户关注是有用的，产品应该提供用户想要的内容，而不是强迫用户产品的所有功能，所以我们不需要列出后端图表的所有属性，适当的配置，合并一些类似的属性，然后通过“更多”按钮隐藏一些不重要的图表内容，这样图表配置可以减肥，用户更容易使用。
③ 图表配置项的各种属性不遵循用户在属性列表中使用的频率和习惯。排列在前面的属性不是用户最常用的属性，所以用户应该从上到下“搜索”列表。这种使用过程中的挫折一方面影响了用户使用产品的效率，另一方面也加深了用户“太深”的感觉。
如果你知道问题从何而来，解决问题就会变得简单。首先，我们与产品经理合作，对莫奈现有的东西 60 各种图表组件逐一梳理配置项。当所有图表的配置项都以思维导图的形式呈现时，它们的共同点和类似项目一目了然。此时，可以解决之前存在的“图表配置结构冗余、不精简”问题。以前存在的 01 与 03 问题点，在上述梳理工作完成后，有一定的优化和改进空间，但仍存在影响设计和产品决策的不确定因素。例如，“属性列表中最常用的属性是什么”，我们无法通过采访几个用户得出可靠的结论。一方面，我们通过增加配置区域的数据埋点，分析用户对各配置项目的频率，为后续的持续优化提供决策支持。另一方面，我们还参考和研究了一些用户数量大、设计质量高的同类产品，以进行有限的优化。
另一个原因是属性配置列表的结构和布局设计具有“深层次、空间利用率底”的特点。
如下图所示，左边的图片显示了旧版本莫奈的配置列表设计结构。可以看出，旧版本的设计完全以树结构的形式自上而下排列，并以每个级别向右缩入一个字符的形式进行分层。旧版本的设计基准尺寸为 1440PX，属性配置栏本身较窄，逐步缩进的策略导致信息显示困难；其次，当树结构有更多层次时，一些一级属性会被挤出一个屏幕，用户需要频繁滚动鼠标滚轮来查看所有信息。综上所述，旧的设计策略也给用户一种“深层次”的直观感觉和互动体验。
新设计首先增加了配置属性栏的宽度，使其能够横向显示更多信息；其次，新设计将精炼的一级属性标签固定在属性配置列表的左侧。与以前相比，这种设计总是能让用户清楚地看到所有的一级属性，用户可以随时切换到各种属性，右属性内容的滚动不会影响一级属性的位置，从而给用户良好的整体观点和使用的便利性和确定性。最后，新设计采用分离线和色块的组合来表达属性列表中的层次关系。在逐步删除后，配置列表在视觉上更加整洁和一致，空间利用率进一步提高。
在当前版本中，优化“批量修改多个图表的相同属性，导致用户图表配置成本高”的交互问题
在构建数据可视化场景的过程中，用户迫切需要对多个图表的相同属性进行统一修改和一次性调整。例如，在当前的可视化大屏幕上 N 在这个时候，用户想要一个图表 6 一个图表的横轴颜色调整为相同的绿色。从用户的角度来看，此时的操作应首先选择 6 一个需要调整的图表，然后找到横轴颜色设置项，然后统一调整颜色。但是，在莫奈目前的版本中，如果用户按照上述流程操作，他们将看到下图左侧的示例：图表多选后，对齐、坐标等基本项目仍然可用，而与属性相关的其他设置尚未聚合和呈现。在这种情况下，用户只能实现最初的目标 6 一个接一个地调整图表！显然，这种操作不符合用户的预期，大大降低了用户的操作效率。
以上问题是一个经验相关的问题，但也是一个强大的技术相关的问题，我们想让多个图表类似的项目聚合显示，首先可以在底部清楚地梳理每个图表的配置，幸运的是，我们解决了第一个问题：“配置水平太深”，已经完成了 60 通过对多个图表的详细分析，有了这项工作的基础，当前的问题就不那么困难了。例如，右边的例子：当用户选择更多的图表时，图表的类似项目将聚合在一起，并从用户的角度对属性类别进行分类。这种分类打破了按照图表固有属性排列的传统惯例，而是将图表固有属性集成到用户易于理解的类别中。这样，用户在选择更多的图表后，可以方便地调整和修改图表的各种属性，这样的操作符合用户的习惯和期望。
作为创建数据可视化场景的第一步，新大屏幕的易用性直接给了用户对莫奈最直观的第一感觉。新大屏幕的互动优化主要有三个方面：创建过程、模板预览和模板显示。
创建过程优化：首先，旧版本的创建过程：新的可视化>选择模板>大屏命名>创建成功。 在这个过程中，“大屏幕命名”是不必要的，因为用户在创建新的可视化大屏幕时可能会有各种需求。也许用户只是想看看创建后内部编辑器是什么样子的。也许用户有实际的项目，但目前的项目名称尚未确认，所以在这个时候添加一个不可跳过的步骤真的很不舒服，此外，大屏幕创建成功后，可以通过多种方式轻松修改大屏幕名称。因此，用户创建可视化最基本的目标是更快地进入编辑器并开始设计和创建。因此，删除“命名过程”显然可以使整个交互过程更加顺畅。
模板预览和模板显示优化：原设计，当用户点击创建大屏幕按钮时，会在页面底部拉一个小抽屉，抽屉包含一个空白模板和有限的其他内容模板，在如此狭窄的区域显示这么多内容，无论从交互效率还是视觉效果，都显得特别僵硬和不舒服。新设计首先是全屏扩展，尽可能充分利用页面空间。
在模板显示和预览方面，我设计了列表显示和缩略图分布显示两种方式，并添加了分类标签和搜索按钮。此外，联合产品还增加了模板收集功能，使用户可以收集他们最喜欢和常用的模板，以便以后更快地使用
在模板预览方面，在两种布局模式下，当用户鼠标滑动模板缩略图时，模板会以较大的视图动态呈现模板内容。在列表模式下，模板预览窗口固定在页面右侧区域；在缩略图分布模式下，预览窗口根据鼠标指针的位置激活。当用户选择模板时，点击底部创建按钮进入大屏幕编辑界面，用户可以根据模板内容进一步完成自己的定制设计。
如今，各种移动终端产品已经形成了用户使用算法推荐+独立搜索产品的习惯。目前，这种习惯已经逐渐从移动终端转向 PC 终端转换。搜索可以从海量信息中最快地找到用户关心的内容，从而提高搜索功能的易用性，显著提高用户使用莫奈的效率。
在过去，搜索功能根据不同的模块和场景分布在不同的位置。用户需要找到相应的模块进行搜索，以降低搜索的方便性和易用性。在保留以往搜索能力的基础上，新设计增加了全球搜索，用户可以在一个位置完成组件（优先显示当前画板中的组件）、搜索和搜索属性、帮助等内容，进一步提高搜索效率。
通常由数据可视化场景组成 N 由数据图表和其他数据元素组成的多个页面进行呈现和显示。这些页面包含大量元素，这些元素的管理主要通过大屏幕编辑器页面左侧的图层管理面板来实现。一般来说，我们有三种主要的图层管理方法：命名、分组和搜索。
命名组件是一种耗时和麻烦的行为。当我们做用户研究时，我们发现大多数用户没有标准化组件命名的习惯。在大多数情况下，组件在图层面板列表中使用默认名称或默认名称+1、2、3 形式存在。因此，当页面上有许多组件时，通过组件命名很难找到组件，因此自动生成缩略图的形式可以提高用户体验，而不是花费大量时间为图层命名。缩略图以快照的形式保存当前组件的最新状态截图，以帮助用户更快地将图层组件与页面上的内容对应起来。
在新的设计中，层也取消了缩进字符的效果。我设计了一个更明显的组对象示意图标，并在组列表中添加了深色块，以完成组对象与列表中其他元素之间的区别。新的设计使组对象更容易找到和识别。
此外，我们还增加了图层列表的搜索功能，帮助用户快速定位已知名称的设计元素。
体验升级是设计主导、产品与研发密切合作的结果。体验设计师作为最接近用户的群体，是产品与用户沟通的桥梁。体验设计师的基本技能是始终关注用户的愿望，并将用户的微妙嘲笑和各种反馈转化为体验痛点，并制定相应的优化策略。设计和产品本身的热爱也是设计不断改进和体验不断改进的关键。良好的设计不仅服务于产品，帮助用户，而且实现了设计师本身。
我已经三年多没有为莫奈提供设计支持了 KPI 在要求和外部压力的情况下，通过公司内部需求管理系统“行云”向莫奈提交 231 个人体验优化建议；莫奈产品和R&D团队以线下和线上的形式进行。 20 许多专业分享。正是这些积极和持续的日常努力使我与莫奈产品团队建立了非常友好和密切的联系，这也为促进体验的升级和修订提供了巨大的帮助。我认为作为一名体验设计师，我们不仅应该对用户有同理心，为用户创造快乐和舒适的感觉，而且对同事，工作场所合作伙伴有相似的同理心和同理心，体验人、环境和生活，试图磨练他们创造良好的生活体验能力，并应用于体验设计师的专业工作，我相信如果这种实践，将能够在职业和生活中取得良好的成就。
好的产品必须是不断关注用户需求和迭代开发的产品。好的体验设计也必须伴随着产品的不断优化和不断改进。复盘的意义不仅在于沉淀过去的经验，更在于为未来更好的体验积累能量。
如果这次分享能给大家带来一点启发，我会感到非常荣幸和快乐！ 希望大家能和我有更多的交流，莫莫达~~~
欢迎关注作者微信微信官方账号:「BYMD」
