IT之家 8 月 11 日消息 剛剛升級(jí) HarmonyOS 2 的朋友會(huì)注意到桌面不少 App 圖標(biāo)下多了小橫條比如相機(jī)、日歷、微博、京東等，如果你不小心向上滑動(dòng)了這些 App 圖標(biāo) 那你就解鎖了全新功能 —— 萬(wàn)能卡片！
小橫條只是萬(wàn)能卡片體驗(yàn)的開始，為了讓大家用著簡(jiǎn)單舒服，萬(wàn)能卡片設(shè)計(jì)背后還有更多巧思，今天華為鴻蒙官方帶來(lái)了詳細(xì)介紹。
為什么是卡片
一個(gè)舒適美觀的系統(tǒng)界面設(shè)計(jì)，不能是滿屏的內(nèi)容堆疊 ，設(shè)計(jì)師需要通過(guò)一個(gè)“容器”將界面的內(nèi)容進(jìn)行歸類組合。
列表和卡片正是信息整合的兩種常用方式，二者在給大家?guī)?lái)的瀏覽體驗(yàn)上各有千秋，分別適用于不同的情境。
比如列表式設(shè)計(jì)，常用于社交、新聞、辦公等 App，有助于我們快速瀏覽檢索信息；卡片式設(shè)計(jì)，則更適用短視頻、視頻、電商類 App，可以完美結(jié)合圖文呈現(xiàn)更好的視覺效果，同時(shí)具有直觀的可操作性。
那么，桌面適用的情境是什么呢？
一方面，HarmonyOS 2 不只是手機(jī)操作系統(tǒng)，它還運(yùn)行在手表、平板、智慧屏等設(shè)備上；另一方面，桌面需要保持視覺一致性，還能承載不同形式的內(nèi)容。
于是，為了用戶能在不同設(shè)備獲得統(tǒng)一、美觀、舒適的交互體驗(yàn)，設(shè)計(jì)團(tuán)隊(duì)最終選擇了靈活，易延展的萬(wàn)能卡片，作為 HarmonyOS 2 的桌面設(shè)計(jì)方案。
卡片除了內(nèi)功，還要有顏值
除了讓萬(wàn)能卡片好用，設(shè)計(jì)師們還負(fù)責(zé)讓它好看又有趣。
目前有不少小伙伴已經(jīng)充分發(fā)掘出萬(wàn)能卡片，可藏可顯、可大可小、隨心定制的潛力，DIY 了無(wú)數(shù)與眾不同的精美桌面： 無(wú)論是綠色的清新，粉色的可愛，還是黃色的溫暖… 都賞心悅目。
另外，考慮到不是所有人都有時(shí)間精力布置美美的桌面，華為將卡片換膚能力開放給第三方主題設(shè)計(jì)師，給大家?guī)?lái)了既統(tǒng)一又多樣的賞心體驗(yàn)。
無(wú)論你是文藝青年，還是潮人 or 極客，都可以找到適合自己的風(fēng)格。一鍵切換主題，App 圖標(biāo)、萬(wàn)能卡片、壁紙和鎖屏一起變裝。
怎么才算上滑？一個(gè)看似簡(jiǎn)單的問題
不管怎么上滑都能觸發(fā)卡片，如此高效、精準(zhǔn)的交互體驗(yàn)，大家可能都以為是因?yàn)樯匣瑒?dòng)作簡(jiǎn)單。
其實(shí)不然！事實(shí)上，“上滑”并不簡(jiǎn)單。 每個(gè)人上滑的軌跡都不一樣，也未必是一條垂直線。為了能精準(zhǔn)識(shí)別大部分用戶的上滑習(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)行專門調(diào)試，保證了我們?cè)谌魏蔚胤缴匣?，都能高精?zhǔn)識(shí)別帶來(lái)更加自由舒適的萬(wàn)能卡片觸發(fā)體驗(yàn)。
呼出卡片的絲滑流暢也有秘訣
關(guān)于動(dòng)效的流暢性，大家在日?？匆曨l過(guò)程中應(yīng)該有所體會(huì)，幀率越高、細(xì)節(jié)越豐富，效果就越流暢。
萬(wàn)能卡片的彈出和關(guān)閉動(dòng)效就是一系列畫面組成的短片，也遵循同樣道理。不管從小卡片變成大卡片，還是從大卡片縮回小卡片，影響卡片動(dòng)效流暢性的因素就兩個(gè)：
動(dòng)效時(shí)長(zhǎng)和幀間距。
那么，問題就來(lái)了，多長(zhǎng)的動(dòng)效、多大的幀間距可以帶來(lái)最流暢自然的體驗(yàn)?zāi)兀渴謾C(jī)、平板、智慧屏等不同設(shè)備的屏幕大小不同導(dǎo)致萬(wàn)能卡片的大小各異，如果保持同樣的動(dòng)效時(shí)長(zhǎng)和幀間距，大屏設(shè)備的動(dòng)效就會(huì)變得十分突兀。
所以，經(jīng)過(guò)大量的研究，設(shè)計(jì)團(tuán)隊(duì)歸納了各類設(shè)備的最佳動(dòng)效時(shí)長(zhǎng)和保證流暢的最大幀間距所處的范圍區(qū)間這為動(dòng)效設(shè)計(jì)提供了科學(xué)的數(shù)據(jù)支撐，進(jìn)而給我們帶來(lái)全場(chǎng)景下流暢的動(dòng)效體驗(yàn)。
廣告聲明：文內(nèi)含有的對(duì)外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時(shí)間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。