响应式网站的设计流程 第一步：肯定需求兼容的设备类型、屏幕尺寸 经过用户研讨，理解用户运用的设备散布状况，肯定需求兼容的设备类型、屏幕尺寸。 设备类型：包括挪动设备（手机、平板）和pc。关于挪动设备，设计和完成的时分留意增加手势的功用。 屏幕尺寸：包括各种手机屏幕的尺寸（包括横向和竖向）、各种平板的尺寸（包括横向和竖向）、普通电脑屏幕和宽屏。 需求思索的问题： 手机让设计专注，强迫你想分明什么信息是最重要的。由于手机屏幕小，每屏呈现的内容少；触屏手机运用手指操作而非鼠标这样的精细设备来操作，对操 作有更高请求；手机运用场景愈加丰厚，很多场景用户是缺乏耐烦的，比方当你排队看电影正在找手机上的电子票，马上排到你了翻半天却迟迟找不到那张票这是多 么令人解体的事情。手机许多特性让设计更强大。手机上的语音输入、天文位置定位、丰厚的手势操作、越来越多传感器，手机交互比PC具有更多可能性。从手机开端设计，让你更早地考虑如何发挥这些特性。手 第二步：制造线框原型 依据手机端的框架拓展出平板和PC端框架。这是复杂产品完成响应式设计的关键步骤，它是让众多网站有条理地响应起来的根底。第一件事情是肯定响应式 形式，即从手机到平板到PC，导航怎样变化，网站规划用哪种响应方式，依据内容优先级如何调整模块次第，等等。玩客在PC端以三栏规划为主，左边栏作为局 部导航或者主人信息区，中间栏一直是网站主体信息，当网站需求关联导航时统一放在右边栏。 全局的四列等宽网格规划使其他组件的规划也十分轻松，在首页中有一个组件，其中包含若干内容模块，默许尺寸下，能够并排显现四个模块，左右两边各有一个触发滚动的按钮，以点击之后模块列表会前后滚动，以显现更多内容。 在平板电脑类型的规划中，默许显现的数质变为三个；而在手机的小尺寸屏幕中，内容模块列表会变为单列，并去掉了用于左右滚动的按钮，用户能够上下滚动网站，依次查看不同的模块。 相似的，其他触及到多列显现的组件和模块都需求做这样的思索，要理解不同设备的用户所习气的操作方式，同时分离该设备的屏幕宽度规格，设计出最合理的规划及交互方式。 第三步：测试线框原型 将图片导入到相应的设备停止一些简单的测试，可协助我们尽早发现可访问性、可读性等方面存在的问题。 第四步：视觉设计 留意，挪动设备的屏幕像素密度与传统电脑屏幕不一样，在设计的时分需求保证内容文字的可读性、控件可点击区域的面积等。 第五步：前端完成 与传统的web开发相比，响应式设计的网站由于网站规划、内容尺寸发作了变化，所以最终的产出更有可能与设计稿出入较大，需求前端开发人员和设计师多沟通。