李成笔记网

专注域名、站长SEO知识分享与实战技巧

生活中的小惊喜,原来404页面还可以这样玩!你绝对没有见过

肯定人人都打开过404页面。

无论你开始上网多久了,面对404页面的时候肯定都很恼火。

所以它们存在的意义到底是什么?

404页面是用来提示网站用户他们想要打开的网页已经不存在了,他们可以跳转到你网站的其他页面。

一个有创意的404页面是用户对网站的一种新发现。它可以把令人不怎么愉快的场景变得轻松起来,还可以让用户知道在哪儿可以获得帮助。

接下来,Fotor懒设计(www.fotor.com.cn)将教你如何做一个有创意的404页面:

01.有趣

不要害怕,大胆的去做一个有趣的404页面吧。尽可能地发挥你的想象,什么都可以!只要能够表达出你要传递的信息。

Behance/Thapwaris Chinsirirathkul

在这个有趣的404页面,你被带到了太空。设计师用有趣、与众不同的方式放置404。

02.充分利用图形

在设计中,图形永远是你最好的朋友。你可以用图形组成文字或是图案,当然也可以用多个图形来拼出一个新的图形。

Behance/Manoj Bhadana

在这个页面里,设计师就用多个图案组合成了一个新的图形——一个问号。问号说明用户寻找的网页出了一些问题。而如果只是放一个简单的问号,则会显得单调无趣。

03.动起来

你可以选择用特效使图片看起来像是在移动,但是这已经是21世纪啦,如果你想要动态的效果,就真的让他们动起来吧。

Behance/PBB | PITBLACKBEARD

这个404页面的动画非常有趣可爱。就算读不懂页面上的文字,你也会照样喜欢这个页面。帽子上摆动的流苏给这个页面增添了新的魅力。

04.简洁的风格

你可以用非常非常简单的方式设计一个404页面。如果你觉得复杂的页面已经过时了或是你不喜欢这种风格,你就把它做的简单一点,只放一些必要的信息就行。

Behance/Keren Rijensky

这个404页面设计的超级简单,不过传达了足够多的信息。把404放置在一个放大镜里很形象——表明你在寻找一些东西,但是你却找到了这个页面。你不用看旁边的文字都能立马明白这是什么意思。

05.调动感情

调动人们的情绪。你可以让人们笑或是哭或是反省自己,还有更多更多。人类是情绪化的动物,人们会对你写的东西感同身受。

Behance/Keren Rijensky

这个可爱的小东西一定触动了你心灵的某一个角落。它看起来十分难过,对页面的丢失感到十分抱歉。你可能会为它的伤心感到自责,几乎都快忘了自己打开这个页面时有多不高兴了。

06.图文结合

图文结合的方式也很受人欢迎。它很有创意也展示了很多细节。所以为什么不把它加在你的404页面里面呢?

Behance/kobieta

这个404页面很有创意。一只鸽子隔着屏幕看着你,还给你提供了一些选择的建议。

07.别想太多啦

不要为了追求一个独特的404页面而抛弃现有的一切成果来设计一些完全不同的东西。看看现在流行的是什么,然后把他们运用到你的页面里。

Behance/Aaron Snyder

这个页面选了一个我们很熟悉的卡通形象。这个小人设计得不是很完美,但是很符合404这个状况。这个表情十分意味深长。披肩也暗示着不是人人都是赢家(或是英雄)。

08.实在点儿

不用掩饰404页面的主题。大家都知道到这个页面意味着什么,所以干脆就实在点儿,告诉他们是怎么回事儿。

Eleks

这个页面上有一个机器人(代表着网站或是互联网),小机器人开始从关节的地方损坏了。它坏了,就像你想要打开的页面一样,也坏了。

09.有特色一点

如果你想做图文结合的样式,不用非要把图像做得真实。随意一点,做出你自己的风格。卡通图像会让人觉得亲近。

Behance/Diogo Marquetti

这个404页面非常有特色。配色简单,图片可爱。画面的内容也很有趣。它告诉你是一只小羊而不是什么高科技导致了你打不开你的页面,因为它拔掉了你想打开的页面的插线。

10.运用重叠

用重叠的图形、文字和颜色打造有趣的视觉体验。

Behance/Evtimov

如果没有重叠的元素,这个页面看起来会过于简单了。它运用黑白的配色和一些简单的文字共同打造了一个具有设计感的页面。

11.选择相关的图片

尽管选择一些与主题不相关的图片可能会很有趣,但是使用相关的图片要更实际一些。相关的图片可以表达主题,也更讲得通。

Behance/Colin Tossijn

这个页面就使用了很相关的图片。红灯告诉你,出了一些问题,你得停下了。但是他们用了他们自己的Logo代替了原本的图形。这很有创意地宣传了他们的品牌。

12.用有限的颜色

只挑选几种可以搭配起来的颜色或是用同一色系深浅不同的颜色来打造你的页面。这样可以构建出一个统一的主题,而且设计的时候会比较简单,因为不需要用到那么多种颜色。

Behance/Alessandro Ceporina

这个页面用了很多阴影和深浅不同的蓝色,看起来很不错。虽然用的都是蓝色,但是深浅的差异又比较大,不会让人感觉“太蓝了”。而且主题鲜明,各个构件联系紧密。

13.有质感的设计

大多网页都是使用平面化的、配色简单的设计,所以如果使用立体的,比较有质感设计绝对可以使你脱颖而出。

Behance/Damien Pereira

这个页面还是用了比较简单的配色,不过立体的质感给这个页面填了一丝别样的风采。设计师在下方用了一个折纸展开的效果,文字下方的深青色背景又使整体画面看起来不会那么拥挤。

14.提供选择

当用户访问到了404页面时,为他们提供一些选择的机会比较重要。他们应该返回到上一个页面,还是直接跳转回你的主页?你提供的选择越多,他们越有可能留在你的网站而不是直接退出。

Behance/Harry Tran

这个页面为用户提供了很多选择。他们可以回到主页,或是搜索网站内容,或是访问网站的社交网络页面。比起把404页面当作访问的终点,设计师充分的利用了这个页面,尽最大可能留住用户而不是放弃他们。

15.打破常规

不要把自己局限在常规的网页设计中,可以选择的不单单只有文字、颜色和图案。打破常规,做些不一样的事,都可以让你从众多设计中与众不同。

Behance/Rodrigo Costa

这个页面就是一个打破常规的很好的示例。与传统的404不同,他们用他们公司的家具拼出了404。这个做法很有创意,也很有趣,打破了单调的传统。

16.多留些空间

没必要把你的404页面的每一寸都填满。让每一个构件都有呼吸的空间是种更好的选择。

Behance/Jacopo Caracci

除了logo和几条信息,这个页面的大部分空间都是空白的蓝色。左面和右面的信息中有很大一片空白,就像页面上的云朵一样,两者给人一种在飘动的感觉。

17.双关

404页面的意思就是有些东西找不到了,所以为什么不利用这个事实呢?想想有什么有趣的表达或是场景是与这个事实有关联的,并把他们用到你的页面中。

Behance/Zach Daley

这个页面想到了一个与丢失有关联的场景——一座大海中渴望被发现的孤岛。

18.无厘头一点

如果你有一些有趣的点子想放到404页面上,记得使用和主题相关的图片。

Behance/Zach Daley

这个页面上有一条有趣的信息:别慌,记得随时检查你的氧气含量。设计师还在旁边放了一个飘在太空中仿佛脱离控制了的宇航员。所以,这条消息到底是留给你的,还是留给宇航员的呢?

19.打破次元

将几个不同的画面叠加起来,打造一种打破次元壁的感觉。

Behance/Dariusz S

这个页面中,一把尖锐的刀划破了写有几条信息的白色背景。深红色和黑色的对比为页面增加了层次感。尽管画面中只有两层背景,看起来却像有三层一样。

20. 和谐的风格

记得提前确定好你的页面要用什么风格。如果想用尖锐的、有菱角的图形,就一个圆滑的元素都不要用。不论是哪一种风格,都要在页面里的所有元素上都运用这种风格,包括字体。

Behance/Cristina Maria

这是一个很圆润的尝试。与圆圆的云彩相同的风格也运用到了字体上。如果他们使用了一个普通的字体,看起来就会十分不和谐。


本文由Fotor小编倾情撰写、整理。

欢迎移步Fotor懒设计-www.fotor.com.cn

Fotor是全球1.9亿用户的在线快速平面设计平台。

Fotor首创“懒设计”概念,帮助没有设计基础的工作者轻松完成平面设计。用户只需拖放设计模板,或使用全能的修图工具,即可快速完成设计。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言