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

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

作者: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

相关推荐

  • Axure RP 7.0软件安装 激活 教程 百度网盘

    点击上方蓝字关注免费领取百度网盘超级会员等部分软件没有贴详细教程和网盘链接,可以给公众号留言发信息,也可加微信:qihai-77当你需要的软件我们没有发布时,可以给我们留言或者加微信:qihai-77反馈哦链接:https://pan.baidu.com/s/1KZcsl-SaEcjPzwvdYQn1oA密码:ws5m有任何需要安装的软件或问题可咨询微信客服:qihai-77链接失效可在公众号留言某某链接失效 或联系微信客服:qihai...

    2018-03-30
  • 2018年用户体验趋势(一)

    2017年,我们见证了很多。在与全世界的189489位设计师策划并分享了1926条链接后,我们从行业内的所写、所说和所想中,预见了几个趋势。以下就是2018年用户体验的预期。#1UX的死亡和重生作为设计师,我们一直致力于能够参与早期的战略决策。如今,我们获得了一席之地,接下来要怎么做呢?APP关掉了新手体验怎么办?这有一份最好的实践清单;不确定网站适合哪种菜单?就用这个模板库吧;首页的标题不够吸引人?咱们来做做A/B测试...与此同时,...

    2018-02-28
  • 超实用!比较重要的设计方法论大整理

    @戴小维Saki :设计方法论,顾名思义是当设计师在进行设计活动时可从理论和方法上所提出的实际性意见。当进行不同设计需求时,可为设计师提供明确的步骤与框架。众所周知设计方案要做到有理有据,富有说服力,所以设计方法论也是设计师进行产品设计时的一大利器。虽然会在创新上有所限制,但却能为设计师在没有灵感时候,提供一个有依据的可重复操作流程,进行自己的设计思考,从而输出自己的设计方案。其实资深设计师基本都会形成一套自己的设计方法论。尤其在常常需要进行汇报提案时,这更是方案汇报时的重要方法。

    2017-11-06
  • QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

    2016年是一个H5满天飞的年代,如何在众多牛气的H5中脱颖而出,留住用户关注和让朋友圈永无休止的不停传播呢?这也是一枚骚气且不隐忍的运营设计师一直研究琢磨的课题。这里拿QQ音乐年终盘点H5为例来解析下我对H5的次元幻想。

    2017-05-07
  • 用户体验设计流程与文档编制指南

      文档编写有助于产品的概念形成、设计、创造和性能衡量。但是,编写文档的目的不应单单是为了产品维护。毕竟书面上的东西再多也没法跟真正的产品体验相提并论。 正如简约用户体验倡导者Jeff Gothelf在Smashin…

    2014-11-20
  • 用户体验升级:《部落冲突》VS《竞逐之国:毁灭时代》

    原文作者:Om Tandon‘用户体验设计’是电子游戏产品的关键组成部分之一,随着手游产业的发展和智能手机的普及,人们接触的手游越来越多,现有的手游体验对多数玩家来说已经不再陌生。为了在同类产品中建立优势,开发者需要不断实现创新,改进并突破这种体验,从而为用户创造新的价值。与上市时间较长的同类手游《部落冲突》相比,Space Ape的RTS新作《竞逐之国:毁灭时代》在用户体验方面实现了突破。我们将两者的‘首次用户体验’、‘编辑模式&基地...

    2018-03-09
  • Axure RP入门第五篇——全局变量实现不同窗口加载

    产品经理入门:Axure RP入门第五篇——全局变量实现不同窗口加载

    2018-03-04
  • Axure官方教程中文版第3课:组件与母版-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(3).MP4 新建一个文件 1、添加一个按钮并设置鼠标悬停交互样式 2、复制并对齐按钮 3、将按钮转化为母版 4、将母版应用于每一页 5、在母版中为每个…

    2015-01-25
  • 淘宝双12亲亲节:活动视觉分析(预热期)

    双12对比双11,最大的区别是双11更强调品牌的狂欢、而双12更强调年轻、有趣、活力。本文作者将为大家分析一些观点,仅供参考!亲,能包邮吗?亲,还能在便宜点吗?

    2017-05-14
  • 孟菲斯设计风:重回80年代,为网页注入迷人的设计风格

    复古一直在流行,这也是为什么过去许多设计趋势常常会沉寂若干年之后,又再次走到潮流的最前线。今天,我们要聊的是孟菲斯设计风(Memphis Design),这种设计风格充满了80年代的特征,明亮的色彩和多样的图形与线条充斥其间,它也是近年重归流行的设计风格之一。

    2017-05-12