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

好玩的地方在于,404页面的设计思路其实可以拓展到许多其他的地方,UI设计、网页设计甚至室内设计。设计的思路和原则原本就是相通的,这些独树一帜或者别具匠心的404页面单独看的时候并没有什么,但是深入总结一番,你会发现它们的价值远不止于它们看起来那么简单。

阅读这篇文章之前,不妨先看看上半部分:《娓娓道来!50个实用设计思路帮你设计创意404页面(上)》

26. 不局限于文本

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

文本并不是网页传递信息的唯一途径,你应该发掘更多更有创意的表现形式。这个404页面采用的是太空的主题,404中间的0用星系来呈现,应景又帅气,你看,不用文本一样不错。

27. 建立情感纽带

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

如果你能和访客构建起情感纽带,那么这个页面一定能起到非常不错的效果。情绪的感染,能让访客同你的品牌联系到一起。在这个案例中,文案和图片的搭配非常巧妙,图片和文字给人以一种“在路上”的感觉,它不仅能被人轻松理解,而且很多人会有这样的冲动,自然能让许多用户与之产生共鸣。

28. 充分利用影像

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

漂亮的照片总是特别吸引人。用镜头下的照片来呈现设计总有着不同凡响的魅力。在这个案例中,美味的食物在镜头下表现出无与伦比的魅力,在404这样一个愉快的局面下,用漂亮的图片注入不同凡响的活力。

29. 表现动态

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

表现动态并不意味着让页面上的东西真的动起来,让元素看起来仿佛动起来,就能创造不俗的效果。在这个404页面中,404三个数字虽然是静止的,但是呈现出动态的感觉。

30. 结合流行文化

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

在404页面中使用标志化的流行元素或者偶像,也能对相当一部分用户产生足够好的效用。在这个案例中,设计师将Lionel Richie 的一张老照片用作404页面的背景,搭配一首老歌的歌词,应景也极具喜感。

31. 象征手法

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

使用象征性的手法,来借助一些视觉元素来传达404的概念也是不错的选择。在这个404页面中,用断掉的铅笔来隐喻断掉链接就是很典型的象征手法。

32. 使用对比

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

不想让页面显得特别单调?用对比手法吧。对比能让信息层级清晰起来。在这个404页面中,设计师使用了色彩对比,深蓝色的背景使得按钮显得更加富有活力。

33. 使用图标

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

图标能够传递出不少的信息,使用图标不仅能消除文字的单调性,还能使得页面的可读性和丰富度更高。这个404页面中,指南针图标不仅与404的意义暗合。由于网站所属的品牌形象是鲸鱼,蓝绿色背景和指南针也与品牌形象暗暗呼应。

34. 使用主题

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

使用主题能够让整个设计贯穿始终。这个404页面中,Logo的颜色很显然是取自主题,从插画到底部工具栏都统一使用了绿色,主题带来的统一美感就体现在这里。

35. 创造关联性

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

如果一张图片能让用户产生与品牌相关的联想,那么它就是成功的。在案例中,食物被吃完的空碟子和404页面所代表的“找不到你要的东西”的概念很接近,这种来自图片的关联与暗示,非常有效。

36. 控制好间隔

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

插画和图像以及其他的视觉元素并不需要填满整个页面,控制好间隔能让整个页面看起来更自然。在案例中,设计师将插画作为核心来表现404,其他的网页元素并没有拥挤地围绕着插画,给人感觉很不错。

37. 不要害怕拥挤

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

这一条和上一条并不冲突。如果是高度相关的内容,能够紧密的联系并放置在一起,就不要隔开了,让相关的内容靠近,适当留白,也是不错的设计方式。实际上,这个案例也正是这么做的。

38. 剪切缺口

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

通过剪切的方式,让单纯的文本具备更多的含义和形制其实是一个非常有趣且有意义的表现形式。在这个案例中,404中间的0的空洞用问号来表现,实际效果看起来非常不错。

39. 简化概念

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

并不是所有人都清楚404的具体概念,你可以使用文字拼写来说明,也可以使用简单的图片来表现。在这个案例中,背景图片中拿着望远镜的人就非常明晰地说明了这一概念。

40. 展示场景

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

你还可以为404页面创建一个场景,制造一个故事,为什么不呢?这个案例的场景就非常可爱,沉没的船隐匿在水面之下,鱼群环绕,远山、深水和深绿的海床,这个沉静漂亮的场景还不足以让抓狂的用户安静下来么?

41. 大胆尝试

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

不要害怕拿你的404页面做尝试。打破边界和限制,发挥你的想象力,跟着感觉和灵感走试试。这个404页面似乎正在完善中,许多实验性的元素被放置进来,有待完成,但是它真的很不错呢。

42. 明亮的色彩

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

用明亮的色彩来照亮误入者的沮丧吧。橘黄色的页面砸死不知不觉之间影响着用户的情绪,你真得还感到那么沮丧么?

43. 打破自身的限制

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

虽然你的页面是为桌面设计的,但是谁规定了它一定要显示在桌面屏幕中呢?为什么不能是一台相机呢?

44. 放到格子里

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

将数字放到格子里,那么它会是什么样子呢?它可以以什么样的形式来呈现呢?于是,设计师让404变成了一个时钟上显示的时间,好玩儿又达成目标,何乐而不为呢。

45. 创意加持

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

自由地发挥想象力吧,你可以创造截然不同的404页面!正如同这个页面一样,设计师将铅笔、蜜蜂、发条的意象溶于一体,色彩活泼,意象好玩儿,这不就是创意么?

46. 接地气

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

不要过于高冷,适当的接地气一点,用更平和可爱的方式来展现也不错呢。在这个404页面中,设计师并没有一味地追随高大上,有趣好玩的人物形象令整个404页面令人忍俊不禁。

47. 先锋一点

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

先锋和前卫往往被关联在一起。展现个性,用独特而先锋的展现形式来创造属于自己的时尚。滑板本就是比较先锋的玩物,设计师结合红色滤光片使得和照片结合到一起,看起来非常有范儿。

48. 打破极限

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

找到大家能接受的极限,将边界推动到更遥远的边际,特立独行不也是一种个性么?好吧,这个案例确实特立独行得口味有点过重了……漂亮,粗俗,好玩儿,并且令人过目不忘……

49. 使用图案纹理

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

其实你可以用任何东西来构造独特的纹理,然后平铺在背景上,营造独一无二的设计。这个案例中,设计师就是这么玩儿的,看起来倒是蛮时尚的。

50. 信息层级

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

如果你要为迷路的用户提供许多选项,那么你需要为信息划分不同的层级,以防过多的信息令用户感到压迫。这个404页面在解决这个问题上做的非常不错。

【优质404网页养成手册】

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

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

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

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

「子木说」

今年WWDC之后,新的MacOSX性能的极大提升,令我激动不已,这怎么看都是老Mac的救星啊!每个冒险者都热衷于尝鲜,如果你有闲置的Mac不妨装上试试~如果你也想试试,戳这里:微盘(内置10.11的壁纸哦)。

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

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

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

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

点赞
收藏 5
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏