-
第二波!2023年2月精选实用设计干货合集
UI交互 2023-02-14大家好,这是 2023 年 2 月的第 2 波干货!考虑到今天是情人节,今天的第一个工具是一个可以生成情人节贺卡的人工智能服务,还没想好今天要如何表达爱意的朋友可以先生成一张带有情诗的卡片送给Ta!此外,今天的合集当中还有超好用的像素风插画 APP、人工智能纹理和3D模型生成工具、人工智能工具大合集,还有有帮你集...大家好,这是 2023 年 2 月的第 2 波干货!考虑到今天是情人节,今天的第一个工具是一个可以生成 情人节 贺卡的人工智能服务,还没想好今天要如何表达爱意的朋友可以先生成一张带有情诗的卡片送给Ta!此外,今天的合集当中还有超好用的像素风插画 APP、人工智能纹理和3D模型生成工具、 人工智能工具 大合集,还有有帮你集中注意力的效率工具三件套等等。
当然,在此之前记得看看往期干货中有没有你感兴趣的素材:
第一波!2023年2月精选实用设计干货合集 大家好,这是 2023 年 2 月的第 1 波干货!
阅读文章 >
下面我们具体看看这一期的干货:
1、人工智能情人节贺卡生成工具 https://venngage.com/tools/valentines-day-card-maker
你看,人工智能在关键的时候还能发挥特别的作用。这个服务可以借助人工智能生成情人节贺卡,在 GPT-3 的支持之下,可以生成完全为你定制的情诗和符合你需求的整体设计。动作快一点,现在生成还来得及!
2、人工智能工具大全 ToolScout https://toolscout.ai/
如果你想关注最快最新的人工智能工具,那么 ToolScout 这个网站可以帮你节省相当多的时间,作为一个展示 AI 工具的平台, ToolScout 每天更新最新的 AI 工具,并且他们还致力于为 AI 工具的开发者、合作者和投资者提供连接,如果这里有你所在的团队想要和其中某些 AI 工具的开发者合作,也可以透过 ToolScout 进行沟通。
3、iPad 平台复古像素风绘图工具 https://resprite.fengeon.com/
对于很多插画师而言,在iPad 上画插画已经是相当自然的事情,那么复古有趣的像素画是不是也可以这样呢?Resprite 这个 APP 就是为了解决这个问题而出现的,它不仅能像 Procreate 一样绘制插画(只不过是像素风的),还能制作动画效果,功能齐全!
4、人工智能纹理和3D素材生成工具 https://www.kaedim3d.com/
这个名为 Kaedim 的平台借助机器学习算法,可以自动将 2D 的图片转化为高素质的 3D 素材,并且现在还能根据原本图片生成对应的表面贴图材质,将 3D 建模、表面材质和后期处理过程中最耗时的部分,使用人工智能来解决,让生成内容的速度提高 10 倍,协作内容创作者更快创作,并且降低 3D 内容产出的效率。
5、超快速的线上视频和动画创建工具 https://jitter.video/
Jitter 是一个为动态设计而生的工具,你可以将它理解为动态设计领域的 Figma,它可以轻松为网站、APP、社交媒体等不同场合设计合理的动画和动效。Jitter 本身内置了大量的动画预设,而且加入了从 Figma 引入设计的功能,支持更多导出格式,并且增加了提升了设计效率的功能。此外,Jitter 在 2023 年也向行业内其他设计软件看齐,针对 UI 进行了优化改造,加入了更强的团队协作功能,添加了无限画布、自定义预设等更加深度定制化的功能。
6、编辑 Lottie 动画超方便的编辑器 https://lottiefiles.com/lottie-editor
这是全新的 Lottie 编辑器,哪怕你没有动画设计和编辑的经验,也可以轻松上手,帮你创建和生成动画,添加交互,增删图层,无需下载本地软件,直接在浏览器中就可以进行设计,之后生成的动画可以应用在设计项目之中,也可以直接发布到社交平台上,相当方便。
7、帮你集中注意力的效率工具三件套 https://lofi-life.vercel.app/(梯子访问)
这真的是一个复古又好玩的效率网站,网站的主界面是一组可选的音乐+白噪音,你可以按照你的需求给自己定制白噪音或者背景音乐,右上角有待办事项和番茄时钟,让你沉浸式地工作的同时,更好的管理事务,并且专注处理手头的关键的工作。网站的创建者也正是因为有这样的需求,干脆做了这个网站帮助自己专心写代码。
-
帮你快速掌握产品五要素:战略层之用户目标(一)
UI交互 2023-02-13初入行的交互设计师或产品经理通常都会从搭建界面框架开始思考问题,这是一种错误的思考方式,但这也是不可避免必须要做的。如何将这件事变成正确的呢?那需要理解搭建框架之前对更高层面理解的前提下开展界面设计。初入行的交互 设计师 或产品经理通常都会从搭建界面框架开始思考问题,这是一种错误的思考方式,但这也是不可避免必须要做的。如何将这件事变成正确的呢?那需要理解搭建框架之前对更高层面理解的前提下开展界面设计。
更多关于五要素的干货:
学会「交互设计五要素」,帮你更快Get到设计关键点! B端浪潮下设计师的「尴尬」 供应链资源整合是企业发展态势。
阅读文章 >
大对数的商业产品产生的必要条件为:用户有需求,企业有利益。所以我们需要明确用户需求与产品目标。
首先我们需要用一个经典案例来了解什么是用户目标,什么是用户需求-福特与马的故事。故事开始,假设福特在调研现场,福特跑去到处问起马车客户客户老爷们:“您需要一个什么样的更快的交通工具”。几乎所有人的回答都是“我想要一匹更快的马”,很多人听到这个回答后,纷纷跑去马圈培育质量更好的马匹,来满足客户的需求,此时福特并没有立刻跑向马圈,而是继续往下问;
福特:“您为什么需要一匹跑的更快的马”?
客户:“可以跑的更快!”
福特:“您为什么需要跑的更快?”
客户:“这样我可以更早的到达目的地”
福特:“所以您需要一匹跑的更快的马的动机是?”
客户:“我可以用最短的时间到达目的地”
这个案例中,用户的最终目标是“用最短的时间更早的到达目的地”,用户的需求是“一匹跑的更快的马”。用一匹跑的更快的马更快的到达目的地看似毫无问题。接下来我们从诺曼理论到目标的 3 种类型,再到需求的 5 个层次进行分析与拆解,看一下福特是如何创造出世界知名的“福特汽车”。
诺曼在《情感化设计》中的提出认知过程中的 3 层理论,主要讨论了对设计的潜在重要性。所谓的 3 层理论是在产品设计的过程中需要解决的 3 个不同层次的认知和情感处理过程,即“本能、行为、反思”,但是诺曼并没有用什么方法系统的把认知模型和情感应用到设计实践或者用户研究中。在后来产品和设计大神们的不断的实践中发现,将这一理论付诸实践的关键在于将 3 种用户目标(体验目标、最终目标、人生目标)相对应的用人物模型的定义过程(用户细分-可用性和用户研究-创建人物角色模型)恰当的描述出来,并建立相对应的人物模型。
情感化设计模型与目标的映射关系
体验目标对应本能层次;这一层更多的是从用户的本能来说。客户在马圈看到一匹雄壮的、充满肌肉线条的、毛色靓丽的雄性大棕马,首先从视觉上来说,这匹马在客户本能想象中相比于其它马就很出色了,跑起来一定又快又英姿飒爽。当客户忍不住垂涎于马的美色之时按耐不住手欠时摸了一把,摸到了青筋在沉稳有力的跳动,这时客户更加激动了。当听到大棕马鼻孔喷射粗气像行星发动机一样的声音时,断定这就是梦中朝思暮想、千里江陵一日还的汗血宝马。这就体现了本能设计在视觉、触觉、以及听觉上都会出现。再举一个例子;在在炎炎夏日,当你看到超市冰柜上的可乐时,会本能的想到透彻喉咙的冰爽、会咽一口口水,但同时也想到可乐接触喉咙时“呛”人的又爱又恨的感受,这也是本能感受。
最终目标对应的是行为层次;这一层要考虑的是行为,当用户牵着亲手钦定的汗血大棕马回到自家马厩的时候幻想的一定是让这位高价买来的大棕马用“最短的时间到达目的地”,跑赢对手节约时间来挣美元。可是幻想很美好,现实很残酷,面对这么好的大棕马忽略了一点—为客户增加了新的任务—“好生喂养”,品相好(期望越高)吃的当然也好,这无疑增加了饲养成本,需要每天按时按量喂上等饲料,按时按量喂水,打扫马厩频率也增加了,搞不好还需要一块优良的草地、修个更加宽敞的马厩才能养好马。促使完成这些任务发生的行为的动机是最终目标(最终目标代表用户使用某个具体产品时执行任务的动机)。若好生喂养过程中出现纰漏,比如大棕马感冒了,势必会受到影响到最终目标的实现,同时也会影响到本能层次的感受。这也说明了行为处理过程会影响本能和反思的过程,因此最终目标会成为决定产品体验较为显著的因素之一。必须满足用户的最终目标,让用户感觉到他们值得为此付出时间和金钱。
最终目标内目标/行为/任务关系说明
人生目标对应的是反思层次;反思层次看起来“高大上、难以看透”,但这是 3 个层次里最简单的。这一层考虑的是要成为一个什么样的人(这里确实需要升华一下,高大上一点)。在福特与马车的案例中,客户的最终目标/动机是“用最短的时间到达目的地”。此时让福特再代替我们向客户一个问题
福特提问:“您想要用最短的时间到达目的地是为什么呢?”
用户 1 回答:“我想赶回去给 3 岁的女儿过生日”
用户 2 回答:“时间就是金钱,我想节约时间赚更多的钱,变成一个亿万富豪”
用户 1 的回答对应的人生目标为“做一个好父亲、好家人”。用户 2 的回答对应的人生目标为“成就自己的抱负”。
此时我们发现用户的人生目标来自于用户更深的动机(行为模式/最终目标),而更深层次的动机和行为需要更高层次的系统(广泛的人种学研究和文化建模)来实现。产品设计师要通过更高层次的系统功能、正式的设计概念和品牌战略转化为用户更高层次的人生目标。很明显在最终目标对应的行为层次中,感冒的大棕马达不到最终目标,更不用说达到人生目标了。这也更加说明了最终目标的行为层次会影响到人生目标的反思层次。
现在了解到了诺曼的情感化模型及对应的 3 种目标,要谨记,设计产品不仅仅是要帮助用户实现最终目标,还要向用户的人生目标迈进,产品向实现用户的人生前进,为产品赢得的不单单是普通的用户,还有为产品而发烧的忠实用户。
留一个问题,如果现在能够穿越回百年前,你化身成为福特,你会实现用户那一层次的目标呢?
文章内容来源于对阅读《About face4》、《用户体验 5 要素》、《情感化设计》三本书加结合实际经验的理解。
第一次写文章,如有不同观点和见解请包涵,如有错误指出请指正。理性讨论,拒绝争吵。接下来将会按 产品五要素 由下到上逐步出一些列的文章,欢迎大家关注。下一篇将会写一写知道目标以后如何分析用户需求
-
帮你快速掌握产品五要素:战略层之用户目标(一)
UI交互 2023-02-13初入行的交互设计师或产品经理通常都会从搭建界面框架开始思考问题,这是一种错误的思考方式,但这也是不可避免必须要做的。如何将这件事变成正确的呢?那需要理解搭建框架之前对更高层面理解的前提下开展界面设计。初入行的交互 设计师 或产品经理通常都会从搭建界面框架开始思考问题,这是一种错误的思考方式,但这也是不可避免必须要做的。如何将这件事变成正确的呢?那需要理解搭建框架之前对更高层面理解的前提下开展界面设计。
更多关于五要素的干货:
学会「交互设计五要素」,帮你更快Get到设计关键点! B端浪潮下设计师的「尴尬」 供应链资源整合是企业发展态势。
阅读文章 >
大对数的商业产品产生的必要条件为:用户有需求,企业有利益。所以我们需要明确用户需求与产品目标。
首先我们需要用一个经典案例来了解什么是用户目标,什么是用户需求-福特与马的故事。故事开始,假设福特在调研现场,福特跑去到处问起马车客户客户老爷们:“您需要一个什么样的更快的交通工具”。几乎所有人的回答都是“我想要一匹更快的马”,很多人听到这个回答后,纷纷跑去马圈培育质量更好的马匹,来满足客户的需求,此时福特并没有立刻跑向马圈,而是继续往下问;
福特:“您为什么需要一匹跑的更快的马”?
客户:“可以跑的更快!”
福特:“您为什么需要跑的更快?”
客户:“这样我可以更早的到达目的地”
福特:“所以您需要一匹跑的更快的马的动机是?”
客户:“我可以用最短的时间到达目的地”
这个案例中,用户的最终目标是“用最短的时间更早的到达目的地”,用户的需求是“一匹跑的更快的马”。用一匹跑的更快的马更快的到达目的地看似毫无问题。接下来我们从诺曼理论到目标的 3 种类型,再到需求的 5 个层次进行分析与拆解,看一下福特是如何创造出世界知名的“福特汽车”。
诺曼在《情感化设计》中的提出认知过程中的 3 层理论,主要讨论了对设计的潜在重要性。所谓的 3 层理论是在产品设计的过程中需要解决的 3 个不同层次的认知和情感处理过程,即“本能、行为、反思”,但是诺曼并没有用什么方法系统的把认知模型和情感应用到设计实践或者用户研究中。在后来产品和设计大神们的不断的实践中发现,将这一理论付诸实践的关键在于将 3 种用户目标(体验目标、最终目标、人生目标)相对应的用人物模型的定义过程(用户细分-可用性和用户研究-创建人物角色模型)恰当的描述出来,并建立相对应的人物模型。
情感化设计模型与目标的映射关系
体验目标对应本能层次;这一层更多的是从用户的本能来说。客户在马圈看到一匹雄壮的、充满肌肉线条的、毛色靓丽的雄性大棕马,首先从视觉上来说,这匹马在客户本能想象中相比于其它马就很出色了,跑起来一定又快又英姿飒爽。当客户忍不住垂涎于马的美色之时按耐不住手欠时摸了一把,摸到了青筋在沉稳有力的跳动,这时客户更加激动了。当听到大棕马鼻孔喷射粗气像行星发动机一样的声音时,断定这就是梦中朝思暮想、千里江陵一日还的汗血宝马。这就体现了本能设计在视觉、触觉、以及听觉上都会出现。再举一个例子;在在炎炎夏日,当你看到超市冰柜上的可乐时,会本能的想到透彻喉咙的冰爽、会咽一口口水,但同时也想到可乐接触喉咙时“呛”人的又爱又恨的感受,这也是本能感受。
最终目标对应的是行为层次;这一层要考虑的是行为,当用户牵着亲手钦定的汗血大棕马回到自家马厩的时候幻想的一定是让这位高价买来的大棕马用“最短的时间到达目的地”,跑赢对手节约时间来挣美元。可是幻想很美好,现实很残酷,面对这么好的大棕马忽略了一点—为客户增加了新的任务—“好生喂养”,品相好(期望越高)吃的当然也好,这无疑增加了饲养成本,需要每天按时按量喂上等饲料,按时按量喂水,打扫马厩频率也增加了,搞不好还需要一块优良的草地、修个更加宽敞的马厩才能养好马。促使完成这些任务发生的行为的动机是最终目标(最终目标代表用户使用某个具体产品时执行任务的动机)。若好生喂养过程中出现纰漏,比如大棕马感冒了,势必会受到影响到最终目标的实现,同时也会影响到本能层次的感受。这也说明了行为处理过程会影响本能和反思的过程,因此最终目标会成为决定产品体验较为显著的因素之一。必须满足用户的最终目标,让用户感觉到他们值得为此付出时间和金钱。
最终目标内目标/行为/任务关系说明
人生目标对应的是反思层次;反思层次看起来“高大上、难以看透”,但这是 3 个层次里最简单的。这一层考虑的是要成为一个什么样的人(这里确实需要升华一下,高大上一点)。在福特与马车的案例中,客户的最终目标/动机是“用最短的时间到达目的地”。此时让福特再代替我们向客户一个问题
福特提问:“您想要用最短的时间到达目的地是为什么呢?”
用户 1 回答:“我想赶回去给 3 岁的女儿过生日”
用户 2 回答:“时间就是金钱,我想节约时间赚更多的钱,变成一个亿万富豪”
用户 1 的回答对应的人生目标为“做一个好父亲、好家人”。用户 2 的回答对应的人生目标为“成就自己的抱负”。
此时我们发现用户的人生目标来自于用户更深的动机(行为模式/最终目标),而更深层次的动机和行为需要更高层次的系统(广泛的人种学研究和文化建模)来实现。产品设计师要通过更高层次的系统功能、正式的设计概念和品牌战略转化为用户更高层次的人生目标。很明显在最终目标对应的行为层次中,感冒的大棕马达不到最终目标,更不用说达到人生目标了。这也更加说明了最终目标的行为层次会影响到人生目标的反思层次。
现在了解到了诺曼的情感化模型及对应的 3 种目标,要谨记,设计产品不仅仅是要帮助用户实现最终目标,还要向用户的人生目标迈进,产品向实现用户的人生前进,为产品赢得的不单单是普通的用户,还有为产品而发烧的忠实用户。
留一个问题,如果现在能够穿越回百年前,你化身成为福特,你会实现用户那一层次的目标呢?
文章内容来源于对阅读《About face4》、《用户体验 5 要素》、《情感化设计》三本书加结合实际经验的理解。
第一次写文章,如有不同观点和见解请包涵,如有错误指出请指正。理性讨论,拒绝争吵。接下来将会按 产品五要素 由下到上逐步出一些列的文章,欢迎大家关注。下一篇将会写一写知道目标以后如何分析用户需求
-
用户体验地图设计指南(下篇):构成拆解与流程实操
UI交互 2023-02-13在日常的工作中,大家或多或少都听过/用过用户体验地图,简单的说,用户体验地图是梳理用户场景和体验问题的一种工具,那在用户研究中,什么时候/阶段适合用体验地图?使用体验地图的价值是什么?体验地图又是如何构建的呢?在日常的工作中,大家或多或少都听过/用过用户体验地图,简单的说,用户体验地图是梳理用户场景和体验问题的一种工具,那在 用户研究 中,什么时候/阶段适合用体验地图?使用体验地图的价值是什么?体验地图又是如何构建的呢?该篇文章将会结合两个具体案例为大家逐一解答,文章分为上篇和下篇,上篇主要是介绍用户体验地图的定义、使用场景与价值,下篇会拆解用户体验地图的构成与构建流程。 文章主要以我的经验为主,不是教科书和绝对,希望能带给大家答案/启发~也欢迎互相交流~
“用户体验地图(上篇)概念介绍与使用价值”中主要为大家介绍了用户体验地图的定义界定、使用价值和适用场景,下篇我们进入到“实操”阶段,具体看一下用户体验地图的构成、各部分的意义、以及是如何一步步构建出来的~
还没有看过上篇可先看,先理解概念再进行实操~
用户体验地图设计指南(上):概念介绍与使用价值 在日常的工作中,大家或多或少都听过/用过用户体验地图,简单的说,用户体验地图是梳理用户场景和体验问题的一种工具,那在用户研究中,什么时候/阶段适合用体验地图?
阅读文章 >
一、用户体验地图包含哪些内容? 如果问你体验地图包含哪些内容你会如何回答?用户画像、用户场景、情绪体验、用户痛点等……综合来看,体验地图包含一部分必要内容:即场景、行为、痛点/需求、机会点,也包含一部分可灵活使用的内容:用户画像、用户阶段、触点、情绪体验、用户诉求、标杆,灵活部分我们可以根据项目需要将各有利于我们理解用户的内容加到体验地图里。
另外从信息来源的角度看,地图中包含的内容一部分来源于调查(即用户调研),一部分来源于洞察,也就是我们拿到用户调研信息进行梳理后,由用户研究员、 设计师 、产品等不同角色洞察提炼的内容。结合上篇中的全包用户体验地图具体拆解一下各部分构成的内容与意义:
阶段:用户完成目标大致分成几个阶段,能够更有条理性的去拆分场景、防止丢场景
场景:用户完成目标经历的各个场景,在阶段下进一步拆分,需要注意:
1)是场景,不是我们的产品功能模块(有可能一个场景涉及到多个功能模块) ;
2)不一定是按从早到晚的时间顺序发生的,场景间是前后、转移的关系(比如咨询沟通、量房、出设计是用户在前期确定公司时会多次经历的场景,而不是一次就确定下来)
行为:与场景对应,描述的是该场景下用户是怎么做的,用于理解用户行为的原因、问题点。需要注意:1)关注动作是否有一定顺序,有顺序按照顺序描述;2)描述出用户接触到了什么触点(产品、渠道、人等)
触点:用户在完成目标过程中接触了什么、与什么发生了交互,一方面能够得到目前满足需求的触点是什么、另一方面之后我们的机会点也可以拆到触点中去落地。触点可以分为移动/数字触点、物理触点、人际触点三类,我们在互联网产品项目中可重点关注移动触点,即手机、电脑、不同的 app 等
情绪:用户在各场景下的体验情绪,让用户体验与业务建立更强烈的“共鸣”。而对情绪的描述可以是感性的描述(如开心、迷茫、吃惊、担忧,引发反思“我们的产品为什么让用户有这种感受?”),也可以是高低的描述,采用类似于可用性问题优先级计算或用户评分等方式将用户的情绪高低量化绘制曲线。
标杆:若存在标杆产品/服务可对比,可对应看标杆做了什么解决的用户的什么痛点、对用户情绪拉升的影响。
痛点/需求:描述用户的痛点或需求,从行为顺序上、在各触点上梳理清晰,让归纳有依据。
诉求:在某一场景下或多个场景下用户的核心诉求、想取得的核心价值点是什么,从行为、痛点/需求中提炼洞察而来,帮助我们在设计机会中抓住“核心目标”(比如我们提炼出用户的核心诉求是“省心”,那围绕省心我们可以做哪些满足用户?通过诉求扩大我们的机会点思考范围)
机会点:结合用户痛点/需求、标杆、诉求,对于我们的启发。可以结合触点或不同利益方区分机会点的针对性。
二、用户体验地图的构建流程 如果把用户体验地图当作一个调研方法,它的构建分为 4 步,分别是明确目标与用户、确认场景、开展调研、洞察绘制。但在最初的时候我提到用户体验地图是方法也是工具,如果已经有了足够的调研素材可以直接进入第 4 步洞察绘制。
接下来以 XX 平台的商家直播体验地图为例讲述构建流程
项目背景:XX 平台为了给商家提供更好的直播带货体验,在商家后台上线了直播中控台功能,但目前版本仅是结合经验与竞品做法聚合了“我们认为商家需要的直播相关的功能”,并不确定是否命中商家的直播需求、且想明确迭代方向,因此开展了该项目。
明确目标与用户
确认项目目标是梳理用户体验地图:中控台已有部分功能,在调研中既要关注用户对已有功能的体验情况,也要关注用户的潜在需求,挖掘更多的产品机会点,因此从实际直播场景入手,梳理直播体验地图理解用户真实场景与需求; 区分目标用户群体差异:考虑不同使用经验与不同商家类型的差异,一方面寻找老用户与新用户,另一方面需覆盖不同类型与不同品类的商家,因此需包含作者型、商家型直播达人,包含服饰、母婴、食品、珠宝等不同经营类目的商家。 确认场景
明确目标用户后,需先从内部梳理用户场景,场景将作为研究大纲主线,辅助撰写访谈提纲,在调研中更有条理性的去访谈、观察、验证用户的使用流程(需要注意梳理的是用户场景、而不是产品模块)。如果这个阶段场景不全/顺序不对没关系,我们在后续调研中动态调整。(比如图中绿色字场景均是调研中增加)
梳理方法:走查产品功能、模拟用户使用场景 梳理技巧:从大到小—广度优先,其次深度(比如前面提到的先阶段再场景)
开展调研
调研方法选择:获取用户体验信息的方法不仅是用户访谈,在访谈的基础上叠加观察、共创,能更深入的去挖掘;同时还可以加入情绪打分衡量用户在不同场景下的情绪高低。
访谈+观察:更适合有产品载体的体验过程,如进行已有产品改进、0.5-1 产品创新时。让用户在真实场景中操作产品/体验服务,观察用户行为,鼓励用户随时分享自己的感受(遇到的问题、觉得好的地方等),在用户阶段性完成几个场景或完全结束后,进行深入访谈; 访谈+共创:更适合聚合多触点的体验过程或更偏服务的体验过程,如进行产品增长研究、0-1 产品创新时。将多个同类用户聚在一起,在过程中引入大白纸、便利贴、问题提示卡、刺激物等工具,互相激发、提高讨论效率;
提纲设计与执行:遵循两个原则:一是“场景的”,在整个访谈中多问用户怎么做的、为什么这样做;二是“总分总的”,由整体流程深入到各场景中后再看整体(如先让用户回忆整个流程、关注用户的核心场景,再分场景询问用户的行为、原因、痛点与需求,最后统一回忆确认、查漏补缺)
洞察绘制
在调研结束后,就正式进入到了信息整体分析阶段了~在信息整理前需要明确两个问题~
需要做几张图?看不同类型用户的场景差异与需求差异,场景不同的用户必须分开绘制,若场景相似、行为也相似,仅是需求有差异,可以在一张图中单独指出 ; 场景主线怎么确定?场景并不是“自然时间顺序(从早到晚)”,是“行为顺序”,且并不是所有行为都是线性顺序,可以是局部线性、前后循环。目标是让场景全面且有组织逻辑(如直播体验地图,直播前的设置优惠、投放广告并没有很明确的前后发生顺序,但需保证是属于直播前的;直播中的多个场景是重复/交替出现,不需要写多遍)
弄清楚几张图、场景主线之后就可以正式整理信息了~正式绘制包含 5 个步骤:
① 创建用户角色
当不同用户群体场景、需求差异较大时,需分角色理解用户并创建用户角色/画像。用户角色主要包括用户特征、产品使用习惯、产品目标:
用户特征:对需求有影响的特征,如在工作中的角色(运营、客服、管理等),如较突出的人口学特征(老人、宝妈等) 产品使用习惯:使用产品的场景、频率、主要使用的功能 产品目标:使用产品主要达成的目标/主要诉求 需要注意:用户角色并不是一个被访者形成的,而是抽离同类被访者的共性特征虚拟出的角色(可以以一个很典型的人为主,补充其他特征)
② 体验流程梳理
建议先使用表格梳理体验地图,按照格式列好横轴与纵轴维度,以文字的形式汇总同一类用户的调研信息到对应位置,然后处理每个位置的重复信息、合并同样的行为、需求、痛点,向上总结。而且有时候输出表格版本的用户体验地图也能够满足内部需要了~
需要注意:尽量保留“原汁原味”的信息,比如用户的原声表达、有多少用户有这样的需求等,让信息保持丰满、建立同理心。
③ 需求评级
判断体验地图中需求的高低可以从用户角度和业务角度去综合判断:
用户角度: 一是需求对用户任务的影响度,即需求是否在体验的核心链路上、用户是否有其他方式满足该需求,在核心链路且无法通过其他方式满足的需求优先级高;二是需求频次:该需求被提到的频次。(可参考可用性问题评级标准);
业务角度:满足该需求对产品目标的影响,比如产品目标是提升商家 GMV,直接影响 GMV 的需求优先级高。
④ 机会点洞察
调研中思考的机会点:主参与调研过程的人可以先产出自己思考的机会点,但可能会存在难落地、局限性; 与业务不同角色工作坊,共创机会点:组织产品、运营、设计不同角色, 用研 将调研发现作为输入,帮大家理解用户需求,利用体验地图的框架、便利贴等工具共同讨论机会点,更加全面、可落地。 ⑤ 可视化
一般情况下表格版本的用户体验地图可供内部/小范围内的结论同步与分享,也可以进一步可视化便于没有参加构建的同学能快速、重点获取主要信息,也便于更大范围的分享与沉淀。这里为大家提供 2 个来源于网络的用户体验地图可视化:
看完上下篇,你觉得你能自己开始做用户体验地图了吗?可以操练起来试一试~希望对你有帮助,如果有问题可以随时交流
最后我想说,用户体验地图是一种方法/工具,目的是更好地理解用户行为与需求,因此有时候项目发起的目的并不是梳理用户体验地图,但也可以基于调研发现去梳理,做为呈现调研结果的工具,更好地理解用户。而且对用户体验地图的应用,是可以去创新、去发挥的,结合我们不同的调研方法、其他工具,融入到体验地图中,未尝不可?
欢迎关注「JellyDesign」的小程序:
-
用户体验地图设计指南(下篇):构成拆解与流程实操
UI交互 2023-02-13在日常的工作中,大家或多或少都听过/用过用户体验地图,简单的说,用户体验地图是梳理用户场景和体验问题的一种工具,那在用户研究中,什么时候/阶段适合用体验地图?使用体验地图的价值是什么?体验地图又是如何构建的呢?在日常的工作中,大家或多或少都听过/用过用户体验地图,简单的说,用户体验地图是梳理用户场景和体验问题的一种工具,那在 用户研究 中,什么时候/阶段适合用体验地图?使用体验地图的价值是什么?体验地图又是如何构建的呢?该篇文章将会结合两个具体案例为大家逐一解答,文章分为上篇和下篇,上篇主要是介绍用户体验地图的定义、使用场景与价值,下篇会拆解用户体验地图的构成与构建流程。 文章主要以我的经验为主,不是教科书和绝对,希望能带给大家答案/启发~也欢迎互相交流~
“用户体验地图(上篇)概念介绍与使用价值”中主要为大家介绍了用户体验地图的定义界定、使用价值和适用场景,下篇我们进入到“实操”阶段,具体看一下用户体验地图的构成、各部分的意义、以及是如何一步步构建出来的~
还没有看过上篇可先看,先理解概念再进行实操~
用户体验地图设计指南(上):概念介绍与使用价值 在日常的工作中,大家或多或少都听过/用过用户体验地图,简单的说,用户体验地图是梳理用户场景和体验问题的一种工具,那在用户研究中,什么时候/阶段适合用体验地图?
阅读文章 >
一、用户体验地图包含哪些内容? 如果问你体验地图包含哪些内容你会如何回答?用户画像、用户场景、情绪体验、用户痛点等……综合来看,体验地图包含一部分必要内容:即场景、行为、痛点/需求、机会点,也包含一部分可灵活使用的内容:用户画像、用户阶段、触点、情绪体验、用户诉求、标杆,灵活部分我们可以根据项目需要将各有利于我们理解用户的内容加到体验地图里。
另外从信息来源的角度看,地图中包含的内容一部分来源于调查(即用户调研),一部分来源于洞察,也就是我们拿到用户调研信息进行梳理后,由用户研究员、 设计师 、产品等不同角色洞察提炼的内容。结合上篇中的全包用户体验地图具体拆解一下各部分构成的内容与意义:
阶段:用户完成目标大致分成几个阶段,能够更有条理性的去拆分场景、防止丢场景
场景:用户完成目标经历的各个场景,在阶段下进一步拆分,需要注意:
1)是场景,不是我们的产品功能模块(有可能一个场景涉及到多个功能模块) ;
2)不一定是按从早到晚的时间顺序发生的,场景间是前后、转移的关系(比如咨询沟通、量房、出设计是用户在前期确定公司时会多次经历的场景,而不是一次就确定下来)
行为:与场景对应,描述的是该场景下用户是怎么做的,用于理解用户行为的原因、问题点。需要注意:1)关注动作是否有一定顺序,有顺序按照顺序描述;2)描述出用户接触到了什么触点(产品、渠道、人等)
触点:用户在完成目标过程中接触了什么、与什么发生了交互,一方面能够得到目前满足需求的触点是什么、另一方面之后我们的机会点也可以拆到触点中去落地。触点可以分为移动/数字触点、物理触点、人际触点三类,我们在互联网产品项目中可重点关注移动触点,即手机、电脑、不同的 app 等
情绪:用户在各场景下的体验情绪,让用户体验与业务建立更强烈的“共鸣”。而对情绪的描述可以是感性的描述(如开心、迷茫、吃惊、担忧,引发反思“我们的产品为什么让用户有这种感受?”),也可以是高低的描述,采用类似于可用性问题优先级计算或用户评分等方式将用户的情绪高低量化绘制曲线。
标杆:若存在标杆产品/服务可对比,可对应看标杆做了什么解决的用户的什么痛点、对用户情绪拉升的影响。
痛点/需求:描述用户的痛点或需求,从行为顺序上、在各触点上梳理清晰,让归纳有依据。
诉求:在某一场景下或多个场景下用户的核心诉求、想取得的核心价值点是什么,从行为、痛点/需求中提炼洞察而来,帮助我们在设计机会中抓住“核心目标”(比如我们提炼出用户的核心诉求是“省心”,那围绕省心我们可以做哪些满足用户?通过诉求扩大我们的机会点思考范围)
机会点:结合用户痛点/需求、标杆、诉求,对于我们的启发。可以结合触点或不同利益方区分机会点的针对性。
二、用户体验地图的构建流程 如果把用户体验地图当作一个调研方法,它的构建分为 4 步,分别是明确目标与用户、确认场景、开展调研、洞察绘制。但在最初的时候我提到用户体验地图是方法也是工具,如果已经有了足够的调研素材可以直接进入第 4 步洞察绘制。
接下来以 XX 平台的商家直播体验地图为例讲述构建流程
项目背景:XX 平台为了给商家提供更好的直播带货体验,在商家后台上线了直播中控台功能,但目前版本仅是结合经验与竞品做法聚合了“我们认为商家需要的直播相关的功能”,并不确定是否命中商家的直播需求、且想明确迭代方向,因此开展了该项目。
明确目标与用户
确认项目目标是梳理用户体验地图:中控台已有部分功能,在调研中既要关注用户对已有功能的体验情况,也要关注用户的潜在需求,挖掘更多的产品机会点,因此从实际直播场景入手,梳理直播体验地图理解用户真实场景与需求; 区分目标用户群体差异:考虑不同使用经验与不同商家类型的差异,一方面寻找老用户与新用户,另一方面需覆盖不同类型与不同品类的商家,因此需包含作者型、商家型直播达人,包含服饰、母婴、食品、珠宝等不同经营类目的商家。 确认场景
明确目标用户后,需先从内部梳理用户场景,场景将作为研究大纲主线,辅助撰写访谈提纲,在调研中更有条理性的去访谈、观察、验证用户的使用流程(需要注意梳理的是用户场景、而不是产品模块)。如果这个阶段场景不全/顺序不对没关系,我们在后续调研中动态调整。(比如图中绿色字场景均是调研中增加)
梳理方法:走查产品功能、模拟用户使用场景 梳理技巧:从大到小—广度优先,其次深度(比如前面提到的先阶段再场景)
开展调研
调研方法选择:获取用户体验信息的方法不仅是用户访谈,在访谈的基础上叠加观察、共创,能更深入的去挖掘;同时还可以加入情绪打分衡量用户在不同场景下的情绪高低。
访谈+观察:更适合有产品载体的体验过程,如进行已有产品改进、0.5-1 产品创新时。让用户在真实场景中操作产品/体验服务,观察用户行为,鼓励用户随时分享自己的感受(遇到的问题、觉得好的地方等),在用户阶段性完成几个场景或完全结束后,进行深入访谈; 访谈+共创:更适合聚合多触点的体验过程或更偏服务的体验过程,如进行产品增长研究、0-1 产品创新时。将多个同类用户聚在一起,在过程中引入大白纸、便利贴、问题提示卡、刺激物等工具,互相激发、提高讨论效率;
提纲设计与执行:遵循两个原则:一是“场景的”,在整个访谈中多问用户怎么做的、为什么这样做;二是“总分总的”,由整体流程深入到各场景中后再看整体(如先让用户回忆整个流程、关注用户的核心场景,再分场景询问用户的行为、原因、痛点与需求,最后统一回忆确认、查漏补缺)
洞察绘制
在调研结束后,就正式进入到了信息整体分析阶段了~在信息整理前需要明确两个问题~
需要做几张图?看不同类型用户的场景差异与需求差异,场景不同的用户必须分开绘制,若场景相似、行为也相似,仅是需求有差异,可以在一张图中单独指出 ; 场景主线怎么确定?场景并不是“自然时间顺序(从早到晚)”,是“行为顺序”,且并不是所有行为都是线性顺序,可以是局部线性、前后循环。目标是让场景全面且有组织逻辑(如直播体验地图,直播前的设置优惠、投放广告并没有很明确的前后发生顺序,但需保证是属于直播前的;直播中的多个场景是重复/交替出现,不需要写多遍)
弄清楚几张图、场景主线之后就可以正式整理信息了~正式绘制包含 5 个步骤:
① 创建用户角色
当不同用户群体场景、需求差异较大时,需分角色理解用户并创建用户角色/画像。用户角色主要包括用户特征、产品使用习惯、产品目标:
用户特征:对需求有影响的特征,如在工作中的角色(运营、客服、管理等),如较突出的人口学特征(老人、宝妈等) 产品使用习惯:使用产品的场景、频率、主要使用的功能 产品目标:使用产品主要达成的目标/主要诉求 需要注意:用户角色并不是一个被访者形成的,而是抽离同类被访者的共性特征虚拟出的角色(可以以一个很典型的人为主,补充其他特征)
② 体验流程梳理
建议先使用表格梳理体验地图,按照格式列好横轴与纵轴维度,以文字的形式汇总同一类用户的调研信息到对应位置,然后处理每个位置的重复信息、合并同样的行为、需求、痛点,向上总结。而且有时候输出表格版本的用户体验地图也能够满足内部需要了~
需要注意:尽量保留“原汁原味”的信息,比如用户的原声表达、有多少用户有这样的需求等,让信息保持丰满、建立同理心。
③ 需求评级
判断体验地图中需求的高低可以从用户角度和业务角度去综合判断:
用户角度: 一是需求对用户任务的影响度,即需求是否在体验的核心链路上、用户是否有其他方式满足该需求,在核心链路且无法通过其他方式满足的需求优先级高;二是需求频次:该需求被提到的频次。(可参考可用性问题评级标准);
业务角度:满足该需求对产品目标的影响,比如产品目标是提升商家 GMV,直接影响 GMV 的需求优先级高。
④ 机会点洞察
调研中思考的机会点:主参与调研过程的人可以先产出自己思考的机会点,但可能会存在难落地、局限性; 与业务不同角色工作坊,共创机会点:组织产品、运营、设计不同角色, 用研 将调研发现作为输入,帮大家理解用户需求,利用体验地图的框架、便利贴等工具共同讨论机会点,更加全面、可落地。 ⑤ 可视化
一般情况下表格版本的用户体验地图可供内部/小范围内的结论同步与分享,也可以进一步可视化便于没有参加构建的同学能快速、重点获取主要信息,也便于更大范围的分享与沉淀。这里为大家提供 2 个来源于网络的用户体验地图可视化:
看完上下篇,你觉得你能自己开始做用户体验地图了吗?可以操练起来试一试~希望对你有帮助,如果有问题可以随时交流
最后我想说,用户体验地图是一种方法/工具,目的是更好地理解用户行为与需求,因此有时候项目发起的目的并不是梳理用户体验地图,但也可以基于调研发现去梳理,做为呈现调研结果的工具,更好地理解用户。而且对用户体验地图的应用,是可以去创新、去发挥的,结合我们不同的调研方法、其他工具,融入到体验地图中,未尝不可?
欢迎关注「JellyDesign」的小程序:
-
B端干货!4个章节帮你掌握筛选功能设计
UI交互 2023-02-13面对 B 端庞大的平台系统和业务流程,筛选扮演了基础且非常重要的角色。在 B 端系统中,不同的用户操作着不同的业务流程,面对大量的数据,能快速且准确的找到自己需要的数据,可以明显提升任务完成效率。筛选作为任务节点中的重要媒介工具,设计师如何才能准确全面的匹配场景,先让我们全面的认识一下筛选。面对 B 端庞大的平台系统和业务流程,筛选扮演了基础且非常重要的角色。
在 B 端系统中,不同的用户操作着不同的业务流程,面对大量的数据,能快速且准确的找到自己需要的数据,可以明显提升任务完成效率。筛选作为任务节点中的重要媒介工具, 设计师 如何才能准确全面的匹配场景,先让我们全面的认识一下筛选。
更多 筛选功能设计 方法:
B端筛选功能如何设计?4个章节帮你掌握! 引言 筛选作为一个常用的功能,在产品设计中的应用面是非常广的。
阅读文章 >
一、筛选的类型 筛选的存在无非就是帮助用户准确、快速的找到目标数据,这个数据可能是单个,也可能是一组。在《信息架构:超越 Web 设计》中,筛选系统与 导航 系统、标签系统、组织系统被列为信息架构的一部分,因此筛选也会与其他系统有一定的联系,比如状态、类型筛选就需要依赖标签系统。
筛选的类型分为输入类筛选、选择器类筛选、平铺类筛选、分页筛选、高级筛选。
1. 输入类筛选
输入类筛选需要用户输入一定的文本关键词,筛选出对应的数据。输入类筛选从筛选准确性上,可以分为模糊筛选和精准筛选。
① 模糊搜索
按照用户输入的检索词,筛选出字段中带有该检索词的所有数据。
优点:可以筛选出同类数据
缺陷:精准度不高
② 精准搜索
按照用户输入的关键词,仅筛选出整个字段都与筛选词相同的数据。
优点:检索精准 缺陷:由于过于精准,会考验用户的记忆能力。
由于精准搜索的精准性,一个字的偏差,都会造成搜索失败,因此,在正常的设计应用中,模糊搜索的使用频率会更高一些。
输入类筛选从筛选形式上,可以分为单标签搜索和多标签可切换搜索
③ 单标签
单标签搜索只能在输入框中的一个既定范围中搜索。
优点:便捷,应用普遍 缺陷:范围少,面对复杂数据需要多个组合筛选
④ 多标签可切换
在一组标签中选择搜索范围
优点:便捷,节省空间
缺陷:展示不直观;多一步选择标签的操作;不能组合筛选
如果空间有限,没有组合搜索的可能性,可以使用多标签可切换;正常情况下,不要剥夺用户使用组合筛选的机会。
2. 选择器类筛选
选择器类筛选可以是单选或者多选,用户点击选择待选项即可。这类筛选往往是筛选的某类标签或者某组数据,方便用户批量处理。
优点:无需准确记忆,适合批量数据
缺陷:展现方式不直观,匹配结果的精准度不够
此类筛选往往和表单的选择器使用的是同一个组件,而且可以使用第三方的开源库,应用范围比较广,同输入类搜索一样,是最优先被考虑的类型。
3. 平铺类筛选
平铺类筛选是将所有的待选项铺出来,方便用户直观选择。可以是单选,也可以是多选。
优点:待选项平铺,选择方便直观
缺陷:占用空间,待选项数量过多的时候,可能会存在折行或隐藏,没有关键词搜索,选择效率变低
平铺类筛选大多应用在电商、招聘等网站;如果筛选维度很少,空间充足且待选项的数量在 5 个左右,可以考虑在表格、列表页面使用平铺类筛选。
4. 分页筛选
分页 Tabs 类似于平铺类筛选,都是将待选项平铺出来,不一样的是,分页 Tabs 的视觉级别更高一些,相当于标题存在,并且不支持重置。有一些平台也称之为分组。
优点:帮助用户提前做了一轮筛选;待选项平铺,选择方便直观
缺陷:占用空间,需要考虑待选项的数量和页面空间的适配
分页 Tabs 对用户来讲无疑是便捷的数据筛选,但前提是需要保证大多数用户筛选维度的共通性,否则就会对部分用户造成困扰,或者提供用户自定义的机会。
5. 高级筛选
高级筛选的判断关系较多,一般会包括筛选条件、筛选关系(且、或)、筛选类型(包含、不包含、等于、不等于等)、筛选值和添加等属性。
优点:可以满足的用户应用场景最多
缺陷:操作比较繁琐
二、筛选的布局 由于筛选组件的数量和业务应用的场景有所不同,所形成的布局模式会有所差异,大致会分上下布局、侧边布局、浮层布局、表头布局。
1. 上下布局
上下布局是值筛选条件位于数据的顶部
优点:展示直观,筛选条件和数据关系联系更紧密;横向空间上可以展示更多的数据
缺陷:数量多的话会压缩纵向空间
上下布局是当前用户使用方式中最常用的方式,如果系统给的筛选条件过多,需要对筛选条件进行分层,低频类的需要收起。
2. 侧边布局
侧边布局是指将筛选条件列在数据的左侧或者右侧。
优点:可以展示更多的筛选条件
缺陷:宽度大的话会压缩横向空间;从视线覆盖面积来讲,侧边布局用户对照查看数据的耗时会更长
使用侧边布局的时候,需要考量当前内容区数据的字段展示量如何。因为一般情况下,侧边会存在导航,再加侧边筛选,数据压缩比较严重。还要看一下当前用户的使用习惯如何,对侧边布局的接受度。
3. 浮层布局
浮层布局一般会有抽屉、对话框、悬浮框。
优点:节省空间,能容纳更多的筛选条件
缺陷:用户无法快捷的对比筛选值和筛选数据;具有一定的打断性,特别是对话框和抽屉;用户再次修改比较麻烦
浮层布局一般在空间有限,又有筛选需求的时候使用;使用过程中需要标记当前有筛选值,最好能将筛选值单独显示出来,方便用户数据对比和清除重置。
4. 表头布局
表头布局是将筛选条件的图标固定在表格表头的右侧,用户点击后筛选
优点:筛选流程更直观
缺陷:用户无法快捷的对比筛选值和筛选数据;表头的空间有限,如果是横向滚动,隐藏后不容易发现
一般不推荐优先使用表头筛选;像个别场景,空间有限,使用过程要标记当前有筛选值的状态。 如果为方便用户筛选,又没必要单独给界面加一个选择器类筛选,可以尝试使用排序代替筛选,让数据以一定的顺序进行分组。比如按照优先级:高、中、低排序,倒序按照高、中、低的顺序排列,正序反之,可以满足大部分用户的查询需求。 三、筛选的触发方式 1. 实时触发
在输入或者选择筛选值的时候,数据实时匹配。
优点:筛选效率高
缺陷:比较考验系统的稳定性;对于想使用精准搜索范围的场景,会延长整体的加载时间
与手动触发相比,更推荐实时触发,但是要考虑系统的稳定性,在答应用户之前先和研发团队预研方式的可行性。
2. 手动触发
在输入或者选择筛选值的之后,需要手动点一下搜索或者查询按钮。
优点:稳定性更高
缺陷:多一步操作,效率低
四、帮助用户 1. 帮助用户做收纳
无论使用哪种布局或者筛选类型,都会遇到筛选条件数量很多的情况。如果当下不能轻易改变用户习惯或者优化成本太高,可以试试以下三种方式:
对筛选条件进行分层,将高频的筛选条件放在外面,低频的收起,用户用到的时候再展开。
一些复杂 B 端系统,筛选条件是根据用户自定的数据生成,因此数量和内容不可控,多角色场景下使用习惯也不一致,这时可以给几个系统常用筛选条件,让用户可以自定义选择。
考虑极限情况,如果用户确实添加了很多的筛选条件,要考虑页面内局部滚动。
2. 帮用户标记筛选状态
如果在使用可收起筛选、浮层筛选、表头筛选等方式的时候,一定要为用户标记当前有筛选值的状态。如果不标记,用户在筛选后没有重置,离开页面再回来的时候容易遗忘当前已经筛选过。
或者将选择后的筛选值外显,在数据顶部放置一份,方便用户对比和清除。
3. 帮助用户记住筛选值
用户筛选过后,点击数据查看详情,如果详情是一个单独页面,往往都会刷新,再返回的时候,筛选条件已经清空了,如果用户需要多次查看该筛选值下的数据,需要多次选择。
所以,用户从下级页面返回上级页面的时候,需要帮用户记住筛选值。至于是研发记住,还是优化设计表达避免刷新,要具体场景具体分析。
筛选器的使用有的平台也会叫过滤器、视图等,名称有出入,但是功能大体是一致的。
一般在筛选条件数量和使用角色都比较多的业务场景中使用。系统会默认给几个筛选器:全部、我负责的、我创建的等。这是从另外一个维度帮助用户记住:将常用的带有筛选值的筛选条件作为一个筛选组保存起来,方便用户下次进来的时候直接选择使用,方式便捷迅速。
以下是几种筛选器在页面中的常见表现形式:
4. 帮助用户更容易到达
在有筛选条件的表格页面,应该确保顶部筛选条件和操作栏固定。如果数据太多,滚动会隐藏筛选区,应该只允许表格内容区滚动,方便用户对比筛选值和筛选数据。另外,如果用户要修改筛选值,这样的话不需要再回滚,容易再次触及。
当然,除了以上设计复盘,还可以对筛选组件做一些创新设计,有机会再和大家讨论。业务场景的不同会导致设计师的表现也会有所不同,上述是我对最近工作的复盘,如果还有其他的筛选内容,欢迎大家再补充和交流~
-
借势海报必看! 二十四节气之雨水海报设计常用意象总结
UI交互 2023-02-13大家好哇,这里是和你们聊设计的花生~大家所在的城市最近天气怎么样?武汉已经下了好几天的小雨了,看了一下天气预报未来几天也都是雨,不过现在气温渐渐回暖,这样连绵的细雨也不会让人觉得厌烦,反而有“春来了”的感觉。这个月的 19 号就是二十四节气的「雨水」,今天和大家一起看看雨水借势海报设计中有哪些常用的意象。大家好哇,这里是和你们聊设计的花生~
大家所在的城市最近天气怎么样?武汉已经下了好几天的小雨了,看了一下天气预报未来几天也都是雨,不过现在气温渐渐回暖,这样连绵的细雨也不会让人觉得厌烦,反而有“春来了”的感觉。这个月的 19 号就是 二十四节气 的「雨水」,今天和大家一起看看 雨水 借势 海报设计 中有哪些常用的意象。
往期回顾:
借势海报必看! 二十四节气之立春海报设计常用意象总结 大家好,这里是和你们聊设计的花生~ 春雨惊春清谷天,夏满芒夏暑相连。
阅读文章 >
一、“雨水”简介 雨水是二十四节气的第 2 个节气,在每年公历 2 月 18 - 20 日交节,到 3 月 4 日或者 5 日结束。它和谷雨、小满、小雪、大雪一样都是直接利用降水现象作为名称,节气内气温回升较快,降水增多,并且是以小雨和毛毛雨为主。这段时间天气变化不定,容易出现“寒潮”,气温忽冷忽热、乍暖还寒。
由于名称带“雨”,雨水海报设计中经常描绘下雨的场景。这种思路虽然通用,但如果没有很好将品牌或产品特色融入海报中,就会显得生硬甚至莫名其妙。
在收集雨水海报的时,我看到过直接把一台空调或者一瓶饮料放在一个野外下雨的场景中,然后配上一句雨水文案,此外没有任何地方体现产品与节气意象间的互动或关联,看完让人摸不着头脑。个人感觉这种敷衍了事的借势海报不如不做,因为并没有达到有效的借势营销效果,而且容易让用户感觉不被重视。
家电这样直接放外面淋雨不怕坏吗 ?
让品牌与节气产生联系的思路也很多,如果有品牌有 IP 形象,可以直接让围绕 IP 形象设计雨水节气场景:
没有的话可以尝试化用品牌 Logo、将产品形象融入与节气意象中、或者思考一下产品/服务在下雨的时候有哪些用处,能否创造出一些出有趣合宜的场景。
如下图,日用品品牌冷酸灵以俯视视角呈现了一个牙膏管外形的小舟,停泊在细雨连绵、李花盛开的岸边,营造出雨水天气宁静美好的氛围;汽车品牌奇瑞则是把产品放入情侣外出赏雨的场景中,非常自然。这里还要再夸一夸海澜之家的节气借势海报,绿色条纹布料为草地,细细的缝纫线做雨丝,场景虽然简单日常,但产品化用的创意绝妙,令人印象深刻。
雨水在物候历中也有三侯:“一候獭祭鱼;二候鸿雁来;三候草木萌动。”意思是雨水节气来临时,水面冰块都融化了,水獭开始捕鱼。水獭喜欢把鱼咬死后放到岸边依次排列,像是祭祀一般,所以有了“獭祭鱼”之说;雨水五日后,大雁开始从南方飞回北方;再过五日,草木随着地中阳气的上腾而开始抽出嫩芽。自此春意盎然,大地一派欣欣向荣。
此三侯意象在设计中使用最多的是“草木萌动”,经常可以看到描绘细雨下新芽破土而出景象的海报。“獭祭鱼”和“鸿雁来"的意象虽少,但也有令人惊喜的借势呈现。如下图,食品品牌洽洽使用杏仁惟妙惟肖地拼出浮在水面上水獭,用产品来体现雨水物候的思路非常巧妙。
二、“雨水”民俗 雨水节气的传统民俗有回娘家、接寿、赠雨伞,送罐罐肉等,相比立春来说少了一些趣味性,现在还保有的习俗也比较少。
回娘屋:雨水节回娘屋是流行于川西一带的一项风俗。民间到了雨水节,出嫁的女儿纷纷带上礼物回娘家拜望父母。生育了孩子的妇女,须带上罐罐肉、椅子等礼物,感谢父母的养育之恩。
接寿:接寿习俗意思是祝岳父岳母长命百岁。送节的另外一个典型礼品就是“罐罐肉”:用沙锅炖了猪脚和雪山大豆、海带,再用红纸,红绳封了罐口,给岳父岳母送去。这是对辛辛苦苦将女儿养育成人的岳父岳母表示感谢和敬意。如果是新婚女婿送节,岳父岳母还要回赠雨伞,让女婿出门奔波,能遮风挡雨,也有祝愿女婿人生旅途顺利平安的意思。
雨水时节的养生习俗讲究调养脾胃和祛风除湿,饮食上宜少酸多甜,所以适合多吃大枣、菠菜、荸荠、甘蔗、茼蒿和山药,喝枸杞粥、红枣粥、银耳粥,还可以用白菊花、决明子、西洋参等条理脾胃,这些元素适合用在餐饮、外卖、家电品牌的借势海报中。
三、“雨水”常用意象 1. 润物细无声
唐代诗人杜甫有关于春雨的名句“好雨知时节,当春乃发生。随风潜入夜,润物细无声”,因此很多品牌在借势时将自己的产品或服务比喻成“好雨”,能为用户提供贴心细致的使用体验。
电脑品牌联想就将自己的智慧服务比做细雨,静静守护用户设备安全;护肤品牌百雀羚则将自己的护肤水为比做春雨,能滋养皮肤消除细纹,两者是非常好的借势思路。
2. 春雨贵如油
民间有俗语“春雨贵如油”,寓意春雨珍贵,人们应该抓紧时间进行春耕、春播准备工作,以实现“春种一粒粟,秋收万颗籽”,据此可以延伸出“珍惜时光、努力耕耘”的涵义。学习辅导 APP 作业帮就借用了这一意象,鼓励同学们抓紧时间学习知识,点滴努力终会迎来百分成长。
3. 雨过天晴
下雨总是会带来不便,连绵的雨天也容易让人心情压抑。所以很多品牌以此为切入点,用海报传达“雨后终将天晴”、“雨后万象更新”的理念,或强调“风雨中的陪伴”。虽然这个角度也行,但我觉得没有显出“春雨”的及时、珍贵特点,在借势紧密性上不如前两个意象。
4. 植物花草
《 荆楚岁时记 》中记载雨水的花信为:一候菜花、二候杏花、三候李花,其中菜花就是油菜花,雨水时节正是南方油菜花盛开的时候。还有玉兰花也是该时节盛放的花卉,这些花草元素都非常适合用在雨水的海报设计中。
以上就是本期为大家整理的二十四节气中雨水海报设计的常用意象,如果你也关于雨水海报的设计想法,欢迎在评论区分享。喜欢本期推荐的话请大家多多点赞收藏进行支持,我会更有动力为大家推荐设计干货知识 ~
推荐阅读:
AI绘画如何应用到实战?来看腾讯高手的案例! 前言: 当我们谈论画作,会醉心于印象派光影斑斓的色彩,会惊叹于国风文人画如诗如歌的构图,会震撼于画师笔下一个又一个充满想象力和创造力的世界;而当我们提及 AI,脑海中浮现的是前沿深奥的大数据云计算,是冰冷严谨的逻辑思维能力。
阅读文章 >
2023年,让这20款AI工具帮你更高效地完成工作~ 2023年,让这20款AI工具帮你更高效的完成工作~ 大家好,这里是和你们聊设计的花生~ 2022年是AI技术大发展的一年,我都快记不清为大家推荐多少种AI工具了。
阅读文章 >
-
借势海报必看! 二十四节气之雨水海报设计常用意象总结
UI交互 2023-02-13大家好哇,这里是和你们聊设计的花生~大家所在的城市最近天气怎么样?武汉已经下了好几天的小雨了,看了一下天气预报未来几天也都是雨,不过现在气温渐渐回暖,这样连绵的细雨也不会让人觉得厌烦,反而有“春来了”的感觉。这个月的 19 号就是二十四节气的「雨水」,今天和大家一起看看雨水借势海报设计中有哪些常用的意象。大家好哇,这里是和你们聊设计的花生~
大家所在的城市最近天气怎么样?武汉已经下了好几天的小雨了,看了一下天气预报未来几天也都是雨,不过现在气温渐渐回暖,这样连绵的细雨也不会让人觉得厌烦,反而有“春来了”的感觉。这个月的 19 号就是 二十四节气 的「雨水」,今天和大家一起看看 雨水 借势 海报设计 中有哪些常用的意象。
往期回顾:
借势海报必看! 二十四节气之立春海报设计常用意象总结 大家好,这里是和你们聊设计的花生~ 春雨惊春清谷天,夏满芒夏暑相连。
阅读文章 >
一、“雨水”简介 雨水是二十四节气的第 2 个节气,在每年公历 2 月 18 - 20 日交节,到 3 月 4 日或者 5 日结束。它和谷雨、小满、小雪、大雪一样都是直接利用降水现象作为名称,节气内气温回升较快,降水增多,并且是以小雨和毛毛雨为主。这段时间天气变化不定,容易出现“寒潮”,气温忽冷忽热、乍暖还寒。
由于名称带“雨”,雨水海报设计中经常描绘下雨的场景。这种思路虽然通用,但如果没有很好将品牌或产品特色融入海报中,就会显得生硬甚至莫名其妙。
在收集雨水海报的时,我看到过直接把一台空调或者一瓶饮料放在一个野外下雨的场景中,然后配上一句雨水文案,此外没有任何地方体现产品与节气意象间的互动或关联,看完让人摸不着头脑。个人感觉这种敷衍了事的借势海报不如不做,因为并没有达到有效的借势营销效果,而且容易让用户感觉不被重视。
家电这样直接放外面淋雨不怕坏吗 ?
让品牌与节气产生联系的思路也很多,如果有品牌有 IP 形象,可以直接让围绕 IP 形象设计雨水节气场景:
没有的话可以尝试化用品牌 Logo、将产品形象融入与节气意象中、或者思考一下产品/服务在下雨的时候有哪些用处,能否创造出一些出有趣合宜的场景。
如下图,日用品品牌冷酸灵以俯视视角呈现了一个牙膏管外形的小舟,停泊在细雨连绵、李花盛开的岸边,营造出雨水天气宁静美好的氛围;汽车品牌奇瑞则是把产品放入情侣外出赏雨的场景中,非常自然。这里还要再夸一夸海澜之家的节气借势海报,绿色条纹布料为草地,细细的缝纫线做雨丝,场景虽然简单日常,但产品化用的创意绝妙,令人印象深刻。
雨水在物候历中也有三侯:“一候獭祭鱼;二候鸿雁来;三候草木萌动。”意思是雨水节气来临时,水面冰块都融化了,水獭开始捕鱼。水獭喜欢把鱼咬死后放到岸边依次排列,像是祭祀一般,所以有了“獭祭鱼”之说;雨水五日后,大雁开始从南方飞回北方;再过五日,草木随着地中阳气的上腾而开始抽出嫩芽。自此春意盎然,大地一派欣欣向荣。
此三侯意象在设计中使用最多的是“草木萌动”,经常可以看到描绘细雨下新芽破土而出景象的海报。“獭祭鱼”和“鸿雁来"的意象虽少,但也有令人惊喜的借势呈现。如下图,食品品牌洽洽使用杏仁惟妙惟肖地拼出浮在水面上水獭,用产品来体现雨水物候的思路非常巧妙。
二、“雨水”民俗 雨水节气的传统民俗有回娘家、接寿、赠雨伞,送罐罐肉等,相比立春来说少了一些趣味性,现在还保有的习俗也比较少。
回娘屋:雨水节回娘屋是流行于川西一带的一项风俗。民间到了雨水节,出嫁的女儿纷纷带上礼物回娘家拜望父母。生育了孩子的妇女,须带上罐罐肉、椅子等礼物,感谢父母的养育之恩。
接寿:接寿习俗意思是祝岳父岳母长命百岁。送节的另外一个典型礼品就是“罐罐肉”:用沙锅炖了猪脚和雪山大豆、海带,再用红纸,红绳封了罐口,给岳父岳母送去。这是对辛辛苦苦将女儿养育成人的岳父岳母表示感谢和敬意。如果是新婚女婿送节,岳父岳母还要回赠雨伞,让女婿出门奔波,能遮风挡雨,也有祝愿女婿人生旅途顺利平安的意思。
雨水时节的养生习俗讲究调养脾胃和祛风除湿,饮食上宜少酸多甜,所以适合多吃大枣、菠菜、荸荠、甘蔗、茼蒿和山药,喝枸杞粥、红枣粥、银耳粥,还可以用白菊花、决明子、西洋参等条理脾胃,这些元素适合用在餐饮、外卖、家电品牌的借势海报中。
三、“雨水”常用意象 1. 润物细无声
唐代诗人杜甫有关于春雨的名句“好雨知时节,当春乃发生。随风潜入夜,润物细无声”,因此很多品牌在借势时将自己的产品或服务比喻成“好雨”,能为用户提供贴心细致的使用体验。
电脑品牌联想就将自己的智慧服务比做细雨,静静守护用户设备安全;护肤品牌百雀羚则将自己的护肤水为比做春雨,能滋养皮肤消除细纹,两者是非常好的借势思路。
2. 春雨贵如油
民间有俗语“春雨贵如油”,寓意春雨珍贵,人们应该抓紧时间进行春耕、春播准备工作,以实现“春种一粒粟,秋收万颗籽”,据此可以延伸出“珍惜时光、努力耕耘”的涵义。学习辅导 APP 作业帮就借用了这一意象,鼓励同学们抓紧时间学习知识,点滴努力终会迎来百分成长。
3. 雨过天晴
下雨总是会带来不便,连绵的雨天也容易让人心情压抑。所以很多品牌以此为切入点,用海报传达“雨后终将天晴”、“雨后万象更新”的理念,或强调“风雨中的陪伴”。虽然这个角度也行,但我觉得没有显出“春雨”的及时、珍贵特点,在借势紧密性上不如前两个意象。
4. 植物花草
《 荆楚岁时记 》中记载雨水的花信为:一候菜花、二候杏花、三候李花,其中菜花就是油菜花,雨水时节正是南方油菜花盛开的时候。还有玉兰花也是该时节盛放的花卉,这些花草元素都非常适合用在雨水的海报设计中。
以上就是本期为大家整理的二十四节气中雨水海报设计的常用意象,如果你也关于雨水海报的设计想法,欢迎在评论区分享。喜欢本期推荐的话请大家多多点赞收藏进行支持,我会更有动力为大家推荐设计干货知识 ~
推荐阅读:
AI绘画如何应用到实战?来看腾讯高手的案例! 前言: 当我们谈论画作,会醉心于印象派光影斑斓的色彩,会惊叹于国风文人画如诗如歌的构图,会震撼于画师笔下一个又一个充满想象力和创造力的世界;而当我们提及 AI,脑海中浮现的是前沿深奥的大数据云计算,是冰冷严谨的逻辑思维能力。
阅读文章 >
2023年,让这20款AI工具帮你更高效地完成工作~ 2023年,让这20款AI工具帮你更高效的完成工作~ 大家好,这里是和你们聊设计的花生~ 2022年是AI技术大发展的一年,我都快记不清为大家推荐多少种AI工具了。
阅读文章 >
-
B端干货!4个章节帮你掌握筛选功能设计
UI交互 2023-02-13面对 B 端庞大的平台系统和业务流程,筛选扮演了基础且非常重要的角色。在 B 端系统中,不同的用户操作着不同的业务流程,面对大量的数据,能快速且准确的找到自己需要的数据,可以明显提升任务完成效率。筛选作为任务节点中的重要媒介工具,设计师如何才能准确全面的匹配场景,先让我们全面的认识一下筛选。面对 B 端庞大的平台系统和业务流程,筛选扮演了基础且非常重要的角色。
在 B 端系统中,不同的用户操作着不同的业务流程,面对大量的数据,能快速且准确的找到自己需要的数据,可以明显提升任务完成效率。筛选作为任务节点中的重要媒介工具, 设计师 如何才能准确全面的匹配场景,先让我们全面的认识一下筛选。
更多 筛选功能设计 方法:
B端筛选功能如何设计?4个章节帮你掌握! 引言 筛选作为一个常用的功能,在产品设计中的应用面是非常广的。
阅读文章 >
一、筛选的类型 筛选的存在无非就是帮助用户准确、快速的找到目标数据,这个数据可能是单个,也可能是一组。在《信息架构:超越 Web 设计》中,筛选系统与 导航 系统、标签系统、组织系统被列为信息架构的一部分,因此筛选也会与其他系统有一定的联系,比如状态、类型筛选就需要依赖标签系统。
筛选的类型分为输入类筛选、选择器类筛选、平铺类筛选、分页筛选、高级筛选。
1. 输入类筛选
输入类筛选需要用户输入一定的文本关键词,筛选出对应的数据。输入类筛选从筛选准确性上,可以分为模糊筛选和精准筛选。
① 模糊搜索
按照用户输入的检索词,筛选出字段中带有该检索词的所有数据。
优点:可以筛选出同类数据
缺陷:精准度不高
② 精准搜索
按照用户输入的关键词,仅筛选出整个字段都与筛选词相同的数据。
优点:检索精准 缺陷:由于过于精准,会考验用户的记忆能力。
由于精准搜索的精准性,一个字的偏差,都会造成搜索失败,因此,在正常的设计应用中,模糊搜索的使用频率会更高一些。
输入类筛选从筛选形式上,可以分为单标签搜索和多标签可切换搜索
③ 单标签
单标签搜索只能在输入框中的一个既定范围中搜索。
优点:便捷,应用普遍 缺陷:范围少,面对复杂数据需要多个组合筛选
④ 多标签可切换
在一组标签中选择搜索范围
优点:便捷,节省空间
缺陷:展示不直观;多一步选择标签的操作;不能组合筛选
如果空间有限,没有组合搜索的可能性,可以使用多标签可切换;正常情况下,不要剥夺用户使用组合筛选的机会。
2. 选择器类筛选
选择器类筛选可以是单选或者多选,用户点击选择待选项即可。这类筛选往往是筛选的某类标签或者某组数据,方便用户批量处理。
优点:无需准确记忆,适合批量数据
缺陷:展现方式不直观,匹配结果的精准度不够
此类筛选往往和表单的选择器使用的是同一个组件,而且可以使用第三方的开源库,应用范围比较广,同输入类搜索一样,是最优先被考虑的类型。
3. 平铺类筛选
平铺类筛选是将所有的待选项铺出来,方便用户直观选择。可以是单选,也可以是多选。
优点:待选项平铺,选择方便直观
缺陷:占用空间,待选项数量过多的时候,可能会存在折行或隐藏,没有关键词搜索,选择效率变低
平铺类筛选大多应用在电商、招聘等网站;如果筛选维度很少,空间充足且待选项的数量在 5 个左右,可以考虑在表格、列表页面使用平铺类筛选。
4. 分页筛选
分页 Tabs 类似于平铺类筛选,都是将待选项平铺出来,不一样的是,分页 Tabs 的视觉级别更高一些,相当于标题存在,并且不支持重置。有一些平台也称之为分组。
优点:帮助用户提前做了一轮筛选;待选项平铺,选择方便直观
缺陷:占用空间,需要考虑待选项的数量和页面空间的适配
分页 Tabs 对用户来讲无疑是便捷的数据筛选,但前提是需要保证大多数用户筛选维度的共通性,否则就会对部分用户造成困扰,或者提供用户自定义的机会。
5. 高级筛选
高级筛选的判断关系较多,一般会包括筛选条件、筛选关系(且、或)、筛选类型(包含、不包含、等于、不等于等)、筛选值和添加等属性。
优点:可以满足的用户应用场景最多
缺陷:操作比较繁琐
二、筛选的布局 由于筛选组件的数量和业务应用的场景有所不同,所形成的布局模式会有所差异,大致会分上下布局、侧边布局、浮层布局、表头布局。
1. 上下布局
上下布局是值筛选条件位于数据的顶部
优点:展示直观,筛选条件和数据关系联系更紧密;横向空间上可以展示更多的数据
缺陷:数量多的话会压缩纵向空间
上下布局是当前用户使用方式中最常用的方式,如果系统给的筛选条件过多,需要对筛选条件进行分层,低频类的需要收起。
2. 侧边布局
侧边布局是指将筛选条件列在数据的左侧或者右侧。
优点:可以展示更多的筛选条件
缺陷:宽度大的话会压缩横向空间;从视线覆盖面积来讲,侧边布局用户对照查看数据的耗时会更长
使用侧边布局的时候,需要考量当前内容区数据的字段展示量如何。因为一般情况下,侧边会存在导航,再加侧边筛选,数据压缩比较严重。还要看一下当前用户的使用习惯如何,对侧边布局的接受度。
3. 浮层布局
浮层布局一般会有抽屉、对话框、悬浮框。
优点:节省空间,能容纳更多的筛选条件
缺陷:用户无法快捷的对比筛选值和筛选数据;具有一定的打断性,特别是对话框和抽屉;用户再次修改比较麻烦
浮层布局一般在空间有限,又有筛选需求的时候使用;使用过程中需要标记当前有筛选值,最好能将筛选值单独显示出来,方便用户数据对比和清除重置。
4. 表头布局
表头布局是将筛选条件的图标固定在表格表头的右侧,用户点击后筛选
优点:筛选流程更直观
缺陷:用户无法快捷的对比筛选值和筛选数据;表头的空间有限,如果是横向滚动,隐藏后不容易发现
一般不推荐优先使用表头筛选;像个别场景,空间有限,使用过程要标记当前有筛选值的状态。 如果为方便用户筛选,又没必要单独给界面加一个选择器类筛选,可以尝试使用排序代替筛选,让数据以一定的顺序进行分组。比如按照优先级:高、中、低排序,倒序按照高、中、低的顺序排列,正序反之,可以满足大部分用户的查询需求。 三、筛选的触发方式 1. 实时触发
在输入或者选择筛选值的时候,数据实时匹配。
优点:筛选效率高
缺陷:比较考验系统的稳定性;对于想使用精准搜索范围的场景,会延长整体的加载时间
与手动触发相比,更推荐实时触发,但是要考虑系统的稳定性,在答应用户之前先和研发团队预研方式的可行性。
2. 手动触发
在输入或者选择筛选值的之后,需要手动点一下搜索或者查询按钮。
优点:稳定性更高
缺陷:多一步操作,效率低
四、帮助用户 1. 帮助用户做收纳
无论使用哪种布局或者筛选类型,都会遇到筛选条件数量很多的情况。如果当下不能轻易改变用户习惯或者优化成本太高,可以试试以下三种方式:
对筛选条件进行分层,将高频的筛选条件放在外面,低频的收起,用户用到的时候再展开。
一些复杂 B 端系统,筛选条件是根据用户自定的数据生成,因此数量和内容不可控,多角色场景下使用习惯也不一致,这时可以给几个系统常用筛选条件,让用户可以自定义选择。
考虑极限情况,如果用户确实添加了很多的筛选条件,要考虑页面内局部滚动。
2. 帮用户标记筛选状态
如果在使用可收起筛选、浮层筛选、表头筛选等方式的时候,一定要为用户标记当前有筛选值的状态。如果不标记,用户在筛选后没有重置,离开页面再回来的时候容易遗忘当前已经筛选过。
或者将选择后的筛选值外显,在数据顶部放置一份,方便用户对比和清除。
3. 帮助用户记住筛选值
用户筛选过后,点击数据查看详情,如果详情是一个单独页面,往往都会刷新,再返回的时候,筛选条件已经清空了,如果用户需要多次查看该筛选值下的数据,需要多次选择。
所以,用户从下级页面返回上级页面的时候,需要帮用户记住筛选值。至于是研发记住,还是优化设计表达避免刷新,要具体场景具体分析。
筛选器的使用有的平台也会叫过滤器、视图等,名称有出入,但是功能大体是一致的。
一般在筛选条件数量和使用角色都比较多的业务场景中使用。系统会默认给几个筛选器:全部、我负责的、我创建的等。这是从另外一个维度帮助用户记住:将常用的带有筛选值的筛选条件作为一个筛选组保存起来,方便用户下次进来的时候直接选择使用,方式便捷迅速。
以下是几种筛选器在页面中的常见表现形式:
4. 帮助用户更容易到达
在有筛选条件的表格页面,应该确保顶部筛选条件和操作栏固定。如果数据太多,滚动会隐藏筛选区,应该只允许表格内容区滚动,方便用户对比筛选值和筛选数据。另外,如果用户要修改筛选值,这样的话不需要再回滚,容易再次触及。
当然,除了以上设计复盘,还可以对筛选组件做一些创新设计,有机会再和大家讨论。业务场景的不同会导致设计师的表现也会有所不同,上述是我对最近工作的复盘,如果还有其他的筛选内容,欢迎大家再补充和交流~