Google UX 证书 / 构思·线框图·低保真原型

Course 2 的构思阶段 + Course 3(构建线框图和低保真原型)的合集。这一段讲的是设计流程里"从一堆想法到一个能点的草稿"——构思 → 用户流程 → 故事板 → 线框图 → 低保真原型。视觉美化(颜色/字体/图标/高保真)在下一门课,见 Google UX 证书 / 视觉设计·设计系统·响应式。

对 PM 的意义:这一段最实用的是用户流程图(user flow)、信息架构(IA)、线框图三件——它们正好是 PRD 里"页面结构 + 跳转逻辑"那部分的设计语言。学会了你写 PRD、跟设计师对线框时能直接对话,而不是只会说"这里加个按钮"。

一、设计构思 Ideate(发散方案)

构思阶段的心法见 Google UX 证书 / UX 设计基础 §六(HMW / Crazy Eights / 竞品分析 / SCAMPER)。这里补两件操作:

目标陈述 Goal Statement

问题陈述讲"用户的问题",目标陈述讲"我们要做的方案 + 怎么衡量成功"。是从定义阶段进入构思的桥。

公式:我们的 [产品] 让用户能够 [行动],这将惠及 [用户群],帮助他们 [好处]。我们将通过 [指标] 来衡量成效。 例:我们的 CoffeeHouse App 让用户提前下团体订单,惠及需要大额订单的用户,帮他们跳过店内排队省时间。我们将通过"App 内 5 件及以上订单数量"衡量成效。

竞品调研 Competitive Audit(5 步)

研究对手产品找灵感、避错、找市场机会。流程:① 圈定竞品(直接竞品 + 间接竞品) ② 定调研维度(功能/定价/用户体验/优劣势) ③ 逐个体验记录 ④ 分析(谁做得好、空白在哪) ⑤ 出调研报告 + 总结机会。

用法:竞品差评是独特价值主张的金矿(见 Google UX 证书 / UX 研究与共情-定义 §四)。

二、用户流程图 User Flow

用户从打开到完成任务的每一步图示——在画界面之前先画,让团队看清"用户要经过哪些步骤"。4 种图形(像流程图):

图形	颜色	代表	例
圆形 Circle	绿	动作(用户操作)	打开 App、点按钮、选项目
矩形 Rectangle	黄	页面(用户看到的屏)	首页、搜索结果、确认页
菱形 Diamond	蓝	决策(用户的选择分叉)	是否预约?是→预约页 / 否→返回
箭头 Arrow	红	流向	实线=前进,虚线=返回上一步

流程图会变——发现用户想在预约前看"如何选遛狗员",就加一个新页面 + 新路径。新产品从头画,改进老产品则更新已有流程。以用户需求为中心。

三、故事板 Storyboard

像连环画/电影分镜,一格一格展示用户使用产品的关键步骤。强调关键时刻,不是每个界面。4 核心元素:人物 Character / 场景 Scene / 情节 Plot / 叙述 Narrative。模板 = 场景句(一句话描述用户与问题) + 画格(每格一段体验) + 文字说明(补画不出来的细节)。常用 6 格。

两种故事板(按阶段选)

类型	阶段	聚焦	特点
全景 Big-Picture	初期	用户整体感受/情绪/动机	以用户为中心,表现情绪变化(😞→😊),讲"为什么用、有什么帮助";建议用表情体现情绪;第 4 格常埋痛点,最后一格达成目标
特写 Close-up	中后期	产品界面流程/操作逻辑	以界面为中心,每格一个页面/操作,讲"点了什么、怎么跳",不关注情绪

同一个用户(如 Drew 用遛狗 App):全景版讲"狗在家孤单→开车想起忘遛→打开 App→松一口气"的情绪线;特写版讲"打开 App→登录→填地址→选时间→确认"的操作线。

四、线框图 Wireframe

保真度 Fidelity = 与成品的接近程度

	低保真 Lo-Fi	高保真 Hi-Fi
特征	简单、不精致、快速草图	详细、精致、接近真实产品
阶段	早期,头脑风暴/探索	后期,用户测试/获取反馈

类比画公寓:用方块表示房间家具 = 低保真;加颜色、装饰、家具图案 = 高保真。

线框图 = 低保真,展示页面骨架结构:只用线条、简单图形、少量文字,不含颜色/图片/品牌元素。价值:规划页面结构、强调功能性(每个元素干什么)、省时间(快速试多方案)、团队沟通统一。可手绘或用 Figma/Adobe XD/Sketch。

纸质 → 数字 + 倒推练习

纸质线框图:线条/矩形/符号快速勾;数字线框图:Figma 里按设备尺寸建画板,参考纸质版逐一搭元素,所有关键页面都要转(不只首页),保证用户流程完整。
倒推练习(reverse engineering):手绘你喜欢的 App(如 YouTube)的线框图——新手练线框图的经典法,也是作品集的有力素材。

行业标准画法(背下来,跟设计师对线框时通用):

元素	线框图表示
正文文本	横线
图片/图标	带 "X" 的方形或圆形
操作按钮 CTA	矩形或圆形
标题/标签	文字或横线

完成后整体自检:关键元素都在屏内?布局准确?符合行业标准?三个"是"就成功。

五、信息架构 IA(Information Architecture)

产品信息的组织方式 = 产品的"地图"。3 个核心:组织 Organization(页面如何连接)、层级 Hierarchy(树状,大类→子类)、顺序 Sequence(操作流程步骤)。可视化成站点地图 Sitemap。

Dan Brown 信息架构 8 原则

对象原则:内容会更新变化,当它"有生命"。
选择原则:别给太多选项,几个清晰的胜过一堆(呼应 Hick 定律)。
披露原则:合适时机显示信息,不一次全抛。
范例原则:用例子帮用户理解分类含义。
前门原则:用户可能从任何页面进来,不一定是首页。
多重分类原则:提供多种查找方式(不同人找信息习惯不同)。
聚焦导航原则:导航简单明了,让用户知道往哪走。
增长原则:为未来留扩展空间。

Sitemap 父子结构:首页(父)→ 新用户登录/老用户登录/第三方登录(同层子);设置(父)→ 个人资料/安全/帮助/政策(子)。移动 vs 网页:IA 大致相同,但移动端分类更少。移动 IA 3 挑战:内容精简、点击目标够大、文字可读。

六、Figma + 格式塔原则

Figma

云端 UX/UI 设计工具,一体化(线框图→原型→交互动效不用换工具)。优势:实时远程协作、加快流程、社区插件多。技能可迁移——会 Figma 再学 Adobe XD/Sketch/Axure 很快。讲师 Erika 学工具的心法:直接上手画(画个圆、改个色)、卡住就查官方帮助/Google/YouTube、每天练;工具只是手段,别绑死某一个,掌握设计思维才是关键。

格式塔原则 Gestalt(让线框图一眼好懂)

设计不是纯主观,是用合理方法解决"用户能不能看懂用懂"。3 个常用:

原则	含义	应用
相似性 Similarity	长得像 = 功能像	所有用户头像都用 40×40 圆形 → 用户知道这些都是"资料入口"
接近性 Proximity	放得近 = 有关系	"购买"按钮紧贴产品名和价格,别让用户误会按钮指向
共同区域 Common Region	同一个框/底色 = 一组	导航栏用统一底色+边框圈起来,显得比单独图标更重要

延伸:闭合性 Closure(大脑补全缺失图形)、连续性 Continuity(同方向排列看作整体)、对称性 Symmetry(对称更易识别有序)。

七、低保真原型 Low-Fi Prototype

线框图 vs 原型:线框图给静态布局(每页长啥样),原型给交互(点了之后跳哪)。低保真原型 = 把线框图连成可点击的流程。

在 Figma 里建(4 步)

① 准备各页面线框图 → ② 给每页用数字编号命名(图层面板) → ③ 切到 Prototype 模式,选元素拖 "+" 加连接(首页"预约"按钮→预约页,等等) → ④ 点"播放"进演示模式,像真用户一样测每个按钮能否跳转、能否滚动、返回键是否正常,给没连的按钮补连接。好处:清楚展示每步操作、做得快(不用加色/图)、方便早期试用收集意见、为高保真打底。

纸面原型 Paper Prototype

剪开各页面 + 做手机形纸框演示切换。5 好处:便宜、改得快、没心理压力(扔了不可惜)、更容易得反馈(看着简单别人更敢提)、方便协作。缺点:要靠想象、只能当面测、不适合远程。何时用:想点子时、测初步流程、面对面开会时。滚动演示技巧:画一张很长的纸,手机纸框放上面用手指模拟上下滑。

移动优先 Mobile-first:先做手机版——屏幕最小逼你只放最重要内容,小屏能用的放大屏更容易调。

关键术语速查(Glossary)

英文	中文	一句话
Goal Statement	目标陈述	产品+行动+用户+好处+衡量指标
Competitive Audit	竞品调研	研究对手找灵感/机会,差评是金矿
User Flow	用户流程图	圆=动作/矩=页面/菱=决策/箭=流向
Storyboard (Big-Picture / Close-up)	故事板(全景/特写)	全景讲情绪,特写讲操作
Fidelity	保真度	与成品的接近程度,低保真→高保真
Wireframe	线框图	页面骨架,只线条形状不含颜色
Information Architecture (IA)	信息架构	组织/层级/顺序,产品的地图
Sitemap	站点地图	IA 的可视化,父子层级
Gestalt Principles	格式塔原则	相似/接近/共同区域…让布局好懂
Low-Fi Prototype	低保真原型	线框图连成可点击流程
Reverse Engineering	倒推练习	手绘现成 App 练线框图