Design for the Future
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

1.2 Metro风格的原则

如果对Metro风格应用于软件界面设计领域认真思考,我们首先需要确定这种新生事物的最主要的特点;其次,还需要明确应用于软件界面的Metro设计风格有怎样鲜明的特点区别于其他软件界面设计风格。这些特点都反映了Metro风格的设计原则。

1.2.1 Metro UI的特点

干净、轻量、开放、快速

Metro应用总是让人感觉非常快速,用户与应用之间的交互总是迅速得到响应;Metro应用关注主流程任务,界面绝大部分面积都用来显示主要信息,而与主流程无关的选项和设置则都隐藏或放置在角落;Metro应用较少使用生硬的分割,而更善于使用留白;Metro应用的界面往往鲜活而生动。示例如下图所示。

重内容,而非线框与修饰

线框与修饰并非不重要,甚至与内容同等重要,当内容杂乱无章到无法组织时,线框与修饰会成为救命稻草。然而线框可能被滥用,也可能在一块大画布中将相互关联的内容割裂开来。与使用线框与修饰的目标相同,Metro应用使用留白来组织内容。用户从内容本身受益,而不是装饰。Metro应用往往使不表示内容的视觉元素最小化,内容本身即为UI,内容本身即为控件,用户直接与内容进行交互。如下图所示。

优雅的文字

在Metro应用中,文字不仅是可读的,也是优美的,且具备特有的表现力和魅力。以Segoe字体为标志的字母文字不仅清晰直观,而且在加重、放大、缩小中提供一种不妥协的优雅体验,如下图所示。

有情感的动画

Metro应用通过高度响应的动画保持界面的鲜活,这些动画好像被赋予了情感。动画的作用还不止于此,它同时提供了用户交互上下文,提高了易用性。例如,点击一段邮件的话题,话题飞入下一个页面,帮助用户注意到新页面的全文是关于这个话题的。

可靠的信息

为内容而设计,简明直接,确保信息的可靠性,不误导用户。任何带有迷惑性的设计和引导,都是Metro所排斥的。

1.2.2 Metro UI的识别

Metro的简洁之美如此深入人心,人们看到一部设计作品往往就能通过直觉来识别它是否遵循Metro风格。微软Metro风格的应用和设计有五大鲜明的特点,可以用来鉴别该作品是否属于Metro风格。

鲜明的颜色

Metro风格往往使用对比度强烈的鲜艳饱和纯色块作为图标或文字的底色,也就是人们通常所说的“大色块”。这些底色一般不使用或少量使用色彩过渡,一般不使用或少量使用透明度,绝不使用3D或其他非平面化的视觉效果。

矩形Tile

Tile是Metro风格作品中最常见的视觉元素。一般为纯矩形,没有圆角和折边。Tile的内容可以是文字、图标或图片。Tile的大小并不单一,但在同一作品中Tile的尺寸一般是基准尺寸的倍数。在程序中Tile可以是活动的(Live Tile),通常是可点击的。

Segoe UI、微软等线和微软雅黑

Metro风格英文作品使用Segoe字体家族作为界面字体。字体本身是纯色填充,不使用或少量使用平面效果,绝不使用3D或其他非平面视觉效果。对于中文应用程序,微软为Windows Phone设计了微软等线字体,该字体在展示中文文字方面具有与Segoe UI相似的表现力;在Windows 8中,中文应用的默认字体为新雅黑。

整幅图片和纯色图标

Metro风格的作品经常使用大尺寸的图片甚至整幅图来充分发挥图片本身的表现力。图片本身是清晰的,图片所表达的内容通常是现代的。而Metro风格中的图标往往是纯色的,以纯白色为最多,图标使用简单的线条和填充抽象图标的功能。

留白而少线框

Metro风格的作品很少使用线条和线框分割画布中的区域和功能,着重提供用户沉浸式体验。在必要时,作品通常使用不同大小及权重的字体或留白来区分画布中的不同区域。

1.2.3 Metro哲学

作为一种界面展示技术,Metro和苹果、谷歌的设计的最大区别在于:后两者都是以应用为主要呈现对象;Metro界面强调的是信息本身,而不是冗余的界面元素。在视觉效果方面,这有助于形成一种身临其境的感觉。Metro有几种常用的手法来引起用户的反应:信息的重要程度往往通过文字的大小来表达;显示下一个界面的部分元素在功能上的作用主要是提示用户“这儿有更多信息”。

在时间碎片中找寻到更多的信息。这就是Metro UI为现代应用所定制的设计理念,也是Metro的哲学,夸张一点说,现在的社会连呼吸都要赶时间,很多用户没有过多的时间来用复杂的手势操控设备。在公交车上,我们可能利用从座位起身到在后门排队等待下车的这个很小的时间间隔,还想着要看一条微博。也许趁着在超市排队结账时,都要用微信摇一下周围的新朋友。Metro的种种设计原则和特点都是为了保证用户的快速操作和信息获取的准确性。