响应式设计的一些现状和趋势

从2012年开始到2016年，各大家对Web设计的趋向猜测中，都提到呼应式设计；2015年网页设计趋向猜测中，呼应式仍在持续。这个经历了几年仍然大热的呼应式，在过去的几年里，迅速稳固了自己的身份，并掀起了一股网页设计新标准的海潮。这里本人基于一些资料文献及自己的陋见，网站建设公司成都桔子科技谈谈呼应式设计的一些近况和趋向。

源起

2010年5月，伊桑.马科特（Ethan Marcotte）在“A List Apart”写了一篇首创性的文章（题为“Responsive Web Design” ），他利用三种已有的工具：流动布局（fluid grids）、媒介查询（media queries）和弹性图片（scalable images）创立了一个在不一样辨别率屏幕下都能漂亮地显示的网站。 Ethan Marcotte力劝设计师们要去利用那些Web独有的特征去进行设计： “我们能够将不一样联网设备上众多的体验，看成是同一网站体验的不一样侧面来看待，而不要为每种设备进行单独剪裁而使得设计彼此断开，这才是我们前行的方向。尽管我们已经能够设计出最好的视觉体验，但还要把基于标准的技术也嵌入到我们的设计中去，这样才能够使得我们的设计不只灵巧，并且还能顺应衬着它们的各类媒介。” Ethan Marcotte证清楚一种在多种设备上都能提供卓越体验的办法的存在，并且这一办法不会疏忽不一样设备的差别，也不会强调设计师的控制权，而是选择了天真烂漫并拥抱Web的灵巧性。

这里简单介绍下上头的提到的三个概念：流动布局（fluid grids）、媒介查询（media queries）和弹性图片（scalable images）本来都是指现有的一些技术手段，但在做呼应式设计研究的过程当中，这些概念还是有更普遍的意义，设计师也应当有所了解： 流动布局：原特指以百分比为器量单位的布局技术完成方法。这里就纰谬如流动布局、弹性布局、流体栅格等各类概念做逐个说明。笔者就此统为一个大的概念：在呼应式设计的布局中，不再以像素（px）作为唯独单位，而是采取百分比或许混杂百分比、像素为单位，设计出更具灵巧性的布局方法。 媒介查询：媒介查询能够让你依据在特定环境下查询到的各类属性值——好比设备类型、辨别率、屏幕物理尺寸及颜色等——来决定应用什么样的款式。通过应用媒介查询，能够获得到设备及设备的特征，并给出求同存异的方案，从而处理之前在纯真的布局设计中遗留的问题。 弹性图片：随着布局的弹性，图片作为信息重要的形式之一也必须有更灵巧的方法去顺应布局的变化。个人以为弹性图片是Ethan Marcotte提出设计产品时提出的概念，我们在后续的研究中能够以图片为典范，扩展研究范围：除过图片，还应当包含图标、图表、视频等信息内容的呼应方法研究。

风行

呼应式设计的概念从提出至今，一直陆续舒展分散，并获得各方承认的主要缘由：

1、外部环境：迅速增长且日益加重的可联网设备的多样化，让当今已不再有标准的屏幕尺寸； 2、本身特点：严厉界说的呼应式普通是指呼应式Web设计，而Web依仗其独有的灵巧性和可塑性，能够顺应各类尺寸和配置的设备，能够无处不在。 3、内部需求：呼应式设计概念一提出，各大网站及平台都希望能够采取这秉一应万的形式，能够更灵巧地去适配更多设备，特别是目前移动设备大爆棚的时期。

固然也其实不是一切的情形都理所应带应当采取呼应式设计，那么什么情形下更合适采取呼应式呢？ 1、你想节省成当地去顺应更多场景：资源都是有限的，但老是希望能利用有限的资源去获得更大的价值。尽管比起开发设计一个普通的网站来讲，要打造一个呼应式站点，所需求的人力和时间资源都有所增加，但比起为不一样设备分别打造多个版本的本钱还是要低许多；从保护的角度来讲，也会轻松许多。 2、你其实不清楚要设计开发的全新产品更合适哪一个场景：与其通过猜测挑选核心设备再进行分别设计，倒不如先花些心思将网站打造得更具弹性，使其在各类设备中都拥有尽量优良体验。缘由是在各方面都未知都情形下，做猜测会加重过程风险，使得结果存在庞大的挑战性。 3、你希望网站能够兼容将来的新设备：新的设备层出不穷，与其被动地进行更新保护，不如主动应万变，成为呼应式。 固然这里只是说更合适，其实个人以为只需项目资源和时间许可，基本上大部分网站都能够去试探完成呼应式；而关于首次试探呼应式设计的，也能够从“简单浏览型页面”开始。

形式

如今大多网站中选择成为呼应式的设计形式主要有两种：

1、基于设备：通过主流设备的类型及尺寸来确定布局断点（break point），设计多套款式，再分别投射到呼应的设备。

2、内容优先：依据内容的可读性、易读性作为确定断点（break point）的标准，即在对内容进行布局设计的时候，能够疏忽设备，有内容决定什么时候需求采取不一样的出现方法。

个人还是偏向内容优先的方法，这是真正相符呼应式设计核心战略的形式，也是对将来友爱的方法。 从过去基本上是基于PC的几个尺寸，选择最好的标准尺寸去设计页面；到目前移动设备已经玲琅满目，同时电视、穿着设备也渐渐开始起来，已经不再有固定的尺寸；将来，将是更加没办法预知的设备环境；那么什么才是霸道呢？——就是内容自己！ 变化老是来得快且狠，我们要做的就是抓住那根能够贯穿全局的线！

在内容优先的战略中，有三点思想形式能够贯穿全部呼应式设计的过程： 1、忘却设备：缘由是我们不晓得用户会用什么样的设备来拜访网站，所以，我们必须尽量地把一切情形都包括出去；一切的物品（布局、组件等）都能与不一样类型的设备和平台相兼容。 2、优雅升级：尽管这个概念一开始是技术完成上对新的特征在老的浏览器上没办法很好完成时的折衷做法，但在此仅想表达在对布局做弹性设计时，内容从宽到窄的变化出现，必须通过重重挑选，保存最核心的内容块。这类形式特别合适对已存在的PC页面产品进行呼应式设计改造。 3、渐进加强：此概念是在Steven在2003年的SXSW活动上提出的。在实质上来讲，就是把优雅升级倒过来：先创立一个基本体验，侧重让内容以一种简介的方法来展示；以后，在保障基本体验的条件下，开始着手做有关显示的布局和交互。而在此，也借用来讲明下关于呼应式设计的内容战略中，内容从窄到宽的变化出现中，能够让内容的丰富度也相应地有所增加。这类形式与移动优先战略是相配套的。

固然，如今呼应式也是有存在各类争辩的，或许你有一个很好的缘由不需求呼应式网页设计？但我想没人会说，“让我们摆脱呼应式设计吧”，而实际上，愈来愈多的网站选择成为呼应式。2014年如此，2015年也还是会持续，缘由是这已经不是种趋向，而怡然是种常态了。

将来的路

尽管呼应式设计的优势和趋向已被普遍承认，但如今呼应式设计的形式的普及还是有许多灾题需求冲破：

1、呼应式图片：如今弹性图片的做法主如果：缩放、剪裁、分条件加载等完成办法实质上都只是一个技能，只是治标不治当地掩饰了问题，并未真正完美地完成图片的弹性。

2、跨端的交互：在呼应式设计中，我们不只需需求考虑桌面用户的应用习惯，还必须统筹不一样尺寸的手持设备。好比在桌面端无尽优雅的Hover，在移动端却是非常蹩脚的体验，如何“求同存异”，让各端体验均能最好，还是需求持续深刻探讨的。

3、性能：性能估量是在呼应式开发中最大的痛，按条件加载、隐蔽或显示什么内容，都比单一条件推断的代码构造来的繁琐，并影响体验及保护。特别是移动性能上，更多样的设备具有更加复杂的应用环境，如何辨认设备，并让设备在不一样环境均能优越体验，也是一根硬骨头。

4、协作流程：呼应式设计远远不止是一种简单的设计战略，它为Web项目带来的是一整套全新的、完整的办法，还应当包含一种新的、能够更好天时用这一形式的工作流程。

本文是成都网站建设公司、成都网站设计制造公司与成都APP开发公司-桔子科技公司为您整顿！