响应式网页设计案例分享.pdfVIP

响应式网页设计案例分享 响应式设计让网页设计失去灵魂了吗 ？我们能否既让网页是响应式的 ，同时又拥 灵魂 ？ 我们得到的 栅格系统、流动布局成为标配给我们带来了很多好处 ： 1. 用户在使用网页时感到熟悉、轻松 ； 2. 制作原型 （相对 ）快速、简便 ； 3. 建站技术的高度标准化 ； 4 . 快速的布局可以节约成本 ； 5. 严格的网格布局促成了响应式设计 ； 这些标准化和组合技术带来了巨大的价值 ，无数的个人和小企业使用这样简单、吸引人 （但不独特 ）的网页设计与世界分享他们的 品牌并从中获益 ，然而这只是故事的一个方面。 我们失去的 这些设计都开始变得如此相似。 网页设计雷同的原因 版式布局 （LAYO UT ） 版式布局的局限性是网页设计缺乏变化最突出与明显的的原因之一。去除颜色 ，动画 ，视差滚动等 等这类效果 ，你会看到一些基本布局统治了网页设计。 响应式设计 （RESPO NSIV E W EB DESIGN ） 终端设备变多导致网页设计必须保证跨设备的用户体验良好。 基础的、可变宽、可折叠栅格系统使响应式网页的设计过程更简单 （相比版式设计更灵活的网页 ） 从而解决跨设备问题。 框架( FRA MEW O RKS ) Boot t rap与Fo undat io n的流行导致许多设计师直接套用一模一样的代码库、布局、甚至风格。 制作原型的工具与 程( PROT OT Y PING T O O LS A ND PRO CESSES ) 多数原型制作工具鼓励甚至迫使你使用标准的符合网格布局的方方正正的元素。 高质量的免费照片与图像(HIGH-Q UA LIT Y FREE PHOT O S A ND GRA PHICS) 免费好用的图片库成了设计师可以轻松获得的资源 ，还 图标、字体、样式等等。 设计趋势(DESIGN T RENDS) 设计师的所见所闻影响了他们的设计 ，网页设计将这一点充分放大了。结果就是许多设计师从同样 的网站获得灵感 ，追赶同样的潮流。 你和我 上面所列的工具和资源都是很 价值的 ，关键在于我们使用的方式。 如何挑战现状 – 一些例子 让布局变得奇怪 Pha e Magaz ine ：ht t p://www.pha e mag.co m Pha e Magaz ine的版式设计不同寻常 ，如果你觉得这样的设计很奇怪 ，那正是这个网站设计者想 要达到的效果 ，与众不同。 Curio u Space ：ht t p://www.curio u pace.co m Curio u Space的想法与Pha e Magaz ine差不多 ，网站的滚动和断点设置合理 ，体验良好 ，同时 在交互的过程中 一些小惊喜 ，比如鼠标hover住的图片会被置于顶层 ，logo 的字母部分会随着滚 动改变位置 ，最终变为整齐的两行文字 ，自然地变成导航栏的logo 。 Le Temp Dun T rajet ：ht t p:// let emp dunt rajet .f r/ 这个网站也是一个 趣的例子 ，它没 采用标准网格 ，但是排布没 让人感觉到分散 ，而 一种 意识的安排。 当鼠标hover到一张静态图片时 ，图片会变成一小段影片并放大 ，整个版式也会发生 趣的变化。( 去网站实际体验一下~) 不使用方块元素 Built By Buf f alo ：ht t p:// built bybuf f alo .co m Built By Buf f alo是一个个人作品集网页 ，在宽屏下设计师使用六边形代替了方块元素 ，而在窄屏下 才使用方块元素。 A nakin De ign St udio ：ht t p://www.anakin.co/en 巨大的蒙版字设计大胆, 令人印象深刻 ，在对作品的展示部分也没 选择简单的方块缩略图 ，而是在 缩略图中使用留白造成形状的变化。 Fixat e ：ht t p://f ixat e.it Fo r Bet t er Cof f ee : ht t p://f o rbet t er.cof f ee 这两个网页使用了看似复杂的插画元素 ，这些插画元素与极简化的趋势形成了鲜明的对比 ，给品牌 带来了独特的个性。 Fo r Bet t er Cof f ee以一颗咖啡豆变成一杯咖啡的历程将整个滚动下拉贯穿起来。 Happy Fun Co rp : ht t p://happyf unco rp.co m HappyFunCo rp网页的导航是由一整个首页插画形成的 ，看上去 点古怪。用户点击游乐