50个实用设计思路帮你设计创意404页面

   做网站是系统工程。首页的内容要层次分明,导航要结构清晰,子页面要排版均衡,相对而言自由度稍高一点的,应该是404页面 了。虽然404 本身就是一个告知用户内容访问出错的错误代码,但是富有创意的设计师会充分利用机会,展现网站的独特气质;重视用户体验的设计师,则会充分考虑此刻用户的心情,竭尽全力引导用户去对的页面。

  所以,404页面 可以做的很简单,但也可以创意十足。今天的酷站 推荐,就推荐50个创意爆棚的404 页面,每个页面配以相应的技巧说明,希望能给你帮助。

  01. 有趣的设计


  这是一个有趣的404 页面,用陨石坑来表现404代码,身处太空暗示你来错了地方。如果你访问这个设计所处的Behance页面,会发现更多有趣的地方。

  02. 图形化


  图标可以发挥各种各样的作用,指示作用,装饰,甚至作为纹理都可以。这个案例中,设计师用小图标来搭建问号,告知用户他们所寻找的内容并不在此。

  03. 使用动效


  这是一个好玩儿又可爱的404页面,从文案到动画都非常之有趣,如果你正好也很无聊的话,可以盯着这个动画玩一整天……

  04. 简约设计


  这个404页面超级简单,但是非常有效。简约清爽的设计,放大镜和404的组合足够说明问题。

  05. 情感化设计


  情感化的设计总能让人印象深刻。这个页面的设计能让人情绪有所触动,伤感的动漫角色拿着404的小旗子,扁平插画风令人赏心悦目。最下方绿色按钮可以带你会首页继续寻找你需要的内容,关键是,文案还很贴心。

  06. 插画说明


  插画在网页中的运用非常广泛,功能也多种多样。这个网页中的插画,不仅灵活地传达出页面跳转错误的情况,而且为你作出了正确的引导。

  07. 不要想复杂了


  想打造独特的404页面,并不需要非得找到某种独一无二的创意和彻底的创新,有时候掌握流行趋势就够你脱颖而出了。在这个404页面中,设计师使用了网络流行的涂鸦插画角色,此刻的文案也非常应景,整个页面的气质非常有趣。很独特,不是吗?

  08. 直接说明


  其实到了这一步,用户通常都知道他们遭遇404页面了,你并不需要回避这个话题,照直说就好了。在这个案例中,404旁边,一个手臂断裂的机器人以无比形象的方式,告诉你出错了。

  09. 风格化


  如果你想用更形象的方式来展现,你并不需要真的花费巨量的时间来精雕细琢。用诙谐而风格化的方式来展现就好了。在这个404页面中,扁平化的图形和色彩非常协调的结合在一起,创造出漂亮的场景。场景简单,羊叼着插头所传达的信息也非常清晰。

  10. 重叠效果


  使用重叠的形状、字母、色彩来创造有趣的404页面效果。这个404页面的设计也很简单,黑白模式,无衬线字体,图形和字体重叠,大小对比强化404的概念,简单而不单调。

  11. 使用相关的图像


  有时候在页面中使用毫无关联的图片是很有意思的,而使用有关联的图片,则显得更加有用。这个案例中,设计师加入了红灯警示,也是在暗示用户:你们来错了地方。

  12. 有限度地使用色彩


  挑选那些能够和谐搭配的色彩,即使要变幻色彩也是基于其中的一种或者几种来进行调整,并坚持如此。创建一套主题,这样可以简化一系列的设计过程。这个404网站也正是这样来设定它的色调。

  13. 拥抱纹理


  在扁平化成为标准的今天,恰当地使用纹理还是能很大程度降低工作难度的。这个404页面依然使用着扁平风的用色,但是适当地加入一些纹理之后,整体看起来更协调更有质感了。

  14. 提供选择


  当访客进入404页面之后,他需要做什么?是访问首页还是回到上一步?你提供的选择越多,就越有可能带领他们走到他们真正想要的地方。你要做的是让访客留在你的网站。这个页面就是,当用户来到这里的时候,网站设计师为他们留下了足够的选择,让用户尽量留在自己的网站。

  15. 标新立异


  我想,标新立异打破常规是许多设计师都会想到的问题。而这个404页面,也正是从字体、色彩到样式都充分进行了调整,进行了极具创造性的设计,打破了常规的视觉设计。

  16. 使用负空间


  学会让页面呼吸,可以让你的页面更大气。这个404页面使用了蓝绿色和白色,并且通过适当的留白使得整个页面足够简单大气。

  17. 双关


  404本质上是告诉用户,他要的东西没有找到,那么我们要怎么样展现这个事实?有的时候,用一些内容和视觉上的“双关”来展现这一点。而这个404页面就是这样处理的,通过荒岛这个意象来向用户传递“你走错了”这个概念。

  18. 大胆表现


  如果你有更加有趣的方式来展现404的代码,不妨尽量让两者之间产生关联,然后再表现。这个案例当中,设计师使用了“氧气含量不够”来同404代码之间产生关联,有趣诙谐,意境也接近。

  19. 拓展维度


  合理地运用视觉设计,能让二维的页面给人以三维的冲击感。这个页面的设计就是这样做的,刀的角度和页面配色使得整个页面看起来像是三维的一样。

时间: 2024-09-14 08:14:23

50个实用设计思路帮你设计创意404页面的相关文章

4个设计思路帮你简化APPLE WATCH平台的产品

  这篇最近一两周陆续看到一些实实在在的Watch App设计案例文章,而不是过去那些概念设计或是臆想,于是想要拿来一些做译文.今天是第一篇,希望接下来还会多做些,下面进入译文 >>> "优秀的设计师会对新的设计方式有所预见并做好充分的准备,而不只是被动的响应与跟从." – David Hoang 我们的团队决定在Apple Watch正式发售之前就对我们的Geocaching(地理藏宝)app进行新平台的重设计工作,以下就是我们在此期间学到的东西,特此分享给大家.

不容错过的优秀404页面设计指南

  平生不见404,阅尽全网也惘然.对,如果你从未打开过404页面,就可以说你几乎未曾真正用过互联网. 404页面的出现的原因很简单:当你输入链接,浏览器向服务器提出请求,但是服务器无法解析你提供的URL的时候,服务器就会返回给你一个"404为找到"的页面,换句话就是"服务器是正常的,只是没找到你要的页面". 的确,404页面的出现就是这么简单.它诞生于互联网和浏览器刚刚兴起的时代,但是经过近20年的演化之后,它早已进化出基于互联网的亚文化--404页面并不简单.

PS实用修图思路及设计磨皮技巧

  实用修图思路及设计磨皮技巧!非常详细的讲解及分析,高端商业修片方法,对这方面感兴趣的童鞋们,有空可以练习一下 分类: PS入门教程 ps磨皮教程

WIN8设计特性浅谈和腾讯微博MS首版设计思路分享

中介交易 SEO诊断 淘宝客 云主机 技术大厅 作者:dengxuecui(崔登学) miaotong(佟淼) 10月,一个收获的季节,微软的新一代操作系统window8悄然而至,同时,我们的微博客户端团队,也搭上了第一波win8应用的末班车,设计并推出了腾讯微博MS版本.本文将结合腾讯微博MS版本的设计过程以及对win8系统特性的认识,聊聊win8操作的平台的应用设计. 文章很长,请选择有价值的部分阅读,或许你敢把它读完呢- 本文索引: 1. Windows8-再构想 2. Win8的系统特性

产品设计思路:寻找产品的性格

文章描述:如何在设计中寻找产品的性格. 在前一文发表之后,我收到了不少邮件,有点出乎意料但又在猜想之中的是,这些邮件之中交互设计行业远多于工业设计行业,互联网行业远多于实体产品行业,而我仍想从事实体产品的工业设计. 但我也确实对交互设计对互联网非常感兴趣,甚至有意愿涉足,这种想法来源于对设计行业的变化的认同和理解.设计发生变化了,表面看或许是交互设计及相关设计的兴起,传统工业设计在一些情形上的隐退等这一些现象,但更深层的是整个设计的变化,不只是一个领域的设计替代另一个领域的设计,工业设计同样也发

去年最棒的50个LOGO设计

  回顾一下2014年那些惊艳的设计,帮自己取长补短,汲取灵感,今天先将去年广受好评的50个LOGO设计分享出来,从创意到色彩都非常有个性,来收藏咯. 分类: PS入门教程

iOS简易蓝牙对战五子棋游戏设计思路之一——核心蓝牙通讯类的设计

iOS简易蓝牙对战五子棋游戏设计思路之一--核心蓝牙通讯类的设计 一.引言     本系列博客将系统的介绍一款蓝牙对战五子棋的开发思路与过程,其中的核心部分有两个,一部分是蓝牙通讯中对战双方信息交互框架的设计与开发,一部分是五子棋游戏中棋盘逻辑与胜负判定的算法实现.本篇博客将介绍游戏中蓝牙通讯类的设计思路 二.设计通讯类的核心想法    在前篇的一篇博客中,我们有详细的介绍iOS中蓝牙4.0技术的应用与系统框架CoorBluetooth.framework中提供的编程接口的用法.博客地址如下,如

高质量PHP代码的50个实用技巧必备(下)_php技巧

接着上篇<高质量PHP代码的50个实用技巧必备(上)>继续研究. 26. 避免直接写SQL, 抽象之 不厌其烦的写了太多如下的语句: <span style="color:#333333;font-family:''Helvetica, Arial, sans-serif'';">$query = "INSERT INTO users(name , email , address , phone) VALUES('$name' , '$email' ,

网上考试设计思路是怎样的?_编程10000问

global.asa < script LANGUAGE=VBScript RUNAT=Server > Sub Application_OnStart    dbPath = "DBQ=" & Server.Mappath("onlinetest.mdb")    dbConnectionString =  "DRIVER={Microsoft Access Driver (*.mdb)}; " & dbPath