网站维护页面的列表制作技巧

所属分类: 网页制作 / 应用技巧 阅读数: 1324
收藏 0 赞 0 分享
而且,很多时候,维护需要你的网站至少断网几分钟。

那么,在你的网站将要关机维护的时候,你该做些什么呢?你当然不希望用户看到404页面或其它错误页面,而且你很希望可以鼓励他们很快回访你的网站而不是“稍后”,是吧?如果是这样的话,你将需要创建一个定制的维护页面。下面我们准备了一个制作有效的维护页面的的列表,它将有助于保留你的浏览者,无论是新访问者还是回访者。

1. 保持你的维护页面简单而又用

维护页面的全部功能就是让用户知道你的网站还在运转而且维护只是临时的。不需要做任何超出这个的事情。确认一眼就能看懂你的这个页面是干嘛的,并为访问者提供他们感兴趣的信息。

另外一个对简单的维护页面很有用的功能是用多种语言展示你的维护信息。网站是国际化的,而且尽管你的很多浏览者可能能说一些英语,但是提供多种语言是很有帮助的。请谨慎使用在线翻译工具,因为很多时候,它们很不准确。你想让你的维护页面做的最后一件事情可能是进一步的迷惑人们——或者更坏——让他们反感。

Maintenance Page Screenshot

Twitter 维护页面提供直接的最少的信息,并保持一个简洁的设计,而且对用户依然是吸引人和友好的。

Maintenance Page Screenshot

Google的Adsense页面 用多种语言提供了简洁的维护信息。

Maintenance Page Screenshot

而且有的时候,Google Adsense 仅仅用清晰的语言解释发生了什么事情和页面什么时候会重新上线。注意Google 同样消除用户的疑虑:收益将像平时一样被跟踪,而且在宕机时间广告目标不会受到影响。

Maintenance Page Screenshot

来自于苹果店的维护界面抓住了要点。

Maintenance Page Screenshot

MobileMe 使用一个在视觉上吸引人的多语言的维护屏幕。

Maintenance Page Screenshot

2. 认识到这对你的用户是一种不便

当你的网站宕机,对你的通常用户会很不方便。这是个简单的事实。但是不要让感到不便的用户变为疏远的用户。简单的承认你的网站的宕机对你的用户是件痛苦的事情常常就能够让他们满意了。为宕机道歉,为他们提供有用的信息,让他们感到你已经意识到了这对于他们意味着什么。

Last.fm 在他们的维护页面的上面的右侧放了个醒目的道歉。

Maintenance Page Screenshot

Twitter提供了一种颇轻松的方式,不过依然致歉了,因为用户可能无法忍受宕机。

Maintenance Page Screenshot

3. 不要顾虑使用幽默

没有必要因为你的网站当掉了就把一起搞的很严肃。使用一些小幽默或许可以然你的维护页面变得有趣,并帮助提高你的网站在那些因为宕机而感到不便的访问者眼中的印象。想象一下和你的网站内容有关的小天使可以被用幽默的手法描绘出来。无论它是在你的标志或吉祥物上做些小动作,或甚至是与你的网站没有一点儿关系的东西,肯定会有一个天使可以让你的维护页面变得有趣的。

Etsy 显示Halm 正在处理当前技术问题。主意Etsy 也传达了正在发生什么以及预计恢复时间。

Maintenance Page Screenshot

Soundcloud 许诺会很快恢复并使用了一个双关来让维护页面变得醒目。(来源…).

Maintenance Page Screenshot

Ning 使用一个可爱的插画并且声明有经验的技术人员(图片)正在为了尽管让Ning上线而努力工作。(来源…).

Maintenance Page Screenshot

Reddit的维护页面使用了更多的信息,Reddits 可能不会停止使用Lisp…

Maintenance Page Screenshot

YouTube 貌似正忙于推出一些新的组合和配方。(来源…)

Maintenance Page Screenshot

Mozilla: 维修中…(来源…).

Maintenance Page Screenshot

Revver (来源…).

Maintenance Page Screenshot

Flickr的维护页面似乎不是很信息化的,但是很有趣。Flickr 正在享受按摩。

Maintenance Page Screenshot

FlashDen 声明一个10秒中的宕机并提供一个在维护自己的卡通角色以博取访问者的笑容。

Maintenance Page Screenshot

Bloglines 在网站宕机的时候使用一个管工的图片来做出解释。

Maintenance Page Screenshot

Apartmentguide.com: 在维护页面上使用维修工人的有一个例子。

Maintenance Page Screenshot

4. 为维护页面设计同样的外观

你希望访问者立即意识到他们来到了正确的地方,即使你的网站和往常看起来灰常不一样。如果你的维护页面与你的正常网站没有相似性,那么很多访问者会觉得他们到了一个错误的URL,而可能不会去关注你的页面上说了些什么。

请确保你的维护页面包含了你的logo并和你的网站保持同样的用色。即使只用这两件事情就可以让访问者在遇到一个意外的页面的时候感到比较释然。

Grooveshark 完整的保留了他们的头部和基本的色彩。

Maintenance Page Screenshot

StumbleUpon同样完整的保留了他们的头部和logo,甚至插画也是使用的他们的招牌色彩。

Maintenance Page Screenshot

Naturalinstinct 使用了同样的配色方案并提供给用户替代的联系选项。

Maintenance Page Screenshot

5. 告诉访问者你的网站什么时候可以恢复

维护时间可能会有较大的变化。有的时候一个网站可能仅仅宕机几分钟,也可能会有一两个小时,甚至更长的时间。让用户知道你预计网站什么时候能够恢复并运行。这样他们将会了解什么时候他们在什么时候可以回来访问。一个公开的维护页面可以鼓励用户在几个小时甚至几天后会回访一下,看看网站是否恢复了。有些事情比如你将在5分钟后恢复会鼓励他们这样做的。

iStockPhoto的维护页面告知访问者网站可能恢复正常的预计时间。

Maintenance Page Screenshot

Blogger使用一个包含网站预计恢复的时间的简单的页面。

Maintenance Page Screenshot

Linkedin让用户知道网站什么适合可以上线(来源…).

Maintenance Page Screenshot

StudiVZ建议用户先喝杯茶(等一下),然后告知访问者网站将在8点钟上线。(来源…).

Maintenance Page Screenshot

6. 提供推荐的内容

在你的网站宕机的时候,将网站上的一些文章保存为静态页面,是一种在执行维护的时候为用户提供一些内容来阅读的方式。有些别的网站甚至推荐其它网站上的内容,通常他们认为这些内容他们的浏览器可能会比较感兴趣。在你的访问者等待你的网站恢复的时候为他们提供一些别的事情来做是向他们展示你的关怀以及你意识到这对他们造成了不便(上面第二条)的一个很棒的方法。

Librarything宕机的图片建议在宕机的时候读一些书(来源…).

Maintenance Page Screenshot

Digg 提供一个他们认为用户会比较感兴趣的别的网站的内容列表。

Maintenance Page Screenshot

Github 在宕机的时候为用户提供一个有趣的YouTube视频来看。

Maintenance Page Screenshot

Mixx 为用户提供一些他们的最受欢迎的Mixx的的故事

Maintenance Page Screenshot

Sears 不得不在黑色星期五关闭以增强网站。这个维护页面为用户提供更多的导航选项——比如Lands’ End, Parts Direct 和Sears Credit (来源…).

Maintenance Page Screenshot

7. 邀请你的访问者在网站恢复的时候回访

因为你的用户确实在宕机的时候访问了你的服务,他们,当然会使用你们的服务。因此在网站恢复的时候提醒他们是有效的。显然,在网站恢复的时候,你可能不想告知服务的所有用户。所以,在网站恢复服务的时候让有需要的用户用户能够获得通知是个很好的主意。通知信件可以通过e-mail、手机短信或Twitter。

Soindustry 允许用户通过提交他们的Email地址来获取网站恢复通知。

Maintenance Page Screenshot

8. 告知你的访问者目前维护的进展情况

当然,许多维护中未预料到的情况会发生,那么让你的用户了解进展情况也是个很好的主意。一个及时的反馈是很重要的,让用户知道一切很好而且在另一方面一些人正在解决这个问题,大家需要多一些耐心……云云。

Habbo, 你可以约见朋友或交友的虚拟世界,在其维护页面提供了一个可爱的插画,并告知用户当前的维护进度。

Maintenance Page Screenshot

37signals 同样让用户跟进维护的状态。(来源…).

Maintenance Page Screenshot

关于原作者

Cameron Chapman 是一个有六年经验的网站和图形设计师,她同时也写一些博客,包括她自己的博客Cameron Chapman On Writing

更多精彩内容其他人还在看

网页设计技巧:iframe自适应高度的问题

所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe
收藏 0 赞 0 分享

网页色彩对比与调和技巧分享

在对比状态下,色彩相互作用与单一色彩所带给人的感觉不一样,这种现象是由视觉残影引起的。当我们长时间注视某一彩色图像之后,再看白色背景时,眼前会出现色相、明度关系大体相仿的补色图像
收藏 0 赞 0 分享

网页色彩性质的分类

任何颜色都可以使用三原色——红、绿、蓝组合而成,三原色中只有红色是暖色,所以要判断作品颜色的冷暖,可以依据红色成分的多少而定。色调主要由明度与彩度组合而成,用来表示颜色的状态
收藏 0 赞 0 分享

使用Photoshop 制作网页线框图简单实用

这篇文章向大家介绍一套免费的Photoshop 线框图套件,这个线框图套件中包括通知、图片和视频,表单字段,标题,段落,项目符号列表,导航,广告横幅和普通网站的元素,如:搜索框,电子邮件注册表单等等
收藏 0 赞 0 分享

CSS使用技巧总结

偶尔看到一篇CSS常用技巧的总结文章,本人整理了一下,晒出来和大家分享,希望可以帮助你们
收藏 0 赞 0 分享

Web设计师如何制作Retina显屏设备的图片

到目前为止,我们知道苹果设备中支持Retina屏幕技术的有“iPhone”、“iPod”、“iPad”和“Macbook Pro”,这些设备能为用户呈现更细腻、平滑和高质量的图片效果,提高了用户的视觉体验。做为一名Web设计师如何为你的网站创建这些适合Retina显屏设备的图片呢
收藏 0 赞 0 分享

JPG,GIF及PNG各类型的图片格式详细解说

大家都知道网页上面的图像一般用jpg、gif和png这几种格式,他们有什么区别以及在什么场合下使用进行详细介绍看了下面的内容后你可能会有了自己的结论
收藏 0 赞 0 分享

组件化的前端开发流程详细说明

做前端的同学都知道,做的页面多了,东西就会乱,因此我们需要统一一个开发流程,开发流程的好坏,直接影响着页面开发的效率,间接影响游戏的时间为了更好的开发,我们做了一下总结
收藏 0 赞 0 分享

我们在囧途之UI工程师职业感慨

我是一名还不算特别优秀的UI工程师;这个要先说明一下UI不是美工,美工是以图片方案设计为主的岗位,而UI是指用户交互体验的设计
收藏 0 赞 0 分享

分享8款提高网页设计出色的CSS工具

当一个人需要编辑或修改网站设计,CSS发挥着重要的作用;今天就给大家分享8款非常出色的CSS工具,这些工具都是很出名的,能够解决开发当中常见的棘手问题,希望对你开发有所帮助
收藏 0 赞 0 分享
查看更多