制作响应式Web设计的方法

时间：2017-10-14

   在制作响应式Web设计的时候,我们应该遵循以下设计流程
1.确定需要兼容的设备类型,屏幕尺寸,调查研究用户使用各种设备的分布情况,确定需要兼容哪些设备,哪些尺寸;
   目前市面上的移动设备和平板电脑的种类都很多,而且大多具有不同的屏幕尺寸,PC机显示器的尺寸也分了很多种,在设计响应式Web设计的时候,要充分考虑到手势功能,屏幕尺寸,横向和竖向,普通电脑屏幕和宽屏的设计.
   对于现有的网站,并非需要将网站上所有的页面都设计为响应式WEB页面,仅需要将移动设备可能访问比较频繁的页面设计为响应式的WEB页即可.
2.制作线框原型
  针对确定下来的几个尺寸分别制作不同的线框原型,需要考虑清楚在不同尺寸下,页面的布局如何变化,内容尺寸如何绽放,功能,内容如何删减,甚至针对特殊的环境作特殊化的设计等,这个过程需要设计师和前端开发人员保持密切沟通.
3.测试线框原型
   将图片导入到相应的设备进行一些简单的测试,可帮助我们尽早发现在可访问性,可读性等方面存在的问题.
4.视觉设计
    移动设备的屏幕像素密度与传统电脑屏幕不一样,在设计的时候需要保证内容文字的可读性,控件可点击区域的面积等.
5.前端实现
    与传统的WEB开发相比,响应式设计的页面由于页面而已,内容尺寸发生了变化,所以最终的产品更有可能与设计稿出入很大,需要前端开发人员和设计师多沟通.