最专业的代练平台开发!

资讯热点
提高“可读性”,如何选择文字和背景颜色?

发布时间:2020-11-3 分类: 行业动态

对于QQ支付的品牌设计,他们做了不同的设计尝试。本文重点分享QQ支付品牌设计的三个步骤。享受〜

我们看到的大多数支付产品在视觉系统中选择了更稳定和低调的风格,这将对产品的可信度产生一定的影响。但是,这是否意味着支付产品只能选择这种颜色匹配方式?

QQ支付品牌设计希望探索不同的风格,针对年轻用户群体,采用鲜艳的色彩对比,希望能提升公众的认知度和认知度。

我们还对QQ支付的品牌设计进行了不同的设计尝试。

设计徽标需要考虑定位,因为徽标将始终在各种场合或角落中遵循,例如广告牌,传单,网站和各种外围产品。你会发现一个肉眼可见的标志。东西;如颜色,形状,质地,形状等,同时向人们传达无形的东西;如产品的性质,气质,哲学,视觉等。

因此,在设计Logo之前,最好考虑这三个级别:隐形定位级别,有形视觉级别和视觉扩展级别。也就是说,QQ支付品牌设计的三个步骤(如下图所示)

一,品牌研究与定位

Logo的设计需要对整个行业和市场进行研究,并探索该行业中产品品牌的固有特征和行业属性。这些研究信息可以帮助设计师在视觉设计中变得更加清晰。

1.国外支付品牌

2.颜色分析

3.图形分析

4.相关产品的收集和分析

通过对支付类别Logo的市场调研并得出相关结论,结合QQ支付目标人群和产品特征,得到以下品牌设计模型。

2.品牌标志设计

从第一步的品牌研究和定位,得出相关结论,并结合品牌设计模型,需要一个明确的价值体系和一个新的识别系统。第二步从品牌标志设计开始,徽标旨在清晰表达。在此基础上使用户易于理解或易于识别,然后以更美丽的姿势表达。

1.搜索品牌关键字

2.徽标设计草图

接下来,设计师开始绘制徽标的黑白草图。草图徽标的设计元素更加多样化,包括:卡片,金钱,平台,付款手势,付款状态和完成。

3.徽标设计方案

设计师做了以下风格:

方案1:两个连在一起的方形元素象征着不同的文化和平台。抽象的几何方形元素和QQ的轮廓更加巧妙地结合在一起,旨在传达QQ支付品牌的主要内容。

选项2:倾斜的两个方形元素重叠,以象征图像的卡片元素,重叠的几何形状匹配不同的颜色组合,丰富徽标的水平和深度,并提取QQ图形中的眼睛元素。简单。

选项3:QQ的招手剪影和支付成功图形的组合清楚地向用户传达信息:QQ支付,喜欢支付,并传达年轻,热情,付费,以人为本的视觉语言。

4.优化徽标设计

在提出各种选择之后,设计师选择并完善了一个更理想的解决方案。 QQ的草图用于方案3,识别率很高,可以大大降低宣传成本。同时,勾选图表表示付款完成的结果,代表令人满意且安全的付款信息。

然而,勾选的图形似乎已经拆分了QQ的主体,并且设计师在选项3的基础上尝试了更多,然后是优化徽标设计的步骤。

在颜色的选择中,已经对不同颜色值的蓝色和黄色进行了各种尝试。

5.最终计划

设计师决定使用QQ的轮廓,支付成功的图形,形成独特的标识,并在图形和QQ之间取得平衡,更好地传达所提供服务的重要性,以确保标识能够传达品牌的内在品质,希望能够它反映了它应该给人们带来的安全,活力和以人为本。尝试使品牌信息更加“听起来和响亮”,具有强烈的基调和可靠性。

6.色彩设计

选择鲜艳的蓝色和黄色作为新的主色可以更好地体现QQ支付的强大生命力,充满新鲜活力,并有助于提高产品延伸的可用性。

III。品牌设计规范

一个好的标识可以用于视觉扩展,这很容易应用于更广泛的场景。当人们看到这个视觉元素时,他们会在脑海中记住它,这会占用用户的思维并增加用户。品牌与品牌之间的情感粘性深深植根于人们的心中。

1.图形元素

视觉上扩展的图形元素的来源不是由薄薄的空气制造的。图形元素需要定期跟随品牌和徽标。 QQ通过简单的抽象图形支付QQ支付的品牌特征。这种视觉延伸更加流畅。 。

2.图形集成

3.辅助模式

4.设计元素

5.应用程序设计

QQ支付品牌系统设计,希望能够平衡功能和美学,尝试建立一个清晰的价值体系和新的识别系统,从三个方面建立一个值得信赖的标识:隐形定位水平,有形视觉水平和视觉延伸水平。友好的配色方案和丰富灵活的视觉延伸。

我们希望以全新的形象展示QQ支付,我们期待看到新的变化。

资料来源:腾讯ISUX

本文主要讨论如何选择文本颜色和背景颜色以提供良好的可读性。走到一起!

当我上次组织“颜色对比”文章时,我还收集了很多“文本可读性”相关资料。在这里挑选一些更实用的。

主要是探索如何选择文本颜色和背景颜色以提供良好的可读性。

请谨慎使用“暗调”模式

探索文本可读性的科学并不新鲜,许多伟大的研究成果来自20世纪80年代早期。

大多数研究表明,“浅色背景暗词”优于“暗色背景浅色词”。

鲍尔和卡沃尼乌斯在1980年发现,阅读“浅色背景上的黑暗角色”比阅读“深色背景上的浅色文字”准确率高26%。

(参考文献: Bauer,D。,& Cavonius,C.,R。(1980)。通过对比反转改善视觉显示单元的易读性。在E. Grandjean,E。Vigliani(编辑),视觉显示的人体工程学方面终端(第137-142页)。伦敦:泰勒和弗朗西斯)

散光患者(约占总人口的50%)阅读黑色白色文本,这比阅读白色黑色文本更困难。

部分原因与光线水平有关:当人眼看到明亮的背景显示时,光圈会更多地关闭,“镜头失真”会变小;当观看暗色调屏幕时,光圈会打开以接收更多光线,“镜头失真更大,会在眼睛上形成非常模糊的焦点。

(杰森哈里森–博士后研究员,影像实验室经理–不列颠哥伦比亚大学感觉知觉和互动研究小组)

这种模糊性会迫使人们不时地停下来。

即使是具有相同对比度的深色和浅色,浅色背景上的黑色文本也比在深色背景上的浅色背景上阅读要好得多。

也许你认为改变视障人士的设计是很奇怪的。但如果“视力障碍”的比例高达50%,那么这与正常的视力用户一样重要。

这两个参考文献足以表明用深色调设计是一个坏主意。

(来自:为什么浅色背景上的浅色文字是一个坏主意,作者:Tatham Oddie,2008.10.13)

不要在纯白色背景上使用纯黑色字符

在纯白色背景(FFFFFF)上使用纯黑色字(000000)是不合适的。

因为许多患有阅读障碍的患者对这种极高的对比度很敏感,所以过高的对比度会使他们看到的单词模糊不清。

(来自:伤害阅读障碍用户的6个令人惊讶的不良行为,作者:安东尼,2011.1.23)

浅灰色背景优于纯白色背景

研究人员在1997年进行了一项实验,测试三种不同背景颜色(浅灰色,深灰色和白色)的黑色文本,这些颜色具有最佳的“可读性”。 (他们认为这是最好的白背)

令人惊讶的是,他们发现灰色背景比白色背景更“准备好”。 (具有讽刺意味的是,尽管有这些发现,但Web浏览器的默认背景仍为白色。)

(来自:网页文本 - 背景颜色组合对可读性,保留,美学和行为意图的影响,来自:RICH H. HALL和PATRICK HANNA,2004.5)

自适应亮度对比度,可提高智能手机的文本可读性和视觉舒适度

前辈们还说,高对比度更有利于阅读,而高对比度增加了视觉压力。它有多好?

以下实验表明,时间维度的“可读性”是一个流氓。

当人们在智能手机显示屏上阅读时,文本和背景之间的亮度对比对视觉感知有很大影响。

《Adaptive luminance contrast for enhancing reading performance and visual comfort on smartphone displays》在文章中,通过两个实验,提出并确认了理想模型:随着时间的推移,对比度从最高值降低到一定值,这不仅增强了文本的“可读性”和视觉舒适度。同时,它可以降低智能手机的能耗。这是一种适用于智能手机等终端的显示器型号。

详细实验:

实验1:

鉴于一些研究表明:

高对比度有助于人们快速集中和阅读文本;

在显示屏上阅读,过高的对比度会导致视觉压力;

对比度的连续变化会导致视觉不适。

因此,提出了一种理想的随时间逐渐降低亮度对比度的自适应模型:在读取开始时使用高对比度以促进浓度;然后对比度随时间逐渐减小,然后保持不变。减少长时间阅读的人的视觉压力。

共设置了三组实验:

白色背景,文字颜色变化:从黑色到白色;

文本颜色始终为黑色,背景颜色从白色变为黑色;

文本从黑色逐渐变为白色,而背景颜色以相同的速度从白色变为黑色。

3组实验参数和测量结果

测试结果:

与早期的研究相反,当文本和背景之间的亮度对比度最大化时,阅读速度最快。

随着亮度对比度的降低,每组的视觉舒适度迅速下降。

相反,C组文本和背景的亮度同时变化,达到最高水平的舒适度。

通过一系列用户测试,开发出智能手机显示器亮度对比度的自适应模型:

随着时间的推移,文本和背景之间的自适应亮度对比度:逐渐减小。

因为高对比度可以帮助用户首先专注于阅读。他们还认为对比度值最初在视觉上是舒适的。

但是,如果用户持续很长时间,他们会感到视力疲劳。

因此,亮度对比度在150秒后开始变化;因为通常在这段时间之后,人们更多地关注当前的阅读内容。

最终亮度对比度确定为0.52,考虑到平均识别经验范围的变化,文本具有RGB值51和背景204.为了防止用户由于亮度变化而感觉改变,文本和背景之间的亮度对比度慢慢切换到40秒。

RGB 204的浅灰色背景颜色,RGB 51的深灰色文本颜色

实验2:

设置3组实验:

黑白色;

自适应对比度;

B70——从先前的用户测试中选择的最佳阅读性能的值。

使用脑波的脑波分析测量“可读性”,视觉舒适度和生理压力。

测试结果证实,自适应对比度模式,可读性,阅读速度和舒适性能是最佳的。

在智能手机显示屏上应用自适应亮度对比度有两个主要优点:

首先,通过在阅读性能和视觉舒适度之间保持平衡,用户可以在舒适,可读的状态下长时间阅读内容。

其次,自适应模型比当前常见的智能手机显示格式消耗更少的功率;因此,它有可能节省电池电量。

因此,自适应亮度对比度是实现文本和背景之间最佳亮度对比度的新方法。

(来自:自适应亮度对比度,用于提高智能手机显示屏的阅读性能和视觉舒适度,作者:Nooree Na; Hyeon-Jeong Suk,2014.11.3)

参考文献:

为什么浅色背景上的浅色文字是一个坏主意,作者:Tatham Oddie,2008.10.13

自适应亮度对比度,用于提高智能手机显示屏的阅读性能和视觉舒适度,作者:Nooree Na; Hyeon-Jeong Suk,2014.11.3

6伤害阅读障碍用户的令人惊讶的不良行为,作者:anthony,2011.1.23

网页文本 - 背景颜色组合对可读性,保留,美学和行为意图的影响,来自:RICH H. HALL和PATRICK HANNA,2004.5

作者:Angelaaa,几乎知道专栏:ANN设计笔记

资料来源:https://zhuanlan.zhihu.com/p/30018110

本文由@Angelaaa授权。未经作者许可,禁止复制。

该地图来自PEXELS,基于CC0协议

« 微信日吸100活粉月加3000粉操作项目收入万元 | O2O只是一种过渡产品。离线商家将自己“电子商务” »