直播后台的跨平台设计探索

https://www.yuque.com/meifangmia/zwcdgs/ghgt94#nRtIv

项目痛点：

目前京东直播的后台产品（即主播开播渠道）已有2个主要平台，分别是京东直播操控台电脑版+OBS推流软件和京东直播操控台手机版。

图源：笔者自绘
在实际产研过程中，尽管是面向同样的用户群，但两个后台的功能设计和研发时间是不同步的，容易出现功能体验不一致等问题。在本文中，笔者尝试以京东直播实物抽奖工具为例对本次跨平台的设计过程进行复盘。如对内容有更好的建议，欢迎交流及指正。
项目目标：
保证直播后台的电脑端和手机端功能体验一致，使用过程流畅。同时，将跨平台设计的方法进行总结沉淀，为后续类似项目提供设计思路。

步骤二：进行不同平台中的功能取舍

这一步是需要面向目标平台，根据产品功和操作复杂程度对功能进行取舍。实物抽奖功能包括查看操作教程、创建抽奖、编辑抽奖信息、查看中奖名单、一键导出全部中奖者信息。这些所有功能都可以在电脑端较流畅地实现。

图源：笔者自绘
但对于手机端而言，移动设备受到屏幕尺寸和单线操作流程限制，复杂功能需要被删减。查看教程功能需要前往教程页面再回到操作页面，若用户无法一次记住教程步骤可能还需要在不同页面中来回跳转，效率不高。因此，该功能不在手机端中进行保留。此外，一键导出全部中奖者信息在电脑端会自动生成Excel表格，信息量过多，也不符合用户在手机端进行轻量操作的特质。因此，我们在手机端仅保留了以下几个功能。

图源：笔者自绘
在完成两端功能的权衡与取舍后，可以开始进入功能具体方案设计的环节。

步骤三：保持跨平台体验一致性，并根据平台特性适配

不同平台中一致的元素如主色调，字体，icon 风格，和用户对话的语言语调等等，可以让用户从使用习惯上觉得熟悉，从而创造一致的产品体验[2]。同时，也需要结合电脑端、手机端不同的人机交互规范、使用场景和操作复杂程度对部分功能进行设计适配。下面通过几个具体案例进行详细说明。
a.信息布局逻辑一致，降低用户认知成本
除了一致的品牌视觉元素外，相似的布局逻辑沿用到两个端可以减少用户重新学习的负担。以抽奖操控区为例，在两端界面中都有着相同的元素：功能名称、主操作按钮、信息列表。同时，针对可点击区域和按钮样式根据平台尺寸大小区别进行了调整，确保用户在不同平台使用产品时获得熟悉的产品体验，同时有最优的操作体验。

图源：笔者自绘
b.操作流程一致，增加熟悉感
确保两端核心功能的操作流程是相同的，有助于培养用户对产品熟悉的使用习惯。以表单填写为例，为了提高用户表单填写的效率，两端在输入时都有相同的校验逻辑和报错提示，保证使用的流畅性。针对字数限制的字段，在超出限制后进行实时提醒，避免在表单提交时出现大规模报错导致的焦虑情绪。