谈谈对“响应式设计”的一些现状和趋势分析

这种经历了几年的热响应，在过去的几年里，迅速巩固了自己的地位，掀起了网页设计新标准的浪潮。本人基于一些资料文献和自己的不良见解，谈谈响应式设计的一些现状和趋势。伊桑.马科特起源于2010年5月（EthanMarcotte）在“AListApart写了一篇开创性的文章(题为“”ResponsiveWebDesign”），他使用了三种现有的工具：流动布局（fluidgrids）、媒介查询（mediaqueries）和弹性图片（scalableimages）创建了一个可以在不同分辨率屏幕下美观显示的网站。EthanMarcotte建议设计师利用Web的独特特点进行设计：“我们可以将不同网络设备的许多体验视为同一网站体验的不同方面，而不是单独切割每个设备，使设计相互断开。这就是我们前进的方向。虽然我们已经能够设计出最好的视觉体验，但我们也应该将基于标准的技术嵌入到我们的设计中，使我们的设计不仅灵活，而且适应各种媒介的渲染。“EthanMarcotte证明了一种可以在各种设备上提供卓越体验的方法，这种方法不会忽视不同设备的差异，也不会强调设计师的控制，而是选择顺其自然，拥抱Web的灵活性。以下三个概念简要介绍：流动布局（fluidgrids）、媒介查询（mediaqueries）和弹性图片（scalableimages）这些概念最初是指一些现有的技术手段，但在做响应式设计研究的过程中，仍然具有更广泛的意义，设计师还应了解：流动布局：原来是指以百分比为衡量单位的布局技术实现方法。这里就不一一解释流动布局、弹性布局、流体格栅等各种概念了。在这里，不要逐一解释流动布局、弹性布局、流体格栅等概念。作者将其统一为一个大概念：在响应式设计的布局中，不再使用像素（px）作为唯一的单位，以百分比或混合百分比、像素为单位，设计出更灵活的布局。媒体查询：媒体查询允许您根据设备类型、分辨率、屏幕物理尺寸和颜色等在特定环境下查询到的各种属性值来决定应用的样式。通过使用媒体查询，可以获得设备和设备的特点，并提出求同存异的解决方案，从而解决以往简单布局设计中留下的问题。弹性图片：随着布局的弹性，图片作为信息的重要形式之一，必须有更灵活的方式来适应布局的变化。就我个人而言，我认为弹性图片是EthanMarcotte设计产品时提出的概念。在后续研究中，我们可以以图片为例，扩大研究范围：除图片外，还应研究图标、图表、视频等信息内容的响应模式。自提出以来，流行响应设计的概念一直在传播，并得到各方的认可：1、外部环境:可联网设备的快速增长和日益加剧的多样化，使得现在不再有标准的屏幕尺寸；2、自身特点：严格定义的响应式一般是指响应式Web设计，Web具有其独特的灵活性和可塑性，可以适应各种尺寸和配置设备，可以无处不在。3、内部需求:响应式设计理念一提出，各大网站和平台都希望采用这种一应万的模式，更灵活地适应更多的设备，尤其是在移动设备蓬勃发展的时代。当然，并不是所有的情况都应该采用响应式设计，那么在什么情况下更适合响应式呢？1、为了节约成本，适应更多的场景资源是有限的，但总是希望利用有限的资源来获得更大的价值。虽然与开发和设计一个普通的网站相比，建立一个响应性网站所需的人力和时间资源将会增加，但分别为不同的设备创建多个版本的成本要低得多；从维护的角度来看，要容易得多。2、你不知道设计开发的新产品更适合哪个场景。与其通过预测选择核心设备，然后单独设计，不如先花点时间让网站更有弹性，让网站在各种设备中有尽可能优秀的体验。因为在各方面都未知的情况下，预测会加剧过程风险，使结果具有巨大的挑战性。3、你希望网站能与未来的新设备相兼容，新设备层出不穷。与其被动更新和维护，不如主动应对变化，成为响应。当然，这里只是更合适，事实上，我认为只要项目资源和时间允许，基本上大多数网站都可以尝试实现响应；对于第一次尝试响应设计，你也可以从“简单的浏览页面”开始。目前，大多数网站选择响应式设计模式：1、基于设备：布局断点通过主流设备的类型和尺寸来确定（breakpoint），设计多套样式，然后分别投射到响应设备中。 2、内容优先：根据内容的可读性和可读性确定断点（breakpoint）标准，即在布局设计内容时，可以忽略设备，有内容决定何时需要采用不同的呈现方式。个人仍然倾向于优先考虑内容，这是一种真正符合响应式设计核心策略的模式，也是对未来友好的方式。从过去，基本上基于电脑的几个尺寸，选择最好的标准尺寸来设计页面；到目前为止，移动设备已经充满了美丽的东西，电视和可穿戴设备也慢慢开始，不再有固定的尺寸；在未来，它将是一个更不可预测的设备环境；那么什么是国王呢？——就是内容本身！变化总是来得又快又狠，我们要做的就是抓住那条能贯穿全局的线！在内容优先的策略中，有三种思维模式可以贯穿整个响应设计过程：1、忘记设备：因为我们不知道用户会使用什么样的设备来访问网站，所以我们必须尽可能包括所有的情况；所有的东西（布局、组件等）都可以与不同类型的设备和平台兼容。2、优雅降级：虽然这个概念最初是在旧浏览器上不能很好地实现新特性的技术实现，但这里只是想表达在布局弹性设计中，内容从宽到窄的变化，必须重新筛选，保留核心内容块。该模式非常适合现有PC页面产品的响应性设计和改造。3、逐步增强：这一概念是在Steven2003年SXSW活动中提出的。本质上，它是降级优雅：首先创建一个基本的体验，专注于内容以一种简要的方式显示；然后，在确保基本体验的前提下，开始布局和交互显示。在这里，它也被用来解释响应设计的内容策略，内容从窄到宽的变化可以相应地增加内容的丰富性。这种模式与移动优先策略相匹配。当然，目前有各种各样的争论，也许你有一个很好的理由不使用响应网页设计？但我认为没有人会说，“让我们摆脱响应设计”，事实上，越来越多的网站选择成为响应。2014年，2015年还会继续，因为这不再是一种趋势，而是一种正常的快乐。虽然响应设计的优势和趋势在未来得到了广泛的认可，但仍有许多问题需要突破：最后，我想说的是，响应设计反映了一种高度适应性的设计思维模式。在响应式设计探索的道路上，响应式本身并不是唯一的目的。基于任何设备完美规划页面内容的设计策略和工作流程应该是我们更大的话题。