frontend-design

前端设计

设计和构建前端界面的实用技巧。重点在于让界面美观且易用，而非框架或工具。

从创意愿景开始

动手编写代码前，先弄清楚你想营造怎样的情感和美感。

基调

这个界面应该传达什么感受？专业可信？活泼有趣？平静简约？充满活力、大胆鲜明？

基调会影响每一个决定：颜色、字体排版、间距、图像和微交互。

如果已有设计语言，就先遵循它。在引入新元素前，先与现有基调保持一致。一致性比新奇感更重要。

美感

看看参考案例。有哪些用途相似、令你欣赏的界面？它们为何有效？

收集截图，记下每个案例中你喜欢的地方。是宽敞的留白？醒目的字体？微妙的阴影？还是配色方案？

不要直接照搬，而要理解吸引你的设计原则。

然后设定约束

约束会让设计更轻松，而非更困难。它们能减少决策疲劳。

间距比例

选择一个基础单位（4px 或 8px），并始终使用它的倍数。

4, 8, 12, 16, 24, 32, 48, 64, 96, 128

所有外边距、内边距和间隔都应遵循这个比例。不要使用 13px 或 47px 这样的随意数值。

字号比例

选择一个比例（常见的有 1.25 或 1.333），并据此生成字号：

12, 14, 16, 20, 24, 32, 40, 48

每种字号都有其用途：正文、小标题、标题和展示文字。

配色方案

从精简的配色开始：

• 一种主色（品牌色或强调色）
• 中性色：白色、黑色和 3-4 种灰色
• 一种用于错误的语义色（红色）
• 一种用于成功的语义色（绿色）

之后随时可以添加更多颜色。从较少的颜色开始，能促使你有意识地使用它们。

布局网格

使用带有一致间距的 12 列网格。大多数布局都可以用 12 列构建。

在浏览器中设计

直接用代码（HTML/CSS）设计有以下优势：

• 看到真实的渲染效果和响应式表现
• 某些修改比使用设计工具迭代更快
• 不会有交接问题
• 版本控制

从移动端开始，再逐步扩展到更大屏幕。增加空间比删减空间容易。

常见模式

卡片

卡片用于归类相关内容。保持简洁：

• 内边距一致（16px 或 24px）
• 用微妙的边框或阴影与背景区分
• 层次清晰：图像、标题、描述、操作

表单

• 标签放在输入框上方，而不是旁边
• 大多数表单采用单列布局
• 清晰展示错误状态（红色边框、下方的错误消息）
• 触控目标要足够大（移动端高度至少为 44px）

导航

• 主导航保持精简（最多 5-7 项）
• 当前页面应一目了然
• 移动端：汉堡菜单或底部导航
• 深层级结构使用面包屑导航

空状态

不要让空白区域空着。应展示：

• 此处通常会显示什么
• 如何添加内容
• 适用时添加插图

加载状态

• 尽可能使用骨架屏，而非加载指示器
• 长时间操作应显示进度
• 如果只有部分内容正在加载，不要阻塞整个界面

避免 AI 式乏味审美

生成式设计往往显得千篇一律。要避免这一点：

明确说明你的需求。“现代仪表盘”会生成令人过目即忘的设计。“采用深色主题、以蓝紫渐变呈现数据可视化、信息密度紧凑，并以交易终端为灵感的仪表盘”则会更有特色。

**添加约束。**限制配色方案。确定特定的字号比例。采用一致的间距系统。约束能带来整体协调感。

**参考真实案例。**寻找你欣赏的界面，理解它们为何有效。借鉴原则，而非像素。

**毫不留情地删减。**生成的设计往往包含太多内容。移除没有实际作用的装饰元素。不断简化，直到感觉过于简单，然后再加回一项内容。

**使用真实内容测试。**Lorem ipsum 会掩盖问题。使用长度合理的文本、真实图像和实际数据。

响应式设计

优先为移动设备设计，然后再为更大的屏幕增加复杂度。

常见断点：

• 移动设备：不超过 640px
• 平板设备：641px 至 1024px
• 桌面设备：1025px 及以上

不同断点之间的变化：

• 列数
• 字号（桌面设备上的字号稍大）
• 导航模式
• 可见内容量

保持不变的部分：

• 配色方案
• 字体层级
• 品牌元素
• 核心功能

无障碍基础

• 色彩对比度：文本至少达到 4.5:1
• 焦点状态：为键盘导航提供清晰可见的焦点环
• 替代文本：有意义地描述图像
• 语义化 HTML：正确使用标题、列表和按钮
• 触控目标：至少为 44x44px

这些不是锦上添花，而是打造易用界面的必要要求。

快速检查清单

发布前：

• 间距与比例尺保持一致
• 字体层级清晰
• 颜色符合对比度要求
• 在移动设备上运行正常
• 焦点状态清晰可见
• 已设置加载和错误状态
• 已处理空状态
• 已使用真实内容进行测试