視覺無障礙在APP界面設計中的應用

汪大丁

（武漢理工大學 藝術與設計學院，武漢 430070）

引言

無障礙設計的普適性原則是其所特有，是其他設計理念所無法企及的存在，正因如此，在我們的日常生活中，對于無障礙設計的關注度變得越來越高。視障者作為無障礙設計的核心人群，滿足視障者在APP使用中的需求，不僅僅是為社會做貢獻，也是為APP在極端環境下的使用考慮更佳的解決方案，視覺無障礙作為無障礙設計中一個最重要的組成部分，是APP界面設計中不可或缺的元素。因此，在當前的APP界面設計中，設計師有必要對用戶在APP的不同體驗以及需求進行分析，總結視覺無障礙設計的特性和作用，探尋具體有效的應用形式和應用方法。

一、視覺無障礙概況

（一）視覺無障礙設計

作為聯合國提出的新主張，無障礙設計這個概念的名稱在1974年被首次提出①。為達到“無障礙”的美好目標，它不僅專注于對一切為人所用的環境與物體進行設計，致力于對人類的動作反應、行為意識進行研究，還在為清除那些讓用戶感到困擾的交互操作以及界面設計提供指導。盡管它不能做到真正意義上的平等，也不能使每一個人都滿意，但是它的設計理念是向這個方向發展的。

在WCAG 2.0②（Web Content Accessibility Guideline）Web內容無障礙指南中，將產品界面設計中遇到的主要障礙類型劃分為了視力障礙（Visual impairments）、聽力障礙（Hearing impairments）、運動障礙（Motor impairments）和智力障礙（Intellectual disabilities），人類是擁有視覺、聽覺、觸覺等諸多感知“通道”的整合體。其中，視覺無障礙是一個可以面向所有公眾的視覺設計系統，該系統的最終目標是創建一個無障礙的可視環境，使信息盡可能準確地傳達給公眾。

（二）視覺障礙人群分類

視覺障礙人群主要來自于以下四個方面：視覺敏銳度下降的人群、對比靈敏度下降的人群、色彩的感知度發生損壞的人群以及有效視野改變的人群。用戶視覺的敏銳度下降即人眼能夠分辨物體細節的能力下降，例如近視、遠視或白內障會導致用戶視覺敏銳度下降。在視覺敏銳度較弱的普通用戶眼里，圖像的細節會變得模糊，只有較大的圖像輪廓才能讓他們得以正確辨識，如圖1中A；對比的靈敏度也就是眼睛在前景色和較弱的背景色之間分辨明亮度的能力。對比靈敏度較低的用戶看到的圖像會呈現透過陽光或沙塵看到的樣子，蒙了一層厚厚的灰色，如圖1中B；而對于色彩的感知度即對于色相的理解程度，色弱或者全色盲的感知度下降是指眼睛在辨色過程中有環節出了問題，辨別顏色的能力發生了障礙。而其中色盲群體的問題還可以細分，色盲以紅綠色盲較為常見，色盲對于人群的感知度可以大致分為紅色盲、綠色盲、藍色盲和全色盲，如圖1中C；有效的視野靈敏度發生改變由視網膜的病變導致。視野消失可能發生在視野中部（如青光眼），也有可能是發生在視野的周邊（如急性糖尿病或白內障引起的急性視網膜病變），他們能夠看到的物體圖像是損壞的，如圖1中D。除了色彩感知度損壞對于普通人來說為隨機變量以外，視覺敏銳度下降、對比靈敏度下降、有效視野改變都為固定變量，時常在各年齡段的人群中出現，APP為當代人不可或缺的日用產品，解決消費者在使用中的視覺障礙問題是當代設計研究人員的當務之急。（圖1）

圖1 視覺障礙人群模擬視圖

二、APP界面設計中視覺無障礙的應用

（一）視覺無障礙應用于APP界面設計中的必要性

我們每天都會在使用APP的時候頻繁地接觸到驗證碼，驗證碼作為APP校驗身份的首要工具，往往在入口處就給有視力障礙的人群帶來了不好的體驗，視障者往往在入口處就失去了正常的使用資格，而常用的讀屏軟件也不能解決驗證碼圖片的不清晰和可讀性差等問題。（圖2）

圖2 校驗身份的驗證碼樣式圖

除此之外，作為當代互聯網行業最常見的營銷手段——紅包，采用了傳統的深入人心的黃紅配色，但在紅綠色盲的眼中，紅色近似于灰色和黃灰色，這使得有視覺障礙的人群在使用這項活動時體驗感極差，甚至連最基本的文字信息的可視性都會受到影響。（圖3）

圖3 紅包界面的色盲模擬視圖

大型的手機硬件廠商一般都會因為安卓完全開源的技術特點來內置自己的軟件，為了滿足系統的精簡與流暢，廠商往往直接刪除掉安卓系統里內置的無障礙操作系統服務，這樣做雖然滿足了絕大部分安卓手機目標群體的需求，但也誤傷了小部分的弱勢群體的利益，使得有視覺障礙的人群拿到了一個無法很好地使用的“閹割”手機。

綜上所述，雖然現有產品在開發中會出現迎合商業價值而做出妥協放棄無障礙設計的情況，但筆者認為，在現如今這樣供大于求，消費品泛濫的時代，將消費者進行詳細劃分后，仍然可以在一些小的方面找到切入點，在APP的界面設計中考慮視覺無障礙，不僅為視障者解決了實際的困難，也使得普通用戶能夠擁有更好的使用體驗。

（二）視覺無障礙應用于APP界面設計中的方式

1.提高產品對比度

根據2018年6月5日，W3C的可訪問性指南工作組（Accessibility Guidelines Working Group，AG WG）發布的Web內容可訪問性指南（Web Content Accessibility Guidelines，WCAG，2.1）中的正式推薦標準③，文字和背景色的對比度至少是4.5∶1；如果是大于等于24 px/ 19 px bold 的文字，對比度至少是3∶1。這項規范可以幫助視障用戶更好地使用互聯網產品。（圖4）

圖4 web應用程序的推薦對比度

使用滿足對比度標準的顏色，不僅不會影響產品的美觀，而且可以提升產品的無障礙性。以Google Chrome為例，新的配色方案符合WCAG 2.1規范，有足夠高的對比度。所有的設計元素，都能最大程度地滿足WCAG 2.1 AAA 標準，在明暗兩種背景下的配色，幾乎都滿足 WCAG 2.1 AAA 標準（color contrast ratio >4.5）。此外，Google 在深淺背景上使用的顏色，都不是直接套用的標準色，而是根據不同背景調整后的顏色。而即使是使用標準色，Google也盡量使之和白背景的對比度滿足AA 標準（黃色、橙色例外）。

2.圖形結合顏色

在界面設計時，不能只依靠顏色傳達諸如狀態指示、視覺控件、實時響應等信息。如果只用顏色進行區分，在一定程度上會造成用戶的不方便、甚至不能分辨圖像中顏色的區別。不同視障者看到的畫面是不同的，所以同時使用多種視覺線索傳達重要信息是很必要的，顏色的使用只是作為強調或補充已經能看明白的信息。如圖5所示，在登陸入口中，視力正常的用戶能輕易分清郵箱地址是錯誤狀態，但色盲用戶（綠色色盲）就完全看不出。解決辦法有很多種，比如采用圖形結合顏色的方式：在登陸入口的優化版本上，除了使用顏色區分的形式以外，還可以將錯誤狀態的形狀改為菱形，以區別于正確狀態下的圓形形狀，加上“請輸入正確的郵箱地址”之類的提示性文字信息，來表明錯誤狀態。（圖5）

圖5 登陸入口視覺無障礙優化視圖

3.不同元素做明確的區分

表單輸入框的形式有很多，現代風格的表單設計往往傾向于極簡主義，拋棄了傳統表單的基本屬性，例如清晰的邊框、明顯的標簽，這都大大降低了用戶的使用體驗。傳統輸入框樣式界限明晰標簽清楚，中間可填充顏色。輸入框有明確的邊界，這對用戶的輸入特別是有視覺障礙的用戶來說十分重要。清晰的邊框，可以讓用戶明確知道點擊目標的位置和大小。如果沒有清晰的邊框，視障者可能很難找到輸入框的位置確定輸入框的面積，從而在使用時變得異常困難。（圖6）

圖6 表單視覺無障礙優化視圖

4.增加提示信息

文本提示能時刻告訴用戶輸入框的目的，但是常用的視覺設計手法會出現在文本框中輸入占位字符這樣的形式，這樣的處理手法實際上是不好的，用戶在實際操作時，往往因為輸入內容將占位字符抵消掉，而使用戶忘記輸入的目的，如果采用在文本框外增加文本提示的視覺設計，當用戶在輸入內容的時候就可以時刻提醒用戶自己在輸入些什么?？梢愿玫刈龅揭曈X無障礙設計，滿足各種用戶的需求。（圖7）

圖7 文本提示信息無障礙優化視圖

三、結語

（一）視障用戶仍然是產品銷售的目標用戶

世界上約有4%的人口視力低下，0.6%視盲。這些用戶需要借助屏幕閱讀器/盲文閱讀器的幫助來操作手機。7～12% 的男性有不同形式的色覺缺陷（如色盲），他們難以區分某些特定顏色組合。低視力狀況隨著年齡的增長而增加，50歲以上的人中一半以上有一定程度的低視力狀況。全球增長最快的人群是60歲以上的人，過了40歲以后大多數人都需要老花鏡才能清楚地看到小物體或文字。如果能將視覺無障礙很好地落實在APP界面設計中，那么全世界將有10%的人從中獲益。此外，視覺無障礙也不僅僅是出于人道主義方面的考量，它產生的商業效益仍然十分可觀。

（二）視覺無障礙可以保證APP在極端情況下仍可以使用

當代的設計有很多各方面都很不錯的產品，例如蘋果公司的系列產品，但并不是每個人都有機會去使用它，現實中的大多數人，用的仍然是老舊、性能差的手機。大多數的人會在強烈的陽光下、在行駛的交通工具上以及在昏暗的環境中使用各種APP。如果沒有視覺無障礙的設計意識，APP上線后很可能在真實的使用場景中無法正常使用。所以為了讓使用條件不是很好的用戶仍然能正常使用APP，也為了讓更多視障者能更好地操作APP，將視覺無障礙應用到APP界面設計中，是一件非常有必要的事。■

注釋：

①李斌，萬莉君.從無障礙設計邁向通用設計[J].包裝工程，2007，28（8）：186-188，225.

② 張昆，主編.信息無障礙 提升用戶體驗的另一種視角[M].北京：清華大學出版社，2018.

③萬維網聯盟（中國）.Web內容可訪問性指南[EB/OL].（2018-06-05）http://www.chinaw3c.org/archives/2145/.