首页
CtrlK

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

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

[之前的尝试](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)

声明 许可协议

以下内容于20250406添加

自用图标被采用

当时觉得这些事情不值得记录,所以就没有记录。现在想想应该把这件事件当中渐构网站对SVG的要求记录下来,现在只能暂时接着当时的飞书聊天记录展示了。

由于当时我没想着这些图标会被于博采用,所以发生了一些关于“大小”上的趣事。

![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/iazaf71nbiadvhoxalhmv9t6.jpg)

当时的我以为,于博表达的是svg图标被浏览器渲染的尺寸太大了。并给出了HTML语法的建议。

![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/fg1f4t6l20jjb2opsq9qwxhk.jpg)

后来才知道于博说的是文件大小。一般情况下网站使用的svg是4kb大小,毕竟对于流量宝贵的网站来讲文件太大不是什么好事儿。
所以我在导出前,对精细图标的那个路径做了不影响原外观的简化处理,导出的时候,把路径参数的小数点控制的控制在4位,最终达到要求的同时还不影响原先的外观。

关联图标组的迭代

当初我判断关联图标的形式并没有问题,所以我仅进行了个人风格的标准化处理,和那些重绘的图标一起连带着发过去了。而且我觉得这种处理不值得一提,所以有没有写成文字记录下来。

现在想想应当将这个图标的迭代记录下来记录下来。毕竟图标的形式发生了颠覆性的改变。

![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/h9tjyrkvi7xmi36ihve2vuo5.jpg)

当时是根据自己临时想出来的方案然后去找参考,后来发现数码设备互联的图标形式很适合段落关联这件事情的符号表达,产出了现在的这个关联图标的样式。

![](https://cdn.modevol.com/user/cl3zva6x51ape01t8253f8enh/images/xdln7v3kad1dk9u5rqxehg72.jpg)

未找到关联段落的图标由于是给写文章的人看的,所以我当时觉得样式随便都行的,就按照最初想出来的方案画了一下。
后来经讨论,直接在原有的图标上加`/`最容易表达否定的意思,最终确定为如今的版本

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