天下网吧 >> 网吧天地 >> 网吧行业 >> 网络追踪 >> 正文

Metro UI 败在了 Android Design 的一个像素上

2012-12-17PhonekrNovaDNG
:Metro UI 败在了 Android Design 的一个像素上

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

也许会有人记得, 在 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 最吸引我的地方是他丰富的细节设计。 这里举出一些例子。

例一:文字输入区

  

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

例二: 按钮

 

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

例二点五:按钮的细节

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

例三:复选框

 

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

一个像素级别的细节

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

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

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

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

无论在什么地方, 我们都可以看出谷歌在认真的模拟”光源在侧上方”这个细节

本文来源:Phonekr 作者:NovaDNG

声明
声明:本站所发表的文章、评论及图片仅代表作者本人观点,与本站立场无关。文章是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益,请作者持权属证明与本网联系,我们将及时更正、删除,谢谢。 Email:support@txwb.com,系统开号,技术支持,服务联系微信:_WX_1_本站所有有注明来源为天下网吧或天下网吧论坛的原创作品,各位转载时请注明来源链接!
天下网吧·网吧天下
  • 本周热门
  • 本月热门
  • 阅读排行