2022-06-30 分類(lèi): 網(wǎng)站設(shè)計(jì)
本文中,創(chuàng)新互聯(lián)提出13條主張來(lái)改進(jìn)色盲用戶的體會(huì)——這些對(duì)視覺(jué)正常的用戶同樣有利。
有很多品種的色盲,但終究都能分紅這幾類(lèi):無(wú)法明晰辨認(rèn)色彩、色彩稠濁、無(wú)法差異特定色彩。
這些疑問(wèn)在特定環(huán)境中愈發(fā)嚴(yán)峻,比方閱覽網(wǎng)站。這包含低分辨率顯現(xiàn)器、差勁的光線、小移動(dòng)端屏幕、遠(yuǎn)離大屏幕電視而坐。
只是依托色彩樹(shù)立可讀性和可見(jiàn)性,會(huì)讓網(wǎng)站難以運(yùn)用,終究影響了閱覽和出售。
雖然下面這些主張并不全部,它們的確涵蓋了色盲用戶閱覽網(wǎng)站時(shí)遇到的首要疑問(wèn)。
要保證文字簡(jiǎn)單閱覽,它就應(yīng)當(dāng)遵從可讀性規(guī)范,結(jié)合字色、布景色和字號(hào):
“WCAG 2.0的AA級(jí)規(guī)范懇求,一般字號(hào)的比照率要到達(dá)4.5:1,大字號(hào)的比照率要到達(dá)3:1(大字號(hào)是指14磅的加粗或加大文字,或許18磅及以上字號(hào))”
——WebAim色彩比照查看器
下面列舉了一些色彩和字號(hào)組合,有的到達(dá)規(guī)范,有的沒(méi)有:
這表明了色彩和字號(hào)的組合構(gòu)成了如何的反差比照。
布景圖上的文字處理起來(lái)很奇妙,由于圖像局部或整張圖都也許無(wú)法與文字構(gòu)成滿足的反差。
文字沒(méi)有蒙層,直接掩蓋在圖像上。(圖像來(lái)歷:Jay Wennington) (View large version)
下降布景透明度能夠增強(qiáng)反差,讓文字更簡(jiǎn)單閱覽。
文字掩蓋在帶有蒙層的圖像上。(查看大圖)
或許,你能夠給文字挑選一個(gè)可靠的色彩,或許加上投影,別的任何契合品牌規(guī)范的辦法都行。
下圖展現(xiàn)了Amazon的色彩過(guò)濾器,能夠看到一般人與紅綠色盲(分不清赤色與綠色)的視覺(jué)效果。假如沒(méi)有描繪文字,就不也許從這么多選項(xiàng)中作出差異。
不帶標(biāo)簽的色彩過(guò)濾器,在紅綠色盲看來(lái)是徹底沒(méi)法用的。
在用戶鼠標(biāo)懸停時(shí),Amazon展現(xiàn)了描繪文字,但移動(dòng)端上沒(méi)有這一操作。
鄙人圖中,Gap在每個(gè)色彩周?chē)由狭宋淖謽?biāo)簽,疑問(wèn)得以處理。
帶有標(biāo)簽的色彩挑選器,紅綠色盲運(yùn)用起來(lái)很輕松。
這剛好也對(duì)正常視覺(jué)的人有利。例如,黑色與藏藍(lán)在屏幕上很難差異。文字標(biāo)簽?zāi)茏屓嗣庥诓孪搿?/p>
下圖展現(xiàn)了SuperDry網(wǎng)站上售賣(mài)的一件T恤。它的描繪是“樹(shù)葉紋路”,這太模棱兩可了,由于樹(shù)葉能夠有很多色彩(綠色、黃色、棕色等等)。
色盲難以了解這件SuperDry T恤是什么色彩。
Jaspe(本來(lái)應(yīng)當(dāng)是“jaspé”)是指隨機(jī)的斑駁或紋路,所以應(yīng)當(dāng)加上這么的特別闡明:“灰綠色樹(shù)葉紋路”。
連接應(yīng)當(dāng)簡(jiǎn)單被發(fā)現(xiàn),不用依靠色彩。下圖模擬了全色色盲(看不到色彩)閱覽UK Government Digital Service (GDS)網(wǎng)站所見(jiàn)到的畫(huà)面。很多連接都難以發(fā)覺(jué)。例如你有沒(méi)有注意到“GDS team, User research”(標(biāo)題下方)是連接?
GDS博客在全色色盲眼里的姿態(tài)。(查看大圖)
要發(fā)現(xiàn)一個(gè)連接,用戶只能鼠標(biāo)懸停,等候指針成為一個(gè)手形。在移動(dòng)端,他們只能點(diǎn)按文字,期望它觸發(fā)頁(yè)面懇求。
上面帶有圖標(biāo)的連接更簡(jiǎn)單發(fā)覺(jué)。而那些沒(méi)有圖標(biāo)的,加一條下劃線是個(gè)好辦法,GDS在文章正文有些恰是這么做的:
帶下劃線的連接更簡(jiǎn)單被全色色盲發(fā)覺(jué)。
在實(shí)際國(guó)際,你無(wú)法操控色彩的組合排列:赤色的蘋(píng)果也許掉進(jìn)綠色的草叢里。可是,咱們能夠操控頁(yè)面規(guī)劃中運(yùn)用的色彩。下面這些色彩組合應(yīng)當(dāng)盡量防止:
綠色/赤色
綠色/棕色
藍(lán)色/紫色
綠色/藍(lán)色
淺綠色/黃色
藍(lán)色/灰色
綠色/灰色
綠色/黑色
色盲眼里的色彩組合。
沒(méi)有標(biāo)簽,只用框內(nèi)的默許文字提示,這是個(gè)疑問(wèn),由于默許文字一般缺少滿足的比照度。Apple的注冊(cè)表單就有這么的疑問(wèn),請(qǐng)看下圖:
Apple的注冊(cè)表單運(yùn)用了不帶標(biāo)簽的文字提示。(查看大圖)
不主張?jiān)鰪?qiáng)比照度,由于那樣就難以差異默許提示和用戶輸入的文字。
好仍是運(yùn)用標(biāo)簽——畢竟是好實(shí)習(xí)——比照要明顯,下圖中的Made.com恰是這么做的:
Made.com運(yùn)用了比照度激烈的標(biāo)簽。(查看大圖)
一般狀況下,只有主按鈕運(yùn)用色彩來(lái)體現(xiàn),Argos在它的登錄頁(yè)面即是這么做的:
Argos的登錄界面依托色彩來(lái)著重主按鈕。(查看大圖)
本來(lái)應(yīng)當(dāng)思考經(jīng)過(guò)尺度、方位、粗細(xì)、比照度、邊框、圖標(biāo)和任何別的手法來(lái)輔佐——只要在品牌指南的領(lǐng)域內(nèi)。例如,Kidly就運(yùn)用了尺度、色彩和圖標(biāo)來(lái)凸顯:
Kidly用了尺度、色彩和圖標(biāo)來(lái)著重主按鈕。(查看大圖)
成功和過(guò)錯(cuò)的音訊一般各自選用綠色和赤色。大都色盲沒(méi)有全色色盲的煩惱,自然能夠把不一樣的信息與不一樣色彩聯(lián)系起來(lái)。可是,運(yùn)用比方“成功”這么的前置案牘,或許用我喜愛(ài)的圖標(biāo)方式,就能更快更輕松地閱覽,就像下圖這么:
帶有前置案牘和圖標(biāo)的正告音訊。(查看大圖)
Denoting這種用色彩表明的必填項(xiàng)有疑問(wèn),由于有些人也許看不出差異。
Denoting的必填項(xiàng)用色彩表明。(查看大圖)
本來(lái)應(yīng)當(dāng)思考這些辦法:
給必填項(xiàng)加上星號(hào)
非常好的辦法,給必填項(xiàng)加上“必填”
假如也許的話,把一切選填項(xiàng)都去掉
色彩經(jīng)常用來(lái)差異圖表中不一樣的目標(biāo)。下圖顯現(xiàn)了不一樣視覺(jué)才干的人看到的姿態(tài)。右邊的圖表對(duì)色盲做了優(yōu)化。
正常視覺(jué)者眼里的圖表
紅綠色盲眼里的圖表
全色色盲眼里的圖表
運(yùn)用紋路,并且盡也許加上每個(gè)目標(biāo)的文字,能讓圖表更易了解。假如文字不合適——一般是小尺度餅狀圖的狀況——用一個(gè)字母就滿足了。
閱覽器有一項(xiàng)易用功用,讓人根據(jù)需求盡也許擴(kuò)大頁(yè)面。這點(diǎn)能提高易讀性,在移動(dòng)設(shè)備上特別有協(xié)助。
意外的是,Viewport Meta標(biāo)簽?zāi)軌蚪每s放,這也是個(gè)疑問(wèn)。比方,關(guān)于色彩比照度而言,字號(hào)也許過(guò)小了——擴(kuò)大則能有用增大字號(hào),讓文字更易閱覽。所以不要禁用網(wǎng)站的縮放。
和前一點(diǎn)類(lèi)似,閱覽器供給了擴(kuò)大字號(hào)的功用(并不是擴(kuò)大全部頁(yè)面),也是為了提高可讀性。可是,假如字號(hào)被指定為絕對(duì)單位時(shí),例如像素,有些閱覽器會(huì)禁用這個(gè)功用。應(yīng)當(dāng)運(yùn)用相對(duì)字號(hào)單位,例如em,保證一切閱覽器都能供給這個(gè)功用。
有很多東西能協(xié)助你為色盲群體規(guī)劃:
Check My Colours:假如你有現(xiàn)成的網(wǎng)站,能夠輸入U(xiǎn)RL取得反應(yīng),通知你哪里需求改進(jìn)。
WebAim的色彩比照度查看器:供給兩種色彩,看它們是不是契合易用性規(guī)范。
I Want To See Like The ColorBlind:在Chrome中對(duì)頁(yè)面使用色盲形式濾鏡。
Color Oracle:Windows、Mac和Linux平臺(tái)的一款色盲模擬器,展現(xiàn)多見(jiàn)的視覺(jué)妨礙人士看到的畫(huà)面。
本文中的主張并不全部,它們并非要使用到每個(gè)場(chǎng)合中。可是,它們的確涵蓋了色盲用戶閱覽網(wǎng)站時(shí)遇到的首要疑問(wèn)。
更重要的是要消化這些準(zhǔn)則,這么才干將它們?nèi)谌氲侥愕囊?guī)劃中。終究,網(wǎng)站設(shè)計(jì)頁(yè)面并不是只是為了好看——而是要易于每個(gè)人運(yùn)用,包含色盲人士。
網(wǎng)站題目:網(wǎng)站設(shè)計(jì)之如何提升色盲用戶的體驗(yàn)
分享地址:http://m.newbst.com/news33/173333.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容