增强设计 (bolder)

增强设计（bolder）

概述

bolder 是让平淡的设计更有视觉冲击力的技能。它的核心是：在保持可用性的同时，增强视觉吸引力和表现力。

作为设计师，你可能遇到过：

“设计太无聊”
“没有亮点”
“太平淡了”

bolder 就是解决这些的。

什么时候需要增强

1. 提升吸引力

用户注意力稀缺：

✅ 增强后：
- 第一眼抓住注意力
- 视觉印象深刻
- 愿意继续浏览

❌ 之前：
- 容易被忽略
- 记不住
- 没有亮点

2. 强调重点

信息需要层次：

✅ 增强后：
- 重要的更突出
- 次要的降权
- 视觉路径清晰

❌ 之前：
- 都一样重要
- 不知道看哪里
- 没有焦点

3. 品牌表达

设计需要个性：

✅ 增强后：
- 品牌感更强
- 独特性
- 记忆点

❌ 之前：
- 太普通
- 和竞品一样
- 没有特点

增强策略

1. 颜色增强

从平淡到有冲击力：

❌ 之前：
- 灰色按钮
- 灰色背景

✅ 增强后：
- 品牌色按钮
- 彩色强调
- 渐变背景

2. 对比增强

视觉对比：

✅ 正确：
- 大对比
- 粗细对比
- 色彩对比

❌ 错误：
- 差不多大小
- 没有层次

3. 尺寸增强

尺寸变化：

✅ 正确：
- 标题超大
- 关键数字突出
- 主按钮大

❌ 错误：
- 都一样大
- 差别不明显

4. 形状增强

形状变化：

✅ 正确：
- 圆角卡片
- 独特图标
- 创意图形

❌ 错误：
- 方方正正
- 普普通通

5. 动效增强

微动效：

✅ 正确：
- hover 效果
- 点击反馈
- 加载动画

❌ 错误：
- 静止不动
- 生硬切换

增强应用

1. 按钮

普通按钮：
- 灰色背景
- 黑色文字
- 普通边框

增强按钮：
- 品牌色背景
- 白色文字
- 悬停效果
- 点击动画

2. 卡片

普通卡片：
- 白色背景
- 细边框

增强卡片：
- 彩色边框
- 阴影效果
- hover 上浮
- 渐变装饰

3. 标题

普通标题：
- 黑色文字
- 普通大小

增强标题：
- 品牌色
- 超大字号
- 加粗
- 强调线

4. 数据

普通数据：
- 纯数字
- 黑色

增强数据：
- 彩色数字
- 单位突出
- 趋势指示

增强原则

1. 克制

不是越强越好：

✅ 正确：
- 重点突出
- 其他降权

❌ 错误：
- 全部都强
- 太花哨
- 视觉噪音

2. 目的

增强有目的：

✅ 正确：
- 引导注意力
- 强调重点
- 品牌表达

❌ 错误：
- 为了酷而酷
- 没有意义

3. 一致

增强有规律：

✅ 正确：
- 同类元素用同类增强
- 增强方式统一

❌ 错误：
- 随机增强
- 不一致

实践案例

案例 1：首页增强

问题：首页太普通

增强：

- Hero区域：大标题 + 渐变背景
- CTA按钮：品牌色 + 悬停效果
- 特色区域：彩色图标 + 动画
- 数据展示：大数字 + 颜色

案例 2：按钮增强

问题：按钮不突出

增强：

- 主按钮：品牌色 + 阴影 + 悬停上浮
- 次按钮：边框 + 悬停填充
- 图标按钮：背景 + 悬停放大

案例 3：空状态增强

问题：空状态太无聊

增强：

- 彩色插画
- 有趣的文案
- 动态效果
- 明确的行动按钮

增强检查清单

视觉

颜色有冲击力？
对比有层次？
尺寸有变化？

动效

hover 效果？
点击反馈？
加载动画？

原则

有目的增强？
不是全部增强？
增强一致？

速查卡片

增强策略

颜色增强
对比增强
尺寸增强
形状增强
动效增强

应用

按钮
卡片
标题
数据

原则

克制
目的
一致

注意

不是全部增强
重点突出
保持可用

与其他技能

colorize - 添加色彩
polish - 打磨
quieter - 柔和化（反义词）

查看源文件: GitHub原始文件