在[之前的尝试](https://www.modevol.com/document/clyqfgqgweaz61a3ybq3fm18)当中出现了些许问题。经过新的学习再次尝试绘制。
[设计 - Apple Developer](https://developer.apple.com/cn/design/)
简单
易于辨识
具有包容性
与符号表示的操作或内容直接相关
图标是操作或其他项目的小符号
[设计原则](https://m3.material.io/styles/icons/designing-icons#:~:text=%E8%AE%BE%E8%AE%A1%E5%8E%9F%E5%88%99,%E8%A1%A8%E8%BE%BE%E5%9F%BA%E6%9C%AC%E7%89%B9%E5%BE%81%E3%80%82)
将信息丰富的功能打包到一个小巧的外形中。它们被设计成简单、现代、友好,有时甚至是古怪的。为了确保一致性和可读性,它们的大小有限,这意味着每个图标必须严格遵守指南,同时仍然表达基本特征。
[材质符号和图标 - Google Fonts --- Material Symbols & Icons - Google Fonts](https://fonts.google.com/icons)
标准:
尺寸48dp
填充38dp~40dp
线宽3dp~5dp
关键线
![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/cxe5uo75qt3toxq802se54e5.png)
关键公式
原则:
保证视觉平衡
有独特风格的同时尽可能减少细节
明确图标含义:
描述 Description:表示段落包含「输入」与「输出」和「输入与输出间关系」
例子 Example:表示段落用于形成知识
迁移 Transfer:表示段落是「输入与输出间关系」的复用
其他 Custom:表示段落是其他与知识无关的内容
验证 Verification:表示段落是作者想要验证读者掌知识程度的部分
广告 Advertisement:表示段落是作者想要广告的信息
和上次重绘一样,先从比较常见的喇叭图标入手。额外参考了聊天软件、苹果和谷歌的思路。
![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/m13co8y5jhzkrvwgs27tdmox.jpg) ![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/c0i3270db6srki4hhrcx1ajc.png)
![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/low6krbeo5xuxf12rtlf70g8.jpg) ![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/z2yk99offj3zp3ke56js7op0.png)
![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/nzutkpuni6dxxiaft8mt1z42.png) ![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/ahn8l2wpd79oe56cp8glbnlq.png)
绘制参考线并确定风格,绘制完成后视觉平衡。
![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/t5ejbrw4mtg2pt7yh5yzycc9.png)
使用外侧描边
![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/ixudxt5aycaren3vf5z6ju5x.png)
同理
![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/dt09x4yqqq6fnb4tz3407sr3.png)
!![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/jjfpabw05duw27q6q41kbqrr.png)
!![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/qjgf4k9dcjo0m0rnwnk2ckg4.png)
![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/z1wf0ay9saa72jm4c1umhax2.png)
![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/tqjrnur32nb5wa8qkxc225yo.png)