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