如何设计移动设备响应式网站

在移动互联网蓬勃发展的大背景下,现在有关网站开发的前沿讨论都比较关心一个问题,那就是到底要不要设计专门的移动网站。而现在有另一个选择,那就是响应式网站设计。那么什么情况下,出于什么原因,以及到底如何去设计一个响应式网站呢?

responsive_first

在开始之前先唠叨一下移动互联网的话题。有关数据标明,到2015年,美国的移动互联网用户数量将会全面超越桌面互联网。如今平板电脑也越来越收到人们的青睐,而且网络电视技术的使用也在迅速普及。在这种情况下,用户将来必定会使用形形******的终端设备来访问企业的网站,普遍提升网站用户体验的任务此时就显得尤为重要且紧迫了。响应式网站设计究竟如何提升用户体验呢?首先它能够让我们只设计一个网站就能够自适应多种屏幕尺寸。而且它使用灵活地网格以变化的样式来为用户呈现相同的内容,但是这些内容的显示都能够以特定的格式来适应具有不同屏幕尺寸的设备。你可以通过查阅《响应式网页设计入门》这本书来了解更为详尽的介绍。

为什么你需要设计一个响应式网站?

当用户通过移动设备来访问网站的时候,可以有多种解决方案。某个方案的适用性取决于商业需求以及财政预算。同样重要的是,考虑它们已有的解决方案或者网站。创建一个响应式网站虽然不是复杂的移动互联网战略,但也绝非易事,尤其是从白手起家来开发网站,你需要谨慎考虑每一种途径。因此,究竟出于何种原因你才能决定创建响应式的网站呢?

你是白手起家着手建站工作

开发一整套全新的网站或者网页应用是极具挑战性的工作。一直到网站真正成形和运营的时候你才能知道它到底是不是成功的,因此,另外专门去创建一个移动网站或者移动应用,让这项工作与网站项目并行是非常浪费时间和金钱的事情。最有效率的方法就是让你的新网站在你创建专门的移动网站或应用之前就能够完美的运行。

你想要获得持续的低成本运作

可靠的响应式的解决方案需要另外的设计和前端开发时间,但是对网页应用的开发没什么影响。你可能需要比平时长大约20%-30%的时间来开发一个响应式的网站,但是这仍然要比另外去开发专门的移动网站或者移动应用快得多。而且以此种方法开发网站也就意味着你只需要去开发,管理和维护一个网站就够了,因此它也降低了这些方面工作的成本。

你想让网站在最新发布的设备平台上同样适用

一个移动网站需要始终兼容用户的终端设备,一旦有新的设备发布,网站就需要升级。但是响应式的网站设计只要能适配屏幕宽度就可以了,不再需要新的升级工作。这也就意味着响应式的设计具有优越的前瞻性和延展性。

设计过程

以一个酒店的网站设计为例,我们来探讨一下创建响应式网站的详细步骤。去年9月份, Equator发布了最新的Macdonald 酒店 网站。Macdonald酒店是英国一家拥有47家连锁店的企业,这些连锁店遍布于英国和西班牙。我们为其创建了全新的网站,包括网站架构、内容拓展以及崭新的酒店预订引擎。下面我就给大家介绍一些我们具体的操作步骤以及一些在设计响应式网站时候值得思考的地方。

以下是主要的步骤:

1、研究调查:目的是充分理解一个响应式网站的产品需求。

2、绘制线框图:利用网格结构来排版以适应不同的屏幕宽度。

3、视觉感受检验:来推敲网站的整体样式。

4、编写网站:编写 HTML & CSS 代码。

调查研究

在设计程序中,前期研究工作是非常重要的一环,因此花点心思来研究一下那些使用不同设备的用户是非常有价值的。一旦清楚了用户想要以怎样的方式在多种终端设备上浏览网站,你就能够在项目工作中做到提纲挈领。

image1

对于网站的功能以及内容呈现,我们应该考虑那些技术方面的因素呢?

你可以想一下,不论多复杂的功能都能在所有终端设备上完美实现,这可能吗?尽管响应式网站能够通过改变CSS来适应不同屏幕的宽度,然而一旦网站包含了由大量JavaScript构成的复杂部件元素,即使经过了响应式的设计,网站在小屏幕的设备上也不能很好的转变,最好的方法,就是将复杂的部件直接隐藏掉。

绘制线框图

响应式网站设计的确需要不断地改变样式以保证适应不同的设备,但是要彻底讲清楚这背后的道理绝非易事,其中的奥妙真的需要在建站的过程中才能有深刻体会。首先我们需要确定不同的屏幕宽度类别来对网站进行布局。我们选定了3中典型的屏幕宽度,包括台式机、iPad以及iPhone。之所以选择这些设备只是因为它们基本上能够涵盖我们的产品需求罢了,但是当真正操作时,你一定要按照自己的需求来进行选择,你甚至有可能会考虑到更大的屏幕宽度,比如使用网络电视的时候。

设计工作的关键在于制作核心模板的线框图,但是你没有必要把所有屏幕宽度的模板线框图都画出来。这相工作的目的实际上是搞清楚CSS的改变如何影响网站的界面展示,所以你只要把精力放在那些布局会产生较大改变的页面上就可以了。对于我们来说,主要关注了网站的首页、所有的预订流程页面、酒店展示页面、定价页面以及某些具有相似布局的页面。这其中的每个页面都包含了不同的分栏布局、内容类型以及主要功能。

工作的开始

首先根据关键屏幕的宽度确定网站布局的网格结构。我们创建了3个页面来适应3中不同的屏幕宽度,分别是1024px(台式机屏幕)、768px(iPad屏幕)和320px(iPhone屏幕),接下来我们就需要根据这些来确定具体的网格结构。

image2

当屏幕宽度改变时,相对简单且有等宽分栏的网格结构会让网站元素整合工作变得更容易一些。

创建网站的主样板

每创建一个网页线框图你都要思考一下,如何让页面分栏以及包含分栏的部件很好地适应页面宽度的缩减。比如说,当页面空间不足时你该怎样做?如果本来是4分栏页面,当不得不转换成3分栏页面时又该怎么做?当遇到这些问题时,设计师需要不断地与前端工程师以及网站开发进行交流沟通,以此决定如何从视觉上或者CSS中处理好这些页面部件。

以网站首页作为开始

你或许会认为某些其它的页面可能会比网站首页更重要一些,但在我们的项目中是以网站首页开始的。以下是我们已经完成的原始线框图。你可能看到了,手机网站相比于另外的两种设备在页面长出了很多,这是因为手机网站页面的全部内容都被整合到了一个分栏里面。

image31

主导航栏的设计

我们创建了一个简洁的水平置顶的导航栏,并且它的宽度是根据屏幕的宽度来自适应的。当屏幕变窄时,各菜单项的间距会逐渐变小,如果需要的话它甚至可以另起一行。这种方法在台式机、笔记本以及平板电脑上使用很奏效,但是我们想将设计工作进行得更加深入,以保证它能够很好的适配更多的设备。于是在设计手机网站时,将主导航栏分割成了两栏。

image4

其它右对齐的页眉部件,将会以跟导航栏相似的变换方式来适应页面宽度的减少。

当你设计导航栏的样式时,一定要记着考虑当屏幕尺寸变化时它如何使用。导航栏的某些形式,比如使用标签,或许在页面宽度变窄时会很好看,但是它会变得相当难用。

页脚的设计

我们网站的页脚也是相当简单,只要考虑到必需的内容,以及当页面变窄,分栏减少的时候它该怎样变化就可以了。位于底部的页面部件的整合方法跟页脚一样,就这么简单。

image51

其它页面部件的设计

简单的网格结构使得我们页面部件的布局也变得很容易。在网站的首页上,我们使用了滚动条来控制4个项目,依靠鼠标点击来进行滚动显示。平板电脑网站的布局保留了这些部件,但将其修改为一次只显示3个项目。然而在手机版本的设计中,我们彻底移除了滚动功能,取而代之的是将这些项目垂直排列显示。你设计的每一个部件可能都需要不同的交互动作,因此一定要仔细思考用户在不同的屏幕尺寸下会如何来使用它们。对于手机用户而言,他们更喜欢通过向下滑动来翻页,而不是去依靠小小的按钮去和页面交互。

image6

即刻测试你的设计

当完成第一个页面的线框图时,要立即使用相关的设备去测试它。在线框图上加载图像生成简单的网页是很容易的,然后你可以在终端设备上滑动它试试效果,检验一下好不好看,感觉舒不舒服。这样一来,你就可以提前知道你的设计是否有效。通过这种方式进行测试,能够及早发现问题,以下就是我们起初的一个线框图,相信你很快就能发现其中存在的问题。

当用户浏览网站时,他们只能够看到前两个的界面元素,即网站导航和查找面板,这也就意味着,用户很难察觉到页面的刷新,而且他们也很难确定自己在网站中得具体位置。后来我们很轻松的解决了这个问题,方法是将这两项设计成可隐藏的,这样用户就可以很快地浏览到网站的主要内容了。

image7

不光发现问题,当测试平板电脑或者手机版本时,同样也能为你带来一些积极的反馈。既然你的网站线框图设计好了,也经过了测试、改进和完善,那接下来要做的就是让它在不同宽度的屏幕上看起来更舒服。

image81

从视觉上打量和感受你的设计

没有必要给所有的线框图都加上视觉效果,只要能够涵盖将来要用HTML&CSS编写的视觉效果就可以了。视觉效果与线框图最好有一些过渡,当手机网站的设计不需要初始的线框图的时候,最好在原型上加上一些视觉效果。

为网页设定样式:记住将网站的移动版本的样式设计得尽量简洁,这样做的好处在于不必使用CSS3为大量的图片编写风格化效果,但光这些CSS加载起来仍然需要一点时间。

仔细考虑字体效果:要确保你设定的字体尺寸能够让网页内容在每项设备中均容易辨认。当然对于手机版本,一定要保证在绝大多数设备上拥有较高的易读性。

而且,你要做好心理准备,当开发网站时,其视觉效果可能会有所改变,所以你仍然需要平衡好网站在设计上的美观性和它开发时的可用性之间的冲突。我们最终的网站在视觉和感受上并没有和原始设计图差很多,点击这里你可以和网站成品做一样比较。
image91

编写网站

编写HTML&CSS本身就是很有挑战性的,所以我就不再详细赘述了,但是下面的几点你可以注意一下。

图片尺寸的影响:尽管我们可以通过CSS对图片进行缩放,但是网站照样会加载原始尺寸的图片,所以一定要保证图片尽可能小。你或许能够使用一些JavaScrip小窍门来让网站加载的更流畅。当网站初始化的时候尽量让它加载最小尺寸的图片,而后如果需要加载大尺寸图片的话就可以适当运用一下JavaScript。

使用高级CSS的误区:一定要想办法让客户打消使用高级CSS样式的念头,这很重要,因为只有使用较为低级的样式才能照顾浏览器参差不齐的处理能力,这样才能让你的网站迅速加载。

保持长期且有效的沟通:团队成员的之间的相互讨论有助于项目顺利地进行,所以一旦发现问题,设计师和程序员要一道来通过讨论解决它们。

小结

在让客户同意设计一个响应式的新网站之前,你一定要确认这的确是适合他们的,然后你就需要通过与之沟通,说服他们相信做这样一个项目要比平常花更多的时间。但我坚信,不就的将来,会有越来越多的网站需要响应式的解决方案。

在本次开发响应式网站的过程中我们的确学习到了很多。而且我们很幸运,因为客户同我们一样,非常渴望开发一个如此有创造性的网站,我们都为这样一个网站的成功而感到骄傲。

发表评论

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

使用新浪微博登陆