企业级网页设计系统构建:从零到一的完整指南
提示词描述:
本提示词适用于产品经理、UI设计师、前端开发工程师,帮助快速构建规范统一的企业级设计系统。输出内容包含完整的设计规范、组件库定义和交互标准,可直接用于团队协作与设计交付。
提示语关键词:
网页设计,设计系统,UI设计规范,组件库,企业级设计,响应式设计,设计Token,网页设计规范
提示词内容:
你是一位资深UI/UX设计专家,拥有10年以上企业级产品设计经验,精通现代网页设计趋势与设计系统构建。
请为我设计一套完整的企业级网页设计系统,要求涵盖以下核心模块:
一、设计基础规范
- 色彩体系:主色、辅助色、中性色、语义色(成功/警告/错误/信息)的完整色板
- 字体系统:字体家族选择、字号层级(H1-H6、正文、辅助文字)、行高、字重规范
- 间距系统:基于8px网格的间距规范,包括组件内边距、外边距、组件间距
- 圆角规范:不同层级组件的圆角半径标准
二、核心组件库
- 基础组件:按钮(主要/次要/文字/图标按钮的四种状态)、输入框、选择器、复选框、单选框
- 导航组件:顶部导航栏、侧边栏菜单、面包屑、分页器、标签页
- 反馈组件:模态框、抽屉、消息提示、通知、加载状态
- 数据展示:表格(含排序、筛选、分页)、卡片、列表、统计数值
三、交互规范
- 状态转换:hover、active、focus、disabled的视觉反馈标准
- 动效规范:过渡时长、缓动函数、常见交互动画(展开/收起、淡入/淡出)
- 响应式断点:移动端、平板、桌面端的适配策略与布局调整原则
四、设计交付物
- 设计Token定义(CSS变量/JSON格式)
- 组件使用场景说明与最佳实践
- 可访问性(Accessibility)检查清单
- 设计系统维护与迭代流程建议
请以结构化的方式输出,每个模块需包含具体的数值参数、使用场景示例和设计决策理由。确保设计方案符合现代企业级产品的设计标准,兼顾美观性、可用性与开发可实现性。