华为官方详解鸿蒙 HarmonyOS 2 万能卡片:App 图标下有小横条即可解锁,丝滑流畅

IT之家 8 月 11 日消息 刚刚升级 HarmonyOS 2 的朋友会注意到桌面不少 App 图标下多了小横条比如相机、日历、微博、京东等,如果你不小心向上滑动了这些 App 图标  那你就解锁了全新功能 —— 万能卡片!

华为官方详解鸿蒙 HarmonyOS 2 万能卡片:App 图标下有小横条即可解锁,丝滑流畅

华为官方详解鸿蒙 HarmonyOS 2 万能卡片:App 图标下有小横条即可解锁,丝滑流畅

小横条只是万能卡片体验的开始,为了让大家用着简单舒服,万能卡片设计背后还有更多巧思,今天华为鸿蒙官方带来了详细介绍。

为什么是卡片

一个舒适美观的系统界面设计,不能是满屏的内容堆叠 ,设计师需要通过一个“容器”将界面的内容进行归类组合。

列表和卡片正是信息整合的两种常用方式,二者在给大家带来的浏览体验上各有千秋,分别适用于不同的情境。

华为官方详解鸿蒙 HarmonyOS 2 万能卡片:App 图标下有小横条即可解锁,丝滑流畅

比如列表式设计,常用于社交、新闻、办公等 App,有助于我们快速浏览检索信息;卡片式设计,则更适用短视频、视频、电商类 App,可以完美结合图文呈现更好的视觉效果,同时具有直观的可操作性。

那么,桌面适用的情境是什么呢?

一方面,HarmonyOS 2 不只是手机操作系统,它还运行在手表、平板、智慧屏等设备上;另一方面,桌面需要保持视觉一致性,还能承载不同形式的内容。

华为官方详解鸿蒙 HarmonyOS 2 万能卡片:App 图标下有小横条即可解锁,丝滑流畅

于是,为了用户能在不同设备获得统一、美观、舒适的交互体验,设计团队最终选择了灵活,易延展的万能卡片,作为 HarmonyOS 2 的桌面设计方案。

卡片除了内功,还要有颜值

除了让万能卡片好用,设计师们还负责让它好看又有趣。

目前有不少小伙伴已经充分发掘出万能卡片,可藏可显、可大可小、随心定制的潜力,DIY 了无数与众不同的精美桌面: 无论是绿色的清新,粉色的可爱,还是黄色的温暖…  都赏心悦目。

华为官方详解鸿蒙 HarmonyOS 2 万能卡片:App 图标下有小横条即可解锁,丝滑流畅

另外,考虑到不是所有人都有时间精力布置美美的桌面,华为将卡片换肤能力开放给第三方主题设计师,给大家带来了既统一又多样的赏心体验。

华为官方详解鸿蒙 HarmonyOS 2 万能卡片:App 图标下有小横条即可解锁,丝滑流畅

无论你是文艺青年,还是潮人 or 极客,都可以找到适合自己的风格。一键切换主题,App 图标、万能卡片、壁纸和锁屏一起变装。

怎么才算上滑?一个看似简单的问题

不管怎么上滑都能触发卡片,如此高效、精准的交互体验,大家可能都以为是因为上滑动作简单。

其实不然!事实上,“上滑”并不简单。  每个人上滑的轨迹都不一样,也未必是一条垂直线。为了能精准识别大部分用户的上滑习惯,华为设计团队进行了详尽的人因研究,分析发现三个识别滑动的关键指标: 

滑动的角度、速度、距离。

华为官方详解鸿蒙 HarmonyOS 2 万能卡片:App 图标下有小横条即可解锁,丝滑流畅

基于这三个关键指标,招募大量志愿者参与测试,绘制出了屏幕上滑触发的容易区、困难区。

华为官方详解鸿蒙 HarmonyOS 2 万能卡片:App 图标下有小横条即可解锁,丝滑流畅

继而对不同区域的上滑体验进行专门调试,保证了我们在任何地方上滑,都能高精准识别带来更加自由舒适的万能卡片触发体验。

华为官方详解鸿蒙 HarmonyOS 2 万能卡片:App 图标下有小横条即可解锁,丝滑流畅

呼出卡片的丝滑流畅也有秘诀

关于动效的流畅性,大家在日常看视频过程中应该有所体会,帧率越高、细节越丰富,效果就越流畅。

万能卡片的弹出和关闭动效就是一系列画面组成的短片,也遵循同样道理。不管从小卡片变成大卡片,还是从大卡片缩回小卡片,影响卡片动效流畅性的因素就两个:

动效时长和帧间距。

华为官方详解鸿蒙 HarmonyOS 2 万能卡片:App 图标下有小横条即可解锁,丝滑流畅

那么,问题就来了,多长的动效、多大的帧间距可以带来最流畅自然的体验呢?手机、平板、智慧屏等不同设备的屏幕大小不同导致万能卡片的大小各异,如果保持同样的动效时长和帧间距,大屏设备的动效就会变得十分突兀。

所以,经过大量的研究,设计团队归纳了各类设备的最佳动效时长和保证流畅的最大帧间距所处的范围区间这为动效设计提供了科学的数据支撑,进而给我们带来全场景下流畅的动效体验。

华为官方详解鸿蒙 HarmonyOS 2 万能卡片:App 图标下有小横条即可解锁,丝滑流畅

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/68017.html

(0)
上一篇 2021年8月11日 12:08
下一篇 2021年8月11日

相关推荐

发表回复

登录后才能评论