Metro UI：简洁？还是复杂？

8顶
3踩

2011-12-28 13:41 by 正式编辑 sherry617 评论(20) 有9039人浏览

UI 用户体验 Metro

Metro UI 刚推出的时候，对比其他系统的图标，确实让人眼前一亮，活动格窗取代图标，内容取代形式，微软的宣言是让智能手机用户有更高的效率处理事务，而不是专注于智能手机本身。

但果真如此吗？在我看来，Metro UI 设计的最初目的是简洁，最后产生的结果却不一定是简洁。

一、细线

Metro UI 中的一大特色就是内容的无边框设计，通过间隔和字体使内容产生自发性质的分隔，而不必通过边框等介质。在展示少量内容时，简洁的特性可以很好的体现，但在处理大量内容时，却会表现出“拥挤”。由于没有分割线，不同的内容之间只能通过留白来分隔，导致文字积压，挤占了屏幕的表现空间，进一步造成了内容的“拥挤”。

以设定中“关于本机”选项为例，iOS 的细线分隔显得更明快，获取信息更清楚更容易。细线是最简单的内容区分的形式，Metro UI 对这区分形式的舍弃导致整个屏幕上只有孤零零的文字，直接发现有用信息困难。

细线的分隔也是一种更人性化的暗示，它让内容看上去更像一个按钮，暗示着可以按下并激发新的内容。而Metro UI 中的内容则会让人疑惑这是单纯的文字还是可以继续点击查看。Metro UI 的功能性暗示更加不明确。

二、颜色与图标

Metro UI 在颜色的应用上既激进又保守，激进的是它可以把界面弄得五彩斑斓，保守的是在应用内的界面不着一墨。

从上图看，Metro UI 的邮件界面上只有单纯的文字，缺乏色彩，所有内容的分隔都是通过字体和空白来完成。这样的结果是信息同质化，很难区分。界面没有将有价值的信息第一时间呈现出来，因此当面对这样的界面时，需要更多的集中精力去寻找信息。这和做 PPT 时将所有的文字堆砌起来而不进行有效的信息归类并无区别。

而 iOS 除了字体还有不同的颜色来表现不同性质的信息，同时也有小图标来表现相同信息的数目。各种要素各司其职，将信息表达得直观明确。

三、活动格窗

活动格窗是Metro UI 呈现给用户的第一特色，它不仅是一个快速启动的按钮，同时也是一个信息更新的展示板，微软宣传这样的设计可以更好的将信息第一时间呈现给用户。

但问题是，活动格窗的面积太小了，只能显示简介性质的数字，小图标表等等，缺少好的信息预览功能，这样的通知系统展现给用户的结果就是“知道有这么回事，但不知道究竟是怎么回事。”用户依然是茫然的。有价值的信息被淹没，用户没有能够便捷地获取有用信息。

Metro UI 是一个形式上简洁的系统，导致的却是一个复杂的用户体验。与其相标榜的相反，用户需要花更多的时间在屏幕上才能仔细甄别什么是有用的信息。Metro UI 为了简洁，大多数时候忽视了内容的表现形式，比如细线这种最简单区分内容的形式。Metro UI 在颜色上也有奇怪的特性，屏幕永远处在斑斓和全无的两极，内容的表现形式非常单一。

在我看来，微软的界面设计陷入了一个误区，突出内容忽略形式，并不是真正的简洁，而是另一种复杂。

查看图片附件

来自: 爱范儿

分享到：

8
顶

3
踩

评论共 20 条请登录后发表评论

20 楼 hantsy 2011-12-29 23:46

喜欢 Google Plus，FaceBook，Twitter的简洁界面。

19 楼 782478585 2011-12-29 17:35

galfordliu 写道

有道理！！！！

拿长处和短处比能不有道理么

18 楼 qin1818 2011-12-29 16:29

这界面忒难看了。

17 楼 zcq100 2011-12-29 15:29

你把图片上涂黑有必要迈？你干脆就不要截图算了，暴露了信息会死吧

16 楼 damoqiongqiu 2011-12-29 14:22

最后出来神马东东还不一定的，难道都忘记了当年的Vista？
有谁还记得它们第一次出来出牛逼的时候，版本号貌似叫LongHorn的？

15 楼 paramore 2011-12-29 11:16

反正哥不喜欢

14 楼浪客剑心 2011-12-29 10:31

不是很适应！

13 楼 b_l_east 2011-12-29 10:30

有去过招聘会的没，招聘会上的宣传板就这个样子！

12 楼 allenny 2011-12-29 09:45

superxlm 写道

LZ只用了30分钟Metro UI就写出了这篇文章

虽然不完全赞成楼主，但是UI这种东西，玩30分钟确实可以写篇文章了。

11 楼 willothe 2011-12-29 09:44

我喜欢这种DOS界面的感觉

10 楼 ghyghoo8 2011-12-29 09:40

习惯了就好，嘿嘿～

9 楼 xingchenzhan 2011-12-29 09:02

Metro UI 一到满是文字得界面，真觉得是狗屎

8 楼 superxlm 2011-12-28 17:10

LZ只用了30分钟Metro UI就写出了这篇文章

7 楼 zjlovezj 2011-12-28 16:57

有人像我一样，第一眼看见Metro UI就觉得难看难受的吗？

6 楼 aixinnature 2011-12-28 16:23

第一次见确实有眼前一亮的感觉，没使用过，看看实际市场的检验吧。

5 楼 lumi 2011-12-28 16:07

大道至简，这是一种回归，我只能这么理解

4 楼 watanoeye 2011-12-28 16:00

实在不喜欢Metro UI, miui的换肤才是王道,用户喜欢什么换什么.

3 楼 george_space 2011-12-28 15:11

很有道理，看到win 8 界面的第一感觉就是，这些四四方方的格子是不是太“程序员化”了。

我觉得Windows 7是最好的，无论是易用性，还是稳定性，相对于其他操作系统，win7完胜，相对于最新的mac os x 10.7.1也是完胜。

至于手机OS,WP7 界面上不如iOS，没有用过WP7，但是从WP7的系列图感觉，WP7设计太“程序员化”了。

2 楼 p2world 2011-12-28 15:00

但视觉效果就是爽

1 楼 galfordliu 2011-12-28 14:41

有道理！！！！

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

php image gallery in metro ui,终于搞明白糟糕的METRO UI是怎么回事了

该楼层疑似违规已被系统折叠隐藏此楼查看此楼METRO的意思是地铁,微软决策层犯SB请了一些更SB的设计师以美国地铁标识牌的设计为"灵感"而创造的糟糕界面.界面尽量以文字为主阅读次数和非注意力主要目标:主标题文字...

Metro UI 界面完全解析 (转载)

它最早出现在微软电子百科全书95，此后微软又有许多知名产品使用了Metro UI，这包括：Windows媒体中心、Zune播放器等等。该技术已于2010年初（美国）获得Metro UI专利批准（USPTO）。Metro UI最新的应用是windows ...

Windows Phone灵魂诠释:Metro UI界面完全解析

（10.1.2）Windows Phone灵魂诠释：Metro UI界面完全解析

linux的前世今生简洁语言,谁动了我的界面？ PC系统UI的前世今生

微软融合移动和桌面系统的尝试，意味着桌面系统也将 Metro 化，而 Metro 的设计本来就是为移动操作系统而生的，“全景视图”和“操作按钮“将取代无处不在的菜单，带来更加简洁智能的交互。安卓系统菜单安卓系统从...

Mendix UI方法论和定制开发实践

原子设计是由原子、分子、有机体、模板和页面共同协作以创造出更有效的用户界面系统的设计方法。Mendix的Atlas UI设计方法论，和原子设计有着较为相似的设计思路。

UI开源库

https://github.com/opendigg/awesome-github-android-ui

Android最全UI库合集

Android UI Library 目录索引抽屉菜单 ListView WebView SwitchButton 按钮点赞按钮进度条 TabLayout 图标下拉刷新 ViewPager 图表(Chart) 菜单(Menu) 浮动菜单对话框空白页滑动删除手势...

Android UI 自定义控件大全

很多东西的实用性还是蛮高的，转载让更多人看到。原文链接： https://github.com/opendigg/awesome-github-android-ui 内容抽屉菜单 ListView WebView SwitchButton 按钮点赞按钮进度条 TabLayout 图标下拉...

转载-Android 前沿UI

★2400 - 安卓闪光UI库 LikeButton ★1823 - 仿Twitter点赞时的的heart GoodView ★701 - Android点赞+1效果 SparkButton ★670 - 创建一个带动画效果的按钮 ThumbUp ★550 - 精致的点赞控件 ...

部分开源UI项目——从github集成

GitHub上受欢迎的Android UI Library

转载自：https://hndeveloper.github.io/2017/github-android-ui.html# 目录 1、抽屉菜单 2、ListView 3、WebView 4、SwitchButton 5、按钮 6、点赞按钮 7、进度条 8、TabLayout 9、图标 10、下拉刷新 ...

GitHub上优秀Android UI Library

spring-boot-2.6.6.jar中文-英文对照文档.zip

# 压缩文件中包含：中文-英文对照文档 jar包下载地址 Maven依赖 Gradle依赖源代码下载地址 # 本文件关键字： jar中文-英文对照文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法：解压最外层zip，再解压其中的zip包，双击【index.html】文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码等。 # 温馨提示：（1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）；（2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；

LabVIEW中最小二乘法曲线拟合与报表生成：流程图自动化实现波形拟合的最佳方法

内容概要：本文详细介绍了LabVIEW中最小二乘法的应用及其在曲线拟合和报表生成中的具体实现。LabVIEW作为一种流程图编程语言和开发环境，能够通过图形化编程的方式，使用户轻松构建拟合模型并计算最佳拟合曲线的参数。此外，LabVIEW还提供了丰富的波形处理和分析工具，支持对波形数据进行预处理（如滤波、降噪和采样），并通过最小二乘法进行波形拟合，最终生成详细的报表。最小二乘法通过最小化数据点与拟合曲线之间的误差平方和，广泛应用于统计学、工程学和物理学等领域。适合人群：从事科学研究、工程设计和数据分析的专业人士，尤其是那些希望通过图形化编程提高工作效率的人群。使用场景及目标：适用于需要对大量数据进行拟合分析并生成报告的场合，如实验数据分析、工程设计验证等。目标是通过LabVIEW提供的强大工具，快速准确地找到最佳拟合曲线，提升数据分析效率。其他说明：LabVIEW不仅简化了编程过程，还提高了数据分析的直观性和准确性，使得即使是非专业程序员也能轻松上手。

C语言编程入门教程精简版专题培训课件.ppt

spring-boot-2.4.4.jar中文文档.zip

# 压缩文件中包含：中文文档 jar包下载地址 Maven依赖 Gradle依赖源代码下载地址 # 本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册 # 使用方法：解压最外层zip，再解压其中的zip包，双击【index.html】文件，即可用浏览器打开、进行查看。 # 特殊说明： ·本文档为人性化翻译，精心制作，请放心使用。 ·只翻译了该翻译的内容，如：注释、说明、描述、用法讲解等； ·不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码等。 # 温馨提示：（1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）；（2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件；

DNA进化算法及其改进研究样本.doc

智慧城市-【精品】2019年百度地图城市大数据平台解决方案.zip

8顶3踩