摘要：文章从James Garrett提出的用户体验要素视角出发，总结性能监测类产品进行体验升级的重要性。通过用户访谈、直接观察等调研方法得出改进机会点，并制定相应的优化策略。在此基础上，结合业务背景进行B端性能监测平台优化设计实践，通过改善产品功能、交互方式、页面布局、可视化呈现等方式，有效提升产品的易用性和信息传达效率。本实践可以为性能监测类B端产品的优化设计提供参考依据。

关键词：用户体验要素；B端设计；应用性能监测；交互设计

近年来，在企业数字化转型需求的持续驱动下，互联网公司开始大范围布局To B的企业服务领域，面向企业内部应用的交互设计逐渐成为设计领域的重点研究方向。同时，据“中国企业级应用软件市场研究年度报告”指出，2021年，中国企业级应用软件市场快速回升，增速达16.2%，市场规模达606.2亿元。随着市场规模的扩大，越来越多的企业开始注重并使用性能监测产品提升分析能力和减少潜在风险，但高复杂度的企业级应用更重视功能建设，对使用体验较为忽视，大到功能范围与交互流程，小到页面布局与组件选择均具有较大的优化空间。因此，本文聚焦性能监测产品的交互设计优化研究，以百度应用风险监测平台为例，按照用户体验五要素中的表现层至范围层的脉络，分析如何运用交互设计策略提升性能监测产品的使用体验。

一、用户体验要素及性能监测类产品概述

（一）用户体验要素概述

用户体验（User Experience）这一概念最早被广泛认知是在20世纪 90 年代中期，由用户体验设计师唐纳德·诺曼（Donald Norman）所提出和推广。用户体验最被普遍认可的一个定义来自ISO 9241-210，是指“人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应”。这个定义清晰地界定了用户体验附属于“人”，指向“感知与反馈”，时间限定在“使用和参与过程”，对象是“产品、系统或服务”。

James Garrett在《用户体验要素》一书中将用户体验要素分为了五个层级：战略层、范围层、结构层、框架层和表现层（图1）。战略层指产品目标和用户需求，提出产品开发目的；范围层将战略层提出的目的和需求转化成产品功能；结构层构建用户体验，通过信息架构和交互设计来实现；框架层确定界面布局和信息呈现效果；表现层解决框架的呈现和用户对框架层的感知问题。

（二）B端性能监测类产品概述

随着各企业的业务发展、用户以及数据量的不断增加，系统面临的承载压力使得性能测试与风险预警愈发重要。常见的性能监测产品有 Grafana、IBM Instana、Dynatrace、U-APM等。性能监测类产品为企业提供应用性能监测（Application Performance Monitor）服务，包括查看系统整体的运行状态、健康程度、调用资源的消耗或者异常问题等，能够帮助企业从根源上快速定位问题，提升系统稳定性。

二、用户体验对B端监测类产品的重要性

（一）用户层面——简化复杂操作，提升工作效率

性能监测产品具有业务性强、逻辑复杂、学习成本高等特点，繁琐的操作流程会影响工作人员的效率，浪费大量资源。简化产品的复杂操作，缩短核心功能的触达路径，可以提升产品使用流畅度，方便业务的开展。

（二）企业层面——匹配业务场景，助力降本增效

增加防错防呆等设计手段以提升用户体验，有利于减少用户的工作失误，更好地实现产品业务目标，也可以降低因人为疏忽造成的风险，规避损失。提升产品操作流程的体验，有助于减少前期的培训成本和中后期的平台运维成本，助力企业实现降本增效的目标。

（三）产品层面——不断完善细节，促进优化迭代

随着行业的发展与市场的不断变化，产品所提供的解决方案必然要顺应时代发展而进步。在保证核心功能可用性的前提下，提升用户体验是产品更新迭代中不断追求的目标。产品依托于用户升级的需求不断进化，有利于保证其竞争力，延长产品生命周期。

三、用户体验要素视角下性能监测类产品的优化策略

正如百尺高楼也需要从整体构思到结构设计再到细部构造一样，以用户体验要素视角自上而下梳理B端产品问题，深入思考产品的目的和优化方向，可以将细碎的问题归类整理，洞察改进机会点，最终帮助产品在激烈的商业竞争中保持竞争力。

（一）范围层

确定功能范围：运用焦点小组、问卷调研等定性定量方法进行用户调研，对产品核心功能进行可用性测试，有助于了解真实的用户需求，根据调研结果进行核心功能的优化。在功能上线后，应及时跟进后续反馈，进行产品迭代。当面对资源分配取舍的情境时，可以通过定义优先级的方式，进一步筛选价值高的内容，暂时搁置价值相对较低的内容。

明确内容优先级：设计师在对复杂业务进行视觉转译时，产品页面及流程也相对复杂。尽管产品提供说明文档，也会安排专门的实施人员进行培训，但用户在具体使用过程中还会遇到一些问题。用户的根本诉求为能够快速定位到问题的答案，排解自己的疑惑。因此如名称解释、操作提示等简单问题，可以提前预判问题点，利用文字提示的方式给出轻量化的快速解答，就地化解疑惑。若疑惑未被消除，可以提供入口，将用户引导至该问题对应的详细说明文档。

（二）结构层

梳理信息层级：性能监测产品有着复杂的业务场景，如何实现更轻量简单的交互是设计的进阶目标。设计师可以在结构层发力，梳理对象的信息层次，缩短功能路径。比如将对象的入口、列表、详情框定在3层结构范围下以及2次点击内，让用户直接触达功能节点，实现信息的快速呈现。

简化交互方式：在使用复杂业务场景下减少用户的操作成本，可以采用更加轻量且不打断用户的交互形式。例如常见的“查看详情”功能，采用抽屉弹窗代替新页面跳转，不仅节省了往返页面的时间，也有助于使用者更清晰地找到详情数据的来源。还可以使用气泡卡片代替模态弹窗、toast 代替通知提示等方式，减少用户心理负担。

（三）框架层

聚焦核心内容：突出重点、信息降噪可以减少用户的检索成本，适当的留白可以增强画面的呼吸感。在针对页面中的单个模块优化时，可以通过调整文字内容的字重、字号以及透明度的方式增加信息对比度，减少冗余元素干扰，提升页面内的“信噪比”。

优化布局与动线：合理的页面布局对于复杂程度较高的性能监测产品尤为重要，用户通常以从左到右、从上到下的“F”型视觉动线进行页面的浏览，因此，在设计产品页面布局时，应增加重要内容的页面占比，对模块进行排序，按照用户动线放置排序后的模块内容，这样做有利于功能与信息的有效传递，帮助用户降低理解成本。

（四）表现层

建立视觉规范：为了保证页面文字内容和可视化图表的清晰可观测，应该在设计初期定义一套通用的设计规范并对各种应用场景进行验证，确保最终的界面效果符合相关的可视化标准。

精准传达数据：性能监测类产品的仪表盘以可视化图表展示为主，应根据业务需求选择合适的图表类型，切入点应从数据关系和功能目的出发，结合图表的特征和应用场景。例如，设计师常使用饼图表现“占比”关系，但人类对角度的感知并不如长度，遇到数值接近或数据项过多的场景时，柱状图相较于饼图能更准确地传达数据信息。

四、性能监测产品优化设计实践

（一）产品调研与机会点提取

百度性能监测平台的核心目标是提升性能风险的可观测性，在项目生命周期各阶段进行性能风险的识别管理，实现性能风险揭错的高回报率。部分页面见图2、图3左侧部分，该产品尚处于功能建设阶段，设计人员的参与较少，产品各层面均有较大的优化空间。笔者结合自身实践经历，对此产品的优化设计流程展开描述。

需求调研阶段，通过用户访谈、直接观察、体验地图等方法对一线业务人员及管理人员展开多视角调研，用户在“风险定位”功能流程中的痛点如下：

1.前期：不能直观得到节点风险概况；部分文字说明较为抽象，用户难以理解。2.中期：风险定位流程复杂，作为高频次功能使用效率偏低；业务树文字内容不清晰，辨认困难。3.后期：报告详情页内容排布较乱，信息查找困难；模块布局不合理。

按照用户体验要素对体验问题进行梳理为：1.范围层：缺乏信息概览功能、无法获得关键指标的阶段性趋势；2.结构层：风险信息定位交互流程繁琐，节点信息查看等常用功能使用效率低；3.框架层：报告详情页信息布局缺乏秩序，不同文字信息之间缺乏主次关系；4.表现层：文字与底色融合，节点信息辨识度低。由此，对应得出百度性能监测平台用户体验的机会点，即符合用户需求的功能建设（范围层）、简单高效的操作流程（结构层）、主次分明的界面布局（框架层）、清晰精准的信息传达（表现层）。

（二）分层设计实践

范围层上，完善功能体验。对“风险概览”功能进行优化，使用雷达图（图4）反映各指标评分，便于用户观测系统整体状态和对关键指标的对比；增加子弹图以展示单项节点数据详情，对原有抽象的数据进行可视化展示；根据用户对信息趋势的观测诉求，增加堆叠面积折线图（图2），提供对风险长期变化趋势以及不同风险等级构成情况的展示。筛选功能也进行了完善，如支持按时间筛选，满足用户的自定义需求。此外，由于“实验健康度”等抽象描述会让用户产生困惑，采用添加引导信息的方式，改进产品流畅度，辅助用户的业务决策。

结构层上，优化交互流程。业务人员需频繁进行风险信息定位的工作，原有操作流程繁琐，需要在不同页面间多次跳转。如图2内容区所示，将节点详情的模态弹窗修改为固定模块，实现切换列表项时页面的动态刷新，用户在单一界面无需跳转即可完成风险定位任务，大幅减少了重复性操作。

框架层上，梳理页面布局。以图3报告详情页优化过程为例，运用交互式设计四策略中“合理删除、分层组织、适时隐藏和巧妙转移”的思路进行模块优化：删除重复冗余的描述文案，提升信息获取效率；组织归纳同类型数据，减少用户对相关信息的搜索时间；通过TAB切换的方式隐藏次要数据，减少对用户的干扰；精简页面呈现，转移表单次级属性至详情列表，降低用户认知负荷。

表现层上，完善视觉规范。原风险信息详情页的业务节点列表颜色对比弱、辨识困难，以不同的文字颜色进行等级区分的方式也相对粗放。产品改版时应用了新制定的设计规范，并对原有问题进行专门优化。调整业务节点文字及背景色的对比关系使之符合WCAG2.1标准，保证其清晰可辨识；对文字分类颜色进行修改，统一默认文字颜色，辅之彩色的信息标签进行层级区分。有利于提升系统内部一致性，提高信息传达效率，通过舒适的色彩搭配给用户带来美观、统一的视觉感受。

（三）设计成果与验证

在产品上线后，对本次优化设计进行总结与验证。定量指标方面，与前端共建完成业务组件6个、通用组件5个，完善后的设计规范覆盖10+页面，提升了设计与开发效率。单次风险定位流程操作步骤由3次减少至1次，风险定位耗时减少约1分钟，一次完成率提升23%。定性指标方面，根据问卷反馈，此次改版收获了普遍的用户好评，集中在简单高效的操作流程和简洁清晰的界面风格方面，结果详情查看、风险定位功能满意度提升明显。

五、结论

数字化快速发展的今天，数据的重要性日益凸显，挖掘数据资源潜力有利于优化资源配置。正如性能监测产品将陆续从小范围应用走向大规模落地，为企业信息决策提供数据支持，交互设计也逐渐介入企业中后台产品，用户体验的重要性愈发突出。性能监控产品作为B端产品，其界面以可视化图表为主，具有丰富的设计研究价值。此次设计实践的不足之处是，因产品面向内部人员，样本量较小，调研结果存在一定的局限性，但较为完整且落地，希望可以为此类B端产品的优化设计提供参考。

 

参考文献：

[1]高丹.2021-2022年中国企业级应用软件市场研究年度报告[R].北京：赛迪顾问，2022.

[2]胡飞，冯梓昱，刘典财，王炜.用户体验设计再研究：从概念到方法[J].包装工程，2020，41（16）：51-63.

[3]Jesse James Garrett.用户体验要素——以用户为中心的Web设计[M].范晓燕，译.北京：机械工业出版社，2011：20-21.

[4]刘小双，韩晓彤，马凯博.基于用户体验要素的云盘小程序设计研究[J].工业设计，2021（09）：123-124.

[5]刘梦琪.B端产品中新手引导的设计研究[J].科技视界，2021（10）：53-55.

[6]Season.如何为专业的B端产品打造简单的用户体验[EB/OL].（2021-12-03）[2022-11-13]. https://mp.weixin.qq.com/s/gAbmfbDQY6CRWX7UpOVPrA.

[7]Colborne G.简约至上：交互式设计四策略[M].北京：人民邮电出版社，2011.

[8]万维网联盟.网页内容无障碍指南的用色建议[EB/OL].[2022-11-13].https://www.w3.org/TR/WCAG21/#use-of-color.

 

版权声明：【除原创作品外，本平台所使用的文章、图片、视频及音乐属于原权利人所有，因客观原因，或会存在不当使用的情况，如，部分文章或文章部分引用内容未能及时与原作者取得联系，或作者名称及原始出处标注错误等情况，非恶意侵犯原权利人相关权益，敬请相关权利人谅解并与我们联系及时处理，共同维护良好的网络创作环境，联系邮箱：603971995@qq.com】