《破茧成蝶》读书笔记——技能（1）

第四章　　设计流程

如何参与一个项目

需求阶段：需求分析

设计阶段：设计规划、设计实施

开发阶段：项目跟进

反馈阶段：成果检验

 

第五章　　需求分析

产品定位：产品的目标、范围、特征。

• 产品定义：用一句话概括某个产品。（使用人群、主要功能和产品特色）
• 用户需求：目标用户、使用场景和用户目标。（谁在什么环境下要解决什么问题）  注：关键是要把目标用户带回使用场景，只有在特定的场景下，用户的目标才会更加明确。
• 选择目标用户：选择哪种类型的目标用户，需要综合权衡用户对公司的价值以及潜在的需求量。优先考虑潜在用户量大和商业价值大（推广成本低）的用户。   注：目标用户得出后能帮助产品定位的得出。
• 确定产品定位并据此筛选需求：目标用户、主要功能、产品特色、使用场景、用户目标、关键词

需求来源：用户调研、竞品分析、用户反馈（上线后）、产品数据（上线后）等。

分析与筛选需求：

1. 筛掉明显不合理的需求。目前不可实现/不合常理、价值不大、无适合场景。
2. 挖掘用户目标。真正目的是什么？
3. 匹配产品定位。
4. 考虑项目资源。实现成本。
5. 定义优先级。商业价值/用户价值等。

了解需求文档

包含内容：

1. 文档修改与审核记录
2. 目录
3. 背景描述
4. 用户类型和特征
5. 项目时间安排
6. 信息结构：内容或页面的层级
7. 整体业务流程说明
8. 需求详细说明

专业的交互设计师产出的设计结果一般都会和需求文档提供的内容不太一样，这相当于在交互设计阶段对文档进行了迭代。

倾听用户的声音

首先要明确目标用户群。

寻找身边符合条件的目标用户，观察他们的使用行为，询问他们的使用感受、痛点等。

注：一般从使用场景、目标 及 我们希望他们如何使用我们的产品，以实现我们的商业价值？这些方面去考虑

别被用户牵着走

用户说的不一定是心中想的。他们的思考决策受到多种因素的影响。

没有表达自己的真实需求。eg:想吃馒头--->饿了，用户真实情况是饿了，而馒头不是他真正的需求。需要挖掘用户真实需求而不是照做。

不是目标用户。

用户意见不一定是专业意见。要重新审视用户意见的合理性。

如何对待用户意见

目标用户、使用场景、真实需求、产品定位、项目资源

设计师的逆袭

如果没有需求文档或文档不标准：做到心中有数，清楚需求文档要包含哪些内容。内容不全则要求产品经理补全。总结在项目中的问题，列出问题清单，一定要把每一个问题弄清楚。

如果需求文档不合格：重新回炉，通过需求分析的顺序确定设计目标。以设计目标为导向，散发出各种解决方案（功能、内容），再根据设计目标和项目资源决定优先级。

如何寻找设计目标：

• 观察用户使用习惯、找痛点。
• 对比竞品
• 了解用户反馈意见，提炼用户本质需求。

如何”抄袭“竞品

1. 截取全套竞品截图
2. 根据截图绘制流程图
3. 根据流程图倒退需求
4. 提炼设计目标，确定设计需求
5. 开始正常的设计过程

设计师要了解竞品和自己产品的区别，以及痛点。应该把自己当做新用户来体验产品，记录使用中的困难和疑惑，并解决他们

 

第六章　　设计规划

从需求到界面

信息的分类（网站导航）：

• 逻辑分类：使用人们在生活中熟悉的分类逻辑对内容进行组织
• 卡片分类（开放式、封闭式）：邀请用户“把类似的东西放在一起”。封闭式，将导航架构设计好，确定出导航的个数和名称，在将属于这些类目的卡片分发给用户，让用户根据自己的期望，把卡片归类在不同的导航分类下。（封闭式便于掌控）

好的导航具备以下特征：

• 导航的自我解释。让用户清楚地认识到信息结构和自己所处的位置。（在哪？从哪来？能去哪？）
• 深广度平衡。每多一次点击操作都会流失掉一批用户（深度过深）。广度<=7，深度<=3。
• 用户所需信息与商业推广信息的平衡。广告要尽量减少对用户的干扰，可以在用户选择的内容附近默默地出现相关的推广，推广信息更接近用户目标，也更容易被用户所接受。（放置的位置明显，颜色弱于用户所需信息；放置的位置偏僻，颜色强于用户信息）
  
• 为重要功能和常用功能设置快捷入口。eg:淘宝购物车，它原本属于“我的淘宝”，但用户在使用时，并不会考虑到产品逻辑，只希望看到自己想要的功能，所以视觉上两者是平级关系。所以，在必要的情况下，为了突出重要功能，应用于打破逻辑关系。But，快捷入口不能太多，产品会变混乱，用户会感到迷茫。

主要任务与次要任务（网站内容）：

　　主要任务是网站的目的，比如淘宝，目的是让人买东西，主要任务是购买下单这个动作，之前的浏览、收藏、加入购物车等任何动作都是为这个动作做辅助的，因此都属于次要任务，次要任务是为完成主要任务而存在的，所以，应该尽量减少次要任务。

任务设计（网站内容）：

　　首先设计主线，根据用户的期望和目标，把功能点以正确的次序组织起来（绘制任务流程图）。再设计支线，看是否能对用户完成主要行动流产生必要的帮助（支线越少，复杂度越低，越有助于用户迅速完成任务）。

　　步奏：任务流程图 ---> 页面流程图 ---> 页面交互。

如何突出主要任务：

• 分解用户任务。从用户行为出发，详细描述用户使用过程，将用户任务分解为具体的行为操作。
• 排列用户优先级。通过使用人数、使用频率和重要程度这三个维度来排布。优先级是在页面的重要程度。
• 组织合并相关任务。次序相同、操作类似、界面类似的任务组合起来，合并为同一组模块展示在用户面前。在同一页面中，不同级别的任务要有不同的展现形式（主次分明）。注：子任务以不同的组合形式展示在用户面前的效果是不同的，要特别注意用户平时的使用习惯，比如电影买票，选电影的时候，用户比较喜欢看打分、评价信息等等，这些可以组合在一起，都是有助于用户选片下单的内容。

如何引导用户完成任务：

• 相似性引导。大小、色彩、形态、视觉元素等因素相似，则这些相似的因素可以引导用户的视觉，进而引导用户操作。
• 方向性引导。指示性箭头、清晰的视觉纵线（eg:全部元素左对齐）。
• 运动元素引导。eg:虚线运动轨迹。
• 向导控件。常用于界面切换、跳转，用来引导用户完成多步操作。

设计友好而易用的界面

简化复杂的操作：

• 减少冗余步骤和干扰项。多一次的页面跳转，意味着多一次的注意力转移。提供多个选择项，看似选择多了，但超过一定界限，反而会造成负担。
• 将复杂的操作转移给系统。让我们的机器变得更智能。
• 简化操作方式。Windows 与 Mac OS安装应用的对比。
• 优化操作过程。操作过程中得不到反馈，比操作冗余更可怕。提供合适首选项、适时帮助、及时反馈、提供合理默认值等。 注：以前老式网站填写信息，表单信息中只要任何一项出错，都会让你重新填写，很崩溃......

信息量太大，页面怎么摆：

　　用户不会花很多精力来阅读，只会扫一下页面，来寻找吸引他的内容。

• 让页面层次不言而喻。
  • 逻辑相关的在视觉上分为一组。
  • 内容或重要程度不同的在视觉上体现出差异。利用间距、差异化来区分模块。
  • 逻辑上有包含关系的在视觉上进行嵌套。利用字号、字体、颜色这些视觉语言，减轻用户的理解压力。
• 让重点信息跳出来。字体加粗、颜色对比、背景色等，来做强调。
• 将次要信息隐藏起来。为不影响新手和中间用户的使用，可以将一些不常用的功能做隐藏。比如导航栏上的“更多”，做成“列表页”，方便用户快速浏览。

理性的规划 VS 感性的界面：

　　印象是第一位的，对于设计师来说，应该理性规划网站层级和逻辑，又要通过感性的界面来吸引用户。

• 以人为本的界面设计。如何吸引用户？了解用户需求、保证页面逻辑正确、符合用户心理模型。比如淘宝的收藏夹和购物车，看似功能需求很类似，但考虑到用户的心理需求，收藏夹是不急于购买的，购物车是急于购买的，所以，收藏夹要突出物品信息（图片、评论、人气等），购物车应简洁，不过多干扰用户，方便用户快速下单。
• 帮助用户找到想要的东西。信息组织与分类，让有目标的用户快速找到（搜索框），不明确的用户逐渐明确目标（网站类目），毫无目的的用户在浏览中激发需求（浏览页面）。
• 吸引无目标用户。吸引用户注册并成为活跃用户，有时候需要牺牲掉一下逻辑性。例如：知乎登陆页面，下方展示了热门话题来吸引用户。
• 符合用户心理模型。避免枯燥的逻辑直接展示给用户，可以用图片、动画、颜色等方式来展示逻辑，比如：天气的稳定越高，背景红色块越鲜明。要平衡好用户情感和界面逻辑的关系。

捕获用户的芳心

来自真实世界的灵感：

• 拟物化的视觉。从形态、色彩、肌理材质、环境光照等方面，模拟现实中的物体，让信息与功能更加便于识别和理解。
• 隐喻化的操作。隐喻对体验的影响：当应用中的可视化对象和操作与现实世界中的对象和操作类似时，用户就能快速领会如何使用它。

贴心的设计：

• 可控的感受。界面需预先提供提示，向用户透露即将发生的信息，让用户建立预期。
• 积极的反馈。新手用户需要积极的鼓励，可以在用户完成任务后给予一定的奖励，激发用户继续使用的兴趣。
• 贴心的提醒。用户在使用产品时的疏忽和遗漏，给予提示，可增强好感度。eg：在登陆框前显示头像；给予是否已经注册的提示等。

调用用户的情感：

• 互动的乐趣。让用户知道自己的动态是有反馈的，有参与感和被尊重感。
• 惊喜的力量。没什么实际用处，但是用户偶然间发现后，会增添一份特殊的喜悦和乐趣。
• 情境的烘托。为产品设计一个故事情节，通过视觉、动画和音效的烘托，把用户带入一个情境中。