读《破茧成蝶》笔记 — 用户体验设计

纸面原型的作用

? 避免过早陷入设计细节

? 在发散思维阶段，可快速表达创意（多个设计方案），无需考虑格式/规则

? 适合沟通、验证可行性阶段的表达

纸面原型需要表达什么？

? 框架、流程、基本功能和内容

? 可以忽略设计细节

读《破茧成蝶》笔记— 设计标准

7.1 什么是原型

原型是交互设计方案的清晰表达，也是项目开发的标准和依据。包含静态页面样式（线框图），也包含动态的操作效果（交互说明）。

设计师不应该完全按照需求文档做设计，而应该在考虑商业性、各种限制基础上，从用户角度出发，把需求文档“翻译”成设计目标（详见5.3.3小节）。很多设计师把精力花费在设计过程中，却忽略了最重要、最能体现自身价值的设计决策过程。

7.2 标准原型应包含什么内容

? 简要说明与信息结构：变更日志、版本说明、信息结构

? 任务流程与页面流程

? 线框图&交互说明

关于交互说明

有的设计师喜欢用动态效果代替交互说明，其实这种方式不太可取。一来，做动态效果比较费时间；二来，浏览原型的人需要逐一操作才能看到效果，容易遗漏。文字说明可以让团队成员清晰、快速的看到全部动态说明，更一目了然。但有些动态效果用文字或静态图片描述不直观，建议用交互说明+动态效果的组合。

交互说明主要有以下几种类型

? 限制：范围值、极限值

? 状态：默认状态、常见状态、特殊状态等

? 操作：常见操作、特殊操作、误操作、手势操作等

? 反馈：用户操作后得到的提示、跳转、动画等

? 跳转：原页面刷新/新页面打开、转场方式、界面不同位置的不同操作的跳转

? 动画：必要时制作一段动画展示给开发人员

总之，写交互说明主要记住2条：除静态页面外，还需考虑各种动态情况；除正常情况外，还需考虑特殊和错误情况。

7.3 你真的会画线框图吗？

? 通过明暗表达对比

? 不使用截图和颜色

? 合理的布局

? 遵守栅格规范

? 标记第一屏高度：建议第一屏高度600px

? 表达清楚UI逻辑：一般来说的优先级：操作＞链接＞文本，重要的操作用按钮表现

? 考虑视觉实现后的效果

? 了解视觉趋势

7.4 写交互说明的诀窍

? 尽量使用真实、符合逻辑的数据内容

? 不遗漏特殊状态的描述

? 避免过长的说明

? 避免流水账式的说明

? 制作动态效果