分享

用了就回不去!带你探究万能卡片

 积沙成塔0u3svg 2022-01-28

刚刚升级HarmonyOS 2的朋友

会注意到桌面不少APP图标下多了小横条

比如相机、日历、微博、京东等

图片

在好奇心的驱使下  

如果你不小心向上滑动了这些APP图标  

那你就解锁了全新功能——万能卡片

图片

小横条只是万能卡片体验的开始,

为了让大家用着简单舒服,

万能卡片设计背后还有更多巧思,

小编带着大家一探究竟~

「1」

为什么是卡片

一个舒适美观的系统界面设计

不能是满屏的内容堆叠 ,

设计师需要通过一个“容器”

将界面的内容进行归类组合。

列表卡片

正是信息整合的两种常用方式,

二者在给大家带来的浏览体验上各有千秋,

分别适用于不同的情境。

图片

比如列表式设计

常用于社交、新闻、办公等APP,

有助于我们快速浏览检索信息;

卡片式设计

则更适用短视频、视频、电商类APP,

可以完美结合图文呈现更好的视觉效果,

同时具有直观的可操作性。

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

一方面,HarmonyOS 2不只是手机操作系统,

它还运行在手表、平板、智慧屏等设备上;

另一方面,桌面需要保持视觉一致性,

还能承载不同形式的内容。

图片

于是,为了用户能在不同设备

获得统一、美观、舒适的交互体验,

设计团队最终选择了

灵活,易延展的万能卡片 

作为HarmonyOS 2的桌面设计方案。

「2」

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

除了让万能卡片好用,

设计师们还负责让它好看又有趣。

目前有不少小伙伴

已经充分发掘出万能卡片  

可藏可显、可大可小、随心定制的潜力,

DIY了无数与众不同的精美桌面: 

无论是绿色的清新  

粉色的可爱,还是黄色的温暖…  

都赏心悦目。

图片

另外,考虑到不是所有人都有时间精力

布置美美的桌面,

华为将卡片换肤能力

开放给第三方主题设计师,

给大家带来了既统一又多样的赏心体验。

图片

无论你是文艺青年,

还是潮人or极客,

都可以找到适合自己的风格。

一键切换主题,

APP图标、万能卡片、壁纸和锁屏一起变装。

「3」

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

不管怎么上滑都能触发卡片,

如此高效、精准的交互体验,

大家可能都以为是因为上滑动作简单。

其实不然!

事实上,“上滑”并不简单。  

每个人上滑的轨迹都不一样,

也未必是一条垂直线。

为了能精准识别大部分用户的上滑习惯,

华为设计团队进行了详尽的人因研究,

分析发现三个识别滑动的关键指标:  

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

图片

基于这三个关键指标,

招募大量志愿者参与测试,

绘制出了屏幕上滑触发的容易区、困难区。

图片

继而对不同区域的上滑体验进行专门调试,

保证了我们在任何地方上滑,

都能高精准识别

带来更加自由舒适的万能卡片触发体验。

图片

所以,在我们习以为常的便捷体验背后,

往往隐含着许多不为人知的深入研究。

当然,作为消费者,

我们知道怎么用、好用即可

剩下的都交给设计师吧~

「4」

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

关于动效的流畅性,

大家在日常看视频过程中应该有所体会,

帧率越高、细节越丰富,

效果就越流畅。

比如,记录一颗小树成长的短片,

如果小树长到大树只有1秒钟、几帧画面,

我们会觉得跳跃很大、不自然;

如果从小树到大树有几百帧画面持续20秒,

记录了小树每一天的状态,

那动画就会流畅许多。

 

万能卡片的弹出和关闭动效

就是一系列画面组成的短片,

也遵循同样道理。

不管从小卡片变成大卡片,

还是从大卡片缩回小卡片,

影响卡片动效流畅性的因素就两个:

动效时长帧间距。

图片

那么,问题就来了,

多长的动效、多大的帧间距

可以带来最流畅自然的体验呢?

 

手机、平板、智慧屏

等不同设备的屏幕大小不同

导致万能卡片的大小各异,

如果保持同样的动效时长和帧间距,

大屏设备的动效就会变得十分突兀。

 

所以,经过大量的研究,

设计团队归纳了

各类设备的最佳动效时长

和保证流畅的最大帧间距所处的范围区间

这为动效设计提供了科学的数据支撑,

进而给我们带来全场景下

流畅的动效体验。

图片

万能卡片的初心,

就是要给大家带来服务直达的焕新体验

它的样子,它的交互,

还有在大家看不到的背后

都有着华为设计团队

对每个细节的思考、细琢

追寻着效率与美学之间的最佳平衡

这样的万能卡片,希望如你所愿!

更多HarmonyOS最新资讯,
请关注公众号了解↓↓↓

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多