剛剛升級(jí)HarmonyOS 2的朋友

會(huì)注意到桌面不少APP圖標(biāo)下多了小橫條比如相機(jī)、日歷、微博、京東等

在好奇心的驅(qū)使下

如果你不小心向上滑動(dòng)了這些APP圖標(biāo)

那你就解鎖了全新功能——萬(wàn)能卡片！

小橫條只是萬(wàn)能卡片體驗(yàn)的開(kāi)始，

為了讓大家用著簡(jiǎn)單舒服，

萬(wàn)能卡片設(shè)計(jì)背后還有更多巧思，

小編帶著大家一探究竟~

「1」

為什么是卡片

一個(gè)舒適美觀的系統(tǒng)界面設(shè)計(jì)

不能是滿(mǎn)屏的內(nèi)容堆疊 ，

設(shè)計(jì)師需要通過(guò)一個(gè)“容器”

將界面的內(nèi)容進(jìn)行歸類(lèi)組合。

列表和卡片

正是信息整合的兩種常用方式，

二者在給大家?guī)?lái)的瀏覽體驗(yàn)上各有千秋，

分別適用于不同的情境。

比如列表式設(shè)計(jì)

常用于社交、新聞、辦公等APP，

有助于我們快速瀏覽檢索信息；

卡片式設(shè)計(jì)

則更適用短視頻、視頻、電商類(lèi)APP，

可以完美結(jié)合圖文呈現(xiàn)更好的視覺(jué)效果，

同時(shí)具有直觀的可操作性。

那么，桌面適用的情境是什么呢？

一方面，HarmonyOS 2不只是手機(jī)操作系統(tǒng)，

它還運(yùn)行在手表、平板、智慧屏等設(shè)備上；

另一方面，桌面需要保持視覺(jué)一致性，

還能承載不同形式的內(nèi)容。

于是，為了用戶(hù)能在不同設(shè)備

獲得統(tǒng)一、美觀、舒適的交互體驗(yàn)，

設(shè)計(jì)團(tuán)隊(duì)最終選擇了

靈活，易延展的萬(wàn)能卡片

作為HarmonyOS 2的桌面設(shè)計(jì)方案。

「2」

卡片除了內(nèi)功，還要有顏值

除了讓萬(wàn)能卡片好用，

設(shè)計(jì)師們還負(fù)責(zé)讓它好看又有趣。

目前有不少小伙伴

已經(jīng)充分發(fā)掘出萬(wàn)能卡片

可藏可顯、可大可小、隨心定制的潛力，

DIY了無(wú)數(shù)與眾不同的精美桌面：

無(wú)論是綠色的清新

粉色的可愛(ài)，還是黃色的溫暖…

都賞心悅目。

另外，考慮到不是所有人都有時(shí)間精力

布置美美的桌面，

華為將卡片換膚能力

開(kāi)放給第三方主題設(shè)計(jì)師，

給大家?guī)?lái)了既統(tǒng)一又多樣的賞心體驗(yàn)。

無(wú)論你是文藝青年，

還是潮人or極客，

都可以找到適合自己的風(fēng)格。

一鍵切換主題，

APP圖標(biāo)、萬(wàn)能卡片、壁紙和鎖屏一起變裝。

「3」

怎么才算上滑？一個(gè)看似簡(jiǎn)單的問(wèn)題

不管怎么上滑都能觸發(fā)卡片，

如此高效、精準(zhǔn)的交互體驗(yàn)，

大家可能都以為是因?yàn)樯匣瑒?dòng)作簡(jiǎn)單。

其實(shí)不然！

事實(shí)上，“上滑”并不簡(jiǎn)單。

每個(gè)人上滑的軌跡都不一樣，

也未必是一條垂直線(xiàn)。

為了能精準(zhǔn)識(shí)別大部分用戶(hù)的上滑習(xí)慣，

華為設(shè)計(jì)團(tuán)隊(duì)進(jìn)行了詳盡的人因研究，

分析發(fā)現(xiàn)三個(gè)識(shí)別滑動(dòng)的關(guān)鍵指標(biāo)：

滑動(dòng)的角度、速度、距離。

基于這三個(gè)關(guān)鍵指標(biāo)，

招募大量志愿者參與測(cè)試，

繪制出了屏幕上滑觸發(fā)的容易區(qū)、困難區(qū)。

繼而對(duì)不同區(qū)域的上滑體驗(yàn)進(jìn)行專(zhuān)門(mén)調(diào)試，

保證了我們?cè)谌魏蔚胤缴匣?/p>

都能高精準(zhǔn)識(shí)別

帶來(lái)更加自由舒適的萬(wàn)能卡片觸發(fā)體驗(yàn)。

所以，在我們習(xí)以為常的便捷體驗(yàn)背后，

往往隱含著許多不為人知的深入研究。

當(dāng)然，作為消費(fèi)者，

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

剩下的都交給設(shè)計(jì)師吧~

「4」

呼出卡片的絲滑流暢也有秘訣

關(guān)于動(dòng)效的流暢性，

大家在日常看視頻過(guò)程中應(yīng)該有所體會(huì)，

幀率越高、細(xì)節(jié)越豐富，

效果就越流暢。

比如，記錄一顆小樹(shù)成長(zhǎng)的短片，

如果小樹(shù)長(zhǎng)到大樹(shù)只有1秒鐘、幾幀畫(huà)面，

我們會(huì)覺(jué)得跳躍很大、不自然；

如果從小樹(shù)到大樹(shù)有幾百幀畫(huà)面持續(xù)20秒，

記錄了小樹(shù)每一天的狀態(tài)，

那動(dòng)畫(huà)就會(huì)流暢許多。

萬(wàn)能卡片的彈出和關(guān)閉動(dòng)效

就是一系列畫(huà)面組成的短片，

也遵循同樣道理。

不管從小卡片變成大卡片，

還是從大卡片縮回小卡片，

影響卡片動(dòng)效流暢性的因素就兩個(gè)：

動(dòng)效時(shí)長(zhǎng)和幀間距。

那么，問(wèn)題就來(lái)了，

多長(zhǎng)的動(dòng)效、多大的幀間距

可以帶來(lái)最流暢自然的體驗(yàn)?zāi)兀?/p>

手機(jī)、平板、智慧屏

等不同設(shè)備的屏幕大小不同

導(dǎo)致萬(wàn)能卡片的大小各異，

如果保持同樣的動(dòng)效時(shí)長(zhǎng)和幀間距，

大屏設(shè)備的動(dòng)效就會(huì)變得十分突兀。

所以，經(jīng)過(guò)大量的研究，

設(shè)計(jì)團(tuán)隊(duì)歸納了

各類(lèi)設(shè)備的最佳動(dòng)效時(shí)長(zhǎng)

和保證流暢的最大幀間距所處的范圍區(qū)間

這為動(dòng)效設(shè)計(jì)提供了科學(xué)的數(shù)據(jù)支撐，

進(jìn)而給我們帶來(lái)全場(chǎng)景下

流暢的動(dòng)效體驗(yàn)。

萬(wàn)能卡片的初心，

就是要給大家?guī)?lái)服務(wù)直達(dá)的煥新體驗(yàn)

它的樣子，它的交互，

還有在大家看不到的背后

都有著華為設(shè)計(jì)團(tuán)隊(duì)

對(duì)每個(gè)細(xì)節(jié)的思考、細(xì)琢

追尋著效率與美學(xué)之間的最佳平衡

這樣的萬(wàn)能卡片，希望如你所愿！

編輯;jq