响应式设计的精典案例教学.docxVIP

响应式设计的精典案例教学（河南新华电脑学院）相比较与传统的网页开发设计，响应式网页设计是一个完全不同的形式，并且开发人员【尤其是年轻的开发人员】要知道响应式网页设计的利与弊。这篇博客就是一个能够说明响应式网页设计用途的一个很有用的例子。用来开发一个响应式网站最基础直接的可能就是选择“media queries”【媒体查询，即根据条件给相应符合条件的媒体调用相应的样式表】。然而唯一比较麻烦的是，新的查询可以在瞬间弹出，但每一次跳动，网页的外观和组织都会产生突然和急剧的变化。专家建议这种情况可以使用CSS来缓解页面的跳动。包含数据表的页面给响应式页面设计师带来了特殊挑战。数据表在默认的情况下是非常宽的，当用户缩小页面去看整个列表时，列表就会变得太小以至于难以阅读。但当你试着放大它以便可以阅读时，就只能通过水平或竖直的滚动页面来查看它。好吧，其实是有多种方式来避免这个问题的。转变数据表的形式为饼状图或者微型图形是已经被认可的一种解决方式。这种迷你图形更适合狭小的屏幕。图片在响应式页面设计中被称作情景感知。这独有的技术服务存在真正意义是在响应式设计中可以作为图像服务于不同的分辨率，从大屏幕到小屏幕都可以完美适应。缩放图像显然在更新开发者的工具和编码语言的帮助下更新的更加流畅，允许其在任何情况下都能更快反应。响应式页面设计与传统设计的技术和创意方面有着显著的不同，巧妙利用响应式设计在设计网站时就能得到惊人的效果。响应式网页设计实例Simon Collison尽管现在这个色调看起来灰蒙蒙的，网格式风格的网页看起来有点单调无趣，但是当这个网页发布时还是引起了一定程度上的热议，因为他那高档的布局。主要原因是设计师集中精力在网页的响应式交互上，这使得响应式设计能在最近开始流行，从而给普通设计师提供了一个典型事例，告诉普通设计师怎样让普通网格式布局的网页优雅转型。Andersson-Wise Architects我们来看一下这个建筑与设计工作室的网站，这个网站的主要焦点是以照片的形式来展示代表作品、以往经验以及公司的顾客，这样的设计方式并不奇怪。整个网站页面包括三个主要部分，每个部分都是以图片为背景。这个灵活的解决方案有效地为每个标准屏幕尺寸都匹配了一个恰当的布局。为读者提供了舒适灵活的网页内容。Stephen CaverStephen Caver是一个一流的响应式网站。你一定会问，他有什么特别。答案很简单，仔细看一下前面的页面，你就会知道，它包括：一个巨大印刷字体的欢迎消息；网站顶部有一个巨大的区域放置菜单；博客的规则布局。可以这样来说，每个网站都包含这三个基本方面。设计师给了我们一个对于网格式标记和博文根据设备的屏幕尺寸如何排版的正确示例。SparkboxSpeakbox 展示了一个企业网站的基本结构。布局相当简单，它是基于一个标准，通常使用一组横向色块使每一组数据都能有序排列。这样的结构是很容易适应各种屏幕尺寸的。按次序排列的色块即使发生变化也非常的顺利和灵活，给用户一个好看的和组织有序的布局。Food Sense这是一个普通的左侧博客风格杂志布局加上众多美味图片充斥的一块一块的布局的网站，这个网站展示了它是如何转化和适应不同分辨率的，并让用户看起来这些网站是同一个网站。然而，并没有什么一致的网页布局规律，这个是公认的典型解决方案，用来吸引移动网络的在线读者，赢得了新的用户。与此同时，网站解决了视觉过载的美学问题。The Boston Globe《波士顿环球报》是一个很好的例子，是一个经过用心规划的新闻类响应式网站。网站采用传统的方法,帮助那些需要运营自己经常更新的在线杂志的用户们，让他们能更好地使用网站功能。虽然网页很符合响应式规律，但是乍一看似乎网站有一点复杂,混乱的外表让人觉得难以处理，实际上解决方案非常原始。设计师已经明智地把所有信息分割成了3列，并根据屏幕的大小，而让数量增减,当屏幕变小时，布局从3列慢慢地递减至2列直到只能显示一列为止,这样就能有秩序的展现你的所有信息。Think Vitamin说实在的，Think Vitamin无法吹嘘任何关于它自身的博客设计。它的结构跟其他网站一样。整个网站右侧是一栏单列补充信息，一个网页导航、一个logo、一个搜索框以及一个页尾。然而，这个团队并不只是简单地使用基础的响应式结构；他们也积极地将设计元素集合起来。而且，对比色的色块有助于分辨内容区域和一些功能性元素例如社交的视频和广告，扩大了手机用户的可视区域以及加强了可读性。Sasquatch! Music FestivalSasquatch! Music Festival有大量的多媒体内容，包括视频和动态效果，此外网页上加入了一些艺术的手写体和梦幻的图形内容。因此对于这种组合而言，如何在手机和平板电脑上能正确地显示每一块内容就成了一个挑战