1. <strong id="7actg"></strong>
    2. <table id="7actg"></table>

    3. <address id="7actg"></address>
      <address id="7actg"></address>
      1. <object id="7actg"><tt id="7actg"></tt></object>

        以人為本,為顏色障礙用戶設(shè)計(jì)

        共 3802字,需瀏覽 8分鐘

         ·

        2022-08-03 12:11

        點(diǎn)擊 ▲ 三分設(shè) 關(guān)注,和 6 萬(wàn)設(shè)計(jì)師一起學(xué)習(xí)進(jìn)步

        譯客 2019 · 第 28 



        推薦 | 為顏色障礙者(色盲)設(shè)計(jì),其實(shí)就是遵循以人為本的設(shè)計(jì)原則。顏色障礙者(色盲)是一群特殊的群體,他們對(duì)某一種或多種顏色有視覺(jué)障礙,但很多設(shè)計(jì)中卻沒(méi)有考慮到顏色障礙者(色盲)的需求和困難。本篇文章,作者告訴我們“什么是顏色障礙(色盲)”“如何在設(shè)計(jì)時(shí)考慮顏色障礙者(色盲)”和“為顏色障礙者(色盲)設(shè)計(jì)的一些小技巧”。通過(guò)閱讀這篇文章,了解設(shè)計(jì)應(yīng)如何考慮顏色障礙(色盲)用戶體驗(yàn)。
               色盲色弱測(cè)試圖

        我們觀察顏色的方式是一樣的嗎?請(qǐng)看上面這張圖,如果你看到了數(shù)字 21,或者沒(méi)看到任何數(shù)字,那么你可能有某種顏色識(shí)別障礙(色盲)(如果你有全彩視力,你應(yīng)該看到數(shù)字 “74” )。

        據(jù)估計(jì),每 12 名男性中有 1 名(8%)患有某種形式的色盲,而女性每 200 名中只有 1 名。在英國(guó),這意味著有大約 270 萬(wàn)人受影響,這是相當(dāng)大的一部分人口,但我們?cè)谠O(shè)計(jì)網(wǎng)站和用戶界面時(shí)經(jīng)常遺忘他們。

        在我們團(tuán)隊(duì)(Si digital)所做的項(xiàng)目中,我們會(huì)考慮每個(gè)項(xiàng)目的用戶體驗(yàn)和可訪問(wèn)性。我們使用各種工具和技巧來(lái)幫助我們理解視覺(jué)障礙,并使用這些知識(shí)讓我們的網(wǎng)站更加實(shí)用,而且考慮色盲用戶的感受使其不會(huì)沮喪。


        什么是顏色識(shí)別障礙(色盲)?

        顏色識(shí)別障礙(色盲)的類型很多,嚴(yán)重程度各不相同。大眾普遍誤以為顏色識(shí)別障礙(色盲)的人只能看見(jiàn)黑色和白色。即使這可能是真的,單色性(也稱全色盲)是非常罕見(jiàn)的,預(yù)估每 3.3 萬(wàn)人人中有1名受影響。這種嚴(yán)重的視覺(jué)障礙使人們看東西都呈灰色調(diào)。要記住一個(gè)重要的因素,對(duì)于大多數(shù)顏色識(shí)別障礙(色盲)患者來(lái)說(shuō),區(qū)分不同顏色并不困難,真正會(huì)導(dǎo)致問(wèn)題的是分辨出相似顏色的明暗程度之間的差異。
              
        正常視力與單色盲、紅色盲、綠色盲

        而更常見(jiàn)的情況是紅綠色識(shí)別障礙(色盲),分為兩組?;加屑t色弱視(Protanomaly)的人對(duì)紅光的敏感度較低。紅色、橙色和黃色色調(diào)會(huì)趨向于綠色,并且看起來(lái)不那么飽和?;加芯G色弱視(Deuteranomaly)的人對(duì)綠光的敏感度較低,并且很難區(qū)分藍(lán)色、黃色、紫色,以及紅色系、藍(lán)色系和綠色系。


        野外的顏色

        長(zhǎng)期以來(lái),顏色識(shí)別障礙(色盲)所帶來(lái)的困難不僅在網(wǎng)站設(shè)計(jì)中被忽略,而且在電視、電影,特別是電子游戲中也常常被忽略了。有很多用戶無(wú)法玩游戲,或者因?yàn)榛加蓄伾R(shí)別障礙(色盲)的人無(wú)法辨認(rèn)重要的UI元素而導(dǎo)致游戲難以繼續(xù)。以游戲《巫師3》為例。
              當(dāng)切換成紅綠色盲視角的時(shí)候,看看地面上的紅色標(biāo)記幾乎看不見(jiàn)了

        這款游戲的特點(diǎn)是能夠使用增強(qiáng)感官的功能來(lái)追蹤氣味、追蹤腳印和尋找線索。然而,游戲開(kāi)發(fā)者選擇深紅色作為標(biāo)記,所以有很多用戶抱怨他們看不清楚這些標(biāo)記(或者根本看不到)。簡(jiǎn)單的顏色更改或更改顏色的選項(xiàng),可能會(huì)讓游戲變得更加容易上手。

        由于視覺(jué)障礙人口比例很高,顏色識(shí)別障礙(色盲)用戶是一個(gè)需要認(rèn)真對(duì)待的問(wèn)題。如果您的網(wǎng)頁(yè)或應(yīng)用程序沒(méi)有經(jīng)過(guò)特別的優(yōu)化,您可能會(huì)失去大量用戶。例如,如果用戶由于色彩沖突和缺乏對(duì)比而不能區(qū)分一系列的圖標(biāo),用戶就會(huì)感到沮喪并找其他網(wǎng)頁(yè)或應(yīng)用服務(wù)來(lái)取代您的網(wǎng)頁(yè)。如果這成為每一個(gè)患顏色識(shí)別障礙(色盲)的潛在客戶的經(jīng)歷,您將會(huì)失去 8% 的潛在銷售額——對(duì)于擁有1千萬(wàn)英鎊收入的公司而言,該公司會(huì)損失 80 萬(wàn)英鎊的巨額銷售額。


        如何在設(shè)計(jì)時(shí)
        考慮顏色識(shí)別障礙者(色盲)

        即使顏色識(shí)別障礙(色盲)會(huì)給使用者造成很大的困擾,但其實(shí)很容易克服。如果你意識(shí)到了這個(gè)問(wèn)題,那么你就成功了一半。

        1、使用對(duì)比色
              對(duì)比色的應(yīng)用

        即使是患有單色識(shí)別障礙(色盲)的人仍然擁有對(duì)比感——明暗之間的比例差異。為確保您的網(wǎng)站使有視覺(jué)障礙的人更有可讀性的,您必須確保您的內(nèi)容和背景形成鮮明對(duì)比。例如,白色背景上的黑色文本具有較高的對(duì)比度和可讀性,而白色背景上的黃色文本則對(duì)比度較低,即使是對(duì)有全彩視力的人來(lái)說(shuō)也一樣幾乎不可讀!

        2.使用不同的明度而不是多種顏色
                同一色彩不同明度的應(yīng)用



        單色配色方案(不要與全色盲、單色盲混淆)使用一種顏色的不同明度效果,好過(guò)使用多種不同顏色。這將有效地減少用戶與色相相關(guān)的挫敗感,也是在設(shè)計(jì)中體現(xiàn)色彩對(duì)比的好方法。

        單色配色方案不一定是黑色和白色,而是使用不同明度的藍(lán)色,我們?cè)谕瓿煽勺x性的前提下,也實(shí)現(xiàn)了視覺(jué)上的愉悅感。

        3.在設(shè)計(jì)中親身體驗(yàn)色盲
               使用設(shè)計(jì)軟件切換不同類型的色盲模式


        Adobe Photoshop 中的色盲模擬
        很多免費(fèi)工具可以模擬色盲的所處環(huán)境,讓您了解顏色識(shí)別障礙(色盲)的人將如何看待外部環(huán)境,以確保您的用戶界面按您的預(yù)期工作。Photoshop 有自己的(稍微隱藏起來(lái)的)校驗(yàn)設(shè)置功能,只需進(jìn)入查看>校驗(yàn)設(shè)置,并且您可以選擇紅色盲和綠色盲兩種情況。完成測(cè)試后,只需要切換回監(jiān)測(cè) RGB 即可。

        Sketch 中的顏色識(shí)別障礙者(色盲)模擬
        不幸的是,Sketch 色彩測(cè)試沒(méi)有原生支持,但各種插件能也能讓您進(jìn)行色彩校驗(yàn)。我們推薦 Color Oracle,這是一個(gè)免費(fèi)插件,可以實(shí)時(shí)顯示具有常見(jiàn)色覺(jué)障礙的人看到的事物。
               
        Color Oracle,圖片來(lái)源:http://colororacle.org/index.html

        瀏覽器中的色盲模擬 
        我們用谷歌瀏覽器添加一個(gè)被稱為“I want to see like the colour blind”(我希望看到顏色識(shí)別障礙者(色盲)模式)的插件,這會(huì)讓您在實(shí)時(shí)網(wǎng)站或測(cè)試環(huán)境下模擬色盲。這對(duì)于色彩和對(duì)比度測(cè)試是一個(gè)便利的工具,因?yàn)樗峁┌暾亩嘁曈X(jué)模式,包括單顏色識(shí)別障礙者(色盲)等。

        4、仔細(xì)選擇色彩組合

        不幸的是,作為設(shè)計(jì)師,我們?cè)谠O(shè)計(jì)中使用的顏色并不總由我們自己決定,有時(shí)候我們受到品牌規(guī)范的限制。

        但在可能的情況下,明智的做法是在建立品牌之前選擇和測(cè)試你的主色和次色。下面的圖表列出了您應(yīng)該避免使用的色彩組合。
               
        避免使用色彩組合圖

        如果有疑問(wèn),請(qǐng)避免使用這些配色,去選擇簡(jiǎn)單的黑色/白色,強(qiáng)色彩對(duì)比的配色方案!

        5、用紋理代替顏色

        在設(shè)計(jì)圖形和圖表等內(nèi)容時(shí),可以考慮使用紋理或視覺(jué)圖案來(lái)幫助區(qū)分兩種顏色。

        例如,下面的餅狀圖。紅色盲用戶很可能由于顏色相似而難以區(qū)分不同區(qū)域。然而,如果我們添加一些簡(jiǎn)單的紋理或圖案,圖表的可閱讀性會(huì)提高 100%。
               
        添加紋理和圖案,可提高圖表閱讀性

        6、避免單獨(dú)使用顏色作為提示

        在設(shè)計(jì)表單和復(fù)雜界面等元素時(shí),不應(yīng)僅使用顏色作為提示。以下面的圖表為例,左邊的圖表僅使用顏色作為提示導(dǎo)致錯(cuò)誤操作。

        全彩視力的人能看到郵箱字段已變成紅色,表示存在某種錯(cuò)誤。而對(duì)于綠色識(shí)別障礙者(色盲)來(lái)說(shuō),正確字段的綠色和錯(cuò)誤字段的紅色就無(wú)法區(qū)分。解決此問(wèn)題的最好的方法是使用某種圖標(biāo)、符號(hào)或標(biāo)簽去提示錯(cuò)誤,就如同下圖所示。
               
        是否使用符號(hào)作為提示標(biāo)志


        結(jié)論

        在這學(xué)到的最重要的一堂課是:除非你確保顏色識(shí)別障礙者(色盲)能夠區(qū)分你所選擇的顏色,否則你不應(yīng)使用單獨(dú)的顏色提示表示重要的東西。如果可以,使用圖標(biāo)、文本、形狀、紋理或者其他視覺(jué)提示以及強(qiáng)對(duì)比色來(lái)向用戶傳遞信息。

        有許多方法可以測(cè)試可訪問(wèn)性,然而這些工具并不總是完全準(zhǔn)確——最終看設(shè)計(jì)是否適合的最佳方法是執(zhí)行真正的用戶體驗(yàn)測(cè)試。你可能知道某人是顏色識(shí)別障礙者(色盲),為什么不讓他們來(lái)檢查你的設(shè)計(jì)呢?


        原文標(biāo)題:Designing for Colour Blindness
        原創(chuàng)作者:Jack Innes
        原文鏈接:https://sidigital.co/blog/designing-for-colour-blindness
        翻譯作者:小黃花呀
        授權(quán)獲?。?span style="letter-spacing: 0pt;">張聿彤
        文章審核:王翎旭
        文章編輯:王翎旭
        該譯文并非完整原文,內(nèi)容已做部分調(diào)整。如在閱讀過(guò)程中發(fā)現(xiàn)錯(cuò)誤與疏漏之處,歡迎不吝指出。如需轉(zhuǎn)載,請(qǐng)注明來(lái)自 三分設(shè) 



        我們一起聊設(shè)計(jì)
        微信社群:讀者群/城市群/內(nèi)推群/微信讀書群
        內(nèi)部成員群:專欄作者群/新媒體群
        歡迎添加 ??  星標(biāo),獲取每日好文推薦,每天早上 8 點(diǎn),準(zhǔn)時(shí)充電。加入設(shè)計(jì)微信交流群 三分設(shè)讀者 5 群,期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計(jì)師一起成長(zhǎng), 添加 益達(dá) 微信號(hào)【 Lil_Bug or【 Red-boy2020,備注【 三分設(shè)讀者 】加入讀者群!
        分享設(shè)計(jì)心得,定期直播,零距離連麥,答疑解惑




        點(diǎn)開(kāi)『閱讀原文』,歡迎你的加入星球

        瀏覽 25
        點(diǎn)贊
        評(píng)論
        收藏
        分享

        手機(jī)掃一掃分享

        分享
        舉報(bào)
        評(píng)論
        圖片
        表情
        推薦
        點(diǎn)贊
        評(píng)論
        收藏
        分享

        手機(jī)掃一掃分享

        分享
        舉報(bào)
        1. <strong id="7actg"></strong>
        2. <table id="7actg"></table>

        3. <address id="7actg"></address>
          <address id="7actg"></address>
          1. <object id="7actg"><tt id="7actg"></tt></object>
            黄色小视频在线播放 | 女女强制h百合调教gl在线看 | 免费又黄又爽又猛大片午夜 | 亚洲天堂无码高清 | 做爱视频成人的 | 一区二区三区四区无码视频 | 国产污视频在线观看 | 亚洲国产精品国自产拍张津瑜 | 精品欧美一区二区三区久久久 | 欧美久久免费 |