读书笔记之《绝密原型档案》

一本系统讲解原型设计的书。干货满满~ 虽然Axure学个几小时就能绘制低保真原型，但这只是基础工具的使用。原型不只是一堆线框那么简单，更是设计者思想的体现，是否细心、思维逻辑如何 等等。反正我是个画原型都会拉辅助线的人 (～￣▽￣)～

以下是读书摘录。

---

序

• 交互设计是在满足用户需求的基础上，让产品更好用、更易用的思想和方法。
• 了解用户目标，协助用户完成任务，帮助用户解决问题，是进行所有设计的前提。
• 一个好的设计需要满足“一目了然、简单自然”。
  一目了然：尽量让用户零成本地感知你的设计。例如，凳子看着就可以坐，椅子放那就可以靠，无需思考。
  简单自然：操作方式和交互流程符合用户的心智模型、使用习惯。
• 产品经理最重要的工作，是“让正确的事情持续下去”，而不是“完成高保真原型”或者“写一份无可挑剔的PRD”。

---

第四章

1. 完整的页面设计应该包含：内容设计与人机交互。
2. 设计页面原型的流程：

• 内容结构梳理：

  • 核心任务模块
  • 任务结果模块
  • 重要条件
  • 附带内容：个人中心、设置中心，放置一些不太常用但必然需要的杂物。

• 页面模块：

  • 一级页面（模块首页）
  • 衍生页面（向下衍生，平级衍生：如不同状态的一系列页面）

• 注意事项：

  • 先放置极为重要的信息
  • 完善每个页面的内容，向下填充细节，根据页面目的进行划分：展示页、列表页、正文页、功能页、辅助与特殊页面等。

3. 展示页

• 目的：提高信息被用户自然吸收的概率。自然吸收是在无意识的状态下被动学习。进入展示页的用户通常无明确目的。
• 用来“看”的，“看”的目的是吸收信息，然后信息被转化成情感并推动行动。
• 经常作为首页，或者重要模块的第一页，以及像个人空间这样需要渲染氛围的页面。
• 决定了产品的氛围，最直观表现了产品的设计风格，应该在视觉阶段被先提取出来作为设计范本。
• 围绕着“看”来设计：
  • 视线容易被焦点引导（图片或色彩都会成为焦点）。注意视觉焦点之间的节奏感，稳定的距离给用户安全感，如果中间间隔太长，用户就会在此时停止浏览，因为潜意识告诉他接下来没有更重要的内容了。
  • 如果你是近视眼，摘下眼镜看页面，你会更容易看到所有焦点。
• 如何选择内容：
  • 通常不会承载太多内容，如果要出现某个内容，它一定是极为重要的，必须慎重选择。
  • 当展示的核心是内容推送，设计的重点在如何排列与突出优质信息。手机屏幕局限性大，排列方式受限，尤其要注意突出重要信息。
  • 如果用户量不够，就不合适显示数据。
  • 按优先级进行选择：用户喜欢的（产品早期应该迎合用户喜好），主要任务的（促成用户完成任务），可以赚钱的（产品后期的要务是提高成交转化率）。
• 常见的展示页：
  产品首页/模块首页，个人资料，商品详情。

4. 列表页

   • 找寻的方法
     • 排序。按时间，按字母，按高关注度信息，按决策依据信息。
     • 分类，标签。分类是较为概括的商品属性，一般有一级二级分类。分类是可以被明确区分的品类。古典欧式和田园贵族不能算是分类，但可以算是标签。通常每个物品只有一个同级的品类，但可以有多个标签。
     • 筛选。用户使用筛选，是为了得到更加精细而准确的结果，所以把用户会考虑到的其他范围因素放到筛选内容中。
     • （在某一特定范围内，分类是对全部内容的区分，筛选是对部分内容的交叉。）
     • 搜索。如果产品有多个信息群，比如作者或作品，这是需要区分的。搜索的历史记录和近义词是辅助，因为用户可能记不清关键字。
   • 列表页的特点
     • 同类内容
     • 规则排序
     • 包含全部
   • 常见的列表页：
     联系人列表，核心内容列表，设置中心。

5. 功能页

• 目标：让用户准确、顺利、快速地完成任务。
• 应该注意：可控，拆分任务，时间，看到并操作，有且仅有两个角色（APP与用户）
• 常见的功能页：发布内容 注册登录 设置编辑

6. 欢迎页

• 内容：功能/服务介绍，气氛营造，操作手册

7. 过渡页

• 承前启后：产品打开（微信的月球），场景跳转，弱化突然跳转带来的不适感

8. 加载页

• 备用事件

• 跟踪进度，如进度条，让用户有个等待的心理准备

9. 沉浸式页面

10. 回答问题

• 目的：这个页面为了谁，为了什么

• 内容：这个页面有什么，有多少

• 模块：收纳了哪些内容（内容模块化）

• 数据：内容从哪儿来到哪儿去

• 运营：人的工作是谁做的，做多少

---

第五章

1. 菜单

• 如果符合逻辑和快捷有冲突，则取逻辑，舍快捷。

• 上部菜单

• 下部菜单（airbnb Android版）

• 左侧菜单：适用于功能单一但比较复杂的产品，不影响主页面的操作，可以随时添加快捷入口。通常用在早期还不确定的产品形态中，或像Uber这种功能单一、主界面承载较多信息的产品。要注意空间的前后关系（如Uber，QQ）。

• 右侧菜单：辅助菜单（airbnb iOS版）

• 融合菜单（QQ）

• “反馈建议”通常在设置中心里，但新产品刚上线时需要多收集用户反馈，于是可以在菜单里增加“反馈建议”的快捷入口。

2. 页面动态

• 左轻右重，左侧内容重要于右侧内容

• 覆盖移入、移出

• 左右平移

• 上下平移（知乎的答案翻页）

• 弹窗从上掉入屏幕中上位置，再往下掉出屏幕

3. 为人为错误设计

• 习惯。不要违背自然规律或用户经验，在设计先后顺序和左右位置时不要特立独行

• 提示。比如删除的时候。

• 反馈。让用户知道每个操作行为都能得到反馈。

• 反悔。

6. 为情绪设计

• 建立用户克服困难的成就感

• 放松状态能让人更好地处理信息

• 给用户较少的选择，可以让用户轻松抉择。

7. 手指行为

• 居中的长按钮方便左手右手都可以轻松操作
• iOS的最小操作区是44dp，Android的是48dp

---

第六章

1. 状态栏：沉浸式页面可隐藏
2. iOS导航栏的页面标题居中，Android的在左边
3. 移动端的重要按钮放在右边，与web相反。
   上下排列的则放在上面。
   重要按钮使用主色调，或焦点色。
4. 按钮点击状态：正常，按下，不可点击，按钮加载中
5. iOS按钮默认状态下不含边界，也不含背景图，可以自定义描边和背景图
6. 缓存：
   • 可清理的
   • 不可清理的
   • 自动清理（累计到某个容量或定时帮用户自动清理缓存，音频视频图画类软件通常同时保留下载功能和自动清理缓存，用户要保存某类文件可以使用下载，其他的会被清空）
7. 页面交互方式：
   • 菜单的进入与退出方式
   • 一级页面的进入与退出方式（菜单可直接点击到达的页面）
   • 子页面的进入与退出方式（除了菜单和一级页面之外，所有的衍生页面）
   • 模态视图的进入与退出方式（弹窗）
8. 转场方式：

图片来自书里“图6-45”

9. 原型包括：

• 修改记录
• 页面结构
• 全局说明
• 字符限制说明
• 核心任务流程（流程图，以界面的形式绘制跳转的前后关系）
• 核心外任务流程（登录注册，加好友）
• 页面与注释：
  • 按照页面模块进行划分。（进行开发时也应该先区分模块，再填充内容）
  • 罗列数据。
  • 操作。先描述操作的结果，设计师据此考虑操作的形式、过程、结果等具体的人机交互方法。
  • 规则。包括：页面的不同状态，内容的初始、正常、异常状态，列表的排序优先规则。
  • 可以把UI、程序员、运营等需要特别注意的地方标注出来。
  • 静态的注释若描述得不够清楚，可以做动效帮助理解。