真正全面的全面屏系統(tǒng)是怎么做出來的？

在MIUI10的內(nèi)測(cè)反饋中，設(shè)計(jì)上的耳目一新是眾口稱贊的部分。近日，MIUI設(shè)計(jì)總監(jiān)Gary和幾位核心設(shè)計(jì)師一起接受了我們的采訪，開誠(chéng)布公地介紹了MIUI10設(shè)計(jì)背后的故事。

MIUI設(shè)計(jì)團(tuán)隊(duì)

這次的采訪我們聊得很細(xì)，細(xì)到某一個(gè)交互的設(shè)計(jì)思路的變遷，以及為什么最終是以那種方式呈現(xiàn)在MIUI10之上。我相信，無論你是對(duì)設(shè)計(jì)還是對(duì)手機(jī)系統(tǒng)存在好奇，一定都可以從這次訪談里得到一些有益的啟發(fā)。因?yàn)槲覀儧]聊虛的。

① 徹底干掉虛擬鍵的全面屏手勢(shì)是不是太激進(jìn)了？

虛擬鍵不該存在

是不是太激進(jìn)我們還是根據(jù)用戶反饋來判斷，這套手勢(shì)因?yàn)闆]有任何虛擬鍵的提示，剛開始確實(shí)需要一兩分鐘來學(xué)習(xí)，但大部分的用戶反饋是：用了就回不去了。目前從客觀上來講，安卓手機(jī)里的全面屏手勢(shì)，MIUI確實(shí)是最好用的，不是我們自己說，而是從各種用戶反饋、包括微博上很多專業(yè)數(shù)碼博主的反饋得來的結(jié)論，很多人在主動(dòng)地說這件事。

但是在手勢(shì)的設(shè)計(jì)上，我們是踩過很多坑的。

我們嘗試過很多版本的全面屏手勢(shì)，最初還沒有大膽到想干掉所有虛擬鍵，而是想在虛擬鍵上做文章。開始我們覺得那個(gè)區(qū)域很多時(shí)候3個(gè)button可能用不上，比如看書的時(shí)候，你可能只需要一個(gè)返回鍵，所以我們考慮的是在某些特定的應(yīng)用場(chǎng)景里把一些用不到的虛擬鍵收起來，這是做減法，減法做完之后，原來虛擬鍵的位置就空出來了，我們覺得這個(gè)空間是浪費(fèi)的，又在想應(yīng)該怎么利用起來，這是早期一個(gè)很復(fù)雜的思路。

早期帶橫桿虛擬鍵的產(chǎn)品

后來我們又想是不是可以把3個(gè)鍵整合成一個(gè)虛擬鍵，當(dāng)初做了一個(gè)Demo，把3個(gè)鍵集合成一個(gè)橫桿，那個(gè)時(shí)候還沒有看到iPhone的模型，在iOS的全面屏手勢(shì)出來之前，我們就做了一個(gè)橫桿子，其實(shí)是受Palm的啟發(fā)，這根桿子很早之前Palm就有了，蘋果可能也是受Palm啟發(fā)。我們?cè)O(shè)計(jì)的是在那個(gè)桿子上橫滑返回，然后上滑回桌面，很接近蘋果目前的處理方式。但最終還是把這個(gè)設(shè)計(jì)給放棄了，去掉的原因是：提示桿一開始是有比較好的引導(dǎo)操作作用，但一段時(shí)間后，用戶就不需要了，另外就是視覺感官上橫桿并不好看，工業(yè)設(shè)計(jì)上好不容易才能把手機(jī)下巴縮短幾毫米，你一根橫桿又全給它加回來了，這其實(shí)背離了“全面屏”的初衷，在設(shè)計(jì)上是一種不得已而為之的妥協(xié)。

否定橫桿之后，我們才真正全心考慮干掉所有虛擬鍵的方案。但沒有虛擬鍵，就對(duì)我們的交互設(shè)計(jì)提出了很高的要求，首先，這個(gè)手勢(shì)的出發(fā)點(diǎn)一定得非常符合直覺，所以不管是返回上一級(jí)菜單也好，回到桌面也好，這必須是兩個(gè)最基礎(chǔ)的操作（橫滑、上滑），在這兩個(gè)基礎(chǔ)操作上略做停頓，我們就可以進(jìn)入應(yīng)用間的快切和多任務(wù)管理，我們用一種非常輕的設(shè)計(jì)把它附著在兩個(gè)基礎(chǔ)交互上。徹底干掉虛擬鍵這件事最早我們沒有太大的勇氣去做，最后做出來反倒更貼近用戶操作手機(jī)的直覺，有一種柳暗花明的感覺。

簡(jiǎn)潔易用的MIUI全面屏手勢(shì)

② MIUI10的整體視覺設(shè)計(jì)遵循了什么思路？

為全面屏而重新設(shè)計(jì)

在天氣、日歷、安全中心等等MIUI10的各個(gè)角落里，其實(shí)都把原來分段式的畫面結(jié)構(gòu)做了一個(gè)全面屏化的設(shè)計(jì)，讓頁面不要有很強(qiáng)的割裂感。讓內(nèi)容直接浮在屏幕上，用戶第一時(shí)間得到信息，去掉干擾元素。

在非全面屏?xí)r代，手機(jī)有上下兩個(gè)比較大的黑色邊框，在視覺上天然是分段式的，之前屏幕內(nèi)的多色塊設(shè)計(jì)其實(shí)是對(duì)應(yīng)了手機(jī)外觀的這種“分段”，它還是和諧的，但原樣搬到全面屏手機(jī)上，就顯得是把一整塊完整的屏幕生生分割成了幾段。

另外就是原來有一些插畫類型的風(fēng)格和表達(dá)手法，想讓整個(gè)畫面有一些親和力。但是因?yàn)槲覀兊挠脩舾采w面很大，兩三億用戶，會(huì)有一些年齡層的用戶覺得原先插畫形式有些稚嫩感。所以我們覺得到10這一代，整個(gè)系統(tǒng)應(yīng)該更成熟、更普適一些，我們更傾向于做一個(gè)對(duì)任何人來說都很舒服的視覺設(shè)計(jì)。

③ 這次整體視覺風(fēng)格有比較大的變動(dòng)，有沒有什么地方特別花費(fèi)精力的？

舉個(gè)特別細(xì)節(jié)的例子。MIUI10的時(shí)鐘，有一部分用戶會(huì)有疑問：在MIUI10里，可見的大多數(shù)頁面是亮色，為什么進(jìn)入時(shí)鐘時(shí)鐘卻是黑色的？我們其實(shí)也在白色和黑色反復(fù)了很多次，調(diào)研也做了很多次。最終我們認(rèn)為更重要的是時(shí)鐘的使用場(chǎng)景問題，比如說你晚上在睡覺前拿起手機(jī)定個(gè)鬧鐘，在夜晚或者室內(nèi)，從手機(jī)桌面進(jìn)來打開時(shí)鐘，如果進(jìn)入一個(gè)很亮的頁面，它即便是好看的，也可能會(huì)刺眼。所以我們還是選擇了黑色，當(dāng)然那個(gè)對(duì)比度到現(xiàn)在還在調(diào)整，我們想把視覺上的美觀和使用的舒服統(tǒng)一進(jìn)來。

④ MIUI10的自然音效系統(tǒng)是發(fā)布會(huì)上的一個(gè)驚喜，你們?yōu)槭裁磿?huì)想到去做音效？

永不重復(fù)的MIUI10通知音效

我明白你這個(gè)問題的意思，大部分人的手機(jī)是長(zhǎng)期靜音的，音效這個(gè)東西，好像已經(jīng)被完全忽略了。但是我們覺得，哪怕只有1%的用戶打開了手機(jī)鈴聲，他也應(yīng)該感受到悅耳而不是打擾和膩煩。如果我沒記錯(cuò)的話，我們是手機(jī)廠商里第一個(gè)針對(duì)音效做系統(tǒng)性設(shè)計(jì)和優(yōu)化的，我們從“百聽不厭”的自然系音效出發(fā)，和得過格萊美獎(jiǎng)的頂尖音樂人合作，還針對(duì)手機(jī)音腔的特性對(duì)音效做了特別的優(yōu)化。

發(fā)布會(huì)上洪鋒把自然音效系統(tǒng)作為一個(gè)彩蛋來講，這是我們送給小米手機(jī)用戶的一個(gè)禮物，是讓我們驕傲的產(chǎn)品。我不確定有多少用戶會(huì)發(fā)現(xiàn)這個(gè)產(chǎn)品，有些人可能因?yàn)殚L(zhǎng)期靜音他沒有機(jī)會(huì)接觸到這個(gè)新設(shè)計(jì)，但它是一個(gè)能帶給人驚喜和溫暖的東西。

⑤ MIUI的設(shè)計(jì)理念是什么？

有些人可能會(huì)覺得設(shè)計(jì)是一個(gè)偏感性的、依賴審美的的東西，但是對(duì)于一個(gè)好的系統(tǒng)設(shè)計(jì)，我會(huì)從視覺、動(dòng)效、交互、字體、音效，五個(gè)維度的去衡量它的完善程度。

我們用一個(gè)人來做類比。視覺，就是感官層面的，比如說你見到一個(gè)人會(huì)說：這個(gè)人很帥；第二就是交互層面的整體邏輯，就好比你跟他說話，發(fā)現(xiàn)他的腦子清楚；第三就是整個(gè)動(dòng)效的層面，這個(gè)人的肢體語言很優(yōu)雅；還有字體，我們是從MIUI8的時(shí)候就開始做了，為了讓大家有更好的閱讀體驗(yàn)，讓人覺得你這個(gè)人很有涵養(yǎng)，這已經(jīng)深入到非常細(xì)節(jié)的層面了；最后，我們加了一個(gè)聲音的系統(tǒng)，就是你說話的時(shí)候，聲音還要好聽。MIUI在設(shè)計(jì)方面一直是往多個(gè)方面進(jìn)化，我們并不滿足于做出某個(gè)漂亮的頁面或者交互，而是追求整個(gè)體驗(yàn)層面的飽滿。

做設(shè)計(jì)過程中，我們可能會(huì)嘗試各種各樣的方案，也有靈光乍現(xiàn)的時(shí)刻，但我們會(huì)從多個(gè)維度完整地去考量這個(gè)設(shè)計(jì)成果，避免做出一些只是“看上去很美”的自嗨的東西。實(shí)際看起來、用起來、聽起來怎么樣，我們想從這幾個(gè)大的感官維度上都能達(dá)到體驗(yàn)層面的滿足。

舉一個(gè)例子：比如說之前我們?yōu)榱丝烊サ袅艘恍┙怄i的動(dòng)畫，用戶一按指紋解鎖，直接進(jìn)到桌面，這種確實(shí)是非常的快，但這種感覺就像什么呢？就像你一按電梯，門就消失了，你進(jìn)了電梯，它咔一聲又關(guān)上了，是很快，但是這種觀感是不太好的。它沒有一種歡迎的意識(shí)，就只是把東西呈現(xiàn)給你。這一次我們希望把這個(gè)東西改回來，當(dāng)你進(jìn)入手機(jī)桌面的時(shí)候，圖標(biāo)應(yīng)該有個(gè)簡(jiǎn)短的優(yōu)雅的動(dòng)態(tài)，有一個(gè)進(jìn)場(chǎng)亮相的過程。

MIUI動(dòng)態(tài)圖標(biāo)

MIUI其實(shí)已經(jīng)非常流暢了，在這種地方去掉應(yīng)有的動(dòng)畫，是可以快100毫秒，但這種快是沒有意義的。讓用戶舒服的看到這個(gè)東西，這才是整個(gè)體驗(yàn)的核心。所以我們這次就定下一個(gè)目標(biāo)，和工程團(tuán)隊(duì)一起，把這種為快而快的東西給它削弱，用戶要的是更優(yōu)雅的體驗(yàn)，而不是那種無感知的快100毫秒。

這個(gè)事情說起來不大，但其實(shí)是一種理念層面的進(jìn)步，大家已經(jīng)從那種無意義的純數(shù)據(jù)比拼里解脫出來，更注意到整個(gè)體驗(yàn)層面。我們這次會(huì)把上面說的進(jìn)場(chǎng)動(dòng)畫加進(jìn)來，能讓用戶點(diǎn)亮屏幕的時(shí)候感覺到更加的舒服，能夠感覺整個(gè)系統(tǒng)的“肢體語言”更加優(yōu)雅。

⑥ 對(duì)于MIUI11的展望？

之前的非全面屏?xí)r代，手機(jī)屏幕在16:9的形態(tài)下，UX設(shè)計(jì)上其實(shí)已經(jīng)極度成熟。手機(jī)的很多功能和設(shè)計(jì)的出新，很大程度上都是在迎合一些小眾的需求，可能一部分人覺得很喜歡這個(gè)設(shè)計(jì)，但它并不普適。

全面屏手機(jī)的出現(xiàn)又將設(shè)計(jì)師的注意力從這些小眾需求拉回到了一個(gè)大眾需求：怎么在全面屏手機(jī)上做出更好的體驗(yàn)。因?yàn)?a target="_blank">智能手機(jī)用戶遲早會(huì)將手中的設(shè)備換成全面屏設(shè)備，手機(jī)廠商如果只是簡(jiǎn)單地把原來16:9的畫面改成18:9，而不根據(jù)硬件特點(diǎn)做真正的深度定制，那就會(huì)離用戶體驗(yàn)越來越遠(yuǎn)。

手機(jī)系統(tǒng)的未來我們認(rèn)為也會(huì)是這樣的趨勢(shì)，軟硬件的結(jié)合會(huì)更加的緊密。在這一點(diǎn)上，MIUI有這個(gè)意識(shí)，也有行動(dòng)，目前是走在比較前面的。

MIUI10落版后，我們也在考慮往這個(gè)方向去深化。我們不會(huì)特意去考慮11跟10之間非得做出什么大的區(qū)別來，相比這個(gè)，我們更關(guān)心的問題是：什么是用戶真正需要的設(shè)計(jì)。