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. 拓展维度

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

20. 贯穿始终的设计

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

21. 保持精致

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

22. 充分利用品牌

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

23. 指示明确

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

24. 使用不同的介质

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

25. 思维不要局限于电脑

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

designschool

文章来源:优设

优设译者:@陈子木

(0)

相关推荐

  • 50个设计思路帮你解析创意404页面(下)

    好玩的地方在于,404页面的设计思路其实可以拓展到许多其他的地方,UI设计.网页设计甚至室内设计.设计的思路和原则原本就是相通的,这些独树一帜或者别具匠心的404页面单独看的时候并没有什么,但是深入总 ...

  • 《五行·素》的故事–手机主题设计思路与技巧解析

    小编:今天给大家带来的是获得华为主题"最具大师风范奖"–<五行·素>的设计思路和技巧解析,通过这套UI主题,可以让我们感受到的是,我们的设计应该要把形和意结合起来,才不 ...

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

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

  • 404页面的情感化设计

    小编:做UI行业的都应该知道404页面是非常重要的一部分设计,当页面出现错误时它是增强用户体验的很好的做法,其遵循的理念是: 提供简明的问题描述,消除访客的挫败感.提供合理的解决方案,辅助访客完成访问 ...

  • 节日图标的5种设计思路

    APP的图标作为启动产品的入口,一直是一个重要的视觉符号,为了让用户更好的记忆,其设计通常使用与产品的功能和内容相关,让人看到图标就能联想到产品的功能使用场景等.用户也是通过图标来寻找.识别和打开产品 ...

  • 50个设计简约的移动 APP UI 设计作品(下)

    对于设计师来说,经常浏览一些新颖的设计作品是非常重要的,特别是入门或进阶级别的设计师更需要多看.多想.多做,以便获得更好的灵感.创意,并追求不一样.不重复的设计来提高自己的水平. 今天和大家分享50个 ...

  • 50个设计简约的移动 APP UI 设计作品(上)

    对于设计师来说,经常浏览一些新颖的设计作品是非常重要的,特别是入门或进阶级别的设计师更需要多看.多想.多做,以便获得更好的灵感.创意,并追求不一样.不重复的设计来提高自己的水平. 今天和大家分享50个 ...

  • B端产品 — 浅谈Atlas设计思路

    今天分享一款运维相关的B端产品,主要阐述自身的设计思路及产品的优化过程. B端产品对产品链路有着高流畅度与高效率的诉求.设计师在做B端产品的的时候要有全链路和小白用户视角,以体验及效率为先,我们需要协 ...

  • “色*界”派对-设计思路

    小编:今天给大家带来的是由猫铭给大家分享的"色*界"派对-设计思路.如此绚丽的一张画报有没有瞬间直逼你的眼球呢?色彩搭配的方式与风格非常多元化,如此大胆的配色你爱不爱呢?作者已经给 ...