帶你探究萬能卡片的一些用處

剛剛升級HarmonyOS 2的朋友

會注意到桌面不少APP圖標下多了小橫條比如相機、日歷、微博、京東等

在好奇心的驅使下

如果你不小心向上滑動了這些APP圖標

那你就解鎖了全新功能——萬能卡片！

小橫條只是萬能卡片體驗的開始，

為了讓大家用著簡單舒服，

萬能卡片設計背后還有更多巧思，

小編帶著大家一探究竟~

「1」

為什么是卡片

一個舒適美觀的系統(tǒng)界面設計

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

設計師需要通過一個“容器”

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

列表和卡片

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

二者在給大家?guī)淼臑g覽體驗上各有千秋，

分別適用于不同的情境。

比如列表式設計

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

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

卡片式設計

則更適用短視頻、視頻、電商類APP，

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

同時具有直觀的可操作性。

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

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

它還運行在手表、平板、智慧屏等設備上；

另一方面，桌面需要保持視覺一致性，

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

于是，為了用戶能在不同設備

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

設計團隊最終選擇了

靈活，易延展的萬能卡片

作為HarmonyOS 2的桌面設計方案。

「2」

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

除了讓萬能卡片好用，

設計師們還負責讓它好看又有趣。

目前有不少小伙伴

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

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

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

無論是綠色的清新

粉色的可愛，還是黃色的溫暖…

都賞心悅目。

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

布置美美的桌面，

華為將卡片換膚能力

開放給第三方主題設計師，

給大家?guī)砹思冉y(tǒng)一又多樣的賞心體驗。

無論你是文藝青年，

還是潮人or極客，

都可以找到適合自己的風格。

一鍵切換主題，

APP圖標、萬能卡片、壁紙和鎖屏一起變裝。

「3」

怎么才算上滑？一個看似簡單的問題

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

如此高效、精準的交互體驗，

大家可能都以為是因為上滑動作簡單。

其實不然！

事實上，“上滑”并不簡單。

每個人上滑的軌跡都不一樣，

也未必是一條垂直線。

為了能精準識別大部分用戶的上滑習慣，

華為設計團隊進行了詳盡的人因研究，

分析發(fā)現(xiàn)三個識別滑動的關鍵指標：

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

基于這三個關鍵指標，

招募大量志愿者參與測試，

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

繼而對不同區(qū)域的上滑體驗進行專門調(diào)試，

保證了我們在任何地方上滑，

都能高精準識別

帶來更加自由舒適的萬能卡片觸發(fā)體驗。

所以，在我們習以為常的便捷體驗背后，

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

當然，作為消費者，

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

剩下的都交給設計師吧~

「4」

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

關于動效的流暢性，

大家在日?？匆曨l過程中應該有所體會，

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

效果就越流暢。

比如，記錄一顆小樹成長的短片，

如果小樹長到大樹只有1秒鐘、幾幀畫面，

我們會覺得跳躍很大、不自然；

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

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

那動畫就會流暢許多。

萬能卡片的彈出和關閉動效

就是一系列畫面組成的短片，

也遵循同樣道理。

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

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

影響卡片動效流暢性的因素就兩個：

動效時長和幀間距。

那么，問題就來了，

多長的動效、多大的幀間距

可以帶來最流暢自然的體驗呢？

手機、平板、智慧屏

等不同設備的屏幕大小不同

導致萬能卡片的大小各異，

如果保持同樣的動效時長和幀間距，

大屏設備的動效就會變得十分突兀。

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

設計團隊歸納了

各類設備的最佳動效時長

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

這為動效設計提供了科學的數(shù)據(jù)支撐，

進而給我們帶來全場景下

流暢的動效體驗。

萬能卡片的初心，

就是要給大家?guī)矸罩边_的煥新體驗

它的樣子，它的交互，

還有在大家看不到的背后

都有著華為設計團隊

對每個細節(jié)的思考、細琢

追尋著效率與美學之間的最佳平衡

這樣的萬能卡片，希望如你所愿！

編輯;jq