扫码登录 我要学设计网
设计师的职业进阶课堂

微信扫码登录 | 方便安全省心

一张插画撑起一套 UI 作品

黑马青年 06月05日 20:11 发布 / 69 次阅读

一套 UI 设计作品想要打动面试官,除了在需求解决层面、体验分析层面、交互呈现层面和全案设计发挥层面做得比较优秀以外,视觉感的强化也是至关重要的。视觉感是吸引面试官关注度的第一层面,只有吸引关注了才会有观看作品的可能性,反之则会降低作品集的打开率。


提高视觉感的形式有很多,可以是 IP 形象的结合、突出的配色表现、精美的图形装饰、插画的风格强化等。而插画运用到 UI 设计中是视觉感较强的形式,也能体现出设计师的综合能力。


对于部分 UI 设计师来说,插画能力并不突出,单独展示插画作品不容易突出这个技能。而融入到 UI 场景中进行发挥,不仅可以提高作品的亮点,也能将插画这个附加技能的曝光度加大。


插画可以在 UI 的哪些场景进行发挥呢?下面通过一个插画作品进行案例展示,看看一张插画作品是如何撑起一套 UI 作品的。




1、Banner 设计主图


将插画作为 Banner 设计主视觉配图,在项目中也是非常普遍,作为作品包装来说绝对是提高视觉感的重要技巧。


1.png




2、封面展示配图


UI 场景中需要配图的部分很多,特别是封面展示。使用高质量的照片是大家的首选,不过插画形式带来的风格感和视觉效果也是不容忽视的。


2.png




3、个人中心头图


近些年个人中心头部区域背景设计被重视起来,除了通过品牌色和照片形式强化以外,弥散光、流体渐变、情感化插画等形式也十分流行。特别是插画的表达方式,带来的风格性和视觉感都是值得推荐的。


3.png




4、界面头部区域配图


界面头部区域通常的做法是白底或者品牌色为主,不过近些年插画形式的强化开始流行,带来的视觉感更强。以插画配图来作为区域背景,风格感也会更好些。


4.png




5、情感化弹窗设计


弹窗设计除了常规的系统级表达以外,以插画形式和 IP 形象结合表达,带来的感官体验也是不错的。特别是在活动性质的弹窗设计中,这样的表达形式已经形成一种流行趋势。


5.png




6、专题活动主视觉


近些年以插画和建模的场景设计替代照片合成,在专题活动主视觉中表现尤为明显。特别是插画形式的表达,不仅可以避免运用照片带来的版权问题,也能给专题页设计带来更强的特征感和视觉感。


6.png




7、插画形式的异形广告


异形(胶囊)广告近些年逐渐成为产品中广告表达的新颖形式,相较于束缚于边界的表达来说,异形广告在 UI 场景中的融合性更强,带来的视觉张力也是有目共睹的。插画形式结合到异形广告中,无论是在场景表达还是局部元素强化中发挥性都比较高。


7.png




8、空状态设计


空状态由单纯的文字提示演变到图文结合,感官层面越来越被重视。利用图形结合、IP 形象结合、小场景插画结合等,逐渐成为设计表达的趋势。


8.png




9、瓷片区的视觉强化


插画风格被运用到视觉表现层面案例较多,特别是在瓷片区的发挥,呈现出了风格多样的优秀案例。可以使用全场景插画作为背景设计,也可以使用小场景插画作为局部强化,还有使用部分插画元素作为点缀设计,视觉表现力丰富多样。


9.png




10、引导页/闪屏广告设计


插画被运用到引导页/闪屏广告设计中是相当普及的,也是非常有利于进行设计发挥的。插画元素表达的可控性可以满足主题创意的需求,特别是在广告创意形式的发挥中,可以绘制更加丰富的插画创意场景来满足客户需求。


10.png




小结


本文通过一张插画作品在 UI 场景中的运用举例,分析了插画在产品中的普及度和表现形式,以此来验证插画技能作为 UI 设计师必备技能的趋势。随着产品设计感官体验的不断升级,风格化和差异化的设计才能满足更多用户的感官需求,而风格多样的插画形式首当其冲。


希望这些插画结合 UI 场景的案例可以作为抛砖引玉,让大家重视插画在 UI 设计中的表现力,不断加强并掌握插画设计的能力。


作者:黑马青年(vx: heimaux)

本文由 @黑马青年 原创发布。未经许可,禁止转载。