對(duì)于QQ支付的品牌設(shè)計(jì)，他們做了不同的設(shè)計(jì)嘗試。本文重點(diǎn)分享QQ支付品牌設(shè)計(jì)的三個(gè)步驟。享受?

我們看到的大多數(shù)支付產(chǎn)品在視覺(jué)系統(tǒng)中選擇了更穩(wěn)定和低調(diào)的風(fēng)格，這將對(duì)產(chǎn)品的可信度產(chǎn)生一定的影響。但是，這是否意味著支付產(chǎn)品只能選擇這種顏色匹配方式？

QQ支付品牌設(shè)計(jì)希望探索不同的風(fēng)格，針對(duì)年輕用戶群體，采用鮮艷的色彩對(duì)比，希望能提升公眾的認(rèn)知度和認(rèn)知度。

我們還對(duì)QQ支付的品牌設(shè)計(jì)進(jìn)行了不同的設(shè)計(jì)嘗試。

設(shè)計(jì)徽標(biāo)需要考慮定位，因?yàn)榛諛?biāo)將始終在各種場(chǎng)合或角落中遵循，例如廣告牌，傳單，網(wǎng)站和各種外圍產(chǎn)品。你會(huì)發(fā)現(xiàn)一個(gè)肉眼可見(jiàn)的標(biāo)志。東西;如顏色，形狀，質(zhì)地，形狀等，同時(shí)向人們傳達(dá)無(wú)形的東西;如產(chǎn)品的性質(zhì)，氣質(zhì)，哲學(xué)，視覺(jué)等。

因此，在設(shè)計(jì)Logo之前，最好考慮這三個(gè)級(jí)別：隱形定位級(jí)別，有形視覺(jué)級(jí)別和視覺(jué)擴(kuò)展級(jí)別。也就是說(shuō)，QQ支付品牌設(shè)計(jì)的三個(gè)步驟（如下圖所示）

一，品牌研究與定位

Logo的設(shè)計(jì)需要對(duì)整個(gè)行業(yè)和市場(chǎng)進(jìn)行研究，并探索該行業(yè)中產(chǎn)品品牌的固有特征和行業(yè)屬性。這些研究信息可以幫助設(shè)計(jì)師在視覺(jué)設(shè)計(jì)中變得更加清晰。

1.國(guó)外支付品牌

2.顏色分析

3.圖形分析

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

通過(guò)對(duì)支付類別Logo的市場(chǎng)調(diào)研并得出相關(guān)結(jié)論，結(jié)合QQ支付目標(biāo)人群和產(chǎn)品特征，得到以下品牌設(shè)計(jì)模型。

2.品牌標(biāo)志設(shè)計(jì)

從第一步的品牌研究和定位，得出相關(guān)結(jié)論，并結(jié)合品牌設(shè)計(jì)模型，需要一個(gè)明確的價(jià)值體系和一個(gè)新的識(shí)別系統(tǒng)。第二步從品牌標(biāo)志設(shè)計(jì)開始，徽標(biāo)旨在清晰表達(dá)。在此基礎(chǔ)上使用戶易于理解或易于識(shí)別，然后以更美麗的姿勢(shì)表達(dá)。

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

2.徽標(biāo)設(shè)計(jì)草圖

接下來(lái)，設(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的輪廓更加巧妙地結(jié)合在一起，旨在傳達(dá)QQ支付品牌的主要內(nèi)容。

選項(xiàng)2：傾斜的兩個(gè)方形元素重疊，以象征圖像的卡片元素，重疊的幾何形狀匹配不同的顏色組合，豐富徽標(biāo)的水平和深度，并提取QQ圖形中的眼睛元素。簡(jiǎn)單。

選項(xiàng)3：QQ的招手剪影和支付成功圖形的組合清楚地向用戶傳達(dá)信息：QQ支付，喜歡支付，并傳達(dá)年輕，熱情，付費(fèi)，以人為本的視覺(jué)語(yǔ)言。

4.優(yōu)化徽標(biāo)設(shè)計(jì)

在提出各種選擇之后，設(shè)計(jì)師選擇并完善了一個(gè)更理想的解決方案。 QQ的草圖用于方案3，識(shí)別率很高，可以大大降低宣傳成本。同時(shí)，勾選圖表表示付款完成的結(jié)果，代表令人滿意且安全的付款信息。

然而，勾選的圖形似乎已經(jīng)拆分了QQ的主體，并且設(shè)計(jì)師在選項(xiàng)3的基礎(chǔ)上嘗試了更多，然后是優(yōu)化徽標(biāo)設(shè)計(jì)的步驟。

在顏色的選擇中，已經(jīng)對(duì)不同顏色值的藍(lán)色和黃色進(jìn)行了各種嘗試。

5.最終計(jì)劃

設(shè)計(jì)師決定使用QQ的輪廓，支付成功的圖形，形成獨(dú)特的標(biāo)識(shí)，并在圖形和QQ之間取得平衡，更好地傳達(dá)所提供服務(wù)的重要性，以確保標(biāo)識(shí)能夠傳達(dá)品牌的內(nèi)在品質(zhì)，希望能夠它反映了它應(yīng)該給人們帶來(lái)的安全，活力和以人為本。嘗試使品牌信息更加“聽起來(lái)和響亮”，具有強(qiáng)烈的基調(diào)和可靠性。

6.色彩設(shè)計(jì)

選擇鮮艷的藍(lán)色和黃色作為新的主色可以更好地體現(xiàn)QQ支付的強(qiáng)大生命力，充滿新鮮活力，并有助于提高產(chǎn)品延伸的可用性。

III。品牌設(shè)計(jì)規(guī)范

一個(gè)好的標(biāo)識(shí)可以用于視覺(jué)擴(kuò)展，這很容易應(yīng)用于更廣泛的場(chǎng)景。當(dāng)人們看到這個(gè)視覺(jué)元素時(shí)，他們會(huì)在腦海中記住它，這會(huì)占用用戶的思維并增加用戶。品牌與品牌之間的情感粘性深深植根于人們的心中。

1.圖形元素

視覺(jué)上擴(kuò)展的圖形元素的來(lái)源不是由薄薄的空氣制造的。圖形元素需要定期跟隨品牌和徽標(biāo)。 QQ通過(guò)簡(jiǎn)單的抽象圖形支付QQ支付的品牌特征。這種視覺(jué)延伸更加流暢。 。

2.圖形集成

3.輔助模式

4.設(shè)計(jì)元素

5.應(yīng)用程序設(shè)計(jì)

QQ支付品牌系統(tǒng)設(shè)計(jì)，希望能夠平衡功能和美學(xué)，嘗試建立一個(gè)清晰的價(jià)值體系和新的識(shí)別系統(tǒng)，從三個(gè)方面建立一個(gè)值得信賴的標(biāo)識(shí)：隱形定位水平，有形視覺(jué)水平和視覺(jué)延伸水平。友好的配色方案和豐富靈活的視覺(jué)延伸。

我們希望以全新的形象展示QQ支付，我們期待看到新的變化。

資料來(lái)源：騰訊ISUX

本文主要討論如何選擇文本顏色和背景顏色以提供良好的可讀性。走到一起！

當(dāng)我上次組織“顏色對(duì)比”文章時(shí)，我還收集了很多“文本可讀性”相關(guān)資料。在這里挑選一些更實(shí)用的。

主要是探索如何選擇文本顏色和背景顏色以提供良好的可讀性。

請(qǐng)謹(jǐn)慎使用“暗調(diào)”模式

探索文本可讀性的科學(xué)并不新鮮，許多偉大的研究成果來(lái)自20世紀(jì)80年代早期。

大多數(shù)研究表明，“淺色背景暗詞”優(yōu)于“暗色背景淺色詞”。

鮑爾和卡沃尼烏斯在1980年發(fā)現(xiàn)，閱讀“淺色背景上的黑暗角色”比閱讀“深色背景上的淺色文字”準(zhǔn)確率高26％。

（參考文獻(xiàn): Bauer，D。，& Cavonius，C.，R。（1980）。通過(guò)對(duì)比反轉(zhuǎn)改善視覺(jué)顯示單元的易讀性。在E. Grandjean，E。Vigliani（編輯），視覺(jué)顯示的人體工程學(xué)方面終端（第137-142頁(yè)）。倫敦:泰勒和弗朗西斯）

散光患者（約占總?cè)丝诘?0％）閱讀黑色白色文本，這比閱讀白色黑色文本更困難。

部分原因與光線水平有關(guān)：當(dāng)人眼看到明亮的背景顯示時(shí)，光圈會(huì)更多地關(guān)閉，“鏡頭失真”會(huì)變小;當(dāng)觀看暗色調(diào)屏幕時(shí)，光圈會(huì)打開以接收更多光線，“鏡頭失真更大，會(huì)在眼睛上形成非常模糊的焦點(diǎn)。

（杰森哈里森–博士后研究員，影像實(shí)驗(yàn)室經(jīng)理–不列顛哥倫比亞大學(xué)感覺(jué)知覺(jué)和互動(dòng)研究小組）

這種模糊性會(huì)迫使人們不時(shí)地停下來(lái)。

即使是具有相同對(duì)比度的深色和淺色，淺色背景上的黑色文本也比在深色背景上的淺色背景上閱讀要好得多。

也許你認(rèn)為改變視障人士的設(shè)計(jì)是很奇怪的。但如果“視力障礙”的比例高達(dá)50％，那么這與正常的視力用戶一樣重要。

這兩個(gè)參考文獻(xiàn)足以表明用深色調(diào)設(shè)計(jì)是一個(gè)壞主意。

（來(lái)自：為什么淺色背景上的淺色文字是一個(gè)壞主意，作者：Tatham Oddie，2008.10.13）

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

在純白色背景（FFFFFF）上使用純黑色字（000000）是不合適的。

因?yàn)樵S多患有閱讀障礙的患者對(duì)這種極高的對(duì)比度很敏感，所以過(guò)高的對(duì)比度會(huì)使他們看到的單詞模糊不清。

（來(lái)自：傷害閱讀障礙用戶的6個(gè)令人驚訝的不良行為，作者：安東尼，2011.1.23）

淺灰色背景優(yōu)于純白色背景

研究人員在1997年進(jìn)行了一項(xiàng)實(shí)驗(yàn)，測(cè)試三種不同背景顏色（淺灰色，深灰色和白色）的黑色文本，這些顏色具有最佳的“可讀性”。 （他們認(rèn)為這是最好的白背）

令人驚訝的是，他們發(fā)現(xiàn)灰色背景比白色背景更“準(zhǔn)備好”。 （具有諷刺意味的是，盡管有這些發(fā)現(xiàn)，但Web瀏覽器的默認(rèn)背景仍為白色。）

（來(lái)自：網(wǎng)頁(yè)文本 - 背景顏色組合對(duì)可讀性，保留，美學(xué)和行為意圖的影響，來(lái)自：RICH H. HALL和PATRICK HANNA，2004.5）

自適應(yīng)亮度對(duì)比度，可提高智能手機(jī)的文本可讀性和視覺(jué)舒適度

前輩們還說(shuō)，高對(duì)比度更有利于閱讀，而高對(duì)比度增加了視覺(jué)壓力。它有多好？

以下實(shí)驗(yàn)表明，時(shí)間維度的“可讀性”是一個(gè)流氓。

當(dāng)人們?cè)谥悄苁謾C(jī)顯示屏上閱讀時(shí)，文本和背景之間的亮度對(duì)比對(duì)視覺(jué)感知有很大影響。

《Adaptive luminance contrast for enhancing reading performance and visual comfort on smartphone displays》在文章中，通過(guò)兩個(gè)實(shí)驗(yàn)，提出并確認(rèn)了理想模型：隨著時(shí)間的推移，對(duì)比度從最高值降低到一定值，這不僅增強(qiáng)了文本的“可讀性”和視覺(jué)舒適度。同時(shí)，它可以降低智能手機(jī)的能耗。這是一種適用于智能手機(jī)等終端的顯示器型號(hào)。

詳細(xì)實(shí)驗(yàn)：

實(shí)驗(yàn)1：

鑒于一些研究表明：

高對(duì)比度有助于人們快速集中和閱讀文本;

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

對(duì)比度的連續(xù)變化會(huì)導(dǎo)致視覺(jué)不適。

因此，提出了一種理想的隨時(shí)間逐漸降低亮度對(duì)比度的自適應(yīng)模型：在讀取開始時(shí)使用高對(duì)比度以促進(jìn)濃度;然后對(duì)比度隨時(shí)間逐漸減小，然后保持不變。減少長(zhǎng)時(shí)間閱讀的人的視覺(jué)壓力。

共設(shè)置了三組實(shí)驗(yàn)：

白色背景，文字顏色變化：從黑色到白色;

文本顏色始終為黑色，背景顏色從白色變?yōu)楹谏?

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

3組實(shí)驗(yàn)參數(shù)和測(cè)量結(jié)果

測(cè)試結(jié)果：

與早期的研究相反，當(dāng)文本和背景之間的亮度對(duì)比度最大化時(shí)，閱讀速度最快。

隨著亮度對(duì)比度的降低，每組的視覺(jué)舒適度迅速下降。

相反，C組文本和背景的亮度同時(shí)變化，達(dá)到最高水平的舒適度。

通過(guò)一系列用戶測(cè)試，開發(fā)出智能手機(jī)顯示器亮度對(duì)比度的自適應(yīng)模型：

隨著時(shí)間的推移，文本和背景之間的自適應(yīng)亮度對(duì)比度:逐漸減小。

因?yàn)楦邔?duì)比度可以幫助用戶首先專注于閱讀。他們還認(rèn)為對(duì)比度值最初在視覺(jué)上是舒適的。

但是，如果用戶持續(xù)很長(zhǎng)時(shí)間，他們會(huì)感到視力疲勞。

因此，亮度對(duì)比度在150秒后開始變化;因?yàn)橥ǔＴ谶@段時(shí)間之后，人們更多地關(guān)注當(dāng)前的閱讀內(nèi)容。

最終亮度對(duì)比度確定為0.52，考慮到平均識(shí)別經(jīng)驗(yàn)范圍的變化，文本具有RGB值51和背景204.為了防止用戶由于亮度變化而感覺(jué)改變，文本和背景之間的亮度對(duì)比度慢慢切換到40秒。

RGB 204的淺灰色背景顏色，RGB 51的深灰色文本顏色

實(shí)驗(yàn)2：

設(shè)置3組實(shí)驗(yàn)：

黑白色;

自適應(yīng)對(duì)比度;

B70——從先前的用戶測(cè)試中選擇的最佳閱讀性能的值。

使用腦波的腦波分析測(cè)量“可讀性”，視覺(jué)舒適度和生理壓力。

測(cè)試結(jié)果證實(shí)，自適應(yīng)對(duì)比度模式，可讀性，閱讀速度和舒適性能是最佳的。

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

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

其次，自適應(yīng)模型比當(dāng)前常見(jiàn)的智能手機(jī)顯示格式消耗更少的功率;因此，它有可能節(jié)省電池電量。

因此，自適應(yīng)亮度對(duì)比度是實(shí)現(xiàn)文本和背景之間最佳亮度對(duì)比度的新方法。

（來(lái)自：自適應(yīng)亮度對(duì)比度，用于提高智能手機(jī)顯示屏的閱讀性能和視覺(jué)舒適度，作者：Nooree Na; Hyeon-Jeong Suk，2014.11.3）

參考文獻(xiàn)：

為什么淺色背景上的淺色文字是一個(gè)壞主意，作者：Tatham Oddie，2008.10.13

自適應(yīng)亮度對(duì)比度，用于提高智能手機(jī)顯示屏的閱讀性能和視覺(jué)舒適度，作者：Nooree Na; Hyeon-Jeong Suk，2014.11.3

6傷害閱讀障礙用戶的令人驚訝的不良行為，作者：anthony，2011.1.23

網(wǎng)頁(yè)文本 - 背景顏色組合對(duì)可讀性，保留，美學(xué)和行為意圖的影響，來(lái)自：RICH H. HALL和PATRICK HANNA，2004.5

作者：Angelaaa，幾乎知道專欄：ANN設(shè)計(jì)筆記

資料來(lái)源：https://zhuanlan.zhihu.com/p/30018110

本文由@Angelaaa授權(quán)。未經(jīng)作者許可，禁止復(fù)制。

該地圖來(lái)自PEXELS，基于CC0協(xié)議

« 微信日吸100活粉月加3000粉操作項(xiàng)目收入萬(wàn)元 | O2O只是一種過(guò)渡產(chǎn)品。離線商家將自己“電子商務(wù)” »