2018-9-19 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在 MIUI 10 的內測反饋中，設計上的耳目一新是眾口稱贊的部分。近日，MIUI設計總監 Gary 和幾位核心設計師一起接受了我們的采訪，開誠布公地介紹了 MIUI10 設計背后的故事。這次的采訪我們聊得很細，細到某一個交互的設計思路的變遷，以及為什么最終是以那種方式呈現在 MIUI 10 之上。我相信，無論你是對設計還是對手機系統存在好奇，一定都可以從這次訪談里得到一些有益的啟發。因為我們沒聊虛的。
△ MIUI設計團隊
△ 虛擬鍵不該存在
是不是太激進我們還是根據用戶反饋來判斷，這套手勢因為沒有任何虛擬鍵的提示，剛開始確實需要一兩分鐘來學習，但大部分的用戶反饋是：用了就回不去了。目前從客觀上來講，安卓手機里的全面屏手勢，MIUI 確實是最好用的，不是我們自己說，而是從各種用戶反饋，包括微博上很多專業數碼博主的反饋得來的結論，很多人在主動地說這件事。
但是在手勢的設計上，我們是踩過很多坑的。
我們嘗試過很多版本的全面屏手勢，最初還沒有大膽到想干掉所有虛擬鍵，而是想在虛擬鍵上做文章。開始我們覺得那個區域很多時候3個 button 可能用不上，比如看書的時候，你可能只需要一個返回鍵，所以我們考慮的是在某些特定的應用場景里把一些用不到的虛擬鍵收起來，這是做減法，減法做完之后，原來虛擬鍵的位置就空出來了，我們覺得這個空間是浪費的，又在想應該怎么利用起來，這是早期一個很復雜的思路。
△ 早期帶橫桿的產品
后來我們又想是不是可以把3個鍵整合成一個虛擬鍵，當初做了一個 Demo，把3個鍵集合成一個橫桿，那個時候還沒有看到 iPhone 的模型，在 iOS 的全面屏手勢出來之前，我們就做了一個橫桿子，其實是受 Palm 的啟發，這根桿子很早之前 Palm 就有了，蘋果可能也是受 Palm 啟發。我們設計的是在那個桿子上橫滑返回，然后上滑回桌面，很接近蘋果目前的處理方式。但最終還是把這個設計給放棄了，去掉的原因是：提示桿一開始是有比較好的引導操作作用，但一段時間后，用戶就不需要了，另外就是視覺感官上橫桿并不好看，工業設計上好不容易才能把手機下巴縮短幾毫米，你一根橫桿又全給它加回來了，這其實背離了「全面屏」的初衷，在設計上是一種不得已而為之的妥協。
否定橫桿之后，我們才真正全心考慮干掉所有虛擬鍵的方案。但沒有虛擬鍵，就對我們的交互設計提出了很高的要求，首先，這個手勢的出發點一定得非常符合直覺，所以不管是返回上一級菜單也好，回到桌面也好，這必須是兩個最基礎的操作（橫滑、上滑），在這兩個基礎操作上略做停頓，我們就可以進入應用間的快切和多任務管理，我們用一種非常輕的設計把它附著在兩個基礎交互上。徹底干掉虛擬鍵這件事最早我們沒有太大的勇氣去做，最后做出來反倒更貼近用戶操作手機的直覺，有一種柳暗花明的感覺。
△ 簡潔易用的MIUI全面屏手勢
△ 為全面屏而重新設計
在天氣、日歷、安全中心等等 MIUI 10 的各個角落里，其實都把原來分段式的畫面結構做了一個全面屏化的設計，讓頁面不要有很強的割裂感。讓內容直接浮在屏幕上，用戶第一時間得到信息，去掉干擾元素。
在非全面屏時代，手機有上下兩個比較大的黑色邊框，在視覺上天然是分段式的，之前屏幕內的多色塊設計其實是對應了手機外觀的這種「分段」，它還是和諧的，但原樣搬到全面屏手機上，就顯得是把一整塊完整的屏幕生生分割成了幾段。
另外就是原來有一些插畫類型的風格和表達手法，想讓整個畫面有一些親和力。但是因為我們的用戶覆蓋面很大，兩三億用戶，會有一些年齡層的用戶覺得原先插畫形式有些稚嫩感。所以我們覺得到10這一代，整個系統應該更成熟、更普適一些，我們更傾向于做一個對任何人來說都很舒服的視覺設計。
舉個特別細節的例子。MIUI 10 的時鐘，有一部分用戶會有疑問：在 MIUI 10 里，可見的大多數頁面是亮色，為什么進入時鐘時卻是黑色的？我們其實也在白色和黑色反復了很多次，調研也做了很多次。最終我們認為更重要的是時鐘的使用場景問題，比如說你晚上在睡覺前拿起手機定個鬧鐘，在夜晚或者室內，從手機桌面進來打開時鐘，如果進入一個很亮的頁面，它即便是好看的，也可能會刺眼。所以我們還是選擇了黑色，當然那個對比度到現在還在調整，我們想把視覺上的美觀和使用的舒服統一進來。
我明白你這個問題的意思，大部分人的手機是長期靜音的，音效這個東西，好像已經被完全忽略了。但是我們覺得，哪怕只有1%的用戶打開了手機鈴聲，他也應該感受到悅耳而不是打擾和膩煩。如果我沒記錯的話，我們是手機廠商里第一個針對音效做系統性設計和優化的，我們從「百聽不厭」的自然系音效出發，和得過格萊美獎的頂尖音樂人合作，還針對手機音腔的特性對音效做了特別的優化。
發布會上洪鋒把自然音效系統作為一個彩蛋來講，這是我們送給小米手機用戶的一個禮物，是讓我們驕傲的產品。我不確定有多少用戶會發現這個產品，有些人可能因為長期靜音他沒有機會接觸到這個新設計，但它是一個能帶給人驚喜和溫暖的東西。
有些人可能會覺得設計是一個偏感性的、依賴審美的東西，但是對于一個好的系統設計，我會從視覺、動效、交互、字體、音效，五個維度的去衡量它的完善程度。
我們用一個人來做類比。視覺，就是感官層面的，比如說你見到一個人會說：這個人很帥；第二就是交互層面的整體邏輯，就好比你跟他說話，發現他的腦子清楚；第三就是整個動效的層面，這個人的肢體語言很優雅；還有字體，我們是從 MIUI8 的時候就開始做了，為了讓大家有更好的閱讀體驗，讓人覺得你這個人很有涵養，這已經深入到非常細節的層面了；最后，我們加了一個聲音的系統，就是你說話的時候，聲音還要好聽。MIUI 在設計上一直是往多個方面進化，我們并不滿足于做出某個漂亮的頁面或者交互，而是追求整個體驗層面的飽滿。
做設計過程中，我們可能會嘗試各種各樣的方案，也有靈光乍現的時刻，但我們會從多個維度完整地去考量這個設計成果，避免做出一些只是「看上去很美」的自嗨的東西。實際看起來、用起來、聽起來怎么樣，我們想從這幾個大的感官維度上都能達到體驗層面的滿足。
舉一個例子：比如說之前我們為了快去掉了一些解鎖的動畫，用戶一按指紋解鎖，直接進到桌面，這種確實是非常的快，但這種感覺就像什么呢？就像你一按電梯，門就消失了，你進了電梯，它咔一聲又關上了，是很快，但是這種觀感是不太好的。它沒有一種歡迎的意識，就只是把東西呈現給你。這一次我們希望把這個東西改回來，當你進入手機桌面的時候，圖標應該有個簡短的優雅的動態，有一個進場亮相的過程。
△ MIUI動態圖標
MIUI 其實已經非常流暢了，在這種地方去掉應有的動畫，是可以快100毫秒，但這種快是沒有意義的。讓用戶舒服的看到這個東西，這才是整個體驗的核心。所以我們這次就定下一個目標，和工程團隊一起，把這種為快而快的東西給它削弱，用戶要的是更優雅的體驗，而不是那種無感知的快100毫秒。
這個事情說起來不大，但其實是一種理念層面的進步，大家已經從那種無意義的純數據比拼里解脫出來，更注意到整個體驗層面。我們這次會把上面說的進場動畫加進來，能讓用戶點亮屏幕的時候感覺到更加的舒服，能夠感覺整個系統的「肢體語言」更加優雅。
之前的非全面屏時代，手機屏幕在16:9的形態下，UX設計上其實已經極度成熟。手機的很多功能和設計的出新，很大程度上都是在迎合一些小眾的需求，可能一部分人覺得很喜歡這個設計，但它并不普適。
全面屏手機的出現又將設計師的注意力從這些小眾需求拉回到了一個大眾需求：怎么在全面屏手機上做出更好的體驗。因為智能手機用戶遲早會將手中的設備換成全面屏設備，手機廠商如果只是簡單地把原來16:9的畫面改成18:9，而不根據硬件特點做真正的深度定制，那就會離用戶體驗越來越遠。
手機系統的未來我們認為也會是這樣的趨勢，軟硬件的結合會更加的緊密。在這一點上，MIUI 有這個意識，也有行動，目前是走在比較前面的。
MIUI10 落版后，我們也在考慮往這個方向去深化。我們不會特意去考慮11跟10之間非得做出什么大的區別來，相比這個，我們更關心的問題是：什么是用戶真正需要的設計。
藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。