![UI图标手绘88例](https://wfqqreader-1252317822.image.myqcloud.com/cover/474/35148474/b_35148474.jpg)
上QQ阅读APP看书,第一时间看更新
10 分享图标设计
在使用App的过程中,用户看到喜欢的内容时经常会分享给其他人。分享的内容可以是网页链接、文字、图片或二维码等。
![54601-00-30-1](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-30-1.jpg?sign=1738867987-4OxLtDdPB4Tow3yeTtulNVkAlMUiZlQ2-0-7b732fe58ea3f00d5feb8014e5ed604b)
视频演示
◎ 元素提炼
在这里,我们先想象这样一个场景:当你买了好多东西,把它们都装进了箱子里,希望第二天再把它们拿出来送给朋友。分享的早期图形语义就从这个打开的箱子开始,将物体从一个箱子转移到另一个箱子中。在分享图标的设计与制作中,经常用箭头表示“拿出来给别人”的语义。
![54601-00-30-2](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-30-2.jpg?sign=1738867987-sW7TMXOQN9NrG6nszeVwyccEKZWNRSdw-0-3a8732a5de0742435e8cd36a4c7870ad)
◎ 结构分析
这个图标是由一个缺少右上角的圆角正方形和一个从缺口处伸出的弧形箭头组成的。
◎ 设计思路
将图标中正方形的3个尖角转换为圆角,这些圆角和之前讲到的扫一扫图标的圆角是一样大的。将箭头中的弧线转变为风格化虚线,既符合语义,又能迎合整体风格。
◎ 绘制过程
01 画出辅助线,确定圆角正方形和弧形箭头的位置。
![54601-00-31-1](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-31-1.jpg?sign=1738867987-APWUxgTcLh02dcHJYpF6vatkJmFoyO1U-0-1a4b55f1c1d3d1fe65d13453ff27072c)
02 绘制出缺右上角的圆角正方形。
![54601-00-31-2](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-31-2.jpg?sign=1738867987-sXx1reBRiscTlGmTtXw3NHYLyUSnYrQn-0-d03dc7fcaa2afad2f36463229befd8c1)
03 画出弧形箭头,用高光橡皮擦出风格化虚线,将图形补齐。
![54601-00-31-3](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-31-3.jpg?sign=1738867987-5py8H9VPkyRXSkeo8CKn1C35DOvEzwOV-0-7a4626b223a9e3cee996da5c65e42331)
提示
针对一些相对较规则的图标的绘制,通常需要找到圆心、正方形的中心点及正三角形的中心点等,也包括圆弧上的切点、两条相互垂直的线的交叉点及图形的对称轴等。
经验分享:图标绘制时需要注意的一些规范性问题
图标绘制涉及的规范有7个方面。(1)图形规范,包含圆形、正方形、正三角形、梯形、正五边形及正六边形等。(2)中心点规范,包含圆心、正方形中心点、正三角形中心点及正五边形中心点等。(3)对称轴规范,包含圆形的圆心在对称轴上,矩形的中心点在对称轴上,其他对称图形的中心点在对称轴上。(4)相切规范,包含圆的相切、曲线的相切等。(5)对角线规范,包含正方形对角线等。(6)倾斜旋转规范,包含倾斜15°、30°、45°、60°、75°及90°等。(7)翻转规范,包含水平翻转、垂直翻转及角度翻转。