《破茧成蝶》

阅读书籍

《破茧成蝶》

阅读时长：12H

理解难度：易

整体感想

主要说了产品经理要做的需求文档怎么写、交互设计师的具体每个设计步骤、贯穿整个设计的常见测试方法这3个方面，本文分4个模块：

(1)总的设计流程

(2)如何写需求文档（产品经理）

(3)如何设计线框图（交互设计师）

(4)检验、测试和更新

由于作者本身是交互设计师后来做的产品经理，所以整本书的侧重点还是在中间的(1)和(2)两个部分，关于视觉设计师的部分内容太琐碎，本文就不总结归纳了

1

总的设计流程

一、何为用户体验

(1)解决用户实际问题

(2)使问题变的更容易解决（增加易用性）

(3)给用户留下深刻印象，产生美好体验

二、设计流程

(1)需求分析（产品经理主导）

(2)设计规划（产品经理+设计师）

(3)设计实施（交互设计师+视觉设计师）

(4)项目跟进（软件工程师）

(5)成果检验（产品经理+设计师）

每个流程之间的具体关系，以及工作中的相关步骤

详细说明（1）

2

如何写需求文档（产品经理）

三、了解市场，安排时间

(1)竞品分析（对比代表性的同类产品，优势劣势）

(2)用户调研（问卷调查//用户访谈//信息采集）

(3)产品上线后：用户反馈

(4)产品上线后：产品数据（浏览痕迹/时长/顺序/点击）

可用软件（艾瑞资讯、百度指数、淘宝指数）

(5)确定项目启动时间和完成时间

四、产品定位

(1)产品定义（单一答案）—使用人群/主要功能/产品特色

(2)用户需求（多种选择）—目标用户/使用场景/用户目标

产品定义——确定的单一的、所有人必须遵守理解的

（必须能用一句话描述：设计一款给白领用的音质清晰、更新速度快的音乐播放器）

使用人群：白领（谁用）

主要功能：播放音乐（有什么用）

产品特色：音质清晰、更新速度快（比其他产品好在哪）

用户需求——头脑风暴后进行整理、筛选归纳

头脑风暴+整理

筛选+归纳

目标用户（选择一个——用户对公司的价值+潜在需求量）

使用场景（归纳全部）

用户目标（排除部分——目标用户+时间+成本+商业价值）

案例（2）

五、详细内容整理

(1)对用户目标进行优先级排序

(2)对用户需求进行详细说明

(3)提供整体信息结构

(4)建立文档修改审核记录表

优先级——通过用户调查、竞品分析、用户反馈、产品数据

详细说明——通过表格形式展现

信息结构——交互设计师参考

文档修改审核记录

案例（3）

3

如何设计线框图（交互设计师）

六、导航栏设计（我从哪里来，我在哪里，我能去哪里）

(1)整理分类

逻辑归类

卡片归类—分类者为与项目不相关人员

（信息少用开放式//信息多用封闭式）

专门软件：IBM、EZSort、CardZort、WebSort

(2)深广度平衡（广度小于7个，深度小于5个）

(3)具体设计（参考《用户体验要素》导航栏种类）

建立快捷通道很重要（比如淘宝购物车）

七、任务流程设计

(1)主要任务（购买到心仪产品）

(2)次要任务——对主要任务有帮助的，不宜过多

（浏览、选择、对比、收藏、加入购物车、充值）

筛选（确定优先级）（合并相关任务）

(3)规划任务展示区域（从左到右，自上而下）

次要任务——确定优先级（通过产品数据）

次要任务——合并相关任务

规划任务展示区——一级任务（主任务or重要次任务）

案例（4）

八、草图表现

(1)任务流程图

(2)页面流程图

(3)页面交互图

九、细节设计

(1)引导设计——增加用户完成任务的可用性

向导控件（最常用）

相似性引导（大小、色彩、形态、视觉元素）

方向性引导（视觉线）

运动元素引导（小动画）

(2)整体优化——增加用户使用中的易用性

减少步骤+干扰项（减少页面跳转+合适选项数目）

复杂操作转移给系统（如”我的位置“自动定位）

简化操作方式（省时原则）

优化操作过程（首选项//帮助//及时反馈//默认值）

(3)页面层次分明

”接近原则“+”差异原则“

重点信息”跳出来“（字体、色彩、背景色、留白）

次要信息”藏起来“

引导设计——向导控件

引导设计——相似性引导（红色的背景色）

引导设计——方向性引导

引导设计——运动元素引导（票会沿着虚线飞过去）

层次分明——次要信息”藏起来“

案例（5）

十、加入感性

(1)吸引无目标的用户

(2)捕获用户芳心

拟物化隐喻化贴心可控积极反馈

(3)加入有趣的互动和惊喜

捕获用户芳心——拟物化

捕获用户芳心——隐喻化

捕获用户芳心——贴心（防宠物吓人，电梯加入宠物按钮）

捕获用户芳心——可控（进度条）

案例（6）

十一、原型（线框图）

(1)分类（低保真///高保真）软件：Axure、Visio、快现

(2)内容

版本说明+更新日志

信息结构///任务流程///页面流程

交互说明（限制、状态、操作、反馈、跳转动画）

(3)要求

使用合逻辑的数据和内容

避免过长的流水账的交互说明（流程图，表格）

明暗对比表达重要程度

不用截图和颜色

遵守栅格规范，标注第一屏高度

了解最新UI风格

内容——信息结构///任务流程

要求——避免过长流水账的交互说明

一般情况下的交互说明

特殊情况下的交互说明

案例（7）

4

检验、测试和更新

十二、可用性测试（定性：观察用户使用产品，发现问题）

(1)测试步骤

5名代表性用户，考虑使用场景

给出使用目标（不给操作要求）

观察操作行为与现场反应

(2)分析结果

收集记录出现的问题，评估严重等级

优先级排序问题

优先级=【问题频数*4/总参与人数】+严重等级

整理结果并记录违反的可用性准则

可用性准则表格

严重等级表格

最终整合效果图

详细说明（1）

十三、A/B测试（定量：A方案与B方案的数据比较）

(1)内容（设定衡量标准）

PV、UV、点击量、转化率、二次返回率、下单数

(2)要求（A/B两个版本同时实验，单一变量）

十四、开发新版本可使用的检测方法

(1)灰度发布（新与旧版本的对比，与A/B测试类似）

(2)分析用户反馈（过滤整理）

用户反馈整理——分类、归纳提炼

案例（8）

原创欢迎分享，转载请注明出处

作者：赵昕哲

审核：赵昕哲

点小花花，让他们知道你“在看”我