14个开发者常犯的设计错误（以及如何通过示例修复）

Source: Dev.to

使用过多的字体大小

问题： 随意的字体大小会让界面显得凌乱且缺乏规划。

/* ❌ 开发者常犯的错误 */
h1 { font-size: 42px; }
h2 { font-size: 30px; }
h3 { font-size: 27px; }
p  { font-size: 18px; }
.small { font-size: 15px; }
.tiny { font-size: 13px; }

解决方案： 使用统一的比例尺并在所有地方复用。

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
p  { font-size: 1rem; }

没有间距系统

问题： 所有元素都显得拥挤或不均匀。

解决方案： 采用间距比例（例如 4px → 8px → 12px → 16px → 24px → 32px → 48px）并始终如一地使用。

.section {
  padding: 24px;
  margin-bottom: 32px;
}

按钮样式不统一

问题： 不同的边框、阴影和内边距让按钮显得不专业。

解决方案： 定义统一的按钮规则并复用。

button {
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  transition: 0.2s;
}
button:hover { opacity: .9; }
button:active { transform: scale(.97); }

使用过多颜色

问题： 颜色越多并不意味着 UI 更好。

指南： 将调色板限制在五种核心颜色：

1. 主色
2. 次色
3. 背景色
4. 文本色
5. 强调色

忽视层级结构

问题： 用户不知道该先看什么。

解决方案： 用清晰的视觉层级组织内容。

## 更智能地记录支出

AI 自动为每笔交易分类。

立即开始

• 大标题 → 主要信息
• 副标题 → 辅助说明
• 普通文本 → 详细内容

所有内容居中

问题： 居中的段落阅读困难。

解决方案：

• 标题和主视觉文字居中。
• 正文段落左对齐。

低对比度文字

问题： 浅灰色文字虽好看但难以阅读。

/* ❌ 糟糕的写法 */
color: #999;

/* ✅ 正确的写法 */
color: #1a1a1a;

图标样式不统一

问题： 混用不同的图标库显得业余。

解决方案： 选择单一的图标集（例如 Lucide、HeroIcons、Feather），并坚持使用。

全宽文本

问题： 过宽的段落会让眼睛疲劳。

解决方案： 限制行宽。

max-width: 65ch;

缺乏视觉分组

问题： 元素漂浮无结构。

解决方案： 使用视觉分组技巧，例如：

• 卡片
• 背景块
• 分割线
• 统一的内边距和间距

缺少交互反馈

问题： 按钮没有反馈感。

解决方案： 添加 hover 和 active 状态。

button:hover { opacity: .85; }
button:active { transform: scale(.97); }

弹窗随处可见

问题： 弹窗不是可靠的导航方式。

解决方案： 对于上下文交互，优先使用内联组件。

仅用颜色表示错误

问题： 仅靠颜色对色盲用户不友好。

Email invalid

⚠️ Invalid email format

未进行移动端优先测试

问题： 在桌面上可用的设计在移动端可能无法使用。

解决方案： 采用移动端优先的开发方式。

.container { width: 100%; }

@media (min-width: 768px) {
  .container {
    max-width: 700px;
    margin: auto;
  }
}

最后思考

你不需要“成为设计师”。你需要的是明确的规则和决策思维方式。

• 规则： 一致性、层级结构、可访问性和响应式。
• 设计： 不是装饰，而是有目的的选择。