视觉、交互和功能

开篇：润墨网以专业的文秘视角，为您筛选了一篇视觉、交互和功能范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘 要： 基于在互联网和多媒体背景下的设计依然要注重内容大于形式这个设计中永不变更的观点，文章结合整体布局设计、交互设计和制定性动画设计等设计的形式对Metro风格的设计特点进行了分析，指出了设计时所遵循的原则。并结合实际的一些设计情境，说明了在进行多媒体信息设计的时候，应该如何根据设计方法进行实践。

关 键 词：视觉设计 人机交互 Metro风格 多媒体信息设计

随着web2.0和Html 5时代的到来，互联网以及基于互联的各类应用接踵而来，几乎充满了我们生活的每一个缝隙。随着MAC OS系统结合触控技术出色的将人和机器之间的互动调配到极佳的状态，互联网以及多媒体设计领域中，呼吁交互设计的声浪越来越高。在这一浪潮中，出现了许许多多优秀的设计，Path的时间流，Pinterest的瀑布流。本文选择微软在其最新的系统中提出的Metro设计风格，来分析设计是如何将视觉、交互和功能三者紧密结合起来。

1 什么是Metro风格和什么是Metro风格的应用

对于什么是Metro设计风格，归结为一点即为在设计的过程中，始终需要遵从内容重于形式这个原则。之所以这是设计的核心，还要回到体验的核心是什么的论题上。任何产品，特别是互联网产品，内容是体验的核心，其他的一切都只是帮助用户能更好的使用内容的工具。工具可以包括布局、命令和导航，这些是设计的形式。而所谓的Metro风格的应用就是针对所服务对象，以及提供服务的设备平台结合触控互动技术和整体Windows的用户界面框架来量身设计出来的应用。它将软件和硬件特性完美结合，而不是将设计和机器分离开导致应用的“不接地气”。

2 Metro风格的设计理念

2.1 从布局上谈metro的设计理念

对于很多互联网应用和媒体应用，整体布局会直接影响用户的第一印象。而布局的好坏则会决定用户在进入界面后的舒适感的强弱，进而导致是能拥有用户的逗留还是无奈愤概的“不玩了”。Metro风格的设计以简洁的版式为基础，将内容本身作为了组织和分组排版的方式，尽力的删除了多余的线条和框架。使用空白来建立开放性，给我们的视觉留出可以呼吸的空间，这样在使用我们所需的内容时候，能足够关注正确的内容（图1）。

在内容的逻辑关系上，通过版式斜坡来表达内容的层次。而在规范化上，每个字体大小都设置为20像素的整数倍，而每个级别又都按照一定比例大于前面一个层级，如：42pt=80像素；20pt=40像素，这样的比例能让用户很容易就辨识出内容的结构关系（图2）。

Metro风格的另一个视觉特点就是统一使用剪影，并通过网格对齐元素来达到布局的结构化和一致性：在顶部、左侧和底部边距利用负空间形成“C”形（图3），而另一边则是充盈的状态，暗示了用户可以平移的方向；标题都在相同的位置，这样在页面之间的快速切换不会造成视觉上的紊乱感，界面能一直保持平稳。

2.2 从交互上谈metro设计理念

谈及互联网应用的设计，基本上所有的人都会谈交互。交互不是那些炫动的视觉效果，不是苹果系统里各种特效收放图标。交互其实是一个框架，一种流程，是剥离掉美丽外套，那些基于人体工程学的逻辑。

在Metro的设计中，和体验相结合的交互设计体现：滑动是沿视图的长边平移的，并且只在一个轴上进行移动，使用户能接受到一个很稳定的系统环境的信息。

对于基于手机、平板和PC的应用设计，始终需要考虑的是怎么样可以使用户通过最快捷的路径到达目标内容。特别是在这些界面空间有限的设计平台上，如何能表达出花样百出的功能通道却不影响简洁的界面需求，这也是交互设计师在进行工作时需要解决的问题。以Metro为例，桌面上通过隐藏边缘来提供快速管理进程和各类入口，保持了主工作界面的清洁，这是一种按照需求度安排座位的方式，把用户当前所需展现，把用户可能需要的放在下层避免造成用户分心。

其次，如同最开始我们提出的，Metro风格的应用就是针对性定制化的应用。所以把隐藏边缘栏放在最底部的左端和右端，正是因为考虑了Win8的诞生是为了平板时代的到来，而根据人体工程学，当使用者手持设备时，底部的左端和右端是最容易触碰控制的区域。

最后由于数字产品和人的交互，目前最广泛的还是通过人手的动作结合触摸技术或者动态捕捉。所以在这些交互方式的设计上需要考虑到操作对象目标的尺寸和间距需要适合触摸，并允许范围内的操作误差。

2.3 从针对性的动画制作上谈metro设计理念

动画是Metro设计语言的又一点睛之处，而如同所有的设计细节为遵循的一切为功能一样，metro的动画以功能场景为中心，每一个动画都是针对某个场景专门设计的，谨守设计需要传达信息的原则，帮助用户直观的了解正在或者将要发生的动作和事件。这是有效设计的理念：设计的存在背后一定有所意图，即便动画也如此，它是信息发出者，而不只是视觉装饰。

同时Metro的所有动画设计集成了一个动画库，当所有的设计都利用标准库中的动画，让用户遇到在不同的时间不同的环境中遇到都能感到熟悉和信任。

3 如何进行Metro风格的设计—互联网产品的设计方法

3.1决定你的用户体验目标

比如你想做一个相机的应用。首先需要思考的是用户在什么情景下会需要拍照，并且思考拍照之后的一系列相关动作，比如处理，分享，保存，以及用户希望有怎样的使用体验。这些动作和体验需求下隐藏的原因和心理就是产品设计存在的意义。也是新产品设计之初的灵感来源。在众多的使用情景和拓展功能中，找出最本质的需求，然后将需求转化为产品功能。后续的所有设计，从视觉到交互都围绕这个功能，目的在于让用户更容易理解功能逻辑，更明白怎么和这个他们需要的功能产品“对话”。

3.2决定产品设计的交互逻辑

用户为了达到他们的目标而与设计的产品产生的一整套相关交互，这一系列的动作对应着的是一个流程。每个流程都应该与功能内容紧密相关，并帮助用户到达设计之初，设计师所构想的蓝图场景。交互设计的目的是简化用户达到目标前需要的动作步骤并降低学习成本。

比如你想做一个基于话题的社交类产品，首先你需要概述一下在使用功能的过程中，先做什么事情，然后会出现哪些情景分类。对于话题类产品，我们可以列出关键流程：发表话题；参与别人的话题；邀请朋友参加自己的话题；修改话题内容和评论；分享求扩散。在逻辑上，这些流程有可以分为两条线：一是为浏览而发生的动作，而是为发言而发生的动作。

3.3通过视觉来展现产品

一般到这时候，设计师已经知道了产品的功能和用户使用功能时的实现流程。此时，设计师需要通过视觉表达，将产品结构和内容展现出来。视觉依然需要紧密的贴合内容，视觉设计是传达信息最直观的方法，绝不仅仅是为了美观而存在。

视觉设计之初，需要明确的是创造哪些界面，并为每个视图的界面上表达功能和内容所必不可少的元素规划布局。具体的说，就是需要在根据前面的设计阶段中所得出的流程步骤来列出产品需要设计的指令，并弄清楚指令应该出现在产品的那些地方。

另外在视觉上，需要通过有效的排版，将内容结构传达给用户。结构可能是层级的结构，也可能是群组类型的结构。视觉的作用是对用户的潜在引导作用，让用户明白下一步应该去哪，产品的核心内容和功能在哪。

对于设计师来说，通过明确产品的目的，完善产品的交互逻辑并通过视觉将内容表达出来三部分工作之后，产品设计的雏形基本就完成了。

4 总结

互联网产品体验是第一位，好的功能需要良好的用户体验来支撑。而在用户体验中，易用性和信赖感是最基础的。而易用性和信赖感的基础又是需要以内容为重，以功能为重。在所有的设计中，应该遵循：所有的设计的存在都应该有所意图，需要起到传递信息，帮助用户更好的理解产品的功能和交互。而这些都是有方可循，只要设计师在做设计时，能首先做到自己充分了解产品，从用户的视角来看产品逻辑，并结合视觉传达，和必要的人机工程学知识，就能让功能繁杂的互联网产品在使用起来得心应手。

参考文献

[1] Win8 Guider 设计指南

[2] Alan Cooper. 交互设计之路-让高科技产品回归人性[M]. Chris Ding. 电子工业出版社2006.

[3] James Kalback. Web导航设计[M]. 李曦琳. 电子工业出版社 2009.