如何快速上手openEuler OpenDesign：10个图标资源使用技巧

【免费下载链接】opendesign-resourcesThe repository of OpenDesign resources项目地址: https://gitcode.com/openeuler/opendesign-resources

前往项目官网免费下载：https://ar.openeuler.org/ar/

openEuler OpenDesign是一个专为开源项目打造的设计资源仓库，提供了丰富的图标、插图、壁纸等设计素材。本文将分享10个实用技巧，帮助新手快速掌握图标资源的使用方法，提升项目设计效率。

1. 了解资源目录结构

openEuler OpenDesign的资源文件组织清晰，主要分为以下几个目录：

• packages/icon/：包含基础图标和业务图标，支持不同主题
• packages/illustration/：提供场景化插图，分深色和浅色版本
• packages/wallpaper/：各种分辨率的壁纸资源
• packages/merch/：周边产品设计文件

熟悉目录结构能帮你快速定位所需资源，节省查找时间。

2. 选择合适的图标主题

项目提供了深色和浅色两种主题的图标资源，位于以下路径：

• 深色主题：packages/icon/business/dark/
• 浅色主题：packages/icon/business/light/

根据你的项目界面风格选择对应主题的图标，保持视觉一致性。例如SIG组相关图标就有单独的选中和未选中状态设计。

图：openEuler会议协作场景插图，可用于文档和演示材料

3. 利用高分辨率资源

为保证显示效果，特别是在高DPI设备上，建议优先使用png@2x目录下的资源：

• 标准分辨率：packages/illustration/light/png/
• 高分辨率：packages/illustration/light/png@2x/

这些双倍分辨率的图片能确保在各种设备上都有清晰的显示效果。

4. 掌握图标命名规则

图标文件采用直观的命名方式，包含功能描述和状态信息：

• 选择按钮（选中）.svg：明确标识功能和状态
• SIG组-未选中.svg：业务类别+状态的组合命名

通过文件名可以快速了解图标的用途和状态，无需逐个打开查看。

5. 合理使用基础图标与业务图标

资源库将图标分为基础图标和业务图标两类：

• 基础图标：位于packages/icon/base/，包含通用功能如箭头、开关、搜索等
• 业务图标：位于packages/icon/business/，针对特定业务场景如SIG组、代码仓、峰会等

根据使用场景选择合适类型的图标，基础功能用基础图标，特定业务场景用业务图标。

6. 壁纸资源的多样化应用

除了图标外，项目还提供了丰富的壁纸资源，位于packages/wallpaper/目录，支持多种分辨率：

• 宽屏：2022-3840x480.png
• 桌面：2022-1920x1080.png
• 移动设备：2022-750x1334.png

这些壁纸可用于项目官网、演示文稿、社区活动等多种场景，增强品牌识别度。

7. 学习资源的高效利用

项目提供了多种学习相关的插图资源，如位于packages/illustration/light/png@2x/慕课@2x.png的慕课插图，可用于教程、文档和学习平台，提升内容的视觉吸引力。

图：openEuler慕课学习场景插图，适合用于教育和培训材料

8. 贡献者资源的正确使用

针对社区贡献者，项目提供了如"贡献攻略"、"角色说明"等相关插图，位于packages/illustration/light/png/目录，这些资源可用于贡献者文档和引导材料。

9. 正确获取项目资源

要使用openEuler OpenDesign资源，首先需要克隆仓库：

git clone https://gitcode.com/openeuler/opendesign-resources

克隆后即可访问所有设计资源文件，开始在你的项目中使用。

10. 参与资源改进与贡献

如果你有好的设计建议或新的图标需求，可以通过社区贡献流程参与资源的改进。相关贡献指南可参考社区文档，帮助项目不断丰富设计资源库。

通过以上10个技巧，相信你已经对openEuler OpenDesign的图标资源有了全面的了解。合理利用这些资源，能让你的项目界面更加专业、美观，提升用户体验。开始探索这个丰富的设计资源库，为你的开源项目注入更多视觉活力吧！

【免费下载链接】opendesign-resourcesThe repository of OpenDesign resources项目地址: https://gitcode.com/openeuler/opendesign-resources