快速响应设计的要点解析

　　快速响应设计（Responsive Design）是一种设计术语，应用于那些需要适应不同大小屏幕的网页（或者应用程序）设计中。在不同的设备使用网页的过程中，它能够确保在一个设备上的用户体验在其他设备上也能得到保证。具体的来说，就是图形界面设计时要考虑到不同的屏幕尺寸和显示方式，以及使用的方法。

响应式交互设计的原则

　　交互设计是对应用中用户可能的交互行为和相应的系统反馈进行设计。交互设计要满足典型的用户，而不是“极端用户”。以下原则包括：

　　1. 以用户为中心

　　交互设计首先要做的是简化用户的任务，而不是强迫用户完成复杂的步骤。简单的一个例子是，鼠标操作尝试只要求一次点击。用户不仅仅是操作者，还是“将持续的影响施加于系统”的任务执行者。一个好的设计应该是对这种影响的合理反应，并且可以给用户确定性和反馈。

　　2. 设计要满足的功能

　　• 帮助用户认识系统的不同状态

　　• 提醒用户已经完成了任务

　　• 提供撤销错误的机会

　　• 在必要的时候给用户以适当的等待提示

　　3. 设计要可察觉的

　　• 增加文字和视觉的提示来帮助用户理解界面和操作

　　4. 要一致

　　不仅要让所有的操作看起来一样，一致的外观和名称也应该有一致的内核。这意味着在操作后要有一致的状态，需要保持一致，所有的操作都应该产生结果。元素之间的一致性意味着一致的状态要有一致的反应，保证给用户的反馈要一致，同时不同状态下的视觉元素应当是连续的、一致的。

　　5. 给用户以直接的反馈

　　等待时间要尽可能短。要记住重要的一点，如果用户要等待一分钟以上，一定要显示进度指示器。如果要求用户等待上十几秒，可以通过移动光标来响应用户操作。

响应式的三种布局

　　布局是网页设计中一个非常重要的概念，它是你设计的基础。在响应式交互设计中，有三种布局方式：弹性网格布局、弹性图片以及媒体查询。

　　1. 弹性网格布局（fluid grids）

　　是利用百分比来确定页面布局的各个元素的相对宽度，从而实现布局的灵活性和响应性。当你的浏览器窗口或者屏幕改变大小时，百分比会使你的内容保持合理的比例。在这里解释一下概念。像素是呈现图像的一个点。在网页设计过程中也经常用像素来设置布局宽度和高度。不过像素是固定的，在不同设备上显示比例可能会不同。相对长度单位基于一个参考长度，百分比就是其中一种。相对于像素这样的绝对单位，百分比虽然会随着屏幕的变大而变长变宽，但是内容在视觉上的比例仍然是适当的。

　　2. 弹性图片（fluid images）

　　和弹性布局的原理一样，是用百分比控制图片的宽高。当我们使用图片作为背景或者嵌入的时候，我们可以将它们设置为相对大小（以百分比或者em为单位），这样就能自动缩放来适应不同的设备。

　　3. 媒体查询（media queries）

　　是已经包含在CSS3中的一部分代码，通过不同的屏幕和设备特性应用不同的CSS样式规则。这让我们有能力能够更加精确地控制布局。这意味着我们根据不同的屏幕尺寸、分辨率或者设备方向改变元素的css属性。我们可以从所有媒体开始，逐渐缩小至特定的媒体，比如手机、平板、笔记本或电视。以这样的顺序使用媒体查询，让整体风格在一个较宽的范围内初始化并适应，然后增加更多细节以支持更大的屏幕或者特定的设备。

响应式交互设计的六个构成

　　1. 整体与分型

　　交互设计要先从整体到分型的设计，也就是从全部框架到各个部分的顺序。从用户与系统的整体交互过程出发，然后再细化用户在每个局部所需要的操作，做到这种程度了才算是合理。从设计的产品来说，交互设计把产品看作是一个用户与产品服务的载体之间交互作用的有机体；从用户的使用来说，是把整个产品作为一个大环境，而用户要做的每一步操作只相当于这个大环境中的一个小环节。这样，评价一个产品交互设计的好坏可以归结为各个局部环节的交互设计是否恰到好处地构成了一个完整合理并且令人舒适的交互环境。

　　2. 设计与用户模型

　　了解你的用户是设计开始的第一步。我们必须明白不同用户有不同的特点，比如年龄、文化背景或者生理因素等。我们应该将这些因素综合起来，建立一个用户模型（User Model），这个模型并不需要完美精确，但它应该包括用户最主要的特征以及内在需求，设计的时候用来参考。

　　3. 设计形式与内容

　　设计的结构框架也十分重要，好的交互设计不能缺乏清晰合理的结构。设计漂亮的界面固然重要，但是明确的导航流程也直接影响用户体验。你设计的每一个链接、按钮甚至交互元素的设计目的和根本任务就是简化用户任务。所以，主要内容是什么，以及它们之间的关系如何，都应该在你的设计中被合理地表达出来。

　　4. 互动与反馈

　　简单的说，就是很多时候系统需要等待，比如处理数据或者加载页面，尽管我们可以通过设计手段减少这种等待，但是我们仍然不能消除等待。一个好的解决方法就是给用户明确的等待提示，例如加载进度条等。这样用户在这个过程中就不必无所事事，并且知道系统正在进行工作，从而形成良好的交互体验。

　　5. 用户测试

　　所谓测试，并非用户测试做好了，设计就能直接开发，而是在设计过程中频繁地多方面地进行测试，而且设计的目标也是在测试中一步步清晰并形成。几乎可以这样说，设计是靠测试来完成的，而不是说测试是设计完成最后的一个步骤。只有通过用户测试，我们才能真正知道这个设计是否真的简单、好用，并能正确地指引用户完成任务。

　　6. 可用性和可访问性（Usability and Accessibility）

　　可用性是交互设计最重要的要素，要保证系统的高效率和效果以及用户的满意度。可访问性是一个交互式系统能够被所有用户访问的方式，包括那些残疾用户的访问。一个好的设计要尽可能满足所有用户。在我们国家越来越关注老龄化的今天，这两者在未来的交互设计中将会越来越被倚重。

　　岛津宏幸曾经说：“一个好的交互设计应该从一开始就将重点放在用户体验上”。这句话为我们指明了努力的方向。