1. 程式人生 > 資訊 >華為官方詳解鴻蒙 HarmonyOS 2 萬能卡片:App 圖示下有小橫條即可解鎖,絲滑流暢

華為官方詳解鴻蒙 HarmonyOS 2 萬能卡片:App 圖示下有小橫條即可解鎖,絲滑流暢

8 月 11 日訊息剛剛升級 HarmonyOS 2 的朋友會注意到桌面不少 App 圖示下多了小橫條比如相機、日曆、微博、京東等,如果你不小心向上滑動了這些App圖示 那你就解鎖了全新功能 —— 萬能卡片!

小橫條只是萬能卡片體驗的開始,為了讓大家用著簡單舒服,萬能卡片設計背後還有更多巧思,今天華為鴻蒙官方帶來了詳細介紹。

為什麼是卡片

一個舒適美觀的系統介面設計,不能是滿屏的內容堆疊 ,設計師需要通過一個“容器”將介面的內容進行歸類組合。

列表和卡片正是資訊整合的兩種常用方式,二者在給大家帶來的瀏覽體驗上各有千秋,分別適用於不同的情境。

比如列表式設計,常用於社交、新聞、辦公等 App,有助於我們快速瀏覽檢索資訊;卡片式設計,則更適用短視訊、視訊、電商類 App,可以完美結合圖文呈現更好的視覺效果,同時具有直觀的可操作性。

那麼,桌面適用的情境是什麼呢?

一方面,HarmonyOS 2 不只是手機作業系統,它還執行在手錶、平板、智慧屏等裝置上;另一方面,桌面需要保持視覺一致性,還能承載不同形式的內容。

於是,為了使用者能在不同裝置獲得統一、美觀、舒適的互動體驗,設計團隊最終選擇了靈活,易延展的萬能卡片,作為 HarmonyOS 2 的桌面設計方案。

卡片除了內功,還要有顏值

除了讓萬能卡片好用,設計師們還負責讓它好看又有趣。

目前有不少小夥伴已經充分發掘出萬能卡片,可藏可顯、可大可小、隨心定製的潛力,DIY 了無數與眾不同的精美桌面: 無論是綠色的清新,粉色的可愛,還是黃色的溫暖… 都賞心悅目。

另外,考慮到不是所有人都有時間精力佈置美美的桌面,華為將卡片換膚能力開放給第三方主題設計師,給大家帶來了既統一又多樣的賞心體驗。

無論你是文藝青年,還是潮人 or 極客,都可以找到適合自己的風格。一鍵切換主題,App 圖示、萬能卡片、桌布和鎖屏一起變裝。

怎麼才算上滑?一個看似簡單的問題

不管怎麼上滑都能觸發卡片,如此高效、精準的互動體驗,大家可能都以為是因為上滑動作簡單。

其實不然!事實上,“上滑”並不簡單。 每個人上滑的軌跡都不一樣,也未必是一條垂直線。為了能精準識別大部分使用者的上滑習慣,華為設計團隊進行了詳盡的人因研究,分析發現三個識別滑動的關鍵指標:

滑動的角度、速度、距離。

基於這三個關鍵指標,招募大量志願者參與測試,繪製出了螢幕上滑觸發的容易區、困難區。

繼而對不同區域的上滑體驗進行專門除錯,保證了我們在任何地方上滑,都能高精準識別帶來更加自由舒適的萬能卡片觸發體驗。

撥出卡片的絲滑流暢也有祕訣

關於動效的流暢性,大家在日常看視訊過程中應該有所體會,幀率越高、細節越豐富,效果就越流暢。

萬能卡片的彈出和關閉動效就是一系列畫面組成的短片,也遵循同樣道理。不管從小卡片變成大卡片,還是從大卡片縮回小卡片,影響卡片動效流暢性的因素就兩個:

動效時長和幀間距。

那麼,問題就來了,多長的動效、多大的幀間距可以帶來最流暢自然的體驗呢?手機、平板、智慧屏等不同裝置的螢幕大小不同導致萬能卡片的大小各異,如果保持同樣的動效時長和幀間距,大屏裝置的動效就會變得十分突兀。

所以,經過大量的研究,設計團隊歸納了各類裝置的最佳動效時長和保證流暢的最大幀間距所處的範圍區間這為動效設計提供了科學的資料支撐,進而給我們帶來全場景下流暢的動效體驗。