《破茧成蝶----用户体验设计师的成长之路》之阅后笔记

1.成为用户体验设计师的信念

文章开头给我们介绍了艺术和设计之间的关系,其实,在现实生后中,大家都会以为设计师就是搞艺术的,其实不然,比方说,我们去看画展,看到的作品我们很多时候是无法理解画家的用意和想表达的内容,所以我们可以理所当然的认为那就是艺术;而当我们看见设计师在草图一遍又一遍的画着不同的页面流程,用线框简单的表达流程并且附上交互说明,这种看起来不那么美观且布满了各种注释,再由视觉设计师用专业的技能去呈现好看的界面,最终就是我们在手机和电脑屏幕上所看到的东西。

所以,简单的说,艺术是感性的,设计是理性的(当然,设计也包括感性),设计的目的之一是为了解决用户具体的问题和满足用户的需求。

1.1用户体验是什么?用户体验设计是什么?

“用户体验”顾名思义就是个人使用某个产品后的主观感受,而用户体验设计师就是为了提升用户体验而做设计,但是,用户体验是感性的,设计师又该如何做出满足用户主观感受并且可以解决问题的设计呢?

用户体验设计首先是需要解决用户最痛的痛点(某个实际的问题),其次是让问题变得容易解决(重点是有效的解决问题的过程),最后就是给用户留下深刻的印象(一次美好的体验过程)。

所以,作为用户体验设计师,首先应该是理性的分析用户需要解决痛点,其次,再用感性的方法去营造一个美好的用户体验。

1.2用户体验设计的特征

l严谨、理性、创意

l为特定的问题提供解决方案(包括特定的目标、人群、场景)

l不要让用户思考

l趣味横生(在能够解决问题的基础上,如果可以给你带来快乐,那一定是会让你印象深刻)

1.3怎样做到精益求精

l热爱生活、细心观察、勇于改变

l了解人,观察人

l理性的路(出现问题-为谁解决-如何解决-如何变得有趣)

l亲自使用、体验

l多听用户的反馈意见

l留心好的设计、在此基础上优化


2.用户体验相关的职位有哪些

l交互设计师:帮助用户高效地完成产品所设想的任务,同时在这个过程中,能让用户感觉到愉悦和不受打扰。

    l具体工作通过分析用户心理模型,设计任务流程、运用交互知识,把业务逻辑以用户能够理解方式表达给用户,最终实现产品战略(商业目的和设计目的的之间的平衡点)的过程。

    l产出物竞品分析文档,用户反馈整理,流程图,设计草图,设计原型

    l误区交互设计师的主要产出物是设计原型,线框图等偏具象化表现形式,所以很多人会误以为交互设计师就是画线框图,而忽略了背后的思考和方式。缺乏思考和方法,凭借个人爱好和感觉去做设计,实际上做的不是设计而是没有艺术价值的“艺术品”。对于设计师而言,最重要的就是解决问题的能力,原型只是设计的最后一步,用于向其他设计师和团队的人员沟通想法的的工具。交互设计师除了基本设计工作之外,还要有沟通、宣传、执行、跟进项目,确保最终结果与设计方案没有偏差。

l视觉设计师:平面设计师、原画设计师、推广设计师、界面设计师(UI设计师)等

    原画设计师:超强的手绘能力、作品充满艺术感

    平面设计师:要求能够很好的传达思想,作品有较强的感染力,也不乏充满艺术感和创意的作品。

    推广设计师(互联网产品的推广运营):作品能够突出重点、快速抓住眼球、内容直观,类似淘宝app的banner。

    界面设计师:具备一定的交互知识,有良好的审美观,作品能够很好的引导用户操作,且具有良好的美感。

    产出物:配合产品经理、交互设计师输出视觉产物。

l用户研究员:通过分析和研究,深入了解用户特征,用户行为习惯,从而为产品、运营

、设计决策等提供必要的方向和支持。

     具体工作:市场分析、竞品分析、创建persona、问卷调查、焦点小组、用户访谈、可用性测试等等。

     产出物:各种类型的用研数据报告,对报告进行深度解读,提供建议。

     面临问题:研究周期长,不了解产品背景以及相关的运营、设计知识、或本身思路比价局限。

2.1用户体验设计师的价值

l用户价值、商业价值

优秀的用户体验设计能够取悦用户并且创造很大的社会价值和商业价值

l项目价值

通过专业能力节省项目时间成本

跟进各个环节,保证产出物质量

促进统一化及标准化,提升设计效率

促使项目流程更加合理,更有规划

协助产品经理组织各个环节

l品牌价值

维护和突出公司的品牌形象


3.考察应聘者

l对用户体验具备浓厚的兴趣

l具备良好的素养

l具备强大的思维能力

l掌握专业技能


4.设计流程

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

l需求分析(拿回产品的主导权):需求分析--用户研究--需求沟通

l设计规划(从用户需求到设计草图):信息构架--用户任务--界面易用性--情感化设计--设计草图

l设计实施(产出规范的设计稿):交互原型--交互说明--设计规范

l项目跟进(保障设计效果的实现):设计评审--项目跟进

l成果检验(设计的优劣判断):产品数据--用户反馈--A/B测试--可用性测试


5.需求分析----拿回产品主导权

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

l产品经理考虑方向、功能、上线时间、商业目标、功能业务、撰写需求文档

l设计师重逻辑、细节、情感、创意、界面

所以,设计师要和产品经理在初始阶段合作,通过融合各自专业方法,共同完成需求分析。

5.2倾听用户的声音

5.3设计师的逆袭

搬到产品经理旁边,及时关注产品经理的动态,及时和他探讨。


6.设计规划---从需求到草图

需求---信息/任务---草图---界面

l根据需求来确定应该提供哪些必要信息给用户,然后对信息分门别类,有效的组织并且以导航的方式展现在界面上。

l根据需求来设计相应的任务、排列优先级

l对于复杂的任务,尽量简化操作

l对于信息量过大的页面,突出重点

6.1如何进行信息分类

l逻辑归类:我们可以使用人们在生活中熟悉的分类逻辑对内容进行组织(参考电子商务网站的信息分类:淘宝、京东、亚马逊等等)

l卡片分类:是一种有效的组织信息的方法,可以符合用户心智模型的信息构架,邀请用户吧类似的东西放在一起,利用卡片分类可以知道用户对网址的期望,为信息构架的搭建提供依据。对现有产品进行改版时,可以检验现有产品的信息构架是否合理。

专业的数据分析软件:IBM EZsort、CardZort、Websort

    开放式:给用户极大的自由度去进行信息分类,设计师可能会得到更丰富的分类结果,如果信息太庞大,容易不可控

    封闭式:设计师先将信息构架的导航设计好,确定导航的个数和名称,再让用户把卡片归类到不同导航类别下,如果有些卡片不能够很好归类,则可以拿出来。不需要完全归类,更利于设计师掌控结果。

6.1.2好的导航设计

l导航的自我解释:成功的导航设计可以自我解释,让用户在导航系统中清楚地认识到信息结构和自己所处的位置,为用户解释“我从哪里来?”--“我在哪”--“我能到哪里去”

苹果(中国)官网中,导航栏最左边是苹果的logo,表示用户正在访问苹果官网,并且用户可以随时点击返回网站的首页,右边的“Mac”比其他同级的元素要灰,并且下面是关于Mac的相关产品分类,告诉了用户当前访问的类别。而往下看有个大banner,banner下方有个“进一步了解”的入口,告诉用户可以去到哪里。整个导航系统清楚地解释了“我从哪里来”、“我现在在哪”、“我能到哪里去”

l深广度平衡

如果导航地深度过深,用户就需要耗费多次点击,才能好到所需要地信息,如果有些细小地信息隐藏得过深,用户就很难找到,令用户迷失方向。

相比于鼠标不停地点击,眼睛在页面上得扫视成本要低很多,比起深层次的导航结构,广度导航更利于用户发现信息。如果广度超出了用户的可接受范围,也会大大增加用户的选择负担。一般来说,超过7个选项,用户就很难记住

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

比如亚马逊,在用户进入亚马逊浏览商品时,不会一开始就推出广告,而是当用户在选择具体内容的时候,在附近出现了其相关的广告,这样的推广信息更接近用户目标,也更容易被用户接受。

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

为重要功能和常用功能设置快捷入口,就像是在原有的产品构架上搭建“快捷通道”。用户可以一步步的顺应产品逻辑去找到自己所需的功能,也可以通过快捷通道,按照自己的行为习惯,快速找到所需的功能。

但是设置快捷入口也是一个需要权衡的过程,必要的快捷通道可以提升效率,但如果快捷通道过多,产品就会变得混乱。同一功能的入口过多,就会使用户感到迷茫。

6.1.3主要任务和次要任务

l设计主线(主线优先):根据用户的期望值以及目标以正确的次序组织起来的过程,告诉用户先做什么后做什么

l是否设计支线(次要路线能否帮助主线任务):支线越少,整体复杂度越低,越助于用户完成任务。

l任务流程确定后,可以通过一系列的草图去把用户完成任务的过程表现出来,得到任务流、页面流设计、页面交互图。

6.1.4如何突出主要任务

l分解用户任务

要突出页面的主要任务,首先要明确用户使用web产品时,要完成的任务有哪些,并详尽的分解出这些任务。

对于在线购买影票的功能来说,主流任务可以分解为:选择影片--选择电影院--选择观影时间--选择座位--输入接受电子票手机号--确认订单

l次要任务分解:

浏览影片列表--票房排行--优惠推荐--影片简介--影片详情--评论详情--预告片--要观看的影片

浏览和选择观影区域--电影院

浏览和选择日期--具体场次

浏览和选择具体座位、输入手机号、点击“确认购票”

l排列任务优先级

要突出用户的主要任务,就要对这些子任务所对应的功能的优先级进行排序。可以通过使用人数、使用频率、重要程度这3个维度进行分析。

l组织和合并相关任务

设计师需要将这些任务按一定意义组织起来,便于用户理解和使用。

6.1.5如何引导用户完成任务

l相似性引导

如果大小、色彩、形态、视觉元素等相似,这些因素可以牵引着用户视觉,引导用户操作。

l方向性引导

如果操作步骤较多,可以利用具有指向性的箭头进行引导。

l运动元素引导

删除文件架后回收站变成装满的垃圾桶,提示用户删除的文件所在的位置

l向导控件

6.2如何简化复杂的操作

l减少冗余步骤和干扰选项(闹钟的设定)

l将复杂的操作转移给系统(Google地图的起点终点输入)

l简化操作方式(Bing词典自动检索输入文本的语言类别)

l优化操作过程(Ipad更新系统时,提前检测用户电量)

6.2.2信息量太大,页面怎么摆?

l让页面层次不言而喻(分解---排列---组织)

l突出信息模块之间的逻辑关系(接近原则、差异原则)

l让重点信息跳出来

qq邮箱中,未读邮件采用了强黑白对比,同时加粗文字用来着重强调;已读邮件则淡化对标,采用较弱的灰色。

l次要功能隐藏起来

Behance的搜索页面中,将次要的筛选条件放在了页面右侧并且隐藏了起来

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

l理性部分:产品定位、需求采集和分析、撰写需求文档、信息组织、任务分解、绘制草图

l感性部分:界面设计、视觉传达

l以人为本的设计

l帮助用户找到想要的东西

快速帮助有明确目标的用户找到信息

通过浏览和寻找帮助有不确定目标的用户找到信息

激发没有目标的用户的需求

l吸引无目标的用户

知乎的登陆页面,页面的下方有推荐的高质量用户和热门话题,让用户在没有注册的时候也可以了解一部分

l符合用户心理模型

人不仅具有理性,也具有感性。这导致了人们的目标、期望、行为习惯等和逻辑往往存在冲突。过于关注逻辑可能会使设计偏离了用户目标、最终导致了易用性受到影响。

6.3捕获用户的芳心

l拟物化的视觉(比如IOS系统、网易云音乐的播放界面)

l隐喻化操作(《IOS Human Interface Guidelines》中对隐喻化体验的解释:当应用中的可视化对象和操作与现实世界中的对象操作类似时,用户便会快速的领会如何使用)

l可控的感受(进度条加载状态、微信对话聊天中显示“对方正在输入...”)

l积极的反馈

l贴心的提示(Outlook邮箱登录时,用户可以清楚的知道自己的邮箱是尚未注册还是注册过但是忘记密码)

l互动的乐趣(幽默友好的404页面、siri、淘宝app将商品添加至购物车时)

l惊喜的力量(微信对话框输入“生日快乐”、Google搜索主页节假日的互动)

情景烘托

6.4快速表达我的想法-----纸面原型

l纸面原型的目的:沟通、测试、尽快解决不确定的问题

l表达内容:信息框架、任务流程、基本功能和内容


7.1什么是原型

设计方案的表达,项目团队参考、评估的重要依据,包括静态的页面样式(线框图)和动态的操作效果(交互说明)

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

l简要说明与信息结构

①变更日志(日期、变更内容、原因、备注等)

②版本说明(版本号、日期、内容)

③信息结构(综合产品逻辑和用户习惯后设计的产物)

l任务流程与页面流程

   任务流程:用户使用产品时,他的每一步会遇到什么结果、系统如何反馈等(更多的注重用户操作逻辑、界面如何反馈,从而引导用户完成目标)

   页面流程:比任务流程更清晰和具体,可以看到具体的页面内容和用户操作

  (前者是后者的基础)

l线框图&交互说明

   包括静态和动态,交互说明是原型中必不可少的部分(逻辑严谨、内容详细的交互说明会显得更专业)

   主要有以下几种类型:

①限制:包含范围值、极限值等,范围值主要指数据的取值范围。极限值主要指数据的显示限制。

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

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

④反馈:用户操作后得到的反馈动作,包含提示、跳转、动画等

7.3画线框图的技巧

l通过明暗对比表达

l不使用截图和颜色

l合理布局

l遵守栅格规范

l标记第一屏高度(重要的操作按钮一定在第一屏中完全显示)

l表达清楚UI逻辑

l考虑视觉实现后的效果

l了解视觉趋势

7.4交互说明

l尽量使用真实、符合逻辑的数据内容

l不遗漏特殊状态的描述

l避免过长的说明

l关于重复出现的模块,可独立出来取个名字。

l如原型有修改不要口头沟通,而要更新交互说明并告知大家。

7.5关于设计规范

l什么是设计规范

设计规范是对设计具体的细节、技术要求、是设计工作的规则和界面,是一种模板化应用方法

(包含了交互规范、色彩规范、logo规范、UI图标规范、控件规范等等)

l没有规范容易出现什么问题

当产品规模很小时,这个时候不会出现太大的问题,但是产品规模不断扩大时,需要越来越多的设计师,问题就产生了:

不同的频道/模块独立设计

同类功能组件存在多种样式

同类元素多样性

设计效率低下

设计质量难以把控

l规范解决了什么问题?

①“一致性”形成鲜明的产品特征,增强用户黏度

产品保持概念、界面元素、视觉风格、操作交互的“一致性”,能帮助用户适应和熟悉产品,让用户更容易“认识”你的产品,从而提高用户黏度。

②提高易用性

功能相同、组件采用类似的处理方式,用户使用起来就会更轻松,就可以避免不必要的思考,也不需要重新适应。

③满足团队协作需求

避免重复劳动,提高工作效率,提升设计质量,降低培训成本和支持成本,减少团队成员犯错的几率。

l什么时候制定设计规范?

一次性的产品就没必要在设计完之后制定规范,规范时指导设计的工具,而不是设计后的总结,整理规范需要花费不少的时间和人力。

以下几种情况可以去制定一些规范:

大型且重要的产品

产品结构、页面类型、UI组件相对较单一,可复用的内容较多

项目人手较多,时间充裕

品牌风格和主题风格已经确定完毕,品牌备忘和梳理势在必行

产品线日益丰富,后续设计一致性和可循环的要求被提高

制定设计规范的原则

l规范的执行及注意事项

规范会不会限制发挥?实际上,制定规范的目的并不是为了限制设计师发挥,而是帮助设计师少走弯路,避免不必要的错误,并提高设计效率。起到指引和参考的作用,而不是限制。


8.项目跟进---保障设计效果的实现

设计师需要对项目后期做跟进工作,优秀的设计方案很重要,能否把他执行下去更为重要。

8.1做设计评审的主导者

l设计评审的目的

①经验目标:在初期的需求分析阶段,产品人员和设计人员就已经一起分析了产品定位或设计目标。在设计评审阶段,首先要检验的就是设计方案是否达成了最初的确定目标。

②发现问题:设计评审集中了项目组所有的各个角色,可以及时发现问题与风险。

③达成共识:设计评审需要让项目成员达成共识,这样才能顺利进入下一个环节,为下一个流程分配任务。同时,可以让相关的人员熟悉整个设计,确保大家的理解与设计稿的表达是一致的,避免沟通不畅而走弯路。

评审前的充足准备

l事先考虑所有可能的方案

①准备各种设计依据

设计师需要在审核会前将用户调研的结果、支撑的数据、竞品分析、设计实施前制定的目标等等都准备充分,并在评审时阐述清楚。

②做好会议邀请工作

私下,一对一找有话语权的人达成一致的观点,而不是把所有问题都放在会议上解决。参与讨论的人越多,意见发表得越多,就难以得出结论。所以,越重要的事,尽可能少的人参与,这样才能快速下决定。

③正式邮件:附上设计稿,会议地点时间,简单的陈述设计理念,参考了哪些数据和资料等等

④评审后的分析和跟进

在评审会上收集反馈意见之后,设计师需要整理总结这些意见。对于还没有达成一致的设计细节,继续进行完善细化。再根据反馈意见完善设计稿之后,将最终的设计方案发送给项目组成员。

8.2如何审视视觉稿

l界面中的视觉设计不是艺术,正确的理解信息和传递信息是件最重要的事,忽略内容而关注形式是不可取的。

l对交互稿理解是否正确

l拒绝毫无意义的视觉设计

l关注视觉层次是否足够清晰

l关注交互细节和状态标注

l在审美方面不要过分干涉

8.3开发阶段,设计师应该做什么

l勤于沟通

l统一的规范和标准

l设计走查(产品上线前,交互设计师需要对测试环境下的产品Demo进行交互走查,比如交互动作、操作以及反馈,控件的各种状态,极端、极限和错误的情况)


9.检验成果---设计优劣可以判断

l可用性测试:通过观察用户使用产品,发现产品中存在的问题的一种方法

设计任务---招募用户---进行测试---分析问题

①设计任务时应该注意什么问题:

给出使用目标,而不是直接操作

尽量选择最重要、最频繁的任务进行测试

符合正常的操作流程

②测试用户的选择

选择有代表性的用户

用户数量上的选择(5名左右用户可以发现大约85%问题,随着用户数量增多,发现新问题会逐渐减少。小功能3~5名用户,新产品、较大、重要功能5~10名用户)

③测试过程中的注意事项

切忌引导性过强

操作行为永远是重点

不要忽视现场反应

考虑使用场景

感谢测试者,给予一定的报酬

④问题的分析和改进

问题频数(出现该问题的参与者数目)

严重等级(此问题对任务完成的影响程度)

优先级【(问题频数*4)/总参与人数】+严重等级

违反的可用性准则(根据项目性质制定的可用性准则)

lA/B测试

A和B方案做比较,为同一个目标设计的两个方案,一部分用户使用A方案,另外一部分用户使用B方案,以此衡量那个方案优。

①设定衡量标准

②对同一个用户呈现相同的页面

③保证两个版本同时测试

④单一的变量

⑤A/B测试的延伸---灰度发布

旧版本作为A方案,新版本作为B方案,让一部分用户继续使用A方案,另外一部分使用B方案,观察用户反馈和产品数据,发现问题并且及时优化。

(同时还可以对比新旧版本的产品数据,如PV、UV、转换率、跳出率)


个人总结:

用户体验设计并不是一蹴而成,这需要每个设计师首先得对用户体验设计充满了兴趣,有良好的素养、善于沟通、善于换位思考以及积极主动的和其他工作岗位的同事沟通学习,这种能力是需要不断地去锻炼和强化,经过很长的一段时间,我们才能够掌握各种专业方法、原则、流程,才能够在不同的项目中游刃有余。

对于正走在设计这条道路上的我们,不管是初入设计的年轻设计师还是驰骋在行业中多年的成熟设计师,我们都应该充满着对设计的激情,永远保持一颗年轻的心去面对我们的设计和生活~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容