B64d90a9d9eb40d9f1c772677635621d
[核心提示] MIUI 和 原生 Android 比,在设计风格上有哪些是不可忍受的?作者列举了 MIUI v5 在 UI 设计上的七宗罪。

经常有人问我,MIUI 到底怎么了,为什么你这么埋汰他?

要解释这个问题之前,我们先来看一幅世界名画。

初中时代的我曾经无比着迷于人类的视觉错觉(错视)。在我的印象中,最早引发我对于错视的兴趣的东西,就是上面那张著名的错觉画,M.C.Escher 大师的平面画《Ascending and Descending(上升与下降)》。埃舍尔大师巧妙的利用错觉,搭建了一段首尾相连的阶梯。被困在阶梯中的人们无奈论怎么走,最终都会回到出发点,高度没有任何的改变。

至于这幅画有什么用,大家姑且先保存在心里。

七宗罪

接下来,我来说说 MIUI v5 在 UI 设计上的七宗罪。

第一宗罪:擅自替换应用内控件

这第一宗罪,也正是作为一个 Android 系统的 MIUI 犯下的最为不可饶恕的罪行。

Dropbox 来做个例子吧。在正常状况下,Dropbox 使用的默认的蓝色控件和蓝色的 Action Bar 搭配,非常和谐。而在 MIUI 中,系统擅自替换了原本的蓝色 Checkbox,而橙色的 Switch 和 Loading Indicator 和蓝色的 Action Bar 搭配是如此的扎眼,完全破坏了一个应用原本的美感。

更可恨的是,MIUI 不但替换 Android 系统自带的 Holo 控件,连开发者嵌入应用的自制控件都难逃此劫难。原本精心设计的 Press,堪称 Android 上最美观的 RSS 阅读应用,在 MIUI 上惨遭毒手,变成如此一副令人不忍卒睹的模样。

 

从这张图上可以看出,MIUI 的控件完全没有针对暗色背景进行优化,连光影效果都和亮色背景上是一样的,这明显的违反了 Android 上的"拟真"原则。而 Android 原生控件中,各个控件都有针对亮色和暗色背景优化的两套版本。

第二宗罪:用色过于鲜艳,难以搭配

提到 MIUI,很多人应该会想到那标志性的橙色。

而这个标志性的橙色,也正是让 MIUI 控件和 Holo Theme 格格不入的罪魁祸首之一。Google 倡导的 Android 用色中,"中性"是一个很重要的标准。所有的 Android 标准颜色都是偏中性的颜色,可以方便的互相搭配而不显的违和。

在 Play Music 中,同样是用了橙色系作为 Action Bar 的背景色,但是直接搭配的颜色是白色的文字与图标,而且蓝色的 Holo 控件放在这里也丝毫不嫌违和。相较之前另一个极端的例子,Dropbox 使用了纯度很高的蓝色,再碰上纯度很高的橙色,违和感自然而然的就产生了。而 Android 系统的原生首选用色就是蓝色,MIUI 的首选用色却是橙色,这样就造成了只要有原生元素出现的地方,MIUI 的控件就一定会产生视觉上的冲突。

第三宗罪:设定逻辑混乱

在原生 Android 中,设置中通常有三种可操作控件: Radio Bottom (单选按钮) 提供在多个选项中选择其一的功能,Checkbox (复选框)提供了于集合中选择多个选项的功能,而 On/Off Switch (开关) 则提供对于某项功能单一的控制选项。可以很明显的看出,Switch 和 Checkbox 的功能是截然不同的。而在 MIUI 中,系统完全混淆了 Checkbox 和 Switch 的功能,一律使用 Switch 来代替,在很多地方破坏了原本的系统逻辑。

第四宗罪:阴影特效随意乱用

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

仔细观察 Android 控件和菜单的高光阴影,你可以发现,Android 系统中的光源很清晰,来自上方。所以所有的阴影都在下方,而高光都在上方。

然而在 MIUI 中,光源似乎有很多个,有时在上方,有时在下方,有时在中间,有时同时在上方和下方,完全没有任何的规律可循。而且,在右图中,"New(新建)"作为一个按钮,在按下之后,下面的阴影应当消失,而在 MIUI 中,这个阴影却固执的存在。

第五宗罪:发散大范围拟真效果

在 Android Design 中,拟真的效果——高光和阴影——都是很节制的存在的,单个控件上的高光和阴影通常只有 1DP 的大小,以至于很难令人察觉,而对话框狂和菜单的阴影也是在 4DP 之内,只有新的 Drawer 的阴影达到了 8DP 的大小。而在 MIUI 中,随便一个控件的阴影或者高光效果都有 10+DP 的大小,各种(毫无必要的)刷存在感。除了搅乱视觉效果和打断沉浸式阅读体验之外,意义何在?

第六宗罪:应用 UI 层级混乱,没有规律

在原生 Android Design 中,通过阴影,很好的表示出了应用中不同控件的层级。

举个很简单的栗子。在 Keep 中,新建笔记的功能框在最上方,和下面的卡片组有一定的距离。半透明的 Action Bar 处在稍微高过卡片组的位置,卡片紧贴在半透明的底板上。在一般情况下,Android 中高度关系都是 Action Bar 在 Tabs 上,Tabs 在内容上,Split Action Bar 也在内容上。

而 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 套壳有些地方是一样的——你能套到的地方总是有限的。稍微多几层。就总会有你遮不到的地方。

MIUIAndroid Design设计风格

已有29条回复我要回复

4
尼安德特人·2013-05-27
最没法忍的就是MIUI的启动器,都快三年了还是一堆连他们自己也承认的Bug没修正,还非要东施效颦学iOS,还学不好,好歹自称每周一升级,却连最基础最表面的bug都修复不了一放就是三年
Medium bfd769c61cb23e465e81598da0a1a91b
NovaDNG·2013-05-27
无删减版原文见此处: http://www.phonekr.com/paradox-of-miui/
Medium 2f4b5f4c49fc9b337b0f1a2a2d21ffa7
京极·2013-05-27
你手里拿了 Android Design 的锤子,看什么第三方系统都像钉子,凡是跟原生不一致的地方统统都要来一锤,这是一种偏执和错误的想法。 Android 的本性在于开放多元,你可以不喜欢 MIUI,锤子,touchwiz,Sense,EmotionUI…… 但是你不能用某一种标准来试图强制规范它,实际上所有这些定制系统都是 Android 多彩生态圈的一部分。按照你的想法,是不是每个人的 Android 手机拿出来都是黑乎乎的原生界面你才开心?那样的 Android 世界是最不美好的,恐怕第三方厂商数量也会锐减~
Medium 32fe85f6430db2f68b8f97977251d909
tonyq0802·2013-05-27
MIUI 有一种设计过度的感觉。很多功能非常棒,但是展现形式其实还可以再推敲得更精致,更舒服一些。 个人觉得魅族自己的硬件手机设计上可以和系统保持一致,而小米手机本身没有什么设计,MIUI 又会出现在各种品牌手机上,可能展现品牌颜色,形象的人物就全落在 MIUI 上了,于是就有了自己独有的风格和强烈冲击的橙色配色。
Default avatar
极客漫游者·2015-04-25

可以换主题,换了用着就很舒服

Medium 40112e914f2a20678fd305e97fb29a16
轻风微鸣·2013-05-27
我果断的刷了原生系统,抛弃MIUIv5
Medium eb171400fa8495bbc4780e0e32775a62
屌你卤味·2013-06-03
低端HTC求指导刷高版本原生系统, 哈哈
Medium 40112e914f2a20678fd305e97fb29a16
轻风微鸣·2013-06-08
老实说,我刷了三遍,第三遍才成功,所以,去尝试吧
Medium eb171400fa8495bbc4780e0e32775a62
屌你卤味·2013-06-09
那些是基于原生镜像做出来的第三方rom吧...
Medium 40112e914f2a20678fd305e97fb29a16
轻风微鸣·2013-06-14
貌似是,反正装不起google play这些服务,憋屈啊
Medium eb171400fa8495bbc4780e0e32775a62
屌你卤味·2013-06-14
刷谷歌服务包呗... 只能这样的
Medium 40112e914f2a20678fd305e97fb29a16
轻风微鸣·2013-06-25
谷歌服务包也装不起啊,
Medium eb171400fa8495bbc4780e0e32775a62
屌你卤味·2013-06-26
我用miui的时候一直刷谷歌服务包啦
Medium 40112e914f2a20678fd305e97fb29a16
轻风微鸣·2013-06-25
我可以到哪儿下载没被各公司更改过的原生androidrom中文版呢?
Medium eb171400fa8495bbc4780e0e32775a62
屌你卤味·2013-06-26
原生android镜像下载也只能给太子机刷吖... 谷歌都没给别的机做镜像... 别的要体验原生只能将就刷CM咯
Medium 616e66f2ba488c5f7cee716665ff836a
jason2be·2013-05-27
我并不觉得作者是拿着原生设计标准的锤子找钉子。 关于定制系统并不是就一定说不好。 反正关于我要吐槽 MIUI 的几个点作者都正好提到了。 比如:1、替换开发者自制控件(甚至是人家专门设计过的) 2、夸张的拟真效果,滥用 iOS 风格的 Switch,但阴影吓人。 3、光源混乱,层次不明显。 之前在知乎看到其实 dribbble 上好几个叫得出名字国内设计师都在小米做设计,结果最后 MIUI 只是这样一份答卷实在太不应该。 不过关于小米品牌色过于偏红的吐槽,我其实也听他们内部人士说过。但是就是这么定的自然是没办法,但是针对暗色调和夜间模式没有对应方案的处理方式实在有点「武断」了。
Medium 57caf48781d64eaf08fd5273426ffb46
Jason小嘉嘉·2013-05-27
这就是《简约至上》里面说的专家型用户和普通用户对待一个系统的区别。普通用户不会注意到MIUI和原生Android什么的区别,他们甚至不知道Android是什么。至于UI风格,众口难调,只要你做的差不多,至少有1/5的用户会follow你,而对于MIUI、锤子Rom这些,已经足够他们达到商业的目的。就像我原先一直很纳闷Android版的微信为什么要和iPhone版长的一模一样,而不遵循Android的设计原则设计。
Medium 2f4b5f4c49fc9b337b0f1a2a2d21ffa7
京极·2013-05-27
为什么我在这篇文章里的评论被吞掉了?
Medium 46b427f18dd59378f8ac6bd0d6cc7a0d
detecti1914·2013-05-28
抱歉,评论时间排序出了点Bug,正在修复中
Medium 2f4b5f4c49fc9b337b0f1a2a2d21ffa7
京极·2013-05-31
三天了还没修好。。。。 像话么。。。。
Medium 2f4b5f4c49fc9b337b0f1a2a2d21ffa7
京极·2013-06-03
删了就是删了吧,光明正大说没什么丢脸的,中国嘛。这么多天还不“修复”好?呵呵。。。
Medium 46b427f18dd59378f8ac6bd0d6cc7a0d
detecti1914·2013-06-03
已经修好了。前几天我们的前端不在耽误了,除非政策情况,我们不会变更用户发表的信息
Medium 94dede58896da67b119968305897a4e6
我要见师长·2013-05-28
MIUI的发展肯定是要限于安卓的一些固有缺陷。不过从UI反面说,用户决定了市场。就算在你眼里再烂的设计只要用户喜欢就是成功的设计。这篇文章除了标题吸引人以外,真没有什么营养,我可以理解为是“吐槽”么?
Medium eb171400fa8495bbc4780e0e32775a62
屌你卤味·2013-06-03
站在我的低端HTC角度来说, 在没得刷高版本原生系统, CMx最高也只有2.3的情况下... 刷了MIUIv4才第一次体验了Android4.1... 另外, 还有个, 话说哪个厂商不给自家Android加一层皮的呢? HTC Sense固然漂亮, 但是低端机基本不再有更新... 所以也只能投靠MIUI啦, 哈哈
Medium 64e4bc47e9fdaaa1849de78eb38ba815
kings1393·2013-06-25
额,发言和本文无关。关于查看评论,是否可以考虑加一个展开全部评论?尤其页数比较多的时候,真的很影响阅读的连续性……
Medium 46b427f18dd59378f8ac6bd0d6cc7a0d
detecti1914·2013-07-23
很快就会有了
4
酱老头辣酱·2013-07-03
一、作者说的,除了说配色问题以外,其它都很在理,很到位,也是很重要的问题。只是配色这个可能因人页异。 二、为什么MINU和Android对一些东西的整体考虑有差距?比如操作逻辑的一致性,表现方式的一致性。原因之一可能是MIUI正在关注的事情比较多,其中有很多方面的重要性在其内部看来是比这些操作逻辑的一致性的优先度要更高的,也即是说“逻辑方面先将就吧”或者“还没时间想这些”;原因之二可能是国内的团队组织结构与项目流程有问题,估计阴影这一块都交给美工了,美工在割裂大局而重审美,结果两个都美的东西放在一起却违背逻辑。 (朋友的某宝店求支持"酱老头辣椒酱")
5
leonadeyan·2013-07-26
配色什么的我就不吐槽作者了,因人而异,但是最后一条,“miui里空文件夹不会自动消失”,你真的用过miui吗
6
扯淡,你是看别人用V5的吗?你不觉得原生那套UI很丑的吗?
Default avatar