几何渐变空状态插画如何设计

发布时间:2023-01-12 11:59:26

空状态是指页面上没有任何内容的状态。它在用户体验产品流程时经常会出现,比如在主流程状态反馈之外没有其他数据展示的情况。尽管空状态对用户体验非常重要,但往往容易被忽略。良好的空状态设计能够提升产品体验,并有助于留住用户。在不同的场景中展示适当的内容有助于提升用户体验,同时也有助于提升业务转化率。在本期设计教程中,我们将一起挑战空状态插画设计。

几何渐变空状态插画如何设计

1、空状态定义

空状态的目的

空状态设计的目的是为了保证用户在使用产品时体验流畅一致,同时也能增加用户对产品的满意度和信任感。这能够间接地提升用户在产品内的留存率,进而带来点击转化。通过这种方式,空状态设计能够为产品带来更多的用户留存和转化。

空状态的类型

2、如何设计空状态

空状态不是页面的异常状态,导致它出现的原因有很多种。最常见的几种空状态类型如下:

富有同情心

增加惊喜、愉悦、情感和个性是在产品设计过程中创造更好体验的方式。对于空白页,同理心增加了多样性,并创造了一个更吸引人的个性化体验。

加入趣味性

采用形象化的设计描述,即可减少用户使用时的压力也能并提高用户的注意力。

引导用户

在用户使用新产品时,结合产品的产品的类型,使用空状态来引导用户操作,减少用户的学习时间。

3、几何渐变空状态插画教程-暂无购买的专辑

主要结构分析

背景圆

绘制 324*324px 的圆形 (快捷键:O),填充线性渐变 #FFFCFD 到 #FFE3F2

造型

绘制 195*124px 的矩形 (快捷键:R),填充线性渐变 #FFFFFF 到颜色 #A660FC,圆角值为:22。

并将该图层设为蒙版

绘制一个三角形,填充 #B57DFA,选择轮廓化 (快捷键:Command+Shift+O),调整尺寸为 110*80px 调整成左图的形状。

双击三角形,在斜边添加一个锚点,选中锚点在右侧属性面板中选择「完全对称」,即可拖动锚点调整斜边的弧度。

唱片

绘制 72*42px 的矩形,填充 #FFDF87。

绘制 84*84px 的圆形,填充线性渐变,颜色 #A424FF 到 #A66BFF、不透明度 75%

绘制三角形,填充 #EBDBFF,调整圆角值。

绘制两个圆形 18*18px,填充 #E2C9FF。

唱片针

绘制 12*12px 的矩形,填充 #404040,圆角为 4,旋转 -60° 。

绘制 4*24px 的矩形,填充白色,旋转 30° 。

绘制 5*26px 的矩形,填充白色,圆角为 3,旋转 30° 。

绘制 9*12px 的矩形,填充 #404040,圆角为 4,旋转 -120° 。

音符

根据第二天的教程绘制音符,填充颜色 #FF70BF,不透明度为 40% 。

波浪

用钢笔工具绘制波浪线,填充渐变色 #FFADAD 到#F45EFF,调整各个锚点的弧度。

复制多个波浪线,调整位置如图所示。

将所有的波浪线不透明度设置为 :40%

装饰

再绘制多个圆形,填充渐变色,作为装饰,增加氛围感。

投影

沿着唱片机的造型绘制一个不规则图形,填充渐变色,作为长投影部分。

页面

最后把绘制好的图形放置于手机的页面中,补充上相关的文本信息就完成啦~

以上就是几何渐变空状态插画程的全部内容,用即时设计不吃电脑内存,从此在线做 UI 设计,一起跟着教程自己做一个几何渐变空状态插画吧!