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

所属分类: 网页制作 / 应用技巧 阅读数: 1303
收藏 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

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

更受欢迎 更具创造性的深底色网页设计实例

最新的调查表示,47%的受访者首选浅底色的设计, 主要原因是基于可读性。大多数人不喜欢阅读深色背景上的亮色文字,那样眼睛容易疲劳从而导致不适的阅读体验。
收藏 0 赞 0 分享

有创意的关于我们网页页面设计

本文收集了一些“关于我们”网页页面,60个漂亮的有效果的对用户非常友好的关于我们页面的设计实例。希望你能从中获得设计灵感。
收藏 0 赞 0 分享

整洁漂亮的网页设计的4项原则

我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论,并且包含许多极棒的设计实例。其中一个值得关注的地方就是4项主要的设计原则,它们已经在设计中为我所用。这4项原则就是:反差, 重复, 排列, 和分类。
收藏 0 赞 0 分享

设计参考 WordPress建站成功案例

最近国外有个牛人收集了 16 个专门收集 wordpress 精彩建站案例的网站,对于每一个 wordpress 迷来说,这都是一份大礼。
收藏 0 赞 0 分享

新闻风格网站设计实例25个

杂志和新闻风格设计越来越流行了。像Wordpress之类的内容管理系统对此类网站有比较多的模板选择,可以让普通的站长或博主轻松实现一个很像新闻网站的网站。在本文中,我们将推荐25个可以为你提供灵感的杂志风格网站设计。
收藏 0 赞 0 分享

网页文字设计应该像聪明女孩穿衣服

  这世上“没有丑女人,只有懒女人”这是女人美丽圣经里的最精彩的一句话了,一个女人只要舍得花时间琢磨怎么保养,怎么打扮,总能够找到方法展现自己美丽的一面的。界面设计何尝不是如此?那就让我们来看看聪明女人的穿衣之道里有没有什么做设计可以借鉴的地方
收藏 0 赞 0 分享

怎样设计网页?怎样制作网页?

  在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。   其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。正所谓“功夫在诗外”
收藏 0 赞 0 分享

网页可读性提高的几个方法

1. 使用对比色 (Use contrasting colours). 这里说的对比是文字的颜色和背景色的对比。这样用户可以比较容易的看清文字,减少阅读疲劳。有视力障碍的人可能看不清楚低对比度的文字。可以去Vischeck这个网站可以看看你的网站在色弱(或色盲)用户眼中的样子。
收藏 0 赞 0 分享

网页设计心得:页面布局的简单规则

·重复:在整个站点中重复实现某些页面设计风格。   重复的成分可能是某种字体、标题logo、导航菜单、页面的空白边设置、贯穿页面的特定厚度的线条等。   颜色作为重复成分也很有用:为所有标题设置某种颜色,或者在标题背后使用精细的背景。 &middo
收藏 0 赞 0 分享

网页设计人员应该注意的43个Web设计错误

这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条网站设计中常犯的错误,而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势,但纵观国内的各大网站,似乎易用性并未成为设计者们广泛理解的概念, 因此希望这篇文章对大家能有作用。 1. 用户必须
收藏 0 赞 0 分享
查看更多