响应式设计的现状与趋势

4顶
0踩

2015-03-02 14:50 by 副主编 mengyidan1988 评论(0) 有6484人浏览

web

从2012年开始到2014年，各大家对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）原本都是指现有的一些技术手段，但在做响应式设计研究的过程中，这些概念还是有更广泛的意义，设计师也应该有所了解：
1.流动布局：原特指以百分比为度量单位的布局技术实现方式。这里就不对如流动布局、弹性布局、流体栅格等各种概念做一一说明。笔者就此统为一个大的概念：在响应式设计的布局中，不再以像素（px）作为唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。
2.媒介查询：媒介查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询，可以获取到设备及设备的特性，并给出求同存异的方案，从而解决之前在单纯的布局设计中遗留的问题。
3.弹性图片：伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。个人认为弹性图片是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项目带来的是一整套全新的、完整的方法，还应该包括一种新的、可以更好地利用这一模式的工作流程。

最后，我想说下响应式体现的是一种高度适应性的设计思维模式。在响应式设计探究的道路上，响应式本身不是唯一目的，基于任意设备对页面内容进行完美规划的设计策略及工作流程应该是我们更大的课题。

来自：何玉婵的博客

查看图片附件

来自: 何玉婵的博客

分享到：

4
顶

0
踩

评论共 0 条请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

网页响应式设计的现状与趋势

网页响应式设计的现状与趋势响应式设计的现状与趋势－banner720 从2012年开始到2014年，各大家对Web设计的趋势预测中，都提到响应式设计；2015年网页设计趋势预测中，响应式仍在继续。这个经历了几年依然大热的...

详细解析网页响应式设计的现状和趋势

从2012年开始到2014年，各大家对Web设计的趋势预测中，都提到响应式设计。2015年网页设计趋势预测中，响应式仍在继续。这个经历了几年依然大热的响应式，在过去的几年里，快速巩固了自己的地位，并掀起了一股网页...

浅析丨AI安防产品发展现状与趋势分析

实际上，人工智能产业发展已有60多年，但是，一直以来AI学习能力十分有限，因此，也并未走进...在人工智能发展火热趋势下，不同行业不断涌现各类AI产品和解决方案，而安防领域由于具有海量视频数据资源池的优势...

前端web：响应式网站开发的现状你了解吗？

如今建立响应式网站也是一种趋势，利用互联网的优势，通过响应式网站，对公司的品牌和服务进行宣传，为企业专业打造网络品牌，拓宽其销售渠道。但您真的对响应网站开发的现状了如指掌吗？响应式网站开发的现状响应...

数据科学研究的现状与趋势全解

首先，本文探讨了数据科学的内涵、发展简史、学科地位及知识体系等基本问题，并提出了专业数据科学与专业中的数据科学之间的区别与联系；其次，分析现阶段数据科学的研究特点，并分别提出了专业数据科学、专业中的...

前端工程师必备精选文章50篇：响应式设计、CSS动画

在如今这个时间和知识都是碎片化的时代，C站根据C1-C4认证的成长路径，进行知识细化整理，...一、响应式设计(30篇) 【自适应响应式网页设计（Responsive Web Design）】【响应式网页设计】【响应式网页设计实战..

《响应式网页设计》系列分享专栏

响应式设计的现状与趋势谈响应式web设计代码实现(转) 基于 Bootstrap 的响应式后台管理面板初步认识响应式布局 Sass Guidelines中文版本之五：响应式设计和断点管理你能分得清”响应式...

自动驾驶操作系统现状与发展趋势

在软件定义汽车的大趋势下，汽车OS是传统汽车实现智能汽车升级的关键。E/E架构升级包括硬件、软件、通信架构三大升级，芯片+操作系统+中间件+应用算法软件+数据构建核心技术闭环，汽车操作系统是软件定义汽车生态...

带你了解UI设计就业现状与未来发展趋势!

自2010年出现iPhone4开始，UI设计师的需求便迅速增长，甚至出现井喷之势。据最新统计到的UI设计招聘量看，国内UI设计师共有约40万的职位缺口，而随着人们对互联网产品用户体验度的提升，2019年的UI设计更加是企业...

响应式Web设计（一）：响应式Web设计的背景

很显然，答案就是——响应式Web设计，那究竟什么是响应式设计呢？且听下回分解（请勿拍砖，稍等，稍等，不会让你等太久的。。。）标题预告：响应式Web设计（二）：响应式Web设计的概念响应式Web...

springboot+基于vue的响应式代购商城APP的设计与实现毕业设计-附源码191654

在详细的需求分析的基础上，系统设计使用springboot框架，采用基于MVVM模式进行开发，使用Eclipse为编写工具，数据方面主要采用的是微软的MySQL关系型数据库来作为数据存储媒介等完成系统的开发.完成了系统的主要...

亚洲电子商务发展案例研究

本书由国际发展研究中心（IDRC）和东南亚研究院（ISEAS）联合出版，旨在探讨亚洲背景下电子商务的发展与实践。IDRC自1970年起，致力于通过科学技术解决发展中国家的社会、经济和环境问题。书中详细介绍了IDRC的ICT4D项目，以及如何通过项目如Acacia、泛亚网络和泛美项目，在非洲、亚洲和拉丁美洲推动信息通信技术（ICTs）的影响力。特别强调了IDRC在弥合数字鸿沟方面所作出的贡献，如美洲连通性研究所和非洲连通性项目。ISEAS作为东南亚区域研究中心，专注于研究该地区的发展趋势，其出版物广泛传播东南亚的研究成果。本书还收录了电子商务在亚洲不同国家的具体案例研究，包括小型工匠和开发组织的电子商务行动研究、通过互联网直接营销手工艺品、电子营销人员的创新方法以及越南电子商务发展的政策影响。

少儿编程scratch项目源代码文件案例素材-Leap On.zip

ANSYS Maxwell电磁仿真在高速无刷电机设计中的应用与优化技巧

内容概要：本文详细介绍了ANSYS Maxwell电磁仿真软件在高速无刷电机（特别是吸尘器电机）设计中的应用。主要内容涵盖电机设计中的常见挑战及其解决方案，如定子槽开口设计、气隙磁密控制、Halbach阵列的应用、定子斜槽角度选择、散热设计以及PWM控制策略等。文中通过具体实例展示了如何利用Maxwell进行参数化扫描、瞬态场仿真、温度场耦合仿真等操作，从而优化电机性能并提高效率。此外，还讨论了仿真与实际情况之间的差异及应对措施。适合人群：从事电机设计、电磁仿真及相关领域的工程师和技术人员。使用场景及目标：适用于希望深入了解高速无刷电机设计原理及优化方法的专业人士。目标是在实际项目中运用Maxwell电磁仿真工具，解决设计难题，提升产品性能。其他说明：文章强调了仿真并非万能，但合理的仿真手段能够极大促进产品研发进程。文中提供了多个实用的Python和MATLAB脚本示例，帮助读者更好地理解和应用相关技术。

Java多态的一些小知识点

这是我记录的第一篇笔记和博客，我现在大一下，我想以此为契机激励自己记笔记，加深对特定知识的印象！目前我在学习黑马的Java，同时期也会学一些数据结构和相关算法，我也会将这部分笔记上传。最后我想说的是一些最近的感想 1.不要美化你没走过的路 2.来都来了那就坚持走下去，不给自己留遗憾！！

Matlab构建双输入深度学习模型：融合时序与频域特征的技术指南

内容概要：本文详细介绍了如何利用Matlab构建并训练双输入深度学习模型，特别是针对不同长度的一维序列数据（如时序信号及其FFT频谱）。首先，作者展示了如何生成用于实验的仿真数据，接着深入探讨了网络架构的设计思路，包括采用CNN-LSTM处理时序特征以及纯CNN提取频域特征的方式。文中强调了数据预处理的重要性，如归一化处理，并提供了具体的训练选项设置方法。此外，还分享了一些实用的小贴士，如如何正确地进行模型评估和调整网络结构以适应不同的应用场景。最后，作者提到了一些常见的错误及解决办法，帮助读者避开潜在的陷阱。适合人群：对深度学习感兴趣的科研工作者、研究生及以上水平的学生，尤其是那些希望将理论应用于实践的人群。使用场景及目标：适用于需要同时处理多种类型数据的研究项目，如机械故障诊断、情感分析等领域。通过本教程的学习，读者能够掌握构建高效双输入深度学习模型的方法，从而提高数据分析的效果。其他说明：本文不仅提供完整的代码示例，还包括了许多实践经验分享，有助于初学者更好地理解和应用所学知识。

基于COMSOL的三相电力变压器温度场与流体场耦合计算模型及其实现技巧

内容概要：本文详细介绍了使用COMSOL进行三相电力变压器温度场与流体场耦合计算的具体步骤和技术要点。首先讨论了变压器温升问题的重要性和现有仿真与实测数据之间的偏差，接着阐述了电磁-热-流三场耦合建模的难点及其解决方法。文中提供了关键的材料属性设置代码，如变压器油的密度和粘度随温度变化的关系表达式，并强调了网格划分、求解器配置以及后处理阶段需要注意的技术细节。此外，还分享了一些实用的经验和技巧，例如采用分离式步进求解策略、优化网格划分方式等，确保模型能够顺利收敛并获得精确的结果。最后，作者推荐了几种常用的湍流模型，并给出了具体的参数设置建议。适用人群：从事电力系统设计、变压器制造及相关领域的工程师和技术人员，特别是那些希望深入了解COMSOL软件在复杂多物理场耦合计算方面应用的人群。使用场景及目标：适用于需要对变压器内部温度分布和油流情况进行精确模拟的研究或工程项目。主要目的是提高仿真精度，使仿真结果更加贴近实际情况，从而指导产品设计和优化运行参数。其他说明：文中不仅包含了详细的理论解释和技术指导，还提供了一些实际案例供读者参考。对于初学者来说，可以从简单的单相变压器开始练习，逐步掌握复杂的三相变压器建模技能。同时，作者提醒读者要注意单位的一致性和材料属性的准确性，这是避免许多常见错误的关键所在。

PSD信号处理电路（PCB 原理图封装库）亲测可用.zip

4顶0踩