《破茧成蝶》读书笔记

交互设计师的主要任务

通过分析用户心理模型，设计任务流程，把交互逻辑也就是功能和需求，以用户能理解的方式传达给yoghurt，最终实现公司需求和用户需求的最佳平衡。

交互设计师的价值

首先，设计成果会直接带来用户价值--用户直接感受到优秀设计产品带来的美观和便捷，以及商业价值--得到用户喜爱的产品必然给公司带来利润。此外，交互设计师在项目推进中也起到了重要的作用：通过专业能力节省PM反复修改原型的时间、可用性测试的时间、UI改稿的时间、整个项目不断迭代的时间；与PM共同推进UI, 前端、开发的产出质量；使设计统一化、标准化，提高设计效率；清晰的产品流程让项目更合理、进展顺利。交互设计师还会带来品牌价值，统一的设计理念和风格有助于增加品牌的辨识度。

和PM抢位的需求分析

术业有专攻，PM重大方向—商业目标、功能业务；UE重逻辑、细节、情感、创意、界面。所以需求分析需要两方共同完成。

产品定位：产品定义+用户需求。

产品定义=使用人群+主要功能+产品特色，用户需求=用户+使用场景+用户目标。

所以，产品的定位就是使用人群、主要功能、产品特色、目标用户、使用场景和用户目标的结合，其中，核心要素是主要功能、产品特色、目标用户，而以目标用户最为重要。因为一切都是为目标人群服务，需求可以根据不同时期的目标用户做出改变，使产品做新、做强。应优先考虑商业价值大、潜在用户多的目标群体。

当然，产品定位不是决定需求分析的唯一因素，还需考虑合理性、资源分配等问题。

需求分析的采集方法有用户调研、竞品分析、上线后的用户反馈和产品数据等。

需求文档包含：版本记录；背景描述；用户类型和特征；信息结构；业务流程；每一条需求的详细说明，如功能、处理流程等。

理想的需分：产品定位—需求采集—需求文档；

现实中PM没有按流程工作，需分：需求文档—设计目标—设计需求。需要UE再次做用户调研，确立设计目标。

利用竞品做需分：竞品分析—设计目标—设计需求。尝试所有操作，截取全套竞品图；根据截图绘制流程图，倒退出需求，再进行设计。

从需求到设计草图：需要信息的组织与任务的设定（即信息架构和流程图）

对信息进行分类：导航设计，解决我是谁、我从哪儿来、我要做什么的问题。应有广度和深度的平衡。广度有利于用户发现信息，一般不超过7项；深度要尽量少，每次点击都会流失用户。

好的导航系统为重要和常用功能设置快捷入口，例如淘宝中的购物车、更多里的回到首页等。

怎样从需求文档中组织出任务流程：

区分主要任务和次要任务，设计主线，根据是否对完成主线有帮助设计支线。支线要尽量少，这样复杂度低，用户更容易完成任务。

有了流程图，再画页面流程图（方块信息），然后完成页面交互图，即线框图（具体大小位置的模块）。

突出主要任务：首先分解任务，每个子任务可能对于一个功能或页面；根据使用人数、频率、重要程度排列任务优先级，将次序相近、界面相似的任务组合成一个界面。这样，在同一界面中，根据优先级按照从左上到右下的顺序展现任务。

引导用户完成任务：

通过色彩、大小、形状、视觉的相似引导；对齐使视线自动向下；向导控件。这与“对齐”、“重复”、“亲密性”的设计原则是类似的。

优化操作流程：提供合适的首选项、帮助提示、及时反馈、默认值。

突出重点信息：差异化模块；次要信息通过暗示或多层点击隐藏起来。

总结：有了设计需求后需要确定产品的操作流程，一方面构建导航系统，一方面设计每个界面的任务布局和跳转，引导用户完成任务。这样就可以根据页面流程图创建线框图了。

原型与线框图

原型是产品功能和内容的示意图，既包含静态的页面样式—线框图，又包含动态的操作效果--交互说明。

标准的原型应包含：

变更日志；版本说明；信息结构；任务流程+页面流程（上一部分）；线框图+交互说明。

不推荐动态效果的原型：花费时间长；使用者需要注意操作，可能有所遗漏。

交互说明类型有：动态范围，如用户名或密码如何显示，长度控制等；状态，包括默认状态、常见状态、特殊状态；操作和反馈，如翻页操作后页面跳转，误操作后系统提示等。

线框图设计要注意：

通过明暗表达层次。深浅未必和重要性一致，但要达到直观的效果，必要时用单一彩色凸显重要之处。

不用图片和多种颜色，图片以空白代替。

遵守栅格规范。便于与视觉设计保持统一性。

标记第一屏的高度。第一屏可以设为600像素。

标记内容优先级。按钮>链接>文本等。

遵循视觉趋势，如扁平化、简约风格。

交互说明技巧：

使用真实、符合逻辑的数据和文字；

考虑规则和特殊情况的描述，如勾选后状态，显示个数限制等，虽然这在开发代码里都应详细考虑到，但从设计的角度就应先入为主，尽可能多地把逻辑都覆盖一遍。

说明可用表格或流程图罗列，如多种状态—悬停、点击时、点击后的状态显示。还可用if-else-case语句解释。

对重复出现的模块，可以独立出来，在每个出现的地方留空位和模块名称即可。

设计规范

包含交互、色彩、图标、控件等的规范。先制定交互规范—什么情况下的什么状态，在此基础上制定视觉规范--什么状态显示成什么。设计规范一般在大产品、组件单一多复用、时间充裕的情况下完成。

设计师的项目跟进工作

设计评审：目的是为了检验设计方案是否达到最初目标，从各项目人员角度及时发现设计的风险，及时更正，并让大家达成共识。

评审前，考虑所有可能的方案，即使最后只拿出一种设计方案。准备设计数据，包括用户调研结果、研究数据、竞品分析、设计目标等。只邀请必要的人，最好提前与主要负责人达成意见一致。

评审中，掌握会议的主导权。明确产品定位或设计目标——展示参考资料——展示设计意图和方案——收集意见、引导讨论。特别注意，不要让主题偏离，及时制止对细节的持续讨论。

评审后，收集有效的反馈，整理最终设计方案告知成员。

UI设计跟进：视觉稿需要做到与交互稿传达的信息一致，重点突出，层次分明；两者差别是否会引起歧义；同时也要抓人眼球。

开发阶段跟进：与前端工程师沟通，看是否理解到位；规范设计稿，与前端采用相同标准，便于整理。

做设计走查：对产品demo进行交互操作、反馈、各种状态、默认值、极限值的走查。也可配合测试写用例，确保上线的产品与设计稿一致。

设计检验方法

上线前采用可用性测试—定性分析（样本少、可以了解用户想法）、A/B测试—定量分析（结果客观、不能得知原因）；上线后收集用户反馈、产品数据。

可用性测试：通过观察用户使用，发现设计存在的问题。这里建议招募5名与试者。

测试任务应为：给出目标而非操作描述；选择最频繁、最重要的任务；符合正常操作流程。

测试过程中注意：不要引导，多做观察和记录，用户遇到困难是多鼓励少帮助；重视用户细微情绪反应；相信他们的行动胜于语言；考虑场景多样性，比如移动端就适合在真实环境中（街头等）测试。

测试后分析：统计问题频率、严重级别、违反的可用性规则——Nelson启发式评估十大准则：可视性；自由度；符合惯例；一致性；可识别性；高效性；精简信息；防错性；容错性；提供帮助。

A/B测试：设定衡量标准，PV, UV, 转化率等。对同一用户呈现相同界面；两个版本同时测试；单一变量。

这里提到的交互流程：竞品分析 — 低保真交互 — 可用性测试 — 交互评审 — 高保真交互。