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

案例学习 响应式网站的产品需求和设计流程详解

2011-12-01 11:18 · 稿源:beforweb.com

今次的译文中,我们继续响应式Web设计方面的话题。前面的几篇相关文章以概念诠释、方法说明为主,本篇则围绕一个实际网站案例展开,从需求、流程、步骤细节等方面描述了响应式设计在项目中的实践方式。

本篇的部分内容要点会与之前几篇产生交集;我们会在这些地方提供相应文章的入口,便于深入参考阅读。接下来进入正文。

根据DailyTech的统计,到2015年,移动互联网的用户数量将会超过桌面用户。除了智能手机之外,使用平板电脑甚至是电视机进行上网的用户也在持续增加。在这种形势下,怎样让我们的网站尽量兼容各种类型的设备,并确保优良的用户体验,这将是越来越重要的问题。

通过响应式的设计开发方式,我们可以使网站页面随浏览设备的不同而自行响应,动态的调整布局结构、元素规格样式,将相同的内容以不同的格式呈现给不同设备的用户。

如果你对响应式Web设计还不大了解,可以先参考阅读我们之前的关于响应式设计的概念、组成要素及基本实现思路方面的文章,全方位预热一下。

什么情况下适宜采用响应式Web设计的方式

当客户提出产品功能移动化的需求时,有一些解决方案可供我们选择,包括原生客户端应用、Web应用等;究竟怎样的方式更合适,还是取决于具体的需求情况。另外也要考虑网站本身是否需要实施移动化。虽然响应式站点并不能算是一种纯粹的移动化解决方案,但是,在某些情况下,这种方式是非常值得考虑的。

你心里没谱

设计开发一个全新的移动版本站点或是客户端应用,整个过程是有很大挑战性的。除非产品正式上线,否则你无法真正了解它是否会成功。与其单纯的为了移动化而花费资源打造移动版本站点或是开发客户端应用,不如先花些心思将原本的网站打造的更具弹性,使其在各种主流移动设备中都拥有尽量优秀的用户体验。

你想节约成本

要打造响应式站点,自然离不开有经验的交互、视觉设计及前端开发人员。所需的资源,尤其是时间方面,比起普通网站来说大约增加20%到30%的样子;但比起单独打造移动版本的网站,或是设计开发客户端应用的成本来说,却要低很多。从维护的角度来说,也会轻松很多。

你希望网站可以兼容未来的新设备

所谓的移动版本站点,通常是针对某类具体规格的设备进行单独打造的,弹性比较差。新的移动设备层出不穷,传统的移动版本站点需要不断的进行更新维护,才能尽量保证在新设备中工作良好。响应式设计可以根据设备浏览环境的具体规格进行判断,使用不同的呈现方式来展示内容,无需针对某种特定的规格进行维护,适应性更好。

更多

关于网站移动化的方式选择,可以参考我们之前的文章“走出移动互联网的迷宫 - 网站移动化的方法策略”。

响应式网站页面的设计流程

我们将使用一个真实的酒店网站作为范例,来演示响应式Web设计的流程。这个网站是我们在九月份刚刚为Macdonald连锁酒店创建的。在整个设计开发流程中,有几个关键步骤,是我们接下来要逐一展开学习的:

1.用户研究与设备规格预估

2.制作线框原型

3.视觉设计

4.前端构建

用户研究与设备规格预估

前期,通过用户调研,我们可以了解到用户群所使用的设备类型分布情况,并预估出几种典型的响应规格,用来规划不同的呈现方式。有几个问题需要特别考虑下:

用户在不同设备上的目标有多大区别?

过去,我们通常会假设用户在使用移动设备访问网站时,其行为都是高度目标驱动化的,例如在旅途中获取酒店地址、预订房间一类。但实际情况不仅如此——智能手机、平板电脑等各类移动设备的用户,会越来越多的在相对稳定从容的状态下使用网络。所以在很多时候,用户使用不同设备的目标差别并没有想象的那么大,我们不能片面的假设不同类型设备的用户对功能的需求差异。

关于功能与内容呈现,从技术的角度出发,需要考虑哪些?

对于功能繁多复杂的网站,需要针对不同的设备类型进行功能和内容的优先级排序,以便在开发阶段通过CSS定义不同的响应规则,以最合理的样式规格和布局方式进行呈现;尤其对于手机等小屏幕设备,需要多花些心思。

制作线框原型

通过线框图,我们可以对响应式的视觉效果背后的逻辑结构进行规划和定义。(关于线框原型,可以参考我们之前的“线框原型的本质及实践应用概述”)

我们根据之前一步的研究和预估结果,规划出几种比较典型的屏幕尺寸规格。本次案例中,我们选择了三款具有代表性的主流设备,包括桌面显示器、iPad和iPhone,因为根据我们的用户研究结果,使用这三种设备的用户占了绝大部分。

需要强调一下,响应式设计的目的在于,针对不同设备的屏幕规格区间,进行功能及内容的输出格式预设。所以我们只需要选取一些具有代表性的设备,而不必顾全所有已知的规格类型;我们制作线框原型的主要目标是规划样式背后的逻辑。

在这个阶段,我们必须清楚,整个网站中有哪些关键页面是在功能和布局方面具有代表性的。对于这次的案例网站,“关键页面”包括首页、预订流程中的页面、酒店详情页面等。

  • 相关推荐
  • 大家在看
  • 榕树贷款:AI加持优化用户体验 满足用户多样金融需求

    金融科技对金融业的影响愈加广泛,对金融业务全过程都产生了深刻影响,新业务模式对传统业务和服务的影响更加深入。总结来看,金融科技在金融行业的发展中扮演了重要的角色:一是推动开展了新的业务,创新了竞争的赛道;二是提高信息传播效率,逐渐替代传统金融机构的作用;三是促进金融机构改进工作流程。 随着金融科技创新进程不断加快,专家认为,只有产生实际效果、增强消费者获得感的金融科技创新,才是有效的。消费者体验是

  • 消费金融潜力突显 榕树贷款精准匹配优化用户体验

    在我国经济由高速增长转向高质量发展的当前阶段,消费经济日渐成为经济发展最重要的引擎之一,我国实际上正步入消费驱动型经济体。有行业报告曾指出,无论基于政策理论,还是国际经验分析,消费金融在一国经济转型过程中具有重要作用,适度发展消费金融有助于拉动消费增长。 相比于传统金融服务,消费金融的最大特性在于其用户体验的全面优化,从用户申请、审核、资金发放等流程的高效、便捷,到消费金融平台充分发挥自身技术优势

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

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

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

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

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

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

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

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

  • 郭明錤:AirPods 3采用全新外观设计+配置升级、将大卖

    目前苹果在售的AirPods无线蓝牙耳机主要有两款,分别是带主动降噪设计、入耳式的AirPods Pro以及半入耳式的AirPods 2。在最新投资报告中,知名分析师郭明錤透露了AirPods 3的动态。据他所言

  • Strategy Analytics:2G和3G用户占全球移动用户总数的46%

    6月19日消息,Strategy Analytics基于其免费报告《低成本4G手机:市场动态和机遇》,并结合最新的产业发展情况,分析了当前2G/3G的退网趋势和4G用户迁移机会。Strategy Analytics最新的无线市场预测,今年初,2G和3G用户占全球移动用户总数的46%,但贡献的收入却只占全球移动总收入的27%。到2023年,这一收入占比将下降到10%。非洲可以认为是一个特例,在这个地区,各国的ARPU值低于2美元,因此通过补贴促进用户迁移可

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

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

  • “服装设计dress”时尚领域排行榜,百家号分类应该怎么选

    备注:本文数据来自站长之家移动传媒平台,文章涉及的数据依托平台大数据计算所得,非百度官方数据,仅供参考。服装设计dress是当前百家号中的普通号,目前账号百家号权重为3,综合排名位列18328名,时尚分类排名位列466名,领先了98.4%的百家号。 服装设计dress百家号概况 服装设计dress的简介为我爱设计,时尚生活彰显魅力个性。,是一家主旨明确、领域专注的自媒体作者,截止目前为止他们已经在百家号上发布了超过109篇的游戏内

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

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

  • 疑似三星GalaxyFold 2通过3C认证:或将采用双电池设计

    【TechWeb】按照往年惯例,三星会继续在今年的下半年推出全新一代Galaxy Note20系列旗舰,随着6月已经过去一半,距离这场重磅新品发布会也更近了一步。最新的报道显示,除了这款年度旗舰之外,新一代折叠屏手机Galaxy Fold 2也将有望同台亮相,并且在近期开始迎来密集曝光。现在有最新消息,近日一款疑似是三星Galaxy Fold 2的手机已经通过了3C认证。根据最新晒出的3C认证信息显示,全新的三星Galaxy Fold 2折叠屏手机将内置一块43

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

热文

  • 3 天
  • 7天