![UI图标手绘88例](https://wfqqreader-1252317822.image.myqcloud.com/cover/474/35148474/b_35148474.jpg)
16 发现图标设计
大多数消费类App中发现图标都与首页图标、分类图标、购物车图标及个人中心图标一起被放在底边工具栏中,构成App中5个重要的分类功能。其中,发现图标的作用主要有两个:一是使用户发现很多想要但可能不是太必要的商品,二是使用户发现更多比自己目前有意向的同类商品更好且可替代的商品。不过这两者的共同目的是刺激用户产生更多的消费。
![54601-00-42-1](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-42-1.jpg?sign=1739155991-ayKK3UKs7Ci4pjK01XFCOB5TfuQmdhum-0-4bc18f214eac8bc96aa8ac45f2a8a9da)
视频演示
◎ 元素提炼
“发现”可以理解成在没有目标的情况下找到自己想要的信息。有些消费类App会根据用户浏览界面的情况,在发现页里推送很多相关的商品信息。例如,大数据认为用户喜欢一些商品宣传广告信息,尤其是促销打折信息,也可能是商品试用的文章和优质商品的榜单等内容。这些信息很多,需要分门别类地进行编排和展示。根据App不同的功能需求,发现图标的表现不一样。其中,有的采用指南针图形进行表现,有的采用视频图形进行表现,有的采用心形图形进行表现,还有的采用礼盒图形进行表现。本案例采用的是较传统的指南针图形。
![54601-00-42-2](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-42-2.jpg?sign=1739155991-HMny7thO7yveYtxnuZEYaKJAg5M2bk8P-0-55198635b305a8e6c6d1b8e0ce8024f4)
◎ 结构分析
这个图标的元素构成很简单,中间是一枚指针,由两个对称的三角形组合而成。外缘是一个圆,代表表盘。
◎ 设计思路
将指针用两个三角形表示,代表南北两极,符合大多数人对指南针的印象。外圆的右下角采用的是风格化虚线,增强了图标的细节感。
◎ 绘制过程
01 定出外缘和指针在画面中的位置和大小。先画出圆形与正方形的4个切点,再画出经过切点的弧线。画出指针图形的4个端点。
![54601-00-43-1](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-43-1.jpg?sign=1739155991-4ZfbBOSu28raGhxp7VCMi6FEXOH32qcw-0-8d2719e58bbe74eb894b500f71cc65ff)
提示
对于初学者来说,针对一些较大的圆形的绘制,通常需要借助一些辅助线,但即便如此也不一定能画得很圆。这时候可以借助圆规或图形尺,熟练之后再根据经验不借助工具进行绘制。
02 画出指针的具体形态,注意指针是呈45°倾斜的,并且为对称样式。
![54601-00-43-2](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-43-2.jpg?sign=1739155991-Qhl1YpQxhedRf2dVFic4VjX9FEF2XP35-0-4c3604375ac1f8602c63831efb23f014)
03 画出外面的圆形,并用高光橡皮擦出右下角的风格化虚线,结束绘制。
![54601-00-43-3](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-43-3.jpg?sign=1739155991-8bhFxf8x2nhWYKZpJWv8eOSG5RpkMs5a-0-eeff438781500bc6c848cf4f8175ffa8)
思维拓展:底部工具栏中5个图标的功能
首页:呈现希望用户先浏览到的信息。
分类:软件中所有商品和功能的分类罗列,方便用户查询和使用。
发现:以不同的方式呈现用户希望了解的信息,样式多且吸引力大。
购物车:购物类网站的基本功能之一。
个人中心:内容繁杂,涉及用户个人信息和其他一些功能信息。