阅读更多

3顶
1踩

移动开发

转载新闻 响应式设计是否值得?

2012-09-26 17:49 by 副主编 MnouW 评论(4) 有5952人浏览
本文来自 Tom Ewer 的Managewp blog撰文,表达了其对时下风靡的响应式设计不一样的看法。

到2014年,会有更多的人用移动设备代替PC端访问互联网,所以打造易访问的移动端成了Web开发者最关注的问题之一。因此响应式设计应运而生,但从我个人的角度看,它并不值得大力追捧,为什么?

响应式设计不是万能的。我自己过去也是一个响应式设计的粉丝,发现很多Web应用不能很好的在移动屏幕上显示,Google地图就是一个很好的例子。包含很多图片的网站也适合响应式设计,但以文本为主的网页和博客就不是了,甚至于我觉得对这种Web网站实施响应式设计只是浪费时间。




什么是响应式设计?

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户使用笔记本还是iPad,页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备。

1.  “响应式设计”达不到用户期望

Usability 101 规则的第一条就是“满足用户期望”。以博客为例子,它被广泛接受的设计方式是: 从上往下、内容和图片各放一边、提供边栏,这个已在数百万博客中被应用,因为它达到了用户的期望。



但若你访问经过响应式设计的移动网页,一般边栏会消失,或者会跳到最顶部或者最底部, 反正不是你期望的地方。以Cats Who Code 为例,下面是桌面显示,有顶部的导航、边栏(包括最近Post),小广告栏和搜索框。下面是iPhone的界面:



可看出导航和边栏消失了,继续往下拖的时候我终于找到了边栏,你可能会觉得这只是个个例, 但事实是这是一个典型的响应式设计,我们想看到的是以不牺牲桌面元素为前提的移动界面显示,显然这不是。

2.  花钱多 耗时长

一般来说,响应式设计比非响应式设计要花更多的钱。如果有人Damn地争论响应式设计比建立一个额外的移动版面更便宜,我同意,但你知道比响应式设计更便宜的是什么吗?什么都不用!

此外你要想想这花了你多少时间,从响应式设计里面你得到了多少投资回报,获得了什么?

3.  非响应式设计表现也不赖

看我自己的博客在Mac上显示效果:



看它在我的iPhone上:



在iPhone4英寸的屏幕上,读起来感觉很好。如果文字太小了,那就双击放大吧,待会看完了又缩回来并不是什么难事。 而且好笑的是,现在的手机界面就是为了非响应式设计准备的, 且大部分手机表现得很好。如果你非要揪出一些意外的话,去看看那些网页的桌面版,设计也同样很差。



4.  对加载时间没好处

我们知道移动设备操作时是基于互联网子宽带的联网速度,所以网页要确保最少的负荷来减少加载时间,很多响应式设计并未真正减少加载时间,因为许多设计师只是隐藏了那些元素, 对优化加载毫无好处。而非响应式设计可以选择“延迟加载”,这是一个选择先加载最密集元素再到其他的技巧。

5.  响应式设计其实是种妥协

可以说响应式设计是设计师的主观决定,他们认为桌面显示界面不再适用移动界面,然后觉得一定要做出相应改变。而用户如果看到更不适的界面后会发问,为什么要弄个这么不一样又不是很好的显示方式?这触犯了usability 101第二条规则“不要让用户觉得他们无法控制局面”。

所以我的观点是:这只是一种妥协,是设计师的主观决定,用户并没有觉得多大的不适,特别是当响应式设计既要钱又要花时间的时候。

最后,我写这篇文章有两个原因,我觉得响应式设计在很多情形下是没必要的;在互联网上明显缺少对响应式设计的争论。我不否定响应式设计理论本身,但事实是我见过的许多情形下它真的没必要。很多人习惯在别人拥护时并认为那是天经地义的事,但你最好从一个开发者的角度来看看,这真的是你需要的吗?

Via managewp
  • 大小: 83.7 KB
  • 大小: 142.6 KB
  • 大小: 59.6 KB
  • 大小: 73.9 KB
  • 大小: 76.8 KB
  • 大小: 89.4 KB
  • 大小: 65.8 KB
来自: 雷锋网
3
1
评论 共 4 条 请登录后发表评论
4 楼 fogtower 2012-09-27 15:53
响应式设计很重要,这是未来的潮流,不管你喜欢不喜欢,你无从选择。
3 楼 jss 2012-09-27 11:32
yeaha 写道
achun 写道
响应式设计是为了满足用户需求而产生的一种设计技巧
虽然现在使用这种技术也带来了一些副作用,但是要明白这是一个需求方和提供方都急需完善的领域,应该有跟多的技术研究,甚至是推进标准来支持他才是正途。
响应式设计其实并不是种妥协,是一条鞭子,他在抽打那些不前进的标准建立者和设计者

好霸气的评论,赞成

2 楼 yeaha 2012-09-27 10:26
achun 写道
响应式设计是为了满足用户需求而产生的一种设计技巧
虽然现在使用这种技术也带来了一些副作用,但是要明白这是一个需求方和提供方都急需完善的领域,应该有跟多的技术研究,甚至是推进标准来支持他才是正途。
响应式设计其实并不是种妥协,是一条鞭子,他在抽打那些不前进的标准建立者和设计者

好霸气的评论,赞成
1 楼 achun 2012-09-27 10:06
响应式设计是为了满足用户需求而产生的一种设计技巧
虽然现在使用这种技术也带来了一些副作用,但是要明白这是一个需求方和提供方都急需完善的领域,应该有跟多的技术研究,甚至是推进标准来支持他才是正途。
响应式设计其实并不是种妥协,是一条鞭子,他在抽打那些不前进的标准建立者和设计者

发表评论

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

相关推荐

  • 5个响应式设计不值得搞的原因(图文)

    响应式设计不是万能的

  • 如何选择响应式与自适应设计?

    作为全球先进的科技巨头,Google一直推崇响应式网页设计,并在今年的4月21日...尽管在 更新中没有明确表明你必须使用响应式设计。只是简单的提示响应式设计拥有不错的UX和优越的性能,是移动设计方面的一个不错的选择。

  • html手机响应式布局,手机网页设计中的响应式布局

    随着各种特性和智能手机浏览器的发展,网页能够根据设备显示变得很重要。我们不用再根据桌面浏览器窗口尺寸建立网站...另外一个比较有用且流行的媒体类型是印刷,它为优质的网面打印创建一个分离的设计。我们可以告...

  • 响应式网页设计_响应式网页设计的意义和目的

    响应式网页设计The following is an exclusive extract from our new book, Jump Start Responsive Web Design, 2nd Edition, written by Chris Ward. Copies are sold in stores worldwide, or you can buy it in ...

  • 如何为你的响应式设计提速?

    响应式设计是最近的流行词,能够打造多屏幕一致体验。 现在几乎每个人都喜欢响应式设计,而且可以是没有原因的支持,这跟Flash刚出现那会火热的局面有点相似。然而,响应式设计带来了表现力的问题,这需要通过调整...

  • html响应式布局好学嘛,响应式布局到底是什么?难吗?

    一、什么是响应式布局?响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户...

  • web前端响应式设计总结

    web前端响应式设计总结 一、响应式概述   响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容,有不正确的欢迎大家指正。谈到...

  • 婚纱影楼响应式网站源码 v5.6

    婚纱影楼响应式网站源码是使用CmsEasy网站系统版进行制作的,网站可以自适应pc端和wap端的... 婚纱影楼响应式网站源码特点: 整体采用浅色宽屏设计,简洁大气,电脑手机自适应布局,大方美观,功能齐全,值得推荐的一款

  • 值得拥有!响应式高分辨率图片博客wordpress主题.zip

    值得拥有!响应式高分辨率图片博客wordpress主题.zip

  • 值得html初学者收藏的响应式前端开发框架

    如今随着响应式设计的流行,前端开发变得越来越困难,且花费的时间更长。 本文收集了14个响应式前端开发框架,可以帮助前端开发人员大大简化开发过程。针对每个框架,文中均指出了它所包含的UI组件及JavaScript插件...

  • 设计师必读的15个响应式网页设计教程

    @陈子木 响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念,随后席卷前端和设计领域,成为了如今网页设计的大趋势。正如同Ethan所说:“响应式网站设计提供了一种全新的选择,这种基于栅格...

  • 页面设计:响应式设计电子商务网站案例学习

    响应式设计技术已经比3年前更加成熟而且有了更多的设计、测试工具和设计框架和样式。不过这些设计大部分用在一些阅读、Blog、简单门户网站中,在电子商务领域少有涉及。国内大中型电子商务网站基本上没有使用响应式...

  • Web设计的未来:响应式设计路在何方?

    响应式设计似乎被看做成未来的设计方向,但我不赞同。今天,我要解释为什么我认为响应式设计并不是Web设计的最佳解决方案。 什么是响应式设计? 维基百科对响应式设计是这么介绍的: 响应式Web设计是网站...

  • 简单的响应式导航设计

    响应式导航设计 今天来做一个简单响应式导航 不想看具体制作过程的,请直接前往这里 Responsive Header Demo 布局 先来码出基本的布局 <header> <div class="logo"> <a href="#">Company Name&...

  • 我们为何要选择响应式设计?

    跟任何新式的科技和产品,刚过出现时,往往问题繁多,响应式设计也一样,但并不能忽视它的价值,不能忽视它将带来的完美体验。通过响应式设计,我们能为用户提供更好的浏览体验。没人会因为过去的方法简单,而采用...

  • 快速入门响应式设计

    在移动时代,单纯学了DIV+CSS布局远远不够,还要学习响应式布局将设计的网页能在所有设备都能显示出最合适最好看的效果。说到响应式布局,可以学习和使用bootstrap这类优秀的响应式框架,但是觉得bootstrap太过臃肿...

  • PHP语言基础知识详解及常见功能应用.docx

    本文详细介绍了PHP的基本语法、变量类型、运算符号以及文件上传和发邮件功能的实现方法,适合初学者了解和掌握PHP的基础知识。

  • 公司金融课程期末考试题目

    公司金融整理的word文档

  • 适用于 Python 应用程序的 Prometheus 检测库.zip

    Prometheus Python客户端Prometheus的官方 Python 客户端。安装pip install prometheus-client这个包可以在PyPI上找到。文档文档可在https://prometheus.github.io/client_python上找到。链接发布发布页面显示项目的历史记录并充当变更日志。吡啶甲酸

Global site tag (gtag.js) - Google Analytics