《破茧成蝶》(3)——修炼用户体验设计师的技能2

我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

【文章摘要】本书由资深的一线师编写,书中融入了宝贵的职业经验和专业思考,对于师、、用户研究员等具有一定参考价值和借鉴意义;同时,本书也适用于、运营、开发等相关人员以及相关专业的学生阅读思考。

【相关推荐】

《破茧成蝶》(1) | 成为用户体验设计师的信念

《破茧成蝶》(2)——修炼用户体验设计师的技能1

1. 如何搞定信息分类

逻辑归类

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

卡片分类

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

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

80781-11df8e8514f7017c

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

导航的自我解释

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

80781-457888f87e067a58(1)

深广度平衡

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

80781-6a8c96bc0297bb30

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

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

3. 如何突出主要任务?

分解用户任务

以购买电影票为例

80781-ef62421bac982f89

组织合并相关任务

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

相似性引导

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

80781-b7f1a338aa5fd153

方向性引导

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

80781-6a81999e77645987(1) 80781-fe296df661016eee(1)

运动元素引导

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

80781-39d5a4e05e02740c(1)

向导控件

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

80781-6d4c8ed3fcb6e1b5

5. 如何简化复杂的操作

减少冗余步骤和干扰项

把复杂操作转移给系统

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

80781-922a058e7e5da5f8(1)

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

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

简要说明与信息结构

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

80781-0974d093721e74dd

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

80781-d8c943db0eddb1ee(1)

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

80781-77c714f8d45aecc0(1)

任务流程与页面流程

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

2.页面流程:比任务流程图更清晰、具体。通过页面流程图,不仅可以看到具体的页面,还可以看到用户如何通过操作,从一个页面跳转到另一个页面的完整过程。任务流程图是页面流程图的基础和依据。
线框图&交互说明
原型既包含静态的页面样式,也包含动态的操作效果。线框图代表静态的部分,而交互说明则代表动态的部分。

80781-785f4f7ae0e5f173(1)

80781-f6d9ec05ca0459eb

 

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

80781-dba1d8b11f3077ce

 

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

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

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

80781-676a90f8dfc6eb77

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

80781-81a115eec2f92d28

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

80781-5936c4b31349ef66(1)
80781-728a54c56bee7a0d

常见状态主要只针对某一个模块,经常遇到的一些状态。这些状态都需要在原型上表述出来。
比如一个普通的积分模块,一般会出现三种状态:未登录状态、登录后未签到状态。

80781-47b84ccbf73476c9

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

80781-ef409f9812797210

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

80781-4c82247f389c0015

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

80781-63418bd085161312

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

80781-8d30d526e782677c

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

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

80781-1e138775f011a78a(1)

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

80781-90931e600686028e(1)

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

 

 

随意打赏

提交建议
微信扫一扫,分享给好友吧。