天貓店鋪用戶體驗(yàn)設(shè)計(jì)-可識(shí)別性

常見問(wèn)題一：對(duì)比度低導(dǎo)致難以識(shí)別：

案例一：某店鋪的全局導(dǎo)航，深灰色的鏈接文字，在黑色的背景上很難識(shí)別，如下圖：

案例二：某店鋪的促銷區(qū)塊，bar上的文案“罕見特惠，誰(shuí)搶誰(shuí)賺”對(duì)比度非常低，只是色相上有區(qū)別，當(dāng)把圖片轉(zhuǎn)換為灰度模式時(shí)，文字消失了！如下圖：

案例三：活動(dòng)時(shí)間在灰度模式下消失了！如下圖：

如何判斷對(duì)比度是否合適：

推薦使用以下對(duì)比度分析工具檢測(cè)店鋪?lái)?yè)面的對(duì)比度：

工具下載地址：http://www.paciellogroup.com/resources/CCA2-zh.zip

它可以幫你分析頁(yè)面顏色的對(duì)比度是否合適，如下圖：

還可以使用灰度模式，檢視店鋪：

此軟件對(duì)對(duì)比度的要求比較嚴(yán)格，一般對(duì)比值達(dá)到4:1以上即可

常見問(wèn)題二：字號(hào)太小導(dǎo)致難以識(shí)別

依然是對(duì)比度分析工具，用“白內(nèi)障”模式可以識(shí)別你的網(wǎng)頁(yè)是不是處于容易識(shí)別的范圍

解決方案：

在最佳對(duì)比度下：合理的網(wǎng)頁(yè)文字大小，應(yīng)該不低于12像素，且12像素字體抗鋸齒設(shè)置為“無(wú)”。如文字和背景對(duì)比度較低，字號(hào)應(yīng)該相應(yīng)加大，以增強(qiáng)可識(shí)別性。

各種洋文，讓文化程度偏低的我情何以堪

天書？

解決方案：通過(guò)用戶可以理解的方式表達(dá)信息，除非出于單純的裝飾目的，否則不要使用英文，繁體字等難以理解的方式。

附cca中文版下載：

下載信息  [文件大小：394.64 KB 下載次數(shù)： 次]

點(diǎn)擊下載文件:CCA2-zh

CCA為色彩對(duì)比分析程式

甚麼是色彩對(duì)比分析程式?

這個(gè)工具的主要用途是檢查前景與背景的色彩搭配組合, 看看其色彩可見度是否夠好. 它同時(shí)還有針對(duì)色盲等多種不同視覺條件, 建立模擬的功能.

判斷 "色彩可見度" 係依據(jù)對(duì)比比值演算法而來(lái), 這是由全球資訊網(wǎng)協(xié)會(huì) (W3C) 所建議的:

注意: 請(qǐng)謹(jǐn)記在心, 對(duì)比比值還不是 W3C 推薦標(biāo)準(zhǔn); 這是由 WAI WCAG 2.0 工作小組推薦來(lái)協(xié)助判斷兩個(gè)色彩間的對(duì)比, 是否對(duì)色盲或其他視力損傷的人來(lái)說(shuō), 仍能閱讀.

對(duì)比比值

以此公式計(jì)算每個(gè)字母的相對(duì)明度 (除非他們都一樣):

• L = 0.2126 * R + 0.7152 * G + 0.0722 * B 此處的 R, G 及 B 的定義為:
  • 若 RsRGB <= 0.03928 則 R = RsRGB/12.92 否則 R = ((RsRGB+0.055)/1.055) ^ 2.4
  • 若 GsRGB <= 0.03928 則 G = GsRGB/12.92 否則 G = ((GsRGB+0.055)/1.055) ^ 2.4
  • 若 BsRGB <= 0.03928 則 B = BsRGB/12.92 否則 B = ((BsRGB+0.055)/1.055) ^ 2.4
  • 而 RsRGB, GsRGB, 及 BsRGB 的定義為:
  • RsRGB = R8bit/255
  • GsRGB = G8bit/255
  • BsRGB = B8bit/255

公式中的 "^" 符號(hào)是乘冪運(yùn)算符.

注意:對(duì)於平滑過(guò)的字母, 相對(duì)明度的計(jì)算以字母邊緣內(nèi)兩個(gè)像素處為準(zhǔn).

色彩亮度係以下列公式計(jì)算:色彩亮度公式

((紅色值 X 299) + (綠色值 X 587) + (藍(lán)色值 X 114)) / 1000

背景亮度與前景亮度間的差距應(yīng)該要大於 125.

注意: 這個(gè)演算法是從把 RGB 值轉(zhuǎn)換為 YIQ 值的公式中取得的. 這個(gè)亮度值會(huì)對(duì)每個(gè)色彩給定一個(gè)知覺亮度.

色彩差異公式

色彩差異係以下列公式計(jì)算:

(取最大值 (紅色值 1, 紅色值 2) - 取最小值 (紅色值 1, 紅色值 2)) + (取最大值 (綠色值 1, 綠色值 2) - 取最小值 (綠色值 1, 綠色值 2)) + (取最大值 (藍(lán)色值 1, 藍(lán)色值 2) - 取最小值 (藍(lán)色值 1, 藍(lán)色值 2))

背景色彩與前景色彩間的差距應(yīng)該要大於 500.