首页 > 交互 > 关键词 > Web设计最新资讯 > 正文

与瀑布模式说”再见”:教你5个步骤实现响应式Web设计

2012-05-14 18:47 · 稿源:webapptrend.com

恭喜你终于使领导们信服:你的下一个Web 设计项目需要进行响应式设计。虽然说服他们相信是一件非常艰难的事情,但是你现在不能在荣誉上休息。现在项目最关键的问题是:如何带领你的团队去构建响应式设计?

响应式简介

你可能熟悉典型的“瀑布模式”的开发过程:从系统需求分析开始,然后着手设计,接着开始前后台开发,最后进行评估并且实施。线性性质是瀑布式开发的主要特点:当这一阶段完成,下一阶段紧接开始,两者配合的几乎天衣无缝。“瀑布模式”开发过程是通过设计一系列阶段顺序展开的,只需朝一个单一的方向推进工作,而不幸的是,随着问题的不断积累,不得不放慢脚步,来应付各种棘手的问题。

“瀑布模式”开发过程演示图:

所谓的“响应式Web 设计”,它是指在网站建设过程中,利用同一套代码,使网站内容在PC、平板电脑以及智能手机浏览器上都能正常的显示。那些为了发布同样的内容,而创建PC,mobile等多个版本的日子一去不复返了。现在你可通过构建一个非常灵活的网站去应付所有的运行环境。

“响应式”设计过程如下图所示:

那么,为什么要使用响应式设计而不是采取瀑布模式?瀑布模式只按照标准的桌面浏览器进行设计,除此之外,几乎没有考虑任何其它的设计开发环境,这是它最大的缺点。而敏捷的响应式设计从一开始就考虑到这些跨平台问题,从而进行更详细的前期框架构图,设计和测试,而这些工作恰恰在瀑布模式中被省略了。基于响应式设计的网站一旦完成实施,将正确的呈现在PC、移动设备和平板电脑上。

响应式设计在不同设备上的效果展示图:

 

既然如此,那么如何在团队中实施响应式Web 设计呢?下面,我们将回顾典型的瀑布模式的开发步骤并且说明如何使他们变为响应式设计模式。

如何实现响应式Web 设计 第一步:计划

瀑布模式开发

在瀑布模式开发过程中,框架图主要由布局和小部件构成。它们被设定为一个特定的尺寸(通常基于像素),并且几乎没有调整的余地。这些框架图给出了具体的网格/布局的尺寸大小,但是不同的屏幕分辨率会导致布局发生变化,这时一切都变得毫无意义。最终,导航条菜单无法使用,无法进入表单页面,并且界面也会变得凌乱不堪。

响应式Web 设计

解决此问题并不困难。你需要为不同的视图设计不同的部件,并且不要将一个页面当成一整“页”。页面不是最小的组成单元——而是滚动条,文字内容,表单和其他成份是组成整个页面的最小元素。框架图必须考虑不同的屏幕尺寸,因此布局尺寸也是不固定的。布局可以从三列变至两列,在最小的显示设备上(移动智能手机),甚至可将其调整为单列显示。

同时,你也需要改变网站的用户体验——在小尺寸的屏幕上,要求滚动条不仅仅是可以通过鼠标进行操作,而是人们用手指也能够控制它。这样框架图仅仅是一个原型设计工具,而不再是模板,并且需要通过一些开发和测试来确保其能在显示屏上执行。如果在这些初步测试之前开始设计的话,一些未知的开发问题就会接踵而至。不管怎样,项目根本的愿景必须是保持不变的,因此,保持部门之间开放的沟通渠道是必不可少的。

第二步:设计

瀑布模式开发

在瀑布模式开发中,接下来将按照框架图来进行设计,并且通过字体、颜色、间距以及其他设计工具、手法使其变得丰富多彩而富有生机。通常情况下,设计会进行来回的修改,并且通过设计的不断更新,来逐步完善品牌和设计的规范。

响应式Web 设计

为了更好的使用分配的项目时间和资源,响应式的Web 设计应该设计不同尺寸的布局和部件。响应式的Web 设计不再使用基于像素的完美设计。我们认为在不固定的网格中设计灵活的部件,设计不同尺寸的布局和部件的工作量是可控的,虽然完成可以兼容桌面浏览器的设计就已经极具挑战性了。

让HTML采用在所有环境中的流体布局来提高设计品质。不去专注于用户的总体体验,而考虑每一种浏览器宽度是非常浪费时间的做法。例如,需要确保在小型移动设备上操作rotating banner的原件是快速反应的,并且按照行业推荐的最小的44px作为标准的人类手指尖的尺寸来进行设计。对于用户体验的设计和针对所有屏幕尺寸进行外观设计是同等重要的。

第三步:开发

瀑布模式开发

在瀑布式开发方法中,一旦客户确认了设计图,接下来的前端开发中,就会发现在小型屏幕中存在各种问题。不幸的是,由于瀑布模式的线性特征,这些不可预见的问题只能随着项目的推进而出现。

响应式Web 设计

在敏捷的响应式的开发过程中,设计必须以灵活网格为基础。需要由开发者对部件进行规划和原型设计,并且在每一个阶段都进行测试。为了确保部件是可能的最小的组成单元,需要对代码进行优化。因为部件可以容易的加入到布局中和从中移除,所以在最初的设计中并没有规划出来。通过开发者、设计师和策划者之间良好的协作来规避由于必需的修改而引起的各种问题。这样,团队中的成员达成共识,就可以早点发现和解决问题。

第4步:耐心的测试

瀑布模式开发

在标准的瀑布模式开发的最后阶段是通过单元测试和功能测试来评估站点。在这个阶段发现的问题,可能会要求重新规划项目最初的设想,甚至有时候一个新上市的设备可能对项目造成沉重的打击。需求分析团队和设计团队不得不重新规划和设计以顾及到这些变化,并且将花费更多的时间来进行修改。

响应式Web 设计

在响应式开发过程中,每一个阶段都会在多种浏览器和不同尺寸屏幕中进行测试,因此问题可尽早发现。这样也可发现某种移动环境与框架图不匹配的问题,以及了解该设计在不同平台上的性能。响应式Web设计会尽早的完成项目原型,让客户更早的检查成果以实现双赢。

第五步:尽早发现问题,尽早解决

瀑布模式开发

传统的瀑布式开发过程中,没有通过设计和界面迭代的过程。瀑布式开发忽略项目建设过程中的小细节,从而引起一些问题并与客户期望相冲突。虽然通过不断的及时与客户沟通,最终问题解决了,但是这些糟糕决策的严重性却仍未察觉。

响应式Web 设计

响应式解决方法,在取得同样进展的同时,采用动态代码向客户展示每一步的实现过程。这样,这些早期的工作有利于推动下阶段工作,并且可以在截至日期之前进行关键的修改。

总结

采用敏捷的响应式Web设计,可以将你从瀑布模式中解放出来。它将简化你的设计和开发工作,让你的工作更有效率,并在所有可能的平台上最大化宣传你的品牌形象。真正的挑战是跳出瀑布式开发模式而成为一个响应式设计团队。但只要按照以上的五个步骤去做,你就会与瀑布模式说“bye, bye”,而对响应式Web 设计说“hello”。

客座作者Travis Sheppard是BGT Partners的技术副总裁。BGT在2010,2011,2012被《广告时代》评为15个最好的工作地方之一。它为全球的企业提供互动营销和技术解决方案,以帮助企业加强品牌宣传,挖掘更多的合作伙伴和进行业务变革。

原文出处:Bye, Bye Waterfall: 5 Steps to Implement Responsive Web Design

文章来源:webapptrend.com

网友热搜:

  • 相关推荐
  • 大家在看
  • 专利曝光华为无孔手机:半瀑布屏设计、电源/音量全触控

    华为要发力无孔手机了?LetsGoDigital在华为2019年11月向国家知识产权局提交、日前得到公开的一项专利中发现了款全新形态的手机。可以看到,手机正面全是屏,在左右边框以对称的形式布置了一

  • 设计实战 赞扬设计服务带你探究LOGO设计

    我们都知道,每个公司都有着它自己的独特性,这种独特性是由它的发展历程和特有的服务细节所塑造的,也正是因为这种独特性的存在,设计师们才能基于它们来为这些公司企业进行LOGO设计。LOGO绝对是最能够直观的体现一个公司属性和风格的东西之一。专门设计一个独立的、与众不同的LOGO是一件很艰难的事,因为就目前市场上存在的公司企业和五花八门品牌LOGO实在是太多太多了。LOGO设计的独一无二,对公众而言,能够看一眼就能快速的想起某一?

  • 由于冠状病毒,Airbnb可能削减在Amazon Web Services上的支出

    [TechWeb]Airbnb首席执行官Brian Chesky表示,如果冠状病毒大流行继续对其业务造成压力,该公司准备在今年进一步削减预算。Chesky 在最近几个月表示,由于Covid-19危机,该公司经历了一轮裁员,冻结了招聘并暂停了营销活动,但仍有可能进一步削减其在亚马逊云计算服务上的支出空间。切斯基说:“亚马逊网络服务(AWS)和客户服务仍有机会提高我们使用数据的方式,处理联系人的效率。” “因此,我们将继续提高业务效率,但此刻业?

  • 出于隐私考虑:苹果拒绝在Safari部署16个Web API

    据外媒报道,苹果本周表示,它拒绝在Safari浏览器上实施 16 项新网络技术(Web API),因为这些技术为用户指纹识别开辟了新途径从而对他们的隐私构成威胁。这 16 项技术具体如下:

  • 丐帮设计打造人人共享在线设计平台

    受疫情影响,互联网经济整体增速放缓,新的营销困境也随之而来。流量是企业的核心困境,而营销渠道是流量的新动能。丐帮设计率先打破了数字化营销的技术壁垒,通过强大的人工智能技术,研发出能随时满足用户需求的设计共享平台。人人都是设计师提到设计,我们会想到什么?是长城、金字塔那样的伟大建筑?是每年巴黎时装周的高定新款?还是埃舍尔的矛盾空间?是,却不止如此。工薪族如何做出精美被老板夸赞的PPT?自媒体人怎样作图?

  • 设计师的福音,超高颜值的ConceptD 3设计本

    对于众多设计师而言,一款专业的笔记本必不可少,但在笔记本市场上符合设计师需求,轻薄、性能、色彩与颜值都满足设计师群体的笔记本少之又少,如何选择选择一款适合创作的笔记本成了众多设计师们的难题。2019年,宏碁针对设计师群体推出了ConceptD系列设计本,在保持轻薄的同时拥有高性能,并为设计师们带来精准的屏幕色彩,提高创作效率,成为众多设计师的不二之选。并在今年618京东购物节之际,宏碁开启限时优惠,618期间购买Co

  • 设计好看就是可以为所欲为

    在汽车历史上有一款很神奇的车,它性能平平,做工粗糙,售价还很贵;它声名狼藉,恶评如潮,卖的也不好;它早早停产,却名留青史,成为一个象征未来的艺术符号。

  • 思科Webex助力客户高效远程办公,重塑工作模式

    Webex扩大容量、添加更多安全和智能洞察功能,赋能远程医疗 新闻摘要: ● Webex平台迎来了前所未有的市场需求,应用规模达到正常水平的三倍之多 。 ●作为最值得信赖的业务连续性供应商,思科在扩展全球容量上持续投资,提高Webex的弹性。 ● 为了确保客户可以随时随地轻松、安全地开展协作,思科为Webex添加了更多安全功能,并增加了与Box的全新集成 。 ● Webex Control Hub的智能和可行性洞察功能 可帮助IT人员管理不断扩大的

  • 特斯拉正邀请中国设计师为其设计汽车 新车将面向全球销售

    【TechWeb】6月17日消息,据国外媒体报道,特斯拉正在为其小型版新电动汽车征集来自中国汽车设计师和业余设计师的设计方案。特斯拉是通过其官方微信发布的公告,邀请来自中国的汽车设计师和非汽车设计师为其新车提交设计。该公司将考虑中国设计师提交的设计方案,被选中的设计未来可能会在其上海超级工厂下线。外媒报道称,虽然这款车将在中国设计和生产,但特斯拉的目标是在全球销售。到目前为止,特斯拉及其CEO埃隆·马斯克都没

  • 特斯拉邀请中国设计师设计汽车!造“中国风”特斯拉

    随着特斯拉国产步伐的加快,特斯拉在中国市场变得越来越活跃。6月16日消息,据外媒报道,特斯拉正在邀请中国的专业汽车设计师和分专业设计师提交方案,制造出小型版新电动汽车。事实上,早在

  • 苹果拒绝在Safari部署16个Web API 避免对用户隐私构成威胁

    苹果本周表示,它拒绝在Safari浏览器上实施 16 项新网络技术(Web API),因为这些技术为用户指纹识别开辟了新途径,对用户的隐私构成威胁。

  • OKEx C2C借贷上线WEB端 产品矩阵愈加完善

    随着加密货币市场对稳健理财强烈需求的显现,C2C借贷逐渐成为加密货币市场布局的新赛道。近日,全球著名的加密货币交易平台OKEx上线C2C借贷功能WEB端,再次为行业发展注入强劲动能。三步完成借币继3月19日在APP端全面上线C2C借贷功能后,OKEx产品线再添新成员,于6月23日宣布其C2C借贷功能现已上线WEB端。用户可前往OKEx官网进行借币操作,通过质押BTC或ETH借到USDT,实现资金的灵活周转。整个借币过程操作简单方便,三步即可完成?

  • OPPO主题设计大赛正式启动,招募优秀设计合伙人一起“绽放无边界”

    6 月 23 日,OPPO主题设计大赛正式开启招募。OPPO通过大赛招募优秀设计合伙人,共同探讨科技与艺术人文的智美融合,挖掘个性化主题设计与壁纸设计的艺术价值和商业价值,为OPPO用户打造独具一格的美学与交互体验。 OPPO主题设计大赛是由OPPO主办的一场设计美学盛会,旨在将“科技”与“艺术人文”的融合及畅想触达全球,让优秀设计师、插画师突破常规,施展创作灵感。本次大赛以“绽放无边界”为题,特邀知名插画师特浓TN、Lost7

  • 泰捷WEBOX GT电视盒子卖太贵?拆完机终于找到原因了!

    说起电视盒子,估计大家都不陌生,谁家电视还不搭配一个呢?也正是由于这个巨大的市场需求,各种电视盒子的品牌也是层出不穷,看起来小小的盒子,不菲的利益。让我们看看为了低价冲市场,市面上那些劣质盒子都是怎么欺骗用户的吧:虚假配置是首位。明明1G的内存,生生说成是2G; 4 核处理器的说成是 8 核;国产不知名CPU的生生标注成国外高端进口……用二手料则在其次。壳料用再生塑胶,连电子元器件都敢别人报废下来的呆料、过期?

  • 设计没灵感?使用免费的Billfish搭建个人灵感库试试

    设计师是一个“创意”至上的职业,很多设计公司的核心理念就是“无创意,不设计”,折射出的是设计师对创意,对创新的极致追求。然而,有很多设计师苦于自己的创意“贫乏”,在工作中苦苦的挣扎。我们经常在提倡创新,但其实内心最清楚,我们设计的很多作品只是在沿用以前的设计思维,特别是一些产量和产值为中心的设计公司。面对如此的市场环境,个人设计师如何快速的找到灵感,常用的方式便是借鉴于各大平台网站,久而久之很难形

  • 满足轻奢需求 一汽-大众CC设计清新又高档

    买车,舒适度是自己的,设计是给自己同时也是给别人看的,因为,人,都是有社会属性的,当然希望别人觉得你的选择有档次,又有品位,比如大众CC。优点:大众CC的 18 寸轮毂 245 的米其林轮胎,还有前后独立空调,全新触摸按键,真的没谁了。动力也是很不错的,只要敢给油,就有推背感,虽然不像美系车那么猛,但还是有的。油耗也很动人,买了车的第二天就开车去上班了,高速上居然开出了 4 点多的油耗。回头率真的超级高,比奥迪和

  • 我乐家居拯救糟糕睡眠的卧室设计,你不准备看看?

    你的睡眠被偷走了吗?如今,睡眠质量几乎成了一个社会性问题,防噪耳塞、枕边精油、蒸汽眼罩、褪黑素…………五花八门的新奇好物只为给人们一个安稳的睡眠体验。不过,这些方法虽然有效,但却治标不治本,想要拥有优质睡眠,还是得先从自家的卧室设计入手。今天,我乐家居就教你如何轻松get一间“高质量睡眠的卧室”。1、利用好色彩搭配研究证明,不太合适的卧室色彩设计往往会影响人们的睡眠质量;反之,好的卧室色彩设计则会平静

  • 哈弗大狗内饰首次曝光:从未见过的设计

    近日,有网友曝光了一张哈弗全新SUV——哈弗大狗的实车内饰图片。新车将基于哈弗全新平台打造,并由前路虎设计总监、现长城汽车全球设计总监兼副总裁菲尔·西蒙斯操刀设计。图

  • 苹果新iMac曝光:窄边框设计

    尽管从全行业来说已非主流,但苹果一直保留着iMac一体式电脑产品线。据国外爆料人消息,苹果可能会选择在今年6月22日举办的WWDC上推出新款iMac。首先是外形方面,iMac将参考iPad Pro的设计语

  • 全新宝马4系大鼻孔设计惊到网友!罗永浩表示“无语”

    和预想的一样,全新宝马4系发布后,其超大“鼻孔”设计引起了网友的热议,如今连罗永浩也加入了这场讨论。近日,网友@汽车营销分析在微博上曝光了一张全新宝马4系的实车图,不少网友

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

热文

  • 3 天
  • 7天