《破茧成蝶》读书笔记——修炼用户体验设计师的技能

【文章摘要】本篇为我的部分读书笔记,所以看到什么,觉得还比较有用就顺便写了下来,内容并不一定适合所有人。

作者:iamzhaowr 完整读书笔记请去我的简书页面阅读

关于《破茧成蝶》 推荐京东购买:链接

本书由资深的一线用户体验设计师编写,书中融入了宝贵的职业经验和专业思考,对于交互设计师、视觉设计师、用户研究员等具有一定参考价值和借鉴意义;同时,本书也适用于产品经理、运营、开发等用户体验相关人员以及相关专业的学生阅读思考。——来自内容简介

1. 设计师如何参与一个具体的项目

需求分析,了解需求,清楚我们要做一个什么样的产品,目标用户是谁,要达到什么效果,具体有什么内容、功能…

然后我们开始进行设计,在草图上梳理信息架构,设计任务流程,设计界面,确认没有问题后再用专业的软件工具把设计方案呈现出来。

经过设计评审后,设计师要去跟进后续的视觉、前端、开发、测试环节,确保最后的产出物和自己的设计方案一致。

1460087647-5149-04

2. 在项目中设计师容易遇到的问题

  • 团队成员的专业能力
  • 外界因素的影响
  • 团队凝聚力

3. 和产品经理一起做需求分析

由于产品经理背负各种产品绩效指标,压力大,这种情况下难以避免的要站在商业/项目角度考虑问题,很难再去心平气和的考虑用户的需求。这样就难以做到商业价值与用户需求的平衡。产品经理应该在初始阶段和设计师一起合作,通过融合各自的专业方法,共同完成需求分析,这样更好的平衡商业价值和用户需求,同时也保证最好的产品产出不会过于偏离产品方向。

4. 产品定位是什么

产品定位是产品设计的方向,也是需求文档和设计产出的判断标准。

1460087647-2283-04

5. 产品定义

使用人群是你明确产品主要为谁服务,所有的功能、内容、设计风格的设定都围绕这类人群来进行;主要功能为你划定了功能的范围和限制,比如你是要做音乐类的,还是做修图方面的;产品特色使你区别于同类竞争者,让你在同类产品中脱颖而出,更具竞争力。

6. 用户需求

用户需求主要包括目标用户、使用场景和用户目标。一条用户需求可看作是“目标用户”在“合理场景下”的“用户目标”,其实就是解决“谁”在“什么环境下”想要“解决什么问题”。用户需求其实就是一个个生动的故事,告诉我们用户的真实情况。我们需要了解这些故事,帮助用户解决问题,并在这个过程中让他们感到愉快。

7. 用户需求从哪来?

在实际项目中,采集需求的主要方式有用户调研、竞品分析、用户反馈(上线后)、产品数据(上线后)等。

用户调研:通过问卷调查、用户访谈、信息采集等手段来挖掘需求的方式。

竞品分析:找到有代表性的同类产品,对比产品之间的优势、劣势,从而发现产品的突破口。

产品数据:产品上线后,就可以收集到产品的相关数据。比如常规的访问浏览数据、浏览痕迹、点击痕迹、在每个页面上的浏览时长、整体的浏览顺序,等等。

8. 如何分析与筛选需求?

1460087651-8111-04

9. 需求的产生

  • 确定产品定位
  • 通过不同的方式来收集大量的需求
  • 识别需求的有效性和真实性
  • 根产品定位和项目资源情况筛选
  • 提炼出产品需求
  • 定义需求优先级
  • 从产品定位到需求优先级

1460087650-8277-04

10. 需求文档应包含什么内容?

背景描述:为什么要做这个产品/模块、市场行情、业务目标、产品定位等。

用户类型和特征:简单的描述目标用户情况或现有使用人群的情况。

项目时间安排:何时启动,何时完成等。

信息结构:这里可简单理解为内容或页面的层级,如图5-10所示。可以由设计师和产品经理配合完成,也可由产品经理独立完成,设计师做参考用。

1460087650-2674-04

整体业务流程说明:对于涉及操作较多的产品/功能,需要业务流程图,帮助设计师和项目成员理解具体的业务逻辑。比如一个广告投放系统,当广告排期被占用时,用户是否可以接受相关位置;如不接受,系统如何处理账户余额,等等。,如图5-11所示。

1460087650-3141-04

需求详细说明:每一条需求的详细说明。一个文档里会有若干条这样的说明,如图5-12所示。

1460087650-8584-04

11. 如何对待用户的意见

1460087650-6343-04

12. 如何搞定信息分类

  • 逻辑归类

我们可以将物品按照生活中常见的用途、品类、形状、颜色、材料、品牌等进行分类,通过数字、字母、时间等进行标识。

  • 卡片分类

1) . 开放式:开放式的卡片分类会给用户足够的自由度来进行信息归类。设计师将完全打乱的卡片分发给用户,用户可以完全自由的决定把卡片分为几组、每组有多少张卡片。

2). 封闭式:设计师首先会将导航的架构设计好,确定出导航的个数和名称,再将属于这些类目的卡片分发给用户,让用户根据自己的期望,把卡片归类在不同的导航分类下。如果有些卡片用户不知道该将它分到哪个类目下,可以将它拿出来,所有卡片不一定要全部完成,封闭式的分类更利于掌控,可以用户对信息设计的结果进行验证的阶段。

1460087653-2336-04

13. 如何设计一个好的导航?

  • 导航的自我解释

不明确的导航和位置信息可能导致用户迷失方向,成功的导航设计可以自我解释,让用户在导航系统中清楚地认识到信息结构和自己所处的位置。

1460087653-3591-04

  • 深广度平衡

相比于鼠标的不停点击,眼睛在页面上扫视的成本要低很多,所以比起深层次的导航结构,广度当行更利于用户发现信息。但如果广度超出用户可以接受的范围,人们必须一次阅读很多选项才能在其中进行选择,也会大大增加用户的选择负担。一般来讲,超过7个选项时,用户就很难记住了,一次性展示过多选项会令用户患上“选择恐惧症”,很难从中挑出哪一项才是自己想要的。

  • 用户所需信息与商业推广信息的平衡

在不同产品页面,为用户推荐符合其目标的信息,可以起到事半功倍的作用。

1460087653-9022-04

  • 为重要功能和常用功能设置快捷入口

为重要功能和常用功能设置快捷入口,就像是在原有产品架构的基础上搭建“快捷通道”。用户可以一步步顺着产品的逻辑来寻找所需功能,也可以通过快捷入口,按照自己的行为习惯,快速找到所需功能。
但设置快捷入口也是一个需要权衡的过程。必要的“快捷通道”可以提高使用效率,但如果快捷入口过多,产品会变得混乱复杂。同一个功能入口太多,不仅不会提升使用效率, 反而会使用户感到迷茫。

14. 如何突出主要任务?

  • 分解用户任务

以购买电影票为例

1460087653-6535-04

  • 组织合并相关任务

15. 如何引导用户完成任务

  • 相似性引导

所谓相似性引导就是,如果大小、色彩、形态、视觉元素等原因想死,那么这些想死的因素可以牵引着用户的视觉,引导用户操作。

1460087654-1689-04

  • 方向性引导

对于操作步骤较多的任务,可以利用具有指向性的箭头,进行方向性引导。

1460087653-7208-04

1460087657-6299-04

  • 运动元素引导

运动元素引导,就像是用户的小向导,带领用户找到下一步该往哪走。

1460087657-9312-04

  • 向导控件

向导控件是一种常用的交互方式,用来引导用户完成多补操作。向导控件就像神奇的巫师,可以在陌生的页面环境中,为用户指引路线。同时还可以告诉用户,要完成任务一共需要多少步骤,你现在所处的步骤是哪个,还有多少步可以完成任务。

1460087657-7658-04

16. 如何简化复杂的操作

  • 减少冗余步骤和干扰项
  • 把复杂操作转移给系统

在google map中,如果用户系那个查询路线,就一定要输入起点和终点,这是无法省略的过程,但是在查询路线时,google map会利用定位功能自动将起点定位为“我的位置”,减少用户的操作。

1460087657-4913-04

其实将复杂转移给系统,就是让机器便得更智能。这是科技发展以来人们一直在做的一件事。无论是记录用户名和密码、自动识别用户IP所在的城市、自动补全等常见的交互设计细节。都是通过增加工程师的工作量,将复杂转移给系统的形式,来让软件变得更简单好用,让数以万计的用户减少额外的付出。

  • 简化操作方式
  • 优化操作过程

17. 标准的原型应该包含什么内容

  • 简要说明与信息结构

1).变更日志:日期、变更内容、变更原因、备注等内容

1460087657-7577-04

  • 更新日志实例

2).版本说明:版本号、日期、更改内容

1460087658-3751-04

 

3).信息结构:产品内容都有什么,它们是如何组织起来的,页面层级又是如何分布的,等等。这些信息结构中都有体现。

1460087660-4687-04

任务流程与页面流程

1).任务流程:是指用户使用产品时,它的每一步操作会遇到什么结果、系统会如何反馈,等等。

2).页面流程:比任务流程图更清晰、具体。通过页面流程图,不仅可以看到具体的页面,还可以看到用户如何通过操作,从一个页面跳转到另一个页面的完整过程。任务流程图是页面流程图的基础和依据。

线框图&交互说明

原型既包含静态的页面样式,也包含动态的操作效果。线框图代表静态的部分,而交互说明则代表动态的部分。

1460087660-2632-04

1460087660-5218-04

交互说明是原型中不可缺少的内容。逻辑严密、内容详细的交互说明会让原形看起来更专业。例如,文字过多怎么显示?操作瞬间会出现什么提示?点击了页面上某部分内容,会出现什么反馈?跳转到哪个页面?……这些都需要设计,并且需要详细的说明。

1460087661-1928-04

有的设计师喜欢用动态效果来代替交互说明,其实这种方式是不太可取的,以来,做动态效果比较浪费时间;二来,浏览原型的人需要逐一操作才能看见效果,一旦有某个地方没有操作到,就可能会遗漏。文字说明可以让团队成员清晰、快速地看到全部的动态说明,更一目了然。但有些动态效果用文字或静态图片不直观,因此建议采用交互说明与动态效果相配合的方式。

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

限制:包含范围值、极限值等。

范围值主要指数据的取值范围。比如,当你的界面上出现了下拉菜单、筛选按钮、滑动等控件时,你必须标注清楚它们的选择范围,否则开发人员就不清楚该如何设定。

1460087660-6422-04

极限值主要指数据的显示限制,比如,最多应该显示多少字数,超过时如何显示,是否折行等。

1460087661-7804-04

状态:包含默认状态、常见状态、特殊状态等

默认状态主要指默认显示的文字、数据、选项等。这些内容需要注明,否则开发人员可能难以意识到这是用户填完的效果,还有就是默认的。

1460087664-7194-041460087664-5769-04

常见状态主要只针对某一个模块,经常遇到的一些状态。这些状态都需要在原型上表述出来。

比如一个普通的积分模块,一般会出现三种状态:未登录状态、登录后未签到状态。

1460087665-9199-04

特殊状态一般指非正常情况下的样式、文案、说明等。

1460087666-4721-04

操作:包含常见操作、特殊操作、误操作、手势操作。

常见操作主要指正常操作时得到的反馈状态。比如一个普通的翻页控件,在经过不同操作后会立即出现如下的状态。

1460087664-6510-04

特殊操作主要指一些极端情况下的操作。

1460087664-3277-04

反馈:用户操作后得到的反馈动作,包含提示、跳转、动画等。提示主要指操作后,系统反馈给用户的文字说明等。

1460087666-8715-04

天转主要指点击某个链接后,页面跳转到哪里。设计师需要在原型上著名跳转时是“原页面刷新”还是“新页面打开”。

如果是做手机应用的话,需要注明跳转时的专场方式。

1460087667-5255-04

此外,还需要注明在界面的不同位置以不同手势操作时,会跳转到哪里。

1460087666-3975-04

总而言之,写交互说明时主要应记住2条内容:除静态页面外,还需考虑各种动态情况;除正常情况外,还需考虑特殊和错误情况。

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/13955/

(0)
iouedioued
上一篇 2016-04-08 11:26
下一篇 2016-04-08 13:02

相关推荐

  • 从用户体验设计的角度,学习服务设计的思考方式和闪光点

    初学服务设计,读了一本好书——《This is Service Design Thinking: Basics, Tools, Cases》(by Marc Stickdorn,Jakob Schneider),推荐并笔记。而本文基本描述了我对服务设计的初步理解,以及服务设计给我带来的在用户体验设计领域的灵感触发。“服务设计是有效的计划和组织一项服务中所涉及的人、基础设施、通信交流以及物料等相关因素,从而提高用户体验和服务质量的设计活动。…… 服务设计将人与其他诸如沟通、环境、行为、物料等相互融合,并将以人为本的理念贯穿于始终。…… 简单来说,服务设计是一种设计思维方式 ,为人与人一起创造与改善服务体验。…… 服务设计强调合作以使得共同创造成为可能,让服务变得更加有用,可用,高效,有效和被需要 ,是全新的、整体性强、多学科交融的综合领域。…… 服务设计的关键是“用户为先 + 追踪体验流程 + 涉及所有接触点 + 致力于打造完美的用户体验”。”——百度百科“When you have two coffee shops right next to each other, and each sells the exact same coffee at the exact same price, service design is what makes you walk into one and not the other.” – 31 volts service design, 2008“However, creativity is not so much a gift as a process of listening to the ideas “flowing” through one’s head and being prepared to articulate them.”

    2017-05-07
  • 交互设计是一个什么样的专业? | 大咖说

    近些年来,交互设计这个词越来越多的出现在我们的生活中,是一个仿佛到处都有,但却又“看不见,摸不着”的东西。所以到底什么是交互设计?百度解释如下交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中...

    2018-02-14
  • 一对一提问!设计师应该如何切入产品设计工作?

    呆呆:经常会收到一些小伙伴提的问题,大部分也都不怎么去回复,除了个别比较值得讨论的我会仔细解答一下。所以就想把那些好问题拿出来,不是对一个人解答,而是与大家一起做一个讨论。

    2017-08-29
  • 交互设计师的60日计划之第八天

    今天仍然在处理上周五的需求。参与讨论的人越多,战线就拖得越长。不过讨论虽然效率低,却能出现各种各样的想法和方案,不靠谱的,靠谱的。 2015/08/04 与老大谈话所得题目起的有点大,不过这是今天老大和我讲的主…

    交互专题 2015-08-20
  • U+敏捷研发体系

    “研发是一项创造性的工作,卓有成效的研发需要优秀的研发团队来完成,优越的研发流程始终能够发现最佳的机遇,推出有竞争力的产品和服务,并以最快的速度把这些研发成果投入市场。”△ △ △ U+敏捷研发体系流程 △ △ △需求分析1研发体系中的第一个环节,这一阶段要求需求分析人员针对待开发软件提供完整、清晰、具体的要求,确定软件必须实现哪些任务。其中包含的敏捷建模,要求需求分析人员对现实问题的抽象想法构画出草图,以规避需求的不合理等问题。原型设...

    2018-03-30
  • 如何以正确的姿势完成虚拟世界的互动?

    如果你还是个VR交互的小白;如果你已经意识到三维世界交互的不同,却还没有突破的方法;这篇文章,值得收藏、细读

    2017-05-15
  • 这个是很多人找交互设计文档的写作方法和模板

    文章来源与腾讯CDC 作者是yoyo 前言:最近准备做一个交互设计文档的分享,但是一直没有时间整理好keynote,这里先分享一个设计文档模版,以及模版中每个元素的使用理由与方法。之后的设计文档分享中,会加入更多的…

    2015-08-11
  • 我对移动记账 App 的设计探索

    现代智能手机给我们提供了非常多丰富实用的功能,比如平时颇为在意金钱去向的我,就是一个 手机记账 App 的使用者,曾经尝试过各种记账 App,但好像都有那么一点不满意,于是我就想如果是我来设计这么一款 App 的话…

    2015-09-15
  • 收福利!5个不为人知但干货超多的交互设计公众号

    这两年随着自媒体时代到来,越来越多的设计师开始注重个人品牌运营,比如发作品到各大平台,总结项目经验,翻译国外文章等等。无论哪种方式,对提升国内设计学习氛围都大有裨益。

    2017-07-08
  • 【交互设计】在人工智能实验室做产品设计是怎样一种体验?

    ‍当你看到这行字时,我知道我已经成功把你“引诱”了过来——用“人工智能“这样一个令人“哇”的字眼。我猜,你是设计师?产品经理?”人工智能+设计师” 这个搭配正好戳中了你那满满好奇蠢蠢欲动的心。一年前误打误撞加入了…

    2017-08-01