视觉＼交互和功能——以Metro风格设计分析互联网产品设计

视觉传达 l 1 1 3

视觉\交互和功能——

以Me t r o风格设计分析互联网产品设计AN AL YSI S OF I NTE RNE T PRODUCT DE SI GN B ASED ON ME T RO ST YL E DE SI GN

VI S UAL, I NTE R ACTI VE AND F UNCTI ON一一

北京林业大学李杰曼张继晓

摘

要：基于在互联网和多媒体背景下的设计依然要注重内容大于形式这个设计中永不变更的观点，文章结合整体布局设交互设计和制定性动画设计等设计的形式对 M e t r o j￣ l,格的设计特点进行了分析，指出了设计时所遵循的原则。并结合实际的一

些设计情境，说明了在进行多媒体信息设计的时候，应该如何根据设计方法进行实践。

关键词：视觉设计人机交互 M e t r o j￣ l,格多媒体信息设计

随着w e b 2 . 0￣ 1] H t ml 5时代的到来，互联网以及基于互联的各类应

比例能让用户很容易就辨识出内容的结构关系 (图2 )。

用接踵而来，几乎充满了我们生活的每一个缝隙。随着MA C O S系统结 M e t r o风格的另一个视觉特点就是统一使用剪影，并通过网格对齐合触控技术出色的将人和机器之间的互动调配到极佳的状态，互联网元素来达到布局的结构化和一致性：在顶部、左侧和底部边距利用负以及多媒体设计领域中，呼吁交互设计的声浪越来越高。在这一浪潮中，出现了许许多多优秀的设计， P a t h的时间流， P i n t e r e s t的瀑布流。本文选择微软在其最新的系统中提出的Me t r o设计风格，来分析设计是如何将视觉、交互和功能三者紧密结合起来。

空间形成“ c”形(图3 ),而另一边则是充盈的状态，暗示了用户可以平移的方向；标题都在相同的位置，这样在页面之间的快速切换不会造成视觉上的紊乱感，界面能一直保持平稳。 2 . 2从交互上谈 Me t r o设计理念谈及互联网应用的设计，基本上所有的人都会谈交互。交互不是那些炫动的视觉效果，不是苹果系统里各种特效收放图标。交互其实是一

1什么是 Me t r o风格和什么是 Me t r o风格的应用对于什么是 Me t r o设计风格，归结为一点即为在设计的过程中，始终需

要遵从内容重于形式这个原则。之所以这是设计的核心，还要回到

个框架，一种流程，是剥离掉美丽外套，那些基于人体工程学的逻辑。在 Me t r o B 9设计中，和体验相结合的交互设计体现：滑动是沿视图

体验的核心是什么的论题上。任何产品，特别是互联网产品，内容是体的长边平移的，并且只在一个轴上进行移动，使用户能接受到一个很稳验的核心，其他的一切都只是帮助用户能更好的使用内容的工具。工具定的系统环境的信息。 可以包括布局、命令和导航，这些是设计的形式。而所谓 I￣M e t r o风格对于基于手机、平板和 P C的应用设计，始终需要考虑的是怎么样可的应用就是针对所服务对象，以及提供服务的设备平台结合触控互动

以使用户通过最快捷的路径到达目标内容。特别是在这些界面空间有限的设计平台上，如何能表达出花样百出的功能通道却不影响简洁的界面需求，这也是交互设计师在进行工作时需要解决的问题。以Me t r o 为例，桌面上通过隐藏边缘来提供快速管理进程和各类入口，保持了主工作界面的清洁，这是一种按照需求度安排座位的方式，把用户当前所需展现，把用户可能需要的放在下层避免造成用户分心。 其次，如同最开始我们提出的， Me t r o风格的应用就是针对性定制化的应用。所以把隐藏边缘栏放在最底部的左端和右端，正是因为考

技术和整体Wi n d o w s的用户界面框架来量身设计出来的应用。它将软件和硬件特性完美结合，而不是将设计和机器分离开导致应用的“不接地气”。

2 Me t r o风格的设计理念2 _ 1从布局上谈 Me t r o l￣设计理念对于很多互联网应用和媒体应用，整体布局会直接影响用户的第

虑了Wi n 8的诞生是为了平板时代的到来，而根据人体工程学，当使用者手持设备时，底部的左端和右端是最容易触碰控制的区域。 最后由于数字产品和人的交互，目前最广泛的还是通过人手的动作结合触摸技术或者动态捕捉。所以在这些交互方式的设计上需要考虑到

印象。而布局的好坏则会决定用户在进入界面后的舒适感的强弱，进而导致是能拥有用户的逗留还是无奈愤概的“不玩了”。Me t r o风格的一

设计以简洁的版式为基础，将内容本身作为了组织和分

组排版的方式， 尽力的删除了多余的线条和框架。使用空白来建立开放性，给我们的视

操作对象目标的尺寸和间距需要适合触摸，并允许范围内的操作误差。 2 . 3从针对性的动画制作上谈Me t r o设计理念动画是Me t r o设计语言的又一点睛之处，而如同所有的设计细节

觉留出可以呼吸的空间，这样在使用我们所需的内容时候，能足够关注正确的内容 (图1 )。在内容的逻辑关系上，通过版式斜坡来表达内容的层次。而在规范化上，每个字体大小都设置为2 O像素的整数倍，而每个级别又都按照一

为遵循的一切为功能一样， me t r o的动画以功能场景为中心，每一个动画都是针对某个场景专门设计的，谨守设计需要传达信息的原则，帮助

定比例大于前面一个层级，如： 4 2 p t= 8 0像素； 2 0 p t= 4 0像素，这样的