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