![UI图标手绘88例](https://wfqqreader-1252317822.image.myqcloud.com/cover/474/35148474/b_35148474.jpg)
06 评论图标设计
评论图标是所有社交功能软件几乎都有的图标。当用户点击该图标时,说明用户想要对某些内容信息表达自己想法。在设计评论图标时,要注意评论图标和发表图标之间的区别。
![54601-00-22-1](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-22-1.jpg?sign=1738831622-hIvttGcxoUtAwPvVqTu5qGO2tYjoEJtF-0-07deafb0cbbefcc8d7b663d71f3a3b89)
视频演示
◎ 元素提炼
说话是人的本能,也是人与人之间交流最直接的方式。虽然社交软件中的评论可以以视频、图片、文字及语音等形式出现,并且可以单独出现,也可以组合出现,但也逃不开最基本的语言文字功能。评论图标多以对话框的形态出现,并且以四格漫画中的对话框形态为主要样式。
![54601-00-22-2](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-22-2.jpg?sign=1738831622-KPEPz8i2XgK1rZTpvbo0qlkE67wiA251-0-3d62bdb606f761a821041c6ef00723a4)
◎ 结构分析
评论图标中的小尖角元素表示该内容指向用户,圈元素表示该内容有一定的范围,不会和其他人的信息搞混,若干条线表示用户要表达的内容。
◎ 设计思路
图标外框采用对话框的样式,对话框中间有一条横直线和一条带有风格化虚线效果的横线,表示说话的内容。
◎ 绘制过程
01 椭圆和圆的画法是一样的。先定出4个相切点的位置,然后画出经过切点的圆弧。
![54601-00-23-1](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-23-1.jpg?sign=1738831622-7qdYZyImfRLkK2sdYLOrrycpl2ZIq3cg-0-027a8ca1a02194d199ee9b8c7584aea2)
02 先画出左下角的三角,然后添加过渡的曲线,将椭圆补充完整。
![54601-00-23-2](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-23-2.jpg?sign=1738831622-ku61jmuRzoZWodnQXdi05SqLDiXsfKPk-0-6b8ba4f687b0f1633c515ce5884b65c2)
03 画出图标内部的线条,补齐图形,结束绘制。
![54601-00-23-3](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-23-3.jpg?sign=1738831622-jMtFipbe0nAZJ3i4ZLzJVcCkvanlqnoK-0-234b45329de7ecbc00f36e9efe292bf5)
提示
针对不规则图形的绘制,一般绘制顺序通常是先将不规则图形概括成较规则的图形,然后画出大轮廓,再添加细节,并进行深入刻画。
思维拓展:两个形状相似的图标如何做到差异化设计
针对两个形状相似的图标,其功能和语义上的区分是设计差异化的关键所在。例如,下图中的消息图标和评论图标都是App中经常会用到的图标。两者的语义表达很相似,都是“给别人留下想说的话”。同时,在大部分素材中,这两个图标的设计表现也很类似。不同之处在于,当有新消息时,消息图标会出现新消息提醒(具体表现为多了一个红点或图标本身出现闪烁)的情况,而评论图标则不存在这样的情况。基于此,为了获得更好的视觉效果,评论图标用横线,而消息图标使用圆点。点击消息图标,可以查看最新消息和消息列表;点击评论图标,会调出输入框。这是两者最大的区别。同时,评论图标和消息图标在App界面中的位置也不同。评论图标一般放在可评论信息的下面,点击图标即可评论;消息图标带有“调出所有消息”的功能,通常放在导航栏或工具栏中。
![54601-00-23-4](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-23-4.jpg?sign=1738831622-hwEsY4au5B5cooLnvJCJYakADmcvNVrA-0-3b60b47bc2f0bd7e875211c3c822eea2)