點選關注 <b>異步圖書</b>，置頂公衆号
每天與你分享 IT好書 技術幹貨 職場知識
作為設計師，我們更傾向于設計是以解決問題為基礎的。盡管我們會因為博物館沒有規劃輪椅坡道而毫不猶豫地抗議，但是對界面上的一些明顯缺陷卻視而不見，尤其是糟糕的視覺設計，可能會成為良好使用者體驗的障礙。盡管一些人長期以來一直緻力于幫助殘障人士使用者适應這種情況，但我們已經達成共識，廣大使用者期待針對使用者需求進行優化的産品。
世界衛生組織（WHO）統計，全球人口中視力受損的為4%，弱視為4％，盲人為0.6％。 如果你的産品忽視了無障礙設計，将有超過5億人無法使用你的産品。 2017年，無障礙環境迎來了關鍵的轉折點。這部分歸功于訴訟-自2015年以來，已有超過240家美國企業因為網站的可通路性被起訴（華爾街日報，付費專區），多元化和包容性已成為許多大公司優先考慮的事情。如果公司希望産品為廣泛的閱聽人提供服務，那麼作為一名設計師，你應該關心你的使用者，在設計中有同理心和人性化。
可視化界面是深入無障礙設計的一個切入點。 本文中，我們将讨論一些最常見的視覺障礙（尤其是色盲），着重讨論如何微調工作流程和産品界面，以保證所有使用者都能正常使用。
一個無障礙的産品不僅僅造福于8.6％的有視覺障礙的使用者。許多網站和應用程式過于複雜，每個人都會或多或少地遇到一些界面問題：當我們疲憊的時候；當我們笨拙地嘗試邊走路邊閱讀手機資訊的時候；當我們晚上眯着眼睛看螢幕的時候；當我們一手拿着購物籃，一手拿着手機的時候。
即使是具有标準視力的大部分人對色彩也有不同的感覺方式，是以，無障礙性不僅僅關乎視力受損的人群。 每個人都有身體和精神上的局限，我們隻需在工作中想得更周到一些就可以有效地幫助他們。然而無障礙設計有時意味着在最佳實踐和無障礙性之間尋求平衡，創造一個兩者兼顧的産品。
為了創造一個無障礙的産品，我們首先需要了解視力受損的人如何看事物。
根據世界衛生組織（WHO）統計，屈光不正（近視、遠視、散光和老視）占視力受損總人數的43％，白内障占33％，青光眼占2％，僅色盲一項就占全球總人數的4.5％，嚴重影響了使用者對設計的體驗。
讓我們來看看這些問題是如何展現的，如圖1所示。
圖1 對某些色盲使用者而言，紅綠色的使用者界面資訊傳達不佳
主要的色盲類型有以下3種。
（1）單色視覺（全色盲）
雖然并不常見，但是全色盲的人看不到任何顔色。例如，那些隻依靠細微顔色漸變來區分元素的界面的人，對于他們來說是非常難以識别的，操作按鈕可能都很難找到。
（2）雙色視覺（雙色視覺）
對于隻能看見兩種顔色的人來說，色彩缤紛的調色闆看上去是由同一種顔色的不同色調組成的。 如果APP通過顔色來表示不同的标簽或頻道，那麼，這類使用者不一定能夠從該設計中受益。
（3）異常三色視覺（色覺異常）
色覺異常的人，是指眼睛裡3種視錐細胞中的一種出現了不同程度的損傷。色覺異常涵蓋的範圍很廣，輕者可能色覺接近正常，嚴重的話也可能是雙色視覺。在你的logo或界面設計中，如果顔色是主要因素，那麼有異常三色視覺的使用者可能會欣賞不了，尤其是當你的按鈕和其他界面元素用了相同的字型和圖示時，使用者體驗會更差。
問題的關鍵是你不能假設使用者都會看到同樣的事物。 那麼，我們如何優化設計來滿足每個人的體驗呢？
顔色不僅在很大程度上決定了界面外觀，而且在組織内容、定義層次結構、傳達界面行為和流程中也起到了重要作用。 這是一個強大的設計工具，但為了有效地使用它，你需要了解其功能和限制。下面我們來讨論一些關鍵的規則。
• 在選擇和使用顔色時，應考慮色盲使用者，我們在後面的内容中會展示。
• 避免僅用顔色來傳達重要資訊——使用圖示，最好是文本來闡釋顔色資訊。
• 確定文字連結從周圍的内容中脫穎而出。
由于視覺障礙使用者最常見的困難是識别顔色的特定色調，是以應該更多地利用對比度來區分元素，使其清晰易讀，如圖2所示。
圖2 深色和淺色在一起的對比度較高
圖3為高對比度顔色提供了基本的指南。下半部分的深色與上半部分的淺色形成鮮明對比，避免使用下半部分的較淺顔色和上半部分的較深顔色的對比。
圖3 深色和淺色提供強烈的對比，而兩種深色搭配會混在一起
如果色環中的鄰近色在亮度上沒有差别，那麼請避免使用兩者的對比色，如圖4所示。
圖4 互補色對比強烈，而鄰近色對比差異較小
不要單靠顔色來傳達資訊。缺乏對顔色的描述可能會誤導使用者，耐克的搜尋欄就是一個例子，如圖5所示。應該在顔色闆上添加顔色名來幫助使用者了解顔色，使用者就無需一遍遍地使用滑鼠懸停來确認自己選對了顔色。
圖5 顔色闆可能會讓網上購物的顧客感到困惑
避免單獨使用顔色來訓示使用者如何操作或者要傳達的資訊，而是将顔色作為使用者的輔助資訊。
你在設計上使用的顔色越多，混淆色調的機率就越大。是以要限制調色闆。下面的15色調色闆為常見的色盲類型提供了良好的辨識方案。患有第三色盲的人不能區分如圖6中的标有圓點（●）的顔色搭配以及标有三角形（◥）的顔色搭配。
圖6 色盲人群無法區分某些顔色
使用紋理和圖案來強化對比。例如，色盲使用者可能很難識别圖形和圖表。在這種情況下，可以使用圖案來增強對比，可能的話，也可以直接使用文字說明。當然，是否用不同顔色還取決于你所顯示的資料系列，如圖7所示。
圖7 紋理可以更好地區分顔色
按鈕的目的是引起使用者注意并直接操作，在設計按鈕時請避免使用容易給色盲使用者造成混淆的顔色組合（如紅色和綠色，藍色和黃色）。
此外，請確定這些元素包含清晰可見的文字或圖示，使目标明确，如圖8所示。
圖8 操作按鈕更不應該通過容易混淆的顔色組合來誤導使用者
将你的設計去色處理，是一個很好的功能性測試。如果完全依賴于顔色的界面，在去色之後邏輯上的問題會被放大，如圖9所示。例如，隻用顔色的話，去色後界面上各元素的易用性可能會很差，但如果使用形狀、顔色和對比來區分關鍵元素，界面就會非常清晰。
圖9 界面去色可以暴露設計的缺陷
如果使用細微的陰影來創造對比度，就可以保持品牌顔色的一緻性和品牌辨識度，如圖10所示。
圖10 想要保持品牌顔色的一緻性，不妨嘗試用陰影來提升對比度
與其把力氣花在設計花哨不切實際的界面上，不如設計美觀功能實用的使用者界面。用不同的顔色來辨別懸停（用于非觸屏裝置）、點選、激活和錯誤狀态，并用圖示來輔助顔色和文本，使用标準的元件或者正常的設計樣式可以幫我們做到這些。圖11是一個不切實際的UI示例，去色後的界面隻剩下一連串文字。
圖11 謹防嚴重依賴紅色文字作為喚起動作的辨別
對于網站内容，網際網路聯盟（W3C）的《Web内容無障礙指南2.0（WCAG 2.0）》詳細介紹了使網站更易用的建議。級别A是最低要求，級别AA要求音頻和視訊配有字幕，級别AAA是無障礙最進階别的評級要求。
許多元素都很簡單：為圖檔使用替代文本，已驗證的會話過期後仍然保留表單資訊。 WCAG 2.0提出的最重要但基本的建議之一是對比度，尤其是關于文本與背景顔色的對比度，如圖12所示。
圖12 正如Web無障礙中AAA級别的建議，文字和背景顔色的強對比有利于使用者識别
作為設計師，我們希望做出最有創意的解決方案，對吧？
雖然，無障礙設計的确會增加一些設計上的限制，但你已經在各種條框限制中進行設計了，這些限制確定了産品的功能性，而無障礙隻是其中的一條限制。
無障礙設計不僅僅針對有視覺障礙的人，每個人都受益于無障礙的内容。無論設計師是否有更高尚的審美目标，這些設計都建構了一個以功能為基礎的美好世界。無障礙設計不僅直接，而且對于你、你的老闆、你的客戶和你的使用者也很重要。有了無障礙的基礎知識，以及我們列出來的實踐範本，你在Dribbble上的作品可能會被廣泛流傳。
了解别人如何看待你的設計是為每個人提供最佳體驗的關鍵。幸運的是，有一些簡單的方法可以幫你利用WCAG 2.0確定自己的設計無障礙。
Stark是一個出色的Sketch插件，提供各種類型的色盲視窗模拟效果。它還提供了兩個標明圖層之間的對比率。
建議使用Sketch自帶的Symbol②功能來建立UI元素，這樣可以很友善地檢查所有變量及其狀态，不然很容易忘記在哪些地方用了什麼，同一進制素在不同地方使用的時候也不便于同步。
Photoshop自帶顔色色盲檢查工具，如圖13所示。
圖13 使用Photoshop的校樣設定來模拟色盲
• Tanaguru
用這個顔色工具取兩個顔色值，它會計算出這兩個顔色之間的對比度，也可以給出與所輸入顔色相近的顔色和對比度，提高了無障礙性。
• Colorblind Web Page Filter 色盲網頁濾鏡
該工具可以在網頁上模拟不同類型的色盲看到的狀态。
• NoCoffee
這個“視覺模拟器”插件可以識别網頁上的問題，如敏感度低、對比度低和顔色依賴。
Felipe Elioenay開發的Colorblindness App③是我們的最愛之一。使用者将手機攝像頭對準日常物體，點選想要了解的部分，它就會描述該物體的顔色，使用者界面超級簡單。
Color Oracle是一個mac OS的實用程式，它可以模拟各種類型色盲所看到的螢幕。
好的設計和好的使用者體驗可以在很大程度上提升網站無障礙性，但有時我們還需要更進一步将開發也納入考慮範圍。
像螢幕閱讀軟體這樣的輔助技術需要編寫符合标準的語義HTML，以提高無障礙性。
HTML5元素是語義HTML，它提供了頁面的結構。使用螢幕閱讀器的盲人需要在頁面中做到選擇性閱讀，而不是從頭到尾聽完整個頁面。适當地使用标題級别（h1~h6）可以更容易地滿足這一需求，使用者可以聽所有的章節标題，然後有選擇性地閱讀他們感興趣的部分。
保持内容和樣式的分離也是非常重要的。HTML用于内容和結構，CSS用于表現和設計樣式。
對于具有視覺障礙的使用者，圖檔上需要加上替換性的标簽來解釋圖檔，也要配上标題和标簽來解釋缺失的語境。為圖檔添加這些資訊時，應側重描述其功能。例如，前往圖檔集”比“圖檔集”更有用。
使用HTML5視訊和音頻标簽可以讓浏覽器知道哪裡有什麼内容，并預設使用系統播放界面，系統自帶的播放界面對使用者來說既熟悉又無障礙。
對于使用螢幕閱讀器的使用者來說，如果你不能確定他們能夠通路填寫表單所需要的所有資訊，那麼他們填寫表單時會有問題。
使用螢幕閱讀器的人需要知道每個字段應該輸入什麼内容，因為他們無法看到字段旁邊的标簽。 現有的解決方案是标簽元素，它将标簽文本與表單字段相關聯。
HTML5有一個新功能是指定輸入字段的資料類型。通過标記預期的資料類型，浏覽器将為該資料類型提供最佳的輸入類型（例如，數字對應數字鍵盤或日期對應日期選擇器）。
蘋果公司一直以來都支援無障礙設計，例如它的顯示縮放功能。在過去幾年，蘋果公司進一步地發展了這一點，将iOS中動态字型（見圖14）、自動布局以及UI堆棧視圖等特性結合在一起，形成了高度響應式UI的基礎，并且所有的開發人員都能輕松地使用，如圖14所示。
圖14 蘋果公司在最新的全球開發者大會上推出了動态字型
在2017年全球開發者大會上，蘋果公司鼓勵更多的第三方開發者支援動态字型；iOS11支援自定義字型，以滿足使用者對動态字型④大小的偏好。
Android有自己的響應式布局和動态字型解決方案。你可以指定以dp（密度獨立像素）和sp（可縮放像素）為機關的度量，根據使用者的設定自動進行調整。
• 色彩對比是一種強大的設計工具，也是AAA級無障礙設計的支柱。
• 不要僅僅依靠色彩和圖示,文本标簽會明确告知使用者他們看到的選項。
• 填充的圖示比線型圖示更清晰（蘋果公司也這麼認為）。如果一定要用線性圖示的話，粗線條比細線條更容易識别。
• 用不同的填充圖案來增強對比給人一種質地感，也可以幫助使用者區分不同的元素。
• 點選區域周圍要有足夠的留白，以便于使用者能夠定位和點選它們。
• 可識别的剪影圖示效果好于圓圈中帶符号的圖示。
• 語言要精确，例如在按鈕上的動詞要讓使用者明确知道他們可以點選“繼續”，而不是籠統的“是”和“否”選項。
• 字母基本高度較小的字型更容易閱讀（Brandon Grotesque字型是一個很好的例子），但也要避免使用花體字（比如Lobster字型）。
• 確定文本連結明顯可見，例如使用下畫線将文本連結和普通文本區分開。
• 確定你的JavaScript和CSS技術不會屏蔽高亮顯示。很多使用者會高亮顯示部分文本來增加對比度。
• 熟悉性和一緻性使使用者有一個良好的開端。我們應該知道什麼時候使用規範的設計樣式、常見的互動模式以及原生元件。
• 圖示與按鈕應友善點選，但不必過大。将它們放在低對比度的容器中，或者增大它們周圍的留白，以便于視覺平衡并且友善點選。
• Random A11Y凝聚了一群人的努力，它緻力于建立對比度高且好看的色彩搭配。
——————————
<b></b>
<b>延伸推薦</b>
<a href="http://mp.weixin.qq.com/s?__biz=MzA3NTIzMzIxNQ==&mid=2652796687&idx=1&sn=f8ccbfd3c47ae59643c2d0ad37e0ee1b&chksm=849975dfb3eefcc9dd6448efecf6ddca25bf2726924e07c04cac6bda1ada283352549ecb156a&scene=21#wechat_redirect" target="_blank">2018年2月新書</a>
<a href="http://mp.weixin.qq.com/s?__biz=MzA3NTIzMzIxNQ==&mid=2652796401&idx=1&sn=f5ceeeddb71c5928d86cc4cbf9ba1af3&chksm=84997721b3eefe3738b7ab0e73c46f801419a5e1f86253cb39fd494e876e9c87ade07ac036f1&scene=21#wechat_redirect" target="_blank">2018年1月重磅新書</a>
<a href="http://mp.weixin.qq.com/s?__biz=MzA3NTIzMzIxNQ==&mid=2652796296&idx=1&sn=0225391d6deaaea09f033916cc13840d&chksm=84997758b3eefe4e3b2af4bd8e9b15c8bd79e04eccba7c67da0b7ce933b179772cde7e246424&scene=21#wechat_redirect" target="_blank">國小生開始學Python,最接近AI的程式設計語言：安利一波Python書單</a>
<a href="http://mp.weixin.qq.com/s?__biz=MzA3NTIzMzIxNQ==&mid=2652796228&idx=1&sn=8d7f4512cf83f7b22e87d0ab5c25b96b&chksm=84997794b3eefe82d4592d3983f8039252cccb55e8fbde8ecdf886c06254e575249d3246b010&scene=21#wechat_redirect" target="_blank">政策升溫：大家都在學大資料，一大波好書推薦</a>
<a href="http://mp.weixin.qq.com/s?__biz=MzA3NTIzMzIxNQ==&mid=2652796196&idx=1&sn=28f831ed59f22e7a85217fd7bef5c8fc&chksm=849977f4b3eefee20f287796dc8fc1f916a48d0914e8228e41f0eceee2e888ad4bab706a3f73&scene=21#wechat_redirect" target="_blank">8本新書，送出一本你喜歡的</a>
長按二維碼，可以關注我們喲
每天與你分享IT好文。
在“異步圖書”背景回複“關注”，即可免費獲得2000門線上視訊課程；推薦朋友關注根據提示擷取贈書連結，免費得異步圖書一本。趕緊來參加哦！
點選閱讀原文，檢視更多内容
<a href="https://www.epubit.com/selfpublish/article/1584" target="_blank">閱讀原文</a>
![用 Canvas 編織璀璨星空圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)