以Quora安卓客户端的重构为例，Norman Tran教你玩转Persona、Framework、Sketch和Prototype

编者按：本文作者 Norman Tran 是一位 UX 设计师，Quora 是他最爱的产品之一。但在一次用户测试中(usability test )，他发现 Quora 的浏览（Browse）和搜索结果（Search Results）存在重大问题。由此，他展开了 Quora 的产品重构（Redesign）。本文将以 Quora 安卓客户端优化为例，详细阐述“发现问题--解决问题--重新优化” 的整体产品重构流程。

发现问题

在此前的可用性测试（Usability Test）中，我发现了两个棘手的问题：

• 浏览（Browse）功能不足，难以帮助用户发现有趣的内容
• 搜索结果（Search Results）参差不齐，导航功能令人费解

解决方法 ：高保真模型(High-Fidelity Mockups)

下图对比了 Quora 当前界面以及重构的高保真模型图。

图1为浏览功能界面的前后对比

图2为搜索结果界面的前后对比

Process 过程：

双钻石模型可以帮助开发者更好地了解用户需求，并寻找解决方案。其中，第一块钻石代表“发现问题”以及“用户调查”，第二块钻石则代表“问题解决”。在该环节中，我采用了 Personas（虚拟角色）, User Story（用户故事） , Sketches（手绘素描）, Wireframe （线框图）以及 Prototype （原型）。

Persona: Alex

假设 Alex 是个有着远大抱负和满满工作日程的创业者。

“我的关注那些值得尊敬、有权威的对象。但有时候，我会在阅读浏览信息流的时候感到迷茫—找到高质量又靠谱的内容有点难。”

Persona 是一个非常好的工具。它能帮开发者建立用户同理心，确保产品能有效解决真实的用户需求。尽管 Quora 有着各种各样的 Persona （比如，聪明的内容制造者，孜孜不倦的学者），我还是将注意力放在视时间如命的创业者 Alex 身上。之所以选他，是因为他的行为以及需求与此前的 Usability Test 参与者们存在极大吻合，他的形象也更易同大多数用户产生共鸣。

Alex 的三大核心需求

1. 可靠的内容：他希望能轻松地从 Quora 上学到最佳的内容。
2. 快速获取内容： Alex 创业已经非常忙了。因此，每次从 Quora 上搜信息，他都希望能够快、准、狠。
3. 发现好内容：日程总是满满当当，所以每一次在 Quora 上偶然淘到好内容，对 Alex 来说都是一种享受。

在了解过 Alex 的三个核心需求后，我采用 User Story 将它们掰开揉碎。从最顶层抽象的 Epics ，逐渐分解成细小、可设计的碎片信息。上图中的每一条用户需求都是采访者给出的建议，按照最上一级的 Epics 分类整理得出。

Framework: 将零散的用户需求同用户角色整合

在 Framework 中 ，按照用户角色（User’s Roles），目标/ 需求（Goals / Desires），以及好处（Desired Benefits），将用户需求再度整理。

画完 Framework 框架图后，User Story 就显得更加具体可操作了。值得注意的是，由于每一个故事都是合情合理并且真实存在的，我坚持在囊括全部细节后再将故事拆分，从而减少日后不必要的重复劳动。

Alex 可以是对问题质量要求严格的学者，惜时如金的创业者，也可以是获得授权的技术类用户--因为这些都是 Persona 中列举的特质。

Task Flow: Alex 如何使用 Quora

有了 User Story 后，使用 Task Flow 的原因有二：

• 将所有 User Story 的相互作用可视化。
• 考虑所有可能出现的问题、极端案例，以避免日后因失败版本而导致的损失。

Sketch: 让 Alex 的生活更易懂

明确了用户希望如何使用各种功能后，我开始在白板上描绘出不同的解决方式。根据需要优化的“浏览”和“搜索”功能，将方案逐一可视化。

注意：Sketch 的目的是为每一个需要优化的功能，提出尽可能多的方案。开发者需要给自己充足的空间创作，即使方案再天马行空，也不要过早地用批判的思维限制自我。

优选 Sketch

在画出的各种各样的解决方案后，总要选出一个最好的。建议使用 2 x 2 矩阵，以“影响力”和“操作易用性”为坐标，筛选最优解决方案。

注意：尽管通常情况下，直觉告诉我们，应该选择影响力最大、最易操作的解决方案。但有时候，选择更有挑战性的方案，对长远发展更为有利。

Wireframe 线框图

在制作高保真模型（Hi-Fidelity Mockup）之前，Wireframe 能够让人更加清晰得了解 Sketch。同时，比起精致完美的高保真模型，Wireframe 可以展示更多细节反馈。 下图为浏览功能的线框图：

下一步...

高保真模型（High-Fidelity Mockup）可以将死板的 Wireframe 生动起来，下一步便是制作可点击模型（Prototype ），从而进行后续的 Usability Test ，收集用户反馈，并继续设计优化。

[本文编译自： medium.com ]

AD: 微软创投加速器第五期正在招募 立即报名