前言：全平台系统交互设计——这个名词交互设计师应该不陌生，因为它最终决定了用户体验。虽然这个概念还不成熟，但目前主流操作系统在市场份额、出货量、用户认可度等方面的差异，让我们看到了打造流畅的全平台体验的必要性。这可能会成为下一代应用程序的基本规则，就像最初的响应式设计一样。今天分享腾讯文档的全平台系统交互设计。背景“操作系统对我们来说不是最重要的，应用和服务更重要。”[1]——微软CEOSatyaNadella去年，微软发布的便携折叠屏设备SurfaceDuo首次搭载了来自谷歌的安卓系统，而微软CEO在随后的采访中也表示，Windows系统不是微软未来的重点，他们更关心开发者如何为这些设备创建应用程序，不管平台是Windows还是Android。同时，为了更好地服务于开发者，微软最终将原有的UIFabric框架和移动端框架迁移到了一个库中，统称为FluentUI，正式完成了跨平台系统FluentDesign的构建。全新移动版Office套件（Android+iOS）的正式上线，是对FluentDesign应用的一次很好的应用和推广。虽然微软重应用轻系统的策略有其历史原因，但我们仍然可以看到系统间壁垒弱化的趋势。近年来，主流系统之间也出现了很多相互借鉴和融合的现象。比如现在很多安卓手机都默认使用苹果的homebar来代替三个金刚键，而苹果iOS14系统中的桌面插件也算是“逐渐安卓化”了。在交互方式逐渐成熟趋同之后，平台系统退居幕后。为开发者服务，让开发者为用户创造更大的价值，才是长久之计。此外，随着移动设备生产力的逐步提升，手机、折叠屏、平板、电脑之间的界限变得模糊，设备之间的差距也在缩小。同样在去年，苹果正式推出了iPadOS系统。对键鼠的灵活支持，将移动端的便捷与桌面的超强生产力进一步融合。从应用开发的角度来看，Electron、Flutter等跨系统框架层出不穷，开发者不断尝试在不同平台上用一套代码提供同一套服务，减少系统差距带来的维护成本。尽管全平台系统设计的概念还不成熟，但我们可以看到对流畅的全平台体验的需求。这可能会成为下一代应用程序的基本规则，就像最初的响应式设计一样。腾讯文档面临的挑战腾讯文档于2018年发布，支持主流平台和系统。但随着功能的扩展，设计开发和维护的成本也在与多线程同时增加，并且由于开发时间的差异，容易出现体验不一致、功能错位的情况。对于快节奏的互联网行业来说，多线并行的试错成本比较高。腾讯文档支持的终端和平台为了快速上线并保持各平台的一致性，腾讯文档的手机端和平板端APP只是基于Web进行了简单的适配。性能较差，不能满足用户的基本需求。为了从根本上解决问题，文档团队重新审视了产品在全平台全终端的性能表现，并对框架进行了设计调整和优化，希望通过此为用户带来更流畅、更高效的全平台体验。修订。全平台设计原则此刻，腾讯文档的白领用户可能正在工作站写报告或在上班途中查阅文档，学生可能正在电脑上写论文或去打印商店打印，而老师可能刚刚发布了一份文件。向小组发送了在线统计表格，供家长在手机上填写。腾讯文档需要覆盖尽可能多的渠道和场景，支持用户真正做到随时随地打开文档，快速完成当前任务。但值得注意的是，我们在整个平台的设计上并不追求完全的一致性，而是追求整体观感的和谐。一致的界面可以降低认知成本，但用户在不同的环境中也会有不同的期望，比如自然期望能够在更强大的设备上完成更复杂的任务。那么腾讯文档是如何保持其“效率”特性的呢？为此，我们确立了以下设计原则：保证内部感知的一致性，最大化每一端的利益。全平台设计原则保证了感知的一致性。一致性是产品设计的基础。可以大大降低用户的学习成本，同时加强用户对产品调性或品牌的认知。一个好的品牌规范可以在风格上起到重要的作用，比如主色、字体、图标风格，以及与用户对话的语言基调等。一个完整的设计体系可以深入到组件，让用户感受到从使用习惯上熟悉和流畅，从而创造出一致的产品体验。最大化各方利益如果说产品的核心体验是一块石头，那么桌面设备、移动设备、小程序等就像是形状各异的容器。当把核心体验放到不同的容器中时，像腾讯文档这样高效的产品，充分利用环境的优势，填补体验的空白，就显得尤为重要。我们可以从平台环境/使用态度/交互方式三个维度去思考和发现机会。利益最大化的三个维度1.平台环境1.1屏幕尺寸电脑、平板、手机基本布局差异；异形屏、折叠屏、手机横竖屏、浏览器窗口的伸缩适配。1.2系统环境Windows和Mac头文件不同；部分安卓系统保留了底部的三个虚拟金刚键；小程序右上角有个固定控件；H5有自己的顶部和底部导航栏，需要考虑最小显示区域。1.3平台特性移动端可通过跳转应用快速授权登录或分享至社交平台；桌面端可通过鼠标拖拽快速上传或批量操作。常见平台环境示例2.使用手势用户通常在临时状态下使用移动终端，在短时间内专注于单个任务。这时候，清晰的导航和突出关键信息，可以更好地帮助用户完成任务。用户在桌面上的姿势通常比较专注，可能会持续一段时间。这时候，在界面中高效、清晰地展示更丰富的信息，可以更好地吸引用户的注意力，减少不必要的跳转，高效地完成任务。3.相同交互方式的布局在不同平台也面临不同的交互方式。手指左右滑动、长按拖动是移动端常用的操作，但在桌面上通过键盘鼠标控制时，需要转化为鼠标左右键点击、点击拖动等。此外，善用桌面快捷键也是提高效率的重要途径，尤其是对于有一定经验且求进阶的用户，养成习惯也有助于增加用户粘性。除了核心交互方式的差异，移动端还有两个独特的优势：1、输入形式更丰富。如拍照扫描、录音、手写笔、陀螺仪（如摇动手机收回输入）、定位系统等，适当使用可以为用户带来与桌面端不同的效率提升；2、通过QQ/微信等社交平台分享和传播更方便。社交平台挖掘场景带来新用户，形成良性循环。平板电脑需要格外注意，尤其是配备新iPadOS的平板电脑。虽然主打移动端交互，但也融入了键鼠适配。所以也需要在必要的时候提供元素的悬停响应，和开发同学定义快捷键和鼠标点击的交互策略。以原则为尺，定义规则，下面简单分享一下腾讯文档的实践过程。在“保证内部感知的一致性，使各方利益最大化”的原则下，我们按照从静态到动态、从外部到内部、从一般到特殊的顺序开始定义规则。1.定义每个终端的静态主框架。移动端的特点是专注于当前的任务。可以通过信息降噪和对比度增强，使信息传达清晰，帮助用户完成单项任务；清晰的导航可以避免在小屏幕上频繁切换页面带来的导航负担。用户通常用一只手握住设备，因此我们将主导航向下移动，以便于点击。此外，边框上还预留了语音、拍照等快速创作内容的入口方案。平板终端在交互方面与手机非常相似，但更大的屏幕尺寸让用户可以实现轻量级的多任务处理。在平板端，我们支持三栏布局，提高信息展示效率，减少不必要的页面跳转。考虑到用户习惯用双手握住，我们将主导航放在了更方便点击的左侧。桌面是主要的制作平台，通常是多窗口多任务，键盘鼠标操作精准高效。在专注的姿势下，我们可以尽可能安静的展示更多常用的功能，让用户在一个视图中完成相对复杂的任务。同时，在列表页面，更多的空间让我们可以展开目录树，减少导航跳转。下图总结了三个终端导航的映射关系和功能差异。2、布局动态响应系统的鲁棒性：系统在一定的参数扰动下仍能保持一定的性能特性。定义好每一端的静态框架后，开始考虑中间状态的响应转移。设备之间的差异正在变得模糊，它们的使用方式也更加灵活。为了廉价地处理它，我们需要对页面进行足够的分解和抽象。而这就不得不提到iOS系统中一个叫做SizeClasses[3]的概念。SizeClasses是在2014年的苹果开发者大会上发布的。在这个规则中，开发者可以在不判断设备类型的情况下，将屏幕的长宽抽象为松散和紧凑的类型，从而组合不同的设备尺寸。开发者只需在Xcode中设置相应布局下的显示规则，iOS系统会根据内容的大小和类型自动调整布局。这套规则大大减少了开发者的适配工作量，也为苹果适配更多尺寸、更高分辨率的设备奠定了基础，吸引更多的开发者以更低的成本开发通用应用。Apple设备的SizeClasses示例参考了SizeClasses的规则。我们将页面定义为松散和紧凑的布局。那么一个页面可能适合松散或紧凑布局，也可能由多个子页面组成，子页面的布局根据其当前大小判断适合松散或紧凑布局。这样，只需定义两种基本布局的响应规则，就可以组合更多的页面。以下图中的平板界面为例，它实际上由列表页（紧凑布局）和详情页（松散布局）组成。在手机端显示时，每个子页面成为一个独立的页面，可以根据大小判断布局策略，无需重新定义间距。3、容器的动态响应当页面的布局策略发生变化时，页面中的容器也需要进行一些形式上的变化，以更好地适应当前场景。以菜单为例，通过在紧凑的布局中添加遮罩，用户可以更好地专注于当前任务。当屏幕尺寸较大且页面响应布局松散时，在触发菜单的按钮附近将其显示为浮动层可以避免打断??用户的流程并保留更多的环境信息。4、检查特殊环境。制定了通用规则后，还需要再次检查是否有漏掉的特殊场景。比如产品嵌入第三方平台的场景。以企业微信内嵌的腾讯文档应用为例，现网多导航的嵌套导致文档几乎无法使用。但是因为企业微信是高效办公用户的重要组成部分，对我们的用户有重要的价值，所以在平衡投资和收益之后，我们还是针对这种情况加入了特殊的应对策略。微信企业“腾讯文档”应用项目成果调整，新版腾讯文档APP（手机/平板）和电脑客户端（Windows/Mac）已上线。iPad版还支持键盘鼠标，欢迎下载体验。后记CraigFederighi演示了Continuitydemo[4]终于让我们回到了2014年，当时苹果在iOS8发布会上首次推出了Hand-off功能。您可以在手机上编辑电子邮件或短信，然后在另一台设备上继续无缝编辑。通过iCloud和蓝牙，Apple应用程序可以在Mac、iPad和iPhone之间始终保持一致的体验。我认为这是所有平台设计过程中最激动人心的真正创新。万物互联时代来临，万物皆可成为媒介，万物皆可交互。或许那个时候，“内容如水”真的可以实现，跨越系统和平台的壁垒，实现流畅无缝的体验。跨越系统和平台的壁垒，获得良好的用户体验，也是设计获得更高评价的基础。
