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

針對 QQ支付的品牌設計，他們做了不同的設計嘗試，本文著(zhù)重分享QQ 支付品牌設計進(jìn)行的三步驟。enjoy~

　　大家見(jiàn)到的大部分支付類(lèi)產(chǎn)品，在視覺(jué)系統上大都選擇較沉穩、低調的風(fēng)格，對產(chǎn)品的可信任度上會(huì )產(chǎn)生一定的影響。不過(guò)，是不是意味著(zhù)，支付類(lèi)產(chǎn)品只能選擇這類(lèi)的配色風(fēng)格呢?

　　QQ 支付品牌設計想探尋不大一樣的風(fēng)格，面向年輕的用戶(hù)群體，使用鮮明的色彩對比，希望能增強大眾的認知度和識別度。

　　我們也針對 QQ支付的品牌設計做了不同的設計嘗試。

　　設計 Logo 是需要考慮定位的，因為 Logo 會(huì )一直跟隨在各個(gè)場(chǎng)合或角落，比如廣告牌上、宣傳單上、網(wǎng)站上、各種周邊產(chǎn)品上，你會(huì )發(fā)現一個(gè) Logo 就是由這些肉眼看得見(jiàn)的東西;比如顏色、形式、質(zhì)感、形狀等組成的，同時(shí)向人們傳遞出一種無(wú)形的東西;比如產(chǎn)品的性質(zhì)、氣質(zhì)、理念、愿景等等。

　　所以在設計 Logo 之前，好是能考慮到這三個(gè)層面：無(wú)形的定位層面、有形的視覺(jué)層面、視覺(jué)延展層面。也就是 QQ 支付品牌設計進(jìn)行的三步驟(如下圖所示)

　　一. 品牌調研及定位

　　Logo 的設計需要對整個(gè)行業(yè)與市場(chǎng)進(jìn)行研究，摸索出這個(gè)行業(yè)中產(chǎn)品品牌的固有特征與行業(yè)屬性，這些調研信息能夠幫助設計師在視覺(jué)設計時(shí)思路更加明朗。

　　1. 國外支付類(lèi)品牌

　　2. 色彩分析

　　3. 圖形分析

　　4. 相關(guān)產(chǎn)品收集分析

　　通過(guò)對支付類(lèi) Logo 的市場(chǎng)調研并得出相關(guān)結論，結合 QQ 支付該產(chǎn)品的目標人群與產(chǎn)品特性，得出以下品牌設計模型。

　　二. 品牌標志設計

　　從一步的品牌調研與定位中得出了相關(guān)結論，并結合品牌設計模型，需要清晰的價(jià)值體系和全新的識別系統，第二步便從品牌標志設計開(kāi)始，標志的立意要表達清楚，讓使用者很容易懂或很容易識別，介于這個(gè)基礎之上，再以更美的姿態(tài)表達出來(lái)。

　　1. 品牌關(guān)鍵詞的搜索

　　2. 標志設計草圖

　　接下來(lái)，設計師們開(kāi)始繪制標志的黑白草圖。草圖標志的設計元素較為多樣，包含：卡片、錢(qián)、平臺、支付手勢、支付狀態(tài)與完成等。

　　3. 標志設計提案

　　設計師做了以下的風(fēng)格嘗試：

　　方案 1：扣在一起的兩個(gè)方形元素寓意著(zhù)不同的文化與平臺，抽象的幾何方形元素與 QQ 的剪影達到比較巧妙的結合，意在傳達出 QQ 支付品牌的主要內容。

　　方案 2 ：將傾斜的兩個(gè)方形元素重疊在一起寓意著(zhù)具象的卡片元素，重疊的幾何形體搭配深淺不一的色彩組合，豐富 Logo 的層次與深度，還提取了QQ 圖形中的眼睛元素，較為簡(jiǎn)約。

　　方案 3：QQ 招手的形態(tài)剪影與支付成功的圖形結合，清晰傳達給用戶(hù)訊息：QQ 支付，喜歡就付，傳達出年輕、熱情、支付、以人為本的視覺(jué)語(yǔ)言。

　　4. 優(yōu)化標志設計

　　在提案了多種方案之后，設計師們挑選出并打磨更加中意的方案 3。方案 3 中運用了QQ 的剪影，辨識度非常高，這樣能較大的降低宣傳成本，同時(shí)打勾的圖形寓意著(zhù)支付完成的結果，代表滿(mǎn)意并安全的支付信息。

　　不過(guò)打勾的圖形似乎割裂了QQ 的身體，設計師們又在方案 3 的基礎之上嘗試多一些，接著(zhù)就是優(yōu)化標志設計這一步了。

　　在色彩的選擇上，對不同色值的藍色與黃色也進(jìn)行了多種嘗試。

　　5. 終方案

　　設計師們決定用 QQ 的剪影、支付成功的圖形組成一個(gè)獨特標志，圖形與 QQ 之間達到平衡，更好的傳達所提供服務(wù)的重要性，以確保 Logo 能夠傳達出品牌的內在品質(zhì)，希望能體現出它應該給人帶來(lái)的安全、活力、以人為本，嘗試讓品牌信息更加 “擲地有聲”，語(yǔ)氣強而有力，值得信賴(lài)。

　　6. 色彩設計

　　選擇明亮的藍色與黃色作為新的主色，能更好地體現 QQ 支付較強的生命力，充滿(mǎn)清新活力，又有助于提高產(chǎn)品延展的可用性。

　　三. 品牌設計規范

　　一個(gè)好的 Logo 可以用來(lái)做視覺(jué)延展的，便于應用在更廣泛的場(chǎng)景里，當人們一看到這個(gè)視覺(jué)元素，在腦海中立馬就會(huì )想起它，也就是占領(lǐng)了用戶(hù)心智，從而增加了用戶(hù)與品牌之間的情感粘性，品牌形象深入人心。

　　1. 圖形元素

　　視覺(jué)延展的圖形元素來(lái)源并不是憑空捏造的，圖形元素需要與品牌、Logo 之間是有規律可循的，QQ 支付用簡(jiǎn)約的抽象圖形表達 QQ 支付的品牌特性，這樣的視覺(jué)延展更具有流動(dòng)性。

　　2. 圖形結合

　　3. 輔助圖案

　　4. 設計元素

　　5. 應用設計

　　QQ 支付品牌系統設計，設計師們希望能兼顧功能與審美，嘗試建立清晰的價(jià)值體系與全新的識別系統，從無(wú)形的定位層面、有形的視覺(jué)層面、視覺(jué)延展層面三個(gè)方向建立值得信賴(lài)的 Logo、友好的配色以及豐富靈活的視覺(jué)延展。

　　我們希望以全新的形象對外展示 QQ 支付，也期待大家會(huì )喜歡全新的改變。

　　文章主要探討文本色、背景色該如何選擇，才能提供良好的「可讀性」。一起來(lái)看!

　　上次整理「色彩對比度」文章時(shí)，同時(shí)搜集了不少「文本可讀性」的相關(guān)資料。在這里挑一些比較實(shí)用的分享出來(lái)。

　　主要探討文本色、背景色該如何選擇，才能提供良好的「可讀性」。

　　慎用「暗色調」模式

　　對文本可讀性的探索科學(xué)已經(jīng)并不新鮮，而且許多非常棒的研究成果都來(lái)自于80年代早期。

　　多數研究表明，「淺背景深色字」比「深背景淺色字」要好。

　　Bauer and Cavonius在1980年發(fā)現，閱讀「淺色背景上的深色字」，比閱讀「深色背景上的淺色字」，準確率高出26%。

　　散光患者(約占人口的50%)在黑色上閱讀白色文字，比在白色上閱讀黑色文字更難。

　　部分原因與光線(xiàn)水平有關(guān)：當人眼看明亮的淺色背景顯示屏時(shí)，虹膜會(huì )關(guān)閉更多，「鏡頭變形」較小; 看暗色調屏幕時(shí)，虹膜打開(kāi)以接收更多的光，「鏡頭變形」更大，并且會(huì )在眼睛上形成一個(gè)非常模糊的焦點(diǎn)。

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

　　這種模糊會(huì )迫使人閱讀時(shí)，時(shí)不時(shí)停頓下來(lái)。

　　即使對比度完全相同的深色和淺色，淺背景上黑字，也要比深背景上淺色字的閱讀效果好許多。

　　也許你覺(jué)得為了視覺(jué)障礙者來(lái)改變設計很奇怪。但如果「視覺(jué)障礙」的比例高達50%，那這已經(jīng)和視力正常用戶(hù)同等重要了。

　　這兩個(gè)引用足以說(shuō)明，采用暗色調設計是個(gè)壞主意。

　　別在純白背景上使用純黑字

　　在純白背景 (#FFFFFF)上使用純黑色字 (#000000)不合適。

　　因為許多誦讀困難患者，對這種極高的對比度很敏感，過(guò)高的對比度會(huì )使他們看到的字旋轉模糊。

　　淺灰色背景比純白背景閱讀效果好

　　研究人員在1997年做了一個(gè)實(shí)驗，測試黑色文字在三種不同的背景顏色上(淺灰色，深灰色和白色)，哪種「可讀性」(readability)好。(他們以為是白背效果好)

　　驚訝的是，他們發(fā)現灰色背景比白色背景「可讀性」更好。 (具有諷刺意味的是，盡管有這些發(fā)現，但是現在網(wǎng)絡(luò )瀏覽器的默認背景還是白色的。)

　　自適應亮度對比度，可提高文本在智能手機上的「可讀性」和視覺(jué)舒適度

　　前人又說(shuō)高對比度更有利于閱讀，又說(shuō)高對比度增加視覺(jué)壓力，到底如何是好?

　　下面的實(shí)驗說(shuō)明，拋開(kāi)時(shí)間維度談「可讀性」都是耍流氓。

　　人們在智能手機顯示屏上閱讀時(shí)，文本和背景之間的亮度對比度對視覺(jué)感知有很大的影響。

　　《Adaptive luminance contrast for enhancing reading performance and visual comfort on smartphone displays》一文，通過(guò)2個(gè)實(shí)驗，提出并證實(shí)了一個(gè)理想的模型：隨著(zhù)時(shí)間的推移，將對比度從高，逐漸降低為一定數值，不僅可以增強文本的「可讀性」和視覺(jué)舒適度，同時(shí)還能降低了智能手機的能耗。這是一種非常適合智能手機等終端的顯示模型。

　　詳細實(shí)驗：

　　實(shí)驗1：

　　鑒于一些研究表明：

　　高對比度有利于人們集中精力、快速閱讀文字;

　　在顯示器上閱讀，對比度過(guò)高會(huì )導致視覺(jué)壓力;

　　對比度的連續變化，會(huì )導致視覺(jué)不適。

　　因此，提出一種隨著(zhù)時(shí)間的推移逐漸降低亮度對比度的理想自適應模型：在閱讀開(kāi)始使用高對比度，便于讓人集中精力;隨后隨著(zhù)時(shí)間變化，慢慢降低對比度，之后持續不變，以期減輕人長(cháng)時(shí)間閱讀的視覺(jué)壓力。

　　一共設置了3組實(shí)驗：

　　白背景，文字顏色改變：由黑到白;

　　文字顏色一直黑色不變，背景顏色由白到黑漸變;

　　文本從黑色逐漸變?yōu)榘咨?，而背景顏色以相同的速度從白色變?yōu)楹谏?/p>

　　3組實(shí)驗參數及測量結果

　　測試結果：

　　與早期的研究結果相反，當文本和背景之間的亮度對比度大時(shí)，閱讀速度快。

　　當亮度對比度降低時(shí)，每組視覺(jué)舒適度都迅速下降。

　　對比得出，組C 文本和背景的亮度同時(shí)變化，獲得了高的舒適度。

　　通過(guò)一系列用戶(hù)測試，開(kāi)發(fā)出了智能手機顯示器的亮度對比度隨時(shí)間變化的自適應模型：

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

　　因為高對比度可以幫助用戶(hù)首先集中精力閱讀。他們開(kāi)始也覺(jué)得這樣的對比值的在視覺(jué)上很舒適。

　　然而，如果使用者持續很長(cháng)時(shí)間，則會(huì )感到視力疲勞。

　　因此，亮度對比度開(kāi)始在150秒后變化;因為通常在這段時(shí)間后，人們更多的集中精力于當前閱讀當的內容上。

　　終的亮度對比度確定為0.52，考慮平均識別感受范圍的變化，文本的RGB值 51，背景為204。為了避免用戶(hù)因為亮度變化而感到改變，文本和背景之間的亮度對比度緩慢切換時(shí)間為40秒。

　　RGB 204 的淺灰背景色，與RGB 51的深灰文字色

　　實(shí)驗2：

　　設置3組實(shí)驗：

　　白底黑字;

　　自適應對比度;

　　B70——從之前的用戶(hù)測試中選出的的佳閱讀表現的數值。

　　使用腦電波的腦波分析測量「可讀性」、視覺(jué)舒適度和生理壓力。

　　測試結果證實(shí)，自適應對比度模式，可讀性、閱讀速度、舒適度表現都是好的。

　　在智能手機顯示器上應用自適應亮度對比有兩個(gè)主要優(yōu)點(diǎn)：

　　首先，通過(guò)保持閱讀性能和視覺(jué)舒適度之間的平衡，用戶(hù)可以在舒適、可讀性佳的狀態(tài)下長(cháng)時(shí)間閱讀內容。

　　其次，與目前普通的智能手機顯示形態(tài)相比，自適應模型能耗更低;因此，它具有節省電池電力的潛力。

　　所以說(shuō)，自適應亮度對比度，是一種實(shí)現文本和背景之間的佳亮度對比度的新方法。