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

响应式网页不像传统网页只需考虑一种状态,不是交付一套设计稿就完事儿了,它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里,交互每个阶段该产出什么?交互与视觉如何协作?前端何时介入?哪些事情让后端开发来做更合理?经历“玩客”第一版后,我们得到了一些答案。

响应式设计之所以叫响应式“设计”而不叫响应式“技术”,是因为它是一项设计先行的工作。需要设计先明确好响应方式再实现出来,不能出一套设计稿后等着前端看情况把它变成响应式网页。所以整个流程最初从交互阶段开始,分成6个主要步骤,视觉、前端、开发等角色根据情况尽早介入。

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

根据产品定位和用户分析,交互设计师确定站点信息架构。(信息架构呈现方式有很多种,这不是本文重点,不详述)。

这时候可以明确这个产品有多少页面,每个页面包含多少内容,内容优先级是什么。很多产品包含N多页面,每个页面一一考虑响应式设计容易造成混乱且成本巨大。所以下一步重要工作是分析页面类型把页面归类。以玩客为例,可以把10多个页面分成三类:列表类页面、详情类页面、操作类页面。

Step2:移动框架

上一步已经把页面归类并确定每个页面内容优先级,现在接着分析每种类型页面的导航、主体内容等框架结构,最终得出一份框架结构表。从玩客框架结构看出,全局导航是所有页面公共的,局部导航只有列表类页面才有,详情类页面都有一个“页面主人”信息,而关联导航不是每个页面都有。

接着开始设计手机端“超细长页面”的框架(因为手机上一般是单列布局,所以页面又细又长)。这一步开始把信息结构设计成最粗放的框架,可以在白板或纸面上完成。要实现的关键目标是:把这个页面最需要呈现给用户的内容放在最重要的位置,要符合手机上的阅读和操作习惯,尽量利用手机设备的特性。

Step3:响应式框架

根据手机端的框架拓展出平板和PC端框架。这是复杂产品实现响应式设计的关键步骤,它是让众多页面有条理地响应起来的基础。第一件事情是确定响应式模式,即从手机到平板到PC,导航怎么变化,页面布局用哪种响应方式,根据内容优先级如何调整模块顺序,等等。玩客在PC端以三栏布局为主,左边栏作为局部导航或者主人信息区,中间栏始终是页面主体信息,当页面需要关联导航时统一放在右边栏。

响应式设计是一种设计理念与前端技术紧密结合的新兴形态,鼓励尽早进行跨职能沟通协作。交互确定响应式框架和栅格系统后,其他角色就可以同步开展工作了。前端开始介入完成栅格和框架搭建,产出页面基础框架。视觉同步开始探索和定义视觉风格探索,制定视觉框架,产出风格关键词、产品配色方案。整个过程需要几个角色不断讨论确定。

Step4:模块设计

按照移动优先的原则应该先进行移动端的模块细节设计,不过我们选择了从PC端开始设计细节。因为PC端开发能够充分暴露业务复杂度,项目团队的设计、开发、测试在PC环境下拥有成熟的工具和流程,从PC开始让开发过程更顺畅。所以个人认为移动优先是确定内容策略时应该遵循的理念,细节设计和开发过程是否要移动优先,取决于产品定位和项目团队情况。

响应式框架确定了页面结构和响应模式,模块设计这个过程开始完善所有信息排版和交互形式,这是交互设计师最熟练也是最耗时的工作。这个过程与传统流程没太大区别,只是心里要不断提醒自己,这个模块不是只为这个设备设计,它在其它设备下会出问题吗?

Step5:响应式模块设计

PC端页面模块细节和风格拼贴稿完成后,剩下工作是拓展出平板和手机端的完整设计稿,前端产出全部响应式页面代码。进行响应式模块设计时最需要关注的仍然是让操作符合设备习惯,充分利用设备特性。

至此,一个全站响应式产品的页面就陆续出来了。很多人认为响应式设计维护成本高的理由是一个页面要同时设计多套设计稿。玩客这次经验告诉我们,确定一套设计稿和栅格系统后再拓展出其它设备下的设计方案,工作量远比想象中的低。

Step6:测试&讨论&优化,提交开发

离大功告成还差最后一步,在真实设备下测试页面效果,项目团队讨论并持续优化。

在提交开发之前需要尽早明确服务端响应(RESS)的策略。服务端与客户端结合是目前解决响应式页面性能问题的最合理方案。哪些大图片在移动设备下只需输出小尺寸图片?哪些内容在什么设备下是不需要开发输出的?哪些可以减少输出的数据数量?与开发团队协作的响应式可以有效控制页面文件大小,避免页面成为移动设备上烧用户流量的罪魁祸首。

复杂产品的响应式设计流程,布布扣,bubuko.com

时间: 2024-10-14 13:06:11

复杂产品的响应式设计流程的相关文章

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

转载:http://ued.taobao.org/blog/2013/05/复杂产品的响应式设计[流程篇]/ 响应式网页不像传统网页只需考虑一种状态,不是交付一套设计稿就完事儿了,它给设计.前端和开发团队之间的协作模式带来新的挑战.在一个复杂产品全面响应式的项目里,交互每个阶段该产出什么?交互与视觉如何协作?前端何时介入?哪些事情让后端开发来做更合理?经历“玩客”第一版后,我们得到了一些答案. 响应式设计之所以叫响应式“设计”而不叫响应式“技术”,是因为它是一项设计先行的工作.需要设计先明确好响

响应式设计的一些问题

在我们介入具体项目开发流程前,我们应该已经确认了自己产品所面向的内容消费群体,以及潜在目标用户,比如简单的只面向小屏幕的移动用户群或者我们要囊括所有的显示设备(mobile.pad.pc等等). 当我们确定目标用户的内容消费习惯的同时,我们应该也对他们的访问习惯.时段等等做一些初步分析.这不仅仅面向一个响应式站点,这对产品定位到开发都有决策作用. 在移动博客项目前期的产品分析中我们能看到,随着时代的前进用户内容的消费习惯也在发生着变化. 响应式产品设计 响应式设计是从产品角度来进行的设计,在这个

响应式设计的现状与趋势

从2012年开始到2014年,各大家对Web设计的趋势预测中,都提到响应式设计:2015年网页设计趋势预测中,响应式仍在继续.这个经历了几年依然大热的响应式,在过去的几年里,快速巩固了自己的地位,并掀起了一股网页设计新标准的浪潮.这里本人基于一些资料文献及自己的陋见,谈谈响应式设计的一些现状和趋势. 源起 2010年5月,伊桑.马科特(Ethan Marcotte)在"A List Apart"写了一篇开创性的文章(题为"Responsive Web Design"

学习响应式设计(Learning Responsive Web Design)完整版PDF

想要为平板.手机.笔记本.大屏幕设备,甚至可穿戴设备提供最优的用户体验?那就学习响应式设计吧.这是一本内容特别全面.讲解非常透彻的入门书.特别地,通过这本书不仅能迅速掌握响应式Web设计的基本原理,还能够从头到尾了解响应式设计的工作流程:从项目启动开始,到项目最终上线为止. 只要你的工作与创建.改造或者升级网站有关系,都应该看看这本书.换句话说,不仅是前端开发人员,设计师.产品经理.项目经理,甚至后端开发人员也可以通过本书掌握响应式设计的精髓所在.这本书基于响应式设计的前沿技术和社区经验写成,汇

Responsive Design ------响应式设计

什么是响应式设计呢?维基百科是这样对响应式作的描述:“Responsive设计简单的称为RWD,是精心提供 各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格.”从这一点描述来说,RWD不是流体布局,也不是网格布局, 而是一种独特的网页设计方法. 响应式设计要考虑元素布局的秩序,而且还需要做到“有求必应”,那就需要满足以下三个条件:网站必须建立灵活的网格基础:引用到网站的图片必须是可伸缩的:不同的显示风格,需要在Media Queries上写不同的样式. 要想

漫谈一下响应式设计网站

响应式设计中的界面设计 对于界面设计,我们以前针对桌面产品的设计可能就是一个尺寸的,每个模块的位置比较固定,但是在响应式设计中,这些东西就改变了,设计师会根据产品 的需要设计多个版本的设计,在这些不同的版本中,模块A在1024的宽度下,可能会是黑色背景,但是到了768下面可能会变成白色背景,实现了在不同宽度 的不同展现.这里面颜色.背景.宽高等都可改变,但是有一点我们需要注意的是 DOM 节点的顺序最好保持一致,因为在响应式设计的页面中,我们会使用流式布局,在固定版式通过绝对定位或者外边距负值的

响应式设计第一章

1.支持小屏幕设备的重要性 2.什么是移动网站设计 3.什么是响应式设计 4.视口和屏幕的区别 5.使用HTML5和CSS3 总结: 1.由于市场智能手机浏览器使用量大幅度的上涨,已经超越了PC端的网上浏览内容. 2.针对移动端的网站设计,针对不同手机端的设备宽度做不同的网页内容的展示 3.响应式设计一句话就是根据不同的设备端展现出客户更加关注的内容和合理布局,让用户有更好的视觉和使用体验 4.视口是指浏览器窗口内的内容区域不包括工具栏,标签栏.屏幕尺寸是指设备的物理显示区域,包含浏览器的其他的

web设计经验<一> 提升移动设备响应式设计的8个建议

第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体验一般用户是没什么耐心的,这对于双方来说都不是好事.设计师和开发人员一定要牢记,在移动web环境中,动力是一个很关键的因素,漫长的响应时间加上杂乱的界面再加上不给力的移动设备(虽然最新的移动设备一般都很给力,但是如果在同时运行着10个游戏外加开着聊天软件另外网速也不好的情况下呢)就无法保证达到“一般性”的web体验,因此直观性具有很重要的作用. 直观不代表空白.丑

使用 jQuery Mobile 和 CSS3 实现响应式设计

使用 jQuery Mobile 和 CSS3 实现响应式设计 创建可以适应每个用户的屏幕分辨率的 Web 页面布局 jQuery Mobile 框架就其本身而言就是一个优秀的解决方案,可以快速创建一个可访问的由 HTML5 标记驱动的移动网站.当与 CSS3 配合使用时,工作真的会变得很有趣,因为它使创建一个根据屏幕分辨率来响应用户设备的 Web 页面布局成为可能.本文展示了如何使用 jQuery Mobile 框架和 CSS3 媒体查询在您的 Web 页面中实现响应式设计. jQuery M