响应式设计

在设计中常常遇到这几个问题：

1.想要网站兼容手机、平板电脑、pc，就得为不一样的设备定制不一样的版本。

2.想要网站的某些页面在宽屏显示器下一行显示更多的内容，又得为宽屏定制一个版本。

3.不少人并非在全屏的状况下浏览咱们的页面，若是让页面随着浏览器宽度改变而相应的调整会不会比较好？

有没有办法能有效解决这些问题呢？

响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境（屏幕尺寸、屏幕定向、系统平台等）以及用户行为（改变窗口大小等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。不管用户正在使用pc、平板电脑，或者手机，不管是全屏显示仍是非全屏的状况，不管屏幕是横向仍是竖向，页面都应该可以自动切换分辨率、图片尺寸及相关脚本功能等，以适应不一样设备。

 

响应式web设计对交互设计和前端实现提出了更高的要求，须要考虑清楚不一样分辨率下页面的布局变化、内容的缩放等。

响应式Web设计的优点：

• 开发、维护、运营成本优点：页面只有一个，只是针对不一样的分辨率、不一样的设备环境进行了一些不一样的设计，因此在开发、维护和运营上，相对多个版本，能节约成本。
• 兼容性优点：移动设备新的尺寸层出不穷，定制的版本一般只适用于某些规格的设备，若是新的设备分辨率变化较大，则每每不能兼容，而开发新的版本须要时间，这段时间内的访问就是个问题，可是响应式Web设计能够提早预防这个问题。
• 操做灵活：响应式设计是针对页面的，能够只对必要的页面进行改动，其余页面不受影响。

实例展现

查看线上demo

当浏览器宽度变小时，左右两栏的宽度都有缩小，左边的banner图片和视频也相应缩小，右边的头像列表由一排4个变为一排两个。

当浏览器宽度进一步变小后，页面由两栏结构变为一栏结构，部份内容的尺寸进一步缩小，搜索区域也从导航里挪到了导航外。

响应式页面的设计流程

第一步：肯定须要兼容的设备类型、屏幕尺寸

经过用户研究，了解用户使用的设备分布状况，肯定须要兼容的设备类型、屏幕尺寸。

设备类型：包括移动设备（手机、平板）和pc。对于移动设备，设计和实现的时候注意增长手势的功能。

屏幕尺寸：包括各类手机屏幕的尺寸（包括横向和竖向）、各类平板的尺寸（包括横向和竖向）、普通电脑屏幕和宽屏。

须要考虑的问题：

• 某个页面进行响应式设计时其适用的尺寸范围是哪些？好比，1688搜索结果页面，跨度能够从手机到宽屏，而1688首页，因为结构过于复杂，想直接迁移到手机上，不太现实，不如直接设计一个手机版的首页。
• 结合用户需求和实现成本，对适用的尺寸进行取舍。好比一些功能操做的页面，用户通常没有在移动端进行操做的需求，没有必要进行响应式设计。

第二步：制做线框原型

针对肯定下来的几个尺寸分别制做不一样的线框原型，须要考虑清楚不一样尺寸下，页面的布局如何变化，内容尺寸如何缩放，功能、内容的删减，甚至针对特殊的环境做特殊化的设计等。这个过程须要设计师和前端开发人员保持密切的沟通。

图片来源

第三步：测试线框原型

将图片导入到相应的设备进行一些简单的测试，可帮助咱们尽早发现可访问性、可读性等方面存在的问题。

第四步：视觉设计

注意，移动设备的屏幕像素密度与传统电脑屏幕不同，在设计的时候须要保证内容文字的可读性、控件可点击区域的面积等。

第五步：前端实现

与传统的web开发相比，响应式设计的页面因为页面布局、内容尺寸发生了变化，因此最终的产出更有可能与设计稿出入较大，须要前端开发人员和设计师多沟通。

经过CSS3 Media Query实现响应式Web设计

一个国外的响应式web设计介绍网站