用户界面设计：用设计引导注意力
DesignUI Design用户界面设计（User Interface Design）的核心是 引导用户的注意力——让他们先看到最重要的信息，再自然地浏览其余内容。UI 设计有五大原则。
一、📊 层次（Hierarchy）
1.1 人眼的自然倾向
人的大脑总是被 更大、更粗、更醒目 的元素吸引。设计师利用这个规律来建立信息的 优先级。
┌─────────────────────┐
│ YOUR EYE HERE │ ← 你最先看到这里（最大最粗）
│ │
│ then here │ ← 然后看到这里
│ │
│ Isn't that │
│ fascinating? │ ← 最后看到这里（最小）
└─────────────────────┘1.2 没有层次 vs 有层次
❌ 无层次（所有信息等权重）：
Birthday party for Jane, Saturday May 3, 12 PM, at Jane's House, 29 Acacia Avenue, Cake and ice-cream provided.
✅ 有层次（重要信息优先传达）：
Jane 的生日派对
时间：5 月 3 日周六 12:00 地点：Acacia Avenue 29 号 提供蛋糕和冰淇淋 🎂
1.3 建立层次的方式
| 方式 | 说明 | 示例 |
|---|---|---|
| 颜色 | 高对比度 → 高层次 | ASOS 用绿色突出"加入购物袋"按钮 |
| 大小 | 更大的元素 → 更高层次 | Coinbase 首页大标题 + 大输入框 |
| 字重 | 粗体 → 高层次；细体 → 低层次 | 标题 Bold vs 正文 Regular |
| 位置 | 页面上方 / 中央 → 更容易被看到 | Hero 区域放核心 CTA |
ASOS 的设计策略
ASOS 网站的主色调是灰白色，但在 "Outlet" 和 "加入购物袋" 按钮上使用了醒目的绿色/红色强调色。这告诉我们：ASOS 最希望你知道有折扣区，并希望你 完成购买。
二、📐 布局（Layout）
2.1 拒绝大段文本
不要把所有内容放在一个巨大的文字块中。用 图片、分隔、不同区域 分割内容。
2.2 最佳行长度
| 情况 | 体验 |
|---|---|
| 太长（>80 字符/行） | 眼睛难以跟踪同一行 |
| 太短（<30 字符/行） | 阅读感觉断断续续 |
| 最佳：40–60 字符/行 | 舒适的阅读体验 |
Wikipedia 的反面教材
Wikipedia 的每行文本 过长（常超过 100 字符），用户很难跟踪一行文字到末尾。这是用户体验的常见问题。
2.3 好的布局：Grammarly 方式
- 内容被分割成 小块
- 图文交替出现
- 每部分有独立的视觉重点
- 用户更容易 消化 更多内容
三、📏 对齐（Alignment）
3.1 核心原则
减少对齐线的数量 = 设计更专业
❌ 混合对齐 ✅ 统一对齐
居中标题 左对齐标题
左对齐正文段落 左对齐正文段落
居中按钮 左对齐按钮
左对齐图片说明 左对齐图片说明
（4 条对齐线 → 混乱） （1 条对齐线 → 整洁）3.2 对齐线练习
- 在你的设计中标出每个元素 起始位置 的垂直线
- 计算有多少条不同的对齐线
- 尽量 减少 这个数字——让更多元素共享同一条对齐线
3.3 对齐的力量
即使 不改变颜色、字体或任何其他东西，仅仅统一对齐就能让设计从"随意"变成"专业"：
| 变化 | 效果 |
|---|---|
| 标题和正文左对齐到同一点 | 立刻有"同属一组"的感觉 |
| 多个卡片左对齐 | 整体更整洁、更有结构 |
| 减少对齐线数量 | 设计看起来更 有意为之 |
四、🏔️ 留白（White Space）
4.1 留白的力量
留白 是设计中元素周围的 空白区域。它不是"浪费空间"，而是提升品质感的最强工具之一。
4.2 奢侈品商店的秘密
| 商店类型 | 陈列方式 | 价格感知 |
|---|---|---|
| 折扣店 | 商品密密麻麻摆满 | "便宜货" |
| 奢侈品店 | 大量留白，每个商品周围留空 | "高档、昂贵" |
数字设计同理
一则降噪耳机广告：
- 塞满"New!"、"Only $20"、"100% noise cancellation" → 看起来 廉价
- 大量留白，只保留产品图和品牌名 → 看起来像 Apple 出品
4.3 留白的应用
| 位置 | 做法 |
|---|---|
| 元素之间 | 增加 margin、gap、padding |
| 段落之间 | 适当的 line-height 和 margin-bottom |
| 页面边缘 | 不让内容贴边，保持呼吸空间 |
| 重要元素周围 | 用留白让它"浮出来" |
五、👥 受众设计（Design for Your Audience）
5.1 没有万能的"好设计"
设计的好坏完全取决于 目标受众。所有规则（包括"不用 Comic Sans"）都要根据受众灵活调整。
5.2 受众 vs 风格
| 受众 | 适合的风格 | 举例 |
|---|---|---|
| 儿童 | 色彩鲜艳、字体活泼、元素丰富 | 儿童音乐会海报应该 有趣，不该严肃 |
| 青少年买衣服 | 大胆、潮流、动态 | 运动品牌、快时尚 |
| 企业客户 | 专业、简洁、可信 | 企业 SaaS 网站 |
| 加密货币用户 | 现代、技术感、蓝色调 | Coinbase 风格 |
| 医疗机构 | 清洁、白/蓝色、值得信赖 | 医院 / 医疗平台 |
5.3 灵活性
不要总是创造 同一种风格，而是为 不同受众 创造不同风格。
设计技能的真正价值在于能够根据目标用户 切换 设计语言。
六、📋 五大原则速查
| # | 原则 | 核心思想 | 关键行动 |
|---|---|---|---|
| 1 | 层次 | 引导视线优先级 | 用颜色、大小、字重创造层次 |
| 2 | 布局 | 分割内容，增加趣味 | 图文交替，40–60 字符/行 |
| 3 | 对齐 | 减少对齐线 | 所有元素共享尽可能少的起始线 |
| 4 | 留白 | 空间 = 高级感 | 元素周围留出呼吸空间 |
| 5 | 受众 | 为目标用户设计 | 灵活切换风格以匹配受众 |