首页 > 教程 > 关键词 > 响应式布局最新资讯 > 正文

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

2013-05-22 16:59 · 稿源:淘宝UED

都说2013年将是响应式设计爆发的一年。一淘设计团队在去年一淘首页改版时初步尝试了响应式,最近在一淘“玩客”项目中有了更加深入地应用,第一次在复杂产品中实现了全站响应式。中间积累了一些经验也踩了不少坑,于是就有了这个响应式设计三部曲,此系列文章包含理念篇、知识篇和流程篇。

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

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

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

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

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

Step2:移动框架

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

手机让设计专注,强迫你想清楚什么信息是最重要的。因为手机屏幕小,每屏呈现的内容少;触屏手机使用手指操作而非鼠标这样的精密设备来操作,对操作有更高要求;手机使用场景更加丰富,很多场景用户是缺乏耐心的,比如当你排队看电影正在找手机上的电子票,马上排到你了翻半天却迟迟找不到那张票这是多么令人崩溃的事情。

手机许多特性让设计更强大。手机上的语音输入、地理位置定位、丰富的手势操作、越来越多传感器,手机交互比PC拥有更多可能性。从手机开始设计,让你更早地思考如何发挥这些特性。

手机正在迅猛增长。手机即将超越PC,成为最主流的上网方式,这个趋势是不可逆的。

从移动开始做设计对习惯了PC环境的设计师可能是一种挑战,思考方式工作习惯都被迫做出改变。但这种改变必须去适应,因为用户习惯在改变。

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

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

Step3:响应式框架

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

到现在这个阶段所有页面的响应式开始有规则可循,下一步工作就是继续细化规则,把框架精确到具体尺寸。具体说来就是制定流体栅格系统。流体栅格系统是基于百分比的栅格布局工具,具体的制定方法会在另外一个篇章【知识篇】中详细介绍。

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

Step4:模块设计

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

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

交互确定页面模块细节后可以抽取出产品用到的控件、组件和公共模块,现在视觉和前端开始做一件有别于传统流程的事情。视觉根据前期定义的风格设计控组件和公共模块的视觉效果,把它们拼成一个模拟的页面,我们称之为风格拼贴稿。前端再把风格拼贴稿里的控组件和公共模块实现出来,统一维护一套组件规范代码。

  • 相关推荐
  • 大家在看
  • 最强蜗牛服务器无响应详细解决办法 三种办法解决服务器无响应

    最强蜗牛经常的会碰到服务器无响应的情况,那么遇到这样的情况怎么办呢?下面就来为大家分享一下最强蜗牛服务器无响应详细解决办法。

  • 特斯拉拍下停车收费员扎胎引热议:多名车主响应

    6月4日,有微博网友曝出一则特斯拉哨兵模式录像视频,视频纪录一位停车场收费员故意扎胎的行为,引起微博网友热议。据悉此事发生在重庆,该车主表示自己在停车办事的过程中,车胎被停车收费

  • 响应印度新规:苹果、谷歌应用商店对59款中国应用下架

    上个月底,印度电子信息技术部宣布,禁止包括TikTok、微信、茄子快传、UC浏览器、微信、QQ、快手和美图等在内的59款中国应用。对于这样的举措,印度在声明中提到这些应用存在安全问题。&ldquo

  • Hydroblok®海卓布洛克响应时代号召,强力升级环保新主张

    6 月 22 日,第 26 届中国(济南)建筑装饰博览会在山东国际会展中心盛大开幕。本届展会展览面积逾 50000 平方米,汇聚了 800 余家参展企业,现场 3000 多种新品集中展示,吸引了数万名采购商买家团,火爆程度令人叹为观止。这其中,家居建材版块人气颇高。众所周知,环保一直是家居建材行业常年关注的重点,近年来健康、绿色、环保、无醛消费更是成为了主流的家居建材家装消费趋势。作为行业内正在崛起的“黑马”企业,Hydroblok?海

  • 58部落上线“地摊经济”话题 响应稳就业号召点燃线上人间烟火

    今年两会期间,“地摊经济”成为各界关注的焦点。“地摊经济”不仅是城市里的人间烟火,也对稳就业发挥了积极作用。响应政府关于地摊稳就业的号召, 58 部落上线了“地摊经济”话题,为用户提供经验交流的平台,以优质专业的内容向平凡劳动者致敬。 人间烟火气,最抚烦人心。 5 月 27 日,中央文明办提出,今年全国文明城市测评指标明确要求不将占道经营、马路市场、流动商贩列为文明城市测评考核内容,推动文明城市创建在恢复经?

  • 北京下调防控响应等级 携程旅游搜索量爆增300%

    北京召开疫情防控第 110 场例行新闻发布会,决定自 6 月 6 日 0 时起,将北京重大突发公共卫生事件二级应急响应下调为三级,并相应调整相关防控策略。适时开放境内团队旅游业务,中高风险地区除外,按50%限流开放公园、旅游景区和体育健身场所、图书馆、博物馆、美术馆等室内场所,并视情况动态调整限流比例。

  • 突发重大洪水灾害,轻松集团·轻松公益快速响应发起救灾募捐驰援灾区

    今年5月底以来,我国西南部出现持续强降雨天气,广西省桂林、柳州、河池、百色,贵州省遵义等多地发生洪涝灾害,作为民政部指定的互联网募捐信息平台,轻松集团·轻松公益立即响应,联合基金会和当地组织,启动线上募捐项目,第一时间驰援灾区,送去温暖。持续降雨,让两省各地出现了洪涝、滑坡、塌方、城市内涝等灾情,受灾面波及十几万人口,大量农作物受损、房屋倒塌,导致直接经济损失5. 52 亿元。灾情过后,满目疮痍,随处可?

  • 响应新基建建设,网银互联启动通航数据中心二期,助力区域航天产业发展

    伴随着互联网行业的继续快速发展,以及5G时代的到来,在“十三五”末,市场对云计算、数据中心的需求将继续呈现出指数型的涨幅。近日,MDC通航云计算数据中心二期即将落成,预计在2022年全部落成。 2019年年末,中共中央、国务院印发了《长江三角洲区域一体化发展规划纲要》,针对“加快构建新一代信息基础设施,推动信息基础设施达到世界先进水平,建设高速泛在信息网络,共同打造数字长三角”进行战略部署,这给IDC产业及其相关?

  • 外媒称微软响应机制太慢:8个月前反馈问题Win10 5月更新依然未修复

    8个月前反馈的问题,微软居然在Windows 10更新中没有解决,这确实有点说不过去。现在,有用户反馈称Windows 10 May 2020(20H1/Version 2004)功能更新导致“Fresh Start”功能无法

  • 「字体超市」强势上线:一站式解决字体使用问题!

    字体超市(Font.cn)提供的正版字体授权,可用于社交媒体、/H5、VI、排版阅读、印刷品/包装、海报企宣、视频影视、游戏、广告和电商等领域。一站式解决字体使用问题,帮你甄别可商用授权字体,无版权担忧。

  • 我从创建应用中学到的12条病毒式传播法则

    托马斯·普约(Tomas Pueyo)是一名工程师,利用业余时间,他开发了手机游戏并在app store上发布,纯属娱乐。然而,某一天,他发现这款游戏火了。在不到 2 个月的时间里,它的下载量就达到了 5000 万。然后,很快它的增长就停滞了。因为太多人开发这种类型的游戏了。

  • 大鹏教育“伴随式”教学服务,满足学员多元化需求

    大鹏教育是一家集“教-学-练-评-测”为一体的互联网教育机构,为用户提供个性化兴趣教学服务。大鹏教育以兴趣先行,利用互联网直播教学形式,运用先进的科技手段对学员进行探索,根据不同年龄、不同基础学员的不同学习需求,为学员提供包括设计、美术、国画、书法等课程产品,打破年龄的限制,满足学员多元化需求。大鹏教育以兴趣先行,给学员优质学习体验目前,大鹏教育依托"互联网+",结合大数据、云计算等技术,探索了以兴趣为?

  • 投影仪用LED光源有哪些优势?亮度不高早已成过去式

    最近LED光源投影仪不断进入人们的视野,不断刷新人们的认知。而纵观电灯的发展,也从最早的白炽灯,到节能灯,再到现在很多的LED灯。可见LED灯作为光源上的革新是一直伴随人们的生活的。那么为什么现在人们都开始偏爱LED灯了呢?投影仪用LED光源又有哪些优势?首先要知道,LED光源是一种固态光源,相比于传统的汞灯光源,固态光源的寿命更长,基本寿命时长都是以万小时为单位。而传统灯泡光源的寿命多在数千小时。另外还有一点特别重

  • 全程高能!沉浸式密室大逃脱,联想新一代PC邀你来战!

    不一样的密室逃生游戏,联想新一代PC带你挑战智商极限,你敢玩吗? 玩腻了那些大同小异的密室逃脱游戏了吗? 如果你觉得自己推理能力强大、智力超群、爱解谜,追求惊险刺激, 那么一定不能错过今天密室逃脱游戏推荐。 由我们开发定制的真人VR实景密室逃脱游戏。 成功完成挑战还可获得逃生大奖 价值 698 元联想优惠券和爱奇艺会员卡等你来拿。 礼品数量有限,先到先得。

  • 苹果新专利手机采用卷轴式屏幕 网友:圣旨同款?

    今天,微博博主科技喵公布了苹果申请的一项新专利。和以往专利不同的是,这项专利的外形十分独特,是一个可滚动的柔性屏设备。手机两边可以卷起来,以达到缩小体积的目的。对此,网友不禁调侃称这不就是圣旨同款吗?以后看个手机都跟看圣旨似的。

  • 你还记得挂耳式蓝牙耳机吗?和现在火爆的TWS耳机到底有什么不同?

    时间来到 2020 年下半年,手机厂商依旧为了更好地一体化机身设计,取消了传统的3.5mm耳机口。 但又和刚去掉3.5mm耳机口那会不同,手机厂商们不约而同且高度一致的普及“TWS真无线蓝牙耳机”。 其实不仅仅是手机厂商们这么做,传统耳机厂商甚至是配件厂商都逐步推出TWS真无线蓝牙耳机。 那么问题就来了,TWS真无线蓝牙耳机是什么?厂商们为什么都推出TWS真无线蓝牙耳机?它和以前的蓝牙耳机有什么不同? 「TWS真无线蓝牙耳机是什么」

  • 福特中国给予车主“俄罗斯套娃式”的层层安全防护

    曾看到这样一则新闻,国外友人在中国旅游后,回去说“我想在中国生活,太方便了,一个手机几乎可以搞定一切”那是他不知道,现下汽车也可以做到手机可以做到的事。但是,随着智能车机的不断“手机化”,关于车机的隐私安全我们中国人民也会给予更多的重视。在个人数据的保护层面,福特中国也一直走在行业的前列。无论面对多么复杂的考验,福特中国都将秉持更极致严苛的标准、更开放的姿态、更以人为本的核心,保护每一位车主的的用

  • 国潮+科技!LUCI immers带你领略沉浸式电竞新体验

    6 月 20 日,由鼓楼区科学技术局主办的“ 2020 南京创新周中华门潮科技大赛-全民电竞互动赛”在南京鼓楼区水木秦淮文化艺术街区如期开赛。LUCI此次首次来到南京城,并亮相活动现场,通过旗下可穿戴设备——LUCI immers头戴显示器,为现场观众带来身临其境的“沉浸式”科技体验。 目前我国已成为全球电竞产业发展最快、最受关注的地区之一,并成为全球首个开展电竞主客场的地区。随着电竞游戏的全民化,火爆程度仍然维持在较高水平

  • ​比特币期权市场爆炸式增长,OKEx讲解期权指标

    据Longhash消息,2020年第三季度,比特币期权市场经历了爆炸式增长。此前直到2019年初,比特币市场主要还是由现货和期货交易所占据。随后,灰度比特币信托基金这样的投资机构工具以及Deribit等期权交易所的交易量和未平仓合约都出现了迅速的增长。根据Skew的数据,截至6月15日,期权市场的未平仓合约总价值徘徊在15亿美元上方。具体而言,Deribit在期权市场上有11亿美元未平仓合约,占据了约70%的市场份额。CME比特币期权产品成交?

  • 产品力+洞察式体验,月影全铜吊灯获年轻人青睐

    从“丧文化”到“这届年轻人已经秃了”,在许多人眼中,年轻人似乎要将佛系和低欲望进行到底了。在父辈眼中,他们对任何事情都持“差不多就好”的没所谓态度,没有年轻人应有的热情和活力。而实际上,年轻人所谓的“低欲望”并非是没有需求,而是更加执着于少而精的品质生活,如果不是自己满意的,宁可不要,也不愿将就。殊不知各大电商平台畅销的即食燕窝、蜂蜜、养生糕点再到热搜词“独立设计师”等等,这些“精致而美”的产品都

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文

  • 3 天
  • 7天