文/乐乘

 

【导读】 收到后台若干听众反馈，能否有一些设计或交互相关的资料分享。面对此类听众的需求，结合内容编排顺序。技术嘉年华特别准备了一个交互设计&前端的系列文章，预计发文7篇左右，本文是第一篇。如有反馈，请直接回复即可。

 

    许多设计师已经理解并认可响应式设计理念，拖动窗口大小欣赏那些实现响应式设计的网站时心中默念：喔，效果真棒。

    

    可是第一次启动一个响应式设计项目时心里开始打鼓：这该怎么开始？要学习哪些知识？究其原因，传统做法设计与技术界限相对分明，设计师出设计稿前端和开发负责实现彼此相安无事。

    

    响应式设计是设计与技术紧密融合的新做法，对传统设计方法形成不小的冲击。

 

    现在就来看下设计师第一次做响应式设计之前，需要了解哪些最重要的响应式设计知识。

 

原理：网页是如何变成响应式的？

 

    ETHAN MARCOTTE在第一次正式提出响应式设计概念的经典文章（http://alistapart.com/article/responsive- web-design）中，就清晰定义了响应式设计的三大要素：流体栅格、弹性图片和媒介查询。但由于原文充满技术词汇依然让不少设计师理解起来头疼不 已。下面两组图我尝试用设计师思维来解读三大要素。

 

    传统网页就像一盒巧克力，固定大小的巧克力（内容）装在固定尺寸的盒子（栅格）里，这样的页面无法随着外界环境来调整。



    响 应式网页就像一袋米，可流动的米（弹性内容）装在形状灵活可变的布袋（流体栅格）里，这袋米可以被压成不同形状。流体栅格是按照百分比来设定内容容器宽 度，容器宽度会随着浏览器宽度变化而变化。光容器变成流动容器里面的内容不流动也是不行的，弹性内容就是把内容宽度也用百分比来设定。网页上文字天然是弹 性的，图片、视频、控件、组件等内容用新的方法也可以设定为弹性的。

    “流体栅格+弹性内容”让网页具备了响应能力，媒介查询起的作用是定义响应规则。就像各种不同的外部容器，把一袋米摆在盘子、杯子、筐子里将呈现出不同形状。


    媒介查询探测浏览器宽度，并在指定宽度范围内加载不同的样式，写成代码时候一般长成下面这样。翻译成设计师语言就是：当屏幕宽度小于480px时加载...样式，当宽度在480px-600px之间时加载…样式。



栅格：响应式网页尺寸怎么计算？

 

    传统网页只需考虑一种固定尺寸，设计师一直不用为尺寸纠结。当宽度从像素变成百分比时，对设计习惯形成了巨大挑战。下面介绍一种我们项目中使用的响应式栅格制定方法。

 

Step1.选择栅格列数

 

    栅 格是一种让网页布局变得有秩序的设计工具，常用的栅格系统有8列、10列、12列、16列、24列等。我们选择的是12列系统，因为12这个数字可以被 2、3、4、6整除，12列的栅格可以被3等分、4等分、甚至6等分，这个是8列、10列、16列栅格做不到的。当然24列栅格跟12列栅格优势一样，而 且比12列栅格更精密，只是24列栅格计算稍显复杂。12列栅格已经可以满足大部分项目的需要。


Step2.选定临界点，绘制基础栅格

 

    临 界点（breakpoint）是指响应式网页发生布局变化的关键点，也就是前文提到的“当屏幕宽度小于480px时加载...样式，当宽度在480px- 600px之间时加载…样式”。响应式网页理论上有无数种尺寸，我们不可能也没有必要为每个尺寸都去做设计，需要做的是选定几个临界点做设计，在两个临界 点之间是延续上一个临界点的布局。

 

    12列栅格的页面宽度(d)是由12个列宽(c)加上11个列间距(g)，所以临界点计算公式是：d=12*c+11*g。

 

    参考主流设备的尺寸（比如宽屏PC1280px，窄屏PC和平板横屏1024px，平板竖屏768px，手机480px或320px），

选择符合项目需要的c和g的值，就可以确定相应的临界点，画出基础的栅格系统。

 

    举个例子，当c=70px，g=30px，临界点就是12*70+11*30=1170px。此时设计师面对的是页面宽度为1170px的12列栅格，回到熟悉的环境，设计起来又游刃有余了。

 

    c和g的值有那么多选择，应该依据什么原则来定呢？最重要的原则是根据内容需要来定。比如一个以文字内容为主的社区型产品，1170px页面宽度下30px的列间距是一个非常合适的尺寸，当页面宽度缩小到1000px或750px时15px的列间距已经足够。


Step3.把模块放到栅格里，计算模块百分比宽度

 

    接 下来看看如何在布局时候应用响应式栅格。假设我们在栅格里面画一个模块，模块宽度(b)占据栅格3个列，它在1170px这个临界点时候宽度就是 b=70*3+30*2=270px，那么这个模块的百分比宽度就是270/1170=23.07692307%。当页面宽度缩小到1000px时，这个 模块宽度b=65*3+15*2=225px，它的百分比宽度变成225/1000=22.5%。

对比一下两个临界点下这个模块宽度的变化，宽度从270px变成225px，百分比宽度也从23.07692307%变成22.5%。设计师按照270px和225px两个尺寸来设计，前端开发在CSS里用23.07692307%和22.5%两个数字来设定模块宽度。



    了 解了响应式设计基本原理和流体栅格这两个最基础也最重要的知识，你可以开始动手尝试进行第一个响应式设计了。除此之外还有图片、视频、控件、导航等常用的 设计元素在响应式设计里面都有新的处理方式，这些知识随着项目推进你逐步深入了解后，相信你对响应式设计会建立起系统的认识。如果想快速全面了解这些知 识，《Responsive web design》《响应式设计实践》这两本书籍是不错的选择，ResponsiveCN响应式设计中文主题站上也有很多有价值的内容。


    最重要的是，赶紧动手开始你的第一个响应式设计项目。