课程咨询 :0571-56020837 QQ:162157806

南昌达内UI名师

南昌UI培训 > 达内新闻 > 404页面设计趋势及优秀设计案例
  • 404页面设计趋势及优秀设计案例

    发布:南昌UI培训      来源:优设网      时间:2015-12-10


  •     当用户打开错误链接的时候,就需要网站的404页面了。优秀的404页面设计不仅要告知用户走错地方,还要引导用户继续浏览,找到他们真正想要的内容。

        达内ui设计培训专家表示,网页设计师设计一款自然并且很有用的404页面,免不了要下一番功夫的,本文将分析404页面设计技巧以及给出一些优秀的404页面作为参考。

        404错误代码的定义:当你所访问的页面不存在的时候,服务器会返回这么一个代码。原因可能是Url 链接错误,或者原本的页面被删除了。

        一、不要使用默认页面

        每个网站所托管的服务器都有默认的404页面,页面是非常粗糙的。

        默认的404页面完全没有任何功能性,对网站本身也毫无用处,既不能调用网站的模板,也不具备自己的风格。 

        所以,网页设计师设计出自己的404页面很有必要。保持页面风格的一致性,功能上则将用户引导到必要的地方,这也是当今404页面的职责所在。

        二、自然的用户体验

        没有人喜欢停留在404页面当中。404页面就是要引导用户去别的地方。

        每个404页面都需要网页设计师因地制宜,帮助访客迅速简单的找到想要的内容。确保文字易读,排版清晰,呈现功能和内容的方式要简单,避免混乱。

        除此之外,你还可以在404页面中添加内容链接,尤其是相关内容的链接。最好是设置用户反馈链接,帮助网站更好地解决问题。

        三、避免复杂的专业术语

        最好以简单直接的方式来设计404页面,不要去考虑太多的服务器报错代码和技术词汇的含义,用户并不能理解这些复杂的东西。

        建议404页面保持轻松氛围,使用幽默的文案和图片内容,让用户保持愉快的心情和好奇心,告别紧张情绪。网页设计师还需提供可行的解决方案,使用户可以冷静的解决问题。

        四、优秀404页面赏析

        达内ui设计培训专家介绍一些设计优秀的404页面,无论是易用性设计还是氛围和布局,做的都非常好,可以拿来借鉴。

        Snuggle Bugz

        页面中所有的图标和按钮样式都和整个布局风格保持了高度的一致,可爱的风格环节缓解了找不到页面的尴尬气氛。

        Fork CMS

        Fork CMS 将品牌标志性的形象融入到404页面中,配合聪明的文案和海洋主题,显得颇为有趣。

        Gumroad

        Gumroad 的404页面用的是更加安静的方式来引导用户:将随机的产品静静摆放到用户眼前,将失误转化为销售的机会,引导用户深入网站继续购买。

        Ramotion

        Ramotion 的404页面,简约而对比强烈的排版让页面不会显得太难看,然后引导到到首页。

        Angry Birds

        愤怒的小鸟的页面和品牌风格的融合做的非常不错,有趣的文案和可爱的动漫形象,让用户确知他们所在的网站,并且不会让人觉得尴尬。

        Larkef

        这个404页面的设计就非常幽默,页面使用了全屏视频背景,非常有趣。

        GitHub

        GitHub 这种站点的404页面的设计也非常有特色,页面上巨大的搜索框非常符合网站本身内容丰富的特性,一个搜索框就能让流连此处的程序员们找到他们想要的东西。

        ArtStation

        ArtStation 页面的404错误代码相当的明显,网站背景图片贴合主题,而回到首页的按钮是整个页面中最醒目的按钮。

        Webydo

        强对比的色彩和排版是Webydo的特色,这也使得网页的信息更轻松地吸引用户的注意力。导航栏的存在让用户可以轻松去不同的地方,最醒目的黄色按钮引导用户开始创建网站。

        Stormpath

        Stormpath 用的背景图和文案都非常的逗趣。

        Underbelly

        Underbelly采用了简约直观的内容设计,并且加上了视频背景,确保了信息量的丰度,也保证了首页链接足够突出。

        Forbes

        福布斯的网站是靠排版和内容而支撑起来的,而404页面的设计也沿袭了它的这一特色。搜索框和链接可以帮用户寻找他们真正需要的内容。

        Marvel App

        Marvel 的404页面给用户提供了两个方式来解决问题:发邮件给他们,或者发推特给他们。

        Engadget

        瘾科技的404页面沿袭了他们一贯的“科技风”,从像素风格的404和互联网流行的暴漫插画都充分体现了他们的“互联网基因”。

        Tripomatic

        卡通式的插画背景创造出轻松愉悦的氛围,让404页面不再显得单调无趣。

        Aerolab

        简短的文字和高对比度的设计,营造出独特的设计感。

        MailChimp

        MailChimp 的顶部导航一直常驻在顶部,而为了让用户更好地找到想要的内容,提供了一个搜索框。

        Code School

        CodeSchool 的404页面仅仅添加了一个回首页的链接,不同于其他的页面,它的特点是漫长的动效。用户体验很不错。

        TinyCarrier

        TinyCarrier的404页面中的插画都是有趣而受人欢迎的矢量图。页面的整体设计和其他的404页面类似。

        Email Center UK

        Emailcenter 的404页面为用户提供了一个有趣的小游戏。


    推荐文章

上一篇:设计干货!25条史诗级平面设计技巧

下一篇:由浅入深的8个HTML5动效设计

最新开班日期  |  更多

UI设计培训免费训练营

UI设计培训免费训练营

开班日期:每周一

UI设计培训高级班

UI设计培训高级班

开班日期:每周一

UI设计培训全日制班

UI设计培训全日制班

开班日期:每周一

UI设计培训周末班

UI设计培训周末班

开班日期:每周一

  • 地址:南昌市北京西路156号洪城大厦10楼
  • 课程培训电话:0571-56020837 QQ:162157806     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.com.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56