OpenDesign Skills设计规范：21个组件设计规范与栅格系统完整指南

OpenDesign Skills设计规范21个组件设计规范与栅格系统完整指南【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills前往项目官网免费下载https://ar.openeuler.org/ar/OpenDesign Skills是一套为AI编码工具和开发者设计的专业设计规范知识库专注于OpenDesign生态系统的设计一致性。作为开源项目的重要组成部分它提供了21个核心UI组件的详细设计规范和完整的栅格系统帮助设计师和开发者快速创建符合OpenEuler设计标准的界面。本文将为您全面解析这套设计规范的核心要素和使用方法。设计规范概述构建统一的设计语言OpenDesign Skills设计规范为Pixso设计稿生产提供了完整的标准化体系。它包含23个组件的详细设计规范、536个componentKey变体与187个图标componentKey覆盖了从PC端到移动端的全场景设计需求。 设计规范的核心价值这套设计规范的核心价值在于确保设计一致性、提高开发效率、降低沟通成本。通过严格的设计约束和标准化的组件库设计师可以快速搭建符合品牌规范的界面开发者则能获得清晰的实现指导。21个核心组件设计规范详解OpenDesign Skills设计规范涵盖了21个常用的UI组件每个组件都有详细的变体说明、布局规格和视觉规范。以下是部分核心组件的设计要点 按钮组件OButton设计规范按钮组件是交互设计的核心元素OpenDesign Skills提供了三种变体Solid实心背景填充品牌主色适合最重要的主操作按钮Outline描边透明背景带描边适合次要操作按钮Text文字无背景无边框适合列表行内轻量操作每个变体都支持大40px、中32px、小28px三种尺寸确保在不同场景下的视觉一致性。按钮状态包括正常Enabled和禁用Disabled禁用状态下使用特定的禁用色Token。 卡片组件OCard设计规范卡片组件支持多种布局变体包括封面垂直、封面水平、图标垂直、图标水平等。设计规范中详细定义了卡片的间距、圆角、阴影等视觉属性确保在不同信息密度下的展示效果。 导航组件ONavigation设计规范导航组件提供顶部导航和底部导航两种主要形式支持PC和移动端的适配。规范中明确定义了导航栏的高度、Logo尺寸、菜单项间距等关键参数确保导航的可用性和美观性。 搜索框组件Search设计规范搜索框组件支持大、中两种尺寸规范中详细说明了输入框的内边距、圆角、图标位置等细节。搜索框的禁用状态和焦点状态都有明确的视觉定义。栅格系统响应式布局的基础OpenDesign Skills的栅格系统是设计规范中最核心的部分它为不同设备提供了统一的布局基础。 双断点栅格体系系统采用PC和MB移动端双断点设计参数PC端移动端画布总宽度1920px360px内容区宽度1488px312px内容区边距216px24px栅格列数24列4列水槽宽度32px12px 栅格使用规则PC端必须使用24栅格移动端必须使用4栅格画布宽度固定不变PC端1920px移动端360px内容区位置固定确保在不同设备上的布局一致性卡片间距严格使用PC 32px / MB 12px设计变量与Token系统OpenDesign Skills通过Token系统管理所有设计变量确保视觉属性的一致性。 颜色Token体系系统定义了完整的颜色语义化Token语义Token用途一级文字/标题color-info1强调信息二级文字/正文color-info2次强调三级文字/辅助color-info3辅助信息禁用文字color-info4禁用状态链接文字color-link1链接常规状态强调色/主色color-primary1当前页面、激活状态 字号与间距Token字号系统采用严格的配对规则确保文字层级清晰角色PC字号/行高MB字号/行高一级数据展示56px / 8022px / 30二级数据展示48px / 6420px / 28一级标题32px / 4418px / 26常规正文16px / 2414px / 22提示文本114px / 2212px / 18间距系统提供10个标准间距Token从4px到72px不等满足不同场景的间距需求。图标处理规范OpenDesign Skills对图标处理有严格的规范要求️ 图标使用规则图标存储机制图标以外部引用方式存储在Pixso服务器上设计稿中不直接包含SVG路径图标库资源包含187个线性图标24×24px分为公共图标和开关图标两类使用优先级优先使用已有SVG资源其次手写SVG路径最后使用CSS兜底方案 图标尺寸规范图标尺寸有严格的标准TokenPC尺寸MB尺寸尺寸116px16px尺寸220px20px尺寸324px24px尺寸432px32px设计稿生成工作流OpenDesign Skills提供了标准化的设计稿生成流程确保每个步骤都符合规范要求。 六步工作流程读取硬约束文档确定当前设备类型和合法取值集合读取设计规范获取颜色、字号、间距等设计变量读取组件库筛选目标组件和componentKey确认涉及组件向用户确认使用的组件清单选择生成模式Pixso可编辑画布模式或HTML网站模式应用设计变量绑定Token和样式验证视觉结果 强制约束规则设计规范强调禁止自定义原则所有几何数值必须来自规范文档或Token白名单禁止使用近似值、估算值或经验值未在规范中找到的参数必须询问用户禁止自行填充组件变体速查表系统提供了536个UI组件变体的componentKey索引方便快速查找和使用组件变体componentKeyONavigation/顶部导航PC, Darkoff561d3014fbe6f361abfecc203a06f1ab6cad43afOButton按钮solid, medium, Lighteab0e6c545d27376ba67aef7dd233fc58c476234OCard卡片cover, vertical, Lighta22044aaa494bba137bd3ebba74319449b998694OPagination分页All, Darkoff35bb7a0ef9189834048e73d6832418da0796d993实际应用场景 企业级应用设计在开发企业级管理系统时OpenDesign Skills设计规范可以确保导航菜单、数据表格、表单等组件的一致性多设备适配的响应式布局统一的品牌视觉语言 移动端应用设计对于移动端应用规范提供了移动端专用的间距和字号系统触摸友好的组件尺寸简化但清晰的视觉层次 设计系统维护设计团队可以使用这套规范快速创建新的设计稿确保不同设计师产出的一致性建立可复用的组件库最佳实践建议✅ 设计规范使用技巧始终从规范文档开始在设计任何组件前先查阅对应的规范文档严格遵守Token系统所有颜色、字号、间距必须使用Token双设备适配思维同时考虑PC和移动端的设计要求组件组合规范遵循组件组合规则避免设计冲突⚠️ 常见错误避免避免自定义数值不要使用规范外的字号、间距或颜色不要混合设备规范PC设计使用PC规范MB设计使用MB规范图标使用规范优先使用图标库资源避免手绘图标栅格系统一致性确保所有布局都基于标准栅格总结OpenDesign Skills设计规范为OpenDesign生态系统提供了完整的设计标准化解决方案。通过21个组件的详细规范、严谨的栅格系统和Token体系它确保了从设计到开发的全流程一致性。无论是新手设计师还是有经验的开发者都可以通过这套规范快速创建符合OpenEuler设计标准的优质界面。规范文件位于项目中的skills/opendesign-design/references/components/目录每个组件都有独立的详细说明文档。硬约束文档skills/opendesign-design/references/hard-constraints/skill.md则提供了所有设计参数的合法取值白名单是设计工作的基础参考。通过遵循这套设计规范团队可以显著提高设计效率减少沟通成本确保最终产品的视觉一致性和用户体验质量。【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考