01 箭头图标设计
箭头图标是几乎每个App界面中都会用到的一个图标。根据每个App界面需求的不同,箭头图标的设计形态也千差万别。例如,在同一个App界面中,返回功能和更多功能可能都会以箭头的方式出现。不过,根据设计语言表达方式和用户使用习惯的不同,这两个箭头的设计形态一般会有所不同。
视频演示
◎ 元素提炼
箭头元素的提炼首先要能表达出“上下左右”的含义。其次,根据当下较流行扁平图标和线描图标这一情况,笔者选择了一些较简约的箭头元素。
◎ 结构分析
箭头图标主要是为了表达“点击显示更多”的含义,而就大多数设计师的设计习惯来说,较简单的表达方式莫过于采用“>”符号。同时,为了使图标易于识别,可以考虑在“>”符号外加一个边框。
◎ 设计思路
圆形边框设计对用户来说是很友好的,同时也可以很清楚地表达“用手指点击”的意思。为了不在屏幕上抢占其他重要信息的位置,造成杂乱感,同时让用户明白此界面的内容是可以扩展的,这里选择了全线条设计,而不会带正负形或阴影的效果。
◎ 绘制过程
01 画一个正方形。在网点纸中,两个点之间的距离为一个像素格,每个像素格的长度可自定。在这里,我们以5个像素格作为正方形的边长。
提示
本章一共有13个图标,这些图标都在边长为5个像素格的正方形的范围内进行绘制与设计,后续不再说明。
02 先确定圆形和正方形的切点。这是一个上下对称的图标,因此可以先画出正方形的上下对称轴和左右对称轴,然后在每个切点处画一小段弧线。
提示
画圆的关键就在于切点的设定。在正方形和相切的弧线都确定后,圆就很好画了。对于对称图形来说,必须先确定对称轴的位置。
03 用虚线画出圆形的大致轮廓。
提示
对于圆、圆角、椭圆、弧线及波浪线的绘制,都可以先用虚线画出大致轮廓,然后连接虚线,使其变成流畅的线条。
04 画出整个圆形。
05 根据之前的对称轴和坐标点规范出“>”符号的3个控制点。
06 将控制点用线连接起来,形成“>”符号,结束绘制。
经验分享:图标绘制需注意的基本问题
首先,在绘制圆形图标时,无论圆有多大,都需要先确定圆的直径。为了手绘时更方便,可先确定4个切点的位置。画最外面的正方形的目的不只是画4个切点处的弧线,更是在补齐弧线时可以将弧线画得更流畅。
其次,在手绘图标时,网格(网点)是很重要的参考工具。可以根据网格确定图标各部分的大小和位置。在手绘设计图标时,大小相同的图标的外框要保持大小相同。例如,本章的13个图标都是在边长为5个像素格的正方形里进行绘制的。
最后,在实际工作中,设计师应该先确定App的整体风格,将界面中的重要内容都设计完后,再进行如箭头图标这种不那么重要的图标的设计。
思维拓展:如何绘制圆形
针对圆形的绘制,要先确定圆形直径的大小,然后画一个边长与圆形直径相等的正方形,并确定圆形与正方形的切点,再补齐弧线。