网站策划

您的位置:首页 > 网站专题 > 网站策划 > 详细内容

复杂产品的响应式设计流程

2017-09-17 21:00   来源:网络整理 [ ]

相应式计划 产物计划 产物运营 产物推广 Web相应式计划

相应式网页不像传统网页只需思量一种状态,不是交付一套计划稿就完事儿了,它给计划、前端和开拓团队之间的协作模式带来新的挑衅。在一个伟大产物全面相应式的项目里,交互每个阶段该产出什么?交互与视觉怎样协作?前端何时参与?哪些工作让后端开拓来做更公道?经验“玩客”第一版后,我们获得了一些谜底。

相应式计划之以是叫相应式“计划”而不叫相应式“技能”,是由于它是一项计划先行的事变。必要计划先明晰好相应方法再实现出来,不能出一套计划稿后等着前端看环境把它酿成相应式网页。以是整个流程最初从交互阶段开始,分成6个首要步调,视觉、前端、开拓等脚色按照环境尽早参与。

伟大产物的相应式计划流程

Step1:信息架构,确定内容计策。

按照产物定位和用户说明,交互计划师确定站点信息架构。(信息架构泛起方法有许多种,这不是本文重点,不详述)。

这时辰可以明晰这个产物有几多页面,每个页面包括几多内容,内容优先级是什么。许多产物包括N多页面,每个页面逐一思量相应式计划轻易造成紊乱且本钱庞大。以是下一步重要事变是说明页面范例把页面归类。以玩客为例,可以把10多个页面分成三类:列表类页面、详情类页面、操纵类页面。

伟大产物的相应式计划流程

Step2:移动框架

先说下为什么第二步要先计划移动框架。移动优先是移动互联网海潮下应运而生的理念,由Luke Wroblewski最早提出。移动优先并不是指移动更重要,相应式计划理念里装备是平等重要的。它是指优先计划手机端的体验,有三个缘故起因:

手机让计划专注,强制你想清晰什么信息是最重要的。由于手机屏幕小,每屏泛起的内容少;触屏手机行使手指操纵而非鼠标这样的慎密装备来操纵,对操纵有更高要求;手机行使场景越发富厚,许多场景用户是缺乏耐性的,好比当你列队看影戏正在找手机上的电子票,顿时排到你了翻半天却迟迟找不到那张票这是何等令人瓦解的工作。

手机很多特征让计划更强盛。手机上的语音输入、地理位置定位、富厚的手势操纵、越来越多传感器,手机交互比PC拥有更多也许性。从手机开始计划,让你更早地思索怎样施展这些特征。

手机正在迅猛增添。手机即将逾越PC,成为最主流的上网方法,这个趋势是不行逆的。

从移动开始做计划对风俗了PC情形的计划师也许是一种挑衅,思索方法事变风俗都被迫做出改变。但这种改变必需去顺应,由于用户风俗在改变。

回正题,上一步已经把页面归类并确定每个页面内容优先级,此刻接着说明每种范例页面的导航、主体内容等框架布局,最终得出一份框架布局表。从玩客框架布局看出,全局导航是全部页面民众的,局部导航只有列表类页面才有,详情类页面都有一个“页面主人”信息,而关联导航不是每个页面都有。

伟大产物的相应式计划流程

接着开始计划手机端“超细长页面”的框架(由于手机上一样平常是单列机关,以是页面又细又长)。这一步开始把信息布局计划成最粗放的框架,可以在白板或纸面上完成。要实现的要害方针是:把这个页面最必要泛起给用户的内容放在最重要的位置,要切合手机上的阅读和操纵风俗,只管操作手机装备的特征。

伟大产物的相应式计划流程

Step3:相应式框架

按照手机端的框架拓展出平板和PC端框架。这是伟大产物实现相应式计划的要害步调,它是让浩瀚页面有层次地相应起来的基本。第一件工作是确定相应式模式,即从手机到平板到PC,导航怎么变革,页面机关用哪种相应方法,按照内容优先级怎样调解模块次序,等等。玩客在PC端以三栏机关为主,左边栏作为局部导航可能主人信息区,中间栏始终是页面主体信息,当页面必要关联导航时同一放在右边栏。

伟大产物的相应式计划流程

到此刻这个阶段全部页面的相应式开始有法则可循,下一步事变就是继承细化法则,把框架准确到详细尺寸。详细说来就是拟定流体栅格体系。流体栅格体系是基于百分比的栅格机关器材,详细的拟定要了解在其它一个篇章【常识篇】中具体先容。

伟大产物的相应式计划流程

相应式是一种计划理念与前端技能细密团结的新兴形态,勉励尽早举办跨职能雷同协作。交互确定相应式框架和栅格体系后,其他脚色就可以同步开展事变了。前端开始参与完成栅格和框架搭建,产出页面基本框架。视觉同步开始试探和界说视觉气魄威风凛凛试探,拟定视觉框架,产出气魄威风凛凛要害词、产物配色方案。整个进程必要几个脚色不绝接头确定。

本页关键词:产品运营,产品设计,Web响应式设计,产品推广,响应式设计,

上一篇:小谈用户体验:让访客反感的12种网页设计 下一篇:大型网站架构系列:负载均衡详解(上)