万物互联 全场景设计思维 | 鸿蒙系统与未来多端应用设计指南
杭州/UX设计师/52天前/3680浏览
版权
万物互联 全场景设计思维 | 鸿蒙系统与未来多端应用设计指南
随着鸿蒙系统的逐渐成熟，似乎大量的产品又将面临又一轮的应用适配工作。面对越来越复杂的应用功能与界面，越来越多操作系统和多样化的设备类型，设计师应该如何
优化
自己的
设计思维
，才能满足
数字产品未来的发展需要
？
前言
“
百年未有之大变局
”，是中国对当前世界格局的重大战略判断。
这个“变”，并非简单潮流趋势的变化，而是世界局势影响所带来的全方位的
秩序变化
。随着国家硬实力已然达到了新的高度，随之而来必然是国家对于
数字安全
的逐渐重视。
完全基于国外操作系统的庞大应用生态，显然不符合未来大国发展的需要。因此，对于中国的互联网行业的未来，也许鸿蒙系统将会成为行业未来几年最大的“
变量
”之一。
鸿蒙系统的存在只是简单的多适配一套系统吗？是否会对应用设计的理念产生变化？面对越来越复杂的系统、场景，我们应该如何学习并调整设计思维来应对这些变化呢？
通过对鸿蒙系统的设计理念与规范的初步学习和研读，以及对主流的iOS、Android系统最新设计研究，结合互联网的发展趋势，在此为大家提供一些粗浅的总结与学习摘要。
一、互联网发展与操作系统的必然演变
1.1、互联网发展与设备形态、设计理念的转变
从互联网技术诞生至今，随着技术的不断发展，我们所使用的
设备
与
屏幕载体
也在不断地发生变化。
互联网的每个发展阶段都催生了对新的设备与屏幕形态的需求，而每一种新屏幕的出现，又反过来为互联网开辟了全新的应用场景、交互方式和内容形态，推动其进入下一个阶段。我们大体可以将互联网发展与设备的关系总结为以下几个阶段：
第一阶段
：互联网萌芽期（Web 1.0） → 固定显示器
第二阶段
：互联网爆发与交互期（Web 2.0） → 固定显示器 & 笔记本电脑
第三阶段
：移动互联网时代 → 智能手机触摸屏
第四阶段
：万物互联时代 → 多类型屏幕共存（平板、可穿戴设备、智能家居屏、VR/AR）
从固定到移动，从大到小再到无处不在。互联网的发展路径是从
桌面走向口袋
，再渗透到我们周围的每一个角落，而屏幕也随之经历了从固定显示屏，再到触摸屏，最后
碎片化
为无数种形态的过程。
而对于设计师来说，除了不断增加的屏幕尺寸数量，还有一个核心的变化便是
职能
与
理念
的转变。
从最初Web1.0的信息排列，到Web2.0丰富的网页设计，让设计师的角色从“
平面设计师
”逐渐走向了“
网页设计师
”，设计师开始基于虚拟世界进行创新的网页风格、天马行空视觉效果与互动形式的设计。而苹果开创的移动互联网时代，强调了“
用户体验
”的重要性，并逐渐诞生了“UI设计师”、“交互设计师”、“动效设计师”等新的设计职能，而后又逐渐演变为更综合的“
体验设计师
”或“
产品设计师
”。
而我们当下所处的时代，已经经历了移动互联网时代的蓬勃发展，并一只脚开始踏入了万物互联时代。设计师的核心目标虽然仍旧是以体验设计为核心，但在未来需要逐渐加入应用的
多设备
、
多场景适配
与
协同思维
。
1.2、操作系统的成熟、分化与弊端
互联网的发展核心推动力，其实就是一个又一个的企业逐渐成长与发展的过程。而伴随着时代引领全球的巨头们的发展，数字产品所依存的
操作系统
，也伴随着巨头们的发展逐渐
建立生态
。从早期微软的Windows，到苹果的MacOS、iOS系统，以及Google的Android系统。
而这些成熟操作系统，又基于不同的类型设备类型衍生出
更多设备
的
独立操作系统
，如苹果从MacOS、iOS到如今iPadOS、WhatchOS、Apple tvOS、VisionOS等。
然而，随着应用和
设备丰富程度
的不断增加，单场设计思维逐渐显示出一些
弊端
，多平台、多尺寸的适配设计往往差异极大。各系统之间的底层代码差异犹如“
天堑
”，必须由不同的开发团队进行维护。而设计师每次也需要针对不同的平台，维护多套不同的规范、组件以及素材等等。
在可见的未来，似乎产品形态的扩张态势依然在进行，而应用形态的重新设计与适配——是否永无尽头？即使底层代码无法统一，设计师是否又有更好的方式，让
多平台的设计
拥有
更好的一致性
？
作为全应用生态的企业，苹果一直在尝试进行多端设备与体验的融合。从deck栏、控制中心、消息提醒等组件的样式之间统一可以看出，原来更偏拟物化的MacOS也逐渐将风格与iOS和iPadOS的界面风格统一。
然而，作为一个已经具备庞大体量的应用生态来说，想从底层真正地打通应用之间桥梁，可谓是难上加难。因此从芯片到系统代码都差异巨大，只能通过各种“桥梁”式的连接，来达到
设备体验
上的
协同
，
而非真正的融合
。
1.3、鸿蒙系统的创新与延续：从“设备协同”到“设备融合”
随着华为HarmonyOS的出现，带着其独特的“
全场景智能操作系统
”理念，我们似乎从中看到了操作系统未来的更多可能性。
鸿蒙系统仅仅只是设计师需要多适配一套系统吗？或者说只是“国产安卓替代”吗？
作为一个全新的操作系统，HarmonyOS可以站在前人的基础上，通过更先进的设计理念进行弯道超车。因此，鸿蒙系统的核心设计理念，之一就是：
一次开发、多端部署
。也就是说，鸿蒙系统最初的构想，就是将多端应用的开发流程进行底层的打通。
通过
分布式软总线
，它打破了设备之间的物理壁垒，让所有设备像在同一个设备上一样进行通信。而通过
自适应UI框架
（方舟开发框架），这是实现“一次开发，多端部署”，鸿蒙的UI框架会根据当前设备的屏幕尺寸、像素密度、交互方式（触控、遥控、旋钮）等，自动应用不同的UI布局和交互逻辑。
因此，鸿蒙系统不仅仅是一个新的系统，也算是一个站在成熟经验之上、更适应未来趋势的
全新系统设计理念
，一个以全场景为目标的操作系统。
对于设计师来说，因为技术上拥有了UI的跨端自适应能力，鸿蒙系统的设计也对设计师提出了更高的要求，即——全场景设计思维。它要求设计师从应用框架、组件形态、交互方式、反馈形式等不同层面去将
多端的设计整合成一套全场景的设计系统
。
相对以往的单端的设计系统，全场景设计系统需要以下几种要素去进行多端规范的整合：
- 全场景的自适应/响应式布局规范：通过对屏幕比例的抽象，将应用的布局划分为阶梯式的自适应结构，让产品在不同的屏幕比例中能够合理、有逻辑地进行适配；
- 全场景API的统一：通过对规范的核心要素统一，让全局的配色、字体、组件、布局等要素具备统一性和全局可控的能力；
- 多模态组件库：综合考量每个组件在不同设备/场景中的样式、交互方式、反馈形态等，制定能够适配全场景的多模态组件库；
- 以及基于全场景适配所实践出的各类成熟经验与指南。
由于篇幅原因，本文将首先结合鸿蒙系统设计指南与以往的设计经验，重点为大家总结一下“全场景设计”在
框架与布局
层面需要注意的几个重点。
二、全场景布局的基础要素
2.1、基准倍率的统一，vp、dp、pt的共通理念
首先，如此多尺寸的设备，比例也不统一，如何进行适配设计呢？
大家熟悉的
px
表示像素（Pixel），是最基础的绝对单位，直接对应设备屏幕上的物理像素点。
然而，作为设备种类与尺寸数量非常庞大的华为，其适配的逻辑除了屏幕的比例，还需要关注像素密度之间的差异。相同尺寸的手机，像素密度可能差异较大，如果仅采用像素密度来当规范的话，同尺寸的手机上看到的元素可能会大小差异巨大。
所以需要首先通过虚拟像素
vp
，将所有的设备的设计尺寸进行归一。虚拟像素 (virtual pixel) 是一台设备针对应用而言所具有的
虚拟尺寸
(区别于屏幕硬件本身的像素单位)。vp是灵活的单位，它可在任何屏幕上缩放以具有统一的尺寸体量。它提供了一种灵活的方式来适应
不同屏幕密度
的显示效果。
VP的概念，本质上也学习了Android系统对于碎片化尺寸的适配经验。因此，1vp ≈ 1px在160dpi屏幕上的物理尺寸，跟安卓的dp算法也基本一致。当前鸿蒙API接口数值不带单位时，默认单位都为vp。
需要注意的是，从px到vp的具体
倍率
，而因为屏幕尺寸的多样化，没有办法像苹果的pt那样都是2x、3x这样完全的整数。所以不同设备具体的vp数值，还是建议查看对应的
官方文档
进行适配。
2.2、屏幕尺寸的抽象与归纳：断点系统
通过vp的虚拟像素尺寸，我们就可以首先将所有设备的设计稿基于同一个比例进行设计。那么在进行跨设备适配性设计的时候，下一个问题就是——
屏幕布局
何时要进行变化？
断点（Breakpoint）
是响应式布局的核心概念。断点是以应用窗口宽度为切入点，将应用窗口在宽度维度上分成几个不同的
区间
，每个区间对应不同的设备类型和屏幕尺寸。
- 横向断点以窗口宽度值区分，代表窗口宽度实际大小，会影响用户使用和观看的物理尺寸。
- 纵向断点以窗口宽高比区分，代表窗口相对高度，表示横向比例、方形或纵向比例窗口。
HarmonyOS通过横向和纵向两个维度，将屏幕的尺寸大致归纳为以下几种比例。
- XSmall：智能手表、小屏穿戴设备
- Small：手机、竖屏折叠屏
- Medium：横屏手机、小平板、展开折叠屏
- Large：平板设备、车机
- XLarge：PC、智慧屏
当然，作为“碎片化系统的先驱”，Android也有类似的断点规范，只是尺寸会略有差异，并且因为较少考虑可穿戴设备，也没有“小方形阔折叠”这种概念，所以适配的范围上考虑的没有HarmonyOS那么广泛。
- Compact：手机竖屏
- Medium：纵向平板电脑、纵向可折叠（展开）
- Expanded：横向手机 横向、平板电脑、横向折叠屏（展开）、台式机
- Large：桌面
- Extra-large：桌面、超宽显示器
2.3、基础布局与秩序的建立：栅格系统
在单设备场景设计中，因为布局很少进行大幅度的动态调整，所以很多应用的设计并不一定要使用上栅格系统，而在多设备的场景设计中，栅格系统则是重要通用的辅助定位系统。
栅格给布局提供一种可循的规律，解决多尺寸多设备的
动态布局
问题。保证各模块各设备的布局一致性。栅格会跟随屏幕尺寸、窗口尺寸、子容器尺寸的变化而动态变化。
栅格构成
- Margins (边距)：元素相对窗口左右边缘的距离，决定了内容可展示的整体宽度，可根据不同的窗口容器尺寸定义不同的边距数值。
- Gutters (间距)：每个栅格的间距，控制元素和元素之间的距离关系，可根据不同的窗口容器尺寸定义不同的间距值，为了保证较好的视觉效果，间距通常的取值不会大于边距的取值（格式塔原理）。
- Columns (栅格)：内容的占位框架，其数量决定了内容的布局复杂度，栅格的宽度根据实际窗口的宽度和栅格数量自动计算。不同的不同的窗口容器尺寸匹配不同的栅格数量来辅助布局定位。
窗口栅格
窗口栅格系统是系统提供的一种面向
多设备
高效适配的
辅助布局
的定位工具。
此处的设计原则，HarmonyOS与Androdi的开发规范也基本一致。如图所示，通过断点系统抽象出的将根据窗口容器的
水平宽度
区间，再结合栅格系统匹配
最佳的栅格数量
，就可以达到内容布局的最佳适应。
因此，未来我们在跨端设备设计时，也需要将这几个梯度的栅格边距、间距和数量进行定义（宽度自动计算）。
不同的应用对于
界面风格
、
信息密度
的需求是不一致的，因此，每个应用可能有各自专属的栅格系统组合方式。比如8间距的紧凑型，或者16间距的宽松型，或者12间距的通用型等。
最大使用宽度为 2220vp，当窗口不断拉宽大于 2220vp 时，栅格内的内容区范围不再变化，多出的区域
左右留白
。
三、应用级自适应布局架构
在不同的设备与场景中，信息展示的空间与大小，决定了用户的操作方式与页面的排布方式均会存在差异性。通过前文中的断点系统+栅格系统，我们已经解决了多设备应用的基础布局样式问题。
但是，想要让应用在多设备中获得
最佳的体验
，还需要让其中的组件、页面分割方式等，也能够跟随断点的变化进行响应的变化，达到最合理的
应用框架布局
。
3.1 Tab栏响应架构
应用的底部Tab，是页面最终要的全局导航控件，通常也处于页面最上层的位置。当屏幕达到一定宽度时，底部Tab就会被拉长并且占用过多的屏幕空间。
因此，当窗口宽度达到对应的断点值，底部 Tab 可以结合
挪移布局
的方法，把 Tab 组件挪移到左侧。在大尺寸设备上提高
交互易用性
。
HarmonyOS建议的是窗口宽度 ≥ 840vp，建议使用侧边 Tab，但这个并非通用的原则，一切还需要看应用本身对于空间的需求。
同时，因为大屏设备拥有
更大的屏幕空间
，在挪移后可以在侧边Tab中融合
更多的选项
，或者其他全局操作元素，如原本放在页面顶部的菜单栏、头像信息等。
3.2 分栏布局
更大的显示空间，不仅仅只是带来空间的变化。在大屏场景中，原来的
父子层级
便可以拆分为
平行显示
，让应用在大尺寸设备上充分发挥屏幕的显示优势。
HarmonyOS建议当窗口宽度 ≥ 600vp，建议使用分栏布局。默认两栏宽度比例为 4:6，特定场景下可支持配置为 5:5 或 6:4 。
但是，是否分层具体取决于对应用
阅读效率
上的需求，如果该页面更多的是以展示内容或者商品为主，则可以在更宽的屏幕时再出现分栏，或者不采用分栏形式。
3.3 悬浮式侧边导航栏
在空间相对有限的竖屏手机场景或双折叠场景中，侧边导航通常作为临时层级，采用蒙版+左侧唤起形式进行展示。这样可以让用户更好地理解
层级关系
，并且不占用核心场景的阅读空间。
3.4 嵌入式侧边导航栏
在空间充裕的大屏场景中，侧边导航也可以采用
嵌入式的布局
，通过向右挤压布局，从双栏模式切换至三栏的布局模式。这样技能
提升操作效率
，又可以给用户提供更多的布局选择。
3.5 侧边面板
在宽屏的沉静式场景中，原本通过底部浮层的操作，如评论、信息面板等，均可以通过侧边面板的方式来实现便捷任务处理的
轻交互体验
。
3.6 跟手半模态
在移动端设备中，因为单手几乎可以覆盖完整屏幕，弹窗通常出现在屏幕中间区域。但是在双折叠或者更大的屏幕空间中，就需要重新考虑用户
手指
的
人体工学设计
。
因此，当设备在双折叠或者更大的平板场景中使用时，为了保证用户可以更容易通过手指进行操作，操作弹窗可以尝试设定出现在更符合人体工学的位置，如靠近右手的边缘位置等。
3.7 半弹窗与弹窗变化
在常规的竖屏手机场景中，为了尽可能
减少页面的跳转
，一般内容型的页面将会临时的底部半弹窗进行实现。而让此类页面出现在双折叠屏场景或平板场景中时，可以将半模态页面自适应成为
临时的窗口模式
。
四、模块级响应式布局方法
除了上述基于不同屏幕的应用级架构外， 设计师还需要注意
单个模块
的布局自适应模式。当模块的容器因为操作或者屏幕尺寸发生变化时，模块需要实时进行计算并通过过渡动画进行变化，让整个界面的过渡更加自然。
4.1 横向等距自适应
最基础的布局方式之一，模块中的元素保持
左右间距不变
，而整个模块的宽度基于容器的宽度发生
等值变化。
4.2 横向均分自适应
容器组件尺寸发生变化时，将空间
平均分配
到元素之间的空白空间中。如果变化的幅度较大，在该模块内也可以设定断点进行元素数量与尺寸的变化，以适应不同的设计目标。
4.3 等比缩放
最基础的缩放模式，通常直接与
长宽绑定
并进行等比缩放。
4.4 占比缩放
更常用的元素布局模式，元素的尺寸可以通过比例与某一容器或区域的尺寸进行绑定。比如下图中的图形元素，设定为与页面上半部分的高度进行等比缩放。相对等比缩放，占比缩放可以
更稳定
的对布局和元素进行分配。
4.5 自适应延伸
元素的间距与大小不变，仅通过容器改变
显示或隐藏更多的内容
。此布局方式需要注意隐藏的内容是否为高频/必要元素，尽量保证
重要元素
能够保证持续的露出。
4.6 自适应隐藏
不同的用户场景，空间的容纳程度是有限的，越小的屏幕越要聚焦
核心操作
。因此，相比自适应延伸，自适应隐藏更适合核心场景的操作布局。
比如在音乐播放器中，播放/暂停永远都是核心操作，并且需要位于正中间区域。其次是上下首歌曲的切换，最后是喜欢等其他操作。
同时，对于更多的低频操作，在空间相对有限的场景中，可以将其整合在“更多”操作的按钮中。
4.7 自适应折行
常规的容器尺寸适应布局方式，通常用于层级相同的内容展示。所有内容均不做隐藏处理，而是伴随容器宽度的变化，进行折行显示。
4.8 重复布局
利用屏幕的宽度优势，将相同属性的组件横向并列排布。
重复布局适用于对宽高比敏感的图片和及组合内容，当内容放大以后导致原图放大超过 150% 的场景。
五、空间哲学的变革趋势
首先要承认的是，华为的HarmonyOS虽然拥有操作系统设计的后发优势，但在设计风格与趋势上，目前苹果仍旧是需要尊敬的设计引领者之一。
苹果最新的iOS26除了“玻璃”这个概念，最为重要的革新就是更多的“空间”与“容器”这个概念的具像化，并将导航以及操作按钮放到了一个个进行独立的悬浮空间。
以往的导航、操作按钮等往往融合在页面或者分割后的空间中，但这种方式显然会占用更多的显示空间，特别是在大宽屏中。而iOS26则将“
空间
”与“
容器
”这个概念的具像化，并将导航以及操作按钮放到了一个个进行独立的
悬浮空间
。
其实在苹果的
VisionOS设备
中，很早就采用了类似的设计。因此，苹果此番变革，除了
跨端设备更容易适配
之外，可能也是希望用户能够提前对Vision设备的
视觉风格
与
操作逻辑
作进行适应。
除此之外，安卓也有类似的设计趋势。在Material Design 3的设计规范中，也能够很明显地感受到导航与操作容器化的趋势。
而容器与导航/操作的融合，显然在
跨端适配中
确实也有更好的效果。 在未来的操作界面中，我们可以不必为导航刻意划分出独立的空间，而是悬浮于内容之上。这样在跨端的适配中，导航与内容的布局适配将变得更容易。
在可见的未来，也许HarmonyOS的设计也会融合这一设计趋势·。因此，
提前适应并尝试应用
这种空间层面的布局创新，有利于产品与设计师对未来的跨端适配拥有
更多主动权
。
结语
形式追随功能
，更取决于底层技术的发展。从PC与移动互联网时代，到如今万物互联的时代，不管是应用的形态、底层系统，还是设备的种类，大家都在“复杂化”的道路中一路狂奔。而随着鸿蒙系统的到来，似乎
多端一体化
设计有了真正实现的可能性。
如何在
复杂中寻找简洁
？如何在多设备中提供
丰富功能
和
连续性体验
的同时，还能让用户感受到
秩序
与
统一
？如何降低多场景多设备的开发成本？也许全场景设计思维，将会是数字产品由复杂走向简洁的钥匙之一。
感谢观看，欢迎大家随时交流，下次见～
参考资料：《鸿蒙应用生态开发白皮书V4.0》《鸿蒙生态解决方案白皮书（基础篇）V2.0》《鸿蒙2030白皮书》《HarmonyOS Developer-设计指南》《Material Design 3设计指南》《Apple Developer-iOS26设计指南》
36
Report
声明
78
Share
相关推荐
in to comment
Add emoji
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
You may like
相关收藏夹
Log in
36Log in and synchronize recommended records
78Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share