Web体验的设计师:响应式网页设计的陷阱

文章简介:虽然响应式Web设计仍处于发展初期,但已经有很多指导和最佳实践,当你创建可跨设备工作的设计时可以采用。对于那些希望为使用不同设备的用户提供顶尖Web体验的设计师来说,则需要更多的思考与努力。

设计师们无法回避移动设备的大势所趋,当然在网站设计上有大量新的概念来迎合移动设备。但是单独的网站,无法在移动设备层出不穷的大潮中站稳脚跟。无论是在个人电脑、笔记本、智能手机、平板电脑、大屏幕手机、智能电视、上网本以及其它有前景的设备,都需引人入胜的设计。

响应式布局是这种情况下唯一理智的方式。

  尽管不是所有人确信响应式Web设计是未来的方向,但是响应式Web设计已经获得全世界Web设计师的广泛支持。 而我们许多人还是通过简单使用响应式Web设计来解决不同大小屏幕的布局问题——这解决了普通设计量用户体验差的问题。在我头几个响应式Web设计项目中,按我的工作方式已经犯了很多错误。 这里有我或其他响应式网页设计师曾经犯的3个错误。

陷阱 1: 网站加载时间过长

  构建响应式网站的缺点之一是你被迫将太多的资源压缩在一个页面中。你需要这些资源以便在不同设备上展示你的网站。大部分响应式网站在页面加载之前首先加载这些资源。毫无疑问,这个过程需要耗费大量时间。

  针对大部分使用笔记本、PC访问你网站的用户来说,似乎没什么问题。但如果在智能手机加载你的网站需要5至7秒之久,那么你将失去大量用户。智能手机用户不喜欢等,即便是1秒钟——短短的等待将产生致命的后果。所以,如何处理该问题呢?参照最佳实践,删减赘余,使用conditional loading这样的先进技术。

陷阱 2: 为小屏幕设备删减内容

  为智能手机提供更少的内容,已被广泛采纳。故意为移动用户提供低质量的用户体验,无疑是在折损你网站的利益。实际上,用户总是在不停地切换设备来完成各种任务。这就意味着,如果用户在他们的智能手机上找不到某一特定内容,那你也就失去了销售机会。

  更好的解决方案是以一种紧凑的、易于导航的格式显示所有信息。在设计中,可能需要花费更多努力,但这是值得去做的。请记住,即便你用CSS隐藏了特定信息,它仍会被下载的。所以要为移动用户提供完整的Web体验,不要丢弃任何东西。

陷阱 3: 忽视各设备间的相通之处

  响应式Web设计不仅仅针对PC和智能手机。在进行设计时,还要考虑到其他的众多设备。用户如何与平板电脑、互联网电视、智能手机进行交互,都需要考虑在内。这并不是说你要为所有的设备创建一个本地化的UI体验,但你可以根据各设备的环境为它们创建一个响应式导航,再分别创建出用户易于理解的设计。

总结

  虽然响应式Web设计仍处于发展初期,但已经有很多指导和最佳实践,当你创建可跨设备工作的设计时可以采用。对于那些希望为使用不同设备的用户提供顶尖Web体验的设计师来说,则需要更多的思考与努力。

时间: 2024-10-01 17:05:17

Web体验的设计师:响应式网页设计的陷阱的相关文章

高级设计师总结的15条响应式网页设计原则

1.计划 与往常一样,计划总是要放在第一优先级的.一旦你在纸上开始解决你的设计难题,你就已经准备好建立你的站点了. 2.充分利用好原型软件     推荐使用Adobe Edge Reflow,它能让你使用媒体查询,在程序内设置断点并设计适配桌面电脑.平板电脑和手机的布局.然后,你可以将CSS复制到另一个像Adobe Dreamweaver或者其他HTML编辑器来进一步优化你的设计. 3.首先考虑一个移动端策略 如果你是第一次创建手机网站,接着就可以扩大规模,在平板和桌面电脑上设计网页了.这三个平

响应式网页设计:很全的响应式网页设计教程

文章描述:响应式网页设计考虑到多平台.多种屏幕尺寸的情况,能够优化多种设备的网络浏览体验. 响应式设计现在已经成为网页设计师学习的焦点.网页教学网发现群内有很多相关的讨论了,这说明我们平时接触该类案例越来越多.你会渐渐发现,我们身边越来越多的企业和客户关注到响应式网站,作为勤奋的设计师,我们怎么能不对它进行了解呢? 响应式网页设计考虑到多平台.多种屏幕尺寸的情况,能够优化多种设备的网络浏览体验.当你不知道用户使用什么设备,不知道用户的屏幕尺寸时,若想达到较优布局,可以采用响应式设计.在进行响应式

移动互联网时代:响应式网页设计已成为大势所趋

我们正处在移动互联网快速发展的时代,智能手机和平板也越来越普及,有些人甚至都到了没有智能手机或平板就无法过活的地步.智能手机和平板的普及,也就意味着越来越多的用户会通过移动设备访问互联网. 通过移动设备访问互联网的用户或多或少都有过这样的经历:有些网站压根就没有针对移动设备的网站,哪怕是有,大多都是不够"移动友好",阅读体验完全跟不上传统的Web版本;而且在不同的移动设备上,浏览体验也是大相径庭,让很多用户大为苦恼. 根据相关数据统计,到2015年,移动互联网的用户数量将会超过桌面用户

来和小伙伴一起学习响应式网页设计

  响应式网页设计 过去,上网需要一台电脑,一个猫. 现在呢,手机.平板.电视都可以上网. Responsive Web Design, 由Ethan Marcotte编写, A Book Apart出版,对响应式设计的原则进行了详尽的阐述. 多种设备均能支持联网,有利有弊: 好消息是,我们可以随时随地登入互联网. 坏消息是,设计师的工作量成倍的增加了,而且用户变得越来越挑剔,越来越不耐心. 在这种大环境下,响应式设计变成了主流. 响应式设计所带来的挑战 进行响应式设计,挑战有很多. 首先,设备

响应式网页设计和移动互联网

文章简介:响应式网页设计被提出以来,争论就不断,其实核心问题只有两个个:太多的资源请求和有限的终端支持之间的矛盾.响应式的网页设计和移动终端在用户体验和视觉风格上的差异. 个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以先看下这个PPT. 移动互联网的现状和未来 在说到这个话题前,我们先看下网页设计和前端开发的现状: 全球有超过53亿手机

响应式网页设计

响应式网页设计,这个概念在国外相当火热.不管是交互设计,视觉,前端开发都投入到这个老意识新概念的技术当中. 首先我们看下什么是响应式网页设计.它为用户从他们的电脑切换到iPad.iPhone.黑莓.HTC.平板电脑等等,该网站能自动切换适应的分辨率,图像大小和脚本.换句话说,该网站能自动响应用户的喜好.通俗点说法就是有求必应的网页!  它不仅仅是一种趋势,而是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题. 前面说了,其实这个是一个设计问题

国外15个优秀的响应式网页设计教程

响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,它的理念是页面的设计与开发应根据用户行为以及设备环境(系统平台.屏幕尺 寸.屏幕定向等)进行相应的响应和调整.随着越来越多的设计师正使用响应式设计技术,这里就将分享国外15个优秀的响应式网页设计教程,以供学习借鉴. Beginner's Guide to Responsive Web Design Responsive Design in 3 Steps Techniques For Gracefully Degrading M

卢松松:响应式网页设计与SEO

所谓"响应式网页设计(Responsive Web Design)"也就是自适应,就是可以自动识别屏幕宽度.并做出相应调整的网页设计.目前这种设计已经出现在越来越多的国内网站上,目前Google已经明确表明鼓励响应式网页设计. (图一,响应式网页设计) 通常在浏览网页时,手机上和电脑上无法显示同一个网页,这也导致许多网页设计会自动转到特定的链接上,如上图所示,无论在PC端还是移动端,网页的显示其实都是一个版本,会随着屏幕的大小网页而改变. 下面是一些例子: (图二:响应式网页设计例子)

让你精通响应式网页设计的15条建议

响应式网页设计已经变成新的web标准,许多公司已经接受了这个挑战,并且已经建立起了专门的网页设计方案(比如只针对移动端的开发)或者已经开始试图解决跨平台的响应式网页设计方案.本文会带大家来看看一些实用的建议,以帮助你的设计过程,并使之变得更加高效. 1.计划 与往常一样,计划总是要放在第一优先级的.一旦你在纸上开始解决你的设计难题,你就已经准备好建立你的站点了. 2.充分利用好原型软件 推荐使用Adobe Edge Reflow,它能让你使用媒体查询,在程序内设置断点并设计适配桌面电脑.平板电脑