中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)站設(shè)計之如何提升色盲用戶的體驗

2022-06-30    分類: 網(wǎng)站設(shè)計

本文中,創(chuàng)新互聯(lián)提出13條主張來改進色盲用戶的體會——這些對視覺正常的用戶同樣有利。

色盲是什么?

有很多品種的色盲,但終究都能分紅這幾類:無法明晰辨認色彩、色彩稠濁、無法差異特定色彩。

這些疑問在特定環(huán)境中愈發(fā)嚴峻,比方閱覽網(wǎng)站。這包含低分辨率顯現(xiàn)器、差勁的光線、小移動端屏幕、遠離大屏幕電視而坐。

只是依托色彩樹立可讀性和可見性,會讓網(wǎng)站難以運用,終究影響了閱覽和出售。

雖然下面這些主張并不全部,它們的確涵蓋了色盲用戶閱覽網(wǎng)站時遇到的首要疑問。

1. 文字可讀性

要保證文字簡單閱覽,它就應(yīng)當(dāng)遵從可讀性規(guī)范,結(jié)合字色、布景色和字號:

“WCAG 2.0的AA級規(guī)范懇求,一般字號的比照率要到達4.5:1,大字號的比照率要到達3:1(大字號是指14磅的加粗或加大文字,或許18磅及以上字號)”

——WebAim色彩比照查看器

下面列舉了一些色彩和字號組合,有的到達規(guī)范,有的沒有:

這表明了色彩和字號的組合構(gòu)成了如何的反差比照。

2. 布景圖上的文字

布景圖上的文字處理起來很奇妙,由于圖像局部或整張圖都也許無法與文字構(gòu)成滿足的反差。


文字沒有蒙層,直接掩蓋在圖像上。(圖像來歷:Jay Wennington) (View large version)

下降布景透明度能夠增強反差,讓文字更簡單閱覽。


文字掩蓋在帶有蒙層的圖像上。(查看大圖)

或許,你能夠給文字挑選一個可靠的色彩,或許加上投影,別的任何契合品牌規(guī)范的辦法都行。

3. 色彩過濾器、挑選器和色盤

下圖展現(xiàn)了Amazon的色彩過濾器,能夠看到一般人與紅綠色盲(分不清赤色與綠色)的視覺效果。假如沒有描繪文字,就不也許從這么多選項中作出差異。

不帶標簽的色彩過濾器,在紅綠色盲看來是徹底沒法用的。

在用戶鼠標懸停時,Amazon展現(xiàn)了描繪文字,但移動端上沒有這一操作。

鄙人圖中,Gap在每個色彩周圍加上了文字標簽,疑問得以處理。


帶有標簽的色彩挑選器,紅綠色盲運用起來很輕松。

這剛好也對正常視覺的人有利。例如,黑色與藏藍在屏幕上很難差異。文字標簽?zāi)茏屓嗣庥诓孪搿?/p>

4. 缺少有用描繪的照片

下圖展現(xiàn)了SuperDry網(wǎng)站上售賣的一件T恤。它的描繪是“樹葉紋路”,這太模棱兩可了,由于樹葉能夠有很多色彩(綠色、黃色、棕色等等)。

色盲難以了解這件SuperDry T恤是什么色彩。

Jaspe(本來應(yīng)當(dāng)是“jaspé”)是指隨機的斑駁或紋路,所以應(yīng)當(dāng)加上這么的特別闡明:“灰綠色樹葉紋路”。

5. 連接的辨識度

連接應(yīng)當(dāng)簡單被發(fā)現(xiàn),不用依靠色彩。下圖模擬了全色色盲(看不到色彩)閱覽UK Government Digital Service (GDS)網(wǎng)站所見到的畫面。很多連接都難以發(fā)覺。例如你有沒有注意到“GDS team, User research”(標題下方)是連接?


GDS博客在全色色盲眼里的姿態(tài)。(查看大圖)

要發(fā)現(xiàn)一個連接,用戶只能鼠標懸停,等候指針成為一個手形。在移動端,他們只能點按文字,期望它觸發(fā)頁面懇求。

上面帶有圖標的連接更簡單發(fā)覺。而那些沒有圖標的,加一條下劃線是個好辦法,GDS在文章正文有些恰是這么做的:

帶下劃線的連接更簡單被全色色盲發(fā)覺。

6. 色彩組合

在實際國際,你無法操控色彩的組合排列:赤色的蘋果也許掉進綠色的草叢里??墒?,咱們能夠操控頁面規(guī)劃中運用的色彩。下面這些色彩組合應(yīng)當(dāng)盡量防止:

綠色/赤色

綠色/棕色

藍色/紫色

綠色/藍色

淺綠色/黃色

藍色/灰色

綠色/灰色

綠色/黑色

色盲眼里的色彩組合。

7. 表單的默許文字

沒有標簽,只用框內(nèi)的默許文字提示,這是個疑問,由于默許文字一般缺少滿足的比照度。Apple的注冊表單就有這么的疑問,請看下圖:


Apple的注冊表單運用了不帶標簽的文字提示。(查看大圖)

不主張增強比照度,由于那樣就難以差異默許提示和用戶輸入的文字。

好仍是運用標簽——畢竟是好實習(xí)——比照要明顯,下圖中的Made.com恰是這么做的:

Made.com運用了比照度激烈的標簽。(查看大圖)

8. 主按鈕

一般狀況下,只有主按鈕運用色彩來體現(xiàn),Argos在它的登錄頁面即是這么做的:


Argos的登錄界面依托色彩來著重主按鈕。(查看大圖)

本來應(yīng)當(dāng)思考經(jīng)過尺度、方位、粗細、比照度、邊框、圖標和任何別的手法來輔佐——只要在品牌指南的領(lǐng)域內(nèi)。例如,Kidly就運用了尺度、色彩和圖標來凸顯:


Kidly用了尺度、色彩和圖標來著重主按鈕。(查看大圖)

9. 正告音訊

成功和過錯的音訊一般各自選用綠色和赤色。大都色盲沒有全色色盲的煩惱,自然能夠把不一樣的信息與不一樣色彩聯(lián)系起來??墒?,運用比方“成功”這么的前置案牘,或許用我喜愛的圖標方式,就能更快更輕松地閱覽,就像下圖這么:


帶有前置案牘和圖標的正告音訊。(查看大圖)

10. 表單必填項

Denoting這種用色彩表明的必填項有疑問,由于有些人也許看不出差異。


Denoting的必填項用色彩表明。(查看大圖)

本來應(yīng)當(dāng)思考這些辦法:

給必填項加上星號

非常好的辦法,給必填項加上“必填”

假如也許的話,把一切選填項都去掉

11. 圖表

色彩經(jīng)常用來差異圖表中不一樣的目標。下圖顯現(xiàn)了不一樣視覺才干的人看到的姿態(tài)。右邊的圖表對色盲做了優(yōu)化。

正常視覺者眼里的圖表

紅綠色盲眼里的圖表

全色色盲眼里的圖表

運用紋路,并且盡也許加上每個目標的文字,能讓圖表更易了解。假如文字不合適——一般是小尺度餅狀圖的狀況——用一個字母就滿足了。

12. 縮放

閱覽器有一項易用功用,讓人根據(jù)需求盡也許擴大頁面。這點能提高易讀性,在移動設(shè)備上特別有協(xié)助。

意外的是,Viewport Meta標簽?zāi)軌蚪每s放,這也是個疑問。比方,關(guān)于色彩比照度而言,字號也許過小了——擴大則能有用增大字號,讓文字更易閱覽。所以不要禁用網(wǎng)站的縮放。

13. 相對字號

和前一點類似,閱覽器供給了擴大字號的功用(并不是擴大全部頁面),也是為了提高可讀性??墒?,假如字號被指定為絕對單位時,例如像素,有些閱覽器會禁用這個功用。應(yīng)當(dāng)運用相對字號單位,例如em,保證一切閱覽器都能供給這個功用。

東西

有很多東西能協(xié)助你為色盲群體規(guī)劃:

Check My Colours:假如你有現(xiàn)成的網(wǎng)站,能夠輸入URL取得反應(yīng),通知你哪里需求改進。

WebAim的色彩比照度查看器:供給兩種色彩,看它們是不是契合易用性規(guī)范。

I Want To See Like The ColorBlind:在Chrome中對頁面使用色盲形式濾鏡。

Color Oracle:Windows、Mac和Linux平臺的一款色盲模擬器,展現(xiàn)多見的視覺妨礙人士看到的畫面。

定論

本文中的主張并不全部,它們并非要使用到每個場合中??墒牵鼈兊拇_涵蓋了色盲用戶閱覽網(wǎng)站時遇到的首要疑問。

更重要的是要消化這些準則,這么才干將它們?nèi)谌氲侥愕囊?guī)劃中。終究,網(wǎng)站設(shè)計頁面并不是只是為了好看——而是要易于每個人運用,包含色盲人士。

網(wǎng)站題目:網(wǎng)站設(shè)計之如何提升色盲用戶的體驗
分享地址:http://m.rwnh.cn/news33/173333.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站設(shè)計

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司
乐陵市| 永寿县| 双鸭山市| 东阿县| 玉林市| 通许县| 德清县| 太仆寺旗| 确山县| 蒙自县| 嘉祥县| 阜平县| 信阳市| 辉县市| 奈曼旗| 南通市| 汉源县| 福贡县| 台东县| 容城县| 韩城市| 邻水| 辉县市| 扶沟县| 上蔡县| 巨鹿县| 讷河市| 绥德县| 绿春县| 剑川县| 西畴县| 开封县| 大同县| 惠州市| 桃江县| 亳州市| 神农架林区| 湖州市| 长阳| 仙游县| 玛沁县|