Google UX Design Course笔记
01 基础知识
用户体验UX(User experience)在1990年代有认知心理学家唐·诺曼提出,
UX指用户与产品互动或体验产品时的感受。用户体验设计师让技术更容易被理解与使用。
好的产品的四要素:可用的usable,公平的equitable,令人愉悦的enjoyable,有用的useful。
UX设计师分类:交互设计师interaction、视觉设计师、动效设计师。
UX设计师的关键任务是将某一种特定的情感与使用产品的体验联系起来,利用积极或是消极的感受完成设计。
UX设计师的工作:调研researching、线框图wireframing、原型图prototyping、创建信息架构creating information architecture、有效沟通commuicationg effectively
UX研究者的品质:共情、务实和协作
02 UX术语和框架
UX设计五要素:策略Strategy(用户需求与业务目标)、作用层Scope(产品功能与内容)、结构Structure(组织设计与用户交互)、骨架Skeleton(说明设计工作的方式)、表层Surface
设计思考的五步骤:同理Empathize、定义问题Define、想法Ideate、原型Prototype、测试Test
三种设计方法:通用设计universal design,包容性设计inclusive design(根据特定用户做出设计选择,考虑个人标识,考虑在历史上被排除在外的群体),公平性设计equity focus design(不是平等,是每个人能够获得公平的权限,考虑在历史上被排除在外的特定个体的需要)
响应式设计:让设计适应各种设备尺寸
辅助技术AT(Assistive Technology ):颜色修改、语音控制、屏幕阅读、文本替代……包括假肢、电动轮椅等设备
03 UX设计冲刺五阶段
理解understand:发现问题,定义问题,聚焦于用户和需求;用户研究,专家会谈
构思ideate:提出各种各样的解决方案
决定decide:决定一个解决方案
原型prototyp:
测试test:用户测试提供反馈
04 设计心理学-同理心的重要性
同理心empathy:设身处地地体会,共鸣,发现真实的用户及需求。
同理心地图:一个用来理解某类型用户的能够被简单理解的表格。says填写用户的言语,does填写客户做的事,thinks关注客户的想法,feels关注用户的感受。
人物原型Personas:为谁设计?虚构的人物来表示某一特征的用户群体,代表这一类型的用户需求。照片、简介(年龄、职业、受教育程度、家庭、家乡)、与设计相关的要点(目标、困难)、口头禅(表现人物性格和目的)
用户组User group:一组兴趣、目标、关注一致的人
人物故事/场景:拓展人物,加深对用户组的理解。介绍用户、设置障碍、说明最终目标。缩小需要关注的用户范围,针对性的设计策略。
用户旅程User journey:用户与产品交互时产生的一系列经历。
预防糟糕的用户体验:预见边缘情况(用户无法控制的事情)。1.创建人物原型及故事;2.在设计前反复思考;3.使用线框图。
无障碍坡道效应:描述为残疾人设计产品和政策,最终会惠及更广泛的用户。
问题陈述:对用户需要处理的事务的清晰描述。以人为本,宽泛创新,问题具有针对性。
人为因素:描述人为对其产品交互的变量范围。以人为本这个概念是在两次世界大战之后才被真正提出,之前都是让人去适应机器。让机器适应人的特性,要考虑人的特点:缺乏耐心,有限的记忆,有限的注意力,需要类比,需要动力,有偏见、恐惧,会犯错、误判。
心智地图:让人类能够预测事务运作方式的内在地图。
反馈循环:用户在过程结束时获得的结果。
隔离效应Von Restorff effect/Isolation effect:当存在多个相似对象时,与其他不同的东西更有可能被记住。CTA(call to action):用来告诉用户采取行动的可视提示。eg.白色背景下的蓝色按钮。
序列位置效应Serial position effect:当被给出一列信息,最前端和最后段的信息更容易被记住,中间容易模糊。eg.app中把重要的用户动作放在导航栏的边上
希克定理Hick’s Law:用户的选择越多,花费的时间越长。
05 用户研究
研究性研究:对一组用户及其需求进行逐步检查,为设计过程添加现实背景。
产品开发生命周期:用户研究在整个周期中的基础研究,解决问题:要做什么?用户问题?怎么解决?
项目受众:参与项目或受项目结果影响的人。
用户体验研究:重点是通过观察和反馈理解用户行为,需求和动机。目标是为用户设定优先级,满足业务需求。
四步骤:
1.计划:概述项目背景,设置目标,写下想要回答的问题,确定研究步骤及研究对象。
2.研究:收集数据,进行可用性研究。
3.分析和综合结果
4.分享和推广见解
研究陈述:包括采用的方法,收集的数据,得到的结论,行动的建议
研究方法:两种分类方式,一种基于研究中的人,分为一手研究与二手研究;另一种基于收集的数据类型,分为定性研究(访谈Why)与定量研究(What)。
具体研究方法:1.二手数据的研究 2.用户访谈:收集深度信息的方式,开放性的问题,询包括人们的看法、思想、经历和感受。3.问卷;4.可用性研究:通过在用户身上测试产品来评估产品,识别用户体验不同原型的痛点。
UX研究计划七要素:
1.项目背景:why?eg.我们要开发一个app帮助主人找到并安排遛狗人。
2.研究目标:从研究中学到的具体想法,希望得到的研究结果。基础研究阶段了解产品需求,设计研究阶段了解如何构建产品,后期研究了解产品使用是否符合预期。eg.确认遛狗程序是否难以使用。
3.研究问题:可回答、具体的、无引导性的问题。确认问题定性还是定量。eg.你一周遛狗几次?找遛狗者过程中让你最沮丧的事是什么?eg.用户在应用中找到并预订一位遛狗者需要多长的时间,用户预订遛狗人的步骤。
4.KPI’s:关键性能指数key performance indivators评判朝着最终目标前进的关键衡量指标。eg.使用app预订遛狗的用户的数量和百分比。
KPI六个指标:用户完成任务的时间、导航和搜索的使用、用户错误率、用户流失率、用户转化率、
系统可用性规模System Usability Scale(SUS):是否认同关于设计可用性的10个陈述。
系统可用性量表(SUS)在用户研究中的应用
5.方法论:研究的方法和步骤,研究的时间地点时长步骤。eg.用表格确定趋势。
6.参与者:避免样本偏差。
7.脚本/讨论指南:1.相同的问题 2.开放性的问题 3.鼓励细化深入 4.从不同角度问同样的问题 5.不提及其他用户 6.不设置诱导。
用户研究的偏差:
1.确认性偏差:先入为主,脑中已经有一个固有想法,可以通过在问问题时设置开放的问题,访问大量用户。eg.认为左撇子比右撇子聪明,寻找例子来证明;
2.错误共识偏差:高估赞同人的个数,认为不赞同的人都不正常。eg.认为在同一社区的人都有同样的信仰;
3.首要偏差:对首个参与者印象深刻;
4.最近偏差:访谈者容易记住访谈中的最后一句话,可以对访谈记笔迹或录音,平等对待每一个受访者;
5.隐性偏差:设计者固有思维带来的无意识偏差。eg.只访谈某一身份类型的人,如种族、年龄、性别……,可以反思自身;
6.沉没成本谬误:越深入投资项目的想法,越难以改变。eg.花了很长时间设计了一个功能,但发现并没有。可以将设计分为更小的阶段。
7.社会可取性偏见:关注社会中认为的积极方面,以减少他人对自己的偏见。
减小偏差的方式:
1.承认偏见。
2.从代表性样本找到参与者
3.确定研究标准和目标
4.反思问题。
5.注意肢体语言,鼓励反馈。
欺骗性模式Deceptive patterns:
欺骗用户去做或是购买他们本不会做的事或购买的东西。可以用视觉、音频、动效、营销、广告实现。
1.蟑螂旅店Roach motel:让用户从坏环境中脱身很困难。eg.订阅容易但取消困难,需要打电话给客服。
2.强制连续性Force continuity:在没有警告或提醒的情况下收费。eg.订阅七天免费试用,第七天无提示自动扣费。
3.潜入篮中Sneak into basket:偷偷增加额外的内容。eg.在付款时额外商品进入,预定酒店自动购买保险。
4.沉默成本Hidden costs:偷偷增加额外的费用。eg.不提前提示快递费,付费时候才出现。
5.确认羞愧Confirmshaming:让用户不做某事时感到愧疚。eg.新闻退订按钮写“不,我不关心时事”。
6.紧迫性Urgence:eg.游戏限时打折。
7.稀缺性Scarcity:通过库存有限刺激消费。
用户隐私与数据安全:出于道德、法律与黑客攻击等原因。
用户信息分类:
1.个人身份信息Personally Identifiable Information(PII):用于识别用户,包括姓名、住址、电话、邮箱
2.敏感的个人身份信息Sensitive P……(SPII):会引起财产损失,或让用户受到歧视的信息。如社交安全号码、驾照号码、护照号码、银行密码、犯罪史、医疗史等
如何保护用户隐私:1.数据收集要透明 2.只收集非常重要的数据 3.获得用户同意 4.允许用户随时退出
06 头脑风暴
探索尽可能多的可能性,最终再进行评估。
评估的标准:可行性(技术是否支持),可用性(是否解决了真实的用户问题),商业性(对公司利益有益)
竞品分析Competitive audit:对竞争产品优缺点的概述。 直接竞品(关注点与用户都与自己设计的产品一致)和间接竞品。 分析产品定位,产品功能,产品优势与产品缺陷。分析产品的设计流程,产品解决的问题,揭示的市场空白。
怎么进行竞品分析: 1.列出明确的目标。eg.评价三个购物网站,总目标是比较各个站点的购物特点,可以细分,商店、下单、客户评论和评级、退款。评价音乐订阅平台,关注定价选项、搜索功能、创建共享播放列表。 2.创建竞品名单。5-10个直接和间接的竞品。 3.找出想要比较的具体特征。 4.研究。5.分析。6.总结得出结论。
草图Sketch(Crazy 8):8个解决问题的方法
将观察变为洞察:
1.收集数据:收集所有的类型的数据。
2.整理数据:关联图Affinity diagram将共同的主题或关系将数据组织起来。
3.找到数据的主题:从归类好的数据得到多种小结论。
4.洞察得到结论:
07 作品集
作品集步骤:
1.建立个人品牌:个人陈述(一两句描述工作和立场,口号,强化品牌元素。eg.有条理的人,喜欢虚拟现实,在作品集中展现 )
2.讲故事:项目的来源与结尾。
3.简明扼要
4.简单的导航:项目到项目,项目到个人简介的跳转简单
5.跳出布局的局限
6.多个项目:用3-6个项目来展示技能范围
7.案例研究:展现设计过程,项目名称,持续时间,个人贡献,项目目标,目标受众,草图线框,用户测试,最终成果,总结学习到的东西
8.确保响应式设计
9.测试网站
网站:
构建网站 Wix Squarespace Webflow
UX论坛 https://uxdesign.cc/
08 故事版和线框图
目标陈述Goal statement:一两句话描述产品及其对用户的好处,为设计提供理想的解决方案。
eg.帮助有宠物的用户快速且容易地找到和安排遛狗者。
问题陈述:着眼于产品为谁服务,产品能做什么,产品为什么能解决问题。
eg.我们要做一个帮助宠物狗主人找到遛狗人的app,可以写老王是一个宠物狗主人,需要找帮他夜晚遛狗的人,因为他要上夜班。
故事板Storyboard:用一系列图在视觉上描述和探索用户对产品的体验。重点展现产品最重要的部分。
大画面故事板:注重展现用户体验过程,展现情绪,考虑人在一天之中如何使用产品。展现潜在的痛点是如何在交互中解决。设计早期展现产品的用户及需求。
特写故事板:展现产品,关注设计本身的实用性。设计中期帮助改进设计。
线框图wireframing:建立网站或app的基础结构。给出大致的发展方向和产品功能
行业标准:线框图之中,文本用水平线粗线表示,图片、照片、插图、图标用圆或是重叠的圆表示,行动号召用矩形或圆表示,划分用细线
09 数字线框图
信息架构Information architecture(IA):
组织内容,帮助用户了解自己在产品中的位置,他们要的信息在哪。可以参考现有产品的架构,了解用户的目的。
方便审查,方便工程师组织数据。
灵活的信息架构允许想法随着设计不断发展迭代。
列出每个元素:搜索栏、资料栏……
手绘线框图,选出精彩的部分
他人反馈
绘制数字线框图
线框图数字化过程的注意事项:
1.重要文本使用实际的内容,而非占位符文本Lorem ipsum。
2.避免添加表述性内容,如颜色或图像
3.关注细节,更简洁,易分享
10 低保真原型
保真度Fidelity:设计与最终产品的外观和感觉相匹配。
低保真度lo-fi:低复杂度,低精致度
高保真度hi-fi
原型prototyping:展示产品功能的早期模型,具体的屏幕间的流程。
低保真原型:从线框到低保真原型最大的不同是互动性,能够实现功能间的连接。可能是纸上或者数字的。
11 可用性测试
可用性研究usability study:评估用户在设计中完成核心任务的难易程度的研究。给测试者一些任务,观察反馈。
有主持的可用性研究:有人会实时指导参与者完成研究。能够直接得到反馈,在测试过程中能提问。
1.寒暄,询问过得怎么样,缓和气氛。2.感谢到来,送小礼物。3.认可,告知他的测试会惠及他人。4.保密协议NDA。5.解释研究重点和参与者给予的反馈。6.说明任何问题并没有正确错误的偏向。7.保持情绪中立。
1.询问开放性问题。2.问题递进。3.试着总结参与者对话确认意思,允许更正。
无主持的可用性研究:通过录屏等方式采集研究数据,能够观测到真实使用方式。
在可用性研究中有效记笔记:
1.捕捉自己的想法
2.总结参与者的经历
3.用电子表格记录
12 高保真原型
高保真模型三要素:视觉设计、导航、交互
视觉要素
视觉设计三要素:版式、颜色、图标
1.版式:文字与字体的使用。
排版层次结构
字体类型分类:描述字体风格的系统。衬线serif与无衬线sans serif.。
字体
字号
2.颜色
60-30-10原则:中性色60%,互补色30%(背景、线条、文本),强调色10%(强调信息)。
在不同设备探测颜色
3.图标设计
图表+文本 更能传达意思,能够让屏幕阅读器阅读
布局Layout:文本样式、图表、图像的具体位置
基本网格:将页面用纵横交错的线划分。清晰统一,加速设计过程,有利于协同。
containment:使用视觉屏障是设计整洁和有条理。分割、间隔、填充、阴影。
导航
帮助用户在屏幕间移动
交互
手势Gesture:用户通过触摸来获取设备上的信息。点击、滑动、滚动、缩放。
动态Motion:将静态设计元素自动化,帮助用户理解细微的变化。
热点Hotspot:用户发生交互的地方
连接Connection:
目的地Destination
触发器Trigger:定义了将导致原型前进的交互类型,可以是鼠标点击、触摸手势或是定时。
动作Action:交互时发生的事件。
高保真原型
创建高保真原型的步骤:
1.布局模型:考虑用户流
2.连接屏幕
3.添加交互细节
4.调整动画
5.完成所有屏幕
6.分享
注意点:
1.保证易访问性,手势不能成为唯一选项。
2.时间最好在150-500ms。
3.确保动作可以被退出。
视觉原则
1.强调重点:视觉重量visual weight
2.层次结构:确定元素重要性
3.比例和尺度
4.一致性与多样性
格式塔原则Gestalt:描述人类感知物体时如何分组相似元素、认识模式和简化复杂图形的原则。
相似性:相似的元素被认为同样的功能。
接近性:近距离的物体比远距离看起来更相关。
共同区域:同一区域的元素被看做是组合在一起的。eg.利用边框将元素分组
扭曲原理:人类容易注意整体,无意识地将场景中不同元素组合起来快速理解。eg.将云看作熟知的事物
设计系统
一系列元素和导则,允许团队按照预先确认的标准,设计和开发产品。
视觉风格:排版、颜色、图表、网格。
导则:设计原则、编辑原则、实现原则。
UI模式:文本、颜色等元素,按钮、表单等组件,导航栏等组件块,模板。
设计贴纸:元素和组件的集合。
设计回顾
1.详细视图:细节的大小、颜色等问题
2.页面级视图:考虑页面中元素的比例
3.功能级视图:检查可操作性
4.应用级视图:思考产品整体外观和功能
13 设计测试、迭代和评审反馈
- Title: Google UX Design Course笔记
- Author: Salmon
- Created at : 2024-04-07 11:05:05
- Updated at : 2024-09-21 10:11:30
- Link: https://salmonsea.top/2024/04/07/Google UX Design笔记/
- License: This work is licensed under CC BY-NC-SA 4.0.