建站技术

呼应式页面不像传统页面只需考虑一种状况，不是交给一套规划稿就完事儿了，它给规划、前端和开发团队之间的协作形式带来新的应战。在一个杂乱商品全面呼应式的项目里，交互每个期间该产出啥?交互与视觉怎样协作?前端何时介入?哪些作业让后端开发来做更合理?阅历“玩客”榜首版后，咱们得到了一些答案。

呼应式规划之所以叫呼应式“规划”而不叫呼应式“技能”，是由于它是一项规划先行的作业。需求规划先清晰好呼应方法再完结出来，不能出一套规划稿后等着前端看状况把它变成呼应式页面。所以全部流程开端从交互期间开端，分红6个首要进程，视觉、前端、开发等人物依据状况尽早介入。

Step1：信息架构，断定内容战略。

依据商品定位和用户剖析，交互规划师断定站点信息架构。(信息架构出现方法有很多种，这不是本文要点，不详述)。

这时候能够清晰这个商品有多少页面，每个页面包括多少内容，内容优先级是啥。很多商品包括N多页面，每个页面一一考虑呼应式规划简单形成紊乱且本钱无穷。所以下一步主要作业是剖析页面类型把页面归类。以玩客为例，能够把10多个页面分红三类：列表类页面、概况类页面、操作类页面。

Step2：移动结构

先说下为啥第二步要先规划移动结构。移动优先是移动互联网浪潮下应运而生的理念，由Luke Wroblewski最早提出。移动优先并不是指移动更主要，呼应式规划理念里设备是平等主要的。它是指优先规划手机端的体会，有三个因素：

手机让规划专心，强迫你想明白啥信息是最主要的。由于手机屏幕小，每屏出现的内容少;触屏手机运用手指操作而非鼠标这样的精细设备来操作，对操作有更高请求;手机运用场景更加丰厚，很多场景用户是缺少耐性的，比方当你排队看电影正在找手机上的电子票，立刻排到你了翻半天却迟迟找不到那张票这是多么令人溃散的作业。

手机很多特性让规划更强壮。手机上的语音输入、地理方位定位、丰厚的手势操作、不断增加传感器，手机交互比PC具有更多也许性。从手机开端规划，让你更早地考虑怎样表现这些特性。

手机正在迅猛增加。手机行将逾越PC，变成最主流的上网方法，这个趋势是不可逆的。

从移动开端做规划对习气了PC环境的规划师也许是一种应战，考虑方法作业习气都被逼做出改动。但这种改动有必要去习气，由于用户习气在改动。

回正题，上一步现已把页面归类并断定每个页面内容优先级，如今接着剖析每品种型页面的导航、主体内容等结构结构，最终得出一份结构结构表。从玩客结构结构看出，大局导航是所有页面公共的，部分导航只要列表类页面才有，概况类页面都有一个“页面主人”信息，而相关导航不是每个页面都有。

接着开端规划手机端“超细长页面”的结构(由于手机上一般是单列规划，所以页面又细又长)。这一步开端把信息结构规划成最粗豪的结构，能够在白板或纸面上完结。要完结的关键方针是：把这个页面最需求出现给用户的内容放在最主要的方位，要契合手机上的阅览和操作习气，尽量运用手机设备的特性。

Step3：呼应式结构

依据手机端的结构拓展出平板和PC端结构。这是杂乱商品完结呼应式规划的关键进程，它是让很多页面有条理地呼应起来的根底。榜首件作业是断定呼应式形式，即从手机到平板到PC，导航怎样改动，页面规划用哪种呼应方法，依据内容优先级怎样调整模块顺序，等等。玩客在PC端以三栏规划为主，左面栏作为部分导航或者主人信息区，中心栏始终是页面主体信息，当页面需求相关导航时一致放在右边栏。

到如今这个期间所有页面的呼应式开端有规矩可循，下一步作业即是持续细化规矩，把结构准确到详细尺寸。详细说来即是拟定流体栅格体系。流体栅格体系是根据百分比的栅格规划工具，详细的拟定方法会在别的一个华章【常识篇】中详细介绍。

呼应式是一种规划理念与前端技能紧密联系的新式形态，鼓舞尽早进行跨功能沟通协作。交互断定呼应式结构和栅格体系后，别的人物就能够同步开展作业了。前端开端介入完结栅格和结构建立，产出页面根底结构。视觉同步开端探究和定义视觉个性探究，拟定视觉结构，产出个性关键字、商品配色计划。全部进程需求几个人物不断评论断定。