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

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

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.

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

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

一些工具

这里提供了一些有用的资源：

栅格

• Gridset
• Gridpak
• Twitter Bootstrap
• ZURB Foundation
• Inuit.css

字体

• Typecast
• Typekit

样式指南&模式库

• Styletil.es
• Brad Frost’s Pattern Lab
• Paul Robert Lloyd’s Barebones
• Pea.rs

案例研究

• David Bushell:

  上一页    123  下一页

  
  
  本文标签：响应式网页设计专题