UI图标手绘88例
上QQ阅读APP看书,第一时间看更新

01 箭头图标设计

箭头图标是几乎每个App界面中都会用到的一个图标。根据每个App界面需求的不同,箭头图标的设计形态也千差万别。例如,在同一个App界面中,返回功能和更多功能可能都会以箭头的方式出现。不过,根据设计语言表达方式和用户使用习惯的不同,这两个箭头的设计形态一般会有所不同。

54601-00-13-1

视频演示

◎ 元素提炼

箭头元素的提炼首先要能表达出“上下左右”的含义。其次,根据当下较流行扁平图标和线描图标这一情况,笔者选择了一些较简约的箭头元素。

◎ 结构分析

箭头图标主要是为了表达“点击显示更多”的含义,而就大多数设计师的设计习惯来说,较简单的表达方式莫过于采用“>”符号。同时,为了使图标易于识别,可以考虑在“>”符号外加一个边框。

54601-00-13-2

◎ 设计思路

圆形边框设计对用户来说是很友好的,同时也可以很清楚地表达“用手指点击”的意思。为了不在屏幕上抢占其他重要信息的位置,造成杂乱感,同时让用户明白此界面的内容是可以扩展的,这里选择了全线条设计,而不会带正负形或阴影的效果。

◎ 绘制过程

01 画一个正方形。在网点纸中,两个点之间的距离为一个像素格,每个像素格的长度可自定。在这里,我们以5个像素格作为正方形的边长。

54601-00-13-3

提示

本章一共有13个图标,这些图标都在边长为5个像素格的正方形的范围内进行绘制与设计,后续不再说明。

02 先确定圆形和正方形的切点。这是一个上下对称的图标,因此可以先画出正方形的上下对称轴和左右对称轴,然后在每个切点处画一小段弧线。

54601-00-14-1

提示

画圆的关键就在于切点的设定。在正方形和相切的弧线都确定后,圆就很好画了。对于对称图形来说,必须先确定对称轴的位置。

03 用虚线画出圆形的大致轮廓。

54601-00-14-2

提示

对于圆、圆角、椭圆、弧线及波浪线的绘制,都可以先用虚线画出大致轮廓,然后连接虚线,使其变成流畅的线条。

04 画出整个圆形。

54601-00-14-3

05 根据之前的对称轴和坐标点规范出“>”符号的3个控制点。

54601-00-14-4

06 将控制点用线连接起来,形成“>”符号,结束绘制。

54601-00-14-5

经验分享:图标绘制需注意的基本问题

首先,在绘制圆形图标时,无论圆有多大,都需要先确定圆的直径。为了手绘时更方便,可先确定4个切点的位置。画最外面的正方形的目的不只是画4个切点处的弧线,更是在补齐弧线时可以将弧线画得更流畅。

其次,在手绘图标时,网格(网点)是很重要的参考工具。可以根据网格确定图标各部分的大小和位置。在手绘设计图标时,大小相同的图标的外框要保持大小相同。例如,本章的13个图标都是在边长为5个像素格的正方形里进行绘制的。

最后,在实际工作中,设计师应该先确定App的整体风格,将界面中的重要内容都设计完后,再进行如箭头图标这种不那么重要的图标的设计。

思维拓展:如何绘制圆形

针对圆形的绘制,要先确定圆形直径的大小,然后画一个边长与圆形直径相等的正方形,并确定圆形与正方形的切点,再补齐弧线。