windows8 UI，Metro 设计风格浅析

微软称要通过Windows 8再造操作系统，嗯，今天的主角是 Windows 8

Windows 8 你一定接触过，无论是看过，还是安装过，无论你喜欢，还是不屑，都阻挡不了她的缓缓袭来。今天，我们来介绍一下windows8的精髓。

关键词“兼容PC与平板”“引入Metro UI”

Windows 8增加了对平板电脑的支持，同时引入Windows Phone中的Metro UI，在使用中我们发现，很多的交互是为了平板而设计。

设计灵感来源

三个重要影响

（1）现代设计 — 包豪斯（减少元素，以显现本质）

（2）国际主义平面设计风格 — 瑞士平面设计风格 （清晰，真实，美观）

（3）动态设计 — 电影艺术（动画“活”起来，激发用户情感）

生活中，人们行色匆匆，我们更需要提供快速，简洁，直接，明确的设计。

Windows 8的设计灵感来源于生活中的各类导航，地铁站，机场等。人们即使在急于奔波的时候，也能一眼在这些导航中获得他们要的信息。

Metro UI风格运用

Metro UI 是Windows 8 的设计主线，在对外发布的“开发者预览版”中，Metro UI已经运用到了“锁屏界面” “开始菜单”“IE”“RSS”“选择文件”等界面中。预计之后从Windows Store 中下载的应用均会使用Metro UI风格。

Metro Start

1992年Win95系统中第一次出现了start菜单，它的基本目的是取代程序管理器，用于启动计算机任务。之后经历了一系列的改进，但仍然存在各种缺陷。

Metro Start是屏幕是对Windows的start菜单、任务栏、通知和小工具改进的成果。这一次做出了如下尝试：

（1）最常使用区域扩大

（2）Metro Start支持自定义

（3）操作空间变大

Metro Start设计小结

Start已经不仅仅是一个菜单了，它占据了整个屏幕，取代了以前的桌面+开始菜单，承载了更多的功能。所有的程序都在这里，用户在这里直接启动程序。

同时它还有以下特点：

（1）动态信息：每个图块上的信息都是动态的，经过精心排版而被清晰呈现。显示的信息可以自定义，比如某个城市的天气预报或者某本杂志的内容。这样你可以在不启动应用的情况下获取一些关键信息。

（2）自定义：图块的位置可以随意拖动，可以将最常用的应用放在首屏。

（3）为触摸设计：每个图块的面积足够大，手指可以轻易的选中。每个图块是作为一个整体被点击，不会划分额外的点击区域。

（4）全局视图：在触摸板上，你可以将Start菜单像地图一样缩小放大，这有助于你快速选择应用。

（5）单击开启程序。

（6）图块有大小两种尺寸，可以自定义。选择哪种尺寸取决于应用是否有信息需要显示。小图块是不显示信息的。

搜索结果展现优化

Windows 7开始菜单中的搜索，用户最常搜索的文件类型是：程序，文档，控制面板，运行命令。

Windows 8 根据这些类型，提供了三种搜索结果常用文件类型分类：应用程序，设置和文件。

将搜索区域放在屏幕最右边，内容和结果放在最左边。符合用户从左至右，从上至下的阅读习惯。 设置和搜索界面不在妨碍用户浏览类容。 并且在触摸设备上更易于用户右手操作。

搜索设计小结

（1）将搜索结果按用户使用方式分类。

（2）按照符合人体工程学的方式设计界面（从左至右， 从上至下）

（3）沉寖式的搜索体验， 不用更换页面或弹出窗口， 一键更换搜素引擎和方式

（4）图标大小和距离分布按照Fitt’s Law优化

如何去设计一个metro风格的程序

Metro一个很重要的特点是沉浸式体验。每个应用的不再放在一个窗口里，没有了边框，而是铺满整个屏幕。

以下四张图展现了一个RSS阅读器逐渐从传统windows风格过渡到Metro风格的过程。

结合这个变化过程我们可以总结出一些metro风格的要点：

（1）以内容为主，方便阅读。在视觉中心呈现的都是内容，没有额外的干扰元素。

（2）去掉修饰，界面元素平板化，像素化。这种数字化的设计可以节省很大的存储空间。

（3）注重排版和布局。Metro对于应用排版有统一的标准。这一点在阅读类应用中尤其明显。

（4）内容平铺在全局视图里，通过滑动或者缩放，你能看到其他的内容。取消了tab这样的切换控件。

（5）操作被隐藏，在需要的时候从边缘呼出，微软称之为‘边缘交互’。手指从屏幕底部边缘滑入时会产生相应的交互动作：底部是操作菜单，右侧是一组固定的操作，左侧是应用切换。

Skydrive 云存储

在不同的设备上登陆同一账号，win8的云服务会自动更新用户的照片，邮件，日历，通讯录。Skydrive 通过浏览器或者metro风格的程序来获取最新的照片，文档等数据。

用户可以选择禁用所有同步，也可以按设置类型禁用同步。可以同步的数据有三类：

（1）windows设置；

（2）应用程序设置和数据；

（3）应用程序和网站的登录凭据。

Win8中的云服务保持了信息在线同步，使得用户在不同设备上的使用体验能够无缝连接。

协同工作：分享、搜索、选择器

在win8中，两个应用可以协同工作去完成一个任务。微软开发人员定义了三种最基础的、最常用的协同工作方式：分享、搜索、选择器。你可以随时从右侧呼出的操作栏上找到“分享”和“搜索”图标，非常容易调用。这使得信息分享变得更容易。通过右侧常用操作栏上的“分享”按钮，用户可以轻松的将当前应用的信息分享到其他程序中。

比如当你使用一个涂鸦应用完成一幅大作后，就可以通过“分享”按钮通过微博、邮件、flickr等渠道发送给其他人看到。

同样的，搜索时出了搜索本地内容之外，也可以直接搜索应用中的内容。在微博中发一张图片时。也可以直接从flickr相册中选取。

基础功能改进

任务管理器

Windows7任务管理器中的现状是：

（1）用户最常使用的功能是：“应用程序”和“进程”tab。用户最常的操作是“结束应用”和“结束进程”

这两个tab的使用频率大致相同，这表明在“应用程序”页面中，有一些重要的细节缺失，导致用户要到“进程”tab中去查找。

（2）用户主要想查看应用程序中，没有显示的后台或系统进程，并查看哪些进程占用了较多的CPU资源。

Windows8任务管理器针对如上现状进行了优化：

（1）为结束进程的操作优化，

去掉tab，进程间间距增大，将更多高级功能隐藏到“更多”中，视觉焦点更容易集中到“结束进程”上。

（2）突出信息可视化，用颜色等变化突出重要信息。

资源管理器设计小结

（1）简洁，简洁再简洁

（2）为用户最常用操作优化

（3）使用视觉设计突出重要信息

（4）按照用户习惯将信息分类

（5）为了让用户浏览更轻松优化

（6）在基础界面极简的同时增前高级功能

（7）被一个设计改动都建立在用户数据基础上

结语

Windows 8的设计，如所见的围绕着内容为主，去修饰平面化，沉浸，动态，边缘交互的风格来设计。

虽然在开发者预览版中，仅仅的对锁屏桌面，开始菜单，IE10，RSS，任务管理器，资源管理器等进行了大刀阔斧的改变。我们有理由相信，这些都仅仅是一个过渡，伴随着windows store的开放，Metro 设计风格的应用会排山倒海的袭来。我们也应该去思考如何结合新系统，新趋势做出我们自己的产品。