娓娓道来!50个实用设计思路帮你设计创意404页面(上) - 优设网 - UISDC

娓娓道来!50个实用设计思路帮你设计创意404页面(上)

2015/06/08 15549评论区

50-404-page-design-tips-1-1

做网站是系统工程。首页的内容要层次分明,导航要结构清晰,子页面要排版均衡,相对而言自由度稍高一点的,应该是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. 拓展维度

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

20. 贯穿始终的设计

如果你喜欢什么什么风格,就一定要坚持使用。喜欢棱角分明的造型,就不要过多融入圆润的元素。这个404页面就是非常典型,圆润的风格融入刀每一个细节当中,贯穿始终。

21. 保持精致

如果你喜欢精致细腻的设计,那么请坚持使用这样的样式和风格。如果你一直保持精致的设计,那么整个设计会让人感觉非常高端。这个404页面的设计,从配色到风格都高度的一直,精致华丽,富有质感,延续性也很强。

22. 充分利用品牌

你的品牌有什么特色?有什么视觉特征?它能否融入刀404页面当中?当然可以,这个404页面就是,作为一个花卉公司,在404页面中使用花卉元素又有何不可呢?

23. 指示明确

如果你不想为用户提供过多的选择,那么可以用一两个明确的指示,来引导他们。这个网页的设计在保持清爽的同时,也指示明确。可爱的小飞机在地图上飞跃,告诉用户该按哪个按钮。

24. 使用不同的介质

你的404页面不一定非得是单纯的数字,它也可以融入到其他的介质中去。这个案例中,设计师让404的提示以刺绣图案的形式展现,并且镶嵌在画框中,古怪,但是很有趣。

25. 思维不要局限于电脑

其实和上一点很相似,为什么一定要用更加“数字化”的方式来展现么?刺绣可以,黏土人也可以。

【优质404网页养成手册】

案例加持:
《柳暗花明!17个让人想亲自体验的404页面》

模板加持:
《良心资源!20个风格多样的高质量404模板免费下载》

情怀加持:
《做有情怀的设计师!如何打造善意优雅的404页面?》

原文地址:designschool
优设译者:@陈子木

「子木说」

创意不仅需要恰如其分,而且需要捕捉时机。今年WWDC上发布的iOS9、Mac OS X 10.11,iOS 9,watchOS 2,乍一看给人强烈的新鲜感,但是其中许多设计其实早已有之。最典型的就是OSX和iOS9中的窗口分割的设计,从Windows到Android,其实早就有了,但是为何苹果能给人如此不同的感觉?因为他们确实有所创新,交互和细节上的打磨不仅在现有的设计上进行调整和打磨,符合逻辑,更加好用,而且他们还掌控好了时机——用户已经开始对这样的设计熟悉了,他们需要这样的设计,并且现有的设计还不够好!

不仅仅是软件,硬件也是如此。最新最快并不是最好的,只要你做的足够好,足够用心,时机足够好,即使你是后来者,一样可以赢得认可和尊敬。当然,“抄袭”和“借鉴”是另外的问题了。

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量96万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/50-404-page-design-tips-1

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 界面设计 版式设计 排版布局 职场 优设专访 优设大课堂 设计师干货 设计达人 配色 web前端开发 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 平面设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里