界面

情感化设计之无网络页面

Adyun · 4月12日 · 2020年 ·

空状态页面

空状态页面,有些使用形象化强调,有些使用插画进行设计。但是,我们不应该仅用图形展示就算完事。此页面最主要的是不仅做到提示页面当前状态,更应该多给出用户继续操作的空间,对当前页面进行补充说明。例如:404页面提示“查看其他有趣内容”或者无网络状态提示“刷新or检查网络”又或者第一次进入无内容的时候提示“新增内容”。

具体的产品思维信息,可以查看优设的这篇文章《高手常用这5个方法,快速提升空状态设计价值!》

想法和灵感

一般做页面设计,设计师在做之前都会先去网上查看相关的设计内容。我看到无信号页面使用太多的WIFI图标等内容,于是我想搞个风筝断线的感觉(当然也很俗)。从本质上来讲,断线可以简单的理解成“线断开了”,所以能联想到所有需要“线牵着 ” 的图形都应该可以拿来使用。对于有线的情况来讲,比如:小猫小狗挣脱了链子、网线被断、风筝断开、鼠标键盘断开,井里提水的绳子断了等等,对于无线的情况来讲比如: 无限信道拥堵、卫星雷达消失,天线折断、机房故障等等,拥堵又可以联想到平时堵车、人流密集等。根据适合的场景氛围和实现的难易对画面有个初步的想法,然后再去网上对个别元素进行筛选甄别。

在这里,我使用偷懒的方法制作MBE风格的空状态页面。因为我查看了一圈目前已有的设计,他们都是以简单的图形设计为主,且画面不会过于丰富。我想这是因为这本来就是一个空状态页面的原因,不需要给用户造成过重的视觉负担,且停留时间不要太长为最好,引导用户去做别的事情。

Empty state app

怎么操作?

在开始之前,我们都面临着同样的问题,虽然大致对风筝的形状比较了解,但也不能形成具体的方案。这时候就需要去“抄”了。在制作过程中,当你发现有不会做的的时候,最直接有效的解决办法就是“抄”。找一张风筝的图案或者插画然后根据整体形象进行简化,通过矢量绘图圆形或者方形进行组合剪切成对应图像。再根据MBE风格的纯色、粗描边、 线段 断点、线段高光、气泡式点缀进行添加优化,根据整体页面选取对应的主色调,一个页面就这样完成了。

0 条回应