majiayu000 UI 设计方向
适用于需要从“能用”推进到“符合产品语境、可扫描、可信赖”的前端 UI 任务。
Purpose
为页面、组件、仪表盘和工具界面建立清晰的产品化设计方向。
Procedure
明确界面的工作
- 先说清它帮助用户完成什么任务，而不是先选颜色或布局。
- 判断这是日常高频工具、营销展示、内容阅读、可视化探索、游戏，还是配置/管理后台。
选择设计语气
- SaaS、CRM、后台、运营工具默认安静、密集、可扫描。
- 品牌页、作品集、发布页可更具表现力，但首屏仍要让主体明确出现。
- 游戏、可视化和创作工具可以更有动效和沉浸感，但不能牺牲交互可控性。
建立首屏优先级
- 工具型界面：首屏直接呈现核心工作区、列表、表格、画布或编辑器。
- 落地页：H1 使用品牌、产品、地点、人名或明确品类，价值说明放在辅助文案。
- 产品/对象页：首屏必须可见真实产品、对象、状态或可检查媒体。
对齐现有系统
- 先复用项目已有组件、token、图标库、路由和布局约定。
- 缺少 token 时集中补齐或明确记录，不要在多个组件里散落硬编码。
- 复杂 UI 在实现前写出复用组件、新建组件、响应式策略和状态覆盖。
验证设计结果
- 检查 loading、empty、error、disabled、hover、focus、selected 状态。
- 在 mobile(375px)、tablet(768px)、desktop(1440px) 检查文案是否溢出或遮挡。
- 对依赖图片、图表、画布或 3D 的界面，确认资源真实渲染且承担主体信息。
Constraints
- 不把工具型应用做成营销落地页；首屏应是可用工作区。
- 不用通用紫色渐变、装饰光斑、堆叠卡片或空泛 hero 作为默认方案。
- 不在卡片里再套大卡片；页面分区优先用全宽区域或无框布局。
- 不用可见文案解释控件本该表达的功能，常见动作优先用图标和 tooltip。
- 不引入只服务视觉噱头的新依赖，除非它显著提升核心体验。
- 不为了统一风格让整个界面落入单一色相；颜色应有层次和语义区分。
Expected Output
输出应包含明确的设计方向、组件/布局边界、状态覆盖、响应式策略和验证结果。实现后的 UI 应符合业务语境，首屏主体明确，视觉层级支持快速扫描。