分布式 | 分布式UI体验设计的思考与实践经验（上篇）

随着智慧化生活的蓬勃发展，势必会有更多形态的终端产品出现，这就对UI设计提出了更大的挑战。如何进行UI设计，才能打破不同形态产品间的壁垒，实现一次开发多端部署，保证全场景下极致的用户体验？

在华为开发者大会EMUI分论坛上，华为专家分享了分布式UI体验设计的思考与实践经验，他们认为应该从UI的一致性设计和协同设计两方面着手，来应对分布式操作系统下多形态终端产品对UI的要求。

分布式UI体验设计

本文整理自华为消费者BG UX设计部专家王红军发言部分，分享内容包括对分布式UI设计中人机环境影响因素、一致性设计实现方法等方面。

一

一致性设计

1.分布式UI体验一致性设计的人机环境因素

人是有视野范围的，设备是有各种不同尺寸的，由于交互方式不尽相同，再加上环境也不一样，这些因素会对设计造成很大的影响，本文主要从人机环境三方面来分析对分布式UI体验设计的影响。

不同的设备使用距离是不一样的，不同的设备在用户视角范围内，相对位置也是不一样的，这些对用户的界面认知有很大影响。从下图可以看到，不同设备在用户界面上的使用认知也是不一样的，特别是车机，车机位于我们水平视角以下。

设备的显示区域

从人的因素来看，人眼对中央凹视野区域内文章、色彩、图形等细节的识别是比较敏感的。通过大量数据分析发现，根据视野和距离可以计算各设备上的最小字号，如手机、大屏主要信息字号建议不小于20弧分。

设备的使用距离对交互方式也有很大的影响，在比较近的距离上，触控是最自然方便的交互方式，随着距离的增加，用户已经无法通过触控来操作，这时遥控、体感手势是比较适合的交互方式。另外随着语音技术的发展，语音交互在各个距离上都能有很好的支撑。下图是各个设备上操控区域的示意，绿色区域是用户比较容易操控的区域，红色是用户难以操作的区域。

设备的操控区域

上述这些因素对界面框架设计有什么影响？

在大屏上，是遥控交互而没有触控，因此主要是看它的显示区域，我们把最重要的内容和提示放在中间和下方，这都是用户比较容易识别的区域。

在车机上，设备显示区域的特点是越上方越容易识别，越下方越难识别。所以我们把一些重要的提示放到了界面的上方。但是操控区域又是不同的，操控区域左侧是比较容易操作的，因此我们把较常用的导航放在了左侧。

在手表上，显示区域和操控都比较容易，但手表的显示区域较小，手指容易遮挡。因此，我们把操作区放在了底部。如图所示：

不同设备操控区域显示

综上所述，每种设备的设计是不一样的，我们要怎么做一致性呢？

二

一致性设计实现方法

1.参数化、模板化的基础元素和框架

字体参数化：不同设备的字体大小是不同的，我们主要通过采用相同的参数来建立设备之间的关联，最终希望通过相互的关联，可以一次性生成相关的设备设计。除了字体，我们对色彩、间距也都做了相似的参数化。

基础控件：我们尽量保持了各个终端设备上基础控件的一致性。

基础界面框架模板：虽然设备不同，但有些基础的界面框架是非常通用的，通过建立通用基础界面框架模板，可以最大化减少重复设计的工作量。这是在不同设备上相同界面框架的例子，虽然各设备显示形式上有很大差别，但界面框架却是相同的。

分布式UI框架：

上面说到的内容，都会在分布式UI框架中进行支持，能够实现应用界面一次开发，多端适应。

分布式UI框架

2.响应式的界面布局

响应式界面布局，包括动态布局和栅格布局系统两部分。

2.1动态布局

顾名思义就是在设备变化时，界面元素能够随之变化。常见的动态布局样式包括基本布局和特殊布局两种，基础布局对界面布局架构没有影响，特殊布局对界面布局架构会有调整。

基本布局&特殊布局

相对拉伸：界面元素的宽度不是固定的，随着设备的宽度进行延伸变化；

延伸布局：界面的元素大小是固定的，随着设备宽度的增加可以显示更多的数量；

重复布局：界面中显示为一列的内容，采用两列或多列来显示；

缩放布局：界面元素采用等比放大。

2.2栅格布局系统

栅格布局系统是一套能够适配不同屏幕尺寸和屏幕朝向的响应式布局设计机制，它可以确保跨设备的一致性。栅格系统是业界比较常用的布局系统，不过业界对栅格系统的参数定义不一致，所以我们对栅格系统的参数进行了自定义，我们的边距定义在不同的宽度下不同，这样可以保证设备界面整体的协调。

EMUI基础栅格

·END·