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