页面 UI 结构与配色方案

页面设计最容易踩的坑是**没有层级**：所有元素一样大、一样重，用户不知道先看哪里。

一份好的设计方案要回答三个问题：**从上到下看到什么（结构）**、**什么颜色代表什么（配色）**、**点哪里、点了会怎样（交互）**。把这三件事写清楚，无论是自己实现还是交给开发，都不会跑偏。

这条提示词适合：小程序页面设计、网页落地页、App 新功能界面、后台管理页。

你是资深 UI 设计师。请为以下需求输出页面设计方案：

页面类型：{页面} 用途与目标：{用途} 风格倾向：{风格} 适配端：{端}

要求： 1. 画出页面结构（用文字描述从上到下的区块顺序，标注每个区块的高度占比） 2. 每个区块说明：包含什么元素 / 元素排布方式 / 视觉层级（主次） 3. 给出完整配色方案：主色 / 辅色 / 强调色 / 背景色 / 文字色（均附十六进制色值）+ 各自的使用比例 4. 给出字号与字重规范（标题/正文/辅助文字各多少 px、什么字重） 5. 给出间距规范（页面边距、区块间距、元素间距） 6. 说明交互反馈设计（按钮状态、加载态、空状态、错误态） 7. 指出这个页面类型最常见的 3 个设计问题，并说明如何避免 ```

• **页面**：写清是"什么功能的页面"，而不是"首页"这种模糊说法
• **用途**：写**用户要完成什么任务**。"展示课程"太弱，"让用户 3 步内完成预约"才是目标
• **风格**：2-3 个词，注意不要互相冲突
• **端**：手机端 / 桌面端 / 平板。**这直接决定边距、点击区域大小和字号下限**（手机端可点区域不小于 44px）

【页面结构】
┌─────────────────────────────┐
│ ① 顶部导航（10%）            │
│   返回 | 课程预约 | 我的     │
├─────────────────────────────┤
│ ② 筛选区（12%）              │
│   [全部][瑜伽][力量][燃脂]  │
├─────────────────────────────┤
│ ③ 课程列表（62%）            │
│   ┌───────┐ 周三 19:00       │
│   │ 缩略图 │ 张教练·初级瑜伽  │
│   │       │ 剩余 4 位  [预约] │
│   └───────┘                 │
│   （重复 5-6 个卡片）         │
├─────────────────────────────┤
│ ④ 底部操作栏（16%）           │
│   [查看我的预约]（次要）      │
│   [一键约本周]（主按钮）      │
└─────────────────────────────┘

【配色方案】 主色 #FF6B35 活力橙（主按钮、选中态） 占比 10% 辅色 #2C3E50 深蓝灰（标题文字） 占比 15% 强调色 #00B894 青绿（成功、剩余位充足） 占比 5% 背景色 #F7F8FA 浅灰（页面底） 占比 55% 卡片色 #FFFFFF 纯白（卡片、输入框） 占比 15% 文字色 #1A1A1A 近黑（正文） 辅助色 #8C97A8 中灰（时间、说明） 边框色 #E8EBF0 浅灰（分割线、描边）

【字号规范】 页面主标题 20px / 600 区块标题 16px / 600 卡片标题 15px / 500 正文 14px / 400 辅助信息 12px / 400 按钮文字 15px / 500

【间距规范】 页面左右边距 16px 区块之间 20px 卡片内边距 14px 卡片之间 12px 元素紧邻 8px 可点击区域最小 44×44px

【交互反馈】 按钮：默认 → 按下（透明度 0.85）→ 禁用（灰底 #D9DEE5 + 不可点） 卡片：默认 → 按下（背景 #F0F2F6，轻微下沉） 加载：骨架屏（灰块微动），不用转圈，避免"卡住"的错觉 空状态：插画 + 一句话 + 一个动作按钮（如"暂时没有课程，看看下周"） 错误态：红色描边 + 下方错误说明，不用弹窗打断 ```

【常见问题】 1. **层级不清**——所有文字一样大一样黑。解法：标题/正文/辅助三级字号 + 三级灰度，只让"最重要的一个元素"用主色 2. **点击区域太小**——手机端小于 44px 很难点中。解法：即使图标只有 20px，也要给 44px 的点击热区 3. **配色过多**——超过 3 个主色就散了。解法：主色只占 10%，其余靠黑白灰撑起，靠"留白"而不是"加色"制造高级感 ```

• **要更年轻**：加"增加圆角（16px+）、使用更饱和的色彩、增加微动效描述"
• **要更专业克制**：加"降低饱和度，减少装饰元素，主色占比压到 5% 以内"
• **要暗色模式**：加"额外给出暗色模式配色方案，注意深色下文字对比度不低于 4.5:1"
• **要适配桌面**：加"补充桌面端布局（多列网格、侧边导航、悬停态）"
• **要有动效说明**：加"补充关键动效描述：进入动画、切换过渡、成功反馈"
• **要可交付开发**：加"补充一份 Tailwind CSS 配置片段，把配色和间距写成变量"

**Q：设计稿很好看，实现出来不一样？** A：**别只给图，要给规范**。色值、字号、间距全部写成数字，开发才能还原。加"输出一份可直接复制到 Tailwind 配置的 token 清单"。

**Q：颜色对比度不够，看不清？** A：正文文字与背景的对比度**不低于 4.5:1**，辅助文字不低于 3:1。加"检查所有文字配色的对比度，不达标的给出替代色值"。

**Q：怎么判断页面是否清晰？** A：**眯眼看**。眯起眼睛看页面，如果还能一眼看出"最重要的东西在哪"，层级就是对的；如果糊成一片，说明层级没做出来。

设计方案要落到代码，中间还有几环可以用工具提速：

• **出方案**：本提示词，得到结构 + 配色 + 字号 + 间距 + 交互反馈
• **出视觉稿**：即梦 / Midjourney 出配色氛围参考，或直接进 Figma 手排
• **转代码**：把方案里的色值和间距做成 Tailwind 配置，组件照着写
• **检查对比度**：用 WebAIM Contrast Checker 逐个验证文字色是否达标
• **检查无障碍**：Chrome DevTools 的 Lighthouse 面板跑一遍可访问性

**组合提示词链**： ``` 第1步：本提示词 → 得到完整设计规范 + Tailwind token 第2步：把 token 粘进 tailwind.config.js 的 theme.extend 第3步：按结构描述写组件，样式直接用 token 类名 第4步：Lighthouse 跑分，修掉对比度和点击区域问题 ```

**效率提示**：**先定规范再写页面**。规范就是那几个色值和间距数字，一旦定下来，后面所有页面直接复用，比每页都重新想配色快得多，而且整站视觉自然统一。