当图形元素和数字404巧妙结合后，让用户烦躁的报错界面瞬间变得趣味十足，心情也好了不少呢！
插画类
色彩鲜明的插画与404错误页面结合起来，一切看上去就像是一场美丽的意外。
场景类
融入想象力到404界面，创造一个场景，编写一则故事，触动用户的情绪，足以让抓狂的用户安静下来。
象征类
借助生活尝试中的一些视觉元素来传达404的概念也很有创意！断掉的铅笔、缺了一块的西瓜、未插好的插头，都很典型的象征了404错误界面。
情感类
借助可爱的的形象来表达404错误伤心的心情，起到情绪共鸣的作用。404页面在设计、功能上也随之有所改变，而今天的文章就是总结一下当前404页面设计的趋势，并用真实的案例为这些技巧进行说明。
理解404
诸多常见的HTTP错误当中，404是最常见，也是最为大家熟悉的错误代码。通常当你所访问的页面不存在的时候，服务器会返回这么一个代码。造成这一点的原因可能是Url 链接错误了，或者原本的页面被删除了。
但是你不能要求每个用户都能熟知这个代码的含义。即使用户知道明白，也很难直接排除故障，所以，我们需要让事情变的更加简单，解决现实可见的问题。
每个页面的易用性设计都直接影响着用户留存率，页面设计的每一个细节都直接影响着用户行为。如果在设计404页面的时候，时刻关注着细节和易用性，抓住用户的真实需求，会给网站带来明显的提升。
千万不要使用默认页面
每个网站所托管的服务器都会有默认的404页面，这个通用又简陋的页面其实是非常倒胃口的。也正是这个粗糙的页面促使大家设计属于自己的404页面。
撇开设计不谈，默认的404页面也完全不存在任何的功能性，也不会对网站本身有任何裨益。
退一万步，即使我们不要功能，这个页面没法调用网站的模板，不具备自己的风格，它是彻头彻尾的鸡肋。
所以，设计自己的404页面很有必要。保持页面风格的一致性，功能上则将用户引导到必要的地方，解决用户的困惑和问题，这是一个现代404页面的使命。
自然的用户体验流程
首先，没有人喜欢待在404页面当中。它存在的目的，就是引导用户去别的地方。
每个404页面应该都需要设计师因地制宜地考量，帮助访客以最简单的方式最快地找到想要的内容。确保文字易读，排版清晰，以足够简明的方式来呈现功能和内容，避免混乱。
同时，如果你想让用户感到正被积极地帮助，那么不妨在404页面中添加内容链接，最好是相关内容的链接。如果用户能直接在页面报错的话，那么能帮助网站更好地解决问题。
避免复杂的专业用语
考虑到很少有足够好的诊断机制来根治404的问题，所以最好还是以简单直接的方式来设计404页面。不要去考虑太多的服务器报错代码和技术词汇的含义，对于用户而言，这些信息可能是让他们更加迷惑的根源。
尽量让页面保持轻松、幽默的氛围吧，这是让用户告别紧张情绪必需的设计。提供可行的解决方案，让他们可以在冷静中解决问题。
使用幽默的文案和图片内容，可以让访客保持愉悦的心情和好奇心，不要让他们感觉自己做错了什么。
设计实战
下面是一些设计优秀的404页面，它们在易用性的设计上非常用心，仔细看看他们都是怎么布局，如何营造氛围的，也许会对你的下一版404页面提供不错的灵感。
Snuggle Bugz
欢迎入坑！现代404页面设计趋势分析与案例
页面中所有的图标和按钮样式都和整个布局风格保持了高度的一致，略显可爱的风格环节了找不到页面的尴尬气氛。
Fork CMS
欢迎入坑！现代404页面设计趋势分析与案例
Fork CMS 将品牌标志性的形象融入到404页面中，配合聪明的文案和海洋主题，显得颇为有趣，令人忍俊不禁。
Gumroad
欢迎入坑！现代404页面设计趋势分析与案例
Gumroad 的404页面用的是更加安静的方式来引导用户：将随机的产品静静摆放到用户眼前，将失误转化为销售的机会，引导用户深入网站继续买买买。
Ramotion
欢迎入坑！现代404页面设计趋势分析与案例
Ramotion 的404页面足够简短也足够偷懒，简约而对比强烈的排版让页面不会显得太难看，然后带着用户去首页……似乎也是不错的选择。
Angry Birds
欢迎入坑！现代404页面设计趋势分析与案例
愤怒的小鸟的页面和品牌风格的融合做的非常不错，有趣的文案和可爱的动漫形象，让用户确知他们所在的网站，并且不会让人觉得尴尬。
Larkef
欢迎入坑！现代404页面设计趋势分析与案例
这个404页面的设计就非常幽默，页面使用了全屏视频背景，这段视频是来自著名情景喜剧《IT狂人》，令人捧腹。这个设计唯一让人比较尴尬的是，你没法回到网站首页……
GitHub
欢迎入坑！现代404页面设计趋势分析与案例
GitHub 这种站点的404页面的设计也非常有特色，页面上巨大的搜索框非常符合网站本身内容丰富的特性，一个搜索框就能让流连此处的程序员们找到他们想要的东西。
ArtStation
欢迎入坑！现代404页面设计趋势分析与案例
ArtStation 页面的404错误代码相当的明显，网站背景图片贴合主题，而回到首页的按钮是整个页面中最醒目的按钮。
Webydo
欢迎入坑！现代404页面设计趋势分析与案例
强对比的色彩和排版是Webydo的特色，这也使得网页的信息更轻松地吸引用户的注意力。导航栏的存在让用户可以轻松去不同的地方，最醒目的黄色按钮则干脆引导用户开始创建网站。
Stormpath
欢迎入坑！现代404页面设计趋势分析与案例
Stormpath 用的背景图和文案都非常的逗趣，调侃的味道很浓郁。
Underbelly
欢迎入坑！现代404页面设计趋势分析与案例
很多404页面都采用了简约直观的内容设计，Underbelly 也是如此，不过他们加上了视频背景，确保了信息量的丰度，也保证了首页链接足够突出。
Forbes
欢迎入坑！现代404页面设计趋势分析与案例
福布斯的网站是靠排版和内容而支撑起来的，而404页面的设计也沿袭了它的这一特色。搜索框和链接可以帮用户寻找他们真正需要的内容。
Marvel App
欢迎入坑！现代404页面设计趋势分析与案例
出现404页面之后，最重要的是解决问题。所以Marvel 就给用户提供了两个方式来解决问题：发邮件给他们，或者发推特给他们。
Engadget
欢迎入坑！现代404页面设计趋势分析与案例
瘾科技是著名的科技网站，他们的404页面也沿袭了他们一贯的“科技风”，从像素风格的404和互联网流行的暴漫插画都充分体现了他们的“互联网基因”。
Tripomatic
欢迎入坑！现代404页面设计趋势分析与案例
卡通式的插画背景创造出轻松愉悦的氛围，让404页面不再显得单调无趣。
Aerolab
欢迎入坑！现代404页面设计趋势分析与案例
简短的文字和高对比度的设计，营造出独特的设计感。
MailChimp
欢迎入坑！现代404页面设计趋势分析与案例
MailChimp 的顶部导航一直常驻在顶部，而为了让用户更好地找到想要的内容，提供了一个搜索框。
Code School
欢迎入坑！现代404页面设计趋势分析与案例
CodeSchool 的404页面仅仅添加了一个回首页的链接，不同于其他的页面，它的特点是漫长的动效。不过总体的用户体验还不错。
TinyCarrier
欢迎入坑！现代404页面设计趋势分析与案例
大家都喜欢矢量图，而TinyCarrier的404页面中的插画都是有趣的矢量图。页面的整体设计和其他的404页面相差不多。
Email Center UK
欢迎入坑！现代404页面设计趋势分析与案例
Emailcenter 的404页面干脆为误入此处的用户提供了一个有趣的小游
我认为满口的网络语言并不是风趣幽默，反而是没有文化底蕴。
网络流行语是一种快餐文化，更新速度快，受众群具有明显的特征化：
年轻、信息的接收能力强。
聊天中经常会收到一些暴漫表情还有网络用语。
仅从我个人来看，这算不上幽默。我理解的幽默是带有智慧的笑。如钱钟书老先生之流。很大程度上，经常发一些网络用语、各种表情的人，在现实生活中却表现的很普通。没有妙语生花，也没有发现趣味从而制造幽默的能力。
但从大的角度上来看，网络文化这种现象其实也是属于幽默的范畴。因为幽默的共鸣需要等同的条件，这里可以说是世界观或者是大家具备一定理解和常识的公共领域。
举个例子：
程序猿要了3个孩子，分别取名叫Ctrl、Alt和Delete，如果他们不听话，程序猿就只要同时敲他们一下就会好的。
这个就是典型的程序员的幽默，然而，如果你对于这些不了解，或者连一定的电脑常识都没有。你是很难找到其中的笑点的。
屠夫不懂文人的幽默，却爱听满口黄段子的俗人。在屠夫眼里，这样的俗人才是幽默有趣的表现。
同理，并不热衷于网络文化的我，很多时候也无法get到其中的笑点。或许，我很明白笑点在哪里，甚至当对方给我讲了一些网络流行语的时候，我都能感觉到对方在提示我“此处应有笑声”。然而，我依旧是笑不出来，相反，这样聊久了，倒有种穿着有碎石的鞋逃脱追杀的窘迫感，前行或者后退，都是令人不舒服的。
有时候，幽默更像是对接的暗号，用以在茫茫人群中甄别出和自身拥有相同频率的同类。这点，与你能否接受无关。正如，我觉得人渣不是人，但从生物学上来说，人渣是具备人类这种生物的相关特性的。幽默也是一样。
以下是我个人的看法，网络文化的便捷性让看似有趣的东西更容易传播，然后在特定的群体里流行开来。而参与这个所谓有趣事物的传播过程，会让人一定的错位感。这种错位感大概就是“233~这个是最近最火最有趣的东西。你看，我也会用诶。我也是最紧贴流行最有趣的人哦”。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）