“Metro”，移动设备视觉语言的新新人类
何谓“Metro”？“Metro”本意是指“地铁”。纵观机场、地铁、公交线路图等，会发现这些导视设计都具有高度概括性，对比度强烈等特点，并被用来指导人们更快的找到自己要去的目的地。
“Metro”之源
一个移动设备的界面设计语言怎么会跟地铁挂上钩呢？每一次改革创新的背后，都有一个主导思想。微软这次推出的Windows Phone 7（以下简称WP7）背后也存在着一个设计语言，设计思想，这个设计语言正是源于交通导视图的这些特点而产生的灵感！在微软内部这种设计语言被命名为“Metro”。
“Metro”之新
1．图标
WP7整个界面展现出的“图标”完全跟 “圆角、渐变、阴影、光泽感”说拜拜，用纯二维以及高度概括性弱化了视觉上的复杂性，让用户没有过多的去关注图标本身，而是增加其辨识性和标识性，达到强化内容和信息的目的。
2．界面布局 Home页没有像九宫格那样整齐排布，而是用一个一个单一的色块平面化的对界面进行大胆的分割。其他的界面也去掉了那些繁复冗余的设计细节，没有过多绚丽的色彩，没有花哨的光影，强调用文字信息进行排版，更多的是关注内容本身，更关注用户想要什么，用一种锐利直白的视觉语言来表达了真实的内容。
3．字体
字体是“Metro”展现其设计美感的一个重点，它主要使用的是较细的Segoe UI字体，通过把字体放大、缩小来得到好的效果和设计感。在“Metro”中没有需要操作的复杂的界面来转移用户对内容的注意，取而代之的是用户本身关注的内容，简而言之：内容即界面！这样极大地减少了用户视觉上的干扰、增强了引导性，让原本“拥挤”了的各种内容和信息的界面显得更加地“透气”。
在一个充斥着各种渐变和各种效果的时代，WP7能如此大胆地抛开了传统视觉设计语言的束缚，不惜代价地提高视觉上的清晰度和辨识度，把追求简洁发挥到了极致。
“Metro”之“优”与“忧”
不可否认，“Metro”在视觉设计上的确有着其独到之处，而事实上，其“新”更是理念上的，这种理念上的创新设计在某些方面拥有一定的优势，具体体现为以下几个方面：
1．信息的完整体现
传统的手机终端已经被Application包裹得越来越紧密，而你的生活和需求却不是一个一个单独 的App所涵盖的，而是穿梭在不同类型的信息里。是否有新的信息、电话或者有新的状态更新，可以扫一眼就看到，这种强调类似SNS信息流的设计让用户更好地回归到体验手机的本质功能上。 WP7在概念上遵循了这种源于信息和内容的思路，“Metro”的出现也正是为了消除这种概念上的不对称，当这种理念的核心价值表现在实用主义与内容至上的时候，一切视觉上的语言都显得不那么重要了。
2．Panorama Panorama的设计采用了类似画卷一样的横向滚屏的设计，摒弃了传统的滚动条，使得内容界面变得可以滚动，即让用户避开了一层一层的操作窗口又能一口气浏览信息到底。
3．内容至上
WP7不是在标新立异，而是从用户对信息的需求出发。他把极简主义，内容至上原则带到了移动终端设备的视觉设计上，不能不说是开辟了一种更强调实用的设计方向。
“Metro”在理念上够新，视觉上够酷，但它是否真的适应当前的移动终端？我们不得不对其产生一些质疑和担忧：
1．对一种字体的过度依赖
拉丁字母非常配合Metro的设计理念，将简洁明快发挥到了淋漓尽致。而这就像一把双刃剑，导致“Metro”过度依赖拉丁字母本身所带来的魅力而忽略了例如中文，日文等非拉丁文。
这些语言是否还能在“Metro”的设计理念的引导下，在视觉上是延续这种字体的魅力呢？至少到目前为止我们还没有看到有说服力的证明。
2．视觉的单调性
纯2维的图标有非常高的指示性，但却缺乏一定的丰富性。 在“Metro”的视觉语言下，剥夺了图标原有的个性和情感，把其转化成一个个没有生命的指示牌。就像你无法指望那些交通标识能带给你什么惊喜和趣味，而只是冰冷生硬的指示。这对第三发开发者来说不能不说是一个遗憾。
3.用户习惯与认可度
在iPhone，Android系统横行于市的今天，可能用户早已习惯了那种操作界面的方式，而WP7的各种操作明显有别于市场上其他系统，因此需要一定的过程和培育时间成本来让用户接受。早在几年前，当时西门子推出Xelibri从设计理念上也够新、够酷并轰动一时，但用户接受程度却不尽如人意，最后惨淡收场。因此，微软在视觉和体验上做出如此大的变革，这不仅需要考验用户的耐心，更要考验微软的毅力与决心。
“Metro”之展望与启示
其实“Metro”这个设计语言在之前的Zune上就有多多少少的体现，垂直的大号文字导航系统，加上扁平化的色块，一目了然。在WP7面世后，“Metro”这个设计语言开始正式被大范围系统化的应用和推广，以此设计哲学和理念汇编成的Metro book，用其简明的布局和明快的色彩对“Metro”这一设计语言的特色进行了最好的诠释。
由Xna Creator Club Online演化出来的App hub也承载了Metro的设计理念。 “Metro”作为一种新的设计语言出现在移动终端中，更像是一种现象的延续，记得曾看过一篇Creative Review 的文章“The New Ugly”。我们不是在这里崇拜丑陋主义，但这种思潮却在近些年不断地影响着整个设计界，包括伦敦2012年奥运会标志，WACOM的新标志，纽约出租车标志都成为对传统审美争议的焦点。
不管是在界面还是体验上，都需要有一个差异化的核心价值，当这种体验的核心价值表现在内容至上时，无所谓对与错，进步或后退，所谓的视觉次于内容，并不意味着视觉设计的地位被减弱了，相反更需要设计师去提炼“设计”。
Android 4.0 界面变化：加入WebOS 设计元素
http://www.daodoc.com 2011-10-19 09:32 深圳新闻网 【字号：大 中 小】
Google今日将在香港发布代号为Ice Cream Sandwich的全新Android 4.0操作系统，可跨手机、平板及电脑使用，同时三星与Google合作采用此操作系统的第三代Google Phone，也将同时发布。 Android 4.0 虽然延期发布，但泄密并没有延期。继之前泄露的 Nexus Prime 真机视频，现在 Nexus Prime 运行新系统的截图也在 mobiliimo.ro 泄露出来。泄密不到八小时，这些图片就应版权方的要求撤下，从侧面印证了图片真实性。美中不足的是这些图片的分辨率经过调整，只有 800 x 450，无法反映新界面的所有细节。那就先粗看下一代 Android 手机系统界面上的变化：
第一张图是锁屏界面，可以看到顶部通知栏右侧不再显示时间，因为主屏已有时钟显示。Android 2.3 的锁屏界面则会重复显示两个时钟。这只是很小的改变，不过细节也正是 Android 之前欠缺的地方，同时锁屏界面整体上也比之前更干净。
自 Android 3.0 开始，前 webOS 用户体验设计师 Matias Duarte 就在把越来越多的 webOS 设计元素带给 Android。4.0 的半圆解锁区与 webOS 手机如出一辙，不同之处在于新的解锁区提供了快速启动相机的选择，非常方便的设计。
Android 的设置界面一直很让人抓狂——没有分类、排序没有逻辑。3.0 有所改善，但布局不适合手机。我从 09 年 1 月起长期使用 Android 手机，有些设置至今都要找一会儿。使用时间更长的 @lordhong 对此也有同感。现在我们还看不到设置的全貌，不过单从右图来看，新的设置界面终于有了分类，WiFi、蓝牙等常用功能不但出现在设置首页而且可以直接开关。
左图是将时钟 Widget 拖放至桌面时的预览，除了底部有五个快捷键以外，其它地方和 3.0 并无不同。右图被人当成 2.3 系统里长按 Home 键弹出的近期应用，不过这明显应该是文件夹。我更偏爱 iPhone 的文件夹表现形式，但 4.0 也不错，比 2.3 的丑陋设计优雅太多。
底部的返回、Home、多任务同样延续自 3.0 系统，不知道在游戏等全屏应用下会怎么处理——如果隐藏的话怎么恢复显示? http://www.daodoc.com 2011-10-19 09:32 深圳新闻网 【字号：大 中 小】
左图很有意思，Android 的应用列表自 3.0 开始分屏显示。4.0 延续了分屏设计，但放弃了之前平庸的过渡效果，而是和诺基亚N9 一样——滑开一屏图标的同时，下一屏图标浮现出来，就好象被推到前面一样。关于这个效果，建议看之前的视频，比截图更直观。
Widget 以缩略图形式和应用放在一起等待选择也是 3.0 开始的设计。我见过不少普通用户桌面一个 Widget 都没有，只是像 iPhone 一样堆着一排排图标，因为他们根本不知道有这样的东西。现在的做法应该能鼓励他们布置更高效更个性化的桌面。而且相比 Android 2.3 添加 Widget 只能靠文字描述，必须丢到桌面才能知道究竟是什么样的可怕体验，新设计无疑方便很多。
http://www.daodoc.com 2011-10-19 09:32 深圳新闻网 【字号：大 中 小】
新的多任务界面延续自 3.0 系统，采用缩略图与图标的组合，高分屏用在这里会比 2.3 更有意义。最后是这部 Nexus Prime 的 About 页面，i9250?我对 4.65 英寸的怪兽不是很感兴趣，不过 4.0 系统的细节改进确实非常有吸引力。此外光从这些缩小过的截图也能看出新图标的细节比原先丰富很多(图片点击放大)。
Android 4.0 目前只展露出部分面目，不过至少从现有截图和视频来看，它的界面相比 Android 2.3 称得上飞跃。系统界面这块短板至此差不多已经补上了，这样的色调不可能讨好所有人，但喜欢黑色背景的人应该都会比较满意。接下来我比较期待推送系统能彻底普及、第三方应用也变得更漂亮一些，不然和系统反差实在太大。
iphone Web App 导航设计探讨
一叶苦雨 | 时间: 2011-10-19 | 1,428 Views 交互设计
最近在做iphone端Web App的项目。由于产品形式新颖，技术环境不成熟，公司给与了较宽松的研发时间。在一个月的交互设计阶段，每个环节都得到多次讨论推敲，我从中感悟颇多。导航系统的设计是一个比较典型的点，拿出来与大家分享讨论一下。
导航系统所遭遇的挑战
iphone Native App较常见的导航如下图所示：
手机屏幕底端：A、B、C、D四个tab组成该Native App的全局导航，这是我们经常见到的tab导航栏。
手机屏幕顶端：主要有四种形式。第①种形式是在该位置中心显示产品的logo；也可以将logo适当调整位置，将常用操作或快捷入口放在该位置的右侧。第②种形式是在该位置有两或三个tab选项。第③种形式是在该位置中间显示当前任务标题，在左右两侧放置导航控件或功能控件。第④种形式是在该位置放置搜索框。
与以上的Native App导航方式相比，Web App导航方式有着巨大的不同，如下图所示：
Safari浏览器的工具栏将一直占据着屏幕的底端位置，全局导航只能被动移动到屏幕的顶端位置。这是影响Web App导航设计的最重要因素。
如果产品的功能比较少，且没有特别要突出的功能的时候，可以设计成上图中第①种导航方式。此时存在的问题是如何表现出产品的品牌，毕竟在Safari浏览器登录某网站比运行一个Native App给人的品牌认同感弱很多。
如果将产品logo表现出来，且产品需要将用户常用功能突出（比如刷新功能或者发布入口），就需要设计成上图中的第②种导航方式。
如果在A功能板块下，还需要设置子类别选项，则导航栏中又多一组tab。此时的导航方式就如同上图中的第③种了。
当然，在执行某一项任务的时候，全局导航可以暂时“归隐”，只保留一行标题栏和左右两侧的导航控件或功能控件。如上图中第④种导航方式所示。 在该产品设计中，为方便用户在各功能板块之间快速省力地切换，设计师希望全局导航栏可以保持长久悬停，不要像一般wap网页似的让导航随网页滚动消失。这样的话，基于浏览器的Web App 导航系统便捷性就和Native App相媲美了。 然而，浏览器工具栏将全局导航逼到了屏幕的顶端，却又造成了导航头部过于沉重的问题。如下图所示：
如果将logo栏中的常用功能（例如刷新或发布入口）和全局导航都设计为悬浮停留的形式，内容区的信息展示空间就比Native App减少了一行的高度，如上图中的①。而且，某些页面需要在全局导航的下方出现二级导航；悬停不动的3行导航大大吞噬了屏幕本来就很宝贵的内容显示空间，如上图中的②。 让用户在如此狭小的空间不得不频繁滑动屏幕浏览信息，这样的体验太糟糕了。这个严重的问题很让设计师困扰，因此需要重新设计一下导航系统。设计过程主要包括：优秀竞品分析、方案遴选。 优秀竞品分析
首先，分析对比了三款优秀的Web App：Google+、FT Web App、Twitter的导航方式。浏览环境均为iphone Safari浏览器。
1.Google+
导航系统特点：
￭全局导航单独形成一个页面，其他页面不出现全局导航； ￭导航栏沿用了ios系统原生控件的形式：标题+导航或功能控件； ￭标题栏在页面中悬停不动 优点分析： 保证了每个信息浏览页面的导航栏简洁轻薄，尽量少的占用信息详情的显示空间；保证了其核心功能（此处是微博浏览功能）的良好使用体验。 缺点分析：
全局导航隐藏较深，降低了用户在不同功能板块快速切换的便利性；全局导航隐藏较深，用户看不到其它板块功能，大大降低了用户点击使用其他功能的可能性。
2.FT Web App
导航系统特点：
￭Safari浏览器URL一栏一直悬停存在，并将品牌文字FT Web App显示在顶端; ￭全局导航被隐藏起来，点击功能键后在页面顶端出现； ￭二级导航出现在页面顶端； ￭全局导航和二级导航由于新闻板块数量较多，都采取了单行空间不完全呈现的方式，可滑动选择其中某一项；
￭所有导航随页面滚动，不在屏幕中保持悬停； 优点分析：
FT Web App导航设计最大的优点就是繁重导航的轻量化处理。全局导航和二级导航中的新闻板块都非常多，若将这些板块都展示出来，恐怕要占用屏幕的一半显示空间。FT Web App于是将全局导航隐藏在一个功能键之后，二级导航也只给了一行的显示空间。 缺点分析：
展示给用户的导航只是其全部新闻板块的冰山一角，无法给予用户全部概况浏览的机会，也就无法很好的激励用户去尝试被隐藏的新闻版块；同时，用户寻找某一个新闻版块或者在页面底端回到页面顶端的操作成本略高。
3.Twitter
导航设计特点：
￭全局导航只有一行，品牌展示浓缩在主页图标中（Twitter小鸟图标）； ￭全局导航一直保持在屏幕顶端悬停不动，不随页面滚动而滚动； ￭二级导航在点击全局导航某tab后，以菜单列表形式出现。 优点分析：
在屏幕顶端悬停不动的全局导航，可以方便用户在不同的功能板块之间快捷切换，降低了用户的信息寻找成本；Twitter Web App的导航只有一行，为用户保证了尽量大的正文内容显示空间。 缺点分析：
一些常用的功能键被隐藏在二级导航中（比如新信息发布入口），一方面增大了用户的寻找成本，另一方面降低了这些常用功能对用户的激励使用效用。 基于对以上三款Web App产品导航系统的分析，设计师对目标项目的导航系统设计形成了以下框定：
￭全局导航方便用户快速寻找以及功能板块间的切换；
￭导航尽量轻薄化处理，尽量保证足够的正文内容区显示空间； ￭将用户经常使用的功能键呈现在前面。
方案遴选阶段
基于项目的实际需要以及对竞品分析的思考总结，设计师尝试了3款导航设计方案，并对每一款方案的优劣之处进行了详细分析。
导航设计方案一
设计说明：
￭ ABCD是产品的四个功能板块，组成全局导航。 ￭ 全局导航在屏幕顶端保持悬停不动。 ￭ E是新消息发布入口，属于用户常用功能。 ￭ E采用半透明显示方式。 ￭ E停留在屏幕的右下角 该方案的优点：
屏幕顶端只有全局导航一栏，导航的轻量化为正文内容区节省了尽量大的显示空间；全局导航悬停不动，可以便于用户快速切换到不同的功能板块。 该方案的缺点： 右下角的新信息发布入口致使浏览页面不够清爽，会对用户造成一定的视觉干扰；新信息发布入口没有必要在任何页面都显示，于是可寻性出现了危机；品牌logo无法显示，品牌感较弱。
导航设计方案二
设计说明：
￭ E是新消息发布入口，属于用户常用功能。 ￭ ABCD是产品的四个功能板块，组成全局导航。
￭ 屏幕顶端的两行导航栏在用户刚进入页面的时候出现，在用户滑动屏幕浏览信息的时候消失。
￭ 屏幕右下角半透明功能键在导航栏消失后出现，点击该键导航栏出现。 该方案的优点：
浏览信息的时候导航栏消失，为用户提供提供了最大的正文内容显示空间；可以显示logo，品牌感较强；新信息发布入口的可寻性较好。 该方案的缺点：
屏幕右下角半透明功能键致使浏览页面不够清爽，会对用户造成一定的视觉干扰。
导航设计方案三
设计说明：
￭ E是新消息发布入口，属于用户常用功能。 ￭ ABCD是产品的四个功能板块，组成全局导航。
￭ 屏幕顶端的两行导航栏在用户刚进入页面的时候出现，在用户滑动屏幕浏览信息的时候第一栏向上消失，第二栏上移至顶部保持悬停不动。 ￭ 手动下拉全局导航栏，可以下拉出第一栏导航。 该方案的优点：
浏览正文信息的时候，仅显示全局导航一栏，做到了导航的轻薄化；全局导航悬停不动，可以便于用户快速切换到不同的功能板块。 该方案的缺点：
下拉全局导航时，可能会有误操作的危险，虽然可能性很小。
综合以上的分析，考虑到正文内容区显示空间的大小、对产品的操作便利性以及产品品牌感三方面因素，最终决定将方案三作为导航设计的基本形式，并继续进行进一步丰富细化。
总结：
浏览器的工具栏一直占据着屏幕的底端位置，全局导航只能被动移动到屏幕的顶端位置。如何平衡操作的便捷性与正文信息显示空间最大化的关系，是Web App导航设计的关键所在。
最佳方案总是权衡的结果。每一款设计方案解决某些问题的同时也会产生新的问题。此时设计师需要知道哪些功能是最重要、优先级最高的，保证核心功能的良好用户体验是评判设计方案的重要准绳。
