天貓店鋪用戶體驗設計-可識別性

常見問題一：對比度低導致難以識別：

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

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

案例三：活動時間在灰度模式下消失了！如下圖：

如何判斷對比度是否合適：

推薦使用以下對比度分析工具檢測店鋪頁面的對比度：

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

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

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

此軟件對對比度的要求比較嚴格，一般對比值達到4:1以上即可

常見問題二：字號太小導致難以識別

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

解決方案：

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

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

天書？

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

附cca中文版下載：

下載信息  [文件大?。?94.64 KB 下載次數(shù)： 次]

點擊下載文件:CCA2-zh

CCA為色彩對比分析程式

甚麼是色彩對比分析程式?

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

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

注意: 請謹記在心, 對比比值還不是 W3C 推薦標準; 這是由 WAI WCAG 2.0 工作小組推薦來協(xié)助判斷兩個色彩間的對比, 是否對色盲或其他視力損傷的人來說, 仍能閱讀.

對比比值

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

• 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

公式中的 "^" 符號是乘冪運算符.

注意:對於平滑過的字母, 相對明度的計算以字母邊緣內兩個像素處為準.

色彩亮度係以下列公式計算:色彩亮度公式

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

背景亮度與前景亮度間的差距應該要大於 125.

注意: 這個演算法是從把 RGB 值轉換為 YIQ 值的公式中取得的. 這個亮度值會對每個色彩給定一個知覺亮度.

色彩差異公式

色彩差異係以下列公式計算:

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

背景色彩與前景色彩間的差距應該要大於 500.