Material Design 是 Google 推出的一种设计语言，其中包括了许多具有现代感的设计元素，其中一个重要的元素就是图标风格。在 Material Design 中，图标风格使用了一种拟物化的风格，可以使得应用程序具有更加美观和现代的感觉。本文将介绍如何创建一个 Material Design 图标风格指南，并提供实例代码和指导意义。
创建 Material Design 图标风格指南
创建一个 Material Design 图标风格指南需要经历以下步骤：
- 研究 Material Design 的设计原则和图标风格，以明确要求。
- 列出要求并创建基本图标库。
- 制定标准化的图标设计规则，并将其应用于基本图标库中的每个图标，以确保整体风格的一致性。
- 制定分类系统，并将每个图标分配到合适的分类中，以使得用户可以快速地找到需要的图标。
- 创建图标风格指导手册，包括整体风格、设计规则、分类系统和示例使用方法。
Material Design 图标风格要求
在创建 Material Design 图标风格时，需要遵守以下要求：
- 线条：图标应仅由单一的线条组成，线条的粗细应该是相同的。
- 反色：图标应包含两种不同颜色的元素，其中一种元素应该是图标的背景色。
- 弱化阴影：阴影应仅在必要时使用，并且应该是相对较弱的。
- 反映物质：图标应该反映物质的质感，如材质、厚度、挤压和阴影。
- 填充：图标的边缘应该几乎不填充，以保持线条的清晰度。
基本图标库
基本图标库应包括常用的常见元素，如媒体控件、导航、固定功能、时间、通信和设备。基本图标库应该纯粹、简单和易于理解。下面是一些基本图标的示例：
-- -------------------- ---- ------- -- ------------------------------- --------- -- --------------------------------- --------- -- ------------------------------- --------- -- ------------------------------ --------- -- ------------------------------- --------- -- --------------------------------- --------- -- ---------------------------------- --------- -- ------------------------------------- --------- -- ------------------------------- ---------
基本图标库应该基于标准化的设计规则，并应该保证所有图标具有相同的线条宽度和弱化阴影。
图标设计规则
基本图标库应该基于标准化的设计规则，以确保整体风格的一致性。设计规则包括以下方面：
- 图标线条粗细：图标的所有线条粗细应相同。
- 图标颜色：图标应包含两种不同的颜色，其中一种颜色应是图标的背景色。
- 阴影：图标应减少使用阴影，并且阴影应该是相对较弱的。
- 物质：图标应该反映物质的质感，如材质、厚度、挤压和阴影。
- 填充：图标的边缘应该几乎不填充，以保持线条的清晰度。
图标分类系统
分类系统应该将所有图标分为一些相关类别，以使得用户可以快速地找到需要的图标。通常，常见的分类系统包括以下几类：平面图标、描边图标和实心图标。
图标风格指导手册
图标风格指导手册应包括整体风格、设计规则、分类系统和示例使用方法。下面是一个图标风格指导手册的示例：
整体风格
Material Design 图标使用简洁的线条和反映物质的质感来实现识别和易用性。图标应使用相同的线条宽度和弱化阴影、几乎不填充的边缘和两种不同的颜色元素。
设计规则
- 所有图标应该具有相同的线条宽度。
- 所有图标应该包含两种不同颜色的元素，其中一种颜色应该是背景色。
- 阴影应仅在必要时使用，并且应该是相对较弱的。
- 图标应该反映物质的质感，如材质、厚度、挤压和阴影。
- 图标的边缘应该几乎不填充，以保持线条的清晰度。
分类系统
- 平面图标：平面图标没有任何的阴影和材质，可以看做是非常简单的线条图案。
- 描边图标：描边图标包含了简约的阴影和透明度来让图标在各种背景色之上都能够被识别。
- 实心图标：实心图标包含了材质质感的元素并且具有很高的阴影度，使得图标在各种场景下都能够看得很清晰。
示例使用方法
<i class="material-icons">home</i> <!--主页--> <i class="material-icons">search</i> <!--搜索--> <i class="material-icons">add</i> <!--添加--> <i class="material-icons-outlined">edit</i> <!--编辑--> <i class="material-icons-outlined">delete</i> <!--删除--> <i class="material-icons-sharp">refresh</i> <!--刷新--> <i class="material-icons-sharp">play_arrow</i> <!--播放--> <i class="material-icons-sharp">stop</i> <!--停止-->
结论
本文介绍了创建 Material Design 图标风格指南的详细步骤和相关要求，并提供示例代码和指导意义。在创建 Material Design 的图标风格指南时，设计规则和分类系统应该是标准化的，并保证整体风格的一致性。最后，为明确图标颜色和弱化阴影，以体现 Material Design 标准化的设计语言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670146d90bef792019b41064