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