体验了一个月纯血鸿蒙我创造了它丝滑的秘密

爱范儿编辑部的伙伴们，也轮流感想熏染了一番。

虽然大家日常的主力机啥牌子都有，但给纯血鸿蒙的评价都大体相同：

挺丝滑的。

而且你险些可以在每一个社交平台上看到「#鸿蒙 NEXT 流畅丝滑」的话题。
我也有同样的感想熏染，不过还是留下了几个疑问：

丝滑是个结果，那是什么样的过程导致的？鸿蒙 NEXT 整体和上一代系统没有太大的差异，那细节之处差在哪里？

经由了一个月的深度体验，我创造了一些华为新系统在犄角旮旯里的考量。
可能这些细到不易被察觉的优化，才是丝滑的根源。

以是本日咱们就按照每个设计的「触达频率」，由小及大，由点及面，由静及动地把鸿蒙 NEXT 拆散了看看。

图标，如此主要

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

我以为这个说法不足准确，手机上真正能称为「窗口/通道」的，该当是运用。

微信微博、小红书抖音…… 险些每个小时都会点开个中的某一个或几个，比较于系统中的其他部分，点击 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），更多精彩内容第一韶光为您奉上。

爱范儿|原文链接 新浪微博