華為5大設(shè)計師講述HarmonyOS UX設(shè)計背后的故事

　　不到一周時間，HarmonyOS2.0用戶就突破了1000萬;而不到一個月的時間，HarmonyOS2.0用戶突破了3000萬。這樣的成績，讓華為軟件工程UX設(shè)計部部長毛玉敏非常欣喜：“我們希望有更多的華為用戶可以使用我們的新產(chǎn)品、新系統(tǒng)?！?/p>

　　為了讓更多人了解HarmonyOS UX設(shè)計背后的故事，毛玉敏帶領(lǐng)著華為5位資深UX設(shè)計師分別從輕擬物設(shè)計、卡片式設(shè)計、HarmonyOS字體、引力動效以及定制音效五個方面做了闡述。

　　毛玉敏表示，HarmonyOS的設(shè)計理念是one harmonious universe?！皁ne”是萬物歸一，追求的是全場景統(tǒng)一的設(shè)計語言，色彩、形狀、動效等所有的設(shè)計都來自于統(tǒng)一的設(shè)計靈感。

　　“harmonious”是和諧共生，為大家構(gòu)建一個數(shù)字世界和真實自然世界和諧的平衡和統(tǒng)一。而“universe”則是衍生萬物，毛玉敏表示就是要在設(shè)計的過程中兼顧設(shè)計語言在不同設(shè)備上一致統(tǒng)一。

　　以下為5位華為資深UX設(shè)計師的具體分享：

　　卡片式設(shè)計：多設(shè)備溝通的統(tǒng)一語言

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

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

　　熱力圖就示意出來了，顏色深是滑動比較困難的地方，不同的指標(biāo)都得到了相似的結(jié)論，有些地方滑動是比較容易的，有些地方是滑動比較難的地方?；谶@些我們結(jié)合左手和右手，最后有一個觸發(fā)的容易區(qū)和困難區(qū)，哪些地方容易做上滑動作，哪些地方比較困難。針對這兩個區(qū)域，把剛才的三個指標(biāo)融進(jìn)去，就會有一些專門的設(shè)計去來定義在容易的地方怎么去觸發(fā)，比如在容易的地方角度小一點就能滿足上滑的指標(biāo)，在困難的地方就會有更大的角度。速度也是一樣，容易區(qū)滑的更快一些，困難區(qū)滑的更慢一些，在困難區(qū)這個地方會把速度閾值降的更低，這樣會更容易觸發(fā)。距離也是一樣，容易的地方距離相對長，困難的地方明顯比容易區(qū)滑的更短一點。

　　針對這些不同的區(qū)域，華為做了專門的設(shè)計，把全屏的滑動達(dá)到一致，任何地方去滑都覺得很舒服。

　　在動效方面，華為針對卡片做了相應(yīng)的動效設(shè)計，主要集中在動效的時長以及幀間距。在這方面，華為做很多很多研究，找到一個所謂的最大幀間距到底在什么范圍可以保證有比較好的流暢體驗，當(dāng)時華為圈定了三個區(qū)：舒適區(qū)、安全區(qū)和及格區(qū)，會把不同設(shè)備上的動效最大幀間距放到舒適區(qū)，至少是安全區(qū)以里，以保證每次的縮放都可以達(dá)到非常好的流暢體驗。

　　輕擬物設(shè)計：物理世界和數(shù)字世界的平衡與融合

　　大概在2012、2013年左右就開始盛行扁平的風(fēng)格，扁平化盛行也是跟當(dāng)時的大環(huán)境有關(guān)系，回想當(dāng)年的時代剛好是APP開始雨后春筍般的出來，同時在那個年代下，流量對用戶來說都是比較珍貴的，一個比較輕量化的APP是比較便于用戶快速的下載和系統(tǒng)快速的運行，擬物化切圖實現(xiàn)的方式帶了了資源占用大，那么扁平化的風(fēng)格可以通過代碼的方式直接實現(xiàn)，因此可以大大減少資源的占，這就是為什么扁平能夠取代擬物的其中一個原因。

　　另外，內(nèi)容為王的時代，APP開始以展示內(nèi)容為主，一些扁平的風(fēng)格幫它減少了多余的裝飾，更容易讓用戶關(guān)注到界面內(nèi)容的一些展示上面。

　　在HarmonyOS里，華為希望將物理世界和數(shù)字世界做一個平衡和融合。

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

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

　　針對擬物所占用的資源較大的問題，華為通過代碼化的方式解決資源占用的問題。華為在整個的設(shè)計里面有一個可視化的設(shè)計工具，設(shè)計師會在這里面會調(diào)好當(dāng)前這個東西適合怎么樣的效果，或者哪個是最適合當(dāng)前界面的一些設(shè)計。

　　在可視化的設(shè)計工具調(diào)完了之后，可以直接參數(shù)化的導(dǎo)出XML配置文件，然后直接到APP的設(shè)計里面，就可以不需要編碼加載XML文件，即可還原設(shè)計效果。華為通過這樣一個方式解決資源占用的問題。

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

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

　　從2019年開始做HarmonyOS，華為一直在思考要不要做一套屬于HarmonyOS自己的字體?因為要定制字體需要花費很長的時間，也需要不少的費用，而華為完全可以從供應(yīng)商那獲得一個字體授權(quán)使用。這是設(shè)計師們面臨的一個抉擇。

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

　　那如何實現(xiàn)設(shè)計的獨特性?華為認(rèn)為有兩個方面，第一結(jié)構(gòu)上是平衡的，有內(nèi)外、空白、陰陽等;第二個，筆畫，書寫因為有隨機感，所以就有優(yōu)雅的表現(xiàn)力。華為認(rèn)為的書寫人文感是這兩方面。

　　在筆畫上，華為認(rèn)為師法撇捺彎鉤的楷書美感，比較明顯的是長的曲線、弧線的筆畫，進(jìn)行了曲線優(yōu)美的調(diào)整，從基本的筆畫里面提取這些進(jìn)行改造。

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

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

　　華為做了優(yōu)化以后，略微的錯開一些結(jié)構(gòu)，所有筆畫粘連、重疊的地方進(jìn)行了分開分解，這就是華為做了解決灰度的問題。

　　同時優(yōu)化“口”部件，之前從宋體過來，包括楷體，都是在口部件下面有突出，口的部件很復(fù)雜，大體上現(xiàn)在分成兩種，一種是底部的口，一種是非底部的口。底部的口目前簡化有問題，底部的口完全簡化的話很有可能支撐不起整個字體。我們認(rèn)為非底部的口是可以簡化的，因為增加了這個以后實際上是增加內(nèi)白的復(fù)雜度。這個就是最終做出來的底部的口是不改變的，非底部的口進(jìn)行了一些去除。

　　第三個方面，對于高頻詞匯進(jìn)行重心優(yōu)化，以前曾經(jīng)用過的字體，設(shè)置的“置”的重心會偏上，這款字體面向的重點是設(shè)備移動終端，面向的是HarmonyOS整個系統(tǒng)，高頻出現(xiàn)的字有這些，華為對這些字體特別進(jìn)行了優(yōu)化。

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

　　引力動效：回歸本源

　　引力動效設(shè)計一面獨特、一面流暢，在華為看來動效是一門流動的藝術(shù)，華為大部分的時間都在做這樣的操作，點擊、滑動、拖拽，在終端設(shè)備上面，同時界面也會發(fā)生著這樣的一些流動。

　　華為回歸到本源設(shè)計，探索宇宙，洞察宇宙引力的意義。從宙引力里面觀察它的物理規(guī)律，可以創(chuàng)造運動的一些節(jié)奏感，它的一些相互吸引的特質(zhì)，又能拉近相互的一些距離感。引力是存在于世界萬物之中的，能衍生多姿的視覺美感，神奇而又獨特。

　　比如加載動效，華為首先把宇宙這個形態(tài)給動態(tài)化，提取了它的一些星體布局結(jié)構(gòu)，逐步的在上面增加一些效果，華為增加了一些攝像機，讓行星的環(huán)繞更加具有投射感，以及掃尾的效果，增強了旋轉(zhuǎn)時候的速度感。

　　在這個基礎(chǔ)上再提取一些設(shè)計效果，增加具有一些靈動性。華為引入了黃道夾角，以地球作為靜止參考，打破了它的對稱跟平衡的結(jié)構(gòu)，讓整個畫面更加具有獨創(chuàng)性。為了讓這個動態(tài)更加靈動，又增加了上下懸浮的屬性。

　　在協(xié)同效果方面，華為構(gòu)建了兩個模型，第一個是運動模型，這個運動模型是每個設(shè)備在公轉(zhuǎn)時候的速度跟軌道，不同的速度進(jìn)行環(huán)繞。第二步是比較關(guān)鍵的一步，搭建引力模型，這個功能點是需要手去拖動一個設(shè)備，然后去連接到主設(shè)備上去。

　　華為在這個功能點上面為了突顯強化引力的主觀感受，將動效的設(shè)計跟手勢去結(jié)合，當(dāng)手勢拖拽小球進(jìn)入一個引力場，此時候小球跟大球會開始發(fā)生一個聯(lián)動，當(dāng)繼續(xù)拖拽達(dá)到閾值點b的話，這個大球跟小球會相吸，寓意著設(shè)備的連接，這樣可以增強在手勢操作時候的控制感。

　　比如下載動效方面，下載動效靈感來源于日月食的形態(tài)，華為提取了日月食的后半段，從食甚、生光到復(fù)原，將這些形態(tài)用在了下載跟安裝場景上面。

　　在這些動效設(shè)計背后是引力引擎工具的支撐落地，這個引力引擎工具大大提升了設(shè)計師與研發(fā)在對接時候的一些開發(fā)效率，設(shè)計師可以在這個工具上面去調(diào)一些效果，所見即所得的將現(xiàn)在動效多維度復(fù)雜的參數(shù)傳遞給研發(fā)，從而使得研發(fā)的效率提升了很多。

　　定制音效：豐富華為原有標(biāo)志性鈴聲

　　HarmonyOS的開機聲音采用了華為手機鈴聲的四個音節(jié)的最后兩個音節(jié)。

　　華為HarmonyOS的開機著重用的是數(shù)字合成器。華為用數(shù)字合成器模擬宇宙空間感和太陽升起，太陽升起給人的聽感是上行的過程，契合剛才的動畫慢慢圓圈上升的感覺。

　　那么怎么用聲音表達(dá)宇宙初開那一瞬間的感覺?華為創(chuàng)造了“?！钡母杏X，給人帶來好像全部宇宙匯聚完，各種粒子匯聚完以后，宇宙初始爆炸第一聲的感覺，會有很強的空間感。

　　在鈴聲方面，HarmonyOS延續(xù)了華為的四個音階，但選用了木質(zhì)音樂的感覺。

　　華為選用的主旋律是德產(chǎn)的三角鋼琴，輔旋律則選用了洪都拉斯木做的馬林巴琴;點綴音則采用的加拿大云杉木單面板的目結(jié)他彈奏，完成了整套鈴聲的設(shè)計體驗。