06
B端数字化产品的跨端设计

◎魏丽梅　冯韵

由于B端数字化产品在移动端逐渐成为了桌面端核心业务场景的延伸，因此体验设计师更要关注跨端产品体验的一致性，从而降低用户学习成本和提升工作效率。在业务发展的同时高效开发跨端产品，保障产品在多场景下的整体易用性，实现高质量迁移工作，是每个体验设计师面临的挑战。体验设计师该如何跨端搭建设计体系呢？如何在B端项目中去进一步应用呢？

1．为什么B端产品需要做跨端设计

传统软件普遍基于线下办公场景和PC端用户建设，难以适应移动互联网改造后的新时代，所以B端无线化趋势将会越来越明显。微软也越来越重视App模式和体验，为了更好地服务开发者，完成了跨平台系统Fluent Design的搭建，达成了多端设计融合。

在产品跨端趋势明确、技术成熟的背景下，许多B端产品为了更好地发展，必然都会做产品跨端设计，这个时候设计师需要关注些什么呢？我们从理论规则、设计系统和设计映射方案三个方面进行了解。

2．理论规则

设计师首先需要了解用户使用场景的差异性、平台环境的差异性、交互方式的差异性。

1）使用场景的差异性

用户使用场景的差异性主要影响因素有使用环境、使用时长及使用目标。通常用户在室内、安静且网络稳定的环境下，使用时间较长，多会使用计算机帮助用户快速获取信息，并且可以多任务并行，高效完成任务；通常在室外、嘈杂、网络不稳定的环境下，使用时间较短，多会使用手机通过简单聚焦的内容，快速获得重点信息及完成任务。

2）平台环境的差异性

平台环境的差异性主要体现在屏幕尺寸、单位、屏幕分辨率、适配场景及服务生态等方面。如今的主流设备包含手表、手机、平板电脑、桌面计算机，而这些设备又分别存在不同的分辨率。计算单位主要有物理长度单位pt、虚拟长度单位px、相对长度单位em，它们之间存在换算关系，根据不同的平台和分辨率，元素尺寸都存在一定的差异。在屏幕分辨率方面，相同物理区域下，高像素的清晰度大于低像素的清晰度。同时也存在特殊的适配场景，如不同形态的手机、不同系统，都会存在不同的设计规则。在服务生态方面，移动端更加灵活且具有特性上的优势，可以考虑通过产品设计补充桌面场景缺失的体验，尝试更多创新。

3）交互方式的差异性

交互方式的差异性主要通过两个交互维度来划分—键鼠和触摸，从这两个维度进行定义，能从用户最本质的交互操作模式出发，选择符合用户当前设备交互模式的组件。移动端采用手势操作，在不同系统、不同尺寸、不同硬件生态的移动端设备里，支持的手势类型操作较为复杂，同时具有丰富的硬件能力，多种感应器的组合可以作为向智能手机输入命令的方式，也为移动端的交互方式创造了更多可能的延伸；桌面端采用键鼠操作，操作方式相对来说较为简单一致，相对于手势而言，鼠标最大的优势是支持多模态交互。

总结而言，桌面端的优势在于处理专业复杂的工作时更加高效，移动端在覆盖人群、场景更广的情况下应该更加关注用户所在意的核心内容，并根据角色做相应的减法。除此之外，我们还需关注产品使用体验到品牌感知的一致性，即在各端的关键节点采取的设计方式应具有延续性，与符合所在配图的用户操作习惯的基础智商保障功能框架一致。

3．设计系统

除了用理论规则定义产品策略层面的差异，我们还需要关注如何提高在研发阶段整体设计方案的落地与协作效率，这要求设计师掌握系统性搭建完善的跨端设计系统能力。

通常一个完整设计体系从下至上会包括：通用规范、设计组件、设计模式、布局规则。其中，通用规范属于产品的统一品牌符号，需在各端保持一致，而组件的交互、页面模式的设计、响应式布局规则都需要根据前面提到的各端特性（屏幕尺寸、系统差异性、交互方式、设备能力）进行适配。通过建立一致性的设计系统，其中包括体现品牌符号的通用规范与各端适配的组件以及布局解决方案整体拉通，并与技术共同规定自适应规则，从而建立多维度的跨端解决方案。

随着越来越丰富和多元的情景出现，为了提升设计师的决策效率，可以引入Design Token的概念。Design Token的核心是一个变量控制系统，在设计系统的通用规范层面，我们通常用变量来控制样式的一些基础属性，对于跨端而言，它的意义在于如何统一各端维度，做到快速自动化的映射。

目前许多大厂的设计团队都尝试通过这套Design Token体系，让大量的页面和模块执行开发和设计并行的流程，提升项目整体的研发进度。在执行桌面端拓展移动端的项目时，也能在不同系统和设备上快速拓展设计，并保证两端设计的一致性。

4．设计映射方案

这里我们来看一下如何在B端的具体使用场景里构建设计映射方案。先介绍一下体验映射的原理：双端的一组基础组件对开发者而言其实是同类组件API、属性对齐以及组件功能形态的映射。设计师需要先将组成桌面端列表组件的元素进行分类，如标题、文本、按钮等，然后将无法跨端通用的元素进行移动化映射的“转译”，最后将通用元素和“转译”过的元素按照移动端规范重新组合起来，这样就形成了一对列表的跨端组件。在建立了这个基础认知后，再结合B端产品业务目标以及用户使用场景，进一步讨论如何进行落地。

1）B端数据录入场景

这里用录入场景的典型案例表单来说，一般由录入组件和操作按钮构成。输入区是表单的核心区域，承载了用户主要的交互，而操作按钮是完结表单操作的触发器，用于确认数据或者取消数据，表单越复杂，按钮也会越多样。表单类的录入场景中，移动化的设计最好保证用户可以在首屏看到核心的内容并控制单个页面内的信息量。

相对于桌面端而言，移动端表单内容对核心流程影响较小的信息字符可以适当弱化隐藏。若面对的是必填字段很多或是业务模块十分复杂，甚至在各个选项之前存在数据联动逻辑的情况，那么在移动端设计时可使用结构化类型的组件对界面信息进行数据拆解，让用户分步操作。

还有一类复杂编辑器的录入场景。对于桌面端，腾讯文档在主导航的设计上按使用频次显示出了常用的功能，保障用户在进行多线程复杂任务编辑时的操作易见性。而进行移动端的适配时，考虑到用户行为更多的是进行轻量浏览，将主导航的交互改为点击唤起，布局上尽量下沉去支持丰富的输入形态，更大程度地减少不必要的元素干扰，保障屏幕空间得到有效利用。

在线表格同理，在进行移动端的适配时，为了减少跳转，让用户专注当前行／列的单任务输入，增加了卡片视图的单行输入模式。

另外，我们还可以从输入行为的角度进行思考：优化操作方式、简化录入步骤。根据业务场景使用不同的录入组件，如滑块、步进器、选择器等；量身定制更合理化的业务组件，如带反馈振动的金融型密码组件，以此提升用户在录入时的体验；同时优化输入关键词后的匹配策略，通过系统判断给用户提出合理的建议等，减少触控输入带来的不便；甚至也可以考虑利用移动设备的硬件基础特性，如录音文本转化、扫描快速识别信息、LBS、NFC、GPS、重力感应、定位精度等，来打破桌面端工作场景相对固定的限制。

2）B端数据展示场景

我们再来看一下由信息列表、筛选与检索、操作等构成用于进行信息展示的数据列表页。它的本质为一组数据的集合，通常由行、列组成。行可以包含任何类型的数据，但也可以包含交互式控件。

在桌面端的表格或者列表投射到移动端中，更多的是以卡片式设计的形式呈现。由于卡片利于突出关键信息，同时还能适应移动端设备分辨率更复杂的情况下的展示，因此选择卡片展示可以满足信息的深度和承载更好交互的效果。

桌面端使用的table组件能够尽量结构化呈现完整的数据内容、筛选、批量操作入口。但移动端的横向空间十分有限，因此大部分情况下会选择转化为list的结构，将信息垂直展开并展示多层级的核心信息，隐藏次要操作。若特定情况下需要与桌面端table保持一致，则当表格列数较多时可以通过默认屏幕最右列展示一般数据以暗示用户向左滑动浏览更多表格内容，并且需要自动映射行或锁列规则。这里需要注意的是，带有复合表头的表格只适合在移动端映射为table，支持多层表格嵌套的表格在移动端映射为list时也需要进行相关的兼容性处理。

对于信息的详情页而言，在保障同状态场景下文案、业务功能的操作与桌面端保持一致的基础上，移动端更需要考虑区分信息的主次层级，聚焦在用户所关心的重点信息和状态上，通过字重、字号、颜色适当差异化方式来强化这些字段，减少用户的信息获取成本。

还有一类特殊的信息展示场景—工作台，它往往起到了产品中很重要的“交互枢纽+门面”作用。在桌面端上的数据呈现可以有效缩短获取关键信息的路径，同时允许用户在工作台直接操作一些高频任务。在移动端上的内容与行为也更加个性化，主要去展示品牌元素与高价值的信息。

3）B端数据可视化场景

进行数据可视化类的页面设计需要明确划分使用者的身份以及分析目的，从而选择对应的页面类型。不同业务线间关注的核心指标不同，常见的指标类型有宏观的大盘数据和具体的业务指标两类。确定核心指标间的联系及优先级，合理地进行页面布局，把结论和最重要的指标放在最醒目的位置，也可以通过交互的设计让这些页面更生动地演绎出数据的价值。

当设计者对页面的结构有初步思路之后，可以根据信息粒度的大小来选择不同的可视化组件。

通常指标卡类的组件信息粒度是最粗的，属于概览总结型信息；列表与文本类组件的内容接近详细的数据明细，传达的信息颗粒最细。而各类可视化图表卡片的信息粒度则位于中间值。

以典型的占比类图标饼图举例，在标签分类场景不多的情况下，桌面端可以将图例放在饼图的上方，通过鼠标悬停的交互显示每类标签的具体占比与数值。当投射到移动端上时，环形图可以让视线的关注点放在长度上，使对比更清晰，中空区域还可以用于显示关键的文本信息或结论数据。

当标签分类较多而占比差别又不明显的时候，可以在移动端将该图形转换为百分比条形图，用户能够更清晰地看出不同部分的占比，又合理地利用了屏幕的纵向空间。当标签名称过长时，可以换行展示，以避免条形图显示空间不足的情况。

除此之外，对于产品的某些核心元素信息，适当采用新图表样式进行可视化设计，起到激发用户自愿探索功能以及增强品牌识别的作用。但要注意的是，如果我们采用了日常生活中不常见的图表样式设计，就需要额外使用清晰明确的引导来帮助用户正确地理解其中的信息。比如说苹果的健身App采用了类似旭日图这种非常少见的图表样式设计，因此做了一整套带动画、文字说明的新手引导来帮助用户理解每个圆环代表什么。

还有一类较为常见的对比类图标—柱状图，当海量数据与有限屏幕空间发生冲突时，需要细化和灵活处理图表元素的布局规则，将信息展现得尽量完整和美观，如可以采用响应式的规范来解决不同端、不同屏幕尺寸下内容的适配问题。其中，省略、换行、旋转、抽样依赖于数据属性，转化方式依赖于设备的限制。在不丢失核心信息的情况下，体现数据主要特征，在有限的空间内帮助用户更快地理解信息和获取洞见。

除了图表以外，对于某些图表上的功能操作类组件，也需要对移动端做更具针对性的设计。以tooltip为例，桌面端tooltip的展示方式如果直接平移在移动端上展示，则会浪费更多的信息空间并且也遮挡了有效数据。在移动端适配时，tooltip组件其实可以通过手指的长按来呼出并且替换掉卡片的标题区，可以更加有效地利用屏幕空间。

同样，对于有着过长内容而需要页面锚点的可视化图表报告页，如果直接复制桌面端的展示方式在移动端上展示时，容易遮挡页面信息，即使采取收起的策略进行设计也会使得操作比较烦琐。在移动端适配时，直接通过tab平铺页面的方式直接展示，左右滑动进行滚动锚点，既不占用空间又能最大程度地展示出关键信息。

当然，我们还可以利用一些移动端的特性进行差异化的设计。例如，在时间跨度比较大的时序数据图表中，交易使用的蜡烛图在纵向屏展示时，很多数据细节会因清晰表达的原因隐藏掉，此时可以利用移动硬件的横竖屏的转换，在横屏条件下展示如最新价、涨跌幅、成交量、当日最高价、收盘价等更多重要信息。

5．小结

最后，我们在业务中对跨端设计的实际应用进行探索和推进的过程中，需要根据具体的业务情况进行方案的调整来遵循历史逻辑，减少对用户习惯的伤害。我们相信在不久的未来，硬件技术的发展和网络基建的完善会让跨端的应用场景越来越多，这也要求体验设计师不断丰富自身能力，为企业级产品构建更为便捷、流畅的跨端设计体系。

参考资料

［1］《2021年中国协同办公市场研究报告》。

［2］《Google设计指南：设计跨平台应用程序的指南》。

［3］《跨平台UX设计》。

［4］《实例解析！从理论到落地，B端移动App设计指南——艺赛中国CNYISAI》。