# 体验了一个月纯血鸿蒙，我发现了它丝滑的秘密 - 作者：肖凡博 - 发布时间：2024-08-20 18:00 - 分类：公司 - 原文：https://www.ifanr.com/1596184 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/7028252efb901cf.png) 一个月前，我们收到华为鸿蒙 NEXT 系统的推送后，马上做了一期上手体验。 爱范儿编辑部的伙伴们，也轮流感受了一番。虽然大家日常的主力机啥牌子都有，但给纯血鸿蒙的评价都大体相同： > 挺丝滑的。 而且你几乎可以在每一个社交平台上看到「#鸿蒙 NEXT 流畅丝滑」的话题。我也有同样的感受，不过还是留下了几个疑问： - 丝滑是个结果，那是什么样的过程导致的？ - 鸿蒙 NEXT 整体和上一代系统没有太大的区别，那细节之处差在哪里？ ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT4.jpg) 经过了一个月的深度体验，我发现了一些华为新系统在犄角旮旯里的考量。可能这些细到不易被察觉的优化，才是丝滑的根源。 所以今天咱们就按照每个设计的「触达频率」，由小及大，由点及面，由静及动地把鸿蒙 NEXT 拆散了看看。 ### 图标，如此重要 > 屏幕是通向互联网的窗口。 我觉得这个说法不够准确，手机上真正能称为「窗口/通道」的，应该是应用。 微信微博、小红书抖音……几乎每个小时都会点开其中的某一个或几个，相比于系统中的其他部分，点击 App 图标的频率是最多的。 App 图标的设计经过了几个发展阶段：拟物化-扁平化-拟物和扁平化的自由调整。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT6.jpg) 说白了就是在仿真和简洁的风格间来回跳跃，但都无外乎 2 个设计核心：准确传达信息+统一的风格。 华为通过 EMUI-HarmonyOS-HarmonyOS NEXT 三代系统，逐渐敲定了自家的图标风格。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT13.jpg) 全新的图标风格叫做「轻拟物」，有 4 个非常明显的特征： ①图标轮廓简洁且便于理解，一眼就知道它是干什么的； ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT7.jpg) ②用半透模糊的元素堆叠呈现层次感，比纯拟物化的视觉重量更轻，又比纯扁平的风格更立体； ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT9.jpg) ③加强图形边缘的高光处理，强化整体质感，也能突出图形中的核心元素，视线能更快速地找到重点； ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT10.jpg) ④图标背板颜色轻度渐变，至上而下的照明描绘的物体在人眼看来更加自然，避免了强烈颜色渐变的冲击和突兀。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT1.jpg) 以上四点的应用设计，让桌面上的图标符号看起来更加统一，最直观的感受是：这是一个团队设计出来的东西，而不是分组讨论的结果。 当然了，「轻拟物」只是一种大趋势，总会有人喜欢更加接近实物和立体的风格，所以你还可以手动调成另外一种——边缘阴影更重，细节更具体，图层更立体，颜色更明亮。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT3.jpg) ▲ 左为轻拟物风格，右为拟物风格. 不难发现，即使是拟物化的图标依然遵循着上述的设计原则。而统一的调性，也用在了系统图标中。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT12.jpg) 控制中心、设置界面、系统应用导航栏，都有系统图标的身影，不过它很容易被忽略，因为一般会有文字搭配出现。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT2.jpg) 这也是系统图标的第一个设计难点：怎样与文字排版保持一致？华为的方案是，图像字符化，使其能够与系统字体无缝对接。 它能够根据文本的粗细变化进行智能适配，确保了在不同文本粗细下，图标能够灵活适应，保持视觉上的连贯。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT11.jpg) 我们在体验中还发现了另一个细节，鸿蒙 NEXT 的系统图标的动效更加丰富了：星闪、手电筒、华为分享、护眼模式、省电模式……都有了专属的效果。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/Aug-15-2024-14-10-52.gif) 新系统给图标设置了 7 种动态效果，通过出现、消失、弹跳、缩放、替换、脉冲和可变颜色的组合。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/1723704126259.gif) 你可能会想，图标设计和系统流畅性到底有什么关系？ 往小的说，图标动效也是系统的一部分，动作的连贯和一致，都会影响着用户对系统流畅的感知；往大的讲，图标在系统中出现的频率很高，用户接触的次数也极多。 统一、和谐的设计，才能让你在来回切换的页面中看到一套系统的影子，避免了「杂乱无章」。 因此，一致性的静态元素设计，才是系统走向流畅的基础。 ### 像水一样 有了应用和系统图标的铺垫，我们接下来看看具体的使用场景。 全面屏手机的应用和系统 UI 适配总是被吐槽过于「暴力」，只是把标准屏幕比例的应用拉大拉宽，没有很好地发挥大屏优势，用两倍的面积显示更多的信息，就像早些年平板上的偷懒策略一样。 让人感觉舒服的界面显示应该像水一样，不管容器长什么样，它总是能完美填充。 这种「如水」的适配方案，被华为叫做「响应式布局」。 > 当窗口容器大小发生变化时，界面元素可以自动变化以适应容器大小的变化。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/0000000000011111111.20240719141456.22548878485140619268562557176871.gif) 华为通过同时对页面背景、文本、图标、组件等元素的同步拉伸，做到顺滑过渡和界面适配。 不同组件可以在不同的页面，按照固定比例的大小进行缩放。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/Aug-15-2024-14-19-20.gif) 页面改变的同时，UI 的布局也会发生相应的变化，备忘录就是个很好的例子。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/Aug-15-2024-14-21-17.gif) 横向模式时，界面被一分为二，左边是目录栏，右边是二级菜单。这样不仅可以避免单一目录显示的拉伸过度、留白过多，也能充分利用横向屏幕的空间。 来到更加具体的小组件的适配上，鸿蒙 NEXT 则是通过改变其本身的形态和信息密度，来适应不同的大小。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/1723707004218.gif) 这就很像桌面小组件的设计思路：改变文件夹大小，用不同尺寸的服务卡片适配桌面空位。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/Aug-15-2024-14-25-02.gif) 响应式布局的方案有很多，但底层逻辑都完全一样： - 像静止的水一样适配 - 像流淌的水一样过渡 这些藏在角落里的适配方案，也正好促成了软硬件的契合。 鸿蒙 NEXT 的分屏，就做得很好。在传统方案里，只要能分出两块屏幕，就算是完成任务。 但新系统在此基础上，还把小窗的边角做了修剪，变成和屏幕 R 角相同的曲率。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/Aug-15-2024-14-27-13.gif) 说实话，窗口和屏幕的设计本就应该这样，但由于 Android 系统需要适配的品牌和机型过多，导致完美适配成了大难题。 而这，也是纯血鸿蒙系统带来的一个附加优势：原生系统专为本品牌机型服务，其他的无需考虑。 ### 在二维屏幕，玩三维艺术 一个月前，如果你问我「鸿蒙 NEXT 的 UI 到底有哪些升级？」 我可能只会告诉你在很多地方增加了「毛玻璃」的特效层，但是单一的元素增加很难让系统的流畅度提升一个等级。 想要做到，并被用户感知到「丝滑」，实则是一个系统性的工程，你必须考虑得面面俱到。体验了一个月后，我把纯血鸿蒙的流畅操作归为两大部分： - 层次感 - 力的玩转 先看层次感，毛玻璃（模糊）特效是当中的一部分，一般在开关 App、负一屏、下拉搜索、关闭后台、分屏移动分割线等场景中出现。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/1723703827250.gif) 对比先前的系统，模糊特效的确多了很多，但同时加上的动效还有桌面图标的缩放，配合在一起就能模拟出人眼聚焦和虚焦的过程，我们所说的交互时的真实感，就是二者共同作用的结果。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/1723703930929.gif) 通过缩放模拟出桌面的升降特效，也很直观地体现出了系统中的层级关系。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/Aug-15-2024-15-34-48.gif) 打开 App、新建任务、解锁屏幕等都属于上下层级，鸿蒙 NEXT 给这类切换，设置了若干个动效： ![](https://s3.ifanr.com/wp-content/uploads/2024/08/1723704945906.gif) 此外，还有跨层级、同层级之间的切换，也都有相应的动画。 把层级关系细分，并放上不同的特效，一是通过层次提升系统的立体感，让转场变得不生硬，二是把非线性动画融入到每一次转场中，操作也会变得更加流畅，起码看起来是这样。 官网的演示视频，就很好地说明了非线性动画对流畅性的作用。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/Aug-15-2024-15-37-17.gif) 华为对层级关系的优化，不仅仅局限于大的页面转场，还聚焦在小的图标上。 我们可以在新系统中随处看到以下这些一镜到底的动画： ![](https://s3.ifanr.com/wp-content/uploads/2024/08/1723705337234.gif) 不管是凸显搜索框、缩放 App 图标，还是功能键的开启关闭，总之你很难在这套系统上看到强行转场，它总是能通过形状、颜色、位移、缩放等一系列方式，让这个过程变得更自然。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT14.jpg) 根据官方的数据统计，转场是系统占比最高的动效类型，能达到 60% 以上。这也是许多人上手鸿蒙 NEXT 后，会觉得更丝滑的根本原因之一——你哪儿哪儿都能见到。 ### 无处不在的「虚空弹簧」 记得有位同事和我分享过一个事例： > 现在的孩子看到屏幕的第一反应不是找遥控器，而是用手指点击或滑动它。 全面屏时代，新生代和数码产品交互的方式，已经彻底迭代完毕——滑动和轻触，已经成为了绝大部分消费电子品的输入方式——Z 轴上的按压正在消亡。 很多人都会怀念功能机上的按键，因为觉得手感更好，且有很明显的物理触感确认。 这也是触控屏被人诟病的原因：反馈不足。各大厂商也通过马达震动（触觉）、音效配合（听觉）等各种方式，把能让人安心的物理动程在平整的屏幕上还原出来。 系统图标上的动效，就是在视觉上的确认加强。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/Aug-15-2024-15-04-58.gif) 鸿蒙 NEXT 的「引力动效体系」，就是通过各种动效模仿出物体在运动过程中「力」，以此来让交互操作活起来。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/NEXT8.jpg) 华为把力具象化为一个个不存在的弹簧，充斥在鸿蒙 NEXT 的每个角落。 例如滑动页面时，上下/左右的边界都会有「弹簧」，到达边界后会有一个非常自然的回弹特效，告诉你已经到头了。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/Aug-15-2024-15-06-35.gif) 留有一定的弹性空间还能防误触，避免系统感应过于灵敏，导致我们需要用寸劲，在毫米级的操作上小心翼翼。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/Aug-15-2024-15-07-19.gif) 而且，到处都有的虚拟弹簧，也能一定程度上促成大范围的操作流畅感：牵一发而动全身联动，接近真实的回弹特效。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/Aug-15-2024-15-08-12.gif) 还原出物理世界的动效，可以降低用户的学习成本，按照生活中「本就如此」的习惯操作就能快速上手新设备和新系统。 而对于早已熟悉手势操作或鸿蒙系统的朋友而言，更跟手的交互，就是最大的意义。 在华为开发者官网里有这么一句话： > 动效要始终围绕操作符合用户心理预期，物体运动符合真实世界。 产品工程师想尽一切办法把三维世界的一切压缩在二维的屏幕里，而产品经理又绞尽脑汁在二维的显示屏上模仿出真实的世界。 ![](https://s3.ifanr.com/wp-content/uploads/2024/08/1723705876863.gif) ▲ 图片来自：rauno.com 说到底，对交互设计的深耕，实际上是在更深层次地了解我们自己：哪些场景需要用到滑动？转场时的特效怎样安排？如何用一根手指覆盖 99% 的操作？ 如果你和我一样，是从按键机一步步换到全面屏，其实不难发现，现在手机上的这套交互系统，其实更加适合我们——几乎不用思考和学习，拿来就会。 当你察觉不到系统交互的存在时，就是对一个系统最大的夸奖，因为以上所有在细节上的考量，已经让产品变成我们身体的自然延伸。