![UI图标手绘88例](https://wfqqreader-1252317822.image.myqcloud.com/cover/474/35148474/b_35148474.jpg)
18 定位图标设计
“定位”表示确定某个事物所在的位置,多见于拥有地图功能的App中。用户可以通过点击定位图标打开地图,在地图上找到想要找的位置。
![54601-00-46-1](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-46-1.jpg?sign=1738948032-hN5W7x4j8h4Yg1RyS4P849BmPoajiY77-0-560ae94e356e7cee517b7091829c1d5a)
视频演示
◎ 元素提炼
古时候,人们往往习惯在地形图上标记一些重要的位置。到了现代,人们习惯用图钉在墙上的图片、地图和日历上做记号,用来标记重要的内容。如此一来,人们就会认为“定位”就是在特殊的位置做的标记。
![54601-00-46-2](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-46-2.jpg?sign=1738948032-Wy5BBBa4roNxgqUO9HwI3Abb88Okbomj-0-83d36ed9de6bb44388a90666627505c6)
◎ 结构分析
定位图标通常由一个倒挂的水滴图形和一个圆形构成,且左右对称。针对消费类App的定位图标的设计,可以在保持外部形态基本不变的同时,将内部的圆形替换成礼盒图形,强化表达“您的礼物(包裹)正在路上”的语义。
◎ 设计思路
在图标设计中,礼盒图形需要尽量简化,仅保留盒子和彩带元素即可,且尽量表现得饱满、可爱一些。将倒挂的水滴图形右下方的线条处理成风格化虚线可增强图标的细节感。
◎ 绘制过程
01 这基本是一个左右对称的图形。先画出中轴线,并定出倒水滴形上半部分的位置和大小。
![54601-00-46-3](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-46-3.jpg?sign=1738948032-7rDmxJUgO65m5PIFdfVXIy9uyvcOdh4X-0-d443e652563ad6a01b69918383772464)
02 根据辅助线画出倒水滴形。
![54601-00-47-1](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-47-1.jpg?sign=1738948032-aj9KlwNnaYwhcqgwxgp5wyHyyutNrLWN-0-9998e22c38a66100017d7824fc56dfed)
提示
倒水滴形上半部分所占的比例决定了这个图形是可爱化的还是尖锐化的。
03 画出礼盒图形中盒子的大致形态。
![54601-00-47-2](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-47-2.jpg?sign=1738948032-VJqFth9ntgKV9XBkopocdd67Xk3yNurY-0-345d1f46e886c4890adf05efb7a6eb82)
04 画出礼盒上用彩带系成的蝴蝶结。简化的蝴蝶结和盒子一起表达“礼物”的语义。最后将倒水滴形右下角的线条改为风格化虚线。
![54601-00-47-3](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-47-3.jpg?sign=1738948032-iTM4ldyhveb20jmQ0kxOLAQore7ashnZ-0-6e5fb132379a6ba8b053e2294c24c114)
提示
手绘图标与手绘素描的绘画形式有些类似,都是按照从上到下、从左至右、从大到小及从外往里的顺序来。先规定出图标的大形,再刻画里面的细节。
思维拓展:图标设计时可借助的平面构成原理有哪些
在图标设计中,我们通常会采用一些平面构成的原理与技巧,具体表现在6个方面。(1)重复叠加,如iOS系统里图片App的图标是一朵不同颜色的花瓣叠加组成的花。(2)部分改变,如定位图标上有一个圆,可以在圆里面加上指针,以表达时间和定位的双层语义。(3)比喻,如首页图标大多是一个房子的形态。(4)拟人化,如将表示太阳的图形画成一个娃娃脸。(5)幽默,如美团旗下的电影软件名是“猫眼”,因此其图标是一个带有大眼睛的猫脸。(6)情感化,如给错误界面的图标添加不开心的表情,渲染哀伤的气氛,或者给头像增加飘落的树叶,增强萧索感。