关于响应式开发的设计规范

◆  ◆  ◆

一、响应式开发知识要点

本段内容由艾艺前端技术部Jay给大家分享：

现在都流行说做响应式开发，然而什么是响应式开发呢？
专业术语－响应式

简单来说，就是页面应该有能力去自动响应用户的设备环境。

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

当客户提出需求的时候，用最简洁易懂的语言告诉你的客户，我们做的网页能够智能适配各种现代终端设备。

说到各种现代终端设备，就要说一下移动端开发和响应式设计的区别。

正常的来说明：移动端是可以是针对某个设备的固定尺寸去制作的页面设计，也可以是应用响应式布局去兼容各个移动终端。

洋气的说法：移动端是新时代的产物。是响应式的网页适应了移动端的时代。

那有了响应式是不是还需要移动端开发呢？当然需要！

这个要看客户需求去合理制定解决方案，理由如下：

优化工作效率

尽可能深挖客户需求

利用设计工具的插件

自动化开发

在这里补充一个知识点：
H5是什么？

HTML5，就是HTML语言第五代。

HTML5的设计目的是为了在移动设备上支持多媒体，可以真正改变用户与文档的交互方式。（也不仅仅只等价于那种一张张滑动的宣传页。）

那么做H5、做移动端设计、做响应式设计需要注意什么呢？

1.升级设计工具

2.升级开发工具

3.浏览器

主要说一下浏览器的问题：One more browser

国产浏览器注意事项

常见的国产浏览器有 360，QQ，UC，百度，搜狗，猎豹，2345，遨游，115...等无数浏览器，它们的内核全都是 webkit（就是chrome的那个）。外加最多就是调用系统的IE内核。

国产浏览器的兼容请写清楚，针对性地去研究，因为实在太多。

另外要根据浏览器确定设计的框架尺寸

然而知道了适配尺寸之后事情并没有结束，WEB版设计区域、竖屏的UI布局、横屏的UI布局：

然后，还有很多然后……请听下设计师们的分享……

◆  ◆  ◆

二、栅格知识要点

页面宽度明明可以使用1200px的整数，但为什么会出现1180、1160、1140、1120这些不凑整的宽度呢？

关于这个部分的知识点由艾艺创意设计部L.K.emon为大家解答：

首先来理解一下栅格的概念：
栅格

栅格结构是最简单最直接的空间数据结构，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

那么如何设计一个栅格系统？

在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：

W =（a×n）+（n-1）i

由于a+i=A，

可得：(A×n) – i = W

实例如图：

300+300+300+300

= 1200px（开发实际宽度）

280+20+280+20+280+20+280

= 1180px（PSD设计稿）

回答最初的疑问，因为在开发的过程中存在margin与padding的两个概念

Margin：外边距

Padding：内边距

margin：10px； （i=20px）

再看图来理解一下：

所以我们不能依赖『水平居中分布』自动排列工具

栅格化并不是一个新的概念，大家关注的点往往是他表面的950、960和1190。

左边的三个数据的核心是一个24等分的栅格系统。可以被轻松的2 等分、3等分、4等分、6等分、8等分、12等分。

270+20+270+20+270+20+270

= 1140px （i=20）

275+20+275+20+275+20+275

= 1160px（i=20）

天猫：margin-right:8px；

294+8+294+8+294+8+294+8

= 1208-8

= 1200px（i=8）

市面上各种网站的网页宽度

1180宽度的网站有：UI中国、UELike等

1180宽度支持1栏2栏3栏4栏5栏6栏8栏10栏等分时保持20px间距能够被整除

设计稿参考线设置：左起370px、1550px

了解完以上栅格构成知识，那么再来认识一下什么是响应式栅格系统。

即960、970、1140、1180、1280、1920宽度的8列、12列、16列、24列栅格系统

装订线通常为i=20px

Photoshop   视图>新建参考线版面

推荐尺寸（外国一些网站一般采用12栅格系统）：

如果width = 1180，i=20，则 每列n=80

如图：

响应式开发过程中设计师提交给程序员的参数并不是绝对像素，程序员需要得到的信息是比例关系。

@media max-width：320px

@media max-width：480px

@media max-width：768px

@media max-width：1024px

@media max-width：1440px、1366px

100% / 12列 = 8.3333333%

.col-xs-12 {width: 100%}

.col-xs-11 {width: 91.66666667%}

.col-xs-10 {width: 83.33333333%}

.col-xs-9 {width: 75%}

.col-xs-8 {width: 66.66666667%}

.col-xs-7 {width: 58.33333333%}

.col-xs-6 {width: 50%}

.col-xs-5 {width: 41.66666667%}

.col-xs-4 {width: 33.33333333%}

.col-xs-3 {width: 25%}

.col-xs-2 {width: 16.66666667%}

.col-xs-1 {width: 8.33333333%}

响应式设计稿

以iPhone 5s为例，屏幕的分辨率是640x1136，倍率是2。

浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。

所以在制作页面时，只需要按照基准倍率来就行了。

无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。

只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩 成1倍大小显示，才能保证清晰。

iPhone5/5s的屏幕。倍率为2，逻辑像素320x568 （144dpi）

iPhone 6的屏幕。倍率为2，逻辑像素375x667 （144dpi）

◆  ◆  ◆

三、Bootstrap设计布局规范

关于响应式、栅格，接下来就是设计布局规范了，这个部分的内容由艾艺网页设计部小5为大家分享：

1. Bootstrap响应式开发（http://www.bootcss.com/）我们公司最常用的框架，Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin（用来和栅格变量一同使用，为每个列column生成语义化的 CSS 代码）用于生成更具语义的布局。

2. 主页面基本层次范例，大屏（适配pc端和pad）和小屏（适配手机）

左边为框架示意，中间为大屏布局，右边为小屏布局线框。

3.  栅格系统规则（基本知识在上文）

栅格系统是基于行（row）和列（column）的组合来创建页面布局的，bootstrap框架的规则是每行（row）最多12列（column），大于12列的自动换到下一行显示，排列原则是按从左到右，再从上到下的排列。每个内容模块的内容必须放置于“列（column）”内，并且只有列（column）可以作为行（row）的子元素。

（1）栅格化布局的基本示意图

（2）布局和模块组合的例子

4. 整体网站页面设计及组成架构

整个网站根据用户访问信息的流程可以基本分为5大类。

页面模块的区域划分。红色为固定区域；蓝色为可变区域，设计时模块之间位置可以随具体需求来调整。

对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，页面模板中每个模块的定义规则参考。

1门户类型：首页

2门户类型：目录页

3列表模板类型

4文章模板类型

5交互模板类型

独特的模板页面

以上内容分享给同样学习响应式设计或开发的你，希望给你带来一些帮助！