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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　舒適美觀的HarmonyOS Sans：105種語言免費(fèi)開放

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

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

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

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

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

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

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

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

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

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

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

　　引力動(dòng)效：回歸本源

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

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

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

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

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

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

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

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

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

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

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

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

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

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