![进阶版零基础学UI](https://wfqqreader-1252317822.image.myqcloud.com/cover/640/25569640/b_25569640.jpg)
01 一致的功能图标
1.1 功能图标绘制思路
功能图标绘制是学习UI设计必须要掌握的最基础的知识之一,看似简单的图标却包含了复杂的规则,从一枚小小的图标可以窥探设计者对细节的把握以及对整体风格的掌控。互联网为人们提供了便利,我们可以在全世界的设计网站上看到非常多优秀的图标设计作品,别着急去临摹它们——作为初学者,应该先学会如何用最简单的几何图形去构建图标,掌握扎实的基础知识后,再去创作复杂的图形。所谓万丈高楼平地起,打好基础才能建造结构坚固且漂亮的大厦,本篇就来讲解几种常见的功能图标绘制思路,学习了这些思路后才会理解其绘制原理。
旋转45°
45°是功能图标绘制中最重要的角度,很多图标都以45°为绘制角度。例如,指南针的指针方向、电话的倾斜角度、编辑的笔杆、搜索的放大镜、发送的纸飞机等。旋转45°能将一个形状改变成另一个形状,例如正方形旋转45°后变成棱形,下图示例的“定位”图标由大小圆形和正方形(大圆半径与正方形边长等宽)构成旋转45°而成。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0019_0001.jpg?sign=1739283038-woJNvyqV9MD8xyONMJrzcTtE1otbKNzB-0-efd72d1399f75ed5a2a477ea2b80eb54)
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0020_0001.jpg?sign=1739283038-Boi13FnW9Q6wUUg1ak8acdBLm2zGgNag-0-91b717293e36d437206a8cb6d53c9d71)
相同绘制思路的还有“喜欢”“赞”图标,是由两个圆形和正方形(圆形直径与正方形边长等宽)构成旋转45°而成。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0020_0002.jpg?sign=1739283038-pMCcUzHv8hlIVv5lEL4s9sDIQTFDblkx-0-b5bcbdb940910427d841fc7b67352c17)
翻转
几何形状的功能图标大多具有对称属性。例如,手机、电脑、删除的垃圾桶、收藏的五角星、通讯录的人身、设置的齿轮等。翻转分为水平翻转和垂直翻转,通过复制相同的部分至相反的位置构成新的形状,下图示例的“喜欢”图标由一个圆柱矩形旋转45°后垂直居中裁切掉一半,复制另一半翻转至被裁切位置而成。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0021_0001.jpg?sign=1739283038-mXtI4kEHbs5ujeQydG7AVk6HpMPRyPFD-0-a424b6be725e31ed04befe93383db575)
相同绘制思路的还有“闪电”“电量”图标,是由一个三角形复制、垂直翻转后而成。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0021_0002.jpg?sign=1739283038-x8SfZdTkjOxrWQlcamHe2uVg9ZFUNPCB-0-f6558865e96c94312d66d5d6ede67acc)
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0022_0001.jpg?sign=1739283038-kUVOEGKNVIF9K9EnqptQhtnRFpDeYKIy-0-3456820dcb6768db0fe11d7f117c6f1f)
重复
一些图标构造中有很多相同的元素,例如消息气泡的点、拨号的键盘、时钟的刻度、加载时的“菊花”、晴天的光芒、电影胶片等。重复即不断复制相同形状通过排列组合成新的形状,下图示例的“设置”图标的齿轮由一个锯齿复制为二,由二复制为四,再由四复制为八旋转而成。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0022_0002.jpg?sign=1739283038-ZvECFjDBZCeUYg26vCiBSHDdu1ePEB1P-0-f3486770719eed4004f07a346dc1ca8a)
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0023_0001.jpg?sign=1739283038-VGrSxdHXUHVe7xX243Vy3deHiZJEaZKI-0-f2e9ae161478b16d9374e3e81bda2ff3)
平移
调节锚点的位置能将一个形状改变成另一个形状。例如,矩形水平移动一个锚点后变成梯形,正方形向中心移动锚点至中心点后变成等腰直角三角形,三角形向外移动一个锚点内夹角变小(反之变大)等。下图示例的“位置”图标由正方形分别移动三个锚点而成。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0023_0002.jpg?sign=1739283038-c9MtTlOUMcxM6fUrdGv9Uu5P0HWXgc5p-0-9fc9f8948d1c6ec670b6314310bdbe56)
删除锚点
锚点与形状的边数相等,是构成一个形状的支点,删除锚点能将一个形状改变成另一个形状。例如,正方形删除一个锚点后变成等腰直角三角形,矩形删除一个锚点后变成直角三角形,正五边形删除顶角锚点后变成等腰梯形等。下图示例的“收藏”图标由相同的3个正五边形删除其中的两个锚点变成三角形且分别将一条边添加锚点向中心缩进后合并而成。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0024_0001.jpg?sign=1739283038-no5jNoAwa3aHwLtm9ltrBdA4ipqFdO8s-0-430c7605f378e71ead9495d7a1211860)
善用圆形
圆形具有最完美的弧度和平滑的轮廓,在绘制一些外观偏向圆弧的图标时尽可能地使用圆形为基本图形。例如,水滴、叶子、人、笑脸、Wi-Fi、云、月亮、鸟、鱼、火焰等。下图示例的“热门”“观看”“设置”图标都是通过大小不一的圆形运算构成。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0025_0001.jpg?sign=1739283038-NfCTndsFiZZfAP179Y6j3D3OTl59dZAY-0-71ac35704445e09a44be239d7c80f4ab)