用户体验设计：打造无形的好体验
DesignUX Design用户体验设计（User Experience Design）与 UI 设计不同——好的 UX 是 无形的，用户感觉一切都毫不费力。就像 Reed College 的建筑师：先让人走出自然的路径，再铺设道路。
一、🎓 UX 的本质
Reed College 的故事
一位建筑师翻新了大学校园，建好了所有建筑但 没有铺路。校长问："路呢？"建筑师说："一年后再回来。"
一年后，草地上被人们 踩出了自然路径——这才是人们 真正需要走 的路线。建筑师在这些自然路径上铺了石板。
设计（Design）= 我们认为好看的，强加给用户 用户体验（UX）= 无形的、顺应用户自然行为的设计
二、🧘 简约（Simplicity）
核心原则
当面临"更复杂"还是"更简约"的选择时，永远选择简约。
反面教材：新浪网
新浪（Sina）作为中国最大的新闻网站之一，页面上挤满了 密密麻麻的链接。用户的大脑被信息量压垮，反应是"不，我做不到"。
正面案例：Monocle
Monocle（新闻网站）将内容 分割成小块：
- 一些对话
- 一些图片和视频
- 少量文字
- 统一的配色和排版
从不让用户感到 被信息淹没。
三、🔄 一致性（Consistency）
核心原则
设计 和 功能都要保持一致。
反面教材：Xfinity
Xfinity（美国通信公司）网站的三个不同页面：
| 页面 | 问题 |
|---|---|
| 首页 | 导航栏样式 A |
| 电视产品页 | 导航栏样式 B（按钮位置变了） |
| 新闻页 | 导航栏样式 C（搜索栏移了位） |
用户从一个页面跳到另一个页面时，需要 重新学习 如何使用网站。
一致性清单
| 应一致的元素 | 说明 |
|---|---|
| 导航栏 | 所有页面相同结构、相同位置 |
| 按钮样式 | 同类操作使用相同样式和颜色 |
| 字体和颜色 | 全站统一排版和配色方案 |
| 交互模式 | 同类功能的操作方式一致 |
| 间距和布局 | 各页面使用相似的网格和留白 |
四、👁️ 阅读模式（Reading Patterns）
4.1 F 型阅读模式
眼动追踪研究发现，用户浏览网页时最常用 F 型 模式：
████████████████████
████████████
███████████████
████████
███████████
█████
████████
███| 阶段 | 行为 |
|---|---|
| 1. 水平扫描 | 从 左上角 开始，向右扫描标题 |
| 2. 返回左侧 | 眼睛回到 左边缘 |
| 3. 向下浏览 | 沿左边缘 向下扫 项目符号、图标、标题 |
设计策略：将最重要的内容放在 左侧边缘：
- Logo 在左上角
- 导航项左对齐
- 要点/图标/按钮排在左侧
4.2 Z 型阅读模式
在内容较少、更视觉化的页面上，用户使用 Z 型 模式：
①────────→②
\
\
④←──────── ③| 阶段 | 位置 |
|---|---|
| 1 | 左上 → Logo / 品牌 |
| 2 | 右上 → 导航 / CTA |
| 3 | 右下 → 辅助内容 |
| 4 | 左下 → 次要操作 |
适用场景：着陆页、产品展示页等视觉主导的页面
经典案例：Facebook 网站使用 Z 型布局引导视线流动。
4.3 选择哪种模式
| 页面类型 | 推荐模式 |
|---|---|
| 文字密集型（新闻、博客） | F 型 |
| 视觉主导型（着陆页、产品页） | Z 型 |
| 快速浏览型 | Z 型 |
五、📱 全平台设计（All Platform Design）
5.1 常见问题
| 问题 | 说明 |
|---|---|
| 桌面设计塞进手机 | 文字太小、链接无法点击、横排内容挤在竖屏 |
| 手机设计做到桌面 | 大量空白未利用，内容挤在屏幕中间 |
| 移动端广告泛滥 | 横幅、cookie 提示占满屏幕，内容缩小到 Apple Watch 大小 |
| 过度放大单个元素 | 一张图或一段文字撑满整个屏幕，需要无限滚动 |
5.2 设计原则
| 原则 | 做法 |
|---|---|
| 响应式 | 网站在不同屏幕尺寸下自动调整布局 |
| 充分利用空间 | 桌面端不要留过多空白，移动端不要过度拥挤 |
| 合理比例 | 不要让任何单一元素过大或过小 |
| 测试 | 在真实设备上测试，或使用 DevTools 设备模拟器 |
5.3 最重要的事
测试、测试、再测试
- 找专业测试人员（如果预算允许）
- 找家人朋友测试（给他们烤饼干作为回报 🍪）
- 收集反馈，持续改进
六、⚠️ 暗黑模式（Dark Patterns）
6.1 什么是暗黑模式
暗黑模式是利用设计知识 诱导用户做出非自愿行为 的设计手法，对公司有利但损害用户利益。
6.2 真实案例
🥪 Waitrose 三明治
超市展示的三明治包装 看起来从边到边满满的，但打开后发现中间是空气，三明治比预期小得多。
🛒 Amazon 快递选择
| 选项 | 设计处理 |
|---|---|
| Express 快递（付费） | 🟠 橙色高亮按钮，视觉突出 |
| 免费标准快递 | 灰色小字，不引人注意 |
利用 层次设计 让用户更容易点击付费选项。
📱 Snapchat 假头发广告
广告上放置了 1 像素的弯曲线，看起来像屏幕上粘了一根头发。用户去"清理"头发时，实际上点击了广告，为广告商赚取了点击费用。
✈️ RyanAir 旅游保险
在购票流程中强制浏览大量附加选项。"不购买旅游保险"的选项被 藏在一个巨大的下拉列表中，按字母排序在 Denmark 下面。
☑️ 超级混淆复选框
"如果您 不 希望我们 不再继续停止不向您 发送每周特惠优惠，请表明您 不倾向于 通过 不 勾选此框来表示同意。"
没有人知道勾选这个框会发生什么。
6.3 好设计 vs 暗黑模式
| 好设计 | 暗黑模式 |
|---|---|
| 帮助 用户完成想做的事 | 诱导 用户做不想做的事 |
| 透明、直接 | 误导、隐藏 |
| 建立信任 | 消耗信任 |
| 用户愿意回来 | 用户再也不会回来 |
七、📋 五大原则速查
| # | 原则 | 核心思想 |
|---|---|---|
| 1 | 简约 | 选择简单而非复杂，不要用信息淹没用户 |
| 2 | 一致性 | 设计和功能在所有页面保持统一 |
| 3 | 阅读模式 | 按 F 型或 Z 型布局放置内容 |
| 4 | 全平台 | 桌面和移动端都充分利用空间，反复测试 |
| 5 | 避免暗黑模式 | 好设计帮助用户，不诱导用户 |