响应式 Web 设计指南「实践篇」

不管你是奔赴战场、跑马拉松，仍是构建一个响应式的站点，准备工做都是关键。

建立一个响应式的站点意味着要考虑多样化的设备生态系统。

若是没有适当的准备，你将发现本身会由于缺乏必要的部分而忙里忙外，而且站点的质量也将受到很大的影响。

 

考虑的因素

做为任何响应式项目的第一步，都应该是肯定投资这个项目是否有意义。在你作决定以前，这里有一些值得思考的因素。

若是其中有任何一项形成了严重的障碍，那么也许你应该选择一个非响应式的实现，至少目前来讲是这样。

 

性能

与有线网络相比，移动网络正遭受着显著增长的延迟和显著减小的带宽。即便在小屏幕上隐藏了内容，可是标签和CSS依然会被下载。

性能是用户体验中固有的一部分。若是你并不关心如何构建站点，那么最终这将致使一个异常臃肿而缓慢的站点。

 

使用环境

你的站点的用户体验会根据使用环境的不一样而不一样。不一样的设备能够在不一样的环境下完成不一样的任务。

相反，一个可以在多种设备上表现一致的新站点能够运行的很是好，是由于其体验并不依赖于大量的使用环境。

 

内容协商

也许你会选择去从新组织或者重构站点的内容。比方说有一个页面有一个内容栏和一个边栏，若是你将布局变为单独一栏，那么边栏就会被挤到整个内容栏的下面。

不少时候，边栏的内容也许远远要比内容栏底部的内容重要。因此若是你不从新规划内容的顺序，那么页面的层级划分就会消失。

 

时间投入

相比非响应式的方法而言，响应式的方法一般都须要更多的前期时间投入。

由于你要考虑大量的具备不一样能力的设备，还须要去观察目前已经存在了哪些设备，以及一些特殊设备如何与之交互。

这些时间并无被浪费，在项目开始时失去的时间极可能会在维护成本中获得弥补。

若是你有时间投身到建立一个高质量的站点中去，那么你应该响应式地好好思考一下。

 

支持

从桌面端向下构建响应式站点，正如它在大部分状况下所实现的那样，会在不少移动设备上形成问题。

取而代之，若是你选择渐进加强的方式，那么就能够避免这些问题。首先为能力最弱的浏览器编码，而后再使用媒介查询来逐渐加强体验。

首先为能力最弱的浏览器构建站点是最明智的选择，但也不能保证更流行的设备就必定比目前的设备有更强的能力。

 

广告

响应式站点中广告的问题，已经再也不仅仅是技术的种种限制了。

解决响应式设计中有关广告制做和广告销售的问题是很是重要的一步，由于广告商是从广告的精准投放中获利的。

大幅的标题栏广告用在小屏幕设备上是注定失败的，而响应式的方法可以确保为每种分辨率的屏幕提供的广告都是合适的。

 

结论

不管当前咱们的工具及心态有着怎样的局限，请不要忽视响应式设计的潜能。

一旦你已经认定了响应式方法对于你的项目来讲是合适的，那么你就要考虑如何来实现它。

当咱们能认真的使用它，并能将其与正确的技术结合在一块儿时，一个响应式的方法才能够做为大部分站点的起点。

 

响应式设计流程

若是你往水里扔了一颗石子儿，那它便会激起一连串扩散的涟漪，虽然撞击点很小，但影响波及甚远。

若是把咱们现有的工做流程比做是水，那么响应式设计就是那颗石头，而那一圈不断扩散着的涟漪，影响着一同工做的方方面面。

 

可交互媒介

是时候转变一下 “Web是一种静态的媒介” 的观念了。Web是灵活的、不可预测的，所以执拗地使用固定的工做流程和静态的可交付成果并不能帮助咱们挖掘Web的潜能。

不要用那些其实并不存在的限制来约束咱们本身，咱们的工具、技术以及可交付成果应该更好地反映出Web的这一动态特性。

 

协做

传统的网页设计流程都是线性的，首先由设计师建立设计稿，一旦经过后便将其转换为几个静态的线框图，最后交给开发者去实现。

而在一个响应式项目中，因为你关注的是如何为大量不一样的设备服务，工做流程无疑会变得更加复杂。

你不能指望设计师能预料每一种可能出现的状况，你也不能指望开发者能百分之百地与设计师设计的每一个交互都保持同步，所以咱们须要一种更高层次的合做。

若是在设计过程当中，设计师和开发者能一块儿紧密地工做，那么开发者就能指出其余可能的情景，考虑就会更加周全。

 

沟通

从项目启动开始，设计师和开发者就应当参与进来。

经过及早地让设计师和开发者参与进来，能够确保页面与交互之间的一致性，而开发者则能够在发现潜在问题以前，就将它们指出来。

不一样于简单的手手相传，一种更具协做性的工做流程能使得设计大纲更加成功。

在设计大纲中，应该安排站点在尽量多的设备上进行测试。由于这样能够对设计中的任何瑕疵都予以指出，并能够暗示你应该作出哪些调整来为给定的设备作优化。

 

迭代

理想状况下，每次迭代只须要作出很细微的调整，由于对于体验的轻微调整会相对容易。

这听起来也许很是耗时，的确是这样，但这对于确保最终的产品可以给用户带来温馨的体验，也是相当重要的一步。

 

尊重

若是项目中设计师和开发者之间缺少彼此尊重，那么整个过程也会失败。

咱们会凭借已有的一点知识走很长的一段路。尊重，正如它所表现出来的那样，你很难将它给予那些你不了解的事物。

若是你是一个设计师，那么就去花点时间在编程上，这将使你更加深刻地了解开发者们的工做。

一样，做为一名开发者则要去探索一下那些设计概念，这样能够帮你意识到设计远远不仅是漂亮的颜色和字体。

 

与客户协做

协做不该该仅限于内部，它也一样应该扩展到你与客户的来往当中。让客户尽早地加入进来，而且从始至终都要让他们成为项目中的一部分。

若是在整个过程当中都能让客户参与进来的话，那么大家之间的关系就会变成一种团队合做。客户与设计团队之间的那堵墙便轰然倒塌了，双方的意见均可以被对方听到，并且每一项提出的解决方案都会有来自双方的贡献。

 

系统方式思考

一个站点须要有一致性，不但包括页面与页面之间，并且还包括设备与设备之间。

要想得到一致性，就须要以系统的方式来思考问题。经过考虑单独的组件，能够将它们从页面中解耦，并迫使咱们思考这些组件应该如何一同工做。

先考虑站点中单独的组在不一样的环境中要如何运行，而后考虑这些组件如何能统一地建立出一种广阔的体验，这些对于任何响应式项目的成功都相当重要。

 

优先考虑手机

手机在爆炸式地增加：

　　随着设备数目的激增，愈来愈多的人们开始只使用移动设备来访问互联网。在有些国家移动平台已经占据了主导地位，所以优先考虑移动平台是颇有意义的一件事。

手机迫使你专一：

　　移动设备大都只有一个很小的屏幕，这意味着能往里面填充的内容颇有限。优先为手机设计能够迫使你专一于弄清楚哪些内容是最重要的。

手机丰富的能力：

　　移动设备开始加装愈来愈多的传感器，虽然目前还不能从浏览器中访问到，但放眼将来，咱们能够利用这些传感器建立出更好的体验。

 

线框图

若是从一开始就建立一个高保真度的原型，那么要从完成的设计中看出以前的颜色或样式将会变得很是困难。可是若是能从建立一个低保真度的线框图开始，那么一切就会变得很容易。

一般状况下，线框图不会包含颜色、字体或者图片。画线框图的目的并非为了演示站点布局，而是为了帮助肯定页面结构，其中包括将会显示什么类型的内容，以及这些内容有着怎样的优先级。

要尽量地让你的线框图保持简单。线框图的保真度越高，你遇到的阻力也就越大，线框图的保真度越低就越容易让人专一于页面的结构、层次和行为。

 

模型

是时候放弃“像素级精确控制”的那种渴望了。不完美是件好事，不完美能催生各类特质并带来可塑性。

静态模型存在着大量的问题，对于设计最终将会如何呈现，它只能给出很是有限的预测。

在浏览器里设计可以更好地演示当用户与页面上的元素交互时所发生的一切，另外一个好处是可让咱们专一于内容和结构。

对于许多设计师来讲，在代码中工做让他们失去了创新和试验的能力。不过在理想的工具出行以前，最重要的是学会放弃对图像编辑软件的依赖。

 

样式向导

为了可以对整个项目有所帮助，你须要建立视觉样式向导以及相应的模式库。

这样作不但能够确保站点能够维持一个统一的视觉外观，并且代码也能维持统一的样式，这在很大程度上简化了后期的维护。

一份良好的视觉参考除了要包含站点内各个元素的样式以外，样式向导还应该提供特定的元素要在何时以及如何被使用的信息。

样式向导正变得愈来愈流行，其中最为著名的就是 Twitter 的 Bootstrap。有了这样一份资源，即便对于新手开发者来讲，快速开展工做也会成为一件容易的事。