马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > 网站设计 > 响应式网站页面的设计需求和设计流程

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

时间:2015-12-16   文章来源:马海祥博客   访问次数:

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

响应式网站页面的设计需求和设计流程-马海祥博客

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

一、什么情况下适宜采用响应式设计?

当客户提出产品功能移动化的需求时,有一些解决方案可供我们选择,包括原生客户端应用、Web应用等,究竟怎样的方式更合适,还是取决于具体的需求情况。

另外也要考虑网站本身是否需要实施移动化,虽然响应式站点并不能算是一种纯粹的移动化解决方案,但是在某些情况下,这种方式是非常值得考虑的。

1、你心里没谱

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

2、你想节约成本

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

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

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

二、用户研究与设备规格预估

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

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

过去,我们通常会假设用户在使用移动设备访问网站时,其行为都是高度目标驱动化的,例如在旅途中获取酒店地址、预订房间一类。

响应式网站页面的设计需求和设计流程-马海祥博客

但实际情况不仅如此——智能手机、平板电脑等各类移动设备的用户,会越来越多的在相对稳定从容的状态下使用网络,所以在很多时候,用户使用不同设备的目标差别并没有想象的那么大,我们不能片面的假设不同类型设备的用户对功能的需求差异。

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

对于功能繁多复杂的网站,需要针对不同的设备类型进行功能和内容的优先级排序,以便在开发阶段通过CSS定义不同的响应规则,以最合理的样式规格和布局方式进行呈现,尤其对于手机等小屏幕设备,需要多花些心思(具体可查看马海祥博客《响应式网页设计的排版设计趋势》的相关介绍)。

三、制作线框原型

通过线框图,我们可以对响应式的视觉效果背后的逻辑结构进行规划和定义。

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

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

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

1、开始规划

首先来定义每种关键规格中的结构网格,我们创建了三个页面模板,宽度分别为1024像素(桌面显示器)、768像素(iPad竖屏宽度)、320像素(iPhone竖屏宽度)。

响应式网站页面的设计需求和设计流程-马海祥博客

如上图所示,从每列等宽的情况入手,可以让规划工作相对简单一些,帮助我们将注意力放在响应式的布局改变上(具体可查看马海祥博客《响应式网页设计的基本原则布局》的相关介绍)。

2、沟通与评审

接下来我们需要考虑的是,每一列中的模块组件应该以怎样的方式随着页面的宽度缩放而响应式的适应和调整,在这个过程里,保持团队成员之间的沟通是非常重要的,包括视觉设计师、前端开发人员等。

使用初步的线框原型,与大家交流模块组件在布局和样式方面的调整计划,尽量在初期就让相关成员对整个规划做到心中有数,并尽早发现前端实现等方面的潜在的问题。

3、首页

也许对于你自己的实际项目来说,其他页面的重要程度或代表性是超过首页的,这不是问题,你可以调整具体的页面规划次序,我们的这个项目案例是从首页开始入手的。

响应式网站页面的设计需求和设计流程-马海祥博客

上图中展示的,就是我们为首页制作的三种响应规格的线框原型。

4、全局导航

我们创建了一个简单的横向导航条,其宽度可以随着屏幕宽度的变化而调整,在最后一种规格的范围里(320像素以下),导航条会折行显示,以保证导航元素的可读性。

响应式网站页面的设计需求和设计流程-马海祥博客

头部中其他元素的调整方式与全局导航的类似,在这一步中,最好提前考虑一下关于组件元素的样式问题,做好与视觉设计师的交流沟通。比如,对于导航元素,如果使用复杂的tab式背景,就很有可能在小屏幕设备中、特别是导航条折行的情况下产生样式问题(具体可查看马海祥博客《常见的七种响应式导航设计模式的优点和缺点》的相关介绍)。

5、页脚

响应式网站页面的设计需求和设计流程-马海祥博客

默认尺寸下,页脚由四列内容组成;另外两个规格范围中,布局分别为三列和一列;内容模块随文档流向下依次扩展即可。

6、其他模块组件

全局的四列等宽网格布局使其他组件的规划也非常轻松,在首页中有一个组件,其中包含若干内容模块,默认尺寸下,可以并排显示四个模块,左右两边各有一个触发滚动的按钮,以点击之后模块列表会前后滚动,以显示更多内容。

在平板电脑类型的布局中,默认显示的数量变为三个;而在手机的小尺寸屏幕中,内容模块列表会变为单列,并去掉了用于左右滚动的按钮,用户可以上下滚动页面,依次查看不同的模块。

类似的,其他涉及到多列显示的组件和模块都需要做这样的考虑,要了解不同设备的用户所习惯的操作方式,同时结合该设备的屏幕宽度规格,设计出最合理的布局及交互方式。

响应式网站页面的设计需求和设计流程-马海祥博客

测试线框原型我们可以在线框原型的初稿完成之后,将其图片导入对应的设备中,进行一些简单的初步测试,试着上下或左右滚动原型界面,感受导航与功能、内容的布局,完成一些假设的获取信息的目标,这样的测试可以帮助我们尽早的检验页面在可访问性及可读性等方面的潜在问题。

对于手机用户来说,有一个问题:多数页面在首屏中只能显示网站名、全局导航和搜索等功能;用户点击全局导航中的链接之后,即使页面正常的进行了跳转,也会给人一种错觉,好像页面并没有发生变化;除非滚动页面,通过查看页面的主要内容部分,来判断当前是否处于自己的目标页面。

一个常见的解决方法是,对于小屏幕设备,将全局导航与主要内容之间的部分设计为可以展开或收起的容器,默认状态为收起,这样即能使主要内容可以呈现在首屏中,也可以保证功能的可用性。

四、网页视觉设计

相比于传统的Web视觉设计过程,在这里我们不仅要打造出风格恰当的UI元素,而且要根据前面制定下来的几种规格方案,对某些关键性的UI元素进行样式扩展或改造。

响应式网站页面的设计需求和设计流程-马海祥博客

例如上图所示的酒店搜索模块,正如我们前面提到的,在小屏幕版本中,最佳实践方式是做成可展开和收起的模式,而这种交互方式在平板电脑或桌面设备中是不需要的,类似这样情况,在视觉设计方面需要花些额外的功夫。

在视觉设计过程中,马海祥还发现一些很实际的经验和原则:

1、尽量保持小屏幕规格样式的简洁。在UI元素风格方面,可以多与前端开发人员交流,尽量采用可以通过CSS3实现的常规风格样式,减少背景图片的使用。

2、要保证内容的字体字号在所有设备中都足够可读,尤其是在手机上。

3、与传统Web设计开发相似,最终产出的页面必定会与视觉稿有所出入,尤其对于响应式站点来说,由于在布局结构和细节样式等方面都需要有调整变化的能力,所以在开发过程中产生设计还原度方面问题的几率会更大。

响应式网站页面的设计需求和设计流程-马海祥博客

上图就是针对三种设备规格的首页最终视觉稿。

在此,马海祥仍然要强调一点,就是在项目前期和中期保持设计师与开发者之间的交流与沟通,尽可能早的发现各类潜在问题。

五、前端构建

来看一些在前端构建的过程中需要注意的问题,关于技术性的细节问题,仍不会在这里过多讨论,有不明白的朋友,可查看马海祥博客《如何制作一个响应式网页》一文中的相关介绍。

关于图片尺寸对于小屏幕规格的设计方案,即使我们通过CSS缩小其显示尺寸,在文件资源方面仍然是要加载完整的大图的,所以我们在优化保存文件图片的时候要尽可能的让文件更小。

不过另外有些方法,可以帮助我们真正实现图片文件的响应化,大致思路是,通过JavaScript判断当前设备的分辨率规格范围,并根据预设的规则加载不同尺寸的图片文件。

使用高级CSS让客户或需求方理解“渐进增强,平稳退化”的思路是很重要的,对于传统Web设计开发也是如此,对响应式站点来说,CSS3在降低资源消耗、提高页面加载速度等方面的作用尤为重要。

马海祥博客点评:

正如我们在前文中多次强调的,保持设计师与开发者之间的密切沟通和及时交流,对于项目的顺利进展会起到不可估量的作用,换个角度说,如果这方面做的不好,很多致命的潜在问题则有可能在项目后期集中爆发出来。

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/wzsj/1382.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: 响应式   网站设计   响应式设计  

上一篇:响应式设计时代该如何进行网站设计
下一篇:十个简单而有创意的网站导航设计案例

您可能还会对以下这些文章感兴趣!

  • 关于响应式页面重构的一些关键技术点

    单纯的页面重构,所涉及到的工作内容一般是“分析设计稿>切图>写HTML和CSS”,虽然看起来很少,但要做好这份工作,绝非所想的那么容易。原因很简单:工作内容单一,在时间和工作量上必会很苛刻,往往跟设计师的工作时间是3:1,即设计师给三天的时间,制作只给一天的时间……【查看全文

    阅读:698关键词: 响应式   响应式页面   日期:2016-09-25
  • 基于页面易读性的文字编排设计要点

    文字的编排还应注意文字本身的格式效果。图文画面构成中,把不同重点的文字内容用不同的字体来表现,是设计中常用手法,如:行首的强调、引文的强调等。但字体过多画面就显得不安宁,字体过少又缺乏必要的生气,字体数量的多寡常暗示平面中核心内容的多少,所以我们要详……【查看全文

    阅读:760关键词: 易读性   文字编排   文字编排设计   设计要点   日期:2014-04-15
  • 响应式网页布局的实现方法原理

    昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)相关的设计问题。既然是设计的问题,这里就会涉及到很多……【查看全文

    阅读:52335关键词: 响应式网页   响应式布局   响应式原理   响应式设计   日期:2013-09-17
  • 网页设计新手需知道的10条实用法则

    大胆留白是设计概念中常常会提到的理论,但真正能根据理论具体落实的设计师却为数不多,可能是因为设计师胆儿不够大,另一种可能是没有在实际中领会到留白的美妙,网页设计中的留白是为了在有限的容量中预留一些让其中元素呼吸的负空间,并不是一种所谓的“偷懒”行为,……【查看全文

    阅读:733关键词: 网页设计   设计法则   日期:2015-01-15
  • 全能型设计师必备的10个技能

    为了成为一个全能的设计师,你必须学会掌握一些技能来有效的应对客户或你的老板,很多情况下,一个设计师需要有良好的审美观和许多年的经验,而将那些“经常被雇佣”的设计师和其他设计师区分开来的就是下面列出来的技能,掌握这些技能,你不仅能在团队中成为更有价值的……【查看全文

    阅读:1071关键词: 设计师   设计技能   日期:2014-11-07
  • 什么是响应式网页设计?

    响应式网页设计(Responsive Web design,通常缩写为RWD)是指:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。可以说是一种网页设计的技术做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其他……【查看全文

    阅读:5336关键词: 网页设计   响应式设计   响应式网页设   响应式网页   日期:2013-09-15
  • 响应式网页设计的排版设计趋势

    假如你研究一个流行的作品集网站,里面展示了当今的网页设计,毫无疑问,你会注意到网页的基本结构千变万化,根本没有固定形态,它可以伸缩变化成任何所需的东西,我认为这是响应式网页设计带来的最棒的副产品,事实上,新的准则,就是根本没有固定准则,我们能观察发现……【查看全文

    阅读:1117关键词: 响应式网页   响应式设计   排版设计   设计趋势   网页设计   日期:2015-04-01
  • 分享20个极简主义的网页设计风格

    极简主义的设计之所以总是流行,是因为他们一直用一些很简单的创意和资源去表达概念,网页设计的领域受极简主义设计的影响很大,许多有才华的设计师总是用几个简单的工具就设计出了不起的网站,比如字体和几何图形等元素。简约设计的优势不仅仅是其优雅的风格,也有在网页加……【查看全文

    阅读:718关键词: 极简主义   网页设计   设计风格   日期:2018-11-01
  • 全方位解析响应式网页的设计与应用

    响应式网页设计可以提供一个比较满意的效果,他给广泛的应用设备提供了一个自定义的解决方案,无论是一个老式旧笔记本还是最先进的设备都能够获得比较好的体验。但响应式网页设计也并不是最好的,这只是个单纯的概念,它可以有效的提高用户体验但是却不能彻底解决。我们……【查看全文

    阅读:1301关键词: 响应式网页   网页设计   响应式应用   应用设计   日期:2014-05-08
  • 网站设计的重要因素及注意事项

    网站设计(Web Design)就是一个把信息需求转换成用软件网站表示的过程,就是指在因特网上,根据一定的规则,使用Dreamweaver、photoshop等工具制作的用于展示特定内容的相关网页的集合。网站设计的目的就是产生网站。简单的信息如文字,图片(GIFs, JPEGs,PNGs)和表格……【查看全文

    阅读:1306关键词: 网站设计   网站设计因素   网站设计注意   日期:2012-10-05
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

企业网站SEO推广能给企业带来哪些好处? 百度搜索用户建议专区上线公告