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

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

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

依据商品定位和用户剖析，交互规划师断定站点信息架构。（信息架构出现办法有很多种，这不是这篇文章重点，不胪陈）。

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

Step2：移动构造

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

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

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

3. 手机正在迅猛增加。手机即将逾越PC，成为最主流的上网办法，这个趋势是不可逆的。

从移动开端做规划对习气了PC环境的规划师可能是一种应战，考虑办法作业习气都被迫做出改动。但这种改动必须去适应，由于用户习气在改动。

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

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

Step3：呼应式构造

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

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

呼应式是一种规划理念与前端技能紧密结合的新式形状，鼓舞尽早进行跨职能交流协作。交互断定呼应式构造和栅格体系后，别的人物就能够同步开展作业了。前端开端介入完结栅格和构造建立，产出页面根底构造。视觉同步开端探究和界说视觉个性探究，拟定视觉构造，产出个性要害词、商品配色计划。悉数进程需求几个人物不断评论断定。

Step4：模块规划

按照移动优先的准则应当先进行移动端的模块细节规划，不过咱们挑选了从PC端开端规划细节。由于PC端开发能够充沛露出事务杂乱度，项目团队的规划、开发、测验在PC环境下具有老练的东西和流程，从PC开端让开发进程更顺利。所以个人以为移动优先是断定内容策略时应当遵从的理念，细节规划和开发进程是不是要移动优先，取决于商品定位和项目团队状况。

呼应式构造断定了页面构造和呼应方式，模块规划这个进程开端完善一切信息排版和交互方式，这是交互规划师最娴熟也是最耗时的作业。这个进程与传统流程没太大差异，仅仅心里要不断提醒自个，这个模块不是只为这个设备规划，它在其它设备下会出疑问吗？

交互断定页面模块细节后能够抽取出商品用到的控件、组件和公共模块，如今视觉和前端开端做一件有别于传统流程的作业。视觉依据前期界说的个性规划控组件和公共模块的视觉效果，把它们拼成一个模仿的页面，咱们称之为个性拼贴稿。前端再把个性拼贴稿里的控组件和公共模块完结出来，一致保护一套组件标准代码。

传统的做法往往是页面视觉定稿后规划师开端收拾视觉标准标示给前端。个性拼贴稿是将这个作业尽可能提早，并成为一个规划协作利器。它的优点是：

1、一个页面的视觉效果实际上是由成堆控组件和公共模块构成，用实在的控组件和公共模块拼贴的模仿页面现已能够出现出商品的视觉个性。把一个商品10多个页面的视觉稿悉数完结定稿是十分费时吃力的作业，产出一份个性拼贴稿则轻松得多。所以它是一个高效的规划东西。

2、杂乱商品老是触及多个规划师和前端并行作业，尽早地把控组件和公共模块抽取出来一致管理，是确保视觉个性一致性的有用办法。避免不一样规划师一起规划同一个控组件或公共模块，削减重复开发形成的糟蹋。也大大下降后期更新和保护页面的本钱，比方当需求修正“重视”按钮时只需改一个就能全站收效。

Step5：呼应式模块规划

PC端页面模块细节和个性拼贴稿完结后，剩余作业是拓展出平板和手机端的完好规划稿，前端产出悉数呼应式页面代码。进行呼应式模块规划时最需求重视的仍然是让操作契合设备习气，充沛使用设备特性。

至此，一个全站呼应式商品的页面就陆续出来了。很多人以为呼应式规划保护本钱高的理由是一个页面要一起规划多套规划稿。玩客这次经验通知咱们，断定一套规划稿和栅格体系后再拓展出其它设备下的规划计划，作业量远比幻想中的低。

APP开发公司  www.dongweinet.cn