![UI图标手绘88例](https://wfqqreader-1252317822.image.myqcloud.com/cover/474/35148474/b_35148474.jpg)
17 客服图标设计
“客服”是大部分App都拥有的功能,可为用户解决使用App时出现的各种问题。
![54601-00-44-1](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-44-1.jpg?sign=1739260367-kFBLMYLIoO0X3RXXEu92H77T184Li4yx-0-f369658e4f858d7e3098dd816c560301)
视频演示
◎ 元素提炼
在移动网络盛行的当下,很多消费类App都设置有客服功能,为消费者提供在线咨询或帮助,并通过文字和图片等与消费者进行交流。在过去的很长一段时间里,电话客服几乎是每个公司都有的职位,在某些行业里电话客服甚至扮演着非常重要的角色。日常生活中,我们所见的客服多为女性,嗓音甜美且态度谦和,并且常常是戴着耳麦与客户进行语音交流。基于此,客服图标多以戴着耳麦的女性头像为基础形态。同时,过去图标中的客服形象往往较复杂,而现在则较简洁。
![54601-00-44-2](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-44-2.jpg?sign=1739260367-Z9eDJwNo0IhHcyQU56JvMt9pvQA7R52b-0-44c09f4af34ae9a2338e261da45fa996)
◎ 结构分析
在客服图标的绘制中,对客服头像的元素进行了取舍处理,具体表现是保留了头发,强调“女性”语义的同时,使其视觉上带有更强的亲和力。同时,去掉了不必要的五官元素,将耳麦整体进行了简化,用椭圆形表示原本较复杂的麦克风,用实线与风格化虚线结合的方式表现耳麦的轮廓线。
◎ 设计思路
在客服图标的绘制中,头发采用两条曲线进行简化表现,而不是直接绘制出披肩长发,这样可以不用绘制肩膀。由于图标里的半圆形已经够多,因此耳麦和麦克风的连接线不再设计成半圆形。将风格化虚线添加在耳麦上,同时将椭圆形的麦克风处理成倾斜样式,可以加强图标的设计感。
◎ 绘制过程
01 定出中间的圆形人头所在的位置和大小。
![54601-00-44-3](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-44-3.jpg?sign=1739260367-ZBEGW8EJeBULtQQUZciszw0ZqzEbuj7j-0-bc9f3c9efedefc9872f30ecd9e56f47e)
02 按照从上至下、从左到右的顺序绘制整个图标。画出人头的上半部分和左侧的耳麦,耳麦和人头是相交的。
![54601-00-45-1](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-45-1.jpg?sign=1739260367-tphj4XtV36WgoL5eSXfR35R4xQAe6TWN-0-07dcef605e6644dd020092a0910c3851)
03 将人头和耳麦的整体形态画出来。
![54601-00-45-2](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-45-2.jpg?sign=1739260367-JrmRP84yiB0QqyKaecn4jyxXLac2vtNA-0-2c231aa45403194291e06502ff6525b0)
04 为图标增加一些细节,如人的刘海儿。画出麦克风及其与耳麦相连的线。
![54601-00-45-3](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-45-3.jpg?sign=1739260367-OCIU2hT5NAp5wdD3v55LDeq1rncdi4Tu-0-a181cb2bddb0c5716cde1e977faf858e)
05 用橡皮擦除多余的线条,并将右侧耳麦内部的线条处理成风格化虚线。
![54601-00-45-4](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-45-4.jpg?sign=1739260367-CPTIMgcRWXtGBbtLh7ycNH6O1M9n4ImK-0-39640bc467e17ac9e67d224f5b096d84)
提示
图标简化处理的首要目的是去掉冗杂的信息,留下重要的部分,这样能更清晰地表达语义。不过在实际操作中,不能只留下一些简单的、呆板的图形,而是要通过设计师的设计和创意,找到简约的、合适的、具有美感的表达方式才行。