屏幕是通向互联网的窗口。

屏幕是通向互联网的窗口。

我觉得这个说法不够准确，手机上真正能称为「窗口/通道」的，应该是应用。

微信微博、小红书抖音…… 几乎每个小时都会点开其中的某一个或几个，相比于系统中的其他部分，点击 App 图标的频率是最多的。

App 图标的设计经过了几个发展阶段：拟物化-扁平化-拟物和扁平化的自由调整。

说白了就是在仿真和简洁的风格间来回跳跃，但都无外乎 2 个设计核心：准确传达信息+统一的风格。

华为通过 EMUI-HarmonyOS-HarmonyOS NEXT 三代系统，逐渐敲定了自家的图标风格。

全新的图标风格叫做「轻拟物」，有 4 个非常明显的特征：

①图标轮廓简洁且便于理解，一眼就知道它是干什么的；

②用半透模糊的元素堆叠呈现层次感，比纯拟物化的视觉重量更轻，又比纯扁平的风格更立体；

③加强图形边缘的高光处理，强化整体质感，也能突出图形中的核心元素，视线能更快速地找到重点；

④图标背板颜色轻度渐变，至上而下的照明描绘的物体在人眼看来更加自然，避免了强烈颜色渐变的冲击和突兀。

以上四点的应用设计，让桌面上的图标符号看起来更加统一，最直观的感受是：这是一个团队设计出来的东西，而不是分组讨论的结果。

当然了，「轻拟物」只是一种大趋势，总会有人喜欢更加接近实物和立体的风格，所以你还可以手动调成另外一种——边缘阴影更重，细节更具体，图层更立体，颜色更明亮。

▲ 左为轻拟物风格，右为拟物风格.

不难发现，即使是拟物化的图标依然遵循着上述的设计原则。而统一的调性，也用在了系统图标中。

控制中心、设置界面、系统应用导航栏，都有系统图标的身影，不过它很容易被忽略，因为一般会有文字搭配出现。

这也是系统图标的第一个设计难点：怎样与文字排版保持一致？华为的方案是，图像字符化，使其能够与系统字体无缝对接。

它能够根据文本的粗细变化进行智能适配，确保了在不同文本粗细下，图标能够灵活适应，保持视觉上的连贯。

我们在体验中还发现了另一个细节，鸿蒙 NEXT 的系统图标的动效更加丰富了：星闪、手电筒、华为分享、护眼模式、省电模式…… 都有了专属的效果。

新系统给图标设置了 7 种动态效果，通过出现、消失、弹跳、缩放、替换、脉冲和可变颜色的组合。

你可能会想，图标设计和系统流畅性到底有什么关系？

往小的说，图标动效也是系统的一部分，动作的连贯和一致，都会影响着用户对系统流畅的感知；往大的讲，图标在系统中出现的频率很高，用户接触的次数也极多。

统一、和谐的设计，才能让你在来回切换的页面中看到一套系统的影子，避免了「杂乱无章」。

因此，一致性的静态元素设计，才是系统走向流畅的基础。

像水一样

有了应用和系统图标的铺垫，我们接下来看看具体的使用场景。

全面屏手机的应用和系统 UI 适配总是被吐槽过于「暴力」，只是把标准屏幕比例的应用拉大拉宽，没有很好地发挥大屏优势，用两倍的面积显示更多的信息，就像早些年平板上的偷懒策略一样。

让人感觉舒服的界面显示应该像水一样，不管容器长什么样，它总是能完美填充。

这种「如水」的适配方案，被华为叫做「响应式布局」。

当窗口容器大小发生变化时，界面元素可以自动变化以适应容器大小的变化。

当窗口容器大小发生变化时，界面元素可以自动变化以适应容器大小的变化。

华为通过同时对页面背景、文本、图标、组件等元素的同步拉伸，做到顺滑过渡和界面适配。

不同组件可以在不同的页面，按照固定比例的大小进行缩放。

页面改变的同时，UI 的布局也会发生相应的变化，备忘录就是个很好的例子。

横向模式时，界面被一分为二，左边是目录栏，右边是二级菜单。这样不仅可以避免单一目录显示的拉伸过度、留白过多，也能充分利用横向屏幕的空间。

来到更加具体的小组件的适配上，鸿蒙 NEXT 则是通过改变其本身的形态和信息密度，来适应不同的大小。

这就很像桌面小组件的设计思路：改变文件夹大小，用不同尺寸的服务卡片适配桌面空位。

响应式布局的方案有很多，但底层逻辑都完全一样：

• 像静止的水一样适配
• 像流淌的水一样过渡

这些藏在角落里的适配方案，也正好促成了软硬件的契合。

鸿蒙 NEXT 的分屏，就做得很好。在传统方案里，只要能分出两块屏幕，就算是完成任务。

但新系统在此基础上，还把小窗的边角做了修剪，变成和屏幕 R 角相同的曲率。

说实话，窗口和屏幕的设计本就应该这样，但由于 Android 系统需要适配的品牌和机型过多，导致完美适配成了大难题。

而这，也是纯血鸿蒙系统带来的一个附加优势：原生系统专为本品牌机型服务，其他的无需考虑。

在二维屏幕，玩三维艺术

一个月前，如果你问我「鸿蒙 NEXT 的 UI 到底有哪些升级？」

我可能只会告诉你在很多地方增加了「毛玻璃」的特效层，但是单一的元素增加很难让系统的流畅度提升一个等级。

想要做到，并被用户感知到「丝滑」，实则是一个系统性的工程，你必须考虑得面面俱到。体验了一个月后，我把纯血鸿蒙的流畅操作归为两大部分：

• 层次感
• 力的玩转

先看层次感，毛玻璃（模糊）特效是当中的一部分，一般在开关 App、负一屏、下拉搜索、关闭后台、分屏移动分割线等场景中出现。

对比先前的系统，模糊特效的确多了很多，但同时加上的动效还有桌面图标的缩放，配合在一起就能模拟出人眼聚焦和虚焦的过程，我们所说的交互时的真实感，就是二者共同作用的结果。

通过缩放模拟出桌面的升降特效，也很直观地体现出了系统中的层级关系。

打开 App、新建任务、解锁屏幕等都属于上下层级，鸿蒙 NEXT 给这类切换，设置了若干个动效：

此外，还有跨层级、同层级之间的切换，也都有相应的动画。

把层级关系细分，并放上不同的特效，一是通过层次提升系统的立体感，让转场变得不生硬，二是把非线性动画融入到每一次转场中，操作也会变得更加流畅，起码看起来是这样。

官网的演示视频，就很好地说明了非线性动画对流畅性的作用。

华为对层级关系的优化，不仅仅局限于大的页面转场，还聚焦在小的图标上。

我们可以在新系统中随处看到以下这些一镜到底的动画：

不管是凸显搜索框、缩放 App 图标，还是功能键的开启关闭，总之你很难在这套系统上看到强行转场，它总是能通过形状、颜色、位移、缩放等一系列方式，让这个过程变得更自然。

根据官方的数据统计，转场是系统占比最高的动效类型，能达到 60% 以上。这也是许多人上手鸿蒙 NEXT 后，会觉得更丝滑的根本原因之一——你哪儿哪儿都能见到。

无处不在的「虚空弹簧」

记得有位同事和我分享过一个事例：

现在的孩子看到屏幕的第一反应不是找遥控器，而是用手指点击或滑动它。

现在的孩子看到屏幕的第一反应不是找遥控器，而是用手指点击或滑动它。

全面屏时代，新生代和数码产品交互的方式，已经彻底迭代完毕——滑动和轻触，已经成为了绝大部分消费电子品的输入方式——Z 轴上的按压正在消亡。

很多人都会怀念功能机上的按键，因为觉得手感更好，且有很明显的物理触感确认。

这也是触控屏被人诟病的原因：反馈不足。各大厂商也通过马达震动（触觉）、音效配合（听觉）等各种方式，把能让人安心的物理动程在平整的屏幕上还原出来。

系统图标上的动效，就是在视觉上的确认加强。

鸿蒙 NEXT 的「引力动效体系」，就是通过各种动效模仿出物体在运动过程中「力」，以此来让交互操作活起来。

华为把力具象化为一个个不存在的弹簧，充斥在鸿蒙 NEXT 的每个角落。

例如滑动页面时，上下/左右的边界都会有「弹簧」，到达边界后会有一个非常自然的回弹特效，告诉你已经到头了。

留有一定的弹性空间还能防误触，避免系统感应过于灵敏，导致我们需要用寸劲，在毫米级的操作上小心翼翼。

而且，到处都有的虚拟弹簧，也能一定程度上促成大范围的操作流畅感：牵一发而动全身联动，接近真实的回弹特效。

还原出物理世界的动效，可以降低用户的学习成本，按照生活中「本就如此」的习惯操作就能快速上手新设备和新系统。

而对于早已熟悉手势操作或鸿蒙系统的朋友而言，更跟手的交互，就是最大的意义。

在华为开发者官网里有这么一句话：

动效要始终围绕操作符合用户心理预期，物体运动符合真实世界。

动效要始终围绕操作符合用户心理预期，物体运动符合真实世界。

产品工程师想尽一切办法把三维世界的一切压缩在二维的屏幕里，而产品经理又绞尽脑汁在二维的显示屏上模仿出真实的世界。

▲ 图片来自：rauno.com

说到底，对交互设计的深耕，实际上是在更深层次地了解我们自己：哪些场景需要用到滑动？转场时的特效怎样安排？如何用一根手指覆盖 99% 的操作？

如果你和我一样，是从按键机一步步换到全面屏，其实不难发现，现在手机上的这套交互系统，其实更加适合我们——几乎不用思考和学习，拿来就会。

当你察觉不到系统交互的存在时，就是对一个系统最大的夸奖，因为以上所有在细节上的考量，已经让产品变成我们身体的自然延伸。

#欢迎关注爱范儿官方微信公众号：爱范儿（微信号：ifanr），更多精彩内容第一时间为您奉上。

| · ·