MIUI v5 UI設計七宗罪:去Android努力註定失敗

原文地址:http://tech.163.com/13/0527/12/8VSMMDB8000915BF.html

 

經常有人問我,MIUI 到底怎麼了,爲什麼你這麼埋汰他?

要解釋這個問題之前,我們先來看一幅世界名畫。

MIUI v5 UI設計七宗罪:去Android努力註定失敗

初中時代的我曾經無比着迷於人類的視覺錯覺(錯視)。在我的印象中,最早引發我對於錯視的興趣的東西,就是上面那張著名的錯覺畫,M.C.Escher 大師的平面畫《Ascending and Descending(上升與下降)》。埃舍爾大師巧妙的利用錯覺,搭建了一段首尾相連的階梯。被困在階梯中的人們無奈論怎麼走,最終都會回到出發點,高度沒有任何的改變。

至於這幅畫有什麼用,大家姑且先保存在心裏。

七宗罪

接下來,我來說說 MIUI v5 在 UI 設計上的七宗罪。

第一宗罪:擅自替換應用內控件

這第一宗罪,也正是作爲一個 Android 系統的 MIUI 犯下的最爲不可饒恕的罪行。

MIUI v5 UI設計七宗罪:去Android努力註定失敗

拿 Dropbox 來做個例子吧。在正常狀況下,Dropbox 使用的默認的藍色控件和藍色的 Action Bar 搭配,非常和諧。而在 MIUI 中,系統擅自替換了原本的藍色 Checkbox,而橙色的 Switch 和 Loading Indicator 和藍色的 Action Bar 搭配是如此的扎眼,完全破壞了一個應用原本的美感。

MIUI v5 UI設計七宗罪:去Android努力註定失敗

更可恨的是,MIUI 不但替換 Android 系統自帶的 Holo 控件,連開發者嵌入應用的自制控件都難逃此劫難。原本精心設計的 Press,堪稱 Android 上最美觀的 RSS 閱讀應用,在 MIUI 上慘遭毒手,變成如此一副令人不忍卒睹的模樣。

MIUI v5 UI設計七宗罪:去Android努力註定失敗

從這張圖上可以看出,MIUI 的控件完全沒有針對暗色背景進行優化,連光影效果都和亮色背景上是一樣的,這明顯的違反了 Android 上的"擬真"原則。而 Android 原生控件中,各個控件都有針對亮色和暗色背景優化的兩套版本。

第二宗罪:用色過於鮮豔,難以搭配

提到 MIUI,很多人應該會想到那標誌性的橙色。

MIUI v5 UI設計七宗罪:去Android努力註定失敗

而這個標誌性的橙色,也正是讓 MIUI 控件和 Holo Theme 格格不入的罪魁禍首之一。Google 倡導的 Android 用色中,"中性"是一個很重要的標準。所有的 Android 標準顏色都是偏中性的顏色,可以方便的互相搭配而不顯的違和。

MIUI v5 UI設計七宗罪:去Android努力註定失敗

在 Play Music 中,同樣是用了橙色系作爲 Action Bar 的背景色,但是直接搭配的顏色是白色的文字與圖標,而且藍色的 Holo 控件放在這裏也絲毫不嫌違和。相較之前另一個極端的例子,Dropbox 使用了純度很高的藍色,再碰上純度很高的橙色,違和感自然而然的就產生了。而 Android 系統的原生首選用色就是藍色,MIUI 的首選用色卻是橙色,這樣就造成了只要有原生元素出現的地方,MIUI 的控件就一定會產生視覺上的衝突。

第三宗罪:設定邏輯混亂

在原生 Android 中,設置中通常有三種可操作控件: Radio Bottom (單選按鈕) 提供在多個選項中選擇其一的功能,Checkbox (複選框)提供了於集合中選擇多個選項的功能,而 On/Off Switch (開關) 則提供對於某項功能單一的控制選項。可以很明顯的看出,Switch 和 Checkbox 的功能是截然不同的。而在 MIUI 中,系統完全混淆了 Checkbox 和 Switch 的功能,一律使用 Switch 來代替,在很多地方破壞了原本的系統邏輯。

第四宗罪:陰影特效隨意亂用

在原生 Android 中也大量的使用了陰影和高光效果,但是這些陰影和高光都是有規律可循的。

MIUI v5 UI設計七宗罪:去Android努力註定失敗

仔細觀察 Android 控件和菜單的高光陰影,你可以發現,Android 系統中的光源很清晰,來自上方。所以所有的陰影都在下方,而高光都在上方。

MIUI v5 UI設計七宗罪:去Android努力註定失敗

然而在 MIUI 中,光源似乎有很多個,有時在上方,有時在下方,有時在中間,有時同時在上方和下方,完全沒有任何的規律可循。而且,在右圖中,"New(新建)"作爲一個按鈕,在按下之後,下面的陰影應當消失,而在 MIUI 中,這個陰影卻固執的存在。

第五宗罪:發散大範圍擬真效果

在 Android Design 中,擬真的效果——高光和陰影——都是很節制的存在的,單個控件上的高光和陰影通常只有 1DP 的大小,以至於很難令人察覺,而對話框狂和菜單的陰影也是在 4DP 之內,只有新的 Drawer 的陰影達到了 8DP 的大小。而在 MIUI 中,隨便一個控件的陰影或者高光效果都有 10+DP 的大小,各種(毫無必要的)刷存在感。除了攪亂視覺效果和打斷沉浸式閱讀體驗之外,意義何在?

第六宗罪:應用 UI 層級混亂,沒有規律

在原生 Android Design 中,通過陰影,很好的表示出了應用中不同控件的層級。

MIUI v5 UI設計七宗罪:去Android努力註定失敗

舉個很簡單的栗子。在 Keep 中,新建筆記的功能框在最上方,和下面的卡片組有一定的距離。半透明的 Action Bar 處在稍微高過卡片組的位置,卡片緊貼在半透明的底板上。在一般情況下,Android 中高度關係都是 Action Bar 在 Tabs 上,Tabs 在內容上,Split Action Bar 也在內容上。

MIUI v5 UI設計七宗罪:去Android努力註定失敗

而 MIUI 呢?

誰來告訴我在這個應用裏,操作區與內容區域之間的高度關係? 至少我是完全看不出來,攤手。順便,那個對話框式的活動指示也是一個敗筆,要做成對話框樣式,好歹應該透過這個小尖兒能看到下面的內容吧?

第七宗罪:擅自修改啓動器邏輯造成的操作混亂

在原生 Android 中,從 App Drawer 拖動應用到 Launcher 的時候屏幕頂端時,出現的兩個操作分別是查看信息和卸載,但是如果你拖動的是系統應用,那麼就不會有卸載這個操作。

而 MIUI 的文件夾本應同理(在 MIUI 中,非空文件夾不能刪除——這裏又引發了一個問題,空文件夾留在桌面上幹嘛呢? 在原生 Android 中,空文件夾會自動消失),文件夾裏有東西時,不應顯示那個代表卸載的垃圾桶,而不是等用戶把文件夾拖進後再亡羊補牢的來一個 Toast 說明非空文件夾不能刪除。這一點非常的令人失望,完全的違背了 Android 的"Enchant Me"這一原則。

彭羅斯階梯

我曾經說過,MIUI v5 如果不是 Android 系統,而是 iOS 或者乾脆是一個獨立的系統的話,它也許也許會是非常棒,既好看又好用的一個系統。MIUI 有一套自己的 UI,自己的一套操作邏輯,自己的…可以說,MIUI 做出了這麼多的"改進",都是在試圖把 Android 系統原本的影子給去掉。

但是,只要 MIUI 還是 Android 一天,這樣的努力就註定是要失敗的——MIUI 就像在彭羅斯臺階上行走的人,氣喘吁吁的自以爲向上爬了不少高度,但其實在局外人看來,他的高度完全沒有上升,甚至是下降到了更低的地方。可悲的是,MIUI 似乎完全沒有意識到這個問題,更加努力的試圖進行他自己的"去 Android"計劃。最終的結果,MIUI v5 就只能繼續以這種不倫不類的樣子繼續存在。

不單單是 MIUI,錘子等很多國產 ROM/UI 在很大程度上也是一直在爬一段彭羅斯階梯,徒勞的做着無用功,甚至還沾沾自喜。是的。聰明的你應該也已經看出來了,MIUI 們遇到的彭羅斯階梯,就是 Android 這個系統本身。只要 MIUI 們還是基於 Android 一天,他做的所有努力就依然像是在爬彭羅斯階梯一般,化爲無用功。

 

而正確的做法呢? 可以參考一下魅族。魅族在 UI 改動方面,很大程度上遵循了 Android Design (姑且拋開 Smart Bar 不論,那算是 UE 改動),沒有打算去爬這個永遠不會上升的階梯,巧妙的另闢蹊徑,免去了很多無用功,同時也收穫了不錯的口碑。

最後讓我借用龔叔的一句話來做總結:

其實給原生 Android 做皮膚,跟當年 HTC 給 Windows Mobile 套殼有些地方是一樣的——你能套到的地方總是有限的。稍微多幾層。就總會有你遮不到的地方。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章