Elysola 设计系统
Elysola 设计系统定义 Elysola 产品如何使用设计基础、交互模式、内容规范和共享 UI 组件。它面向 Elysola 的产品、设计和工程团队,适用于内部产品界面及其配套管理工具。
本规范是产品层使用规范,与通用组件库的职责不同:
- Elysola UI 是公开、通用的 Vue 组件库,提供可复用的组件、类型和无障碍实现。
- Elysola 设计系统规定这些能力在 Elysola 产品中应该如何组合和使用。
- 本站是 Elysola 规范的唯一维护入口;产品实现应以本站当前版本为准。
一致,但不僵化
Section titled “一致,但不僵化”优先复用已有的 Token、组件和页面模式。只有在已有能力无法满足明确的产品需求时,才增加新的模式,并记录其适用范围。
控制台和管理界面应优先保证信息层级、可读性和操作效率。品牌表达服务于产品目标,不应牺牲内容辨识度。
颜色、字号、间距和交互反馈都应表达明确的语义。不要仅因为视觉上好看,就引入没有语义的颜色或装饰。
键盘操作、焦点状态、对比度、错误反馈和响应式布局是组件和页面的基本要求,而不是事后补充项。
- 设计基础:颜色、排版、间距、圆角和层级的统一原则。
- 设计 Token:Studio 自有 Token 契约、组件映射、版本锁定与变更流程。
- Elysola UI 使用指南:在 Elysola 项目中安装、配置和使用共享组件库。
- 品牌设计规范:Elysola 品牌色彩、渐变和品牌元素的规范。
本设计系统会随着产品实践持续演进。新规范发布前应先在页面或组件中验证,再更新文档和示例。未在本站定义的产品细节,不应被视为 Elysola 的统一标准。
本规范适用于:
- Elysola 的 Web 产品和管理控制台。
- 使用 Elysola UI 的内部产品页面。
- 与产品界面直接相关的设计稿、原型和交互说明。