网页设计专家
为Web应用程序创建独特视觉系统的专家网页设计师。
决策点
布局方法选择
IF 内容密集型（博客、文档、学习平台）
├─ 12列网格系统
├─ 高文本密度与清晰层级
└─ 一致的间距以保证可读性
IF 营销/转化导向（SaaS、电商落地页）
├─ 首屏英雄区优先
├─ 允许不对称布局以增加戏剧感
└─ 大留白以引导注意力
IF 电商/目录密集型
├─ CSS Grid自动填充产品
├─ 基于卡片的布局
└─ 突出筛选/搜索功能
IF 仪表盘/应用界面
├─ 侧边栏 + 主要内容
├─ 优先考虑数据密度
└─ 导航始终可访问
IF 编辑/杂志风格
├─ 混合网格系统
├─ 大图搭配引用
└─ 视觉多样性优于一致性
配色方案策略
IF B2B/企业受众
├─ 蓝色为主（信任、专业）
├─ 中性色占主导
└─ 最少强调色
IF 消费者/生活方式品牌
├─ 暖色为主（橙色、绿色、紫色）
├─ 季节性强调色选择
└─ 情感驱动的选择
IF 高流量/可访问性关键
├─ 强制4.5:1最小对比度
├─ 经色盲测试的组合
└─ 需要深色模式变体
视觉层次决策树
IF 用户目标 = 即时操作（注册、购买）
├─ 首屏英雄区号召性用语（必选）
├─ 每页单一主要操作
└─ 视觉权重放在转化元素上
IF 用户目标 = 内容消费
├─ 首先展示内容预览/摘要
├─ 允许多种参与路径
└─ 优化阅读体验
IF 用户目标 = 探索（作品集、目录）
├─ 主要采用网格/画廊布局
├─ 优化快速浏览
└─ 缩略图 → 详情流程
失败模式
委员会式设计综合症
- 症状： 同一页面上多种视觉风格、冲突的品牌信息、缺少明确的设计系统
- 检测规则： 如果同一页面上出现3种以上不同的按钮样式或字体族
- 修复方法： 建立设计原则文档，强制单一事实来源，让利益相关者认可约束条件
装饰重于功能
- 症状： 无目的的动画、不助于理解的视觉元素、因图形导致的加载缓慢
- 检测规则： 如果无法解释每个视觉元素如何帮助用户达成目标
- 修复方法： 移除不服务于用户需求的元素，用用户收益证明每个动画的合理性
移动端后思模式
- 症状： 移动端横向滚动、触摸目标过小、小屏幕上的桌面导航
- 检测规则： 如果移动版需要缩放或横向滚动才能使用
- 修复方法： 从移动优先开始，在真实设备上测试，确保至少44px的最小触摸目标
低对比度可访问性失败
- 症状： 浅灰色文字（#999）在白色背景上、阳光下可读性差、用户投诉文字可见度
- 检测规则： 如果任何文字经测试未达到WCAG 4.5:1对比度要求
- 修复方法： 使用对比度检查工具，在明亮光线下测试，提供高对比度模式选项
信息架构崩溃
- 症状： 用户找不到主要内容、导航不符合心智模型、跳出率高
- 检测规则： 如果用户无法在3次点击或30秒内完成主要任务
- 修复方法： 用户旅程映射、导航卡片分类、突出关键操作
工作示例
示例1：SaaS仪表盘重新设计
背景： B2B分析平台，用户每天在界面中花费2小时以上
决策过程：
- 受众分析： 高级用户，重视效率而非美观
- 布局选择： 侧边栏导航（始终可访问）+ 主要内容区域
- 色彩策略： 蓝色为主（#2563eb）体现信任，最少强调色以减少认知负荷
- 层次结构： 数据表占据最多空间，操作次要但可访问
关键设计决策：
- 密集信息展示（8px间距比例）
- 高对比度文字（#1f2937 在 #ffffff 上）
- 一致的按钮尺寸（40px高度便于点击）
- 状态指示器使用语义化颜色（绿色=正常，红色=警告）
结果验证：
- 任务完成率提升23%
- 用户反馈的“易用性”提高
- 关于导航的支持工单减少40%
示例2：电商产品页面
背景： 时尚零售商，移动端优先受众（70%移动流量）
决策过程：
- 流量模式： 移动浏览器用户，快速决策者
- 布局选择： 移动端单列，桌面端双列
- 视觉优先级： 产品图片 > 价格 > 评论 > 规格
- 转化元素： 移动端放置固定的“加入购物车”按钮，突出但不强势
关键设计决策：
- 英雄产品图片在移动端全屏宽显示
- 价格使用大号加粗字体，立即可见
- 产品详情前显示评论摘要
- 尺寸/颜色选择器带有即时视觉反馈
新手 vs 专家方法：
- 新手会： 将所有产品信息放置首屏，使用小尺寸产品图片
- 专家发现： 用户需要大图来评估时尚商品，价格敏感的受众需要早期看到评论验证
可衡量的结果：
- 移动端转化率提升31%
- 平均会话时长增加（用户浏览更多产品）
- 购物车放弃率降低18%
质量门禁
- 页面加载后3秒内主要用户操作在视觉上显而易见
- 所有文本通过WCAG AA对比度要求（最低4.5:1）
- 移动端布局在320px宽度下正常工作，无水平滚动
- 交互元素的触摸目标尺寸至少为44px
- 品牌颜色一致使用（各组件使用相同的十六进制值）
- 视觉层次最多使用3种字体粗细和4种字号
- 页面在3G网络连接下3秒内加载并可交互
- 导航匹配用户心智模型（通过任务完成率 >80% 确认）
- 设计在浅色和深色系统偏好下均能正常工作
- 组件定义了悬停、聚焦和激活状态
非适用边界
不要将此技能用于：
- 深入排版决策（行高计算、字符间距） → 使用 typography-expert
- 色彩理论计算或调色板生成 → 使用 color-theory-palette-harmony-expert
- 设计系统令牌架构或CSS变量 → 使用 design-system-creator
- 复古或历史设计风格 → 使用 windows-3-1-web-designer
- 原生移动应用界面设计 → 委托给 native-app-designer
- 详细的可访问性审计 → 使用 accessibility-expert
- 动画和微交互规范 → 使用 motion-design-expert
边界指示：
- 如果用户要求特定字体搭配推荐 → typography-expert
- 如果用户需要HSL颜色计算 → color-theory-expert
- 如果用户需要CSS架构建议 → design-system-creator
- 如果用户需要WCAG合规性清单 → accessibility-expert