提高「可读性」，文本、背景色怎么选？

　　针对 QQ付出的品牌设想，他们做了差别的设想测验考试，本文偏重分享QQ 付出品牌设想停止的三步调。enjoy~

　　各人睹到的年夜部门付出类产物，正在视觉体系上多数挑选较沉稳、低调的气势派头，对产物的可托任度上会发生必然的影响。不外，是否是意味着，付出类产物只能挑选那类的配色气势派头呢?

　　QQ 付出品牌设想念探访没有年夜一样的气势派头，里背年青的用户群体，利用明显的颜色比照，期望能加强群众的认知度战辨认度。

　　我们也针对 QQ付出的品牌设想做了差别的设想测验考试。

　　设想 Logo 是需求思索定位的，果为 Logo 会不断跟从正在各个场所或角降，好比告白牌上、宣扬单上、网站上、各类周边产物上，您会发明一个 Logo 便是由那些肉眼看得睹的工具;好比色彩、情势、量感、外形等构成的，同时背人们通报出一种无形的工具;好比产物的性子、气量、理念、愿景等等。

　　以是正在设想 Logo 之前，最好是能思索到那三个层里：无形的定位层里、无形的视觉层里、视觉延展层里。也便是 QQ 付出品牌设想停止的三步调(以下图所示)

　　一. 品牌调研及定位

　　Logo 的设想需求对全部止业取市场停止研讨，探索出那个止业中产物品牌的固有特性取止业属性，那些调研疑息可以协助设想师正在视觉设想时思绪愈加开阔爽朗。

　　1. 外洋付出类品牌

　　2. 颜色阐发

　　3. 图形阐发

　　4. 相干产物搜集阐发

　　经由过程对付出类 Logo 的市场调研并得出相干结论，分离 QQ 付出该产物的目的人群取产物特征，得出以下品牌设想模子。

　　两. 品牌标记设想

　　从第一步的品牌调研取定位中得出了相干结论，并分离品牌设想模子，需求明晰的代价系统战齐新的辨认体系，第两步便从品牌标记设想开端，标记的坐意要表达分明，让利用者很简单懂或很简单辨认，介于那个根底之上，再以更好的姿势表达出去。

　　1. 品牌枢纽词的搜刮

　　2. 标记设想草图

　　接下去，设想师们开端画造标记的口角草图。草图标记的设想元素较为多样，包罗：卡片、钱、仄台、付出脚势、付出形态取完成等。

　　3. 标记设想提案

　　设想师做了以下的气势派头测验考试：

　　计划 1：扣正在一同的两个圆形元素寄意着差别的文明取仄台，笼统的多少圆形元素取 QQ 的剪影到达比力奇妙的分离，意正在转达出 QQ 付出品牌的次要内容。

　　计划 2 ：将倾斜的两个圆形元素堆叠正在一同寄意着具象的卡片元素，堆叠的多少形体拆配深浅纷歧的颜色组开，丰硕 Logo 的条理取深度，借提与了QQ 图形中的眼睛元素，较为繁复。

　　计划 3：QQ 招脚的形状剪影取付出胜利的图形分离，明晰转达给用户讯息：QQ 付出，喜好便付，转达出年青、热忱、付出、以报酬本的视觉言语。

　　4. 劣化标记设想

　　正在提案了多种计划以后，设想师们选择出并挨磨愈加中意的计划 3。计划 3 中使用了QQ 的剪影，辨识度十分下，那样能较年夜的低落宣扬本钱，同时挨勾的图形寄意着付出完成的成果，代表合意并宁静的付出疑息。

　　不外挨勾的图形仿佛分裂了QQ 的身材，设想师们又正在计划 3 的根底之上测验考试多一些，接着便是劣化标记设想那一步了。

　　正在颜色的挑选上，对差别色值的蓝色取黄色也停止了多种测验考试。

　　5. 终极计划

　　设想师们决议用 QQ 的剪影、付出胜利的图形构成一个共同标记，图形取 QQ 之间到达均衡，更好的转达所供给效劳的主要性，以确保 Logo 可以转达出品牌的内涵品格，期望能表现出它该当给人带去的宁静、生机、以报酬本，测验考试让品牌疑息愈加 “掷天有声”，语气强而有力，值得信任。

　　6. 颜色设想

　　挑选亮堂的蓝色取黄色做为新的主色，能更好天表现 QQ 付出较强的死命力，布满清爽生机，又有助于进步产物延展的可用性。

　　三. 品牌设想标准

　　一个好的 Logo 能够用去做视觉延展的，便于使用正在更普遍的场景里，当人们一看到那个视觉元素，正在脑海中坐马便会念起它，也便是霸占了用户心智，从而删减了用户取品牌之间的感情粘性，品牌形象深化民气。

　　1. 图形元素

　　视觉延展的图形元从来源其实不是闭门造车的，图形元素需求取品牌、Logo 之间是有纪律可循的，QQ 付出用繁复的笼统图形表达 QQ 付出的品牌特征，那样的视觉延展更具有活动性。

　　2. 图形分离

　　3. 帮助图案

　　4. 设想元素

　　5. 使用设想

　　QQ 付出品牌体系设想，设想师们期望能统筹功用取审好，测验考试成立明晰的代价系统取齐新的辨认体系，从无形的定位层里、无形的视觉层里、视觉延展层里三个标的目的成立值得信任的 Logo、友爱的配色和丰硕灵敏的视觉延展。

　　我们期望以齐新的形象对中展现 QQ 付出，也等待各人会喜好齐新的改动。

　　滥觞：腾讯 ISUX

　　文章次要讨论文本质、布景色该怎样挑选，才气供给优良的「可读性」。一同去看!

　　前次收拾整顿「颜色比照度」文章时，同时汇集了很多「文本可读性」的相干材料。正在那里挑一些比力真用的分享出去。

　　次要讨论文本质、布景色该怎样挑选，才气供给优良的「可读性」。

　　慎用「暗色彩」形式

　　对文本可读性的探究科教曾经其实不新颖，并且很多十分棒的研讨功效皆去自于80年月晚期。

　　大都研讨表白，「浅布景深色字」比「深布景淡色字」要好。

　　Bauer and Cavonius正在1980年发明，浏览「淡色布景上的深色字」，比浏览「深色布景上的淡色字」，精确率超出跨越26%。

　　(Reference: Bauer, D., & Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp. 137-142). London: Taylor & Francis)

　　集光患者(约占生齿的50%)正在乌色上浏览红色笔墨，比正在红色上浏览乌色笔墨更易。

　　部门本果取光芒程度有闭：当人眼看亮堂的淡色布景显现屏时，虹膜会封闭更多，「镜头变形」较小; 看暗色彩屏幕时，虹膜翻开以领受更多的光，「镜头变形」更年夜，而且会正在眼睛上构成一个十分恍惚的核心。

　　(Jason Harrison – Post Doctoral Fellow, Imager Lab Manager – Sensory Perception and Interaction Research Group, University of British Columbia )

　　那种恍惚会迫令人浏览时，时没有时平息下去。

　　即便比照度完整不异的深色战淡色，浅布景上乌字，也要比深布景上淡色字的浏览结果好很多。

　　或许您以为为了视觉停滞者去改动设想很奇异。但假如「视觉停滞」的比例下达50%，那那曾经战目力一般用户划一主要了。

　　那两个援用足以阐明，接纳暗色彩设想是个坏主张。

　　(from：Why light text on dark background is a bad idea，by：Tatham Oddie ，2008.10.13)

　　别正在杂黑布景上利用杂乌字

　　正在杂黑布景 (#FFFFFF)上利用杂乌色字 (#000000)没有适宜。

　　果为很多朗读艰难患者，对那种极下的比照度很敏感，太高的比照度会使他们看到的字扭转恍惚。

　　(from：6 Surprising Bad Practices That Hurt Dyslexic Users，by： anthony ，2011.1.23)

　　浅灰色布景比杂黑布景浏览结果好

　　研讨职员正在1997年做了一个尝试，测试乌色笔墨正在三种差别的布景色彩上(浅灰色，深灰色战红色)，哪一种「可读性」(readability)最好。(他们觉得是黑背结果最好)

　　惊奇的是，他们发明灰色布景比红色布景「可读性」更好。 (具有挖苦意味的是，虽然有那些发明，可是如今收集阅读器的默许布景借是红色的。)

　　(from：The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention，by：RICHARD H. HALL and PATRICK HANNA，2004.5)

　　自顺应明度比照度，可进步文本正在智妙手机上的「可读性」战视觉温馨度

　　前人又道下比照度更有益于浏览，又道下比照度删减视觉压力，到底怎样是好?

　　上面的尝试阐明，扔开工夫维度道「可读性」皆是耍地痞。

　　人们正在智妙手机显现屏上浏览时，文本战布景之间的明度比照度对视觉感知有很年夜的影响。

　　《Adaptive luminance contrast for enhancing reading performance and visual comfort on smartphone displays》一文，经由过程2个尝试，提出并证明了一个幻想的模子：跟着工夫的推移，将比照度从最下，逐步低落为必然数值，不只能够加强文本的「可读性」战视觉温馨度，同时借能低落了智妙手机的能耗。那是一种十分合适智妙手机等末真个显现模子。

　　具体尝试：

　　尝试1：

　　鉴于一些研讨表白：

　　下比照度有益于人们集合精神、快速浏览笔墨;

　　正在显现器上浏览，比照渡过下会招致视觉压力;

　　比照度的持续变革，会招致视觉没有适。

　　因而，提出一种跟着工夫的推移逐步低落明度比照度的幻想自顺应模子：正在浏览开端利用下比照度，便于让人集合精神;随后跟着工夫变革，渐渐低落比照度，以后连续稳定，以期加沉人少工夫浏览的视觉压力。

　　一共设置了3组尝试：

　　黑布景，笔墨色彩改动：由乌到黑;

　　笔墨色彩不断乌色稳定，布景色彩由黑到乌突变;

　　文本从乌色逐步变成红色，而布景色彩以不异的速率从红色变成乌色。

　　3组尝试参数及丈量成果

　　测试成果：

　　取晚期的研讨成果相反，当文本战布景之间的明度比照度最年夜时，浏览速率最快。

　　当明度比照度低落时，每组视觉温馨度皆疾速降落。

　　比照得出，组C 文本战布景的明度同时变革，得到了最下的温馨度。

　　经由过程一系列用户测试，开辟出了智妙手机显现器的明度比照度随工夫变革的自顺应模子：

　　Adaptive luminance contrast: gradual decrease between text and background as time passes.

　　果为下比照度能够协助用户尾先集合精神浏览。他们最开端也以为那样的比照值的正在视觉上很温馨。

　　但是，假如利用者连续很少工夫，则会感应目力疲倦。

　　因而，明度比照度开端正在150秒后变革;果为凡是正在那段工夫后，人们更多的集合精神于当前浏览当的内容上。

　　终极的明度比照度肯定为0.52，思索均匀辨认感触感染范畴的变革，文本的RGB值 51，布景为204。为了不用户果为明度变革而感应改动，文本战布景之间的明度比照度迟缓切换工夫为40秒。

　　RGB 204 的浅灰布景色，取RGB 51的深灰笔墨色

　　尝试2：

　　设置3组尝试：

　　黑底乌字;

　　自顺应比照度;

　　B70——从之前的用户测试当选出的的最好浏览表示的数值。

　　利用脑电波的脑波阐发丈量「可读性」、视觉温馨度战死理压力。

　　测试成果证明，自顺应比照度形式，可读性、浏览速率、温馨度表示皆是最好的。

　　正在智妙手机显现器上使用自顺应明度比照有两个次要长处：

　　尾先，经由过程连结浏览机能战视觉温馨度之间的均衡，用户能够正在温馨、可读性佳的形态下少工夫浏览内容。

　　其次，取今朝一般的智妙手机显现形状比拟，自顺应模子能耗更低;因而，它具有节流电池电力的潜力。

　　以是道，自顺应明度比照度，是一种真现文本战布景之间的最好明度比照度的新办法。

　　(from：Adaptive luminance contrast for enhancing reading performance and visual comfort on smartphone displays，by：Nooree Na; Hyeon-Jeong Suk，2014.11.3)

　　参考文献：

　　Why light text on dark background is a bad idea，by：Tatham Oddie ，2008.10.13

　　Adaptive luminance contrast for enhancing reading performance and visual comfort on smartphone displays，by：Nooree Na; Hyeon-Jeong Suk，2014.11.3

　　6 Surprising Bad Practices That Hurt Dyslexic Users，by： anthony ，2011.1.23

　　The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention，by：RICHARD H. HALL and PATRICK HANNA，2004.5

　　做者：Angelaaa，知乎专栏：ANN 的设想条记

　　滥觞：https://zhuanlan.zhihu.com/p/30018110

　　本文由 @Angelaaa 受权公布。已经做者答应，制止转载。

　　题图去自PEXELS，基于CC0和谈