BeFor Web
为网而生 - 关注移动互联网及AR/VR产品的用户体验设计

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

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

网页视觉设计

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

responsive-web-design-additional-ui-style

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

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

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

responsive-web-design-homepage-versions

 

前端构建

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

  • 关于图片尺寸

     

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

  • 使用高级CSS

     

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

  • 及时沟通

     

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

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - 交互设计师、UX热爱者、译者、猫奴、音乐玩家,现就职于大众点评网用户体验设计部(DPUX)
评论 (5)
请教一下。响应式网站的页面设计是需要将移动设备的也要做出来么?
对制作“线框原型”的工具很感兴趣,可以告知你用的工具名称么?谢谢。
我自己一直用Axure;接下来一篇文章介绍了一些实用的线框原型辅助工具,欢迎关注=)
文章内容质量很高。网站的信息架构很轻,UI小清新,翻页设计的体验不友好:当前页提示、其他页交互,首页尾页、前页后页,交代信息过多增加用户思考、选择成本,在任务流上必要性不强。
收到,对这些建议真心表示感谢;欢迎多指正 =)
发表评论