空状态是当页面内容为空时所呈现的界面,它可以通过友好的指引和视觉元素来帮助产品提升用户体验。
空状态的表现形式有很多种,想要与众不同别出心裁,就要有足够的创意。今天给大家分享空状态设计的一些小创意和技巧。
为了让大家更好的理解,我们先举个小例子:
使用软件的过程中,出现无网络的提示。这个时候要画一个无网络的空状态,我们可以画一个 Wifi 的 icon,然后在上面用斜杠或者说有个小叉去代表这个网络出错的状态。
这样来画是可以的,但这种太过普遍缺少新意,用户也会出现审美疲劳。
我们来看一下别人是怎么做的:
这张图中,作者利用小鸟撞坏卫星的画面来表达了网络出错。这样一来,不仅有了故事性还增了合理性。整个画面也变得生动形象。
这两个画面一对比,明显能感受到右边这个表达,会更加的生动有趣,但是左边对比起来就会显得有点僵硬,那我们怎么去赋予空状态这种情感化的设计,或者说更加有趣的?
我觉得可以从四点方向去入手。
一、词意嫁接/比喻
简单来说,就是用比喻手法将一件事转化为一个画面。
搜索:
如图所示,当搜索不到相应的内容时,出现的画面是一扇关闭的门。这里就是将搜索失败比喻成了紧闭的门,寓意为此门不通,搜索不到无法进入下一步。
图一中将执行出错比喻成沉没的轮船,寓意轮船发生事故将要沉没无法再执行命令。
图二中没有找到与之相匹配的结果,比喻成了只找到了一只袜子。袜子本来是一双的,只找到一只没有找到与之相匹配的这样的一个事情。
系统出错/404:
这是最为常见的网络出错的空状态设计,通常为外太空,飞碟之类的元素。
基于这一点,我对前面的无网络空状态进行了优化:
将画面中的主元素变成了正在受飞碟干扰的信号塔,故事性和合理性就都有了。
看一下优化前的一个对比:
二、行业属性融入
除了比喻之外,我们还可以看看 app 是什么行业的,可以在空状态中融入行业相关的元素。
比如你是一个跨境旅行的 app,你就可以融入一些飞机、山、海这种风景到空状态的画面当中。
马蜂窝:
比如说像马蜂窝 APP 的这个无网络的空状态,它就融入了一些像小山、小鸟还有实景的风景图到画面当中。
整体就非常符合 app 的定位,也具有特色。
三、吉祥物结合
除了融入行业属性之外,我们也可以将空状态和吉祥物进行结合。
比如飞猪旅行 app:
在这个空状态画面中就加入了吉祥物小猪,而且大家可以发现吉祥物是一种取巧,能够赋予你页面情感化的设计方式。
因为吉祥物本身就会有自己的情绪和背景故事,将它融入到页面当中的时候,就会将自身的情绪代入到页面中。
四、元素结合
如果说你的页面没有吉祥物,那么我们可以通过元素结合的方式去赋予空状态小创意,元素结合就是把两个看起来毫不相关的元素结合在一起表达。
上述的空状态所代表的是没有代金券的意思,这里将代金券画成了一个游泳池的形状,然后小袋鼠在上面垂钓,但是它什么都没有钓到,从侧面表达了没有的意思。
上面 Uber 的案例中,将优惠券画成了飞毯的模样。除此之外,还融入了神灯的元素,让人明显感受到这个插画具有很强的地域属性,大概是面向中东一类人群的设计。
文章链接:https://www.cikcc.com/580.html
更新时间:2024年10月28日
免责声明:
1、本平台用户发布的所有学习资料、素材和程序、软件资源仅供用户进行学习目的使用,严禁将上述内容用于商业或非法用途。任何将学习资料用于商业或非法目的的行为产生的后果,将由用户自行承担。本平台属于非盈利性质平台,不收取任何费用,仅仅提供交流学习使用!
2、本平台信息来源于用户自行上传,资源下载地址均来自用户自己的第三方网盘平台,本平台不提供资源存储服务并对所以资源信息的版权争议不承担任何责任。
3、根据我国《计算机软件保护条例》第十七条规定:“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络收集和用户自行上传,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24小时之内删除,否则后果均由用户承担责任。
4、如果您不符合使用条件或存在侵权行为,请在下述期限内从您的电脑中删除相关内容。本平台强烈建议用户支持购买正版资源,以获得更好的正版服务。
5、作为网络服务提供者,对非法转载,盗版行为的发生不具备充分的监控能力,如果您认为侵犯了您的相关权益的,请您向我们发出权利通知,将根据相关法律规定采取措施删除相关内容,您也可以联系站长,QQ:2817933398;Email:system@email.cikcc.com。