响应到用户的响应式网页设计 - UXPA中国2015行业文集

响应到用户的响应式网页设计

戴丽霞

携程旅行网

摘要：响应式网页设计是时下非常热门的话题，本文先分享了项目过程中遇到的响应式的设计经验。然后回归以用户为中心的设计理念，提出响应到用户的设计，在其中介绍了基于情境的响应式概念模型以及未来的发展方向。

关键词：响应式网页设计，跨平台设计，跨设备设计，情境化设计，情境感知

1.响应式设计的背景

随着移动互联网的加速发展，移动端数据流量正逐日增加，同时用户访问网站的设备的类型也在不断增加，使用也由静坐屏幕前的简单场景变为移动的复杂场景。原有的仅为PC订制的网页已经不能支持移动设备的操作和移动场景的处理。需要根据不同设备环境自动相应和调整，响应式网页技术应运而生。

1.1响应式设计的概念

1.1.1广义的响应式网页设计

响应式网页设计主要关注在当用户使用产品时，设计会根据用户的上下文（context）提供理想的产品使用场景（scenario）【1】。

1.1.2狭义的响应式网页设计

一般特指的响应式网页设计（Responsive Website Design，RWD）最早是由Ethan Marcotte【2】提出. 指可以自动识别屏幕宽度、并做出相应调整的网页设计。

RWD是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动【3】。

RWD主要是通过流体网格布局（Fluid Grids），可调节的图片和媒体（Flexible image and media）以及媒介查询（Media Queries）技术实现。

1.2响应式设计的发展里程碑

1.2.1移动优先

移动优先【4】（Mobile First）策略是由Luke Wroblewski提出的，他强调在设计网站用户体验的时候需要提高移动使用的优先级：让网站可以被更多移动设备用户使用，设计师需要关心网站的核心内容和功能，并且利用移动设备的新技术优势等。

图1 移动优先vs桌面优先【5】

1.2.2优雅降级和渐进增强

优雅降级（Graceful Degradation）和渐进增强（Progressive Enhancement）都是关注于同一网站在不同设备不同浏览器下的表现程度，是从两个极端去做适配的策略。【6】

优雅降级指一开始就构建完整的功能站点，然后再针对低版本浏览器进行兼容。

渐进增强指创建一个基本框架的网站，然后再为移动设备和PC等不同设备提供增强功能，达到更好的用户体验。

从技术发展来看，渐进增强更加具有对未来的拓展性，因此它也成为了响应式设计的战略和设计基础。

图2优雅降级和渐进增强的区别【7】

图3响应式网页设计和其相关概念联系【8】

2.响应式网页设计的实践经验

随着Html5技术对各类标签和硬件的支持拓展，以及Media Queries的发展，RWD和其他跨设备响应技术有更多的发展空间，同时很多成熟框架的涌现使得开发和维护的成本减少，设计人员和开发人员也在尝试的过程中总结了非常宝贵的经验。本章将浅谈跨设备设计和RWD设计的策略以及分享项目实践中的注意事项。

2.1跨设备设计策略

首先要知道：不是所有的网站的响应化都是从零开始构建的，也非所有的网站都适用于全站的响应策略。我们常常会遇到的情况是：公司有一个已有的PC的网站，他们了解移动流量的重要性及响应的好处后，希望提供给用户移动界面友好的体验，至少用户可以从Pad设备正常访问网站。

响应式设计不是万能的，在享受其带来的好处同时必须考虑到潜在的风险。针对已有网站的情况去做跨设备优化，可以从:

a) 用户是谁

b) 什么设备

c) 产品基础

d) 资源限制

四个方向出发，通常有以下几种途径【9】：

2.1.1 独立的移动网站

这种方式比较适合对内容同步要求不高，或对非移动端使用的意图和场景非常了解，想要提供一种类似于App的体验的情况。

目前国内的一些超级网站如淘宝，京东，携程等。因为本身的系统非常复杂无法做到全站响应，并且他们更希望移动端的交互方式能和App统一。通常会采用这种独立建移动站点的方式，叫做m站，WAP或H5版本。移动网站会由专门的部门去维护。

这种做法的优势在于可以保留PC的设计，在移动设备上从头来过。保证响应的移动设备，分辨率以及使用产品的用户在一个可控范围，单独开发的移动站的成本也相对可以接受。但是，要考虑到之后桌面网站的内容整理更新和网站整体维护的成本可能很高。因为不同域名分开维护，很有可能出现坏链，错误的互链（移动端的链接跳转到网站上）或已过时未更新的内容。

2.1.2 自上而下的的响应式策略

如果网站已经使用了较先进的网站标准，可以利用已有代码，适应更多的设备分辨率。不过对于之前的编码基础要求很高，改进过的原分辨率的代码也需要重新测试，开发成本取决于已有代码的质量，在选择这种方式前需要仔细评估自己的代码基础。

2.1.3移动优先，重新建立响应式网页设计

重新建立的网站会有一个全新的、渐进增强的代码基础，并且会得到响应式设计的所有好处：无缝一致的体验、适应全屏幕、拥抱未来、低廉的维护成本和统一的SEO等。但风险也是需要知道的：在开动前，筹划、原型交互、开发和测试的精力比所预想的开发一个普通桌面网站多得多。在开动前需充分平衡这样的优势和风险。

2.1.4使用插件或专注于此方面的产品／机构

有些插件或服务可以解决跨平台使用中的严重的可用性问题，给出折衷的解决方案，并且价格相对合理。这些方案可能在灵活性上以及各平台的表现上没那么出色，但可以作为预算不足或全站响应过渡的测试或临时方案。

同响应式的理念一样，没有绝对好或不好的策略，只有最适合策略，根据产品的情况和公司的资源预算选择最合适的策略。

2.3响应式网站布局的介绍

传统网页设计通常使用的是静止的元素尺寸的布局，而做响应式设计遇到的最明显的响应是对不同屏幕的支持。现有响应式布局大多采用的是一种“流式网格”布局和百分比思想。以下介绍几种框架和布局思想：

2.3.1 Bootstrap

Bootstrap【10】框架是现阶段最受欢迎的适应多种设备的开源响应式前端框架，Bootstrap最早起源于Twitter的一个内部解决响应和网页一致性的工具Twitter Blueprint，在其发展中，对移动设备的支持从关键部分的友好样式升级到直接将移动优先的设备样式直接融合进了框架内核。

Bootstrap的流式栅格系统是响应式移动设备优先的。它是指通过一系列的行（row）和列（column）组合来创建页面布局，内容可以放入这些已创建好的布局中。设计师不需要以传统排版的像素思想标记尺寸，而是以比例和模块组合的“响应式”思想去布局。除了Bootstrap，也有其他类似的框架模板或插件，对网页个性化配置要求不是过高的可以使用这类产品。

2.3.2 Material Design Z轴，比例框架和渐进框架

Material Design 提出了Z轴位置（z position）【11】的概念，如果说传统的网页设计主要集中在长宽（x，y position）的二维平面，Material Design则是将物理世界的纵深叠加引入了屏幕之中，页面元素因为不在同一个平面空间，可以不受屏幕挤压做自由的响应。

图4 Material Design Z 轴布局示意：每个模块都有相应Z轴浮动区间，可以相互配合又互不影响【12】

关于布局，Material Design建议采用固定比例的比例框架和模块化度量的渐进框架来避免由于屏幕的不可控带来的布局影响。

2.3.3 Microsoft的通用平台应用

Microsoft Design 也致力于通用Windows平台应用（Universal Windows Platform, UWP）【13】的研究。在设计文档中提出了一些可行的响应式布局技术，包括：

a) 重新排列

b) 改变大小

c) 改变显示流网站维护中页面设计，比如单行变多行等

d) 显示／隐藏元素

e) 改变方向

f) 改变信息结构

2.4输入，输出和姿势

2.4.1输入

Google 在介绍Material Design的时候将输入设备的支持列入了其目标中“尽管移动优先的观念是基础，但是触摸，声音，鼠标和键盘都是重要级最高的输入方式。”一个常见的误区是，我们在做跨设备的响应式设计时往往会简单的将输入输出方式和设备类型以及设备分辨率直接联系。认为桌面设备只支持键鼠，指针支持hover方式。或者没有考虑到移动设备键盘呼出等交互。

拿指针（pointer）和悬停（hover）行为来举例，“pointer”这个特征具有none／coarse 和fine的值【12】。分别指的是设备是否有输入机制，输入方式是否是精确的。“hover”常用在网页的展示补充信息中，但在移动设备上因为缺乏悬停的特征以致补充信息被变向禁用，或需要将hover的值定义为on－demand以长按方式代替悬停。设计时尽量不要把重要信息放在hover里，或者使用其他信息提醒方式。

图5 W3C Media Queries 4对指针和悬停的设备支持列表【14】

键盘的优化处理

a) 合适的输入类型

图6 iOS支持的不同类型的键盘输入方式。其他设备或操作系统也由类似的订制键盘【15】

移动设备的键盘会根据不同的输入属性，提供相应的输入类型键盘。同时，在移动设备上的键盘操作体验因为空间的受限容易造成误操作，在做表单填写的时候可以使用类似标签 在移动设备上调用合适的键盘。

b)适当禁用和隐藏键盘

在移动设备使用过程中，因为虚拟键盘的原因，会导致输入项被键盘遮挡。并且在使用移动设备时，我们鼓励选择优于输入，下面提出一个笔者的实际项目中的键盘解决方案：

图7 对Pad设备上首页搜索框和日历交互键盘遮挡做的优化，其中考虑到手动呼出／隐藏键盘及日历控件禁用键盘

2.4.2输出

响应式网页设计通常因为采用流体布局，由于移动设备的滚动成本较低，设计时通常会忽略高度，以屏幕的宽度作为响应式设计的断点设计网站维护中页面设计，的而随着宽屏设备的新增，同时网页设计需要考虑到浏览器的头部和设备头部高度，往往页面上最重要信息不能在首屏需要考虑到屏幕的高度。尤其是在营销页的设计中，首屏信息非常重要，屏幕的高度和宽度要同时考虑。

在写响应式样式表时，我们大多会用主流分辨率下的设备作为断点。因而容易产生“只要将几个特定尺寸的样式定义清楚，而不用去太在意其过度分辨率的样式”的处理方法。但事实上，随着设备多样性的增加，尤其是越来越大的手机屏幕普及和越来越模糊的手机和平板的界定，在做内容极限处理时需要考虑其过渡形式。

另外，在新的Media Queries Level 4的文档中，新增了对光线传感器light－level的支持，屏幕可以环境灯光的变化调整到夜间模式。

图8 夜间模式切换【16】

2.4.3姿势

姿势（Posture）是人体整体在空间所呈现的形态，立姿，坐姿卧姿等连接输入和输出的人体工程姿态也是在设计时需要考虑的。

屏幕除了像素尺寸，还有像素密度和物理尺寸。比如，在某个像素范围内，iPad 和电视和Pad的分辨率是类似的，用户使用Pad的距离是一臂之内，使用单手或双手操作屏幕。但使用电视的姿势往往是在几米甚至有投影的情况下数十米，屏幕上过小的控件和文本内容就很难被用户使用。简单的通过分辨率将Pad和电视作为相同的对象处理，会让用户在不合适的工程姿态下完成任务的体验很糟。

图9使用不同设备的姿势【17】

2.5响应式图片的处理

图片是网站最的重要媒体之一，响应式技术的发展中，对于图片的压缩及加载功能，部分图片，尤其是icon的使用也从传统的位图变成了SVG的矢量格式。

这里介绍一些新颖的响应式图片的解决的方法。下面这个例子不只是不同分辨率下的Home图标大小变化，同时其形态的复杂程度的变化暗喻了用户在不同设备或分辨率下使用产品的功能完善程度。

图10不同分辨率下图标的响应处理【18】

图11 一种品牌商标的响应处理 【19】

3.响应到用户的响应式网站设计

虽然在做RWD设计的时候结合考虑到了用户的使用场景，但主体的思想还是受限于布局上的响应以及功能和媒体的删减，使得一个网站适用于多种设备或浏览器。随着用户体验设计受技术的限制越来越小，我们应该回归到用户体验本身去理解响应式设计。

3.1 非布局的响应式设计和跨平台设计

通常我们指的狭义的响应简单理解是一个网站响应所有的设备和屏幕，主要利用的是屏幕的适应以及设备属性得到在不同显示屏上的统一一致的体验，是一种一对多的跨平台设计策略。但如果我们把设备之间的相互作用看成一个新维度的响应，产品与设备之间是一种多对多的映射，设备之间组成的产品生态构成完整的体验。

以下有一些跨平台响应设计的模式供参考，自左向右分别是 ：

a) 一致的内容体验

b) 设备间的信息及内容同步