-
免费可商用!提供超多音乐的在线网站「Pixabay Music」
UI交互 2022-05-18Pixabay 是非常热门、知名的免费图库,目前已经拥有超过 260 万个高质量相片和影音素材,透过搜索或分类、关键词等方式进行查找就能找出合适的图片影片...Pixabay 是非常热门、知名的免费图库,目前已经拥有超过 260 万个高质量相片和影音素材,透过搜索或分类、关键词等方式进行查找就能找出合适的图片影片下载,非常方便:
图库两连发!有三十万可商用图片的Pixabay+图片搜索引擎 今天这篇源自之前合集里推荐过的一个图库站,最近实际深入使用后,发现它确实是个极佳的图片素材库,不但提供了大量且可以免费使用的照片、向量图和艺术插图,而且都可以自由下载使用,包含商业用途,无须署名。
阅读文章 >
本文要推荐的「Pixabay Music」是 Pixabay 免费音乐 MP3 下载服务,提供用户下载 音乐素材 ,可用于影片制作、网页设计、投影片和应用程序开发,以筛选器依照不同类型、情绪、节奏和主题进行搜索和预览,如同 Pixabay 免费图库每个音乐都有独立的页面,如果喜欢还能关注特定的创作者、将音乐加入收藏或是给予爱心,所有音乐都能免费下载为 MP3 格式并使用于个人和商业用途。
Pixabay Music 操作界面很简单,预览时直接从浏览器播放,再点选下载就能取得文件,无需注册或登陆账号,依照 Pixabay 授权说明所有内容皆可使用在实体或数字的商业或非商业用途,不须标示出处来源或加入链接,也能对于下载内容进行编辑修改。
之前推荐过的免费下载 音效素材 网站:
免费可商用!提供超多风格音乐/音效素材下载的「Sampld」 本文要介绍的「Sampld」是一个免费下载、分享高音质免版权音乐音效平台,开发者考虑到当今社群媒体、短影片流行(像是 TikTok、Instagram 和 YouTube),希望提供让每个人都能轻松搜索并下载优质音乐素材的网站,以便在制作影片时作为背景音乐使用。
阅读文章 >
免费可商用!拥有超过 5000 个音乐音效素材的 Filmmusic.io 除了免费图库以外还有一个经常被用到的素材是「免费音乐音效」,特别是在制作影片时很容易用到,音乐音效如同图片都有版权规范,不可使用没有授权的素材以免触法(尤其是影片上传后可能会因为版权音乐而遭受部分限制),当然网络上有很多开放免费音乐音效下载的网站,只要符合授权规范就能免费使用。
阅读文章 >
Mixkit 推出新网站!超多音效素材免费下载可商用! 去年曾经推荐过Mixkit免费高画质影片素材网站,在这里可以找到大量的影音素材,无论使用于个人或商业用途皆不受限制,也能复制、编辑或公开始用无需标示出处来源: [link https://www.uisdc.com/video-resources-mixkit] 后来Mixkit陆续
阅读文章 >
Pixabay Music 网站链接: https://pixabay.com/zh/music/
使用教学
开启 Pixabay Music 网站后会看到搜索字段,使用创作者、歌曲、类型或是心情进行搜索,下方还有一排标签快速显示特定音乐,如果要缩小内容范围,先从左上角「持续时间」选择要搜索的音乐长度。
左侧筛选器可勾选、展示特定的音乐结果,像是各种类型、情绪、节奏和主题,主题部分有像是影片音乐、YouTube 影片的音乐、Vlog 音乐、背景音乐、播客(Podcast)音乐、电影音乐等等,勾选后在右侧会实时更新并显示相关音乐。
点选任何一个音乐前方的「播放」直接在网页收听,每个音乐会有标题、创作者、音轨图、长度,点选最后方的「下载」可将音乐保存为 MP3 格式,完全不用注册登陆账号,值得一提的是当点开音乐下方会展示各种标签,有助于用户依循提示找到更多类似音乐。
点选进入音乐页面,还能看到更多信息,包括创作者的上传日期、下载次数、播放次数、被加入爱心或收藏次数,有些页面还会有其他使用者的留言讨论串,同时在下方会有相似的音乐推荐。
点选右上角「免费下载」也能将这段音乐下载、保存为 MP3 格式,非常简单。
在下载时会跳出提示,Pixabay Music 建议可加入对音乐创作者的姓名标示(署名)和超链接,不过不是必须,即使没有做也没关系,有些音乐也会在 YouTube 注册 Content ID,这是 Google 开发的自动化系统可让版权拥有者找出哪些 YouTube 影片含有他们的内容。
如果使用者在注册、登陆后还能下载音乐的授权证明,打开会有授权者的用户名称、音乐标题、文件网址、文件 ID、下载日期等信息。
值得一试的三个理由:
1. Pixabay Music 提供各种类型音乐 MP3 让用户免费下载
2. 适用于影片制作、网页设计、投影片和应用程序开发(商业和非商业用途)
3. 不须标示出处来源或加入链接,登陆后可下载音乐的授权证明
想给Vlog加音乐?这个网站全是免费高质可商用的音乐素材 本文要介绍的「BentenSound」是一个分散式平台,为使用者提供完全免费的音乐库,可运用在影片或任何专案,BentenSound 当前收录的音乐片段不算太多,每一个都带有封面图片、曲名、创作者并能直接在线上预览收听,提供 mp3 格式让使用者免费下载。
阅读文章 >
-
免费可商用!提供超多音乐的在线网站「Pixabay Music」
UI交互 2022-05-18Pixabay 是非常热门、知名的免费图库,目前已经拥有超过 260 万个高质量相片和影音素材,透过搜索或分类、关键词等方式进行查找就能找出合适的图片影片...Pixabay 是非常热门、知名的免费图库,目前已经拥有超过 260 万个高质量相片和影音素材,透过搜索或分类、关键词等方式进行查找就能找出合适的图片影片下载,非常方便:
图库两连发!有三十万可商用图片的Pixabay+图片搜索引擎 今天这篇源自之前合集里推荐过的一个图库站,最近实际深入使用后,发现它确实是个极佳的图片素材库,不但提供了大量且可以免费使用的照片、向量图和艺术插图,而且都可以自由下载使用,包含商业用途,无须署名。
阅读文章 >
本文要推荐的「Pixabay Music」是 Pixabay 免费音乐 MP3 下载服务,提供用户下载 音乐素材 ,可用于影片制作、网页设计、投影片和应用程序开发,以筛选器依照不同类型、情绪、节奏和主题进行搜索和预览,如同 Pixabay 免费图库每个音乐都有独立的页面,如果喜欢还能关注特定的创作者、将音乐加入收藏或是给予爱心,所有音乐都能免费下载为 MP3 格式并使用于个人和商业用途。
Pixabay Music 操作界面很简单,预览时直接从浏览器播放,再点选下载就能取得文件,无需注册或登陆账号,依照 Pixabay 授权说明所有内容皆可使用在实体或数字的商业或非商业用途,不须标示出处来源或加入链接,也能对于下载内容进行编辑修改。
之前推荐过的免费下载 音效素材 网站:
免费可商用!提供超多风格音乐/音效素材下载的「Sampld」 本文要介绍的「Sampld」是一个免费下载、分享高音质免版权音乐音效平台,开发者考虑到当今社群媒体、短影片流行(像是 TikTok、Instagram 和 YouTube),希望提供让每个人都能轻松搜索并下载优质音乐素材的网站,以便在制作影片时作为背景音乐使用。
阅读文章 >
免费可商用!拥有超过 5000 个音乐音效素材的 Filmmusic.io 除了免费图库以外还有一个经常被用到的素材是「免费音乐音效」,特别是在制作影片时很容易用到,音乐音效如同图片都有版权规范,不可使用没有授权的素材以免触法(尤其是影片上传后可能会因为版权音乐而遭受部分限制),当然网络上有很多开放免费音乐音效下载的网站,只要符合授权规范就能免费使用。
阅读文章 >
Mixkit 推出新网站!超多音效素材免费下载可商用! 去年曾经推荐过Mixkit免费高画质影片素材网站,在这里可以找到大量的影音素材,无论使用于个人或商业用途皆不受限制,也能复制、编辑或公开始用无需标示出处来源: [link https://www.uisdc.com/video-resources-mixkit] 后来Mixkit陆续
阅读文章 >
Pixabay Music 网站链接: https://pixabay.com/zh/music/
使用教学
开启 Pixabay Music 网站后会看到搜索字段,使用创作者、歌曲、类型或是心情进行搜索,下方还有一排标签快速显示特定音乐,如果要缩小内容范围,先从左上角「持续时间」选择要搜索的音乐长度。
左侧筛选器可勾选、展示特定的音乐结果,像是各种类型、情绪、节奏和主题,主题部分有像是影片音乐、YouTube 影片的音乐、Vlog 音乐、背景音乐、播客(Podcast)音乐、电影音乐等等,勾选后在右侧会实时更新并显示相关音乐。
点选任何一个音乐前方的「播放」直接在网页收听,每个音乐会有标题、创作者、音轨图、长度,点选最后方的「下载」可将音乐保存为 MP3 格式,完全不用注册登陆账号,值得一提的是当点开音乐下方会展示各种标签,有助于用户依循提示找到更多类似音乐。
点选进入音乐页面,还能看到更多信息,包括创作者的上传日期、下载次数、播放次数、被加入爱心或收藏次数,有些页面还会有其他使用者的留言讨论串,同时在下方会有相似的音乐推荐。
点选右上角「免费下载」也能将这段音乐下载、保存为 MP3 格式,非常简单。
在下载时会跳出提示,Pixabay Music 建议可加入对音乐创作者的姓名标示(署名)和超链接,不过不是必须,即使没有做也没关系,有些音乐也会在 YouTube 注册 Content ID,这是 Google 开发的自动化系统可让版权拥有者找出哪些 YouTube 影片含有他们的内容。
如果使用者在注册、登陆后还能下载音乐的授权证明,打开会有授权者的用户名称、音乐标题、文件网址、文件 ID、下载日期等信息。
值得一试的三个理由:
1. Pixabay Music 提供各种类型音乐 MP3 让用户免费下载
2. 适用于影片制作、网页设计、投影片和应用程序开发(商业和非商业用途)
3. 不须标示出处来源或加入链接,登陆后可下载音乐的授权证明
想给Vlog加音乐?这个网站全是免费高质可商用的音乐素材 本文要介绍的「BentenSound」是一个分散式平台,为使用者提供完全免费的音乐库,可运用在影片或任何专案,BentenSound 当前收录的音乐片段不算太多,每一个都带有封面图片、曲名、创作者并能直接在线上预览收听,提供 mp3 格式让使用者免费下载。
阅读文章 >
-
情绪板经常被吐槽?简单4步帮你做出用得上的情绪板!
UI交互 2022-05-18几乎大部分 UI 设计师在作品集里都会放入“情绪板”这个模块,但是这个模块的利弊其实都很明显,大家都想通过展示情绪板来告诉面试官我是如何定义色彩和产品的视...几乎大部分 UI 设计师在作品集里都会放入“情绪板”这个模块,但是这个模块的利弊其实都很明显,大家都想通过展示情绪板来告诉面试官我是如何定义色彩和产品的视觉风格调性的,但是大部分设计其实在做界面之前都没有做过情绪板,而是反套的。也就是做完界面后,看用到了什么舒服的颜色,然后再去找一些图片和关键词,做成“情绪板”。
所以大家看到的 情绪板 几乎都特别的鸡肋,一是关键词太普遍宽泛,几乎所有产品都能够用。二是图片和关键词关联性并不大,只是好看或者带有需要的颜色而已。
例如上方我在设计平台截取的一些例子,关键词包括:品质、自然、舒服、简约等等,几乎可以用到每一种产品,图片和关键词也并没有太强的关联,为什么自由是一座雪山?为什么活跃是一些电子产品?为什么简约是一幢高楼?为什么专业是一台黄色的电脑?这样的案例比比皆是。
所以很多设计师对情绪板的理解出现了问题,风格定义这件“事”,其实是很难的,需要沉淀非常多的经验,从初学、临摹、原创、大量风格探索尝试后才能逐渐形成风格定义的能力。风格定义也绝对不是找一些图片吸取一些色彩,就搞定了,所以市面上 UI 作品同质化的原因就是大家还没有掌握定义风格的方法。
什么是情绪板 用白话来说,情绪板反馈的就是产品的相关利益者对产品的感受和期望,并将其具像化的方法和过程。每一个产品利益者对产品的期望都不同,一千个人心里都有一千个哈姆雷特,那么产品呈现出什么样子,我们需要能够将这些感受和想法进行视觉具像化。这些感受和想法包括了产品的定位、用户的需求、管理者的战略规划等等。
为什么要做情绪板 情绪板的结果并不会直接告诉设计师具体设计的参数,不会告诉设计师应该用什么颜色,应该用什么字体。而是一种视觉导向与感知指引,用来给设计师进行参考,并且设计师要始终如一的贯彻这些引导,这是原因之一。另一个很重要的原因就是在做情绪板的过程中,能够让设计团队、产品管理者对该产品呈现的感知和理念能够达成一致。和情绪板类似的方法还有例如品牌冲刺、人格化块等一系列用于探索产品在视觉感知和产品品牌定位上的方法。
情绪板的步骤 其实很多人对一些方法比较排斥,我个人也是如此。大家一听到方法、方法论头都炸了,你不如直接讲案例来的更直接一点。好,我们今天会将方法和步骤都给大家讲解一下,保证大家能够看懂。
先来将具体的执行步骤,方法流程的简单和复杂还是来自于当下的条件和资源,以及我们的期望。同时情绪板运用的时机也有讲究,它并不适合运用在比较成熟的产品设计中,而适合用在 0-1 或者 1-2 版本的阶段。在这个阶段里产品品牌初具雏形,用户数据和特征也逐渐成型,所以我们有更多的数据来对这些反馈进行准确的描述。
如果我们的条件和资源丰富,那么需要邀请用户一起来参与,如果条件不允许,那么至少也要将公司其他部门以及高层管理一起来参与,当然如果这些条件都不具备,那么设计团队和设计个人也可以进行,但是对个人经验要求比较高。
那么我们先理想化的来一次讲解。
第一步-邀请相关利益者并进行访谈研究
我们需要邀请一下人员参与此次情绪板的方法研究:1.用户(注意覆盖多类样本 3 名左右即可)2.设计团队成员(覆盖到其他参与方法的人员人数)3.其他利益相关部门负责人(2-3 人)4.老板(必须邀请)。由牵头设计师进行主持。
首先每一位设计师找到其他参与方法的人员,一对一开始进行访谈,主要围绕以下几个问题:
1. 产品带给你什么感受
2. 您觉得和 xx(竞品)比起来有什么差别
3. 如果将我们的产品比作一个人,你觉得他是谁
4. 如何向朋友介绍这个产品
5. 它和你身边的那种物品有相似的气质
……
还有更多的问题可以根据不同产品定位进行拓展。为什么要问这些问题呢?这些问题将覆盖到用户对产品的一种主观感受,并将其拟人、拟物化,让用户能描述出和竞品在主观感知上的差异和区别。于是我们会得到一些关于这些问题的关键词。
第二步-产出体验关键词并进行三维映射
得出的关键词例如我们经常会说的品质、自然这样比较抽象的词,也会得到像父亲、皮带这样具像化的关键词。这里要注意的是当用户描述出他心中的关键词后一定要进行追问,例如为什么您觉得它像父亲而不是母亲呢?这里就要时刻去找到用户关键词背后的真实想法。
接下来我们会用到三维映射法,将所有关键词都划分出 3 种类型:
1.视觉映射 2.感受映射 3.具象映射,并继续访谈用户:您刚才说产品给您的感觉是时尚的,那么您觉得时尚在你心中是什么颜色的,时尚给您一种什么感觉以及如果让您用一个物品来代替时尚,您会选择什么物品?
这样做的好处是能够让抽象的概念具像化,让设计师能够切实理解用户的主观感受。一般如果我们只让用户描述主观感受其实是不准确的。
第三步-让参与者创建情绪板
当我们把所有提炼出来的关键词都找到对应的三维映射后,我们将针对最后的结果进行可视化图片收集。例如用户觉得香奈儿包包可以用来代替时尚这个关键词,那么我们就需要收集更多有关香奈儿包包的图片。在收集图片过程中要注意这几点:
1. 图片必须高清不模糊
2. 图片的数量必须大于 6 张
3. 图片的色彩尽量覆盖多种
4. 图片尽量简洁有主体
将所有关键词都收集完图片后,我们让用户在其中进行挑选,让其选出最符合他说出来的那个关键词的图片,每个关键词选择 1-3 张图片。这三个步骤中,老板的建议和感知也是很关键的,因为我们知道用户一般都会做很多利己的选择,所以也只能作为一定的参考。而老板则是产品的创始人,对产品的定位和期望有更深入的想法,同时这也将为我们后续推动工作提供很有价值的参考。
那有小伙伴说,老板没有审美,很土怎么办。其实这个不重要,在这几个环节中同时也要避免为了迎合老板而做出的决定,我们只需要听老板的感知然后去分析即可,并不是老板说要什么就一定要去实现,否则就违背了本次方法的初衷。
第四步-结合情绪板制定设计风格
情绪板最后输出的其实就是关键词+具像化的图片。到最后一个步骤,大家觉得是不是还是很迷茫,那和我们做设计到底有什么关系呢?所以我们在做完这一系列操作之后,需要由资深、专家来牵头完成风格的脑爆和定义。例如我们可以在设计团队内继续进行讨论,围绕形、色、字、构、质五个维度进行脑暴。每个人对这五个维度进行效果制作,可以是 UI 首页、海报、插画,以提炼出来的关键词和图片为准绳进行设计。可能需要几天时间,之后再次进行会议讨论,为什么每个人的设计是这样的,思路是什么。
所以其实情绪板最后的效果,很大程度上取决于设计师的设计能力。如果团队都是设计新人,那么也没有必要做这个方法了。
案例 接下去我说一下之前我们项目中的案例。我们当时根据用户以及产品定位提炼出来这些关键词:沙发、撞色、口红、香奈儿包、潮流、多彩、品质。针对这些关键词我们继续寻找图片。
根据这些图片,我们从形色质构质五个维度去寻找设计的灵感,例如在形状方面我们提炼出了棱形作为一个特征符号,可以运用在图标、背景修饰元素以及容积形状等地方。
颜色我们提炼出了产品主色以及辅助色,让页面更加活泼、轻量化。在金刚区图标以及 banner 背景的运用上,用到了撞色以及浅色背景突出主题的设计。
字体方面主要是运用到一些特殊字体时候的字体设计,例如在今日特卖以及明日预告等一些固定栏目标题的场景。
构,运用在了一些氛围大图的结构布局上,采用了大标题结合大主体的对角线构图以及对称构图。还有在 banner 的设计中利用前中后景营造的纵深感。
质,运用到的是在图片背景中采用了氛围元素的搭配以及一些微渐变,让模块的视觉丰富更有质感。
之前给大家介绍的 NOKNOK 应用,一款像素风格的游戏社区产品。其实设计风格这回事,大家不要过度的追求,能营造出非常独特的风格必须要满足以下几个条件:
1. 功能简单。 大家觉得淘宝和新浪微博的风格是什么?是不是很难明显的感知有什么独特的风格?因为产品题量大、功能复杂用户多,所以很难设计出满足所有用户且很独特的风格。
2. 风格小众。 例如像素、极简、摇滚、潮流,这些风格是很容易出效果的,平时我们接触的大部分产品都是满足大部分用户的视觉偏好,突然有一天你看到这些小众风格你就会觉得很特别。但是这些小众的风格是很有局限的,例如你让淘宝去做成极简风,或者大众点评去做成很潮流的风格,人家功能点这么多,没有空间让你去做视觉的发挥,就无法展示出用来表达风格的细节。
所以,如果你们不是正在创业或者从零开始设计,那么就不要太追求小众化的设计风格。情绪板这回事听起来很专业,但实际操作起来还是有很多问题的,一味的追求方法不如自己多练习几种不同的设计风格,多看看国内外的优秀作品。希望大家在不久的将来都可以成为独当一面的设计专家。
情绪板还能这样做?难怪大厂的设计师那么强 Hi,我是彩云。
阅读文章 >
欢迎关注作者的微信公众号:「应谋鬼计」
-
情绪板经常被吐槽?简单4步帮你做出用得上的情绪板!
UI交互 2022-05-18几乎大部分 UI 设计师在作品集里都会放入“情绪板”这个模块,但是这个模块的利弊其实都很明显,大家都想通过展示情绪板来告诉面试官我是如何定义色彩和产品的视...几乎大部分 UI 设计师在作品集里都会放入“情绪板”这个模块,但是这个模块的利弊其实都很明显,大家都想通过展示情绪板来告诉面试官我是如何定义色彩和产品的视觉风格调性的,但是大部分设计其实在做界面之前都没有做过情绪板,而是反套的。也就是做完界面后,看用到了什么舒服的颜色,然后再去找一些图片和关键词,做成“情绪板”。
所以大家看到的 情绪板 几乎都特别的鸡肋,一是关键词太普遍宽泛,几乎所有产品都能够用。二是图片和关键词关联性并不大,只是好看或者带有需要的颜色而已。
例如上方我在设计平台截取的一些例子,关键词包括:品质、自然、舒服、简约等等,几乎可以用到每一种产品,图片和关键词也并没有太强的关联,为什么自由是一座雪山?为什么活跃是一些电子产品?为什么简约是一幢高楼?为什么专业是一台黄色的电脑?这样的案例比比皆是。
所以很多设计师对情绪板的理解出现了问题,风格定义这件“事”,其实是很难的,需要沉淀非常多的经验,从初学、临摹、原创、大量风格探索尝试后才能逐渐形成风格定义的能力。风格定义也绝对不是找一些图片吸取一些色彩,就搞定了,所以市面上 UI 作品同质化的原因就是大家还没有掌握定义风格的方法。
什么是情绪板 用白话来说,情绪板反馈的就是产品的相关利益者对产品的感受和期望,并将其具像化的方法和过程。每一个产品利益者对产品的期望都不同,一千个人心里都有一千个哈姆雷特,那么产品呈现出什么样子,我们需要能够将这些感受和想法进行视觉具像化。这些感受和想法包括了产品的定位、用户的需求、管理者的战略规划等等。
为什么要做情绪板 情绪板的结果并不会直接告诉设计师具体设计的参数,不会告诉设计师应该用什么颜色,应该用什么字体。而是一种视觉导向与感知指引,用来给设计师进行参考,并且设计师要始终如一的贯彻这些引导,这是原因之一。另一个很重要的原因就是在做情绪板的过程中,能够让设计团队、产品管理者对该产品呈现的感知和理念能够达成一致。和情绪板类似的方法还有例如品牌冲刺、人格化块等一系列用于探索产品在视觉感知和产品品牌定位上的方法。
情绪板的步骤 其实很多人对一些方法比较排斥,我个人也是如此。大家一听到方法、方法论头都炸了,你不如直接讲案例来的更直接一点。好,我们今天会将方法和步骤都给大家讲解一下,保证大家能够看懂。
先来将具体的执行步骤,方法流程的简单和复杂还是来自于当下的条件和资源,以及我们的期望。同时情绪板运用的时机也有讲究,它并不适合运用在比较成熟的产品设计中,而适合用在 0-1 或者 1-2 版本的阶段。在这个阶段里产品品牌初具雏形,用户数据和特征也逐渐成型,所以我们有更多的数据来对这些反馈进行准确的描述。
如果我们的条件和资源丰富,那么需要邀请用户一起来参与,如果条件不允许,那么至少也要将公司其他部门以及高层管理一起来参与,当然如果这些条件都不具备,那么设计团队和设计个人也可以进行,但是对个人经验要求比较高。
那么我们先理想化的来一次讲解。
第一步-邀请相关利益者并进行访谈研究
我们需要邀请一下人员参与此次情绪板的方法研究:1.用户(注意覆盖多类样本 3 名左右即可)2.设计团队成员(覆盖到其他参与方法的人员人数)3.其他利益相关部门负责人(2-3 人)4.老板(必须邀请)。由牵头设计师进行主持。
首先每一位设计师找到其他参与方法的人员,一对一开始进行访谈,主要围绕以下几个问题:
1. 产品带给你什么感受
2. 您觉得和 xx(竞品)比起来有什么差别
3. 如果将我们的产品比作一个人,你觉得他是谁
4. 如何向朋友介绍这个产品
5. 它和你身边的那种物品有相似的气质
……
还有更多的问题可以根据不同产品定位进行拓展。为什么要问这些问题呢?这些问题将覆盖到用户对产品的一种主观感受,并将其拟人、拟物化,让用户能描述出和竞品在主观感知上的差异和区别。于是我们会得到一些关于这些问题的关键词。
第二步-产出体验关键词并进行三维映射
得出的关键词例如我们经常会说的品质、自然这样比较抽象的词,也会得到像父亲、皮带这样具像化的关键词。这里要注意的是当用户描述出他心中的关键词后一定要进行追问,例如为什么您觉得它像父亲而不是母亲呢?这里就要时刻去找到用户关键词背后的真实想法。
接下来我们会用到三维映射法,将所有关键词都划分出 3 种类型:
1.视觉映射 2.感受映射 3.具象映射,并继续访谈用户:您刚才说产品给您的感觉是时尚的,那么您觉得时尚在你心中是什么颜色的,时尚给您一种什么感觉以及如果让您用一个物品来代替时尚,您会选择什么物品?
这样做的好处是能够让抽象的概念具像化,让设计师能够切实理解用户的主观感受。一般如果我们只让用户描述主观感受其实是不准确的。
第三步-让参与者创建情绪板
当我们把所有提炼出来的关键词都找到对应的三维映射后,我们将针对最后的结果进行可视化图片收集。例如用户觉得香奈儿包包可以用来代替时尚这个关键词,那么我们就需要收集更多有关香奈儿包包的图片。在收集图片过程中要注意这几点:
1. 图片必须高清不模糊
2. 图片的数量必须大于 6 张
3. 图片的色彩尽量覆盖多种
4. 图片尽量简洁有主体
将所有关键词都收集完图片后,我们让用户在其中进行挑选,让其选出最符合他说出来的那个关键词的图片,每个关键词选择 1-3 张图片。这三个步骤中,老板的建议和感知也是很关键的,因为我们知道用户一般都会做很多利己的选择,所以也只能作为一定的参考。而老板则是产品的创始人,对产品的定位和期望有更深入的想法,同时这也将为我们后续推动工作提供很有价值的参考。
那有小伙伴说,老板没有审美,很土怎么办。其实这个不重要,在这几个环节中同时也要避免为了迎合老板而做出的决定,我们只需要听老板的感知然后去分析即可,并不是老板说要什么就一定要去实现,否则就违背了本次方法的初衷。
第四步-结合情绪板制定设计风格
情绪板最后输出的其实就是关键词+具像化的图片。到最后一个步骤,大家觉得是不是还是很迷茫,那和我们做设计到底有什么关系呢?所以我们在做完这一系列操作之后,需要由资深、专家来牵头完成风格的脑爆和定义。例如我们可以在设计团队内继续进行讨论,围绕形、色、字、构、质五个维度进行脑暴。每个人对这五个维度进行效果制作,可以是 UI 首页、海报、插画,以提炼出来的关键词和图片为准绳进行设计。可能需要几天时间,之后再次进行会议讨论,为什么每个人的设计是这样的,思路是什么。
所以其实情绪板最后的效果,很大程度上取决于设计师的设计能力。如果团队都是设计新人,那么也没有必要做这个方法了。
案例 接下去我说一下之前我们项目中的案例。我们当时根据用户以及产品定位提炼出来这些关键词:沙发、撞色、口红、香奈儿包、潮流、多彩、品质。针对这些关键词我们继续寻找图片。
根据这些图片,我们从形色质构质五个维度去寻找设计的灵感,例如在形状方面我们提炼出了棱形作为一个特征符号,可以运用在图标、背景修饰元素以及容积形状等地方。
颜色我们提炼出了产品主色以及辅助色,让页面更加活泼、轻量化。在金刚区图标以及 banner 背景的运用上,用到了撞色以及浅色背景突出主题的设计。
字体方面主要是运用到一些特殊字体时候的字体设计,例如在今日特卖以及明日预告等一些固定栏目标题的场景。
构,运用在了一些氛围大图的结构布局上,采用了大标题结合大主体的对角线构图以及对称构图。还有在 banner 的设计中利用前中后景营造的纵深感。
质,运用到的是在图片背景中采用了氛围元素的搭配以及一些微渐变,让模块的视觉丰富更有质感。
之前给大家介绍的 NOKNOK 应用,一款像素风格的游戏社区产品。其实设计风格这回事,大家不要过度的追求,能营造出非常独特的风格必须要满足以下几个条件:
1. 功能简单。 大家觉得淘宝和新浪微博的风格是什么?是不是很难明显的感知有什么独特的风格?因为产品题量大、功能复杂用户多,所以很难设计出满足所有用户且很独特的风格。
2. 风格小众。 例如像素、极简、摇滚、潮流,这些风格是很容易出效果的,平时我们接触的大部分产品都是满足大部分用户的视觉偏好,突然有一天你看到这些小众风格你就会觉得很特别。但是这些小众的风格是很有局限的,例如你让淘宝去做成极简风,或者大众点评去做成很潮流的风格,人家功能点这么多,没有空间让你去做视觉的发挥,就无法展示出用来表达风格的细节。
所以,如果你们不是正在创业或者从零开始设计,那么就不要太追求小众化的设计风格。情绪板这回事听起来很专业,但实际操作起来还是有很多问题的,一味的追求方法不如自己多练习几种不同的设计风格,多看看国内外的优秀作品。希望大家在不久的将来都可以成为独当一面的设计专家。
情绪板还能这样做?难怪大厂的设计师那么强 Hi,我是彩云。
阅读文章 >
欢迎关注作者的微信公众号:「应谋鬼计」
-
万字干货!保姆级的字体设计全方位教学
UI交互 2022-05-18前言 在平时的工作中,我们是否有考虑过运营设计的商业目标是什么?看到这个问题的我们一定脑袋一片空白。 首先我们可以把运营设计分为两派,一派...前言 在平时的工作中,我们是否有考虑过运营设计的商业目标是什么?看到这个问题的我们一定脑袋一片空白。
首先我们可以把 运营设计 分为两派,一派为内容运营,另一派为活动运营,他们的共同目的都是帮助产品获得用户,实现流量最大化,从而形成一个正循环,最终完成商业化目标。当我们面对一个优秀的运营作品时,真的只是被画面吸引么?答案是否定的,我咨询了很多身边朋友,大部分同学给到的反馈是,首先会被文字或标题所吸引,其次是版式和图像,最后是颜色,由此看来图像的本质是吸引眼球,文字才是快速传递信息确保用户长时间停留的关键所在。
从古至今,文字在信息传播上都有着举足轻重的地位,随着移动端的兴起我们的表达方式也变得更加多元化,现如今网络上随处可见充斥着各种短视频,图像等信息传播方式,但随着我国人口老龄化加剧,随之而来的就是各种适老化产品的出现,据调研老年人对内容的文字呈现形式信服程度远远高于图像呈现,进而我们在设计中更要注重对字体的设计,而不是直接把文案摆在画面中。事实上 字体设计 只是平面设计中的一个小小的分支,但文案的呈现样式无疑是运营设计创作中的重要组成部分,也是从事互联网设计的基础要素。
了解字体设计 1. 字体设计定义 简单来说,字体设计可以理解是将我们标准的“无衬线体”和“有衬线体”也是我们俗称的黑体和宋体的基础上根据内容含义发挥创造力对其进行修饰以及解构重组。以下图为例可以简单的区分无衬线字体和衬线字体。看到这一概念一定会有疑问“自己在平时工作中直接使用不同样式的字体也属于字体设计么?
2. 字体设计起源 通过下图我们可以简单了解到中国汉字的发展历程。
迟同斌(开心老头)老师在《字体设计定位与通用字形》中提到汉字的字库设计发展其实就是汉字的发展,从甲骨文的象形文字再到金文、小篆、隶书,再到适合印刷的宋体出现,都是由我们的先人在不断设计才使我们现在有了这么多丰富的汉字字体艺术。难道甲骨文不是被“设计”出来的吗?难道历代大书法家不是字体设计大师吗?字体设计的演变是与其应用环境和文化科技发展息息相关的。宋体的出现主要就是为了印刷制版,便于传播文化,要是用毛笔写宋体你看看得有多费劲,再看看如果用刻刀在木板上刻行书也是很难的。而现代字体设计大多都是在电脑上完成设计,并且很多的应用也都是在出现各种电子媒体上 。
随着信息传播的载体不断丰富,各式各样的字库也随之涌现不再局限于功能性需求,现在更注重我们获取信息时的清晰度以及舒适度。这样就给字库设计带来了更多的可能性。但是万变不离其宗,字库设计仍然需要保持可读性,辨识性,统一性以及有由新媒体时代而衍生出来的的推广性,一套优秀字库的设计需要字体设计师熟练掌握字体设计工具的同时对中国汉字的的发展以及书法万分了解,不过最重要的还是需要设计师要耐得住寂寞,为了满足基本场景运用一整套字体算下来一共需要六千七百个字,对于设计师来说一套字体需要消耗半年甚至一年的时间,面市后还需要相当长的一段时间获取各个使用领域的反馈,然后对反馈内容进行后续的修改和完善。
3. 字体设计的现状 随着走访身边的朋友,并且以调查问卷的形式发现当下字体设计工作中存在一些问题。
用户重点关注标题
随着信息传播的多样化,我们每天都被迫接收的各种各样五花八门的信息,这也间接导致我们对信息的关注度越来越碎片化,对信息的注意程度也越来越不集中。对于品牌方来说各式各样的活动内容,既要吸引用户注意又要迅速的传达活动信息,这就需要将很大的篇幅给到标题,用户会根据标题是否符合自己的兴趣和需求在选择是否驻足当下页面,进行下一步观看活动内容或者参与其中的操作。
品牌风格不统一
在产品的运营活动中杂乱字体的运用会致使品牌风格无法统一,品牌感降低,设计效率大打折扣。无法满足不同场景的运营需求的同时更会降低用户对品牌的认可度,从而导致用户的流失。
4. 字体设计的类型 根据字体设计的现状以及我在工作中遇到的各种状况总结了字体设计中的几种分类,我们就浅谈一下吧!
运营标题设计
大家工作中有没有遇到过这样的情况,在做运营标题时直接选择字库中看起来挺有设计感字体,结果被甲方投诉到想要哭泣。
甲方爸爸必定会让你对字体进行艺术性处理,这时我们必将化身“卑微小王”对字体进行重新设计,让字体在画面中展现独特的魅力来重新获得甲方爸爸的认可。
为什么进行标题设计
运营设计的标题是建立用户与活动方信息传达最直接的 VIP 通道,如何通过这条通道更直接的给用户传达信息,快速实现活动方的商业目标是我们工作中需要认真思考和复盘的重点。企业里许多设计师在做运营活动时,为了抢占用户更多的时间,很多时候并不需要非常规范化的字体设计,往往只要做到高效率的整理和传达画面情绪并且产出在视觉上可以给用户营造较大冲击力的标题就可以。
通过标题快速在用户意识中对全新的认知和内容进行完美质植入,这样不但可以让用户在较短的时间了解活动内容以及活动利益点,而且可以大大降低与用户的信息沟通成本,提高用户对活动的关注度与参与率。
品牌字库设计
首先我们要了解品牌设计的意义是什么?
品牌设计可以简单理解为是将品牌内容传达给用户,帮助用户理解并认同品牌理念,从而将口袋里的钱全部贡献给品牌方。其中设计师将品牌内核融入字体设计中,可更加直观的传达品牌内容和理念,并且在传播上具有以下作用。
提升品牌影响力
各个公司为了建立自己的品牌形象都在 IP 形象和字体设计上大费周章,文字图像化设计可增强品牌的内在价值,当品牌字体在大街小巷出现时,不仅可以大大增强用户对品牌的认同感,而且可以增强用户对品牌的好感,最终还会出现“人传人”现象促进口碑增长。
强化品牌形象
虽然图像与文字都可以进行信息传达,但与文字相比图像表达更加抽象,文字传达更能直抒胸臆,所以品牌更多的选择使用字体进行塑造及宣传。
增强品牌内涵
对于普通用户来说,他们更加倾向于有特点和个性的品牌,而我国汉字大部分为象形文字,本身就是历经千年沉淀的产物,积蓄着无限能量,品牌下的字体设计也正是因为这一特点挖掘文字内涵,进行一系列的设计,使之在汉字框架内塑造品牌独特的个性。
5. 字体设计的意义 优秀的字体设计从理性角度不仅能让画面结构更出彩,内容更加饱满。在感性角度设计师将自己的理解融入每个字中,带给字体无限的可能性,更能引起用户共鸣,让用户感受到设计师通过文字传达的情感以及作品的趣味性,并且字体的设计也从侧面体现设计师独具匠心的一面。
增强视觉传达导向
与图像传达信息不同的是,文字传达给用户的信息往往不够印象深刻,所以在工作中需要不断创新增强字体的个性,在文字基础功能上做一个延伸,在不失字体可读性,辨识性的前提下创造具有艺术性并且能让用户融入其中的字体,启发用户按照我们的想法去感受,去思考,最终达到吸引用户眼球的注意,引导用户参与的目的。
提升品牌知名度
在市场竞争激烈的当下,品牌方需要提升自己产品竞争力必然会将自家产品以各种形式融入用户的生活,其中最为直接有效的方式则是让用户主动参与其中,便有了众多吸引用户眼球的运营标题设计,文字图形化的方式必定会给用户留下深刻的印象。
除此之外,品牌方要想和用户产生更紧密的联系,还需要出现在用户每天都听得到看得到的地方,品牌字体在此就具有重大贡献,它不仅能出现在任何用户阅读的地方,而且大大加深了用户对品牌的认知度以及好感度。
字体设计原则 1. 三要素决定字体性格 常言道“字如其人,笔记识心。”人是不是很好看我们一般是从这个人的骨架大小、身材胖瘦以及这个人的衣品决定,我们可以把每一个字体都比做一个人,字体好看与否同样是由三大元素决定,分别为:结构框架、笔画、字体效果,三者相互促进相互影响,是不是听的云里雾里,嘿!不重要!一张图解决你的困扰。
文字整体调整
汉字的字形结构
文字辨识度往往是由文字的内骨骼决定,每个字都有每个字独有的骨架,这也是字体独一无二的信息呈现方式。
疑难点 1:中心与重心的区别
重心和中心都是借用物理学中的概念。
中心,就是把字放在一个圆中,圆心就是中心,他只考虑长短、大小。
重心,在物理学层面是被物体形状所影响,可用悬挂法确认物体重心。但在字体层面概念却有所不同,每个字都有自己的重心位置,字体结构不同,重心位置也会不同,但可以简单理解为文字的重心就是文字的视觉中心位置。
仔细观察图中的两个“十”字。第 1 个“十”字的横、竖笔画都对准了中心线,它的重心在“绝对中心”;第 2 个”十”字中把重心调高,重心处于“视觉中心”,相比第 1 个”十”字在视觉上重心偏低了,让人觉得头重脚轻,而把中间的那一横调高后,字形发生了明显的变化,看起来更加舒服。
通常情况下,人们的视觉中心要比实际的绝对中心偏高一些,就好比日常穿着中,人们通常会把上衣放在裤子里,拉高腰线,使整个人的重心上移,这样看起来身材会呈现三七分完美比例,凸显大长腿。同样,在字体设计中,如果我们适当将重心提高,使字体的上半部分紧凑些,下半部分适当宽松一些,那么呈现出的上紧下松的状态会更符合人们的审美。
由此看来重心并非一个绝对位置,以重心画线可将字体均衡地分为上下和左右两个部分。把汉字分割为上下两部分后进行观察,笔画分布靠下则谓之重心低,反之则谓高。其中笔画交叉处或者说是笔画密度尤其能体现重心,重心的高低对字体的视觉感受有很大的影响,从理论上来讲,重心较低的字会给人稳重、信赖且富有亲和力的感觉,而重心偏高则会显得高冷和俊秀。
另外,对于多个字的排列和组合,字体重心的统一性也是极其重要的,若重心出现偏差,就会破坏文字的整体性。
由此看来,字形结构中各个部分的轻微变化都会使整个字体发生天翻地覆的变化。
疑难点 2.何为中宫
中宫的概念起源于书法,书法中以“米”字格或九宫格作为参考,用来确定书写时笔画的位置,其中九宫格参考线中最中间的一格即为中宫。
由于楷书又作标准字体,楷书的特点是所有的笔画有序的聚拢在字的中心,也即为中宫,所以中国汉字的特点也被称为“中宫收紧”,之后也被应用在设计之中。
中宫对字体结构的松紧以及造型有着重要影响,在观察字库中的字体时,你会发现每一种字体的中宫都是一样的。
字体笔画紧凑,聚合在中宫框附近,称之为“中宫紧凑”,反之,笔画远离中宫框,则称为“中宫松散”。
在这里还要给大家引申字谷和字怀的概念。与中宫相同,这三个词都是由书法中延伸出来的。
首先是字谷,它指的是文字中半封闭或全封闭空间,这个概念在西文设计中常常被用到,可以简单理解为字体中封闭的留白区域。再来是字怀,又被称为“字体的内白”,它指的是笔画间的留白区域。笔画越粗,字怀越小,字重越大,字体越稳重。唐代楷书四大家之一的欧阳询《三十六法》中曾提到:“大字难于结密而无间,小字难于宽绰而有余,”字体设计中有些设计师在字怀处理上力求平均,而正确的思路却是让字怀整体有疏密对比变化。
疑难点 3.何为字面
汉字作为传统的“方块字”当设计字体时,一般会有一个外边框进行大小限制,但将几个字放在同样大小的限制框内,这几个字却还是有大有小,搭在一起总是怪怪的。这里的大小并非是字体的大小。而是字体字面比例的大小。字面就是指字体所占字面框的比例大小。
疑难点 4.何为中心线
在我们对字体进行改造设计,将字面框的两条垂直边和平行边中点相连,形成的焦点为中心点,两条线为中心线。这个中心线成为字体的第一中心线,它和中心点控制着每一个字的基本形态,他们的位置是固定的。
小心机 1.空间留白设计
字体的笔画产生空缺处,这就是所谓的留白面积,如何处理留白对于我们来说也是非常重要的。
留白空间越大,就会营造出比较透气,舒缓的节奏。反之,留白空间越小营造出的感觉就会越压抑,沉闷,有力度的氛围。
《公路之歌》—字体帮
小心机 2.重心以及中宫变化
通常重心较高中宫比较窄的字体都比较纤细,比较长具有艺术气息,通常用在和女性相关的品牌中,不与世俗同流合污感觉。
反之重心较低中宫比较宽的字体都比较扁并且笔画较粗的字体通常给人一种成熟,稳重的感觉,常常用在比较男性或正式场合。
《小人物》《战意》—字体帮
汉字的间架结构
由于中国汉字笔画众多,组成结构空间布局也五花八门,字体间架结构可分为以下类型
结构重心统一: 多部分组成的字体结构中,要注意每个部分重心位置要一致。
留白空间统一: 笔画搭配要做到疏密均匀,粗细变化一致。
偏旁部首比例协调: 多部分组合结构中,偏旁部首的大小,主次关系,比例关系,结构穿插,粗细变化,紧密程度都要相互作用,相互影响。
文字的基本笔画
字体图形化的决定性因素就是笔画,不同字体呈现的图形间接决定字体给用户传达的含义。
中国书法用笔法则又称为“永字八法”,相传为隋代智永或东晋王羲之或唐代张旭所创,因其为书写楷书的基本法则,后人又有将八法引为书法的代称。
由于“永”字包含了几乎所有的笔画,所以在字体设计中通过对“永”字的研究了解文字构成,从而设计出结构饱满,笔画美好的字体。
小心机 1.笔画粗细变化
传统概念中,女生小鸟依人,男生魁梧健壮,在字体的运用中也是这个概念。
如果实在想象不出来,可以试着将笔画粗细变化的概念和字体留白放一起理解,笔画越细,留白空间就会越大,字体就会越轻盈。反之,笔画越粗,字体越厚重,分量感越强。
《上海滩》—字体帮
小心机 2.笔画曲直变化
说到笔画曲直不免让我想到《甄嬛传》中甄嬛选手跳惊鸿舞时间翩若惊鸿宛若游龙的形态以及雪融融代言人安陵容选手上演冰戏时柔弱无骨的样子。
笔画以弯曲为主的字体会营造温柔,可爱的意境,多用于儿童或女性品牌。反之,笔画形成的转角过多,会产生速度感和力量感。
《梦醒时分》—字体帮
2. 设计流程 在工作流程中我们会经历以下五个步骤:
需求评审
首先,第一步字体设计分析尤为重要,如果给到的文案小而精炼,那么设计空间会非常的大,如果给到长且语序混乱的文案,则我们的发挥空间将会非常的小。我们需要做的就是:“怼回去,重想文案!”在工作对接中尽量将文案把控在 8 个字之内。
前期脑暴,进行需求归纳
氛围考究,避免答不对题。明确需求并进行脑暴分析关键词,关键词贵精不贵多,之后对关键词进行权重区分并排序,将关键词与和需求文案性格相匹配做出基础的判断,确定需要传达给用户什么样的字体气质和性格,是比较偏向复古感,还是偏向少儿感,还是一个比较阳刚的场景等等。
通过字体性格绘制骨骼草图
当我们确定了整体氛围和字体性格后,将性格细分到字体三要素结构,笔画和细节上,这时就完全确定需求方想要字体的样子,是高?是瘦?是矮?是胖?接下来一定要牢记,开始疯狂找参考,参考网站这里就不一一列举了。世上网站千千万,还怕找不到你要的那个么?
找不到?就是你太懒!
找到合适的一些参考后,对字体的粗细结构,笔画变形和排组合列进行不断探索,可以选择在电脑上绘制草图,方便下一步的设计制作。这时的草图并不需要任何细节,想到就画出来。
左佐工作室
设计实现
针对骨骼草图勾勒出草稿形体,一边进行勾勒一边对笔画的节奏,字体大小以及留白进一步微调。
字效添加
最后就是勾勒好的字体添加一些列效果之后与画面结合在一起,在这里做的效果的前提是清楚整个画面场景氛围。根据场景添加适当的效果,不要画蛇添足。
3. 设计细节解析 视觉偏差
视觉心理是一门奇妙的语言,在文字中不论整体结构也好还是笔画形态也罢,都会因为字体灰度产生字体组合不平衡的状态,灰度指的是在一个字体中笔画和留白空间的分布比例,设计字体杜绝一个字笔画特别密特别黑或者笔画很细过于白。因此字体设计最后总是需要整体观察,细节调整。
笔画粗细导致视觉偏差
中国汉字中,笔画多的字体和笔画少的字体相比起来, 为了让字体的灰度统一,笔画多的字体明显会相对细一些。
横细竖粗: 相同的两条线段,其中垂直的竖线在视觉上会更长一些,一般可缩短垂直线条或者加粗垂直线条,都可以在视觉上看起来两条线条一样长。
左长右短: 相同的两条线段,进行横向排列时,由于人眼习惯性从左向读取内容,会导致左边线段会比右边线段视觉上略长一些,一般可将中间的间隙向左边少做移动。
主粗副细: 复杂笔画的文字中,若所有笔画都是一样粗,整体则没有留白空间,视觉上会觉得文字很憋闷,甚至在自身框笔画重合在一起时,出现识别性低的问题。一般我们需要明确笔画的主次后将主笔变粗,附笔缩窄。
外粗内细: 当遇到全包围的字体,由于内部结构被全部包裹,在视觉上形成一个封闭结构,导致中宫紧缩,这时需要将内部笔画变细,凸显外框,有效的调整视觉平衡。
疏粗密细: 总结以上所有情况包括笔画交叉等结构,都需要将密集处做变细处理,稀疏处进行适当加粗从视觉上解决字体疏密不均的问题。
横竖线条: 在我们的尝试中认为横线条服装显胖,竖线条服装显瘦,但字体中正好相反。
复古与现代字体
通常在笔画上加入细节,笔画细节少,结构越简单,设计出的字体一般更年轻,具有现代感,反之,笔画细节越多结构越复杂就更有年代感和复古感,如果觉得无法想象出具体画面,没关系!我们试想一下宋体字(有衬线字体)和黑体字(无衬线字体)对比,宋体则让我想到老上海日历牌的设计,而黑体字最让我印象深刻的就是苹果官网设计。
通用字形
由于通用字体看起来比标准字更舒展更大气所以最近几年市面上设计师使用通用字形频次越来越频繁,使用的品牌也越来越多,我们可以来浅探一下其背后玄机。
迟同斌老师提出的通用字体其实是将字体中宫放大将笔画外围空间压缩。
字面不同导致视觉偏差
汉字笔画五花八门,字形也千奇百怪,导致相同大小字体字面大小不一,导致我们看到的字体又大又小,因此需要对字面覆盖字面框的比例做出调整。
设计注意点
笔画粗细导致视觉偏差
多个字体组成的标题中,前后一定要有呼应,一定要使用一种设计方式以及展现形式要统一,让字体组合呈现一个整体,而不能每个字有每个字的个性。
在谈到统一时,有些同学会抢答说:将所有笔画粗细变为一致的,虽然这也是一种方法,但这种方法只适合于字体组合中文字笔画都很少的情况下。如果遇到笔画较多的情况,就会在统一字面框内出现笔画粘连,内容黑色区域过多导致单个字体视觉过大。
小技巧 1:笔画装饰
可将笔画两端或局部增添细节,这样整个字体会看起来更加饱满,末端或局部的小修饰,使字体氛围更加有内涵和内容。
《英雄》-刘兵克
小技巧 2:图形装饰
利用常见的几何图形“圆点,等距矩形,等边三角,波纹等”对文字做出装饰,这种方法是最快提示效果的方法,并且可以让字体视觉上前后呼应,具有统一性。
《氧气》-字体帮
小技巧 3:笔画替换
将字体中某个笔画用一个固定的形式置换,“例如将文字中所有的点都用三角形替换掉”,不但可以创造新的字形,而且可以将字体统一化处理。
《告白星球》-字体帮
字体设计指导方针 我国国民审美的不断提升以及保证用户获取信息时的清晰度和舒适度,我们要摒弃以前做字的一些习惯,去除冗余的装饰部分,减少字体变化,做到看似没有设计但又感觉很舒服的设计,要让我们做的字成为画面的点睛之笔,促使用户驻足而不是成为画面累赘降低产品品质感。
字体设计上到线下大型活动,下到字体 icon,标题字体往往最容易让用户记住,而合适的字体形式表达更容易传达内容的情绪,吸引观者共鸣。让人感觉这种字本就该出现在这个画面中,看着感觉舒服,而不是觉得–“怪怪的”。但遇到工期短,项目大的时候,我们如何用最快的时间设计出跳脱的字体。我们由简到难依次递进。
1. 字体设计秘籍 一款字库的价格大家是否有了解过,每一款价格上基本上都保持在一万左右每年,以下是方正和汉仪字库的授权价格。
对于很多公司来说,他们认为没有必要每年花费上万的价格去购买字体,但由于侵权赔付的天价,基本上都再三叮嘱设计师用字时一定要注意。往往工作会遇到很多工期短,任务重的内容,这时我们只要打开神奇的字库用正确的思路方法就可以免费使用正版字库,并且不需要担心字体侵权等问题。
2. 文字整体调整 将字体比作一个人,首先对骨骼内在进行调整然后对外在形象进行大肆修整,让人看不出原来的样子。
接下来是给这个字添加各种装饰品,以及面部修正,让其具有统一性和独特性。
字体细节变化
笔画设计
在笔画上的设计中,不论是省笔还是添笔或者是断笔还是连笔都要保证在不破坏字体识别性的前提下进行。杜绝出现为了设计而设计,要做到言之有理。
省笔: 在不影响字体识别的前提下,省略掉其中的一些笔画,可在视觉上产生新的留白空间。
添笔: 可以简单理解为某个笔画或某个部首的大胆添加,很常见的一种添笔则是在不同黑体的“口”字处理上,不仅体现了不同字体的特征,也增加了字体的个性与统一性。
断笔: 以字面的理解为笔画结构的断开,可以使笔画较少的文字视觉上变得丰富。一般在转折或者笔画交接处产生断开,虽然断裂,但是视觉填补会使字体产生新的节奏感,随之而来的是留白空间和灰色面积变大,字体会有呼吸感。
连笔: 不仅仅局限于笔画间的连笔,还包括字与字之间的连接。
连笔在字体设计中最为常见,因为连笔即能出效果,在执行层面来说难度相对来说比较低。
《绅士》《孤勇者》-字体帮
字内字外顺势相连:在字体组合可通过这种方式连为一体,在单个字体中,也可将笔画与周围笔画相连, 同时一定会伴随着笔画的断笔与方向或长短的调整,使字体看起来更来连贯,字形更加简约。间接组成一个整体独领风骚,而不是每个字体之间的争奇斗艳。致使视觉冲击力大大提升。
字外错位相连:将原本笔画断开后与相邻字的笔画相连接。
添加笔画相连:将需要处理的笔画做出结构性的改变,不仅不会更复杂而且会是字体从视觉上看更加饱满。
调整字体排版进行连接:通过调整字体位置,促使笔画处在同一水平高度后延长某些笔画进而连接,不仅使字体增加层次感,而且使字体性格更加突出。
图形替换: 通常是将字体中某个笔画或者是偏旁部首进行图形置换,这里一般使用与场景或词义相关联的图形。不但可以创造新的字形,而且可以更加生动地传达场景含义。
笔画修饰-添砖加瓦: 可将笔画两端或局部增添细节,这样整个字体会看起来更加饱满,最简单的事例就是中文字体中的黑体与宋体的对比,宋体相对比黑体,它的末端都会出现一些小修饰,使字体氛围更加有内涵和内容。
字体来源《字体帮》
字谷填充: 很多字中的某些结构处于完全封闭的状态,这时可忽略内部笔画,直接将封闭结构用颜色进行填充,切记不要使用深色的颜色进行填充,会使得整个画面显得异常的压抑。
字体来源《字体帮》
描边反白
在设计中描边是经常会用到的功能,它具有很轻的隔离属性,在字体设计中不仅可以通过添加效果完成描边。还可以使用投影形式进行描边,做出伪立体的感觉。
说到投影,我们可以将字体的描边不再拘泥于字体边框的描边,而将它变为自定义图形压在字体下方后会出现类似于泛白的效果,使文字更加突出,营造的氛围更随性,不受限制。
外形处理
字体来源《字体帮》
平面透视: 设置一个透视消失的方向,将字体的笔画做成三角形一边宽一边窄的效果,所有的走势都会聚合在一个消失点上,这种设计手法通常用于速度,洒脱,欢乐的氛围场景中。
除了将笔画进行透视处理外,还可以对某个文字或者文字组合的整体进行透视处理。适当的将设计的透视效果做的夸张一些,这样可以营造出一种冲击感。
借用繁体: 在进行字体设计的时候,会遇到组合中有一个或几个字形和笔画相对于简单的文字,无论用任何方式都不能将字体变得更挺阔,此时我们可以将简单字体换为其繁体版本,意味着还存在更多的笔画设计方式可以探索,这样不仅解决了以上问题而且还使字体笔画变得丰富。繁体一出,整体感觉立马回归上世纪充满复古感和历史感。一般追求中国风或者老字号的品牌常用。
笔画翻转: 在设计字体时,打破定向思维,将文字中某些短小的笔画进行反转,虽然这样的设计手法不会给画面带来太多的新意,但是小小的变化,大大的成长,有时甚至可以将其视为神来之笔,会让字体与众不同。
错位+重组
错位
一般我们将做好的字形做最后的处理升华时会利用错位来实现,可以使用整体的倾斜,旋转,拉伸以及变形,也可以将组合中某一部分进行错位偏移,延长,放大缩小,或者局部消失等操作。
错位的方法在破形同时还保持了字体组合的整体性,让字体组合不再呆板,增添一丝小想法,让字体设计添了几分趣味性。
重组
我们把字体组合当作搭积木,打破固有思维,见缝插针将文案外形排成一个有棱有角的矩形,这样中规中矩的设计形式永远不会失误,并且整体处于一个非常平衡的状态。
一般我们除了利用组合形式外还会与错位搭配来使用,错位可以很好的冲击掉组合的呆板添加一份趣味。这时错位带来的留白空间过大时,可利用小的英文字母或者拼音进行补位,切记一定要小一些,要做到既抢不了主题文字 C 位,还起到了装饰的作用。
周边装饰
图形压低
将已设计好的字体直接压在几何形体上,这样可以使字体更具有统一性和整体性,由于几何图形的压底,间接将字体组合的整体的字面扩大,在画面中能更快的吸引用户的注意。
《劲舞团》《战意》《寻仙》字体帮
图形装饰
利用常见的几何图形“圆点,等距矩形,等边三角,波纹等”对文字做出装饰,这种方法是最快且最出效果的方法,但是使用不当或过多的装饰就会让用户感觉设计比较 old school。
《过火》《再回首》字体帮
字母装饰
字母装饰一般使用英文或者拼音,在整体设计中字符不会太大,不能抢了主题文字的戏。常常被用在文字错位时出现的留白区域内。不是我说,小字母一加,那逼格蹭蹭拉满!
《发财》字体帮
图案装饰
顾名思义,是将文字具象化为小图案后加入设计中作为装饰点缀。
《让子弹飞》字体帮
全局装饰
是将字母,写意,图案装饰三位一体,做到整体化,统一化,全局装饰需要更强的逻辑思维以及创新能力,会营造出强冲击力,经常出现在拉新促活的运营页面中。
《街头篮球》字体帮
借人之手,修饰己身
在多个文字组合中,由于每个字的笔画形态都不一样,设计出来难免会出现交叉或其他状况,这是需要在字与字的交叉处进行笔画走势廓形的反白处理,使这个交界处形成端非断的状态。通常这种修饰不会过分影响字体的整体性,反而会视觉补充会让让整个字体更加统一。
《纸短情长》《忽然之间》字体帮
外形变化
现在我国的设计逐渐偏向简单,内敛,大方的方向,外形变化效果也逐渐减弱,最近发现在东南亚运营活动中频频出现。
笔画变化
描边: 普通的描边的效果过于粗糙,平时工作中给描边加一个渐变,让整体看起来层次感更加丰富。
节外生枝: 可理解为将某一个笔画进行延长后,适当的根据氛围,语义,文字性格将延长部分做弯曲变形,节外生枝的设计手法会将整个字面有一个扩大效果,更偏向于女性,自由等语境进行使用。
《不染》字体帮
颜色叠加
笔画换色: 将字体其中的某些笔画颜色改变,这个方法与笔画反转影响类似,打破定向思维,虽然变化很小,但是让文字有了亮点,让字体视觉上变得与众不同。
渐变叠加: 这是经常在字体设计中使用的技法之一,在笔画间或者笔画内加入渐变,让笔画之间产生叠压感,整体变得更有层次。
3D厚度
由于我们经常做的都是平面物料,当画面中有一个伪 3D 效果文字的出现,在画面中是非常加分的,能第一时间吸引到用户注意。
外形效果
反光
投影
2. 矩形造字 对于刚刚开始做设计的同学来说,字体设计虽然很不起眼,但是却非常给画面加分,字体设计也是促进用户进行下一步操作的关键。但字体设计看似简单,但需要漫长的学习过程,在前期不熟练的情况下,利用字库字体骨骼进行矩形造字是最容易上手的,并且做出来字体方方正正的很规矩,不会出太多的错误。
① 选择性格、语义、氛围合适的字库字体,将每个文字都单独置于矩形框内。矩形框的高低宽窄的选择也同样依据需求性格、语义、氛围制定。
② 将每个文字拉满整个矩形框后确定矩形基本笔画粗细。
③ 按照准备好的文字框,骨骼,笔画进行拼凑字体,注意字体重心位置。
④ 将拼凑好的字体进行细节修饰和基础排版。
⑤ 添加氛围颜色修饰字体。
多字移植嫁接
如果了解这些基本方式后,还是觉得很复杂,工期时间不够,这个方法一定要收好。
① 字体内容进行分析脑暴后对标题的性格有具体了解
② 依旧打开神奇的字库,找到和标题性格类似的多个字体,依次排列
③ 将多个字体的不同部分拼凑组合成新的字体
④ 加一些装饰统一字体样式。
字体骨骼填充
① 字体内容进行分析脑暴后对标题的性格有具体了解
② 打开神奇字库,找到和标题性格的两个样式完全不同的字体
③ 将字体 a 的各个笔画拆解出来填充在字体 a 的骨骼中
④ 加一些装饰统一字体样式。
3. 使用场景分析 在平时的运营工作种类繁多,遇到的活动类型也有所不同,大致将所有活动分为以下三类:
日常运营维护
这一类运营工作是为了让产品内容日常更新不断更,保证用户每天进入产品看到的是不一样的内容,这一块基本上是稳固用户。这一部分在做字体设计中,无需过多的字效,基本字库字体稍稍变形就可以完美适应。
常规节日分发
基本上是遇到一些小节日做的一些运营活动,稳固老用户的同时希望能够吸引到信用用户的参与。这时的字体设计就要在基本的字形上进行一些字效修改和装饰的添加,一年下来这一阶段的工作内容占大多数。
大型拉新促活
这一类工作主要负责“内容”与“用户”的关系以及产品的“营销”,即通过好看、有趣的活动手段,使用渠道,触达用户。既要呈现产品的“好用”,还需要产生强转化与留存。
这使得字体设计直接用于大标题使用,一定要使字体与主题有一个强绑定的关系,继续吸引用户注意。同时确保用户在首屏可以全部识别到。
4. 关于自己的思考 现在的运营设计师和之前的平面设计师的工作内容有本质上的区分,首当其冲的探索方向就是优化工作方法,在此基础上不仅需要帮助用户拥有持续不断的的良好体验,还需要让自己不断适应快速变化的流行趋势。
高质量的运营设计师工作中不仅仅是将图片做的好看这么简单,更重要的是关注用户反馈,对不同的问题采取不同的信息传达的方式,选择一款优秀且合适的字体也可以完美解决运营设计工作中的一多半问题。除此之外还需要时刻思考如何在保证作品质量的同时可以更好的提高作品点击率与转化率,什么样的方式可以更快地实现商业目标。
文献参考
1. 《文字造形》- 魏朝宏 著
2. 《中国字体设计人:一字一生》- 廖洁连 著
3. 《治字百方》- 左佐 著
4. 《设计师的自我修养》- 左佐 著
5. 《字体设计定位于通用字形》- 迟同斌(笔名:开心老头)著魏泽培,周妍姗.字体设计在平面设计中的重要性探究仍.艺术品鉴,2015(08).
6. 《竖屏思维:大幅度提升手机端转化的逻辑和方法》-陈柱子121 李远竹.字体设计在平面设计中的应用探究仍大众文艺,2012(21).3 杨额.字体设计在平面设计中的重要作用四 社科纵横(新理论版),2008(03).
7个技巧让你的字体设计拉满细节感! 前不久一个朋友把自己设计的字体发我看,说总感觉差点意思,但又不知道问题出在哪里,就觉得没有网上看到的字体那么专业,我看了一下,发现主要问题是没有细节、缺少变化,所以显得有点粗糙。
阅读文章 >
欢迎关注作者微信公众号:「YTY DESIGN」
-
万字干货!保姆级的字体设计全方位教学
UI交互 2022-05-18前言 在平时的工作中,我们是否有考虑过运营设计的商业目标是什么?看到这个问题的我们一定脑袋一片空白。 首先我们可以把运营设计分为两派,一派...前言 在平时的工作中,我们是否有考虑过运营设计的商业目标是什么?看到这个问题的我们一定脑袋一片空白。
首先我们可以把 运营设计 分为两派,一派为内容运营,另一派为活动运营,他们的共同目的都是帮助产品获得用户,实现流量最大化,从而形成一个正循环,最终完成商业化目标。当我们面对一个优秀的运营作品时,真的只是被画面吸引么?答案是否定的,我咨询了很多身边朋友,大部分同学给到的反馈是,首先会被文字或标题所吸引,其次是版式和图像,最后是颜色,由此看来图像的本质是吸引眼球,文字才是快速传递信息确保用户长时间停留的关键所在。
从古至今,文字在信息传播上都有着举足轻重的地位,随着移动端的兴起我们的表达方式也变得更加多元化,现如今网络上随处可见充斥着各种短视频,图像等信息传播方式,但随着我国人口老龄化加剧,随之而来的就是各种适老化产品的出现,据调研老年人对内容的文字呈现形式信服程度远远高于图像呈现,进而我们在设计中更要注重对字体的设计,而不是直接把文案摆在画面中。事实上 字体设计 只是平面设计中的一个小小的分支,但文案的呈现样式无疑是运营设计创作中的重要组成部分,也是从事互联网设计的基础要素。
了解字体设计 1. 字体设计定义 简单来说,字体设计可以理解是将我们标准的“无衬线体”和“有衬线体”也是我们俗称的黑体和宋体的基础上根据内容含义发挥创造力对其进行修饰以及解构重组。以下图为例可以简单的区分无衬线字体和衬线字体。看到这一概念一定会有疑问“自己在平时工作中直接使用不同样式的字体也属于字体设计么?
2. 字体设计起源 通过下图我们可以简单了解到中国汉字的发展历程。
迟同斌(开心老头)老师在《字体设计定位与通用字形》中提到汉字的字库设计发展其实就是汉字的发展,从甲骨文的象形文字再到金文、小篆、隶书,再到适合印刷的宋体出现,都是由我们的先人在不断设计才使我们现在有了这么多丰富的汉字字体艺术。难道甲骨文不是被“设计”出来的吗?难道历代大书法家不是字体设计大师吗?字体设计的演变是与其应用环境和文化科技发展息息相关的。宋体的出现主要就是为了印刷制版,便于传播文化,要是用毛笔写宋体你看看得有多费劲,再看看如果用刻刀在木板上刻行书也是很难的。而现代字体设计大多都是在电脑上完成设计,并且很多的应用也都是在出现各种电子媒体上 。
随着信息传播的载体不断丰富,各式各样的字库也随之涌现不再局限于功能性需求,现在更注重我们获取信息时的清晰度以及舒适度。这样就给字库设计带来了更多的可能性。但是万变不离其宗,字库设计仍然需要保持可读性,辨识性,统一性以及有由新媒体时代而衍生出来的的推广性,一套优秀字库的设计需要字体设计师熟练掌握字体设计工具的同时对中国汉字的的发展以及书法万分了解,不过最重要的还是需要设计师要耐得住寂寞,为了满足基本场景运用一整套字体算下来一共需要六千七百个字,对于设计师来说一套字体需要消耗半年甚至一年的时间,面市后还需要相当长的一段时间获取各个使用领域的反馈,然后对反馈内容进行后续的修改和完善。
3. 字体设计的现状 随着走访身边的朋友,并且以调查问卷的形式发现当下字体设计工作中存在一些问题。
用户重点关注标题
随着信息传播的多样化,我们每天都被迫接收的各种各样五花八门的信息,这也间接导致我们对信息的关注度越来越碎片化,对信息的注意程度也越来越不集中。对于品牌方来说各式各样的活动内容,既要吸引用户注意又要迅速的传达活动信息,这就需要将很大的篇幅给到标题,用户会根据标题是否符合自己的兴趣和需求在选择是否驻足当下页面,进行下一步观看活动内容或者参与其中的操作。
品牌风格不统一
在产品的运营活动中杂乱字体的运用会致使品牌风格无法统一,品牌感降低,设计效率大打折扣。无法满足不同场景的运营需求的同时更会降低用户对品牌的认可度,从而导致用户的流失。
4. 字体设计的类型 根据字体设计的现状以及我在工作中遇到的各种状况总结了字体设计中的几种分类,我们就浅谈一下吧!
运营标题设计
大家工作中有没有遇到过这样的情况,在做运营标题时直接选择字库中看起来挺有设计感字体,结果被甲方投诉到想要哭泣。
甲方爸爸必定会让你对字体进行艺术性处理,这时我们必将化身“卑微小王”对字体进行重新设计,让字体在画面中展现独特的魅力来重新获得甲方爸爸的认可。
为什么进行标题设计
运营设计的标题是建立用户与活动方信息传达最直接的 VIP 通道,如何通过这条通道更直接的给用户传达信息,快速实现活动方的商业目标是我们工作中需要认真思考和复盘的重点。企业里许多设计师在做运营活动时,为了抢占用户更多的时间,很多时候并不需要非常规范化的字体设计,往往只要做到高效率的整理和传达画面情绪并且产出在视觉上可以给用户营造较大冲击力的标题就可以。
通过标题快速在用户意识中对全新的认知和内容进行完美质植入,这样不但可以让用户在较短的时间了解活动内容以及活动利益点,而且可以大大降低与用户的信息沟通成本,提高用户对活动的关注度与参与率。
品牌字库设计
首先我们要了解品牌设计的意义是什么?
品牌设计可以简单理解为是将品牌内容传达给用户,帮助用户理解并认同品牌理念,从而将口袋里的钱全部贡献给品牌方。其中设计师将品牌内核融入字体设计中,可更加直观的传达品牌内容和理念,并且在传播上具有以下作用。
提升品牌影响力
各个公司为了建立自己的品牌形象都在 IP 形象和字体设计上大费周章,文字图像化设计可增强品牌的内在价值,当品牌字体在大街小巷出现时,不仅可以大大增强用户对品牌的认同感,而且可以增强用户对品牌的好感,最终还会出现“人传人”现象促进口碑增长。
强化品牌形象
虽然图像与文字都可以进行信息传达,但与文字相比图像表达更加抽象,文字传达更能直抒胸臆,所以品牌更多的选择使用字体进行塑造及宣传。
增强品牌内涵
对于普通用户来说,他们更加倾向于有特点和个性的品牌,而我国汉字大部分为象形文字,本身就是历经千年沉淀的产物,积蓄着无限能量,品牌下的字体设计也正是因为这一特点挖掘文字内涵,进行一系列的设计,使之在汉字框架内塑造品牌独特的个性。
5. 字体设计的意义 优秀的字体设计从理性角度不仅能让画面结构更出彩,内容更加饱满。在感性角度设计师将自己的理解融入每个字中,带给字体无限的可能性,更能引起用户共鸣,让用户感受到设计师通过文字传达的情感以及作品的趣味性,并且字体的设计也从侧面体现设计师独具匠心的一面。
增强视觉传达导向
与图像传达信息不同的是,文字传达给用户的信息往往不够印象深刻,所以在工作中需要不断创新增强字体的个性,在文字基础功能上做一个延伸,在不失字体可读性,辨识性的前提下创造具有艺术性并且能让用户融入其中的字体,启发用户按照我们的想法去感受,去思考,最终达到吸引用户眼球的注意,引导用户参与的目的。
提升品牌知名度
在市场竞争激烈的当下,品牌方需要提升自己产品竞争力必然会将自家产品以各种形式融入用户的生活,其中最为直接有效的方式则是让用户主动参与其中,便有了众多吸引用户眼球的运营标题设计,文字图形化的方式必定会给用户留下深刻的印象。
除此之外,品牌方要想和用户产生更紧密的联系,还需要出现在用户每天都听得到看得到的地方,品牌字体在此就具有重大贡献,它不仅能出现在任何用户阅读的地方,而且大大加深了用户对品牌的认知度以及好感度。
字体设计原则 1. 三要素决定字体性格 常言道“字如其人,笔记识心。”人是不是很好看我们一般是从这个人的骨架大小、身材胖瘦以及这个人的衣品决定,我们可以把每一个字体都比做一个人,字体好看与否同样是由三大元素决定,分别为:结构框架、笔画、字体效果,三者相互促进相互影响,是不是听的云里雾里,嘿!不重要!一张图解决你的困扰。
文字整体调整
汉字的字形结构
文字辨识度往往是由文字的内骨骼决定,每个字都有每个字独有的骨架,这也是字体独一无二的信息呈现方式。
疑难点 1:中心与重心的区别
重心和中心都是借用物理学中的概念。
中心,就是把字放在一个圆中,圆心就是中心,他只考虑长短、大小。
重心,在物理学层面是被物体形状所影响,可用悬挂法确认物体重心。但在字体层面概念却有所不同,每个字都有自己的重心位置,字体结构不同,重心位置也会不同,但可以简单理解为文字的重心就是文字的视觉中心位置。
仔细观察图中的两个“十”字。第 1 个“十”字的横、竖笔画都对准了中心线,它的重心在“绝对中心”;第 2 个”十”字中把重心调高,重心处于“视觉中心”,相比第 1 个”十”字在视觉上重心偏低了,让人觉得头重脚轻,而把中间的那一横调高后,字形发生了明显的变化,看起来更加舒服。
通常情况下,人们的视觉中心要比实际的绝对中心偏高一些,就好比日常穿着中,人们通常会把上衣放在裤子里,拉高腰线,使整个人的重心上移,这样看起来身材会呈现三七分完美比例,凸显大长腿。同样,在字体设计中,如果我们适当将重心提高,使字体的上半部分紧凑些,下半部分适当宽松一些,那么呈现出的上紧下松的状态会更符合人们的审美。
由此看来重心并非一个绝对位置,以重心画线可将字体均衡地分为上下和左右两个部分。把汉字分割为上下两部分后进行观察,笔画分布靠下则谓之重心低,反之则谓高。其中笔画交叉处或者说是笔画密度尤其能体现重心,重心的高低对字体的视觉感受有很大的影响,从理论上来讲,重心较低的字会给人稳重、信赖且富有亲和力的感觉,而重心偏高则会显得高冷和俊秀。
另外,对于多个字的排列和组合,字体重心的统一性也是极其重要的,若重心出现偏差,就会破坏文字的整体性。
由此看来,字形结构中各个部分的轻微变化都会使整个字体发生天翻地覆的变化。
疑难点 2.何为中宫
中宫的概念起源于书法,书法中以“米”字格或九宫格作为参考,用来确定书写时笔画的位置,其中九宫格参考线中最中间的一格即为中宫。
由于楷书又作标准字体,楷书的特点是所有的笔画有序的聚拢在字的中心,也即为中宫,所以中国汉字的特点也被称为“中宫收紧”,之后也被应用在设计之中。
中宫对字体结构的松紧以及造型有着重要影响,在观察字库中的字体时,你会发现每一种字体的中宫都是一样的。
字体笔画紧凑,聚合在中宫框附近,称之为“中宫紧凑”,反之,笔画远离中宫框,则称为“中宫松散”。
在这里还要给大家引申字谷和字怀的概念。与中宫相同,这三个词都是由书法中延伸出来的。
首先是字谷,它指的是文字中半封闭或全封闭空间,这个概念在西文设计中常常被用到,可以简单理解为字体中封闭的留白区域。再来是字怀,又被称为“字体的内白”,它指的是笔画间的留白区域。笔画越粗,字怀越小,字重越大,字体越稳重。唐代楷书四大家之一的欧阳询《三十六法》中曾提到:“大字难于结密而无间,小字难于宽绰而有余,”字体设计中有些设计师在字怀处理上力求平均,而正确的思路却是让字怀整体有疏密对比变化。
疑难点 3.何为字面
汉字作为传统的“方块字”当设计字体时,一般会有一个外边框进行大小限制,但将几个字放在同样大小的限制框内,这几个字却还是有大有小,搭在一起总是怪怪的。这里的大小并非是字体的大小。而是字体字面比例的大小。字面就是指字体所占字面框的比例大小。
疑难点 4.何为中心线
在我们对字体进行改造设计,将字面框的两条垂直边和平行边中点相连,形成的焦点为中心点,两条线为中心线。这个中心线成为字体的第一中心线,它和中心点控制着每一个字的基本形态,他们的位置是固定的。
小心机 1.空间留白设计
字体的笔画产生空缺处,这就是所谓的留白面积,如何处理留白对于我们来说也是非常重要的。
留白空间越大,就会营造出比较透气,舒缓的节奏。反之,留白空间越小营造出的感觉就会越压抑,沉闷,有力度的氛围。
《公路之歌》—字体帮
小心机 2.重心以及中宫变化
通常重心较高中宫比较窄的字体都比较纤细,比较长具有艺术气息,通常用在和女性相关的品牌中,不与世俗同流合污感觉。
反之重心较低中宫比较宽的字体都比较扁并且笔画较粗的字体通常给人一种成熟,稳重的感觉,常常用在比较男性或正式场合。
《小人物》《战意》—字体帮
汉字的间架结构
由于中国汉字笔画众多,组成结构空间布局也五花八门,字体间架结构可分为以下类型
结构重心统一: 多部分组成的字体结构中,要注意每个部分重心位置要一致。
留白空间统一: 笔画搭配要做到疏密均匀,粗细变化一致。
偏旁部首比例协调: 多部分组合结构中,偏旁部首的大小,主次关系,比例关系,结构穿插,粗细变化,紧密程度都要相互作用,相互影响。
文字的基本笔画
字体图形化的决定性因素就是笔画,不同字体呈现的图形间接决定字体给用户传达的含义。
中国书法用笔法则又称为“永字八法”,相传为隋代智永或东晋王羲之或唐代张旭所创,因其为书写楷书的基本法则,后人又有将八法引为书法的代称。
由于“永”字包含了几乎所有的笔画,所以在字体设计中通过对“永”字的研究了解文字构成,从而设计出结构饱满,笔画美好的字体。
小心机 1.笔画粗细变化
传统概念中,女生小鸟依人,男生魁梧健壮,在字体的运用中也是这个概念。
如果实在想象不出来,可以试着将笔画粗细变化的概念和字体留白放一起理解,笔画越细,留白空间就会越大,字体就会越轻盈。反之,笔画越粗,字体越厚重,分量感越强。
《上海滩》—字体帮
小心机 2.笔画曲直变化
说到笔画曲直不免让我想到《甄嬛传》中甄嬛选手跳惊鸿舞时间翩若惊鸿宛若游龙的形态以及雪融融代言人安陵容选手上演冰戏时柔弱无骨的样子。
笔画以弯曲为主的字体会营造温柔,可爱的意境,多用于儿童或女性品牌。反之,笔画形成的转角过多,会产生速度感和力量感。
《梦醒时分》—字体帮
2. 设计流程 在工作流程中我们会经历以下五个步骤:
需求评审
首先,第一步字体设计分析尤为重要,如果给到的文案小而精炼,那么设计空间会非常的大,如果给到长且语序混乱的文案,则我们的发挥空间将会非常的小。我们需要做的就是:“怼回去,重想文案!”在工作对接中尽量将文案把控在 8 个字之内。
前期脑暴,进行需求归纳
氛围考究,避免答不对题。明确需求并进行脑暴分析关键词,关键词贵精不贵多,之后对关键词进行权重区分并排序,将关键词与和需求文案性格相匹配做出基础的判断,确定需要传达给用户什么样的字体气质和性格,是比较偏向复古感,还是偏向少儿感,还是一个比较阳刚的场景等等。
通过字体性格绘制骨骼草图
当我们确定了整体氛围和字体性格后,将性格细分到字体三要素结构,笔画和细节上,这时就完全确定需求方想要字体的样子,是高?是瘦?是矮?是胖?接下来一定要牢记,开始疯狂找参考,参考网站这里就不一一列举了。世上网站千千万,还怕找不到你要的那个么?
找不到?就是你太懒!
找到合适的一些参考后,对字体的粗细结构,笔画变形和排组合列进行不断探索,可以选择在电脑上绘制草图,方便下一步的设计制作。这时的草图并不需要任何细节,想到就画出来。
左佐工作室
设计实现
针对骨骼草图勾勒出草稿形体,一边进行勾勒一边对笔画的节奏,字体大小以及留白进一步微调。
字效添加
最后就是勾勒好的字体添加一些列效果之后与画面结合在一起,在这里做的效果的前提是清楚整个画面场景氛围。根据场景添加适当的效果,不要画蛇添足。
3. 设计细节解析 视觉偏差
视觉心理是一门奇妙的语言,在文字中不论整体结构也好还是笔画形态也罢,都会因为字体灰度产生字体组合不平衡的状态,灰度指的是在一个字体中笔画和留白空间的分布比例,设计字体杜绝一个字笔画特别密特别黑或者笔画很细过于白。因此字体设计最后总是需要整体观察,细节调整。
笔画粗细导致视觉偏差
中国汉字中,笔画多的字体和笔画少的字体相比起来, 为了让字体的灰度统一,笔画多的字体明显会相对细一些。
横细竖粗: 相同的两条线段,其中垂直的竖线在视觉上会更长一些,一般可缩短垂直线条或者加粗垂直线条,都可以在视觉上看起来两条线条一样长。
左长右短: 相同的两条线段,进行横向排列时,由于人眼习惯性从左向读取内容,会导致左边线段会比右边线段视觉上略长一些,一般可将中间的间隙向左边少做移动。
主粗副细: 复杂笔画的文字中,若所有笔画都是一样粗,整体则没有留白空间,视觉上会觉得文字很憋闷,甚至在自身框笔画重合在一起时,出现识别性低的问题。一般我们需要明确笔画的主次后将主笔变粗,附笔缩窄。
外粗内细: 当遇到全包围的字体,由于内部结构被全部包裹,在视觉上形成一个封闭结构,导致中宫紧缩,这时需要将内部笔画变细,凸显外框,有效的调整视觉平衡。
疏粗密细: 总结以上所有情况包括笔画交叉等结构,都需要将密集处做变细处理,稀疏处进行适当加粗从视觉上解决字体疏密不均的问题。
横竖线条: 在我们的尝试中认为横线条服装显胖,竖线条服装显瘦,但字体中正好相反。
复古与现代字体
通常在笔画上加入细节,笔画细节少,结构越简单,设计出的字体一般更年轻,具有现代感,反之,笔画细节越多结构越复杂就更有年代感和复古感,如果觉得无法想象出具体画面,没关系!我们试想一下宋体字(有衬线字体)和黑体字(无衬线字体)对比,宋体则让我想到老上海日历牌的设计,而黑体字最让我印象深刻的就是苹果官网设计。
通用字形
由于通用字体看起来比标准字更舒展更大气所以最近几年市面上设计师使用通用字形频次越来越频繁,使用的品牌也越来越多,我们可以来浅探一下其背后玄机。
迟同斌老师提出的通用字体其实是将字体中宫放大将笔画外围空间压缩。
字面不同导致视觉偏差
汉字笔画五花八门,字形也千奇百怪,导致相同大小字体字面大小不一,导致我们看到的字体又大又小,因此需要对字面覆盖字面框的比例做出调整。
设计注意点
笔画粗细导致视觉偏差
多个字体组成的标题中,前后一定要有呼应,一定要使用一种设计方式以及展现形式要统一,让字体组合呈现一个整体,而不能每个字有每个字的个性。
在谈到统一时,有些同学会抢答说:将所有笔画粗细变为一致的,虽然这也是一种方法,但这种方法只适合于字体组合中文字笔画都很少的情况下。如果遇到笔画较多的情况,就会在统一字面框内出现笔画粘连,内容黑色区域过多导致单个字体视觉过大。
小技巧 1:笔画装饰
可将笔画两端或局部增添细节,这样整个字体会看起来更加饱满,末端或局部的小修饰,使字体氛围更加有内涵和内容。
《英雄》-刘兵克
小技巧 2:图形装饰
利用常见的几何图形“圆点,等距矩形,等边三角,波纹等”对文字做出装饰,这种方法是最快提示效果的方法,并且可以让字体视觉上前后呼应,具有统一性。
《氧气》-字体帮
小技巧 3:笔画替换
将字体中某个笔画用一个固定的形式置换,“例如将文字中所有的点都用三角形替换掉”,不但可以创造新的字形,而且可以将字体统一化处理。
《告白星球》-字体帮
字体设计指导方针 我国国民审美的不断提升以及保证用户获取信息时的清晰度和舒适度,我们要摒弃以前做字的一些习惯,去除冗余的装饰部分,减少字体变化,做到看似没有设计但又感觉很舒服的设计,要让我们做的字成为画面的点睛之笔,促使用户驻足而不是成为画面累赘降低产品品质感。
字体设计上到线下大型活动,下到字体 icon,标题字体往往最容易让用户记住,而合适的字体形式表达更容易传达内容的情绪,吸引观者共鸣。让人感觉这种字本就该出现在这个画面中,看着感觉舒服,而不是觉得–“怪怪的”。但遇到工期短,项目大的时候,我们如何用最快的时间设计出跳脱的字体。我们由简到难依次递进。
1. 字体设计秘籍 一款字库的价格大家是否有了解过,每一款价格上基本上都保持在一万左右每年,以下是方正和汉仪字库的授权价格。
对于很多公司来说,他们认为没有必要每年花费上万的价格去购买字体,但由于侵权赔付的天价,基本上都再三叮嘱设计师用字时一定要注意。往往工作会遇到很多工期短,任务重的内容,这时我们只要打开神奇的字库用正确的思路方法就可以免费使用正版字库,并且不需要担心字体侵权等问题。
2. 文字整体调整 将字体比作一个人,首先对骨骼内在进行调整然后对外在形象进行大肆修整,让人看不出原来的样子。
接下来是给这个字添加各种装饰品,以及面部修正,让其具有统一性和独特性。
字体细节变化
笔画设计
在笔画上的设计中,不论是省笔还是添笔或者是断笔还是连笔都要保证在不破坏字体识别性的前提下进行。杜绝出现为了设计而设计,要做到言之有理。
省笔: 在不影响字体识别的前提下,省略掉其中的一些笔画,可在视觉上产生新的留白空间。
添笔: 可以简单理解为某个笔画或某个部首的大胆添加,很常见的一种添笔则是在不同黑体的“口”字处理上,不仅体现了不同字体的特征,也增加了字体的个性与统一性。
断笔: 以字面的理解为笔画结构的断开,可以使笔画较少的文字视觉上变得丰富。一般在转折或者笔画交接处产生断开,虽然断裂,但是视觉填补会使字体产生新的节奏感,随之而来的是留白空间和灰色面积变大,字体会有呼吸感。
连笔: 不仅仅局限于笔画间的连笔,还包括字与字之间的连接。
连笔在字体设计中最为常见,因为连笔即能出效果,在执行层面来说难度相对来说比较低。
《绅士》《孤勇者》-字体帮
字内字外顺势相连:在字体组合可通过这种方式连为一体,在单个字体中,也可将笔画与周围笔画相连, 同时一定会伴随着笔画的断笔与方向或长短的调整,使字体看起来更来连贯,字形更加简约。间接组成一个整体独领风骚,而不是每个字体之间的争奇斗艳。致使视觉冲击力大大提升。
字外错位相连:将原本笔画断开后与相邻字的笔画相连接。
添加笔画相连:将需要处理的笔画做出结构性的改变,不仅不会更复杂而且会是字体从视觉上看更加饱满。
调整字体排版进行连接:通过调整字体位置,促使笔画处在同一水平高度后延长某些笔画进而连接,不仅使字体增加层次感,而且使字体性格更加突出。
图形替换: 通常是将字体中某个笔画或者是偏旁部首进行图形置换,这里一般使用与场景或词义相关联的图形。不但可以创造新的字形,而且可以更加生动地传达场景含义。
笔画修饰-添砖加瓦: 可将笔画两端或局部增添细节,这样整个字体会看起来更加饱满,最简单的事例就是中文字体中的黑体与宋体的对比,宋体相对比黑体,它的末端都会出现一些小修饰,使字体氛围更加有内涵和内容。
字体来源《字体帮》
字谷填充: 很多字中的某些结构处于完全封闭的状态,这时可忽略内部笔画,直接将封闭结构用颜色进行填充,切记不要使用深色的颜色进行填充,会使得整个画面显得异常的压抑。
字体来源《字体帮》
描边反白
在设计中描边是经常会用到的功能,它具有很轻的隔离属性,在字体设计中不仅可以通过添加效果完成描边。还可以使用投影形式进行描边,做出伪立体的感觉。
说到投影,我们可以将字体的描边不再拘泥于字体边框的描边,而将它变为自定义图形压在字体下方后会出现类似于泛白的效果,使文字更加突出,营造的氛围更随性,不受限制。
外形处理
字体来源《字体帮》
平面透视: 设置一个透视消失的方向,将字体的笔画做成三角形一边宽一边窄的效果,所有的走势都会聚合在一个消失点上,这种设计手法通常用于速度,洒脱,欢乐的氛围场景中。
除了将笔画进行透视处理外,还可以对某个文字或者文字组合的整体进行透视处理。适当的将设计的透视效果做的夸张一些,这样可以营造出一种冲击感。
借用繁体: 在进行字体设计的时候,会遇到组合中有一个或几个字形和笔画相对于简单的文字,无论用任何方式都不能将字体变得更挺阔,此时我们可以将简单字体换为其繁体版本,意味着还存在更多的笔画设计方式可以探索,这样不仅解决了以上问题而且还使字体笔画变得丰富。繁体一出,整体感觉立马回归上世纪充满复古感和历史感。一般追求中国风或者老字号的品牌常用。
笔画翻转: 在设计字体时,打破定向思维,将文字中某些短小的笔画进行反转,虽然这样的设计手法不会给画面带来太多的新意,但是小小的变化,大大的成长,有时甚至可以将其视为神来之笔,会让字体与众不同。
错位+重组
错位
一般我们将做好的字形做最后的处理升华时会利用错位来实现,可以使用整体的倾斜,旋转,拉伸以及变形,也可以将组合中某一部分进行错位偏移,延长,放大缩小,或者局部消失等操作。
错位的方法在破形同时还保持了字体组合的整体性,让字体组合不再呆板,增添一丝小想法,让字体设计添了几分趣味性。
重组
我们把字体组合当作搭积木,打破固有思维,见缝插针将文案外形排成一个有棱有角的矩形,这样中规中矩的设计形式永远不会失误,并且整体处于一个非常平衡的状态。
一般我们除了利用组合形式外还会与错位搭配来使用,错位可以很好的冲击掉组合的呆板添加一份趣味。这时错位带来的留白空间过大时,可利用小的英文字母或者拼音进行补位,切记一定要小一些,要做到既抢不了主题文字 C 位,还起到了装饰的作用。
周边装饰
图形压低
将已设计好的字体直接压在几何形体上,这样可以使字体更具有统一性和整体性,由于几何图形的压底,间接将字体组合的整体的字面扩大,在画面中能更快的吸引用户的注意。
《劲舞团》《战意》《寻仙》字体帮
图形装饰
利用常见的几何图形“圆点,等距矩形,等边三角,波纹等”对文字做出装饰,这种方法是最快且最出效果的方法,但是使用不当或过多的装饰就会让用户感觉设计比较 old school。
《过火》《再回首》字体帮
字母装饰
字母装饰一般使用英文或者拼音,在整体设计中字符不会太大,不能抢了主题文字的戏。常常被用在文字错位时出现的留白区域内。不是我说,小字母一加,那逼格蹭蹭拉满!
《发财》字体帮
图案装饰
顾名思义,是将文字具象化为小图案后加入设计中作为装饰点缀。
《让子弹飞》字体帮
全局装饰
是将字母,写意,图案装饰三位一体,做到整体化,统一化,全局装饰需要更强的逻辑思维以及创新能力,会营造出强冲击力,经常出现在拉新促活的运营页面中。
《街头篮球》字体帮
借人之手,修饰己身
在多个文字组合中,由于每个字的笔画形态都不一样,设计出来难免会出现交叉或其他状况,这是需要在字与字的交叉处进行笔画走势廓形的反白处理,使这个交界处形成端非断的状态。通常这种修饰不会过分影响字体的整体性,反而会视觉补充会让让整个字体更加统一。
《纸短情长》《忽然之间》字体帮
外形变化
现在我国的设计逐渐偏向简单,内敛,大方的方向,外形变化效果也逐渐减弱,最近发现在东南亚运营活动中频频出现。
笔画变化
描边: 普通的描边的效果过于粗糙,平时工作中给描边加一个渐变,让整体看起来层次感更加丰富。
节外生枝: 可理解为将某一个笔画进行延长后,适当的根据氛围,语义,文字性格将延长部分做弯曲变形,节外生枝的设计手法会将整个字面有一个扩大效果,更偏向于女性,自由等语境进行使用。
《不染》字体帮
颜色叠加
笔画换色: 将字体其中的某些笔画颜色改变,这个方法与笔画反转影响类似,打破定向思维,虽然变化很小,但是让文字有了亮点,让字体视觉上变得与众不同。
渐变叠加: 这是经常在字体设计中使用的技法之一,在笔画间或者笔画内加入渐变,让笔画之间产生叠压感,整体变得更有层次。
3D厚度
由于我们经常做的都是平面物料,当画面中有一个伪 3D 效果文字的出现,在画面中是非常加分的,能第一时间吸引到用户注意。
外形效果
反光
投影
2. 矩形造字 对于刚刚开始做设计的同学来说,字体设计虽然很不起眼,但是却非常给画面加分,字体设计也是促进用户进行下一步操作的关键。但字体设计看似简单,但需要漫长的学习过程,在前期不熟练的情况下,利用字库字体骨骼进行矩形造字是最容易上手的,并且做出来字体方方正正的很规矩,不会出太多的错误。
① 选择性格、语义、氛围合适的字库字体,将每个文字都单独置于矩形框内。矩形框的高低宽窄的选择也同样依据需求性格、语义、氛围制定。
② 将每个文字拉满整个矩形框后确定矩形基本笔画粗细。
③ 按照准备好的文字框,骨骼,笔画进行拼凑字体,注意字体重心位置。
④ 将拼凑好的字体进行细节修饰和基础排版。
⑤ 添加氛围颜色修饰字体。
多字移植嫁接
如果了解这些基本方式后,还是觉得很复杂,工期时间不够,这个方法一定要收好。
① 字体内容进行分析脑暴后对标题的性格有具体了解
② 依旧打开神奇的字库,找到和标题性格类似的多个字体,依次排列
③ 将多个字体的不同部分拼凑组合成新的字体
④ 加一些装饰统一字体样式。
字体骨骼填充
① 字体内容进行分析脑暴后对标题的性格有具体了解
② 打开神奇字库,找到和标题性格的两个样式完全不同的字体
③ 将字体 a 的各个笔画拆解出来填充在字体 a 的骨骼中
④ 加一些装饰统一字体样式。
3. 使用场景分析 在平时的运营工作种类繁多,遇到的活动类型也有所不同,大致将所有活动分为以下三类:
日常运营维护
这一类运营工作是为了让产品内容日常更新不断更,保证用户每天进入产品看到的是不一样的内容,这一块基本上是稳固用户。这一部分在做字体设计中,无需过多的字效,基本字库字体稍稍变形就可以完美适应。
常规节日分发
基本上是遇到一些小节日做的一些运营活动,稳固老用户的同时希望能够吸引到信用用户的参与。这时的字体设计就要在基本的字形上进行一些字效修改和装饰的添加,一年下来这一阶段的工作内容占大多数。
大型拉新促活
这一类工作主要负责“内容”与“用户”的关系以及产品的“营销”,即通过好看、有趣的活动手段,使用渠道,触达用户。既要呈现产品的“好用”,还需要产生强转化与留存。
这使得字体设计直接用于大标题使用,一定要使字体与主题有一个强绑定的关系,继续吸引用户注意。同时确保用户在首屏可以全部识别到。
4. 关于自己的思考 现在的运营设计师和之前的平面设计师的工作内容有本质上的区分,首当其冲的探索方向就是优化工作方法,在此基础上不仅需要帮助用户拥有持续不断的的良好体验,还需要让自己不断适应快速变化的流行趋势。
高质量的运营设计师工作中不仅仅是将图片做的好看这么简单,更重要的是关注用户反馈,对不同的问题采取不同的信息传达的方式,选择一款优秀且合适的字体也可以完美解决运营设计工作中的一多半问题。除此之外还需要时刻思考如何在保证作品质量的同时可以更好的提高作品点击率与转化率,什么样的方式可以更快地实现商业目标。
文献参考
1. 《文字造形》- 魏朝宏 著
2. 《中国字体设计人:一字一生》- 廖洁连 著
3. 《治字百方》- 左佐 著
4. 《设计师的自我修养》- 左佐 著
5. 《字体设计定位于通用字形》- 迟同斌(笔名:开心老头)著魏泽培,周妍姗.字体设计在平面设计中的重要性探究仍.艺术品鉴,2015(08).
6. 《竖屏思维:大幅度提升手机端转化的逻辑和方法》-陈柱子121 李远竹.字体设计在平面设计中的应用探究仍大众文艺,2012(21).3 杨额.字体设计在平面设计中的重要作用四 社科纵横(新理论版),2008(03).
7个技巧让你的字体设计拉满细节感! 前不久一个朋友把自己设计的字体发我看,说总感觉差点意思,但又不知道问题出在哪里,就觉得没有网上看到的字体那么专业,我看了一下,发现主要问题是没有细节、缺少变化,所以显得有点粗糙。
阅读文章 >
欢迎关注作者微信公众号:「YTY DESIGN」
-
如何利用「认知偏差」达成设计目标?来看大厂的实战案例!
UI交互 2022-05-17前言 在近两年的电商相关设计实践中,积累和运用了一些关于改变用户认知和引导用户行为的心理学手段,例如心理账户、损失厌恶、社会认同等等。前段时...前言 在近两年的电商相关设计实践中,积累和运用了一些关于改变用户认知和引导用户行为的心理学手段,例如心理账户、损失厌恶、社会认同等等。前段时间通过制作公司内部设计培训课程,进一步了解到这些积累的理论其实属于心理学上的认知偏差现象,甚至包括一些我们熟知的设计法则也都源于人的认知偏差,比如奥卡姆剃刀、峰终法则、序列效应等等。这些积累加深了我对认知偏差现象的研究兴趣。
本文介绍了 认知偏差 现象及其产生的原因,提出了怎样在 用户体验 的 4 个阶段(注意、决策、感受、回访)利用相应的用户认知偏差达成设计目标,进而帮助业务目标的实现。
什么是认知偏差? 直播电商兴起,越来越多的人开始在直播间购物。有过直播间购物经验的人,有没有发现自己经常会在直播间里控制不住消费欲望,买买买?会不会因为以下这些直播间的话术,剁手买了自己也没有那么需要的商品?
(1)这个商品厂商指导价¥4999,今天在我直播间,不要¥4999、不要¥3999、只要¥2999!
(2)这个商品已经卖爆了,今天直播间销量 Top1,全网已经卖出 100 万个了!
(3)这个商品商家限量发售 100 个,拼手速,54321 上链接!
直播间常见情景
这些情景下,主播就是充分利用了我们的一些认知偏差,引导我们进行消费。这些认知偏差分别是锚定效应(人们进行决策时会过度参考先前取得的资讯),从众效应(个体会受到群体的影响而改变自己的认知、决策和行为),稀缺效应(人们倾向认为稀缺的东西更宝贵)。
那简单的说,认知偏差就是指人们在思考问题或做决策时,受到了大脑加工信息模式的影响或者现有观念的影响,从而产生了一些非理性的倾向。
了解各种认知偏差现象,可以帮助我们分析用户在使用我们产品时的心理活动和行为倾向。这不仅可以帮助业务目标的达成(例如刚才提及的直播间的案例,主播充分利用观众的认知偏差,提高销量),更重要的是,认知偏差现象同样影响着用户在使用产品时的注意与行为,所以合理利用用户的认知偏差进行界面设计也可以帮助用户更快地注意到他们所需的信息,更快地完成他们在产品上想要完成的任务,从而提升产品的用户体验。
我们为什么会出现认知偏差? 曾任职于 Slack、Twitter、Amazon 的产品经理 Buster Benson 对维基百科中的 188 条认知偏差进行了梳理,按照认知偏差产生的原因分成了四大类:
四类认知偏差
图片来源:betterhumans.pub,by John Manoogian
1. 信息过载,大脑只能选择性地接受信息
例如曝光效应(指人们会偏好自己熟悉的事物),就是由于我们每天会接触海量的信息,我们的大脑会选择性地接受那些已经熟悉或者被反复提起过的信息。
2. 记忆力有限,仅会记住部分信息
例如我们都比较熟悉的峰终法则,就是由于大脑只会对整个事件中相较重要的信息印象深刻(体验的高峰处和结尾处),之后也会通过这些关键信息看待整个事件。
峰终定律,揭露用户宁愿长痛不愿短痛的秘密 用户体验的本质其实是心理学在科技产品的运用,需要的是让技术顺应人性。
阅读文章 >
3. 信息意义不明确,大脑自动补充缺失的部分
例如赌徒谬误(指认为一个随机事件的已发生概率和未发生概率之间有关联。例如投硬币,如果前面好多次都是正面朝上,那么人们会不理智地认为下一次大概率是反面朝上,但其实概率依旧是 50%),就是由于我们习惯凭借过往的记忆去看待眼前的不确定事物,脑补了与真实情况有偏差的信息。
4. 需要迅速反应与行动
例如模糊偏误效应(指人们倾向避免未知,决策时避开资讯不足的选项),就是由于人类在不断进化中为了避免错失机遇等形成了想要快速做出反应的习惯,所以在决定时,会更倾向简单和确定的选项,而非复杂和模糊的选项。
如何利用认知偏差达成设计目标? 将用户在使用产品的先后体验分成四个阶段:注意到界面上的信息、在界面上做出决定与行动、用完之后的整体感受、再次使用产品。可以分别在这四个阶段中考虑应用适合的用户认知偏差理论帮助设计目标的达成:
体验四阶段中适合使用的认知偏差理论
1. 注意(用户注意到所提供的信息)
用户在使用 app 时,每一张界面都充斥着大量的信息,用户一般不太会去看完全部的信息,所以让用户更容易注意到界面上的重要信息对体验来说至关重要。这里总结了 5 种设计上常用来吸引用户注意的认知偏差理论:非注意盲视、曝光效应、面部识别效应、图片优势效应、雷斯多夫效应。
下面我拿非注意盲视举例,详细介绍下具体如何应用以让用户更容易注意到界面上的重要信息。非注意盲视是指:当用户正在处理一个任务时,一般仅会关注当前任务或周边的视觉区间,经常注意不到其他区间出现的醒目或非醒目信息的现象。
在 vivo 官网 app 的搜索首页设计中,我们首先提取了旧版搜索结果页的数据来源,发现使用历史搜索词搜索的占比要比使用热词搜索的高出 5 倍多,说明用户在搜索首页对搜索历史的使用需求更为强烈。但在旧版搜索首页的布局上,搜索历史词模块位于页面的中下部分。用户的视觉焦点从 app 首页点击搜索框进入到搜索首页,焦点由于延续性大概率还停留在顶部。因此,旧版的搜索历史模块所处的位置其实很容易被用户忽视。
在新版本搜索首页的设计上,依据非注意盲视理论,将搜索历史词调整到了离当前搜索任务关注区域更近的搜索框下方,最终搜索历史模块的整体点击率提升了近 10%,整体搜索页的转化也有了明显的提升。所以,非注意盲视这一用户认知偏差在设计上的启发是:要将重要的功能放在用户执行当前任务时视线最可能经过的地方,这样就增加了这些功能被注意到的可能性。
vivo官网搜索首页优化
雷斯多夫效应同样也是在设计上已被广泛应用的认知偏差理论。它是指相比常规的事物,特别的事物更容易被注意与记住的现象。在设计上,设计师经常使用对比的方法让某个重要的元素从一组元素中脱颖而出。例如在底部导航栏或金刚位中的重点宣传选项上使用图片素材,区别于其它常规 icon 样式,使其凸显出来。
此外,设计师也会利用与过去用户经验的对比,来突出强调现在的状态。例如电商首页经常在大促活动时,重新设计首页的视觉元素,让首页与以往不同,吸引用户注意,也强化用户对大促活动的认知与记忆。
vivo官网首页日常样式与大促样式
2. 决策(屏幕上做出的决定与行为)
我们在屏幕上的决定与行为远没有自己想的那么理性和客观,会受到屏幕中潜在的因素改变自己真实的意愿。这里总结了 12 种认知偏差,可在设计上用来影响用户决策,分别是:心理账户、框架效应、禀赋效应、权威偏见、从众效应、登门槛效应、锚定效应、诱饵效应、稀缺效应、群内偏差、模糊偏误效应、奥卡姆剃刀。
设计师如何善用「心理账户」,提升用户付费率? 为什么给自己买个上万的包包会心疼,但如果是老公送的生日礼物就会很开心?
阅读文章 >
如何提高产品留存率?试试这个超好用的禀赋效应! 根据禀赋效应,当用户觉得某样东西属于自己时,他们愿意花更多的钱继续使用它。
阅读文章 >
那些很熟悉但又叫不出名字的设计法则:诱饵效应 入伏以来,开启了「高火」模式,奶茶成为了二手每日降温必备,买奶茶的时候,大家会不会在中杯和大杯中艰难抉择呢?
阅读文章 >
让设计更有说服力的20条经典原则:奥卡姆剃刀 编者按:我们都知道在设计中简化不必要的元素和操作会提升产品的效率,那么这是什么原理呢?
阅读文章 >
拿登门槛效应举例,登门槛效应是指:通过先提出一个容易让用户接受的小要求,凭借用户认知与行为上的一致性,从而说服用户去完成一个难度较大的要求。登门槛效应可用来说服用户本无强烈意愿去做的事情:例如 vivo 直播间中,为了让更多的用户进行付费打赏,在直播间底部功能区放置了一个免费礼物,培养用户的打赏习惯。当免费礼物打赏完后,入口变为首充有礼,引导用户进行充值。充值后,入口又会变为快捷送礼的入口,引导用户付费打赏。这样逐级引导,最终让用户完成付费打赏。另外,登门槛效应也可用来说服用户完成因难度过大而要放弃的事情:例如目前很多小视频软件中的极速拍和剪同款功能,极大程度地降低了拍摄一条小视频的难度。让用户先拍起来后,再引导用户去拍摄和制作视频、音频上要求更高的内容。
vivo直播间付费打赏引导
vivo短视频极速拍与剪同款功能
另一个要介绍的效应常常被用于商家定价上,即诱饵效应。诱饵效应是指人们对两个不相上下的选项进行选择时,因为第三个新选项(诱饵)的加入,会使某个旧选项显得更有吸引力。
例如,在逛购物网站时,经常遇到这样的场景:小号商品 20 元,大号商品 30 元,一些人可能觉得买个小号的就可以,差不多够用了,一些人可能觉得大号性价比更高。当商家想要提升大号商品销量时,就可能会利用中号商品的定价来诱导用户决策,当用户看到中号商品 28 元时,就可能会认为大号商品更加划算了。
商品定价中的诱饵效应
3. 感受(操作完成后对产品形成主观感受)
让用户在使用产品之后形成好的感受,可以有效提升产品的满意度、留存率等指标。这里总结了 7 种用户认知偏差,可在设计上用来帮助产品给用户带来好的感受,分别是:峰终法则、光环效应、序列效应、谷歌效应、真相错觉效应、消极偏见、遗漏变量偏差。
拿峰终法则举例,峰终法则是指:如果用户在一段体验的高峰处和结尾处是愉悦的,那么用户对这段体验的整体感受就是愉悦的。用峰终法则提升用户在整个产品上或某个功能上的体验,需要先对用户在整个产品上或某个功能上的使用行为与想法进行分析,并绘制出用户的情绪曲线,根据情绪的峰值节点和使用流程的结尾,这两个“关键时刻”,进行体验上的重点打造。例如在 vivo 海外浏览器的下载优化专项上,设计师通过分析体验地图,在开始下载时、完成下载时两个关键时刻通过针对性的设计优化点来拉高用户的情绪峰值。
vivo海外浏览器下载流程用户情绪曲线
此外,得物 App 在用户购买成功后,将已购商品以一种具有仪式感的收藏卡形式展示给用户,给用户惊喜的体验;vivo 积分抽奖对未抽中的情况,设计了多套情感化插图和安抚文案,减少挫败感,增加趣味性,从而提升整体抽奖的体验。
得物App购买成功后商品卡片动效
vivo积分抽奖-未抽中反馈
4. 回访(用户再次使用该产品)
提到让用户能够再次使用产品,养成使用产品的习惯,很多设计师可能会想到用上瘾模型制定设计策略。除此之外,也可以考虑利用用户的认知偏差进行设计。
这里总结了 4 种用户认知偏差,可在设计上促进用户再次使用,分别是:蔡格尼克效应 、宜家效应、沉没成本、鸟笼效应。
拿蔡格尼克效应举例,蔡格尼克效应是指:人们会对没有完成的事情念念不忘。意味着我们在设计上除了显示出用户已完成的任务来凸显用户的成就感外,也应该重点考虑如何呈现未完成的任务,进一步吸引用户的回访。
例如,vivo 积分签到改版后,用灰色星球的视觉样式进一步加强了未签到打卡的状态,吸引用户持续来点亮(签到)。此外,很多直播 app 也会将用户在直播间的活跃情况和送礼情况做成展示墙,展示用户还未达成的成就与还未送给过主播的礼物,促进用户在直播间持续的活跃和送出更多的礼物。
vivo积分签到(左)、vivo直播礼物墙成就墙(中/右)
总结 本文介绍了心理学上的一个重要模块-认知偏差;以及介绍了 4 种认知偏差产生的原因:信息过载、记忆力有限、意义不明确加工错误、需要迅速反应;提出了如何运用相应的认知偏差在用户体验的四个阶段中(注意、决策、感受、回访)达成设计目标。
高手是如何利用认知偏差,打造独特用户体验的? 为什么大爷大妈们总对排队情有独钟,为什么平常不想要的东西一打折就买一堆......震惊!
阅读文章 >
设计师在实际设计中,要注意平衡业务目标与用户体验。多以用户体验为出发点利用认知偏差,避免滥用认知偏差套路用户以达成业务目标。认知偏差理论非常多,本文仅总结了一些设计师可能会用到的认知偏差理论。文中很多认知偏差虽然提到但并没有展开介绍,下面附上了对应概念,感兴趣的设计师可思考如何在设计中使用。
附录-设计上常用的认知偏差理论汇总 注意:
1. 非注意盲视:当人们正在处理一个任务时,一般仅会关注当前任务或周边的视觉区间,经常注意不到其他区间出现的醒目或非醒目信息的现象。
2. 曝光效应:人们会偏好自己熟悉的事物。
3. 面部辨识效应:含人脸或者类似人脸的图像会就更容易吸引人们的视线。
4. 图片优势效应:是指图片和图像比词语更容易被注意与记住的现象。
5. 雷斯多夫效应:相比常规的事物,特别的事物更容易被注意与记住的现象。
决策:
1. 心理账户:人们会把不同性质的钱存放在不同的心理账户里面管理,不同心理账户有不同的记账方式和运算规则。
设计师如何善用「心理账户」,提升用户付费率? 为什么给自己买个上万的包包会心疼,但如果是老公送的生日礼物就会很开心?
阅读文章 >
2. 框架效应:人们会因不同的描述对一个客观上相同问题做出不同的决策判断。
3. 禀赋效应:人们对于自己所拥有的东西往往会看得更加贵重。
如何提高产品留存率?试试这个超好用的禀赋效应! 根据禀赋效应,当用户觉得某样东西属于自己时,他们愿意花更多的钱继续使用它。
阅读文章 >
4. 权威偏见:人们会认为权威人士给出的建议准确性更高,并且更容易受到该建议的影响。
5. 从众效应:个体会受到群体的影响而改变自己的认知、决策和行为。
6. 登门槛效应:人们一旦接受了他人的一个微不足道的要求,为了避免认知上的不协调,或想给他人以前后一致的印象,就有可能接受更大的要求。
7. 锚定效应:人们对某人某事做出判断的时候,容易受到第一印象或者第一接收到的信息所影响和支配。
8. 诱饵效应:人们对两个不相上下的选项进行选择时,因为第三个新选项(诱饵)的加入,会使某个旧选项显得更有吸引力。
9. 稀缺效应:人们倾向认为稀缺的东西更宝贵。
10. 群内偏差:人们会更倾向于自己所属的群体的意见。
11. 模糊偏误效应:人们倾向避免未知,决策时避开资讯不足的选项。
12. 奥卡姆剃刀:如无必要,勿增实体,简单有效,人们更倾向简洁的事物。
让设计更有说服力的20条经典原则:奥卡姆剃刀 编者按:我们都知道在设计中简化不必要的元素和操作会提升产品的效率,那么这是什么原理呢?
阅读文章 >
感受:
1. 峰终法则:如果人们在一段体验的高峰处和结尾处是愉悦的,那么人们对这段体验的整体感受就是愉悦的。
2. 光环效应:指对某人的某个显著的局部特征的看法被盲目扩大化,变成对此人整体的看法。
3. 序列效应:在列举项目时,排在最前面与最后面的元素,要比排在中间的更容易让人记住。
4. 谷歌效应:人们比较容易忘记在网上很容易找到的信息。
5. 真相错觉效应:重复的事情越多,人们就越相信。
6. 消极偏见:相比较积极和中性的因素,负面因素对人们的心理影响更大。
7. 遗漏变量偏差:当获得的奖励出乎意料之外,人们获得奖励的喜悦感就会增加。
回访:
1. 蔡格尼克效应 :人们会对没有完成的事情念念不忘。
让设计更有说服力的20条经典原则:冯·雷斯托夫效应、蔡格尼克记忆效应 编者按:文章将设计理论运用到实际案例中进行分析,更有助于理解。
阅读文章 >
2. 宜家效应:人们倾向于高度评价他们参与创造的产品,对于一个物品付出的劳动越多,越容易高估该物品的价值。
3. 沉没成本:人们在某件事上投入越多就越难放弃它。
4. 鸟笼效应:人们会在偶然获得一件物品后,会继续添加更多与之相关的东西。
参考文章
Buster Benson. 2016 . Cognitive bias cheat sheet
这7种广泛存在的认知偏差,影响了我们太多的决策 现如今心理学和行为学已经是 UX 和产品设计领域当中诸多理论的来源和实践的依据,它们是 UI/UX设计师和产品设计师的必修课。
阅读文章 >
欢迎关注作者微信公众号:「VMIC UED」
-
如何利用「认知偏差」达成设计目标?来看大厂的实战案例!
UI交互 2022-05-17前言 在近两年的电商相关设计实践中,积累和运用了一些关于改变用户认知和引导用户行为的心理学手段,例如心理账户、损失厌恶、社会认同等等。前段时...前言 在近两年的电商相关设计实践中,积累和运用了一些关于改变用户认知和引导用户行为的心理学手段,例如心理账户、损失厌恶、社会认同等等。前段时间通过制作公司内部设计培训课程,进一步了解到这些积累的理论其实属于心理学上的认知偏差现象,甚至包括一些我们熟知的设计法则也都源于人的认知偏差,比如奥卡姆剃刀、峰终法则、序列效应等等。这些积累加深了我对认知偏差现象的研究兴趣。
本文介绍了 认知偏差 现象及其产生的原因,提出了怎样在 用户体验 的 4 个阶段(注意、决策、感受、回访)利用相应的用户认知偏差达成设计目标,进而帮助业务目标的实现。
什么是认知偏差? 直播电商兴起,越来越多的人开始在直播间购物。有过直播间购物经验的人,有没有发现自己经常会在直播间里控制不住消费欲望,买买买?会不会因为以下这些直播间的话术,剁手买了自己也没有那么需要的商品?
(1)这个商品厂商指导价¥4999,今天在我直播间,不要¥4999、不要¥3999、只要¥2999!
(2)这个商品已经卖爆了,今天直播间销量 Top1,全网已经卖出 100 万个了!
(3)这个商品商家限量发售 100 个,拼手速,54321 上链接!
直播间常见情景
这些情景下,主播就是充分利用了我们的一些认知偏差,引导我们进行消费。这些认知偏差分别是锚定效应(人们进行决策时会过度参考先前取得的资讯),从众效应(个体会受到群体的影响而改变自己的认知、决策和行为),稀缺效应(人们倾向认为稀缺的东西更宝贵)。
那简单的说,认知偏差就是指人们在思考问题或做决策时,受到了大脑加工信息模式的影响或者现有观念的影响,从而产生了一些非理性的倾向。
了解各种认知偏差现象,可以帮助我们分析用户在使用我们产品时的心理活动和行为倾向。这不仅可以帮助业务目标的达成(例如刚才提及的直播间的案例,主播充分利用观众的认知偏差,提高销量),更重要的是,认知偏差现象同样影响着用户在使用产品时的注意与行为,所以合理利用用户的认知偏差进行界面设计也可以帮助用户更快地注意到他们所需的信息,更快地完成他们在产品上想要完成的任务,从而提升产品的用户体验。
我们为什么会出现认知偏差? 曾任职于 Slack、Twitter、Amazon 的产品经理 Buster Benson 对维基百科中的 188 条认知偏差进行了梳理,按照认知偏差产生的原因分成了四大类:
四类认知偏差
图片来源:betterhumans.pub,by John Manoogian
1. 信息过载,大脑只能选择性地接受信息
例如曝光效应(指人们会偏好自己熟悉的事物),就是由于我们每天会接触海量的信息,我们的大脑会选择性地接受那些已经熟悉或者被反复提起过的信息。
2. 记忆力有限,仅会记住部分信息
例如我们都比较熟悉的峰终法则,就是由于大脑只会对整个事件中相较重要的信息印象深刻(体验的高峰处和结尾处),之后也会通过这些关键信息看待整个事件。
峰终定律,揭露用户宁愿长痛不愿短痛的秘密 用户体验的本质其实是心理学在科技产品的运用,需要的是让技术顺应人性。
阅读文章 >
3. 信息意义不明确,大脑自动补充缺失的部分
例如赌徒谬误(指认为一个随机事件的已发生概率和未发生概率之间有关联。例如投硬币,如果前面好多次都是正面朝上,那么人们会不理智地认为下一次大概率是反面朝上,但其实概率依旧是 50%),就是由于我们习惯凭借过往的记忆去看待眼前的不确定事物,脑补了与真实情况有偏差的信息。
4. 需要迅速反应与行动
例如模糊偏误效应(指人们倾向避免未知,决策时避开资讯不足的选项),就是由于人类在不断进化中为了避免错失机遇等形成了想要快速做出反应的习惯,所以在决定时,会更倾向简单和确定的选项,而非复杂和模糊的选项。
如何利用认知偏差达成设计目标? 将用户在使用产品的先后体验分成四个阶段:注意到界面上的信息、在界面上做出决定与行动、用完之后的整体感受、再次使用产品。可以分别在这四个阶段中考虑应用适合的用户认知偏差理论帮助设计目标的达成:
体验四阶段中适合使用的认知偏差理论
1. 注意(用户注意到所提供的信息)
用户在使用 app 时,每一张界面都充斥着大量的信息,用户一般不太会去看完全部的信息,所以让用户更容易注意到界面上的重要信息对体验来说至关重要。这里总结了 5 种设计上常用来吸引用户注意的认知偏差理论:非注意盲视、曝光效应、面部识别效应、图片优势效应、雷斯多夫效应。
下面我拿非注意盲视举例,详细介绍下具体如何应用以让用户更容易注意到界面上的重要信息。非注意盲视是指:当用户正在处理一个任务时,一般仅会关注当前任务或周边的视觉区间,经常注意不到其他区间出现的醒目或非醒目信息的现象。
在 vivo 官网 app 的搜索首页设计中,我们首先提取了旧版搜索结果页的数据来源,发现使用历史搜索词搜索的占比要比使用热词搜索的高出 5 倍多,说明用户在搜索首页对搜索历史的使用需求更为强烈。但在旧版搜索首页的布局上,搜索历史词模块位于页面的中下部分。用户的视觉焦点从 app 首页点击搜索框进入到搜索首页,焦点由于延续性大概率还停留在顶部。因此,旧版的搜索历史模块所处的位置其实很容易被用户忽视。
在新版本搜索首页的设计上,依据非注意盲视理论,将搜索历史词调整到了离当前搜索任务关注区域更近的搜索框下方,最终搜索历史模块的整体点击率提升了近 10%,整体搜索页的转化也有了明显的提升。所以,非注意盲视这一用户认知偏差在设计上的启发是:要将重要的功能放在用户执行当前任务时视线最可能经过的地方,这样就增加了这些功能被注意到的可能性。
vivo官网搜索首页优化
雷斯多夫效应同样也是在设计上已被广泛应用的认知偏差理论。它是指相比常规的事物,特别的事物更容易被注意与记住的现象。在设计上,设计师经常使用对比的方法让某个重要的元素从一组元素中脱颖而出。例如在底部导航栏或金刚位中的重点宣传选项上使用图片素材,区别于其它常规 icon 样式,使其凸显出来。
此外,设计师也会利用与过去用户经验的对比,来突出强调现在的状态。例如电商首页经常在大促活动时,重新设计首页的视觉元素,让首页与以往不同,吸引用户注意,也强化用户对大促活动的认知与记忆。
vivo官网首页日常样式与大促样式
2. 决策(屏幕上做出的决定与行为)
我们在屏幕上的决定与行为远没有自己想的那么理性和客观,会受到屏幕中潜在的因素改变自己真实的意愿。这里总结了 12 种认知偏差,可在设计上用来影响用户决策,分别是:心理账户、框架效应、禀赋效应、权威偏见、从众效应、登门槛效应、锚定效应、诱饵效应、稀缺效应、群内偏差、模糊偏误效应、奥卡姆剃刀。
设计师如何善用「心理账户」,提升用户付费率? 为什么给自己买个上万的包包会心疼,但如果是老公送的生日礼物就会很开心?
阅读文章 >
如何提高产品留存率?试试这个超好用的禀赋效应! 根据禀赋效应,当用户觉得某样东西属于自己时,他们愿意花更多的钱继续使用它。
阅读文章 >
那些很熟悉但又叫不出名字的设计法则:诱饵效应 入伏以来,开启了「高火」模式,奶茶成为了二手每日降温必备,买奶茶的时候,大家会不会在中杯和大杯中艰难抉择呢?
阅读文章 >
让设计更有说服力的20条经典原则:奥卡姆剃刀 编者按:我们都知道在设计中简化不必要的元素和操作会提升产品的效率,那么这是什么原理呢?
阅读文章 >
拿登门槛效应举例,登门槛效应是指:通过先提出一个容易让用户接受的小要求,凭借用户认知与行为上的一致性,从而说服用户去完成一个难度较大的要求。登门槛效应可用来说服用户本无强烈意愿去做的事情:例如 vivo 直播间中,为了让更多的用户进行付费打赏,在直播间底部功能区放置了一个免费礼物,培养用户的打赏习惯。当免费礼物打赏完后,入口变为首充有礼,引导用户进行充值。充值后,入口又会变为快捷送礼的入口,引导用户付费打赏。这样逐级引导,最终让用户完成付费打赏。另外,登门槛效应也可用来说服用户完成因难度过大而要放弃的事情:例如目前很多小视频软件中的极速拍和剪同款功能,极大程度地降低了拍摄一条小视频的难度。让用户先拍起来后,再引导用户去拍摄和制作视频、音频上要求更高的内容。
vivo直播间付费打赏引导
vivo短视频极速拍与剪同款功能
另一个要介绍的效应常常被用于商家定价上,即诱饵效应。诱饵效应是指人们对两个不相上下的选项进行选择时,因为第三个新选项(诱饵)的加入,会使某个旧选项显得更有吸引力。
例如,在逛购物网站时,经常遇到这样的场景:小号商品 20 元,大号商品 30 元,一些人可能觉得买个小号的就可以,差不多够用了,一些人可能觉得大号性价比更高。当商家想要提升大号商品销量时,就可能会利用中号商品的定价来诱导用户决策,当用户看到中号商品 28 元时,就可能会认为大号商品更加划算了。
商品定价中的诱饵效应
3. 感受(操作完成后对产品形成主观感受)
让用户在使用产品之后形成好的感受,可以有效提升产品的满意度、留存率等指标。这里总结了 7 种用户认知偏差,可在设计上用来帮助产品给用户带来好的感受,分别是:峰终法则、光环效应、序列效应、谷歌效应、真相错觉效应、消极偏见、遗漏变量偏差。
拿峰终法则举例,峰终法则是指:如果用户在一段体验的高峰处和结尾处是愉悦的,那么用户对这段体验的整体感受就是愉悦的。用峰终法则提升用户在整个产品上或某个功能上的体验,需要先对用户在整个产品上或某个功能上的使用行为与想法进行分析,并绘制出用户的情绪曲线,根据情绪的峰值节点和使用流程的结尾,这两个“关键时刻”,进行体验上的重点打造。例如在 vivo 海外浏览器的下载优化专项上,设计师通过分析体验地图,在开始下载时、完成下载时两个关键时刻通过针对性的设计优化点来拉高用户的情绪峰值。
vivo海外浏览器下载流程用户情绪曲线
此外,得物 App 在用户购买成功后,将已购商品以一种具有仪式感的收藏卡形式展示给用户,给用户惊喜的体验;vivo 积分抽奖对未抽中的情况,设计了多套情感化插图和安抚文案,减少挫败感,增加趣味性,从而提升整体抽奖的体验。
得物App购买成功后商品卡片动效
vivo积分抽奖-未抽中反馈
4. 回访(用户再次使用该产品)
提到让用户能够再次使用产品,养成使用产品的习惯,很多设计师可能会想到用上瘾模型制定设计策略。除此之外,也可以考虑利用用户的认知偏差进行设计。
这里总结了 4 种用户认知偏差,可在设计上促进用户再次使用,分别是:蔡格尼克效应 、宜家效应、沉没成本、鸟笼效应。
拿蔡格尼克效应举例,蔡格尼克效应是指:人们会对没有完成的事情念念不忘。意味着我们在设计上除了显示出用户已完成的任务来凸显用户的成就感外,也应该重点考虑如何呈现未完成的任务,进一步吸引用户的回访。
例如,vivo 积分签到改版后,用灰色星球的视觉样式进一步加强了未签到打卡的状态,吸引用户持续来点亮(签到)。此外,很多直播 app 也会将用户在直播间的活跃情况和送礼情况做成展示墙,展示用户还未达成的成就与还未送给过主播的礼物,促进用户在直播间持续的活跃和送出更多的礼物。
vivo积分签到(左)、vivo直播礼物墙成就墙(中/右)
总结 本文介绍了心理学上的一个重要模块-认知偏差;以及介绍了 4 种认知偏差产生的原因:信息过载、记忆力有限、意义不明确加工错误、需要迅速反应;提出了如何运用相应的认知偏差在用户体验的四个阶段中(注意、决策、感受、回访)达成设计目标。
高手是如何利用认知偏差,打造独特用户体验的? 为什么大爷大妈们总对排队情有独钟,为什么平常不想要的东西一打折就买一堆......震惊!
阅读文章 >
设计师在实际设计中,要注意平衡业务目标与用户体验。多以用户体验为出发点利用认知偏差,避免滥用认知偏差套路用户以达成业务目标。认知偏差理论非常多,本文仅总结了一些设计师可能会用到的认知偏差理论。文中很多认知偏差虽然提到但并没有展开介绍,下面附上了对应概念,感兴趣的设计师可思考如何在设计中使用。
附录-设计上常用的认知偏差理论汇总 注意:
1. 非注意盲视:当人们正在处理一个任务时,一般仅会关注当前任务或周边的视觉区间,经常注意不到其他区间出现的醒目或非醒目信息的现象。
2. 曝光效应:人们会偏好自己熟悉的事物。
3. 面部辨识效应:含人脸或者类似人脸的图像会就更容易吸引人们的视线。
4. 图片优势效应:是指图片和图像比词语更容易被注意与记住的现象。
5. 雷斯多夫效应:相比常规的事物,特别的事物更容易被注意与记住的现象。
决策:
1. 心理账户:人们会把不同性质的钱存放在不同的心理账户里面管理,不同心理账户有不同的记账方式和运算规则。
设计师如何善用「心理账户」,提升用户付费率? 为什么给自己买个上万的包包会心疼,但如果是老公送的生日礼物就会很开心?
阅读文章 >
2. 框架效应:人们会因不同的描述对一个客观上相同问题做出不同的决策判断。
3. 禀赋效应:人们对于自己所拥有的东西往往会看得更加贵重。
如何提高产品留存率?试试这个超好用的禀赋效应! 根据禀赋效应,当用户觉得某样东西属于自己时,他们愿意花更多的钱继续使用它。
阅读文章 >
4. 权威偏见:人们会认为权威人士给出的建议准确性更高,并且更容易受到该建议的影响。
5. 从众效应:个体会受到群体的影响而改变自己的认知、决策和行为。
6. 登门槛效应:人们一旦接受了他人的一个微不足道的要求,为了避免认知上的不协调,或想给他人以前后一致的印象,就有可能接受更大的要求。
7. 锚定效应:人们对某人某事做出判断的时候,容易受到第一印象或者第一接收到的信息所影响和支配。
8. 诱饵效应:人们对两个不相上下的选项进行选择时,因为第三个新选项(诱饵)的加入,会使某个旧选项显得更有吸引力。
9. 稀缺效应:人们倾向认为稀缺的东西更宝贵。
10. 群内偏差:人们会更倾向于自己所属的群体的意见。
11. 模糊偏误效应:人们倾向避免未知,决策时避开资讯不足的选项。
12. 奥卡姆剃刀:如无必要,勿增实体,简单有效,人们更倾向简洁的事物。
让设计更有说服力的20条经典原则:奥卡姆剃刀 编者按:我们都知道在设计中简化不必要的元素和操作会提升产品的效率,那么这是什么原理呢?
阅读文章 >
感受:
1. 峰终法则:如果人们在一段体验的高峰处和结尾处是愉悦的,那么人们对这段体验的整体感受就是愉悦的。
2. 光环效应:指对某人的某个显著的局部特征的看法被盲目扩大化,变成对此人整体的看法。
3. 序列效应:在列举项目时,排在最前面与最后面的元素,要比排在中间的更容易让人记住。
4. 谷歌效应:人们比较容易忘记在网上很容易找到的信息。
5. 真相错觉效应:重复的事情越多,人们就越相信。
6. 消极偏见:相比较积极和中性的因素,负面因素对人们的心理影响更大。
7. 遗漏变量偏差:当获得的奖励出乎意料之外,人们获得奖励的喜悦感就会增加。
回访:
1. 蔡格尼克效应 :人们会对没有完成的事情念念不忘。
让设计更有说服力的20条经典原则:冯·雷斯托夫效应、蔡格尼克记忆效应 编者按:文章将设计理论运用到实际案例中进行分析,更有助于理解。
阅读文章 >
2. 宜家效应:人们倾向于高度评价他们参与创造的产品,对于一个物品付出的劳动越多,越容易高估该物品的价值。
3. 沉没成本:人们在某件事上投入越多就越难放弃它。
4. 鸟笼效应:人们会在偶然获得一件物品后,会继续添加更多与之相关的东西。
参考文章
Buster Benson. 2016 . Cognitive bias cheat sheet
这7种广泛存在的认知偏差,影响了我们太多的决策 现如今心理学和行为学已经是 UX 和产品设计领域当中诸多理论的来源和实践的依据,它们是 UI/UX设计师和产品设计师的必修课。
阅读文章 >
欢迎关注作者微信公众号:「VMIC UED」
-
Config 2022 落幕!这15项新功能让 Figma 更简单好用了
UI交互 2022-05-17大家好,我是和你们聊设计的花生~ 2022 年 Config 已于 2022 年 5 月 10 日-11 日在旧金山举行,这场由 Figma 召开的线上...大家好,我是和你们聊设计的花生~
2022 年 Config 已于 2022 年 5 月 10 日-11 日在旧金山举行,这场由 Figma 召开的线上设计大会,邀请了来自全球 20 多个国家的 100 多位相关行业从业者发表演讲,与全球用户交流分享设计经验和最新的理念。
在 5 月 10 日的开幕式的主题演讲上,Figma 首席执行官 Dylan Field 向世界展示了 Figma 的 15 项新功能,及这些功能如何更好的帮助人们使用 figma 进行创作工作,一起来看看吧~
FigJam 小工具 FigJam 是 Figma 在 2021 发布的全新可协作白板,适合记录个人想法创意及团队间的头脑风暴。2022 年,Figma 在 FigJam 中置入更多实用小工具,为团队协作沟通提供了更加多样好玩的方式。
1. Jira、Asana和Github小工具
这些小工具本质上如同 Figma 中的插件,能让想法进一步变为可执行的计划,帮助团队更好地推进工作。
Asana 和 Jira 都是团队项目管理软件,在 FigJam 中完成的讨论后,可以用 Jira 或 Asana 小工具直接将想法标注为不同的任务并设立优先级,还能将任务同步到原项目管理软件中。使用 Github 小工具,用户可以直接在 FigJam 界面中创建新的议题或者将 Github 中的议题导入 FigJam,方便团队成员围绕其进行讨论。
2. 贺卡小工具与语音备忘录
FigJam 里还新增的贺卡小工具和语音部备忘录。团队的成员都可以自定义贺卡样式,发送给其他成员或庆祝团队成就。语音备忘录工具则可以快速记录留言,为团队其他成员提供更加真情实感的反馈。
自动布局新功能 (Auto Layout Update) 自动布局功能可以有效提供设计效率,并让设计轻松适应不同的屏幕尺寸。2022 年自动布局升级后功能更加强大方便,其中比较重要的几项分别是:
项目间距可视化并直接拖动进行调节,无需在画板与属性面板间切换调整:
文本基线自动对齐:
在自动布局框架内,通过绝对定位控件让元素实现相对于边界的精准定位,不受自动布局的影响:
支持负空间的自动布局:
可变字体 (Variable Fonts) 可变字体支持运用滑块调节字体的字重、宽度、倾斜度及光学尺寸,这不仅使字体调整更方便,字体在网页上呈现效果也更加精致,所需的加载时间也更短。设计师可以将自定义的字体变量保存到“样式”菜单中,自定义样式可以添加到库里,团队中的其他人员重复使用某一种自定义字体配置。
新的轮廓模式(Outline Mode) 轮廓模式如同一台 X 光机,可以让设计者方便快捷地检查、选择和调整所有被遮挡对象、隐藏图层和嵌套层。新的轮廓模式让被遮挡的对象也能直接被选中并进行编辑,设计者无需在图层面板中进行查找。
单独分隔线(Individual Strokes) 单独分隔线功能支持为一个矩形、框架或组件/实例的任意一边添加分隔线。其本质可以视为矢量路径,设计师可以调整其颜色、粗细和线条、端点及转角的样式。
弹跳动画(Spring Animations) 弹跳动画允许设计师为界面中的活动部件添加缓动和弹跳动作,使视觉传达更加真实生动。设计师可以通过系统预设来设置动作的速度和样式,也可以调节贝塞尔曲线和弹跳曲线来自定义动作样式。
使用贝塞尔曲线自定义动作↓
使用弹跳曲线自定义动作↓
组件属性 (Component Properties) 组件属性通过将组件与特定的设计属性关联起来,定义组件的哪些部分可以被改变。如元素是否可见、是否可以交换图标,或批量修改文本属性等。组件创建者还可以附加说明和链接到更多文档,以确保所有使用组件的人明白组其的含义并在系统设计中正确地使用它们。
组件属性让可以有效统一设计规范,减少变体组件的数量,设计师与开发者之间的协作也会更加紧密。
深色模式 (Dark Mode) 在众多用户的要求之下,Figma 终于推出了深色模式。用户可以自主选择界面是深色模式还是浅色模式,且 figma 插件也可以在更新后支持黑暗模式。深色主题设置是特定于设备的,如果用户在多台设备上使用 Figma 帐户,则一台设备上的主题设置不会转移到另一台设备上。对于同一个文件,一个用户更改主题不会影响其他人的外观设置。
聚光灯(Spotlight) Figma 上线了聚光灯(Spotlight)功能,以改进多人协作的工作方式。当多人协作团队中的一员请求聚焦自己的时候,团队的其他成员可以选择成为跟随者,这样被聚焦者在自己界面上的每一步操作,都会展示在所有跟随者的界面中。
聚光灯功能非常适合在进行团队讨论或者演示,主讲者不用再担心团队其他成员无法及时跟上自己的节奏。这项功能并非强制性的,如果用户无需跟进被聚焦者,可以选择拒绝,就能继续保持自己当前界面的视图和位置。同时,用户也可以通过单击任意团队成员的头像,了解其目前的视图。
用户主动请求成为被聚焦者↓
用户接受他人的请求成为跟随者↓
其他新功能 1. 代码生成器插件
代码生成器插件 (Widget Code Generator) 允许设计师一键将 FigJam 设计转换为代码,代码可以复制并用于创建小部件界面。
2. 密码保护
每个 FigJam 文件、Figma 设计文件和原型都有一个唯一链接,设计师可以使用这些链接将文件分享出去。如果你想让自己的文件只有指定的一些人才能访问,就可以使用密码保护功能。
当有人打开受密码保护的文件时,Figma 会检查他们是否对该文件具有查看或编辑角色。如果他们已经设置为允许访问,则不需要输入密码;对没有被赋予访问权限的人,Figma 将显示“需要密码”提示,输入正确密码之前对方无法看到文件的内容。
3. 审查设计分支状态
在 Figma 中设计师可以为一个文件创建不同版本的设计「分支」,并邀请团队中的其他成员与自己协作对分支进行修改。2022 年,Figma 为分支文件添加了审查功能,帮助创建者在合并设计分支之前请求团队成员或其他协作者进行审核。
审阅者可以查看分支中包含的所有更改,然后可以选择批准分支或提出修改建议。审查功能让设计协作流程能全部在 Figma 中完成,无需借助外部软件沟通,非常方便。
4. 收藏夹
设计师可以将重要文件和项目设为星标文件,以便从文件浏览器的左侧栏中快速访问它们。
5. 国际键盘快捷键
Figma 的键盘快捷键最初是基于 QWERTY 键盘的布局,但随着业务的不断发展,Figma 意识到其中一些快捷方式不适用于使用其他语言和布局的键盘的人。于是 Figma 向使用日语、法语和德语键盘布局的人开放了测试版本,用户可以在首选项中设置键盘布局,提高自己的工作效率。
以上就是 15 项 Figma 新功能,非常强大,也非常贴心。作为现在世界上最优秀的线上协作 UI 设计工具,Figma 在优化产品功能、提升用户使用体验上作出的巨大努力很好地体现了他们“在更强大和更简单之间取得平衡”的理念,相信 Figma 在未来也能为我们带来更多激动人心的功能。
深扒!连拜登团队都在用的Figma是如何成长起来的? 相信这几天设计圈和产品圈的同学都在讨论 Figma 封禁大疆的团队帐号这个事儿,经过多轮文章和视频的洗礼,这个事件的始末和性质相信大家已经掰开了揉碎了看明白了。
阅读文章 >
参考资料:
https://config.figma.com/events/figma-config-2022/home
https://www.figma.com/whats-new/
https://www.youtube.com/watch?v=JUTFghsG8nI
https://help.figma.com/hc/en-us/categories/360002042553-Figma-design
https://www.figma.com/@mswb