-
4000字干货!帮你快速入门认知和行为心理学
UI交互 2023-02-06用户体验设计是对人性和需求的洞察诠释。优秀的用户体验设计起始于对用户心理和场景的洞察、共情、深刻理解,尤其是在人机交互的体验设计中,当下的智能时代中的人机交互设计,一个按钮代表了用户的可操作性,会发生什么,会产生什么结果。用户体验设计正是以用户目标为中心的设计,而以用户为中心的设计自然需要通过深刻研究“用户”,包...用户体验设计是对人性和需求的洞察诠释。优秀的用户体验设计起始于对用户心理和场景的洞察、共情、深刻理解,尤其是在人机交互的体验设计中,当下的智能时代中的人机交互设计,一个按钮代表了用户的可操作性,会发生什么,会产生什么结果。
用户体验设计正是以用户目标为中心的设计,而以用户为中心的设计自然需要通过深刻研究“用户”,包括研究“用户需求”以及“用户能力”,其中能力又由“认知和行为”两方面构成,同时认知和行为也构成了对外界“感知和行为”的反馈。围绕认知研究产生的认知心理学,围绕行为研究产生的行为设计学,这大体构成“设计认知行为心理学”的核心。如何理解认知心理学和行为设计学?就是今天要大家探讨的话题。
一、认知心理学与行为设计学 认知心理学的核心指研究人的认知过程,如注意、知觉、表象、记忆、思维和言语等,认知心理学家研究那些不能观察的内部机制和过程,如记忆的加工、存储、提取和记忆力的改变等。
行为设计学的核心部分是“福格模型”,它定义一个行为得以发生:行为者首先需要有进行此行为的动机,以及操作此行为的能力,以及在被提醒(引导)下触发进行。
如何提高设计转化?先学会经典的「福格模型」 日常工作中我们经常要考虑如何吸引用户转化。
阅读文章 >
围绕“ 设计心理学 ”和“行为设计学”所展开的设计模型,关于对心理学和设计等相关原则纷繁众多,如何将这些设计原则系统性的理解和使用、厘清设计模型之间的关系,是我们理解设计原则且吸收的关键。
二、认知心理学 1. 人脑的潜意识和有意识
我们来看一个小品的对话内容,以“马爸爸和宋小宝”的小品台词……
马:什么样的老鼠,是两条腿走路?
宝:……袋鼠!
马:错,是米老鼠!
宝:…… 我没准备好
马:那我再来问一个
马:什么样的鸭子,是两条腿走路?
宝:照这么说是……唐老鸭!
马:错,所有的鸭子都是两条腿走路!
宝哥,已经是大无语了
以上的对话有什么共鸣?为何会经常性出现类似的场景……
因为在我们日常中许多行为都是人的潜意识的反应。也就是说,行为发生时人们是无意识的,通常已经做了,我们才知道自己要做的事、要说的话,或要思考的东西。为什么会有这种现象的发生呢?实际上我们的大脑有两个非常不同的反应和处理模块,我们称为两个大脑:潜意识和有意识,它们并不总是在互相沟通。
潜意识是无意识,它的反应是迅速的、自发的、感性的,也可以称为快思考。有意识的反应是缓慢的、受控的、理性的,也可以称为慢思考。
2. 人脑思考的双系统理论
3. 无意识和有意识,对应人脑思考的“双系统理论”。
在 2000 年左右著名心理学家斯坦诺维奇首先提出了“双系统理论”, 这启发了认知心理学家丹尼尔·卡尼曼,后者因为决策理论的研究获得了 2002 年诺贝尔经济学奖。卡尼曼在《思考,快与慢》一书中表示,他认为人的大脑活动存在两种模式,他称之为系统 1 和系统 2。
系统 1 是快思考,代表人类的本能和习惯,可以快速且自动启动,耗费资源很少,经常为习惯、经验、刻板印象等认知偏见所支配。
系统 2 是慢思考,代表人类的逻辑和理性,其启动是被动、缓慢、 耗费资源的,存在意识控制。人的大脑进化不是为了求知,而是为了生存和传承。
人脑遵循能量最小消耗原则,能不动脑就不动脑,默认使用系统 1 思考,即快思考(潜意思)。
在设计认知心理学的范畴,对应人脑思考的系统 1 和系统 2 的理论是“认知和情感的三个层次”理论,三个层次分别是:本能的、行为的、反思的。
4. 认知和情感的三个层次
本能层:这是人类情感系统最基本的保护机制的一部分,能够对环境做出快速的判断;好或坏,安全或危险。
行为层:对设计来说,行为层次最重要的,是让每一个行动都与一个期望想关联。
反思层:是认知的、有深度的、缓慢的。最高层次的情感来自反思层次。
当我们将“双系统理论”模型和“认知和情感的三个层次”结合来看会发现一个很有意思的现象。
系统 1 的快思考,对应本能层和行为层,可以快速且自动启动,耗费资源很少,经常为习惯、经验、刻板印象等认知偏 见所支配。(上述的小品对话即如此)
系统 2 是慢思考,代表人类的逻辑和理性、对应反思层和(5%的意识行为),其启动是被动、缓慢、 耗费资源的,存在意识控制。
行为科学研究得出结论,一个人一天的行为中大约有 5%是非习惯性的, 而其他 95%的行为都源自习惯。
这基本上意味着是“习惯而不是逻辑”决定了我们的一生。我们以为自己是理性的,我们以为自己的一举一动都是讲逻辑、 有道理的。但事实上,我们的多数日常行为,都是一些我们自己根本无法了 解的隐蔽动机导致的结果。所谓理性,是指当条件合适时(理性并非总是优于本能和习惯),优先用逻辑、知识和思维去做出决策和预期收益最大化的 行为,而不是任由本能和习惯驱使。
本能和习惯会塑造人的偏好,偏好会影响人理性认知。
三、行为设计学之福格行为模型 在展开行为设计学前,先了解行为设计学核心的一个理论模型——福格行为模型。
福格行为模型是指:行为的发生,需要动机、能力和提示 3 大要素同时发挥作用。
当动机(motivation)、能力(ability)和提示(prompt)同时出现的时候,行为(behavior)就会发生。
动机是欲望或需求,能力是认知和执行能力,而提示是提醒或信号,缺一不可。
简而言之,该模型说明:要使目标行为发生,一个人必须有足够的动机、足够的能力和有效的触发器。
动机
从概念上讲,动机设计的目标是将用户移动到福格模型区域中的更高位置。换句话说,能力高但动机低的用户需要提高动机,才能到达行为激活阈值。动机的三个层次:痛苦与快乐,希望和恐惧,社会接受和拒绝。
能力
在现实世界的设计中,提高能力并不是教人们做新事物或培训他们进行改进如此简单。人们通常抵制教学和培训,因为它需要努力。这与人的自然联系相冲突:我们从根本上是懒惰的。
所以,需要人们学习新事物的产品通常会失败;相反为了提高用户的能力,有说服力的体验设计者必须让行为更容易做到。换句话说,有说服力的设计在很大程度上依赖于简单的力量和习惯,可以进行简单理解和简单操作的产品更易于行动的达成。
触发器
触发器的一般概念有很多名称:提示、提醒、行动信号等。
体验设计中常见的触发器包括:
激励提示 引导提示 信号反馈等 1. 行为发生的七个阶段 人和外部环境(产品或系统)之间交互时的心理活动。
所谓的行动 7 个阶段,是指我们在做一件事情的过程被划分为 7 个阶段。做一件事情涉及到四个问题:目标、外部世界、作用于外部世界的动作、作用于外部世界的动作的反馈。
关于这个过程的一个例子:
你在看书,天色暗了下来,你想让光线亮起来继续看书。想让光线亮起来继续看书,就是你的目标。
怎么样可以达到目标,开灯。于是你站起来,走到灯跟前,打开开关。这一系列的行动就是作用于外部世界的动作。
灯开了,光线变亮了,你可以继续看书了。光线变亮了,就是作用于外部世界的动作的反馈。
从目标到外部世界之间过程,可以细分为 3 个阶段。
即:行动意图、动作顺序、执行动作。我们把这 3 个阶段概括为“执行”。其中行动意图、动作顺序属于心理活动,执行动作属于外部活动。
同样,从外部世界到目标之间的过程,也可以细分为 3 个阶段。即:感知状况、解释状况、评估解释。我们把这 3 个阶段概括为“反馈”。其中感知状况属于外部活动,解释状况、评估解释属于心理活动。
所以整个过程可以分为 7 个阶段:目标→行动意图→动作顺序→执行动作→感知状况→解释状况→评估解释。
在每个环节之间都会存在鸿沟,解决鸿沟,就是设计的任务。无论我们设计什么产品,都可以把解决这个过程间的鸿沟作为设计思考的内容;因为每个产品都是用来满足人的目的,人通过与产品交互来满足动机背后的目的。
把“行动七个阶段”和“人脑认知和情感的三个层次“模型结合
本能的反应存在于最底层:控制简单的肌肉群,感知外在的世界和身体。行为层次与期望有关:对行动次序的意图敏感,然后才是对反馈的阐释。反思层设定目标和计划行动的部分:受到对实际发生的结果与期望比较的影响。
2. 心流状态理论 心理学家米哈里·契克森米哈赖定义心流为一种将个体注意力完全投注在某活动上的感觉;心流产生时同时会有高度的兴奋及充实感。正向情绪为主,正负性波动;紧张感积累,完成挑战的成就感。
“心流”状态发生在行动的挑战稍稍超过我们的技能水平。
一个简单的远低于我们技能水平的任务,很容易满足期望,没有挑战。一个艰难的远超出我们能力的任务,会引来许多失败的预期,导致沮丧、焦虑和无助。这两种情况都无法达到心流状态。
米哈里·契克森米哈赖提出使心流发生的活动有以下特征:
我们倾向去从事的活动。 我们会专注一致的活动。 有清楚目标的活动。 有及时回馈的活动。 我们对这项活动有主控感。 在从事活动时我们的忧虑感消失。 主观的时间感改变——例如可以从事很长的时间而不感觉时间的消逝。 我们对于所从事的活动是力所能及的,且具有一定挑战的,我们可以通过不断地练习来提升能力超越更高的难关。 当福格模型和心流理论结合来看
心流通道是在福格模型的“触发成功区域”内,即完成一个任务的时,动机适中、能力适中,触发任务的区域以及任务的完成过程会产生心流的通道状态;
构建这种状态(体验设计方案),是设计师在设计产品功能和体验时应该去思考的。
本篇小结
从“认知心理学”到“行为设计学”的大体介绍,我们可以初步窥探“设计认知行为心理学”的基本框架和内涵。
底层的原则和模型可以帮助我们回归产品设计过程中,洞察用户的人性、理解需求的本质,最终以人为本进行设计。
本文内容篇幅有限,未完全涵盖当前的关于认知心理学和行为设计学全部模型框架,作为“设计认知行为心理学”框架的提出及启发,未来将持续研究完善。
推荐阅读书籍:
《设计心理学 1.2.3 册》—— 唐纳德·A·诺曼; 《设计行为学》—— 奇普·希思/丹·希思; 《福格行为模型》—— B.J. 福格; 《思考,快与慢》—— 丹尼尔·卡尼曼; 《俞军产品方法论》—— 俞军等 若有收获,点赞、关注、评论!
-
从入门到实战!腾讯高手总结的C4D自学必备指南
UI交互 2023-02-06导语近年三维表现已经越来越多的融入到各种商业设计当中,在电商、品牌、UI、影视等各个领域都有广泛的运用。其中一个关键因素是 C4D 这款软件的出现,大大降低了 3D 设计的学习门槛。C4D 相对于专业性更强、功能较为复杂的 3DMax、Maya、ZBrush 等软件,界面更加简洁友好,对于没有接触过 3D 的的小...导语
近年三维表现已经越来越多的融入到各种商业设计当中,在电商、品牌、UI、影视等各个领域都有广泛的运用。其中一个关键因素是 C4D 这款软件的出现,大大降低了 3D 设计的学习门槛。
C4D 相对于专业性更强、功能较为复杂的 3DMax、Maya、ZBrush 等软件,界面更加简洁友好,对于没有接触过 3D 的的小白,学习成本更低。配合 Octane、Redshift 等渲染器,可以很快做出强视觉表现力的效果。凭借这种操作友好、易出效果的特性, C4D 很快成为了近年最流行的 3D 设计软件之一。
本文结合作者自身的经验整理了一波自学的思路和技巧,希望能在大家学习 C4D 的过程中有所帮助。
更多C4D学习方法:
玩转C4D!腾讯高手的3D视觉设计必备指南 导语 随着三维视觉逐渐向二维视觉领域渗透,视觉 3D 化已经成为当下非常热门的一种表现形式 3D 技能也已经加入了视觉设计师必备技能包中。
阅读文章 >
前言
相信很多没有三维设计基础的小白,刚接触到 C4D 时会有无从下手的感觉,面对各种形形色色的命令菜单和工具面板,内心是这样的:
其实大可不必担心,不同方向的设计师可以有不同的侧重点,只要掌握自身职业需要的模块,并不需要学会所有的功能。追求大而全反而难度大效率低,容易产生挫败感从而被劝退。
所以这里建议的 C4D 学习思路是:结合自身的职业方向,先明确要学习的侧重点,集中精力突破,然后再根据新的需要逐步学习更多即可。
学习过程则大体上分为入门、上手、实战三个阶段。
一、入门 1. 明确学习方向
C4D 大体可以分为建模、渲染、角色、动画、运动图形、动力学这几个模块,每个模块都可以看成是独立的知识体系,往下又有更具体的细分。真要全面仔细钻研的话,需要投入很多的时间精力,这也是让很多初学者无从下手甚至望而却步的原因。
所以除了建模和渲染是绕不开的基本模块,我们可以将另外几个看成是比较具有针对性的模块,具体需要着重学习哪一部分,则需要先明确最适合自己的学习方向:
比如你是电商设计师,平时的工作内容主要是制作各种产品高大上的渲染图以及推广视频,那除了基本的建模与渲染,还可以着重学习运动图形,做出各种酷炫的商业广告视频;
如果你是 IP 设计师,则需着重学习角色模块,在完成静态角色的建模渲染后,绑骨骼刷权重也是必须掌握的知识点,才能做出丰富的动作和表情,让角色生动起来;
总之,不同职业方向,甚至项目的不同时期,都有不同的学习侧重点,这里需要每个人自己去判断。
建模和渲染则是最常用的两个模块,无需有职业方向的针对性,都应该在前期优先学习,并且做到基本掌握甚至熟练运用。
常规的步骤是先学习建模,再学习渲染;不过建模比较枯燥,渲染则是最出效果也是最提升学习信心的环节,我认为根据个人喜好,先学渲染再学建模,反而是更推荐的学习顺序。
2. 选择学习资源
选择学习资源方面,目前网络的免费教程十分丰富,依靠教程的学习足以让你初期快速的上手,新手在选择教程方面尽量以体系较为完整,演示时软件版本较好的原则,如英文水平较好建议去外网看看各路大神的教程,原汁原味的学习;另外考虑到外网资源的机翻和获取难度的原因,这里主要推荐一些国内网络能获取自学资源:
① 建模
建模方面在学习阶段主要注重 C4D 的工具使用和基础技巧,这里推荐几个免费教程。
https://www.bilibili.com/video/BV1Cb411T7Dc https://www.bilibili.com/video/BV1PZ4y1s7vm ② 渲染
渲染以 OC 渲染器为例,这是现网能找到比较完整的免费教程,学习后可以直接上手出图。
https://www.bilibili.com/video/BV1ur4y1T72V https://www.bilibili.com/video/BV1f4411V7qh ③ 动力学
动力学可以由浅入深,从基础的常用动态手法及运动原理开始入手,以小实例练习的方式慢慢转向大场景的动态设计学习。
https://www.bilibili.com/video/BV17f4y127uv/ https://www.bilibili.com/video/BV1ZA411w7qC/ ④ 更多综合性实战教程
各大网站都能找到不少实战案例的教程,根据需要可以找到更多。
https://www.bilibili.com/video/BV177411P7d1 https://www.bilibili.com/video/BV1AY4y1G7Nc 3. 软硬件配置相关
打团下副本之前,还得先准备一下装备;这里简单对于萌新学习前的软硬件要求做一些说明和推荐。
① 渲染器选择
C4D 目前可选主流的渲染器有 octane、阿诺德、Redshift、vray、自带渲染器(不推荐)。主流渲染器各有优缺点,综合下来笔者推荐萌新选择 OC 渲染器,原因是学习资源多,学习难度低,渲染效果优、渲染速度快等优点。
以下是各渲染器的对比,萌新们可权衡自身的情况进行选择:
② 电脑配置
在 PC 电脑方面,以笔者正版 OC4.0 渲染器为例,显卡选择 N 卡,型号以 20 系列以上最好,显存 4G 以上(有经费的可以入手今年的 40 系列显卡);其他配置看自己的经济情况而定,如 CPU 方面单核性能越强对于渲染效率和 c4d 默认渲染器的加速越快,内存推荐 64G 以上,另外在电源上如果已经配备了 20 系列以上的显卡建议选择 900W 以上的,除了显卡和 CPU 这两个核心硬件其他的配置主要看个人情况而定,对电脑不懂的优先看电商平台的整机方案,主要以显卡和 cpu 为参考依据,其他的配置可浮动选择。
在苹果电脑方面,笔者并不推荐以 3d 工作为主的设计师选择苹果电脑,主要原因是主流渲染器的选择较少,另外 C4D 插件各方面的支持也远不如 PC 方便和丰富(如有特殊原因,可以优先选择 M1 芯片的电脑或者配备 N 卡独显的苹果电脑)。
③ 软件版本
C4D 软件版本推荐使用最新版本或者 R23 以上版本,随着厂商的更新换代,有些以前只有插件能完成的功能慢慢完善在新版本上,新版本带来的便捷功能可提高萌新的出图效率并免去旧版本没有兼顾的功能导致的学习成本浪费问题。
另外在 OC 渲染器上的版本问题尽量以当前版本能兼容的最新 OC 为主,当然,需要你的显卡需要和 OC 版本是匹配的情况下。
4. 好记性不如烂笔头
收藏和观看的教程多了,容易看了后面的忘记前面的,或者没有实际上手印象不深。这里我尝试过最好用的方法可以总结为一句话,就是俗话说的“好记性不如烂笔头”。
对于一些关键的知识点,或者很有用的上手练习案例,可以在自己学习或者练习后,将关键步骤以在线笔记的形式自己整理一遍。
这样做有两个好处,一是能大大加深你对知识点的印象,不易遗忘;二是即使真的隔了很长时间有所遗忘,只要调出对应的文字笔记,就能很快重新想起对应知识点,比起重新翻出视频教程,边拖进度条检索再看一遍,效率高得多。
比如我之前在学习渲染体积光效果(丁达尔效应)时,总是掌握的不扎实,学过就忘,下回再用到时,基本相当于又要翻出视频教程再看一遍,效率很低。但是将关键知识点整理成笔记后,不单对这个知识点记得很牢,甚至能在不重新翻看笔记和教程的条件下,熟练的以教程中提到的三种不同方式做出体积光。
笔记链接: https://note.youdao.com/s/Lwt42DsG
以下是我整理的部分笔记库,感觉在笔记库里的知识点才算是比较掌握了的。
5. 多搜集优秀案例
除了掌握工具,多看优秀案例以提升自己的设计思维和审美也很重要,只有看的优秀案例够多够好,将自己的设计眼光、审美水平、思考方式向大神们的靠拢,才能做出好的作品。
这里推荐几个我觉得的很赞的 3D 类网站:
Artstation: http://www.artstation.com ; Sketchfab: https://sketchfab.com/feed ; Behance 3D: https://www.behance.net/galleries/3d-art ; Dribbble 3D: https://dribbble.com/search/3d ;
二、上手 1. 熟能生巧多练习
上手阶段,充分的动手练习是必不可少的。
这里的练习也分为两种,一种是跟随教程案例做出一样的效果,一种则是结合自己感兴趣的题材设定一个主题或场景,将学习的知识点融会贯通,在自己的命题作品里实际应用起来。两种练习的方式也是相辅相成,在积累足够多的教程案例练习后,更推荐按照自己的想法来创作。
比如我会将自己感兴趣的漫画题材,在 C4D 里作为一个场景练习,融合进平时学的一些知识点。
《头文字 D》场景
《海贼王》场景
因为用的是自己感兴趣的内容练习,所以做起来也上手很快,知识点也记得很牢,推荐大家可以试试。
2. 善用插件提效率
① Forester-植物生成插件
轻松生成各种类型的植物和部分岩石,各项小参数的调整方便个性化的调整,另外有便捷的动力系统可以轻松制作风吹植物的效果,结合 OC 渲染器的克隆功能搭建大场景非常轻松,适合在做动态设计的时候快速生成搭建场景。
② QuadRemesher-四边面重拓补
有时候我们工作中会遇到三角面模型,对于新手来说转换成四角面模型可以选择这款插件轻松转换成你想要的四角面而且还有便捷的参数可以调整。
③ PolyCircle-挖洞插件及 Nitro4D NitroCap-封洞插件
在日常建模的工作中经常需要给模型开洞及封洞的操作,虽然靠布线调整也可以实现,但是插件的效率更便捷,所以推荐这两款插件分别对应的模型开洞及模型封洞的功能,另外注意在 C4D 软件 R26 之前都是必备的插件,但如果你软件版本是 R26 以上版本,那么自带整合了这样的工具,不需要额外安装插件了。
④ CodeVonc Proc3durale-镂空腐蚀溶洞效果插件
这是一款风格化的效果插件,可以配合噪波制造出独一无二的风化、镂空、分解动画、甚至是流体动画的效果,在产品设计及品牌动态视频中运用广泛。
(图来源于网络侵删)
⑤ TerraformFX-地形插件
这块地形插件,可以让你轻易搭建自然环境,制作次时代的虚幻场景,操作简单,可以在 Cinema 4D 中生成、动画和逼真的地形。在几秒钟内创建非常详细的山脉、峡谷和沙漠。直观的非破坏性工作流程可以轻松创建和自定义地形。
(图来源于网络侵删)
三、实战 在入门的学习和上手的练习之后,相信很多人都会对 C4D 有了初步的掌握。这时更重要的当然是将这些学到的知识点运用到实际项目当中,这样的实战操作才能让你的知识体系更有针对性,并且实际项目命题固定、要求更高,完成后的提升才会更大。
这里分享几个在完成基础的学习与练习后,我们用 C4D 做的实际项目。
1. QQ 小游戏-春节会场
小游戏会场是从 QQ 春节活动的主会场进入,通过限时抽奖以及游戏任务等形式,引导用户参与活动,从而提升业务增长和助力品牌传播。
在前期设计推导阶段,我提炼了三个设计关键词,并对应发散出一些相关元素:
一是游戏:这是凸显平台特色和趣味性的元素;
二是福利:这是强化用户参与活动的动机;
三是春节:春节活动不可少的是体现节日氛围的元素;
根据这些元素画了三个方向的概念草图,分别以游戏机、扭蛋机、街机作为主要载体。
最终我们选择了通过破窗的形式将 Q 猛虎结合进场景中的方向一,展示游戏和夺宝元素,让用户感知福利的同时,也体现小游戏平台的特色和趣味性。
创意上是参照超级玛丽这种经典的横版过关形式,也将中国传统建筑中的红墙金瓦、松树、福袋这些元素融入在了画面中。
游戏机场景及其他主要元素建模
场景白模及空间构成设定
角色及福袋动态的制作,这里主要用到了角色及动力学模块相关的一些知识点。
渲染完成后的主视觉,Q 猛虎在游戏机上往前奔跑,不断获得福袋并蹦出金币、红包
实际 UI 中的应用效果
实际 UI 中的应用效果
另外将主视觉中的“松树”,延展成了松、竹、梅、兰这四种具有传统中国风的植物,作为辅助元素运用到页面中,保持整体调性的统一。
部分主要页面总览
2. QQ 红包-节日封皮
节日红包封皮是传递用户关怀的重要手段,作为 QQ 红包的一部分,我们希望让用户有更新颖的感知和更深刻的共鸣。
相对于常规的插画手绘风格,我们希望尝试用 3D 的方式做一些新的探索。
在构思中秋节的红包封皮时,首先围绕“中秋”进行关键词发散
再选取其中桂树、玉兔、明月等这几个适合构建场景的元素,构建成一个立体化的场景
将一些元素抽象化,结合 3D 手法,加入更有意境的表达
最终完成的效果,整体也是塑造一个比较有中国风和意境的场景
新年封皮也是用同样的方式完成,像刚才中秋的桂花树一样,这里也将锦鲤也做了一些抽象化的表达,比如鱼的眼睛是宝石质感,鱼的身体是黄金质感,传递一种新年好运、财运连连的感觉。
最终完成的效果,QQ 和 banyQ 坐在锦鲤背上,手上拿着铜钱串在吊锦鲤,寓意新年大吉大利、锦鲤附体。
新版封皮的使用量对比旧版有了较大提升,可以看出用户对新版封皮的喜爱程度还是很高的,目前的节日封皮也是按照新风格持续延展中。
四、结语 以上就是本文的全部内容,希望能帮助大家在学习 C4D 的过程中有所帮助,总结下来就是多看多练多运用。对文中提到的插件感兴趣的朋友,也可以通过附上的链接去官网了解更多详细介绍。若是大家有更好的学习建议,也欢迎在评论区留言一起讨论。
欢迎关注作者微信公众号:「腾讯ISUX」
-
从入门到实战!腾讯高手总结的C4D自学必备指南
UI交互 2023-02-06导语近年三维表现已经越来越多的融入到各种商业设计当中,在电商、品牌、UI、影视等各个领域都有广泛的运用。其中一个关键因素是 C4D 这款软件的出现,大大降低了 3D 设计的学习门槛。C4D 相对于专业性更强、功能较为复杂的 3DMax、Maya、ZBrush 等软件,界面更加简洁友好,对于没有接触过 3D 的的小...导语
近年三维表现已经越来越多的融入到各种商业设计当中,在电商、品牌、UI、影视等各个领域都有广泛的运用。其中一个关键因素是 C4D 这款软件的出现,大大降低了 3D 设计的学习门槛。
C4D 相对于专业性更强、功能较为复杂的 3DMax、Maya、ZBrush 等软件,界面更加简洁友好,对于没有接触过 3D 的的小白,学习成本更低。配合 Octane、Redshift 等渲染器,可以很快做出强视觉表现力的效果。凭借这种操作友好、易出效果的特性, C4D 很快成为了近年最流行的 3D 设计软件之一。
本文结合作者自身的经验整理了一波自学的思路和技巧,希望能在大家学习 C4D 的过程中有所帮助。
更多C4D学习方法:
玩转C4D!腾讯高手的3D视觉设计必备指南 导语 随着三维视觉逐渐向二维视觉领域渗透,视觉 3D 化已经成为当下非常热门的一种表现形式 3D 技能也已经加入了视觉设计师必备技能包中。
阅读文章 >
前言
相信很多没有三维设计基础的小白,刚接触到 C4D 时会有无从下手的感觉,面对各种形形色色的命令菜单和工具面板,内心是这样的:
其实大可不必担心,不同方向的设计师可以有不同的侧重点,只要掌握自身职业需要的模块,并不需要学会所有的功能。追求大而全反而难度大效率低,容易产生挫败感从而被劝退。
所以这里建议的 C4D 学习思路是:结合自身的职业方向,先明确要学习的侧重点,集中精力突破,然后再根据新的需要逐步学习更多即可。
学习过程则大体上分为入门、上手、实战三个阶段。
一、入门 1. 明确学习方向
C4D 大体可以分为建模、渲染、角色、动画、运动图形、动力学这几个模块,每个模块都可以看成是独立的知识体系,往下又有更具体的细分。真要全面仔细钻研的话,需要投入很多的时间精力,这也是让很多初学者无从下手甚至望而却步的原因。
所以除了建模和渲染是绕不开的基本模块,我们可以将另外几个看成是比较具有针对性的模块,具体需要着重学习哪一部分,则需要先明确最适合自己的学习方向:
比如你是电商设计师,平时的工作内容主要是制作各种产品高大上的渲染图以及推广视频,那除了基本的建模与渲染,还可以着重学习运动图形,做出各种酷炫的商业广告视频;
如果你是 IP 设计师,则需着重学习角色模块,在完成静态角色的建模渲染后,绑骨骼刷权重也是必须掌握的知识点,才能做出丰富的动作和表情,让角色生动起来;
总之,不同职业方向,甚至项目的不同时期,都有不同的学习侧重点,这里需要每个人自己去判断。
建模和渲染则是最常用的两个模块,无需有职业方向的针对性,都应该在前期优先学习,并且做到基本掌握甚至熟练运用。
常规的步骤是先学习建模,再学习渲染;不过建模比较枯燥,渲染则是最出效果也是最提升学习信心的环节,我认为根据个人喜好,先学渲染再学建模,反而是更推荐的学习顺序。
2. 选择学习资源
选择学习资源方面,目前网络的免费教程十分丰富,依靠教程的学习足以让你初期快速的上手,新手在选择教程方面尽量以体系较为完整,演示时软件版本较好的原则,如英文水平较好建议去外网看看各路大神的教程,原汁原味的学习;另外考虑到外网资源的机翻和获取难度的原因,这里主要推荐一些国内网络能获取自学资源:
① 建模
建模方面在学习阶段主要注重 C4D 的工具使用和基础技巧,这里推荐几个免费教程。
https://www.bilibili.com/video/BV1Cb411T7Dc https://www.bilibili.com/video/BV1PZ4y1s7vm ② 渲染
渲染以 OC 渲染器为例,这是现网能找到比较完整的免费教程,学习后可以直接上手出图。
https://www.bilibili.com/video/BV1ur4y1T72V https://www.bilibili.com/video/BV1f4411V7qh ③ 动力学
动力学可以由浅入深,从基础的常用动态手法及运动原理开始入手,以小实例练习的方式慢慢转向大场景的动态设计学习。
https://www.bilibili.com/video/BV17f4y127uv/ https://www.bilibili.com/video/BV1ZA411w7qC/ ④ 更多综合性实战教程
各大网站都能找到不少实战案例的教程,根据需要可以找到更多。
https://www.bilibili.com/video/BV177411P7d1 https://www.bilibili.com/video/BV1AY4y1G7Nc 3. 软硬件配置相关
打团下副本之前,还得先准备一下装备;这里简单对于萌新学习前的软硬件要求做一些说明和推荐。
① 渲染器选择
C4D 目前可选主流的渲染器有 octane、阿诺德、Redshift、vray、自带渲染器(不推荐)。主流渲染器各有优缺点,综合下来笔者推荐萌新选择 OC 渲染器,原因是学习资源多,学习难度低,渲染效果优、渲染速度快等优点。
以下是各渲染器的对比,萌新们可权衡自身的情况进行选择:
② 电脑配置
在 PC 电脑方面,以笔者正版 OC4.0 渲染器为例,显卡选择 N 卡,型号以 20 系列以上最好,显存 4G 以上(有经费的可以入手今年的 40 系列显卡);其他配置看自己的经济情况而定,如 CPU 方面单核性能越强对于渲染效率和 c4d 默认渲染器的加速越快,内存推荐 64G 以上,另外在电源上如果已经配备了 20 系列以上的显卡建议选择 900W 以上的,除了显卡和 CPU 这两个核心硬件其他的配置主要看个人情况而定,对电脑不懂的优先看电商平台的整机方案,主要以显卡和 cpu 为参考依据,其他的配置可浮动选择。
在苹果电脑方面,笔者并不推荐以 3d 工作为主的设计师选择苹果电脑,主要原因是主流渲染器的选择较少,另外 C4D 插件各方面的支持也远不如 PC 方便和丰富(如有特殊原因,可以优先选择 M1 芯片的电脑或者配备 N 卡独显的苹果电脑)。
③ 软件版本
C4D 软件版本推荐使用最新版本或者 R23 以上版本,随着厂商的更新换代,有些以前只有插件能完成的功能慢慢完善在新版本上,新版本带来的便捷功能可提高萌新的出图效率并免去旧版本没有兼顾的功能导致的学习成本浪费问题。
另外在 OC 渲染器上的版本问题尽量以当前版本能兼容的最新 OC 为主,当然,需要你的显卡需要和 OC 版本是匹配的情况下。
4. 好记性不如烂笔头
收藏和观看的教程多了,容易看了后面的忘记前面的,或者没有实际上手印象不深。这里我尝试过最好用的方法可以总结为一句话,就是俗话说的“好记性不如烂笔头”。
对于一些关键的知识点,或者很有用的上手练习案例,可以在自己学习或者练习后,将关键步骤以在线笔记的形式自己整理一遍。
这样做有两个好处,一是能大大加深你对知识点的印象,不易遗忘;二是即使真的隔了很长时间有所遗忘,只要调出对应的文字笔记,就能很快重新想起对应知识点,比起重新翻出视频教程,边拖进度条检索再看一遍,效率高得多。
比如我之前在学习渲染体积光效果(丁达尔效应)时,总是掌握的不扎实,学过就忘,下回再用到时,基本相当于又要翻出视频教程再看一遍,效率很低。但是将关键知识点整理成笔记后,不单对这个知识点记得很牢,甚至能在不重新翻看笔记和教程的条件下,熟练的以教程中提到的三种不同方式做出体积光。
笔记链接: https://note.youdao.com/s/Lwt42DsG
以下是我整理的部分笔记库,感觉在笔记库里的知识点才算是比较掌握了的。
5. 多搜集优秀案例
除了掌握工具,多看优秀案例以提升自己的设计思维和审美也很重要,只有看的优秀案例够多够好,将自己的设计眼光、审美水平、思考方式向大神们的靠拢,才能做出好的作品。
这里推荐几个我觉得的很赞的 3D 类网站:
Artstation: http://www.artstation.com ; Sketchfab: https://sketchfab.com/feed ; Behance 3D: https://www.behance.net/galleries/3d-art ; Dribbble 3D: https://dribbble.com/search/3d ;
二、上手 1. 熟能生巧多练习
上手阶段,充分的动手练习是必不可少的。
这里的练习也分为两种,一种是跟随教程案例做出一样的效果,一种则是结合自己感兴趣的题材设定一个主题或场景,将学习的知识点融会贯通,在自己的命题作品里实际应用起来。两种练习的方式也是相辅相成,在积累足够多的教程案例练习后,更推荐按照自己的想法来创作。
比如我会将自己感兴趣的漫画题材,在 C4D 里作为一个场景练习,融合进平时学的一些知识点。
《头文字 D》场景
《海贼王》场景
因为用的是自己感兴趣的内容练习,所以做起来也上手很快,知识点也记得很牢,推荐大家可以试试。
2. 善用插件提效率
① Forester-植物生成插件
轻松生成各种类型的植物和部分岩石,各项小参数的调整方便个性化的调整,另外有便捷的动力系统可以轻松制作风吹植物的效果,结合 OC 渲染器的克隆功能搭建大场景非常轻松,适合在做动态设计的时候快速生成搭建场景。
② QuadRemesher-四边面重拓补
有时候我们工作中会遇到三角面模型,对于新手来说转换成四角面模型可以选择这款插件轻松转换成你想要的四角面而且还有便捷的参数可以调整。
③ PolyCircle-挖洞插件及 Nitro4D NitroCap-封洞插件
在日常建模的工作中经常需要给模型开洞及封洞的操作,虽然靠布线调整也可以实现,但是插件的效率更便捷,所以推荐这两款插件分别对应的模型开洞及模型封洞的功能,另外注意在 C4D 软件 R26 之前都是必备的插件,但如果你软件版本是 R26 以上版本,那么自带整合了这样的工具,不需要额外安装插件了。
④ CodeVonc Proc3durale-镂空腐蚀溶洞效果插件
这是一款风格化的效果插件,可以配合噪波制造出独一无二的风化、镂空、分解动画、甚至是流体动画的效果,在产品设计及品牌动态视频中运用广泛。
(图来源于网络侵删)
⑤ TerraformFX-地形插件
这块地形插件,可以让你轻易搭建自然环境,制作次时代的虚幻场景,操作简单,可以在 Cinema 4D 中生成、动画和逼真的地形。在几秒钟内创建非常详细的山脉、峡谷和沙漠。直观的非破坏性工作流程可以轻松创建和自定义地形。
(图来源于网络侵删)
三、实战 在入门的学习和上手的练习之后,相信很多人都会对 C4D 有了初步的掌握。这时更重要的当然是将这些学到的知识点运用到实际项目当中,这样的实战操作才能让你的知识体系更有针对性,并且实际项目命题固定、要求更高,完成后的提升才会更大。
这里分享几个在完成基础的学习与练习后,我们用 C4D 做的实际项目。
1. QQ 小游戏-春节会场
小游戏会场是从 QQ 春节活动的主会场进入,通过限时抽奖以及游戏任务等形式,引导用户参与活动,从而提升业务增长和助力品牌传播。
在前期设计推导阶段,我提炼了三个设计关键词,并对应发散出一些相关元素:
一是游戏:这是凸显平台特色和趣味性的元素;
二是福利:这是强化用户参与活动的动机;
三是春节:春节活动不可少的是体现节日氛围的元素;
根据这些元素画了三个方向的概念草图,分别以游戏机、扭蛋机、街机作为主要载体。
最终我们选择了通过破窗的形式将 Q 猛虎结合进场景中的方向一,展示游戏和夺宝元素,让用户感知福利的同时,也体现小游戏平台的特色和趣味性。
创意上是参照超级玛丽这种经典的横版过关形式,也将中国传统建筑中的红墙金瓦、松树、福袋这些元素融入在了画面中。
游戏机场景及其他主要元素建模
场景白模及空间构成设定
角色及福袋动态的制作,这里主要用到了角色及动力学模块相关的一些知识点。
渲染完成后的主视觉,Q 猛虎在游戏机上往前奔跑,不断获得福袋并蹦出金币、红包
实际 UI 中的应用效果
实际 UI 中的应用效果
另外将主视觉中的“松树”,延展成了松、竹、梅、兰这四种具有传统中国风的植物,作为辅助元素运用到页面中,保持整体调性的统一。
部分主要页面总览
2. QQ 红包-节日封皮
节日红包封皮是传递用户关怀的重要手段,作为 QQ 红包的一部分,我们希望让用户有更新颖的感知和更深刻的共鸣。
相对于常规的插画手绘风格,我们希望尝试用 3D 的方式做一些新的探索。
在构思中秋节的红包封皮时,首先围绕“中秋”进行关键词发散
再选取其中桂树、玉兔、明月等这几个适合构建场景的元素,构建成一个立体化的场景
将一些元素抽象化,结合 3D 手法,加入更有意境的表达
最终完成的效果,整体也是塑造一个比较有中国风和意境的场景
新年封皮也是用同样的方式完成,像刚才中秋的桂花树一样,这里也将锦鲤也做了一些抽象化的表达,比如鱼的眼睛是宝石质感,鱼的身体是黄金质感,传递一种新年好运、财运连连的感觉。
最终完成的效果,QQ 和 banyQ 坐在锦鲤背上,手上拿着铜钱串在吊锦鲤,寓意新年大吉大利、锦鲤附体。
新版封皮的使用量对比旧版有了较大提升,可以看出用户对新版封皮的喜爱程度还是很高的,目前的节日封皮也是按照新风格持续延展中。
四、结语 以上就是本文的全部内容,希望能帮助大家在学习 C4D 的过程中有所帮助,总结下来就是多看多练多运用。对文中提到的插件感兴趣的朋友,也可以通过附上的链接去官网了解更多详细介绍。若是大家有更好的学习建议,也欢迎在评论区留言一起讨论。
欢迎关注作者微信公众号:「腾讯ISUX」
-
系统干货!4个章节帮你掌握声音体验设计的秘密
UI交互 2023-02-05在这个互联网信息爆炸的时代,我们每天都会接触不同的产品,在日常的 UX 设计中,设计师往往会关注产品的界面是不是好看,交互是不是便捷,而声音设计是最容易被忽略的:天猫精灵的人声音效,饭烧好后小米电饭锅发出的提示音……不可否认的是,声音在我们的生活中方方面面扮演着重要的角色。恰好笔者最近在阅读《声音体验设计》,总结...在这个互联网信息爆炸的时代,我们每天都会接触不同的产品,在日常的 UX 设计中,设计师往往会关注产品的界面是不是好看,交互是不是便捷,而声音设计是最容易被忽略的:天猫精灵的人声音效,饭烧好后小米电饭锅发出的提示音……不可否认的是,声音在我们的生活中方方面面扮演着重要的角色。恰好笔者最近在阅读《声音 体验设计 》,总结了一些心得体会,与各位分享。
更多 声音设计 干货:
连声音都是细节!阿里设计师总结的10个声音设计要点 声音设计长久以来一直在影视、音乐、游戏领域发展与发挥价值,作为在阿里巴巴的体验设计师,以前并没有太多的机会去以声音作为设计手段。
阅读文章 >
一、声音是如何产生的
声音是由振动产生的声波,通过介质(空气或固体、液体)传播并能被人或动物听觉器官所感知的波动现象。好,此刻,请你停下来,把你的右手放在喉咙的位置,然后尝试发出“啊”的声音,你是不是会感受到喉咙有明显的振动感?那是因为你的声带振动产生了声波,通过空气传播并被你的耳朵所感知。由此可见,声音的产生离不开物体的振动、传播的介质以及人或动物的听觉器官。此外,声音有三个重要特性,即音调、响度和音色。
音调指声音的高低,是由频率决定,频率越高音调越高。
响度又称音量,人耳感受到的声音强弱,它是人对声音大小的主观感觉量。
音色指的是声音的品质,与发声体的材料和结构等自身因素有关。
我们在清晨能听到小鸟的叫声不是因为其响度高而是因为小鸟声音的频率很高,而摩托车的隆隆声又低又深是因为其声音频率低响度高。
二、为什么我们需要声音 声音是我们连接世界,连接其他人最本能,最强大的方式。
研究表明,人的感官从外界获取的信息里,视觉占 60%,听觉占 20%,触觉占 15%,味觉和嗅觉分别是 3%和 2%。另外,人对视觉的感知时间为 189 秒,而对声音的感知时间仅需 146 秒。虽然通过视觉获取的信息量占据了绝大部分,但人对于声音的反应速度要快于其他所有的感官刺激。由此就可以解释,为什么跑步运动员的起跑提示是听发令枪而非看倒计时了。
1. 声音包含情绪
听是一种被动并时刻发生的行为,声音可使听者自发且直接产生情绪反馈。音乐就是最常见的一种通过声音进行情绪表达的方式。我们通过视频号观看演唱会,其实不光光听的是音乐本身,歌手饱含情怀的演唱、评论区实时滚动的字幕, 或许能够唤醒你生命中的一些难忘记忆,让人的情感达到共鸣,这是听觉和视觉所带来的震撼力。
2. 声音包含信息
声音能够通过其特有的通道表达眼睛“看不见”的信息。多邻国作为一款风靡全球的语言学习工具软件,通过闯关式的答题形式,伴随情感化的动效和游戏化的音效提示让使用者爱不释手。答题正确和错误时系统出现的差异化提示音清晰地传达了正确和错误的信息,带给用户积极的正向反馈。
3. 声音包含品牌特性
你还记得每次走进全家便利店时听到的那个音乐旋律吗?声音标识也属于企业品牌的一部分,企业通过创造那些打破陈规的声音触发器,以此捕获消费者的注意力,然后利用这些注意力唤醒消费者头脑中与品牌相关的正面体验。好的声音能够给用户留下深刻印象,以至于下一次听到声音就能想到这个品牌,比如英特尔那段洗脑的标志性音乐“灯,等灯等灯”就是一个非常好的案例。
图自 sankeibiz.jp
4. 声音能降低认知负荷
著名的研究人员马克·韦塞尔曾说过,“我们需要的是更聪明的人类,而不是更聪明的设备”,注意力将是未来最稀缺的资源,而如果让用户以最小的注意力来达成目标是我们需要关注的。每个人的注意力总量是有限的,但是我们可以通过将不同精度注意力分配在不同复杂程度的任务上来以缓解用户在同一时间处理多个任务时的压力,从而提升任务处理效率。当你在驾车时,几乎所有注意力都集中于看路况,偶尔看一下后视镜以及指示灯的状态,而地图 导航 的语音播报功能其实是利用了对人的注意力精度要求最低的环境知觉,利用了活跃的听觉通道,不仅减轻了对其他通道的占用,还能避免因视觉误差带来的潜在危险,降低用户的认知负荷。
三、常见的提示音事件 当你使用手机拍照的时候,按下“拍照”按钮后系统发出的“咔嚓声”是不是似曾相识?数字世界里的许多声音来源于现实世界,手机本身没有快门,但是设计师从已知世界中获取灵感,给手机重新设计快门声音,让手机拍照用起来和胶片相机一样。
有的声音提示可以帮助人们获取反馈,以确保用户的操作是正常进行的,比如手机按键声、数码相机快门声;有的声音能帮助人们获取信息,减少人们出错的概率,比如安全带提示音、行驶方向提示音。按照声音类型我们可以对其分成四种类型,包含机械类、反馈类、信息类和状态提示类。
四、声音设计法则 1. 声音设计第一法则:我需要在这里添加声音吗
和界面设计一样,在声音设计里我们也需要遵循“Less is More”的原则。站在使用者的角度想象一下,当你在厨房烧饭被油烟机的轰轰声吵得脑壳疼的时候,手里拿着的铁锅铲和锅碰撞产生的“哐哐”声,电热水壶、电饭锅、烤箱、搅拌机的声音同时响起,是不是会有再也不想在厨房多待一秒的想法?声音设计的首要法则是,考虑用户是不是真的需要声音,出现声音的场景是什么,如果有可能的话,我们可以用其他方式来提醒用户吗(比如换成闪烁的指示灯)?
2. 让声音听起来简单
在 shopify 设计系统的官方网站里,对于声音的时长描述为:“短音不超过 250ms,长音不超过 1 秒”。
过长的提示音会让用户觉得拖沓厌烦,过短的提示音则无法让用户明确感知。比如我们经常听到的 QQ 软件里的“咳~咳”咳嗽声表示收到系统消息,“咚咚咚”敲门声表示有好友上线,“滴滴~滴滴”表示有人给你发消息了,这些声音虽然听起来简单却是有意义的。
3. 在合适的情境发声
就像做界面设计一样,作为设计师我们大部分时间是在办公室电脑桌前做设计,但很少有人能真正站在用户的使用场景去思考问题。如果你设计的一款手机被用户放在口袋或者书包里,这个时候有人打电话来了,用户却无法听到来电声怎么办?如果用户此时正在开会,但手机铃声突然响起了怎么办?考虑用户一天中的时间或活动,确保产品在各种方便和不方便的场景下都进行相应测试,可以防止多种错误的假设出现。
4. 协调多维度感官体验
通常情况下,声音不会作为一个单独通道出现,考虑听觉、触觉、视觉的统一性很有必要。当你走进一家看起来很有情调的咖啡馆,一进门就能闻到浓浓的咖啡豆香,店里贴满了富有年代感的海报,可是播放的却是让人抓狂的重金属音乐,是不是让你体验特别糟糕?
5. 注意声音的重复容差
研究表明,用户对声音的容忍度是有限的,声音越复杂越重复,阈值就会明显降低。有些声音每天会出现很多次,也许初次听到用户会觉得声音很好听,但是当一天中这个声音到达十次甚至是百次的时候,用户就会觉得厌烦。因此我们的声音应该是信息丰富的,而不是烦人的。
写在最后 “收音机与电视机很像,只是电视机有画面。如果视觉阻断了更多可能性,那么听觉就带来了更多的可能性。”
声音可以表达出影像外形无法表达出来的信息,为用户提供更好更直接的体验。设计师常说“细节决定成败”,而声音体验设计是我们在日常工作中不可忽视的“细节”,牢牢抓住这个细节,能够为我们的产品体验提升带来更多的可能性。
参考
Shopify 设计系统: https://polaris.shopify.com/design/sounds 《声音体验设计》 [美]Amber Case / [德]Aaron Day /
-
系统干货!4个章节帮你掌握声音体验设计的秘密
UI交互 2023-02-05在这个互联网信息爆炸的时代,我们每天都会接触不同的产品,在日常的 UX 设计中,设计师往往会关注产品的界面是不是好看,交互是不是便捷,而声音设计是最容易被忽略的:天猫精灵的人声音效,饭烧好后小米电饭锅发出的提示音……不可否认的是,声音在我们的生活中方方面面扮演着重要的角色。恰好笔者最近在阅读《声音体验设计》,总结...在这个互联网信息爆炸的时代,我们每天都会接触不同的产品,在日常的 UX 设计中,设计师往往会关注产品的界面是不是好看,交互是不是便捷,而声音设计是最容易被忽略的:天猫精灵的人声音效,饭烧好后小米电饭锅发出的提示音……不可否认的是,声音在我们的生活中方方面面扮演着重要的角色。恰好笔者最近在阅读《声音 体验设计 》,总结了一些心得体会,与各位分享。
更多 声音设计 干货:
连声音都是细节!阿里设计师总结的10个声音设计要点 声音设计长久以来一直在影视、音乐、游戏领域发展与发挥价值,作为在阿里巴巴的体验设计师,以前并没有太多的机会去以声音作为设计手段。
阅读文章 >
一、声音是如何产生的
声音是由振动产生的声波,通过介质(空气或固体、液体)传播并能被人或动物听觉器官所感知的波动现象。好,此刻,请你停下来,把你的右手放在喉咙的位置,然后尝试发出“啊”的声音,你是不是会感受到喉咙有明显的振动感?那是因为你的声带振动产生了声波,通过空气传播并被你的耳朵所感知。由此可见,声音的产生离不开物体的振动、传播的介质以及人或动物的听觉器官。此外,声音有三个重要特性,即音调、响度和音色。
音调指声音的高低,是由频率决定,频率越高音调越高。
响度又称音量,人耳感受到的声音强弱,它是人对声音大小的主观感觉量。
音色指的是声音的品质,与发声体的材料和结构等自身因素有关。
我们在清晨能听到小鸟的叫声不是因为其响度高而是因为小鸟声音的频率很高,而摩托车的隆隆声又低又深是因为其声音频率低响度高。
二、为什么我们需要声音 声音是我们连接世界,连接其他人最本能,最强大的方式。
研究表明,人的感官从外界获取的信息里,视觉占 60%,听觉占 20%,触觉占 15%,味觉和嗅觉分别是 3%和 2%。另外,人对视觉的感知时间为 189 秒,而对声音的感知时间仅需 146 秒。虽然通过视觉获取的信息量占据了绝大部分,但人对于声音的反应速度要快于其他所有的感官刺激。由此就可以解释,为什么跑步运动员的起跑提示是听发令枪而非看倒计时了。
1. 声音包含情绪
听是一种被动并时刻发生的行为,声音可使听者自发且直接产生情绪反馈。音乐就是最常见的一种通过声音进行情绪表达的方式。我们通过视频号观看演唱会,其实不光光听的是音乐本身,歌手饱含情怀的演唱、评论区实时滚动的字幕, 或许能够唤醒你生命中的一些难忘记忆,让人的情感达到共鸣,这是听觉和视觉所带来的震撼力。
2. 声音包含信息
声音能够通过其特有的通道表达眼睛“看不见”的信息。多邻国作为一款风靡全球的语言学习工具软件,通过闯关式的答题形式,伴随情感化的动效和游戏化的音效提示让使用者爱不释手。答题正确和错误时系统出现的差异化提示音清晰地传达了正确和错误的信息,带给用户积极的正向反馈。
3. 声音包含品牌特性
你还记得每次走进全家便利店时听到的那个音乐旋律吗?声音标识也属于企业品牌的一部分,企业通过创造那些打破陈规的声音触发器,以此捕获消费者的注意力,然后利用这些注意力唤醒消费者头脑中与品牌相关的正面体验。好的声音能够给用户留下深刻印象,以至于下一次听到声音就能想到这个品牌,比如英特尔那段洗脑的标志性音乐“灯,等灯等灯”就是一个非常好的案例。
图自 sankeibiz.jp
4. 声音能降低认知负荷
著名的研究人员马克·韦塞尔曾说过,“我们需要的是更聪明的人类,而不是更聪明的设备”,注意力将是未来最稀缺的资源,而如果让用户以最小的注意力来达成目标是我们需要关注的。每个人的注意力总量是有限的,但是我们可以通过将不同精度注意力分配在不同复杂程度的任务上来以缓解用户在同一时间处理多个任务时的压力,从而提升任务处理效率。当你在驾车时,几乎所有注意力都集中于看路况,偶尔看一下后视镜以及指示灯的状态,而地图 导航 的语音播报功能其实是利用了对人的注意力精度要求最低的环境知觉,利用了活跃的听觉通道,不仅减轻了对其他通道的占用,还能避免因视觉误差带来的潜在危险,降低用户的认知负荷。
三、常见的提示音事件 当你使用手机拍照的时候,按下“拍照”按钮后系统发出的“咔嚓声”是不是似曾相识?数字世界里的许多声音来源于现实世界,手机本身没有快门,但是设计师从已知世界中获取灵感,给手机重新设计快门声音,让手机拍照用起来和胶片相机一样。
有的声音提示可以帮助人们获取反馈,以确保用户的操作是正常进行的,比如手机按键声、数码相机快门声;有的声音能帮助人们获取信息,减少人们出错的概率,比如安全带提示音、行驶方向提示音。按照声音类型我们可以对其分成四种类型,包含机械类、反馈类、信息类和状态提示类。
四、声音设计法则 1. 声音设计第一法则:我需要在这里添加声音吗
和界面设计一样,在声音设计里我们也需要遵循“Less is More”的原则。站在使用者的角度想象一下,当你在厨房烧饭被油烟机的轰轰声吵得脑壳疼的时候,手里拿着的铁锅铲和锅碰撞产生的“哐哐”声,电热水壶、电饭锅、烤箱、搅拌机的声音同时响起,是不是会有再也不想在厨房多待一秒的想法?声音设计的首要法则是,考虑用户是不是真的需要声音,出现声音的场景是什么,如果有可能的话,我们可以用其他方式来提醒用户吗(比如换成闪烁的指示灯)?
2. 让声音听起来简单
在 shopify 设计系统的官方网站里,对于声音的时长描述为:“短音不超过 250ms,长音不超过 1 秒”。
过长的提示音会让用户觉得拖沓厌烦,过短的提示音则无法让用户明确感知。比如我们经常听到的 QQ 软件里的“咳~咳”咳嗽声表示收到系统消息,“咚咚咚”敲门声表示有好友上线,“滴滴~滴滴”表示有人给你发消息了,这些声音虽然听起来简单却是有意义的。
3. 在合适的情境发声
就像做界面设计一样,作为设计师我们大部分时间是在办公室电脑桌前做设计,但很少有人能真正站在用户的使用场景去思考问题。如果你设计的一款手机被用户放在口袋或者书包里,这个时候有人打电话来了,用户却无法听到来电声怎么办?如果用户此时正在开会,但手机铃声突然响起了怎么办?考虑用户一天中的时间或活动,确保产品在各种方便和不方便的场景下都进行相应测试,可以防止多种错误的假设出现。
4. 协调多维度感官体验
通常情况下,声音不会作为一个单独通道出现,考虑听觉、触觉、视觉的统一性很有必要。当你走进一家看起来很有情调的咖啡馆,一进门就能闻到浓浓的咖啡豆香,店里贴满了富有年代感的海报,可是播放的却是让人抓狂的重金属音乐,是不是让你体验特别糟糕?
5. 注意声音的重复容差
研究表明,用户对声音的容忍度是有限的,声音越复杂越重复,阈值就会明显降低。有些声音每天会出现很多次,也许初次听到用户会觉得声音很好听,但是当一天中这个声音到达十次甚至是百次的时候,用户就会觉得厌烦。因此我们的声音应该是信息丰富的,而不是烦人的。
写在最后 “收音机与电视机很像,只是电视机有画面。如果视觉阻断了更多可能性,那么听觉就带来了更多的可能性。”
声音可以表达出影像外形无法表达出来的信息,为用户提供更好更直接的体验。设计师常说“细节决定成败”,而声音体验设计是我们在日常工作中不可忽视的“细节”,牢牢抓住这个细节,能够为我们的产品体验提升带来更多的可能性。
参考
Shopify 设计系统: https://polaris.shopify.com/design/sounds 《声音体验设计》 [美]Amber Case / [德]Aaron Day /
-
设计师如何做好体验量化?收下大厂的QMD评测机制(组织篇)
UI交互 2023-02-04本篇将介绍如何有序组织体验评估,并将详细讲解本次 QMD 升级的要点、难点是如何落地执行的。上期回顾:设计师如何做好体验量化?收下大厂的QMD评测机制(机制篇)秉承 58 同城“用户第一”的核心价值观,设计团队建立以基础体验指标为评估标准、发掘体验问题的评估机制,并借助内外部业务专家视角,对 58 同城各产品的重...本篇将介绍如何有序组织体验评估,并将详细讲解本次 QMD 升级的要点、难点是如何落地执行的。
上期回顾:
设计师如何做好体验量化?收下大厂的QMD评测机制(机制篇) 秉承 58 同城“用户第一”的核心价值观,设计团队建立以基础体验指标为评估标准、发掘体验问题的评估机制,并借助内外部业务专家视角,对 58 同城各产品的重点场景进行评估,优化业务场景,从而提升各业务线的体验,而这一套评测机制就是 QMD。
阅读文章 >
我们选用质量管理工具 PDCA 来组织体验评估,做体验管理。以季度为评估周期,一个季度完成一次 PDCA 循环后,我们持续迭代评估体系,从而更好的完成下一个周期的体验评估。
一、策划 策划的主要内容就是大家很熟悉的 5W1H 了。
1. 评估目标-Why
如第一篇文章所述,新的体验评估机制,评估目标从单一的提升体验质量,调整成契合业务目标的体验质量。
参与体验评估,业务设计师的预期有:
提升产品使用体验; 提升业务核心指标。 QMD 项目组需要兼顾参与评估业务的预期,目标有:
采用可靠的评估机制,度量契合业务目标的体验,发掘影响业务目标的体验问题,确保评估结果可信、可靠并易感知; 确保按照规划周期性做体验评估、同步结论、跟进优化; 验证各个参评业务的评估指标、评估机制的可靠性。 2. 相关人员-Who
想要按照以上预期高质量的完成体验评估,离不开组织架构的支持。58UXD 设立了由交互设计师和用研工程师组成的体验管理组。由体验管理组来组织全部业务的体验考核、体验评估、体验展示、体验跟进等一系列横向体验管理项目。QMD 作为体验管理的重要工具,由体验管理组中的 QMD 项目组来牵头策划完成。有同学对 58UXD 其他体验管理工具感兴趣的话,可以在评论区留言。
明确了组织方及其职责,根据新的评估机制,还需要每个业务 6 名评估专家(2 名产品、2 名交互、2 名视觉)。QMD 项目组采取了参评业务产品、交互、视觉交叉互评的方式,由第二篇文章介绍的评分者信度保障结果的可靠性。
在新的体验评估机制下,有很多 QMD 项目组和业务 设计师 需要沟通协作的节点。为了高效运行评估机制,QMD 项目组在各个参评业务都明确了一位 QMD 对接人。
各个角色的职责明确如下:
3. 评估业务-What
新的体验评估机制对参评业务也有了新的要求。出于可行性和投入产出比的考虑,我们根据以下 4 点,深入了解各个业务的情况,做出研判,最终确定了参评业务。
当前阶段业务对于体验的重视程度如何; 业务是否有明确的、可持续监控的目标; 业务迭代的频率如何; 业务是否已达到一定用户规模。 4. 时间规划-When
如前所述,新的体验评估机制关键节点多,时间跨度长,需要周密的规划和严谨的时间管理。
QMD 项目组是以季度为单位做周期性体验评估的,所以在季度初就会做好整个季度的规划,并严格执行。同时采用周报制来及时处理意外事件,保障项目准时完成。
另外值得提一下评估场次时间的确定,除了视评估专家的时间安排外,也需要考虑线上测评的版本是否符合业务预期,晚几天可能就到了发版时间,是否需要评估最新版,需要综合情况和业务协商。同时也要求 QMD 项目组在规划之初,就要留好类似这种情况的 buffer。
5. 评估地点-Where
确定好评估时间,就可以提前约会议室了。
然而我们在 2022 年的 Q2 和 Q4,遇到了两次因疫情大量同事远程办公的情况。如此我们需要保证线上评估或者部分同学线上评估的结果可靠性。原理如第二篇文章所述,需要保障人员可靠性、认知一致性,标准化实施方案。
6. 怎么评估-How
给到专家评估,我们需要至少准备评分工具和主观问题反馈工具。这些都需要以评估指标为基础,我们从第一篇文章了解到指标的制定原理后,各个业务的评估指标具体怎么确定呢?
首先,调整基础指标:我们知道业务的评估指标由基础指标和自定义指标构成的,我们在制定指标前需要根据新的指标体系需要,重新审视原有的基础指标。我们认为一个良好的基础指标,应该是清晰、准确、普适、易懂的;我们邀请专家对这样的指标进行评估,应该是对体验设计有指导意义的。所以对基础指标做了如下调整:评估指标由原来的一级指标改为二级指标,颗粒度更细,聚焦到具体问题;相似指标合并,二级指标由 15 个合并成 10 个;增加动效、语义等方面的评估;评估指引描述方式更直白、易理解;等等。
我们把基础指标给到业务,由业务设计师参考以下几个原则制定个性化指标体系。
GSM 模型(Goal- Signal- Metric):方法在第一篇文章中; 反向思考:场景拆解到什么程度,可以结合业务的实际需要,由希望监控的颗粒度 有迹可循:场景的设计目标,需要是可量化、可监控的,一方面可以追踪优化效果,另一方面可以反向验证指标制定的合理性; 因地制宜:评估指标需要足够细化、贴合业务场景。比如基础指标中的“品牌”指标,在基础指标中的描述是“”,是考虑普适性的描述方式。而其在不同业务中的具体元素、形式、原则等体验要素都差别较大,所以需要额外说明当前业务的“品牌”具体需要达到什么体验要求。有些业务会额外提供一份品牌手册,供专家评估参考; 稳定性:指标体系内的元素需要在一定时间范围内保持稳定,尽量不因业务的调整而频繁变化。 有了细化的评估指标制定指引,我们向参评业务做了详尽的讲解,并充分探讨其在各个业务的可行性。业务设计师按照要求,结合实际情况,制定了由总目标、影响总目标的场景、场景的评估指标、评估指标的详细说明四个部分构成的指标体系。而后交由 QMD 项目组审核,确定无误后,由业务设计师根据模版,自行制定体验评估要用到的评分工具和主观问题反馈工具,这里我们用的分别是 58 问卷和在线协作表格。
二、评估 1. 体验评估
一切准备就绪后,就可以邀请专家来评估了。就像第二篇文章介绍的那样,为了保障评估结果的可靠性,我们对评估工具、专家、环境等都制定了标准化方案。下图是 QMD 项目组在专家评估前宣讲的评估目标、机制及评估注意事项。
2. 信度评估
专家评估后,我们就拿到了评分问卷和主观问题记录表的原始数据。首先最重要的一件事就是预处理评分数据,评估信度,完成校验闭环。我们采用的信度可靠对照关系如下:
如果第一次信度评估可靠程度不高,则需要调整数据组,重新进行信度评估,直至信度可靠。我们并非每一场体验评估都一帆风顺,在疫情期间远程体验评估时,我们就遇到了无论如何调整数据组都不能达到信度可靠的结果的情况。发现了这种情况,我们立即响应,临时邀约更多专家,快速加测了一场。欣慰的是,两场评估结果合并后,经过数据组调整,评分信度可靠。
3. 业务复议
通过第二篇文章我们知道,复议阶段的目标一是矫正部分理解有偏差的主观问题,二是让业务尽快了解 QMD 的结论,感受到其可靠可信,快速迭代优化问题。所以:
复议呈现给业务的内容有:评分、分数对比、对应的主观问题、截图等; 需要留给业务复议的反馈空间; 想要做体验评估的你,需要具备一定的数据分析基础和表格操作技巧。 4. 输出报告
报告是为了让体验评估结论更加直观、可信,便于查阅与传播。我们对报告做了一些调整:
① 评分和问题对应展示;
② 评分间差距标记更加清晰明了;
③ 增加 QMD 项目组的优化建议。希望业务重视分数洼地、不及竞品的指标对应的影响较大的主观建议。高优场景/指标/问题判断标准如下,供参考:
权重最高或较高; 和均值比差 10%/8%/5%/3%以上; 和竞品比差 10%/8%/5%/3%以上; 同比/环比差 10%/8%/5%/3%以上。 三、体验跟进 & 项目复盘 前面两篇文章介绍的体验评估指标体系和评估机制,是我们通过现状分析、理论分析等综合确定的,此时我们需要校验两点:
一是需要校验根据认知、经验主观拆解的评估指标是否符合预期;
二是需要校验 QMD 机制全程保障的专家评估结论是否可靠。
我们采取的校验方式,就是看体验评估的结论应用到业务的体验优化后,是否带来如预期程度的业务指标的提升。
所以我们在报告同步后,下一次体验评估前,留足业务改进优化的时间,组织参评业务复盘 QMD 结论落地情况。由各个业务阐述以下内容:
问题发掘&解决:QMD 报告分析&洞察、解决思路&方案、上线效果&数据、结论; 项目管理:优化进度、迭代计划。 同时为了激励、帮助业务设计师推动结论落地,我们邀请设计总监、设计负责人和高阶设计师从三个维度为业务复盘的内容打分、点评,包括逻辑合理度、指标结果相关度、进度。
同时 QMD 项目组收获了业务设计师对于整个体验评估机制的一些想法,结合组织过程遇到的问题和思考,做了周期性的复盘。
四、推广 & 改正 通过业务复盘及评委打分、点评,我们了解到业务的大部分迭代效果都是正向的,小部分负向效果的迭代需要尝试其他设计方案。所以目前没有因为复盘结果而要调整指标的情况。由此印证 QMD 体验评估的结论是可靠的,整个体验评估流程也是可靠的。
如果有业务出现按照 QMD 的结论设计方案,验证发现预期的业务数据没有提升或者反而下降,则需要反思指标制定、分析、洞察、解决思路、方案是否有问题,逐一排查关键环节,及时作出调整。
如开篇所述,QMD 项目组也在每次体验评估完成后进行复盘,持续优化评估机制,目前整个流程已经形成 SOP,便于高效组织每次评估,跟紧业务节奏,打好配合。
五、最后 以上详尽介绍了我们 QMD 项目组,组织 58UXD 各个业务体验评估的过程与思考。我们认为整个体验评估体系的升级和实践,最关键的思考逻辑就是闭环管理,这个逻辑贯穿始终,让所有人为因素的影响降到最低,保障过程和结果可靠可信。我们设定的闭环管理一共有以下三个方面:
在策划环节,各业务制定的指标体系、整理的评估工具,都由 QMD 项目组审核,确保指标拆解符合指引要求,评估工具准确无误; 在评估环节,各个业务的专家的评分都需要评估评分者信度,确保评分可靠; 在跟进环节,通过业务复盘了解优化效果,校验指标制定的可靠性,以及整个 QMD 新机制为业务体验设计带来的价值。
分享不易,希望对你有所帮助。欢迎大家留言交流。
欢迎关注「58UXD」的微信公众号:
-
设计师如何做好体验量化?收下大厂的QMD评测机制(组织篇)
UI交互 2023-02-04本篇将介绍如何有序组织体验评估,并将详细讲解本次 QMD 升级的要点、难点是如何落地执行的。上期回顾:设计师如何做好体验量化?收下大厂的QMD评测机制(机制篇)秉承 58 同城“用户第一”的核心价值观,设计团队建立以基础体验指标为评估标准、发掘体验问题的评估机制,并借助内外部业务专家视角,对 58 同城各产品的重...本篇将介绍如何有序组织体验评估,并将详细讲解本次 QMD 升级的要点、难点是如何落地执行的。
上期回顾:
设计师如何做好体验量化?收下大厂的QMD评测机制(机制篇) 秉承 58 同城“用户第一”的核心价值观,设计团队建立以基础体验指标为评估标准、发掘体验问题的评估机制,并借助内外部业务专家视角,对 58 同城各产品的重点场景进行评估,优化业务场景,从而提升各业务线的体验,而这一套评测机制就是 QMD。
阅读文章 >
我们选用质量管理工具 PDCA 来组织体验评估,做体验管理。以季度为评估周期,一个季度完成一次 PDCA 循环后,我们持续迭代评估体系,从而更好的完成下一个周期的体验评估。
一、策划 策划的主要内容就是大家很熟悉的 5W1H 了。
1. 评估目标-Why
如第一篇文章所述,新的体验评估机制,评估目标从单一的提升体验质量,调整成契合业务目标的体验质量。
参与体验评估,业务设计师的预期有:
提升产品使用体验; 提升业务核心指标。 QMD 项目组需要兼顾参与评估业务的预期,目标有:
采用可靠的评估机制,度量契合业务目标的体验,发掘影响业务目标的体验问题,确保评估结果可信、可靠并易感知; 确保按照规划周期性做体验评估、同步结论、跟进优化; 验证各个参评业务的评估指标、评估机制的可靠性。 2. 相关人员-Who
想要按照以上预期高质量的完成体验评估,离不开组织架构的支持。58UXD 设立了由交互设计师和用研工程师组成的体验管理组。由体验管理组来组织全部业务的体验考核、体验评估、体验展示、体验跟进等一系列横向体验管理项目。QMD 作为体验管理的重要工具,由体验管理组中的 QMD 项目组来牵头策划完成。有同学对 58UXD 其他体验管理工具感兴趣的话,可以在评论区留言。
明确了组织方及其职责,根据新的评估机制,还需要每个业务 6 名评估专家(2 名产品、2 名交互、2 名视觉)。QMD 项目组采取了参评业务产品、交互、视觉交叉互评的方式,由第二篇文章介绍的评分者信度保障结果的可靠性。
在新的体验评估机制下,有很多 QMD 项目组和业务 设计师 需要沟通协作的节点。为了高效运行评估机制,QMD 项目组在各个参评业务都明确了一位 QMD 对接人。
各个角色的职责明确如下:
3. 评估业务-What
新的体验评估机制对参评业务也有了新的要求。出于可行性和投入产出比的考虑,我们根据以下 4 点,深入了解各个业务的情况,做出研判,最终确定了参评业务。
当前阶段业务对于体验的重视程度如何; 业务是否有明确的、可持续监控的目标; 业务迭代的频率如何; 业务是否已达到一定用户规模。 4. 时间规划-When
如前所述,新的体验评估机制关键节点多,时间跨度长,需要周密的规划和严谨的时间管理。
QMD 项目组是以季度为单位做周期性体验评估的,所以在季度初就会做好整个季度的规划,并严格执行。同时采用周报制来及时处理意外事件,保障项目准时完成。
另外值得提一下评估场次时间的确定,除了视评估专家的时间安排外,也需要考虑线上测评的版本是否符合业务预期,晚几天可能就到了发版时间,是否需要评估最新版,需要综合情况和业务协商。同时也要求 QMD 项目组在规划之初,就要留好类似这种情况的 buffer。
5. 评估地点-Where
确定好评估时间,就可以提前约会议室了。
然而我们在 2022 年的 Q2 和 Q4,遇到了两次因疫情大量同事远程办公的情况。如此我们需要保证线上评估或者部分同学线上评估的结果可靠性。原理如第二篇文章所述,需要保障人员可靠性、认知一致性,标准化实施方案。
6. 怎么评估-How
给到专家评估,我们需要至少准备评分工具和主观问题反馈工具。这些都需要以评估指标为基础,我们从第一篇文章了解到指标的制定原理后,各个业务的评估指标具体怎么确定呢?
首先,调整基础指标:我们知道业务的评估指标由基础指标和自定义指标构成的,我们在制定指标前需要根据新的指标体系需要,重新审视原有的基础指标。我们认为一个良好的基础指标,应该是清晰、准确、普适、易懂的;我们邀请专家对这样的指标进行评估,应该是对体验设计有指导意义的。所以对基础指标做了如下调整:评估指标由原来的一级指标改为二级指标,颗粒度更细,聚焦到具体问题;相似指标合并,二级指标由 15 个合并成 10 个;增加动效、语义等方面的评估;评估指引描述方式更直白、易理解;等等。
我们把基础指标给到业务,由业务设计师参考以下几个原则制定个性化指标体系。
GSM 模型(Goal- Signal- Metric):方法在第一篇文章中; 反向思考:场景拆解到什么程度,可以结合业务的实际需要,由希望监控的颗粒度 有迹可循:场景的设计目标,需要是可量化、可监控的,一方面可以追踪优化效果,另一方面可以反向验证指标制定的合理性; 因地制宜:评估指标需要足够细化、贴合业务场景。比如基础指标中的“品牌”指标,在基础指标中的描述是“”,是考虑普适性的描述方式。而其在不同业务中的具体元素、形式、原则等体验要素都差别较大,所以需要额外说明当前业务的“品牌”具体需要达到什么体验要求。有些业务会额外提供一份品牌手册,供专家评估参考; 稳定性:指标体系内的元素需要在一定时间范围内保持稳定,尽量不因业务的调整而频繁变化。 有了细化的评估指标制定指引,我们向参评业务做了详尽的讲解,并充分探讨其在各个业务的可行性。业务设计师按照要求,结合实际情况,制定了由总目标、影响总目标的场景、场景的评估指标、评估指标的详细说明四个部分构成的指标体系。而后交由 QMD 项目组审核,确定无误后,由业务设计师根据模版,自行制定体验评估要用到的评分工具和主观问题反馈工具,这里我们用的分别是 58 问卷和在线协作表格。
二、评估 1. 体验评估
一切准备就绪后,就可以邀请专家来评估了。就像第二篇文章介绍的那样,为了保障评估结果的可靠性,我们对评估工具、专家、环境等都制定了标准化方案。下图是 QMD 项目组在专家评估前宣讲的评估目标、机制及评估注意事项。
2. 信度评估
专家评估后,我们就拿到了评分问卷和主观问题记录表的原始数据。首先最重要的一件事就是预处理评分数据,评估信度,完成校验闭环。我们采用的信度可靠对照关系如下:
如果第一次信度评估可靠程度不高,则需要调整数据组,重新进行信度评估,直至信度可靠。我们并非每一场体验评估都一帆风顺,在疫情期间远程体验评估时,我们就遇到了无论如何调整数据组都不能达到信度可靠的结果的情况。发现了这种情况,我们立即响应,临时邀约更多专家,快速加测了一场。欣慰的是,两场评估结果合并后,经过数据组调整,评分信度可靠。
3. 业务复议
通过第二篇文章我们知道,复议阶段的目标一是矫正部分理解有偏差的主观问题,二是让业务尽快了解 QMD 的结论,感受到其可靠可信,快速迭代优化问题。所以:
复议呈现给业务的内容有:评分、分数对比、对应的主观问题、截图等; 需要留给业务复议的反馈空间; 想要做体验评估的你,需要具备一定的数据分析基础和表格操作技巧。 4. 输出报告
报告是为了让体验评估结论更加直观、可信,便于查阅与传播。我们对报告做了一些调整:
① 评分和问题对应展示;
② 评分间差距标记更加清晰明了;
③ 增加 QMD 项目组的优化建议。希望业务重视分数洼地、不及竞品的指标对应的影响较大的主观建议。高优场景/指标/问题判断标准如下,供参考:
权重最高或较高; 和均值比差 10%/8%/5%/3%以上; 和竞品比差 10%/8%/5%/3%以上; 同比/环比差 10%/8%/5%/3%以上。 三、体验跟进 & 项目复盘 前面两篇文章介绍的体验评估指标体系和评估机制,是我们通过现状分析、理论分析等综合确定的,此时我们需要校验两点:
一是需要校验根据认知、经验主观拆解的评估指标是否符合预期;
二是需要校验 QMD 机制全程保障的专家评估结论是否可靠。
我们采取的校验方式,就是看体验评估的结论应用到业务的体验优化后,是否带来如预期程度的业务指标的提升。
所以我们在报告同步后,下一次体验评估前,留足业务改进优化的时间,组织参评业务复盘 QMD 结论落地情况。由各个业务阐述以下内容:
问题发掘&解决:QMD 报告分析&洞察、解决思路&方案、上线效果&数据、结论; 项目管理:优化进度、迭代计划。 同时为了激励、帮助业务设计师推动结论落地,我们邀请设计总监、设计负责人和高阶设计师从三个维度为业务复盘的内容打分、点评,包括逻辑合理度、指标结果相关度、进度。
同时 QMD 项目组收获了业务设计师对于整个体验评估机制的一些想法,结合组织过程遇到的问题和思考,做了周期性的复盘。
四、推广 & 改正 通过业务复盘及评委打分、点评,我们了解到业务的大部分迭代效果都是正向的,小部分负向效果的迭代需要尝试其他设计方案。所以目前没有因为复盘结果而要调整指标的情况。由此印证 QMD 体验评估的结论是可靠的,整个体验评估流程也是可靠的。
如果有业务出现按照 QMD 的结论设计方案,验证发现预期的业务数据没有提升或者反而下降,则需要反思指标制定、分析、洞察、解决思路、方案是否有问题,逐一排查关键环节,及时作出调整。
如开篇所述,QMD 项目组也在每次体验评估完成后进行复盘,持续优化评估机制,目前整个流程已经形成 SOP,便于高效组织每次评估,跟紧业务节奏,打好配合。
五、最后 以上详尽介绍了我们 QMD 项目组,组织 58UXD 各个业务体验评估的过程与思考。我们认为整个体验评估体系的升级和实践,最关键的思考逻辑就是闭环管理,这个逻辑贯穿始终,让所有人为因素的影响降到最低,保障过程和结果可靠可信。我们设定的闭环管理一共有以下三个方面:
在策划环节,各业务制定的指标体系、整理的评估工具,都由 QMD 项目组审核,确保指标拆解符合指引要求,评估工具准确无误; 在评估环节,各个业务的专家的评分都需要评估评分者信度,确保评分可靠; 在跟进环节,通过业务复盘了解优化效果,校验指标制定的可靠性,以及整个 QMD 新机制为业务体验设计带来的价值。
分享不易,希望对你有所帮助。欢迎大家留言交流。
欢迎关注「58UXD」的微信公众号:
-
超全面的B端设计规范指南(一):基础组件
UI交互 2023-02-04新的一年,先祝大家运势涨如脱兔,因为年前和过年这段时间工作没那么忙,就抽空继续整理了一些工作中对B端设计的总结,希望可以带给需要的人一些启发。如有纰漏,欢迎各路大神指正。上一篇说到了设计原则,接下来我们讲讲 B 端常用组件的内容。新的一年,先祝大家运势涨如脱兔,因为年前和过年这段时间工作没那么忙,就抽空继续整理了一些工作中对 B端设计 的总结,希望可以带给需要的人一些启发。如有纰漏,欢迎各路大神指正。
上一篇说到了设计原则,接下来我们讲讲 B 端常用组件的内容。
超全面的B端设计规范指南(一):设计原则 前言 B 端设计离不开设计规范这个话题,而做好设计规范是一个庞大复杂工程,很多人对这些处于一知半解状态,在这个系列文章里我通过结合自己平时的项目案例来谈谈自己对 B 端设计规范的一些理解,希望可以带来一些启发。
阅读文章 >
谈到 B 端组件,很多人的印象是多且杂,想要全面准确的熟悉这些它们,需要我们对它有个合理的归纳总结。可能每个人会从不同的视角去做这件事情,我一般是按照使用场景去对组件分类整理。
下面我们根据这个分类框架来逐个聊聊这些组件。
一、基础组件 说到基础组件,我想再将其细分成两个大类:一类是通用组件;一类是栅格/导航。怎么去更深刻的理解这两类的区别呢,我们可以打个这样的形象比方:
通过这个比方我们不难理解,栅格/导航是先给页面定下了基本框架,而通用组件则是在这个框架基础上搭建页面的所用到基本元素。
1. 通用组件 常见通用组件一般包含:色彩/字体/间距/圆角/分割线/按钮。需要注意的是,通用组件看起来似乎很简单,但却是决定产品品牌调性、界面细节品质的重要因素,在设计过程中需要引起我们的高度重视。
色彩
色彩可分为主色,功能色,中性色三类。下面谈谈这三类颜色如何配置,以及如何定义这些颜色梯度。
① 主色
主色的选取
主色作为产品的主要色调,在选取时应当优先选择品牌色,但有一点要注意的是 B 端和 C 端不一样,B 端一般不适合采用暖色系作为主色,如果品牌色为暖色调,则尽量考虑另选取一个冷色系作为主色,原因有两点:一是为了避免和警告、错误色冲突,产生歧义;二是冷色系带有商务、专业、冷静的情感,更符合 B 端产品调性。
同时主色选取应避免高亮、荧光色、灰调高的颜色。
主色的应用
主色在设计中常见的应用包括可交互、选中状态、可视化、插图、图标等场景。
② 功能色
功能色主要用于页面表征状态,常见有成功色、警告色、报错色等。
成功色
主要用于操作结果成功提示以及标签配色等。
警告色
主要用于警告提醒功能以及标签配色等。
报错色
主要用于系统报错提示、圆点提示、以及标签配色等。
③ 中性色
中性色在页面设计中应用非常广泛,从线条到文字再到图形等等都可以见到它的影子。 Tips:无论我们主色调是什么,中性色在调色时建议可加入适量的蓝色调,可让页面观感更清爽。
④ 颜色梯度
选取好了颜色后,怎么去更合理的定义每个颜色的梯度呢?(这里主要指对主色以及功能色定义梯度)
我的方法是给颜色加一层半透明黑/白遮罩,当我们需要浅色,通过调整白色遮罩透明度得到合适颜色;而当我们需要深色时,则通过调整黑色遮罩透明度得到合适颜色。
这样定义颜色梯优点是后续如果需要更改配色,只需一键替换全局色即可,大大提高工作效率。
文字
文字规范包含字体、字号、字重、行高等。
① 字体/字重
B 端字体/字重一般按照如下规范即可:
② 字号
不同于 C 端,B 端在字号选择上应当尽量保持克制。研究表明,Web 端上正文字号为 14 时,可以带来最佳阅读体验。因此在字号选取上应尽量优先选取 14 号字。如果想要区分文字层级,优先级从高到低的手法应该是颜色、字重、字号,也就是说一般尽量不采用字号大小区分文字层级。
③ 行高
行高可以参照下面的公式或行高参照表快速获得,如果通过公式算出行高非整数或非偶数,可就近取偶整数。
间距
关于间距取值,在目前主流屏幕分辨率下,只有 4 或 8 被整除率最高,考虑到 4 的颗粒度偏小,因此可优先考虑 8px 的倍数作为间距值,在一些特殊场景可采用 4px 的倍数间距值。
分割线
分割线宽度一般统一为 1px 即可,同时注意颜色不可过深,以免干扰主体信息。如果需要不同层级分割线,可用颜色深浅来区分。
圆角
圆角大小一般根据使用场景控制在 2-3 个梯度即可,既不能全部统一一个圆角值,同时也不适合出现过多圆角值。同时圆角值不要过大,建议控制在 2-6px,以符合 B 端产品严谨专业调性。
按钮
这里从按钮的大小/状态/排放位置几个纬度来讲。
① 按钮尺寸
按钮高度一般情况下可以设置 3-4 种尺寸按钮,足以满足各种使用场景。至于按钮宽度,我们一般定义一个最小值,当超过最小值时,可设置 padding 值,按钮宽度根据内容自适应。
② 按钮状态
操作按钮过程中,按钮会呈现不同的交互状态。
③ 按钮位置
对于主次按钮组合,主次按钮排放位置应该怎么规定呢?可分为两种场景:一是当为从左到右阅读顺序时,主要按钮应当排在次要按钮左侧。二是当为从右到左阅读顺序时,主要按钮应当排在次要按钮右侧。而当一些特殊场景与这个原则冲突时,应权衡优先级做出取舍。
2. 栅格/导航 熟悉通用组件后,我们要通栅格/导航来确定产品页面框架。
栅格
栅格可以有效地保证设计的一致性、让页面布局更具规律,并提高团队协作效率。应该如何设计栅格呢?
① 栅格区域的划定
我们一般习惯将页面从下到上划分为背景层、全局控制层、内容层、临时层,而栅格区应当用在内容层。以下为常见几种页面布局栅格区的划定。
② 栅格自适应规则
随着页面宽度变化,一般来说是通过栏宽变化实现自适应。
③ 栅格栏数的确定
根据页面内容丰富程度,栅格栏数一般定 12 或者 24 栏,考虑到 B 端产品功能往往比较复杂,建议采用 24 栏即可。
④ 上下布局栅格
⑤ 左右布局栅格
导航
导航可分为全局导航与局部导航。
① 全局导航
全局导航包含顶部导航、侧边导航、混合导航。
这三种导航样式各具特点,应结合产品特性选择合适的导航样式。这里要注意的一点是,当产品可用性和用户体验产生冲突时,应优先保证产品可用性。
② 局部导航
局部导航包含面包屑、标签页、步骤条、分页器。
面包屑
面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系,并且可以快速回到上几级导航。
标签页
标签页可以帮助用户在一个页面实现快速切换不同内容,提升单个页面内容扩展性。可分为基本样式、标签样式、卡片样式。
步骤条
当任务复杂或者存在先后关系时,可将其分解成一系列步骤,这里就会用上步骤条。步骤条是引导用户按照流程完成任务的导航条,作用包含 3 点:一是让用户对操作流程长度和步骤有个预期,二是明确知道自己目前所在步骤,三是可以对用户的任务完成度有明确的度量。
步骤条一般分为横向与纵向两种样式。
步骤条小 Tips:当步骤条中有操作难度偏大的内容时,为了提高用户操作完成率,我们可以考虑把其放在靠后的步骤中,原因是用户前面已经完成了大部分简单操作,后面碰到高难度操作后,出于损失厌恶心理,不会轻易放弃操作。
分页器
当有大量内容需要展现时进行分页加载处理,分页器作用是可以让用户清楚的知道自己所要浏览的内容有多少页、当前所在页码、快捷前往目标页码。
分页器一般分为迷你、简易、自定义三种样式。
妙用分页器小 Tips:当表格中需要对数据全选操作时,为了提高操作效率,可将自定义每页跳数调到最大。例如一共 100 条数据,默认每页 10 条数据,要完成全选需要点击 9 次翻页,10 次全选(表格的全选框勾选后一般只选中当前页面全部数据,而不是所有页面总数据),当把每页条数调整为 50 后,则只需翻页 1 次,点击 2 次全选即可。
到这里关于 B 端的基础组件就全部梳理完了,后续我们就来揭开展示组件的神秘面纱。
部分参考资料:
《B 端产品设计-Mia》 《Ant Design》
-
超全面的B端设计规范指南(一):基础组件
UI交互 2023-02-04新的一年,先祝大家运势涨如脱兔,因为年前和过年这段时间工作没那么忙,就抽空继续整理了一些工作中对B端设计的总结,希望可以带给需要的人一些启发。如有纰漏,欢迎各路大神指正。上一篇说到了设计原则,接下来我们讲讲 B 端常用组件的内容。新的一年,先祝大家运势涨如脱兔,因为年前和过年这段时间工作没那么忙,就抽空继续整理了一些工作中对 B端设计 的总结,希望可以带给需要的人一些启发。如有纰漏,欢迎各路大神指正。
上一篇说到了设计原则,接下来我们讲讲 B 端常用组件的内容。
超全面的B端设计规范指南(一):设计原则 前言 B 端设计离不开设计规范这个话题,而做好设计规范是一个庞大复杂工程,很多人对这些处于一知半解状态,在这个系列文章里我通过结合自己平时的项目案例来谈谈自己对 B 端设计规范的一些理解,希望可以带来一些启发。
阅读文章 >
谈到 B 端组件,很多人的印象是多且杂,想要全面准确的熟悉这些它们,需要我们对它有个合理的归纳总结。可能每个人会从不同的视角去做这件事情,我一般是按照使用场景去对组件分类整理。
下面我们根据这个分类框架来逐个聊聊这些组件。
一、基础组件 说到基础组件,我想再将其细分成两个大类:一类是通用组件;一类是栅格/导航。怎么去更深刻的理解这两类的区别呢,我们可以打个这样的形象比方:
通过这个比方我们不难理解,栅格/导航是先给页面定下了基本框架,而通用组件则是在这个框架基础上搭建页面的所用到基本元素。
1. 通用组件 常见通用组件一般包含:色彩/字体/间距/圆角/分割线/按钮。需要注意的是,通用组件看起来似乎很简单,但却是决定产品品牌调性、界面细节品质的重要因素,在设计过程中需要引起我们的高度重视。
色彩
色彩可分为主色,功能色,中性色三类。下面谈谈这三类颜色如何配置,以及如何定义这些颜色梯度。
① 主色
主色的选取
主色作为产品的主要色调,在选取时应当优先选择品牌色,但有一点要注意的是 B 端和 C 端不一样,B 端一般不适合采用暖色系作为主色,如果品牌色为暖色调,则尽量考虑另选取一个冷色系作为主色,原因有两点:一是为了避免和警告、错误色冲突,产生歧义;二是冷色系带有商务、专业、冷静的情感,更符合 B 端产品调性。
同时主色选取应避免高亮、荧光色、灰调高的颜色。
主色的应用
主色在设计中常见的应用包括可交互、选中状态、可视化、插图、图标等场景。
② 功能色
功能色主要用于页面表征状态,常见有成功色、警告色、报错色等。
成功色
主要用于操作结果成功提示以及标签配色等。
警告色
主要用于警告提醒功能以及标签配色等。
报错色
主要用于系统报错提示、圆点提示、以及标签配色等。
③ 中性色
中性色在页面设计中应用非常广泛,从线条到文字再到图形等等都可以见到它的影子。 Tips:无论我们主色调是什么,中性色在调色时建议可加入适量的蓝色调,可让页面观感更清爽。
④ 颜色梯度
选取好了颜色后,怎么去更合理的定义每个颜色的梯度呢?(这里主要指对主色以及功能色定义梯度)
我的方法是给颜色加一层半透明黑/白遮罩,当我们需要浅色,通过调整白色遮罩透明度得到合适颜色;而当我们需要深色时,则通过调整黑色遮罩透明度得到合适颜色。
这样定义颜色梯优点是后续如果需要更改配色,只需一键替换全局色即可,大大提高工作效率。
文字
文字规范包含字体、字号、字重、行高等。
① 字体/字重
B 端字体/字重一般按照如下规范即可:
② 字号
不同于 C 端,B 端在字号选择上应当尽量保持克制。研究表明,Web 端上正文字号为 14 时,可以带来最佳阅读体验。因此在字号选取上应尽量优先选取 14 号字。如果想要区分文字层级,优先级从高到低的手法应该是颜色、字重、字号,也就是说一般尽量不采用字号大小区分文字层级。
③ 行高
行高可以参照下面的公式或行高参照表快速获得,如果通过公式算出行高非整数或非偶数,可就近取偶整数。
间距
关于间距取值,在目前主流屏幕分辨率下,只有 4 或 8 被整除率最高,考虑到 4 的颗粒度偏小,因此可优先考虑 8px 的倍数作为间距值,在一些特殊场景可采用 4px 的倍数间距值。
分割线
分割线宽度一般统一为 1px 即可,同时注意颜色不可过深,以免干扰主体信息。如果需要不同层级分割线,可用颜色深浅来区分。
圆角
圆角大小一般根据使用场景控制在 2-3 个梯度即可,既不能全部统一一个圆角值,同时也不适合出现过多圆角值。同时圆角值不要过大,建议控制在 2-6px,以符合 B 端产品严谨专业调性。
按钮
这里从按钮的大小/状态/排放位置几个纬度来讲。
① 按钮尺寸
按钮高度一般情况下可以设置 3-4 种尺寸按钮,足以满足各种使用场景。至于按钮宽度,我们一般定义一个最小值,当超过最小值时,可设置 padding 值,按钮宽度根据内容自适应。
② 按钮状态
操作按钮过程中,按钮会呈现不同的交互状态。
③ 按钮位置
对于主次按钮组合,主次按钮排放位置应该怎么规定呢?可分为两种场景:一是当为从左到右阅读顺序时,主要按钮应当排在次要按钮左侧。二是当为从右到左阅读顺序时,主要按钮应当排在次要按钮右侧。而当一些特殊场景与这个原则冲突时,应权衡优先级做出取舍。
2. 栅格/导航 熟悉通用组件后,我们要通栅格/导航来确定产品页面框架。
栅格
栅格可以有效地保证设计的一致性、让页面布局更具规律,并提高团队协作效率。应该如何设计栅格呢?
① 栅格区域的划定
我们一般习惯将页面从下到上划分为背景层、全局控制层、内容层、临时层,而栅格区应当用在内容层。以下为常见几种页面布局栅格区的划定。
② 栅格自适应规则
随着页面宽度变化,一般来说是通过栏宽变化实现自适应。
③ 栅格栏数的确定
根据页面内容丰富程度,栅格栏数一般定 12 或者 24 栏,考虑到 B 端产品功能往往比较复杂,建议采用 24 栏即可。
④ 上下布局栅格
⑤ 左右布局栅格
导航
导航可分为全局导航与局部导航。
① 全局导航
全局导航包含顶部导航、侧边导航、混合导航。
这三种导航样式各具特点,应结合产品特性选择合适的导航样式。这里要注意的一点是,当产品可用性和用户体验产生冲突时,应优先保证产品可用性。
② 局部导航
局部导航包含面包屑、标签页、步骤条、分页器。
面包屑
面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系,并且可以快速回到上几级导航。
标签页
标签页可以帮助用户在一个页面实现快速切换不同内容,提升单个页面内容扩展性。可分为基本样式、标签样式、卡片样式。
步骤条
当任务复杂或者存在先后关系时,可将其分解成一系列步骤,这里就会用上步骤条。步骤条是引导用户按照流程完成任务的导航条,作用包含 3 点:一是让用户对操作流程长度和步骤有个预期,二是明确知道自己目前所在步骤,三是可以对用户的任务完成度有明确的度量。
步骤条一般分为横向与纵向两种样式。
步骤条小 Tips:当步骤条中有操作难度偏大的内容时,为了提高用户操作完成率,我们可以考虑把其放在靠后的步骤中,原因是用户前面已经完成了大部分简单操作,后面碰到高难度操作后,出于损失厌恶心理,不会轻易放弃操作。
分页器
当有大量内容需要展现时进行分页加载处理,分页器作用是可以让用户清楚的知道自己所要浏览的内容有多少页、当前所在页码、快捷前往目标页码。
分页器一般分为迷你、简易、自定义三种样式。
妙用分页器小 Tips:当表格中需要对数据全选操作时,为了提高操作效率,可将自定义每页跳数调到最大。例如一共 100 条数据,默认每页 10 条数据,要完成全选需要点击 9 次翻页,10 次全选(表格的全选框勾选后一般只选中当前页面全部数据,而不是所有页面总数据),当把每页条数调整为 50 后,则只需翻页 1 次,点击 2 次全选即可。
到这里关于 B 端的基础组件就全部梳理完了,后续我们就来揭开展示组件的神秘面纱。
部分参考资料:
《B 端产品设计-Mia》 《Ant Design》