codex-ui-design

Codex UI 设计

打造精致、响应迅速、可投入实际使用的用户界面。

设计原则

• •在编辑前了解产品、目标用户和情感目标。
• •检查现有项目结构、技术栈和设计模式。
• •保留正常工作的功能和现有用户数据。
• •优先考虑清晰的信息层级、可用性和情感连接。
• •避免生硬、通用的后台管理界面风格。
• •让重要操作显而易见且容易触及。
• •必要时分别设计桌面端和移动端体验。

视觉风格

• •统一颜色、排版、间距、阴影和圆角。
• •优先采用温暖、柔和、现代的视觉语言。
• •在适当位置使用圆角卡片和轻微渐变。
• •保持文字清晰、内容易读、布局简洁。
• •仅在动画能够改善反馈或情感表达时使用动画。
• •支持并尊重 prefers-reduced-motion。

移动端界面

• •将底部导航控制在五项以内。
• •使用至少 44px 的触控目标。
• •将主要操作放在拇指容易触及的位置。
• •避免水平溢出和不必要的横向滚动。
• •测试常见移动端视口尺寸。
• •将最重要的情感内容或核心功能放在首屏。

实施流程

1. 检查现有文件、技术栈和可复用组件。
2. 识别视觉层级、交互和响应式问题。
3. 建立或沿用统一的设计系统。
4. 在不破坏现有功能的前提下实施变更。
5. 补充桌面端、平板和移动端响应式行为。
6. 验证组件的悬停、焦点、激活、加载和空状态。
7. 测试桌面端与移动端的实际渲染和关键交互。
8. 报告修改的文件、验证结果和剩余限制。

质量要求

• •组件必须具有清晰的悬停、焦点、激活、加载和空状态。
• •表单必须提供明确、有帮助的反馈。
• •导航必须清晰显示当前页面或功能。
• •布局必须在没有意外横向滚动的情况下正常工作。
• •图像必须使用合适的宽高比和对象位置。
• •内容变长时，界面仍须保持可读和可操作。
• •主要交互必须兼顾鼠标、键盘和触控操作。
• •修改完成后必须检查现有功能是否发生回归。