第二次尝试重绘渐构的段落图标

第二次尝试重绘渐构的段落图标
起因 第二次尝试重绘

[之前的尝试](https://www.modevol.com/document/clyqfgqgweaz61a3ybq3fm18)当中出现了些许问题。经过新的学习再次尝试绘制。

参考资料 苹果公司

[设计 - Apple Developer](https://developer.apple.com/cn/design/)

[图标](https://developer.apple.com/cn/design/human-interface-guidelines/icons#:~:text=%E5%99%A8%E5%87%86%E5%A4%87%E5%B0%B1%E7%BB%AA-,%E5%9B%BE%E6%A0%87,%E8%83%BD%E4%BB%A5%E7%94%A8%E6%88%B7%E7%AB%8B%E5%8D%B3%E7%90%86%E8%A7%A3%E7%9A%84%E6%96%B9%E5%BC%8F%E8%A1%A8%E8%BE%BE%E5%8D%95%E4%B8%AA%E6%A6%82%E5%BF%B5%E3%80%82,-App%20%E5%92%8C%E6%B8%B8%E6%88%8F)作为图形资源的有效图标能以用户立即理解的方式表达单个概念。

[设计时尽量实现:](https://developer.apple.com/cn/design/human-interface-guidelines/sf-symbols#:~:text=%E4%BD%BF%E7%94%A8%E6%A8%A1%E6%9D%BF%E4%BD%9C%E4%B8%BA,%E5%86%85%E5%AE%B9%E7%9B%B4%E6%8E%A5%E7%9B%B8%E5%85%B3)

  • 简单

  • 易于辨识

  • 具有包容性

  • 与符号表示的操作或内容直接相关

[Download SF Symbols 5.1: Get 5359 Free SVG Icons for Designers & Developers – Figma](https://www.figma.com/community/file/886999666531731323/download-sf-symbols-5-1-get-5359-free-svg-icons-for-designers-developers)

参考资料 谷歌公司

图标是操作或其他项目的小符号

[设计原则](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)

  • 关键公式

((∣a∣)n(∣xX∣)n)+((∣b∣)n(∣yY∣)n)=rn

原则:

  • 保证视觉平衡

  • 有独特风格的同时尽可能减少细节

明确图标含义:

  • 描述 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)

广告Advertisement

绘制参考线并确定风格,绘制完成后视觉平衡。
![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/t5ejbrw4mtg2pt7yh5yzycc9.png)

例子Example

使用外侧描边
![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/ixudxt5aycaren3vf5z6ju5x.png)

其他Custom

同理
![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/dt09x4yqqq6fnb4tz3407sr3.png)

描述Description

!![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/jjfpabw05duw27q6q41kbqrr.png)

迁移Transfer

!![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/qjgf4k9dcjo0m0rnwnk2ckg4.png)

验证Verification

![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/z1wf0ay9saa72jm4c1umhax2.png)

多尺寸一览

![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/tqjrnur32nb5wa8qkxc225yo.png)

声明 许可协议
第二次尝试重绘渐构的段落图标
冷瞳9I6的头像
创建于:2024-04-02
随记
讨论