案例学习 - 响应式网站的产品需求和设计流程详解: Page 3 of 3

案例学习 - 响应式网站的产品需求和设计流程详解

C7210 发表于 2011-11-06 10:45

网页视觉设计

相比于传统的Web视觉设计过程，在这里我们不仅要打造出风格恰当的UI元素，而且要根据前面制定下来的几种规格方案，对某些关键性的UI元素进行样式扩展或改造。例如下图所示的酒店搜索模块，正如我们前面提到的，在小屏幕版本中，最佳实践方式是做成可展开和收起的模式，而这种交互方式在平板电脑或桌面设备中是不需要的。类似这样情况，在视觉设计方面需要花些额外的功夫。

responsive-web-design-additional-ui-style

在视觉设计过程中，有一些很实际的经验和原则：

尽量保持小屏幕规格样式的简洁；在UI元素风格方面，可以多与前端开发人员交流，尽量采用可以通过CSS3实现的常规风格样式，减少背景图片的使用。
要保证内容的字体字号在所有设备中都足够可读，尤其是在手机上。
与传统Web设计开发相似，最终产出的页面必定会与视觉稿有所出入；尤其对于响应式站点来说，由于在布局结构和细节样式等方面都需要有调整变化的能力，所以在开发过程中产生设计还原度方面问题的几率会更大。仍然要强调一点，就是在项目前期和中期保持设计师与开发者之间的交流与沟通，尽可能早的发现各类潜在问题。

下图就是针对三种设备规格的首页最终视觉稿。

前端构建

来看一些在前端构建的过程中需要注意的问题；关于技术性的细节问题，仍不会在这里过多讨论。(技术实施方面，可以参考我们之前的文章“通过CSS3 Media Query实现响应式Web设计”)

关于图片尺寸

对于小屏幕规格的设计方案，即使我们通过CSS缩小其显示尺寸，在文件资源方面仍然是要加载完整的大图的。所以我们在优化保存文件图片的时候要尽可能的让文件更小。不过另外有些方法，可以帮助我们真正实现图片文件的响应化。大致思路是，通过JavaScript判断当前设备的分辨率规格范围，并根据预设的规则加载不同尺寸的图片文件。详情可以参考我们之前文章中关于响应式图片的部分。
使用高级CSS

让客户或需求方理解“渐进增强，平稳退化”的思路是很重要的，对于传统Web设计开发也是如此。对响应式站点来说，CSS3在降低资源消耗、提高页面加载速度等方面的作用尤为重要。
及时沟通

正如我们在前文中多次强调的，保持设计师与开发者之间的密切沟通和交流，对于项目的顺利进展会起到不可估量的作用；换个角度说，如果这方面做的不好，很多致命的潜在问题则有可能在项目后期集中爆发出来。