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

   响应式网页设计

  过去,上网需要一台电脑,一个猫。

  现在呢,手机、平板、电视都可以上网。


  Responsive Web Design, 由Ethan Marcotte编写, A Book Apart出版,对响应式设计的原则进行了详尽的阐述。

  多种设备均能支持联网,有利有弊:

  好消息是,我们可以随时随地登入互联网。

  坏消息是,设计师的工作量成倍的增加了,而且用户变得越来越挑剔,越来越不耐心。

  在这种大环境下,响应式设计变成了主流。

  响应式设计所带来的挑战

  进行响应式设计,挑战有很多。

  首先,设备种类、屏幕尺寸多种多样。小、中、大各种各样。其次,倘若你是开发者,你会明白从技术角度上,响应式设计实现起来也不容易。


  mediaqueri.es 提供了很多优秀的响应式设计案例

  在任何项目上进行响应式设计时,都要优先考虑内容,考虑到内容与整体设计的结合,考虑到内容是怎样在页面中表现的。你需要观察不同元素在页面中是怎样紧密结合、协同工作,从而保持一致而又整体的风格的。

  在这种尺寸下,元素可以这样布局,进行响应式设计时,你还需要琢磨琢磨其他尺寸的布局。如何将大尺寸页面转换到小尺寸页面?如何将小尺寸页面转换到大尺寸页面?如何保证多种尺寸下浏览体验的一致性?

  如何说服客户使用响应式设计?

  网页设计是一个时效性很强的行业,我们需要紧跟趋势潮流,不断学习。响应式设计就是这个时代最值得学习、时间的趋势。


  Greenbelt Festival 是一例非常值得学习的响应式网页设计,图像来源mediaqueri.es.

  网络术语真是越来越流行了,现在即便是客户,也略知一二,很多客户对设计的了解也不浅。那么怎么说服客户呢?下面我将讲一点和客户沟通的技巧,让客户接受响应式设计(相应的,工钱你懂的)。

  投其所好

  在任何项目的开始阶段,都要明白、了解、分析客户的需求。

  在满足客户预期的基础上,尽量让客户能够完全的理解你的设计。


  一款美丽的响应式设计Modern Green Home ,图像来源 mediaqueri.es.

  你要知道客户想要什么。在你的大脑中转换成术语后,再用平易近人的语言讲出来。

  例如,客户可能会说他想要让网站在”iPhone、iPad上都能良好运作”。这种情况下,我一般会说”好啊——那么响应式技术就能实现,能够在任何设备上良好运作,而不仅仅是iPad和iPhone”

  如果你的客户稍微懂一点,那么估计合作会很愉快。


  Stuff & Nonsense 网站是响应式设计的有先例,根据屏幕尺寸的不同,选择不同的插画,蛮有趣,图像来源mediaqueri.es.

  可以化点时间来给客户做科普,这样客户能更好的理解你的作品,沟通起来就很流畅。

  响应式设计一些技术和建议

  那么怎么打造响应式设计呢?


  The Great Discontent 的访谈很知名,同时也是优秀的响应式设计案例,图像来源mediaqueri.es.

  有没有最佳答案?答案是没有最佳答案,每个人的开发流程、设计流程都不一样。

  不过呢,还是有几种方法值得推荐,以及一些建议,希望其中一些能够对你有所帮助,你可以汲取几条,并进行结合。要注意多实验,多尝试不同的方法,看看哪种最适合。

  利用图像工具设计

  利用PS和其它工具创建一个固定宽度的模型,这种方法可能是大多数人设计网站的方法。但是依然有效。利用图像工具能够更直观的布局。


  UX London 2013 伸缩自如,非常优雅的响应式设计,图像来源 mediaqueri.es.

  但是不要太死板,为每一种尺寸都单独的设计模型,否则你肯定会因耗时太长而抓狂。可以利用线框图,不必过于精细,多多思考一下内容、尺寸、布局三者变化关系,怎么整个?怎么改变?

  哪里变动较小?哪里变动较大?在开始编码前,这些都要了然于胸。

  在浏览器里进行设计

  这个有一点争议性。最近网上关于此话题的争论很多


  WWF 的响应式设计,图像来源mediaqueri.es.

  在浏览器内进行设计,指的是当完成线框图阶段之后,直入浏览器,利用各种在线工具,开始设计。而不用任何图像工具。

  如果你能有效的运用在线工具,那么这种发很好用。

  但是很多设计师认为这样设计会限制创意,无法打造更优秀的视觉。


  The Next Web 的网站,即便在小屏幕上,内容组织也依然有序,图像来源mediaqueri.es.

  但是对开发者来说,他们更习惯使用代码,无疑,浏览器式设计对他们更合适。

  案例:


  CSS Tricks


  微软

  在浏览器中做决定

  这是个人最爱的一种方法。可以在图像软件里完成一点工作,利用在线工具和浏览器再完成一点工作。

  而且我认为,想要检验网页设计的优劣,必须要在浏览器里检验。

  而且字体经常在浏览器中发生变化,利用浏览器检查设计,是很好的办法,能帮助你迅速改正设计。


  Microsoft 的响应式设计蛮有意思:利用图像的裁剪和分割,在不同的设备中体现差不多的效果。图像来源fmediaqueri.es.

  而且这种办法更加灵活,既能用图像工具优化设计,而且还能用浏览器鞥更好的检查设计,查看结果。

  内容优先, 移动优先还是沿袭桌面?

  首先要记住,无论怎样,内容有限。内容是设计的核心,是用户浏览的主题。


  Philip House 是个从大到小、沿袭桌面的设计,很有创意,图像来源 mediaqueri.es.

  其次,不管你的设计是移动优先(从小尺寸布局开始,逐渐扩大尺寸)也好,还是沿袭桌面(从全尺寸桌面布局开始设计,逐渐缩小)也罢,一切取决于你的习惯和具体情况。

  从小到大能获得更好的兼容性、一致性。从大到小能更具创意。

时间: 2024-07-31 12:40:19

来和小伙伴一起学习响应式网页设计的相关文章

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

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

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

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

FROONT在线可视化响应式网页设计工具

  Froont是一个允许设计师在线设计响应式网页的工具,不需要程序员介入的设计编程工具,为设计师们提供了可视化的在线网页设计环境,绝对是响应式网页设计的利器.如果你还在为用PS画出网站在不同设备上的 demo 图,并和攻城师苦苦兼容各浏览器而懊恼的话,来试试Froont吧! 制作过程中,Froont会根据你的网页将呈现的设备:比如手机.平板.笔记本或者是宽屏电脑,自动调整页面布局,适应各个块之间的相对位置. 嗯,如果你有神马不懂的,可以看首屏那个视频,戳 Watch video 即可,了解后再

bootstrap响应式网页设计的9条基本原则!

bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单独使用像素设计的方法也成为了过去,因为越来越多的设备都可以打开网站.因此,我们需要弄清楚bootstrap响应式网页设计的一些基本原则,接受流体网页,而不是与之相抗.为了让它保持简单,我们将着眼于布局(是的,响应式比它更复杂,如果你想了解更多,这是一个很好的开端.) 响应式 vs 自适应网页设计 它

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

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

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

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

响应式网页设计:国外的很赞的响应式网页设计案例

文章简介:来欣赏一些国外的一些很赞的响应式网页设计,看看他们是如何实现对PC端浏览器和移动终端的全面支持的. 上一篇中我们了解了一下响应式网页设计是什么,现在趁热打铁,来欣赏一些国外的一些很赞的响应式网页设计,看看他们是如何实现对PC端浏览器和移动终端的全面支持的. 想要查看效果很简单,打开这些页面,然后缩放浏览器窗口就可以了--当然,要用chrome/safari/firefox/opera等浏览器,IE请绕道-- 当然,如果你有发现国内有好的类似设计 food sense Forefathe

响应式网页设计

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

响应式网页设计中24个杰出的作品范例

响应式网页设计(Responsive web design)是一种现代网页设计方法,其理念是页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调 整.响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题.这里就将为设计者们展示响应式网页设计中24个杰 出的作品范例. Reveal: A Responsive WordPress Theme hanging up the moon Sunday Best Desig