📖
DESIGN NOTES
封面待老婆亲手画哒 ♡
编辑模式 → ⋯ → 设置封面
DESIGN
NOTES
Design Notes
怕学了就忘
所以老公帮你记下来 💕
翻一翻就能复习
by 柴凛 & 韩逸
— 翻页开始 →
01 · 惊喜感 vs 长期效率
骨架不能动，糖衣可以减
💡 核心策略
第一次体验是完整叙事，之后自动变成高效模式，但保留一个
"仪式感碎片"
✅ 微信红包
第100次拆——不激动但不烦。动画
很短，不挡路。
❌ App开屏动画
第10次想摔手机。因为它
挡在你和目标之间。
✍️ 区分"功能骨架"和"体验糖衣"。骨架不能动，糖衣可以减。
| 步骤 | 判断 | 原因 |
|---|
| 登机牌 | ✅ 保留 | 功能必须+可做季节限定 |
| 选座偏好 | ✅ 保留 | 核心交互 |
| 飞行动画 | ✂️ 砍 | 体验糖衣 |
| 卡片翻页 | ✂️ 砍 | 新鲜感消耗最快 |
| 时间轴 | ✅ 保留 | 最终呈现 |
Contextual Theming 情境主题化：换季换皮肤！登机牌做春日限定🌸 星巴克每季换杯子同理～
— 2 —
02 · Progressive Disclosure
新手看完整版，老手看精简版
💡 定义
不是所有信息一次全给，而是根据用户需要
逐层释放。
📱 微信发消息
打字时只有输入框。点"+"才展开相册、红包等。90%的时候你只需要打字。复杂度
藏在一次点击后面。
| 用户状态 | UI表现 |
|---|
| 🆕 第一次 | 5步完整走（制造惊艳） |
| 🔄 用过了 | 登机牌缩卡片+记住偏好+跳过动画 |
| 🕐 很久没用 | 完整版重新出现（再次惊喜） |
🦉 Duolingo
第一次：完整教程。第二次：教程消失。很久没用：教程短暂重现。
骨架没变，糖衣收起来了。
🎤 面试话术
"我用Progressive Disclosure处理新老用户体验分层——首次完整叙事，复访记住偏好自动精简，保留核心仪式感元素。"
— 3 —
03 · 设计语言统一
不是长得一样，是共享底层规则
💡 核心
统一 ≠ 长得一样。统一 =
共享底层规则
🏨 五星级酒店
大堂金色大理石、房间暖色木质、泳池蓝白——风格完全不同，但共享同样的门把手、标识字体、灯光色温。不会觉得是三家酒店。
6个统一维度：
- 色彩体系（主色/辅色/中性色）
- 字体规范（标题/正文/标注）
- 圆角规则（统一弧度）
- 间距节奏（留白节奏感）
- 动效语言（速度曲线统一）
- 图形元素（航空元素家族）
✍️ 航空元素家族：登机牌做输入、翻牌屏做结果、行李牌做社区、舷窗做种草！不是一个飞机用到吐～
Form follows function：最好的视觉元素同时解决功能问题！翻牌屏不只好看，它解决了loading焦虑 🔥
— 4 —
04 · Affordance
长得像什么就知道怎么用
- 门把手 → "握住往下拉"
- 按钮凸起 → "按我"
- 登机牌 → "在这填出发地和目的地"
登机牌比普通表单好——利用用户已有认知经验，不用说明就知道该填什么。
🎤 面试话术
"基于Affordance理论——登机牌是航空场景下最熟悉的信息载体，视觉结构引导用户填写，降低认知负荷。"
Fallback Design 降级设计：PEK旁边写上"北京"——老手看PEK够了，新手看北京也懂。两种用户都照顾到 ✅
— 5 —
05 · Design Token
就是CSS变量，改一个全部跟着变
💡 人话
把设计决策变成
可复用的变量。全局定一套，所有页面引用同一套。换了值，整个App一起变。
✍️ 你HTML笔记里的 --accent: #e8839b 就是Token！你已经在用了！
五个维度：
| 维度 | 举例 |
|---|
| 🎨 色彩 | color-primary / color-ai / color-success |
| 📐 圆角 | radius-s(8) / radius-m(12) / radius-l(16) |
| 📏 间距 | space-xs(4) / space-m(16) / space-xl(32) |
| 🎬 动效 | duration-fast(150ms) / ease-bounce |
| 🗣️ 语气 | "嗨，今天飞哪儿？" 不是 "您好请问有什么可以帮您" |
🎤 面试话术
"我建立了Design Token体系——色彩、圆角、间距、动效、文案语气五个维度。三个板块风格不同但共享底层令牌。"
— 6 —
06 · 撕登机牌交互
撕 = 获取，物理隐喻变成触发动作
💡 核心设计
用户填完信息后，
撕下登机牌右侧副联 → 触发AI生成旅行方案。"撕"代表"获取"，撕下副本 = 确认出发。
防呆设计：
- 信息没填完 → 撕条飘动但撕不下来
- 信息填完 → 撕条变"可撕状态"（高光+震动暗示）
- 撕的瞬间 → 动效 → 三张推荐卡片飞出
推荐卡片交互：
- 任意一张不喜欢 → 点"重新生成"= 简单刷新
- 长按"重新生成"→ 告诉AI为什么不喜欢（Progressive Disclosure！）
🎤 面试话术
"我用'撕登机牌'作为AI触发——把抽象的按钮操作转化为有情感意义的仪式行为。Affordance + 防呆设计的结合。"
— 7 —
07 · 酷炫层 vs 保守层
第一次情感冲击，第二次实用高效
| 层 | 风格 | 目的 |
|---|
| 酷炫层 | 沉浸式图片卡片 | "我好想去！" |
| 保守层 | 登机牌时间轴 | "几点干什么" |
💡 两层怎么统一
Design Token——正文字体一致、蓝色品牌色贯穿、
三字代码（PEK/SHA）两层都出现、同一套圆角值。
品牌锚点（再大胆也能拉回航旅纵横）：
- 🔵 航旅纵横的蓝色（点缀色）
- ✈️ 三字代码 PEK/SHA（品牌基因）
- 📎 "航旅纵横 × AI旅行计划"（品牌露出）
🎤 面试话术
"大胆的视觉风格探索品牌升级——从信息工具感向年轻化、情感化演进。通过三字代码、品牌色和登机牌元素保持品牌识别度。"
第二次进入：跳过动效 → 只保留填写+结果 → 偏好可跳过。Progressive Disclosure的应用！概念串联了✨
— 8 —
🌹
FIN.
封底待老婆亲手画哒 ♡
编辑模式 → ⋯ → 设置封底