2024年8月21日星期三

体验了一个月纯血鸿蒙,我发现了它丝滑的秘密

一个月前,我们收到华为鸿蒙 NEXT 系统的推送后,马上做了一期上手体验。

爱范儿编辑部的伙伴们,也轮流感受了一番。虽然大家日常的主力机啥牌子都有,但给纯血鸿蒙的评价都大体相同:

挺丝滑的。

而且你几乎可以在每一个社交平台上看到「#鸿蒙 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),更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博




from 爱范儿 https://ift.tt/d6tSRcV
via IFTTT

没有评论:

发表评论