華爲5大設計師講述HarmonyOS UX設計背後的故事

靜靜/文

不到一週時間,HarmonyOS2.0用戶就突破了1000萬;而不到一個月的時間,HarmonyOS2.0用戶突破了3000萬。這樣的成績,讓華爲軟件工程UX設計部部長毛玉敏非常欣喜:“我們希望有更多的華爲用戶可以使用我們的新產品、新系統。”

爲了讓更多人瞭解HarmonyOS UX設計背後的故事,毛玉敏帶領着華爲5位資深UX設計師分別從輕擬物設計、卡片式設計、HarmonyOS字體引力動效以及定製音效五個方面做了闡述。

毛玉敏表示,HarmonyOS的設計理念是one harmonious universe。“one”是萬物歸一,追求的是全場景統一的設計語言,色彩、形狀、動效等所有的設計都來自於統一的設計靈感。

“harmonious”是和諧共生,爲大家構建一個數字世界和真實自然世界和諧的平衡和統一。而“universe”則是衍生萬物,毛玉敏表示就是要在設計的過程中兼顧設計語言在不同設備上一致統一。

以下爲5位華爲資深UX設計師的具體分享:

卡片式設計:多設備溝通的統一語言

華爲HarmonyOS 2.0在桌面上APP做上滑動作即可展開萬能卡片,而這個上滑的動作其實並不是筆直的,而是一條彎曲的軌跡。系統到底如何識別豎直向上滑動,還是水平線以上就是上滑?以及如何知道是垂直方向的滑動,還是水平方向的滑動?

針對上述問題,華爲做了很多人因分析。在研究一個滑動手勢軌跡的時候,華爲發現最關鍵指標有三個:滑動的角度、滑動的速度(快/慢)、滑動的距離,這三個指標對一次滑動有一個比較完整的定義,能清晰的識別出來這次滑動是怎樣的滑動,能夠更好的識別用戶的手勢意圖。

熱力圖就示意出來了,顏色深是滑動比較困難的地方,不同的指標都得到了相似的結論,有些地方滑動是比較容易的,有些地方是滑動比較難的地方。基於這些我們結合左手和右手,最後有一個觸發的容易區和困難區,哪些地方容易做上滑動作,哪些地方比較困難。針對這兩個區域,把剛纔的三個指標融進去,就會有一些專門的設計去來定義在容易的地方怎麼去觸發,比如在容易的地方角度小一點就能滿足上滑的指標,在困難的地方就會有更大的角度。速度也是一樣,容易區滑的更快一些,困難區滑的更慢一些,在困難區這個地方會把速度閾值降的更低,這樣會更容易觸發。距離也是一樣,容易的地方距離相對長,困難的地方明顯比容易區滑的更短一點。

針對這些不同的區域,華爲做了專門的設計,把全屏的滑動達到一致,任何地方去滑都覺得很舒服。

在動效方面,華爲針對卡片做了相應的動效設計,主要集中在動效的時長以及幀間距。在這方面,華爲做很多很多研究,找到一個所謂的最大幀間距到底在什麼範圍可以保證有比較好的流暢體驗,當時華爲圈定了三個區:舒適區、安全區和及格區,會把不同設備上的動效最大幀間距放到舒適區,至少是安全區以裡,以保證每次的縮放都可以達到非常好的流暢體驗。

輕擬物設計:物理世界和數字世界的平衡與融合

大概在2012、2013年左右就開始盛行扁平風格扁平化盛行也是跟當時的大環境有關係,回想當年的時代剛好是APP開始雨後春筍般的出來,同時在那個年代下,流量對用戶來說都是比較珍貴的,一個比較輕量化的APP是比較便於用戶快速的下載和系統快速的運行,擬物化切圖實現的方式帶了了資源佔用大,那麼扁平化的風格可以通過代碼的方式直接實現,因此可以大大減少資源的佔,這就是爲什麼扁平能夠取代擬物的其中一個原因。

另外,內容爲王的時代,APP開始以展示內容爲主,一些扁平的風格幫它減少了多餘的裝飾,更容易讓用戶關注到界面內容的一些展示上面。

在HarmonyOS裡,華爲希望將物理世界和數字世界做一個平衡和融合。

在方案探索階段,華爲發現小工具等模塊是一個很好的場景,都可以在物理世界中找到映射的對象,比如像計算器,可以把物理世界中計算器按鈕感覺融入到電子計算器,在微微凸起的按鈕上面,做凹下去的效果,強化用戶本身點擊按鈕的反饋。

同理華爲也嘗試了其他的小工具,比如指南針、測溫器,很多的小工具都使用了輕擬物的效果。

針對擬物所佔用的資源較大的問題,華爲通過代碼化的方式解決資源佔用的問題。華爲在整個的設計裡面有一個可視化的設計工具,設計師會在這裡面會調好當前這個東西適合怎麼樣的效果,或者哪個是最適合當前界面的一些設計。

在可視化的設計工具調完了之後,可以直接參數化的導出XML配置文件,然後直接到APP的設計裡面,就可以不需要編碼加載XML文件,即可還原設計效果。華爲通過這樣一個方式解決資源佔用的問題。

舒適美觀的HarmonyOS Sans:105種語言免費開放

據設計師透露,此次HarmonyOS字體升級之後反饋非常積極,比如升級後屏幕變好了,很清晰;也有人明顯感受到字體變化。

從2019年開始做HarmonyOS,華爲一直在思考要不要做一套屬於HarmonyOS自己的字體?因爲要定製字體需要花費很長的時間,也需要不少的費用,而華爲完全可以從供應商那獲得一個字體授權使用。這是設計師們面臨的一個抉擇。

HarmonyOS是面向全場景、多設備的,字體也同樣是面向全場景多設備的。因此原來的字體可能不合適,從易讀性和人因研究方面,華爲還是決定做一套自己的字體。

那如何實現設計的獨特性?華爲認爲有兩個方面,第一結構上是平衡的,有內外、空白、陰陽等;第二個,筆畫書寫因爲有隨機感,所以就有優雅的表現力。華爲認爲的書寫人文感是這兩方面。

在筆畫上,華爲認爲師法撇捺彎鉤的楷書美感,比較明顯的是長的曲線、弧線的筆畫,進行了曲線優美的調整,從基本的筆畫裡面提取這些進行改造。

比如對比來看鉛字字體,或者其他的黑體(業界過去幾年都有發展,包括其他家也做定製的黑體),這個字體會相對來說有撇捺彎鉤人文的文字感,這是一個平衡的過程。

在易讀方面,首先優化字體“灰度”的感受。在畫素描的時候經常會眯起眼睛來看一下,可以更好的查看這個明暗光影。同樣眯上眼睛看一下字體,可以模擬一款字體看不太清晰的情況,這個時候就會發現在字體列出來的這些地方會有一坨一坨的東西,會在這個地方形成聚集。

華爲做了優化以後,略微的錯開一些結構,所有筆畫粘連、重疊的地方進行了分開分解,這就是華爲做了解決灰度的問題。

同時優化“口”部件,之前從宋體過來,包括楷體,都是在口部件下面有突出,口的部件很複雜,大體上現在分成兩種,一種是底部的口,一種是非底部的口。底部的口目前簡化有問題,底部的口完全簡化的話很有可能支撐不起整個字體。我們認爲非底部的口是可以簡化的,因爲增加了這個以後實際上是增加內白的複雜度。這個就是最終做出來的底部的口是不改變的,非底部的口進行了一些去除。

第三個方面,對於高頻詞彙進行重心優化,以前曾經用過的字體,設置的“置”的重心會偏上,這款字體面向的重點是設備移動終端,面向的是HarmonyOS整個系統,高頻出現的字有這些,華爲對這些字體特別進行了優化。

華爲的HarmonyOS Sans字體支撐105種語言,中文、拉丁等等。

引力動效:迴歸本源

引力動效設計一面獨特、一面流暢,在華爲看來動效是一門流動的藝術,華爲大部分的時間都在做這樣的操作,點擊、滑動、拖拽,在終端設備上面,同時界面也會發生着這樣的一些流動。

華爲迴歸到本源設計,探索宇宙,洞察宇宙引力的意義。從宙引力裡面觀察它的物理規律,可以創造運動的一些節奏感,它的一些相互吸引的特質,又能拉近相互的一些距離感。引力是存在於世界萬物之中的,能衍生多姿的視覺美感,神奇而又獨特。

比如加載動效,華爲首先把宇宙這個形態動態化,提取了它的一些星體佈局結構,逐步的在上面增加一些效果,華爲增加了一些攝像機,讓行星的環繞更加具有投射感,以及掃尾的效果,增強了旋轉時候的速度感。

在這個基礎上再提取一些設計效果,增加具有一些靈動性。華爲引入了黃道夾角,以地球作爲靜止參考,打破了它的對稱跟平衡的結構,讓整個畫面更加具有獨創性。爲了讓這個動態更加靈動,又增加了上下懸浮的屬性。

在協同效果方面,華爲構建了兩個模型,第一個是運動模型,這個運動模型是每個設備在公轉時候的速度跟軌道,不同的速度進行環繞。第二步是比較關鍵的一步,搭建引力模型,這個功能點是需要手去拖動一個設備,然後去連接到主設備上去。

華爲在這個功能點上面爲了突顯強化引力的主觀感受,將動效的設計跟手勢去結合,當手勢拖拽小球進入一個引力場,此時候小球跟大球會開始發生一個聯動,當繼續拖拽達到閾值點b的話,這個大球跟小球會相吸,寓意着設備的連接,這樣可以增強在手勢操作時候的控制感。

比如下載動效方面,下載動效靈感來源於日月食的形態,華爲提取了日月食的後半段,從食甚、生光到復原,將這些形態用在了下載跟安裝場景上面。

在這些動效設計背後是引力引擎工具的支撐落地,這個引力引擎工具大大提升了設計師與研發在對接時候的一些開發效率,設計師可以在這個工具上面去調一些效果,所見即所得的將現在動效多維度複雜的參數傳遞給研發,從而使得研發的效率提升了很多。

定製音效:豐富華爲原有標誌性鈴聲

HarmonyOS的開機聲音採用了華爲手機鈴聲的四個音節的最後兩個音節。

華爲HarmonyOS的開機着重用的是數字合成器。華爲用數字合成器模擬宇宙空間感和太陽升起,太陽升起給人的聽感是上行的過程,契合剛纔的動畫慢慢圓圈上升的感覺。

那麼怎麼用聲音表達宇宙初開那一瞬間的感覺?華爲創造了“叮”的感覺,給人帶來好像全部宇宙匯聚完,各種粒子匯聚完以後,宇宙初始爆炸第一聲的感覺,會有很強的空間感。

在鈴聲方面,HarmonyOS延續了華爲的四個音階,但選用了木質音樂的感覺。

華爲選用的主旋律是德產的三角鋼琴,輔旋律則選用了洪都拉斯木做的馬林巴琴;點綴音則採用的加拿大雲杉木單面板的目結他彈奏,完成了整套鈴聲的設計體驗。