針對(duì) QQ支付的品牌設(shè)計(jì)，他們做了不同的設(shè)計(jì)嘗試，本文著重分享QQ 支付品牌設(shè)計(jì)進(jìn)行的三步驟。enjoy~
大家見到的大部分支付類產(chǎn)品，在視覺系統(tǒng)上大都選擇較沉穩(wěn)、低調(diào)的風(fēng)格，對(duì)產(chǎn)品的可信任度上會(huì)產(chǎn)生一定的影響。不過，是不是意味著，支付類產(chǎn)品只能選擇這類的配色風(fēng)格呢?
QQ 支付品牌設(shè)計(jì)想探尋不大一樣的風(fēng)格，面向年輕的用戶群體，使用鮮明的色彩對(duì)比，希望能增強(qiáng)大眾的認(rèn)知度和識(shí)別度。
我們也針對(duì) QQ支付的品牌設(shè)計(jì)做了不同的設(shè)計(jì)嘗試。
設(shè)計(jì) Logo 是需要考慮定位的，因?yàn)?Logo 會(huì)一直跟隨在各個(gè)場(chǎng)合或角落，比如廣告牌上、宣傳單上、網(wǎng)站上、各種周邊產(chǎn)品上，你會(huì)發(fā)現(xiàn)一個(gè) Logo 就是由這些肉眼看得見的東西;比如顏色、形式、質(zhì)感、形狀等組成的，同時(shí)向人們傳遞出一種無形的東西;比如產(chǎn)品的性質(zhì)、氣質(zhì)、理念、愿景等等。
所以在設(shè)計(jì) Logo 之前，最好是能考慮到這三個(gè)層面：無形的定位層面、有形的視覺層面、視覺延展層面。也就是 QQ 支付品牌設(shè)計(jì)進(jìn)行的三步驟(如下圖所示)
一. 品牌調(diào)研及定位
Logo 的設(shè)計(jì)需要對(duì)整個(gè)行業(yè)與市場(chǎng)進(jìn)行研究，摸索出這個(gè)行業(yè)中產(chǎn)品品牌的固有特征與行業(yè)屬性，這些調(diào)研信息能夠幫助設(shè)計(jì)師在視覺設(shè)計(jì)時(shí)思路更加明朗。
1. 國(guó)外支付類品牌
2. 色彩分析
3. 圖形分析
4. 相關(guān)產(chǎn)品收集分析
通過對(duì)支付類 Logo 的市場(chǎng)調(diào)研并得出相關(guān)結(jié)論，結(jié)合 QQ 支付該產(chǎn)品的目標(biāo)人群與產(chǎn)品特性，得出以下品牌設(shè)計(jì)模型。
二. 品牌標(biāo)志設(shè)計(jì)
從第一步的品牌調(diào)研與定位中得出了相關(guān)結(jié)論，并結(jié)合品牌設(shè)計(jì)模型，需要清晰的價(jià)值體系和全新的識(shí)別系統(tǒng)，第二步便從品牌標(biāo)志設(shè)計(jì)開始，標(biāo)志的立意要表達(dá)清楚，讓使用者很容易懂或很容易識(shí)別，介于這個(gè)基礎(chǔ)之上，再以更美的姿態(tài)表達(dá)出來。
1. 品牌關(guān)鍵詞的搜索
2. 標(biāo)志設(shè)計(jì)草圖
接下來，設(shè)計(jì)師們開始繪制標(biāo)志的黑白草圖。草圖標(biāo)志的設(shè)計(jì)元素較為多樣，包含：卡片、錢、平臺(tái)、支付手勢(shì)、支付狀態(tài)與完成等。
3. 標(biāo)志設(shè)計(jì)提案
設(shè)計(jì)師做了以下的風(fēng)格嘗試：
方案 1：扣在一起的兩個(gè)方形元素寓意著不同的文化與平臺(tái)，抽象的幾何方形元素與 QQ 的剪影達(dá)到比較巧妙的結(jié)合，意在傳達(dá)出 QQ 支付品牌的主要內(nèi)容。
方案 2 ：將傾斜的兩個(gè)方形元素重疊在一起寓意著具象的卡片元素，重疊的幾何形體搭配深淺不一的色彩組合，豐富 Logo 的層次與深度，還提取了QQ 圖形中的眼睛元素，較為簡(jiǎn)約。
方案 3：QQ 招手的形態(tài)剪影與支付成功的圖形結(jié)合，清晰傳達(dá)給用戶訊息：QQ 支付，喜歡就付，傳達(dá)出年輕、熱情、支付、以人為本的視覺語(yǔ)言。
4. 優(yōu)化標(biāo)志設(shè)計(jì)
在提案了多種方案之后，設(shè)計(jì)師們挑選出并打磨更加中意的方案 3。方案 3 中運(yùn)用了QQ 的剪影，辨識(shí)度非常高，這樣能較大的降低宣傳成本，同時(shí)打勾的圖形寓意著支付完成的結(jié)果，代表滿意并安全的支付信息。
不過打勾的圖形似乎割裂了QQ 的身體，設(shè)計(jì)師們又在方案 3 的基礎(chǔ)之上嘗試多一些，接著就是優(yōu)化標(biāo)志設(shè)計(jì)這一步了。
在色彩的選擇上，對(duì)不同色值的藍(lán)色與黃色也進(jìn)行了多種嘗試。
5. 最終方案
設(shè)計(jì)師們決定用 QQ 的剪影、支付成功的圖形組成一個(gè)獨(dú)特標(biāo)志，圖形與 QQ 之間達(dá)到平衡，更好的傳達(dá)所提供服務(wù)的重要性，以確保 Logo 能夠傳達(dá)出品牌的內(nèi)在品質(zhì)，希望能體現(xiàn)出它應(yīng)該給人帶來的安全、活力、以人為本，嘗試讓品牌信息更加 “擲地有聲”，語(yǔ)氣強(qiáng)而有力，值得信賴。
6. 色彩設(shè)計(jì)
選擇明亮的藍(lán)色與黃色作為新的主色，能更好地體現(xiàn) QQ 支付較強(qiáng)的生命力，充滿清新活力，又有助于提高產(chǎn)品延展的可用性。
三. 品牌設(shè)計(jì)規(guī)范
一個(gè)好的 Logo 可以用來做視覺延展的，便于應(yīng)用在更廣泛的場(chǎng)景里，當(dāng)人們一看到這個(gè)視覺元素，在腦海中立馬就會(huì)想起它，也就是占領(lǐng)了用戶心智，從而增加了用戶與品牌之間的情感粘性，品牌形象深入人心。
1. 圖形元素
視覺延展的圖形元素來源并不是憑空捏造的，圖形元素需要與品牌、Logo 之間是有規(guī)律可循的，QQ 支付用簡(jiǎn)約的抽象圖形表達(dá) QQ 支付的品牌特性，這樣的視覺延展更具有流動(dòng)性。
2. 圖形結(jié)合
3. 輔助圖案
4. 設(shè)計(jì)元素
5. 應(yīng)用設(shè)計(jì)
QQ 支付品牌系統(tǒng)設(shè)計(jì)，設(shè)計(jì)師們希望能兼顧功能與審美，嘗試建立清晰的價(jià)值體系與全新的識(shí)別系統(tǒng)，從無形的定位層面、有形的視覺層面、視覺延展層面三個(gè)方向建立值得信賴的 Logo、友好的配色以及豐富靈活的視覺延展。
我們希望以全新的形象對(duì)外展示 QQ 支付，也期待大家會(huì)喜歡全新的改變。
文章主要探討文本色、背景色該如何選擇，才能提供良好的「可讀性」。一起來看!
上次整理「色彩對(duì)比度」文章時(shí)，同時(shí)搜集了不少「文本可讀性」的相關(guān)資料。在這里挑一些比較實(shí)用的分享出來。
主要探討文本色、背景色該如何選擇，才能提供良好的「可讀性」。
慎用「暗色調(diào)」模式
對(duì)文本可讀性的探索科學(xué)已經(jīng)并不新鮮，而且許多非常棒的研究成果都來自于80年代早期。
多數(shù)研究表明，「淺背景深色字」比「深背景淺色字」要好。
Bauer and Cavonius在1980年發(fā)現(xiàn)，閱讀「淺色背景上的深色字」，比閱讀「深色背景上的淺色字」，準(zhǔn)確率高出26%。
散光患者(約占人口的50%)在黑色上閱讀白色文字，比在白色上閱讀黑色文字更難。
部分原因與光線水平有關(guān)：當(dāng)人眼看明亮的淺色背景顯示屏?xí)r，虹膜會(huì)關(guān)閉更多，「鏡頭變形」較小; 看暗色調(diào)屏幕時(shí)，虹膜打開以接收更多的光，「鏡頭變形」更大，并且會(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í)停頓下來。
即使對(duì)比度完全相同的深色和淺色，淺背景上黑字，也要比深背景上淺色字的閱讀效果好許多。
也許你覺得為了視覺障礙者來改變?cè)O(shè)計(jì)很奇怪。但如果「視覺障礙」的比例高達(dá)50%，那這已經(jīng)和視力正常用戶同等重要了。
這兩個(gè)引用足以說明，采用暗色調(diào)設(shè)計(jì)是個(gè)壞主意。
別在純白背景上使用純黑字
在純白背景 (#FFFFFF)上使用純黑色字 (#000000)不合適。
因?yàn)樵S多誦讀困難患者，對(duì)這種極高的對(duì)比度很敏感，過高的對(duì)比度會(huì)使他們看到的字旋轉(zhuǎn)模糊。
淺灰色背景比純白背景閱讀效果好
研究人員在1997年做了一個(gè)實(shí)驗(yàn)，測(cè)試黑色文字在三種不同的背景顏色上(淺灰色，深灰色和白色)，哪種「可讀性」(readability)最好。(他們以為是白背效果最好)
驚訝的是，他們發(fā)現(xiàn)灰色背景比白色背景「可讀性」更好。 (具有諷刺意味的是，盡管有這些發(fā)現(xiàn)，但是現(xiàn)在網(wǎng)絡(luò)瀏覽器的默認(rèn)背景還是白色的。)
自適應(yīng)亮度對(duì)比度，可提高文本在智能手機(jī)上的「可讀性」和視覺舒適度
前人又說高對(duì)比度更有利于閱讀，又說高對(duì)比度增加視覺壓力，到底如何是好?
下面的實(shí)驗(yàn)說明，拋開時(shí)間維度談「可讀性」都是耍流氓。
人們?cè)谥悄苁謾C(jī)顯示屏上閱讀時(shí)，文本和背景之間的亮度對(duì)比度對(duì)視覺感知有很大的影響。
《Adaptive luminance contrast for enhancing reading performance and visual comfort on smartphone displays》一文，通過2個(gè)實(shí)驗(yàn)，提出并證實(shí)了一個(gè)理想的模型：隨著時(shí)間的推移，將對(duì)比度從最高，逐漸降低為一定數(shù)值，不僅可以增強(qiáng)文本的「可讀性」和視覺舒適度，同時(shí)還能降低了智能手機(jī)的能耗。這是一種非常適合智能手機(jī)等終端的顯示模型。
詳細(xì)實(shí)驗(yàn)：
實(shí)驗(yàn)1：
鑒于一些研究表明：
高對(duì)比度有利于人們集中精力、快速閱讀文字;
在顯示器上閱讀，對(duì)比度過高會(huì)導(dǎo)致視覺壓力;
對(duì)比度的連續(xù)變化，會(huì)導(dǎo)致視覺不適。
因此，提出一種隨著時(shí)間的推移逐漸降低亮度對(duì)比度的理想自適應(yīng)模型：在閱讀開始使用高對(duì)比度，便于讓人集中精力;隨后隨著時(shí)間變化，慢慢降低對(duì)比度，之后持續(xù)不變，以期減輕人長(zhǎng)時(shí)間閱讀的視覺壓力。
一共設(shè)置了3組實(shí)驗(yàn)：
白背景，文字顏色改變：由黑到白;
文字顏色一直黑色不變，背景顏色由白到黑漸變;
文本從黑色逐漸變?yōu)榘咨?，而背景顏色以相同的速度從白色變?yōu)楹谏?/p>
3組實(shí)驗(yàn)參數(shù)及測(cè)量結(jié)果
測(cè)試結(jié)果：
與早期的研究結(jié)果相反，當(dāng)文本和背景之間的亮度對(duì)比度最大時(shí)，閱讀速度最快。
當(dāng)亮度對(duì)比度降低時(shí)，每組視覺舒適度都迅速下降。
對(duì)比得出，組C 文本和背景的亮度同時(shí)變化，獲得了最高的舒適度。
通過一系列用戶測(cè)試，開發(fā)出了智能手機(jī)顯示器的亮度對(duì)比度隨時(shí)間變化的自適應(yīng)模型：
Adaptive luminance contrast: gradual decrease between text and background as time passes.
因?yàn)楦邔?duì)比度可以幫助用戶首先集中精力閱讀。他們最開始也覺得這樣的對(duì)比值的在視覺上很舒適。
然而，如果使用者持續(xù)很長(zhǎng)時(shí)間，則會(huì)感到視力疲勞。
因此，亮度對(duì)比度開始在150秒后變化;因?yàn)橥ǔＴ谶@段時(shí)間后，人們更多的集中精力于當(dāng)前閱讀當(dāng)?shù)膬?nèi)容上。
最終的亮度對(duì)比度確定為0.52，考慮平均識(shí)別感受范圍的變化，文本的RGB值 51，背景為204。為了避免用戶因?yàn)榱炼茸兓械礁淖儯谋竞捅尘爸g的亮度對(duì)比度緩慢切換時(shí)間為40秒。
RGB 204 的淺灰背景色，與RGB 51的深灰文字色
實(shí)驗(yàn)2：
設(shè)置3組實(shí)驗(yàn)：
白底黑字;
自適應(yīng)對(duì)比度;
B70——從之前的用戶測(cè)試中選出的的最佳閱讀表現(xiàn)的數(shù)值。
使用腦電波的腦波分析測(cè)量「可讀性」、視覺舒適度和生理壓力。
測(cè)試結(jié)果證實(shí)，自適應(yīng)對(duì)比度模式，可讀性、閱讀速度、舒適度表現(xiàn)都是最好的。
在智能手機(jī)顯示器上應(yīng)用自適應(yīng)亮度對(duì)比有兩個(gè)主要優(yōu)點(diǎn)：
首先，通過保持閱讀性能和視覺舒適度之間的平衡，用戶可以在舒適、可讀性佳的狀態(tài)下長(zhǎng)時(shí)間閱讀內(nèi)容。
其次，與目前普通的智能手機(jī)顯示形態(tài)相比，自適應(yīng)模型能耗更低;因此，它具有節(jié)省電池電力的潛力。
所以說，自適應(yīng)亮度對(duì)比度，是一種實(shí)現(xiàn)文本和背景之間的最佳亮度對(duì)比度的新方法。
掃一掃關(guān)注微信公眾號(hào)
掃一掃訪問手機(jī)站
掃一掃打開小程序
