磨砂玻璃图标实战总结
从磨砂玻璃图标设计出发，分享个人的设计思路和方法论
前言
近期在一次设计改版中应用了磨砂玻璃风格图标（PC端toB产品），在此分享自己总结的一些方法，本篇文章偏理论和思维，不过多讲解技法和软件操作，欢迎交流～
目录：
1.如何绘制
2.设计思路🌟
3.风格组合
4.如何切图
5.更多思考
新图标展示（使用工具：Sketch）
一、如何绘制
学习新的风格第一步是临摹，临摹的意义在于让我们从欣赏模式切换到观察模式。
需要注意要用自己的作图步骤来一步步还原，只是画得一模一样是没有意义的，不要无脑照抄。
(1) 作品分析
在临摹过程中将图标的样式进行拆解，方便我们在后面进行重组，熟悉原子设计理论的朋友会很容易理解。
通过观察可以发现，磨砂玻璃图标由两种形状组成，我们可以称为渐变层和玻璃层，把两者样式对应的参数全部整理出来，通过参数来分析所有图标大同小异的地方，可以帮助我们创作更多风格一致的图标。同时再将这些参数归纳为三个类别，又形成了我们的设计步骤。
(2) 具体操作
尺寸约为64*64px，玻璃层填充纯白，不透明度约50%，使用图像填充添加噪点，通用杂色选择第二种，不透明度约3%，模糊选项中选择背景模糊数值约3。使用两次内阴影来画出玻璃的厚度。
渐变层较为简单，填充渐变后加入上方来自玻璃层的投影，最后使用内阴影补充一点厚度即可。
（这里对玻璃层加噪点时不要使用混合模式，否则切出的PNG会非常脏）
二、设计思路⭐
解决了技法的问题，现在开始创作属于自己的磨砂玻璃图标。设计磨砂玻璃图标的过程中我总结了三项原则：
特征清晰；均衡交错；整而丰富。
(1) 特征清晰
需要起到信息传达作用的图标必须能被一眼识别，关键在于能明确特征并保留到最后，避免后期加入过多细节稀释了特征或过度简化丢失了特征。
(2) 均衡交错
表现磨砂玻璃质感的关键在于从后方透出来的若隐若现的形状，因此玻璃层与渐变层要交错摆放，否则无法体现磨砂玻璃半透明的质感；图标整体要注意视觉平衡，渐变层与玻璃层的面积不宜差距太大。
(3) 整而丰富
图标的形状太规则会很单调，太多变化又会混乱，因此需要将轮廓变化和内部细节控制在合理范围内。
能同时做到这三点就会有不错的效果，于是我们的目标就变成：寻找同时满足这三项原则的策略。
创作思路
在临摹阶段我们完成了拆解，现在开始进行重构。
之前我们将样式归纳为造型，材质和细节三个维度，现在以此为顺序进行设计，这样做的好处是每个阶段只需要专注在一个维度上，避免了出发点太多思维混乱。
设计翻译和录音的图标：
(1) 首先从造型开始，翻译可以联想到词典，录音联想到磁带，第一步先画出大致的剪影。
(2) 根据整而丰富原则，第二步开始细化轮廓，这一步需要针对物体的造型制定不同的策略，例如词典可以增加厚度和书签，而磁带的外轮廓较为单调，那么可以在内部制造变化来丰富形状并强化特征。
(3) 前两步确定了造型，第三部开始加上材质。根据均衡交错原则，我们来设定两块符合要求的区域赋予不一样的材质，第二步和第三步需要综合考虑。
(4) 最后一步加上细节来丰富图标，完成后结合三项原则进行检查。
三、风格组合
除了扁平的图标外，磨砂玻璃也可以尝试与其它风格组合，比如2.5D风格。
2.5D设计步骤
工具依然是sketch，但思路上采用了类似三维的步骤，先“建模”后“渲染”。
前期建模思考造型，中期补充内容强化特征，后期加入色彩画出质感补充细节，和上面扁平图标的逻辑几乎一致。
四、如何切图
磨砂玻璃图标依然使用规范切图的方式：
首先将图标复制到新的空白画板，用切刀工具切出固定尺寸，格式选择PNG（SVG无法保留复杂样式）
最后按照"模块_类别_功能_状态"的格式命名即可。
注意：在sketch中磨砂玻璃层会吸取下层所有颜色（切刀工具同样），因此不能为了方便选中设计图上的图标后直接导出，玻璃层会因此失去透明度，此外由于导出的尺寸不统一也会影响到前端开发的效果。
五、更多思考
Q: 为什么磨砂玻璃图标很简单却让人觉得很精致？
A: 精致与否不是由复杂程度决定的，而是质感，只是磨砂玻璃的质感表现起来比较容易不需要加入太多细节。
Q: 磨砂玻璃风格还能流行多久？
A: 表现形式大概率会随着时间被遗弃，但像这样在界面中尝试表现质感的潮流会持续很久，因此设计师有一套自我更新的学习体系非常重要。
Q: 为什么想写这样一篇分享？
A: 这次在设计新图标的过程中发现使用拆解-重构的思路进行分析，方向会清晰很多同时提高了效率，对原子设计理论也有了新的理解，并且适用于其它领域的学习（比如插画和版式），所以想通过写文章的方式进行梳理和巩固，也希望能对大家有所帮助。
Q:如何快速学习一个新的风格？
A:我个人倾向于将学习和练习分开。先仔细观察作品最好是临摹一遍（拆解），在熟悉作品是如何完成后，开始尝试自己创作（重构），过程中会不断遇到不满意的地方，解决问题的过程中积累经验，通过不断尝试总结出自己的“原则”。
有了适合自己的方法后接下来就可以自信地练习了，从熟能生巧到得心应手，而且练习过程中也会有意外的收获越做越好。以下是我前年练习用的一组图标这次拿来改成磨砂玻璃的风格。
（原版图标见站酷主页第一个作品）
感谢阅读，如果觉得本篇文章对你有帮助，关注推荐鼓励一下吧～
