優秀包裝設計作品的設計目的在于代表企業或品牌的形象,良好的優秀包裝設計作品建立起品牌和客戶之間的聯系:
假設一個服務代表需要為一個客戶修理一臺壞了的機器,而這個客戶的位置在地圖上被高亮顯示。如果服務代表患有色盲,他們可能無法區分哪個標記被突出顯示。他們必須在菜單和表格中搜尋信息。這是沒有效率的。因此,搜索基本信息所需的額外時間累積起來會影響客戶服務的質量。
但是,對地圖的設計進行一些改變,使其對色盲友好,就能產生很大的不同。
在以下示例中,左側的地圖顯示了一系列藍色標記中的一個粉色標記。右邊的地圖模擬了色盲的人可能看到的同一張地圖:都是一種顏色。你可以想象這有多令人沮喪。
左圖:對于視力正常的人來說,地圖是什么樣子。右圖:對于色盲的人來說,相同的地圖可能是什么樣子喬恩喬丹/銷售人員我們知道我們可以做兩件事來提高地圖的可訪問性:
創建一個色盲友好的調色板,任何人,尤其是色盲的人,都可以設置。創建符合對比度要求的標記以獲得更好的可視性。成為可訪問性冠軍了解為什么讓每個人都能訪問技術非常重要。
關于可訪問性的技巧1,400點從網絡可訪問性開始
什么是色盲?因為這個名字,有一種誤解,認為色盲的人只能看到黑色和白色。色盲或色覺缺陷(化學氣相沉積)的實際含義是,與具有典型色覺的人相比,一個人區分顏色的能力下降。
那么化學蒸汽沉積(chemical vapor deposition)有多普遍呢?全世界約有3.5億人患有此病,占總人口的4%。這種情況在男性中更為普遍,每12名男性中就有一人患有這種疾病(約8%)。這意味著我們當前的銷售力量用戶中可能有很大一部分患有色盲。如果我們不做出改變,我們就有可能阻止新用戶使用我們的地圖程序。
模擬不同類型的色盲如何影響一個人對顏色的感知喬恩喬丹/銷售人員在上面的糖果圖片示例中,我們可以了解不同類型的色盲如何影響一個人對自然顏色的感知。最常見的色盲形式是德國(deuteranomaly和德語烏托邦)和protan (protanomaly和protanopia),它們是紅色/綠色類型。紅/綠色色盲的經典例子是看不到長滿綠葉的樹上的紅蘋果。它們都融合在一起。第三種類型,tritan(tritananomaly和tritanopia),是藍色/黃色色盲。典型的例子是地圖上藍色的水和黃色的土地看起來一樣。
從地圖標記開始我們從重新設計地圖標記開始,知道它將在我們如何處理調色板中發揮重要作用。我們的舊標記沒有清晰的邊界,因此視覺敏銳度較低的人可能很難將其與后面的地圖區分開來。
WCAG(網頁內容可訪問性指南)要求兩個元素之間的比例至少為3.5:1。因為地圖標記的顏色可能太接近其背后地圖的顏色,所以我們認為這是一個有機會的領域。我們打破了標記行業標準的慣例,添加了雙邊框,并帶有一致的白色輪廓。采用這種設計,無論背景如何,標記始終具有最低11:1的對比度。
我們還使中心點根據標記的顏色從白色變為黑色,以確保始終有一個清晰的焦點。這個功能是修改調色板的關鍵。
地圖標記的修正和對比度的比較喬恩喬丹/銷售人員開發調色板完成標記后,我們開始開發色盲友好調色板。基于我們的設計系統團隊之前為創建可訪問的調色板所做的工作,我們選擇了24種最合適的顏色。我們移除了所有在地圖背景上太亮而不可見的顏色,以及太暗而不容易區分的顏色。
左側的圖表顯示了銷售力量的輔助調色板。右邊是為色盲設計的流線型調色板喬恩喬丹/銷售人員我們使用了一個色盲模擬器來檢查我們的可訪問性(a11y)調色板。在不同類型的色盲中,我們最初的調色板導致了太多的重復。所以,我們繼續實驗。我們想平衡給用戶最大可能的顏色集,也可以區分所有色盲類型。我們最終從a11y調色板中選擇了12種顏色,調整它們以最大化區分,并添加了黑色和白色。
從來沒有人想到為化學蒸汽沉積(chemical vapor deposition)設計。在最好的情況下,可能會有一個切換選項,可用的顏色較少。
社區成員/色盲團體,Reddit測試色盲友好調色板使用色盲模擬器只能做這么多。雖然這是一個很好的起點,但是我們需要用真實的用戶來測試這個面板