FB LIKE JACKER

为什么比起 Metro 我更喜欢 Holo

2012 年Dec月 17 日由 发布 | 类别: 锋客视点 | Tags: , ,

警告: 本文仅代表个人观点/审美, 且绝无贬低 Metro UI 之意. 正文中的 Android Design 指 Android 4.X 中泛用的设计, 而非谷歌的 Android Design HIG.

0000360_nokia_lumia_800_16_gbgo_cyan

也许会有人记得, 在 Metro UI 刚刚出来的那一段时间, 我是如何疯狂的推崇 Metro UI. 那段时间, 我对 Metro UI 的喜爱甚至让我把班牌给做成了 Windows Phone 的 Start Screen(sinCera 和水曜都很清楚, 略有黑历史的意味… ). 我对 Metro 的热情持续了好一段时间, 直到——Android 4.0 的发布.

Android 4.0 的 UI 是全新设计的一套 UI, 完全颠覆了以往 Android 上的 UI 设计. 在第一眼看到 Android 4.0 的时候, 我就被它的蓝黑配色吸引了. 比起 Android 2.3 的黑底绿色元素/橙色高光, Android 4.0 的蓝黑/蓝白配色显得更加现代. 沉稳. 而 Holo 蓝色(#33B5E5/#0099CC)又恰好命中了我的靶心.

如果 Android 4.0 对 UI 的改进仅仅是这样而已的话我是不可能会觉得 Holo 比 Metro 好的. Android Design 最吸引我的地方是他丰富的细节设计. 这里举出一些例子.

例一: 文字输入区

glympse_-_02 2012-12-16 22.45.21

在 Metro UI 中, 文字输入区(左图的 Message 区域)和选择器(左图的 Duration 区域)的样式是相同的, 单从 UI 元素上你是很难区分哪个是选择器, 哪个是文字区的. 而 Android Design则不同, 文字区和选择器的 UI 元素区别显而易见(文字区 Underline 和选择器的 Spinner), 不会造成混淆.

例二: 按钮

skype-lock-screen-settings Bottom

在按钮这个地方, 我的内心出现了一点矛盾. 在 Metro UI 上, 按钮只有一种类型——白框黑底的按钮, 辨识度很高, 但是过于单一. Android Design 中, 按钮的种类五花八门, 最常见的就有三种, 还有一些杂七杂八的类型, 虽说功能丰富且能够应景, 但是显然降低了按钮的辨识度. 右图从上到下分别是白框按钮(目前似乎是 Play Store 专用的), Holo 按钮(最标准的按钮), Boarderless 按钮, 半透明 Holo 按钮, 平面按钮(目前似乎是只有在帮助中使用), Boarderless 按钮x2.

例二点五: 按钮的细节

Bottom Android

仔细观察 Android 的标准按钮, 你会发现, 按钮的四周多出了一个像素的边框, 谷歌在这一个像素的边框上增加亮度, 体现出了了来自斜上方光源. 熟悉水果产品 UI 的同学可能马上会想到了, 这不就是拟物化么? 答案很接近, 这不是拟物, 而是“拟真”. 这是个按钮, 谷歌通过一个像素的高光制造出了按钮的立体感——厚度. 在 Android Design HIG 中, 厚度的存在被数次强调, 厚度也是 Android Design 和 Metro UI 最大的区别. Metro UI 是完全二维的, 没有任何起伏, 就像纸制印刷品一样. Android Design 则在拟真和极简中做出了自己的选择, 既不忽略细节, 又做到了极简.

例三: 复选框

acc2e8c1-453b-e011-854c-00237de2db9e-480x800-5 2012-12-09 02.34.28 2012-04-20 21.45.28

看到 Metro UI 的复选框, 我第一时间想到的是 Android 2.3 的复选框. Android Design 的复选框有着丰富的细节, 看起来就像是在方框上用夜光颜料打了一个勾, 然后在夜间观看的效果. 这也是拟真, 同样也是细节的追求.

一个像素级别的细节

在 Android Design 上, 你可以发现非常多一个像素级别的细节, 比如之前说过的按钮高光, 还有阴影.

2012-09-18 21.18.21

在现实生活中, 我们都会注意到, 有些厚度的纸张是不可能完全紧贴着桌面的. 如果光线从上方照射, 那么桌面上必然会留下纸张的阴影. 这就是 Google Now 等应用中, 每个 Card 下方两个浅灰色像素的作用. 你也能注意到, 搜索框的阴影只在搜索框下缘和侧缘出现, 上缘是没有的, 因为光线是从上方照射的. 通过阴影的浓度, Android Design 展现出了 Cards 与背景之间的距离和搜索框和 Cards 之间的距离.

progress_themes

Android Design 的进度条的尽头有一个像素的高光效果, 使得进度条看起来像是沿着细水槽流动的蓝色荧光液体, 前端因为表面张力微微凸起.

switches_switches

阴影在黑白背景上也有所不同, 这里以开关为例. 同样是模拟光线从上方照射, 黑色背景中阴影被黑色背景吸收无法目视, 而上方产生了高光; 白色背景中, 阴影在按钮下方, 而上方高光则融入白色背景.

2012-04-25 18.44.58

无论在什么地方, 我们都可以看出谷歌在认真的模拟”光源在侧上方”这个细节. 你甚至可以看到, 这里的 Toast 上缘的高光从左到右逐渐变暗.

2012-06-27 15.49.52

Android 键盘的每一个键粒上都有一个像素的高光, 键盘的背景是从深灰渐变到全黑, 所以在深灰背景上的键粒下缘有一个像素的阴影.

相比之下, Metro UI 中则完全没有体现出这些”合理的细节”. 就如我之前说的, 从视觉效果上来说, Android Design 是富有现代感(你也可以说是未来感)的操作界面, 而 Metro UI, 则是一张纸. 同样是追求简洁的 UI, Android Design 没有完全抛弃对细节的追求, 可以毫不夸张的说是简约而不简单, 简而未减. 而 Metro UI 在 Android Design 面前, 就难免显得有些简约过头以至于略简陋了.

总结

Android 4.2 并不完美, 但是 Android Design 对细节的追求令我赞赏. 这就是我比起 Metro UI 更心水 Holo Theme 的原因. 换句话总结: Metro UI 败在了 Holo Theme 的一个像素上. 在 Android 4.0 的发布会上, Matias Duarte 上台后的第一句话就是: 从此以后 Android 要和用户建立一种情感联系. 他做到了, Android 做到了. 对的, 多少个 geeky 的功能对用户而言都是冰冷的, 感情是靠这些像素一个像素一个像素的建立起来的.

« 现实中的虚拟战场——Ingress 初体验
Windows 8 长的什么样? »

About NovaDNG

Nexus 4 (Android 5.1), Xperia Z3 (Android 5.0), Xperia Z2 Tablet (Android 5.0), veer 4G (webOS 2.1.2), Chromebook Pixel LS (2015). Guest Member of HiHex. Product Design @ Zhihu.com

» has written 188 posts

锋客的朋友们

  • 少数派
  • 煮机网

签订契约成为机油吧!

Buy me a coffee~ ;-)

Buy me a coffee~ ;-)
閃開│讓專業的來 沒辦法│我這個人就是太正直了