商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 新闻资讯 > 网站设计 >

现代404页面设计趋势分析与案例

发表日期:2018-02-27 12:55聚圣源浏览次数: 本文关键词: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页面干脆为误入此处的用户提供了一个有趣的小游戏。

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.jushengyuan.com.cn/news/wzsj/7298.html

网站设计案例推荐

热门文章

揭秘2017年最新的网站快速排名设...

网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

日期:2017-06-30 浏览次数:5372

终于等到你!2017年2月设计圈实...

随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...

日期:2018-04-01 浏览次数:644

现代404页面设计趋势分析与案例...

每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...

日期:2018-02-27 浏览次数:634

商丘建站公司:内行讲堂!让设...

你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...

日期:2018-04-15 浏览次数:625

商丘网站维护:如何写出一个完...

本文对如何写出一个完美的错误信息,进行了3个重要组成部分的分析。 每个系统都会有无法正常工作的时候。可能是用户的错误或系统的失败。在这两种情况下,以正确的方式处理错...

日期:2018-05-27 浏览次数:621

相关文章

接下来炎热的8月,这3个设计趋...

骄阳如火,阵雨连连,不得不宅在室内的局面,似乎让百无聊赖的设计师更有时间在设计细节上投注更多的精力。不知道是不是夏日不适合做极简风的设计,更多设计师在过去一个月的...

日期:2018-01-05 浏览次数:64

设计趋势:蓝色系 UI 矢量插画...

今天分享一组来自Al Power设计师UI插画作品「The Dublin Blue Period」, 是一组非常适合 UI 和 WEB 设计上使用的插画风格。该作品统一运用蓝色色系绘制,只有颜色的饱和度不一样,可见设计...

日期:2018-01-05 浏览次数:61

2017年这3个设计趋势,请务必要...

本文是源自 Medium 上的一篇爆款设计文章(获得了 12.6K 的赞),UI/UX 设计师 Eleana Gkogka 在文章中,分享了 3 个值得我们警惕的设计趋势,并给出了具体的解决方式。同时,她也告诫我们,...

日期:2018-01-05 浏览次数:62

直播产品的战略和功能设计趋势...

直播行业在经历一年多的高速发展期后,开始进入稳步的发展阶段。在这一阶段,如何寻求用户活跃稳定、商业化变现、产业扩张布局成了各大直播平台主要的战略点,而这一切最直接...

日期:2018-01-05 浏览次数:65

最后一个月,这3个设计趋势是网...

正如同我们在之前所观察到的,今年所流行的设计趋势中绝大多数的都和字体排版有着密切的关联,哪怕到了年底最后一个月,设计师们都愈加倾向于使用漂亮的字体和出彩的排版让自...

日期:2018-01-05 浏览次数:63

随机推荐

电商工作后台首页的商业价值重...

以优酷直播项目为例,谈产品初...

大产品小细节!5分钟带你了解经...

亚马逊语音交互设计规范(一)...

年度力作!20个惊艳而全面的年...

怎样减轻网站改版对优化带来的...