如果某些人根本無法使用,那麼精美的設計又有什麼用呢?在過去幾年中,無障礙設計一直是 UI/UX 設計中的關鍵主題。對於 Glucode 的 UI/UX 設計主管 Marianka Cilliers 來說,這個難題既是個人也是專業層面的問題。我們和她坐下來聊了聊設計中的無障礙設計,以及為什麼他們為 Sketch 建立了 Appibilities 這個全新的無障礙設計小幫手。
請跟我們談談您自己和 Glucode 迄今為止的發展歷程。
我在南非設計產業工作了 12 年,從 2016 年開始在 Glucode 工作。我是 Sketch 的擁護者,也是無障礙設計和包容性設計的倡導者。
Glucode 在 2009 年隨著 Creamer Media 的 Mining Weekly iPhone app 的推出而進入了 app 領域。這是第一個在 App Store 上架的南非開發 app,目前是國際礦業高度評價和信賴的新聞來源。我們持續在金融、保險、醫療保健、交通運輸和娛樂等各個領域創造具有全球競爭力的 app。最近,我們致力於開發 Appibilities,這是一款適用於 Sketch 的 iOS 無障礙設計小幫手。
您為什麼認為行動 app 的無障礙設計很重要?
我們建造坡道讓建築物更容易進出,但我們並不總是想到要讓我們的 app 也易於存取。想想拿起你的裝置點餐或預約及提交醫療理賠是多麼容易。現在想像一下,如果使用者因為螢幕上的文字對比度不符合 WCAG(網頁內容無障礙設計指引)而無法閱讀螢幕上的文字。或者按鈕讓行動不便的使用者難以點擊,例如。
你的設計是為了要解決使用者的問題,而如果沒有考慮到無障礙設計,你可能就沒有達到目標。
你的設計是為了要解決使用者的問題,而如果沒有考慮到無障礙設計,你可能就沒有達到目標,因為這個問題只解決了部分受眾的需求。
隨著時間的推移,您對無障礙設計的方法有何改變?
我在 2017 年的一次 UI 研討會上第一次注意到無障礙設計。讓我印象深刻的是,有些產品,尤其是 app,並不是所有族群都能使用。多年來,我一直致力於觀看 WWDC 的演講並參加關於這個主題的研討會。
我發現無障礙設計拓展到包容性設計的概念非常有啟發性,因為它不只是為了讓身心障礙人士可以使用,而是為了讓所有人都能使用。例如,在洗髮產品上使用凸起的形狀來幫助視障人士區分不同的產品,但透過使用形狀而不是點字,它也變得普遍適用於其他人。
您個人是如何投入無障礙設計的呢?
我的哥哥從小就飽受視力問題的困擾。幾年前,他被診斷出患有青光眼,這種疾病會導致眼壓升高,損害將影像傳送到大腦的神經。如果病情惡化,可能會導致視力喪失甚至失明。我開始注意到他在使用手機應用程式時遇到的困難。
我決定將我的餘生投入到無障礙和包容性設計的工作中,讓我的哥哥和其他人更容易使用產品。
值得慶幸的是,iOS 的輔助使用功能讓他可以增加字體大小、粗細和對比度,但有許多應用程式並不支援原生輔助使用功能,這對他來說很困難。我決定將我的餘生投入到無障礙和包容性設計的工作中,讓我的哥哥和其他人更容易使用產品。
您注意到應用程式和公司在處理無障礙問題方面有哪些常見的缺失?
我經常注意到的常見缺失包括:自定義文字沒有包含可動態調整大小的無障礙標籤、對比度太低以及可點擊區域太小。另一個常見的缺失是組件命名沒有準確描述其功能,這尤其會影響使用 VoiceOver 朗讀螢幕元素的用戶。
設計師如何改善這些缺失?
針對文字問題,您可以使用原生字體和預設文字大小,以便在用戶在系統設定中啟用輔助使用功能時,能夠動態調整文字大小。您也可以使用 Sketch 外掛程式,例如 Cluse 和 Stark 來檢查文字在不同背景上的對比度,理想的對比度是 4.5:1
。
選擇 4.5:1
的對比度作為 AA 級標準,是因為它可以彌補視力損失的用戶通常會經歷的對比敏感度下降,相當於大約 20/40
的視力。20/40
通常被報導為大約 80 歲老年人的典型視力。
改善視覺無障礙性的另一種方法是透過設計的顏色組合。這可以透過模擬各種色盲形式來實現,以確保用戶能夠區分不同的狀態。您也可以使用圖示來強化這些情況下的意義。
在 iOS 中,請確保您的點擊狀態至少為 44px
,以幫助行動不便的用戶。
您還應該為圖像新增替代文字,確保組件的順序正確,並確保文字標籤準確描述組件的功能,以便使用 VoiceOver 朗讀螢幕元素的用戶能夠理解。
您在 Appibilities 中專注於哪些方面來提升無障礙性?
Appibilities 將透過檢查並建議您使用原生字體和字重來協助改善無障礙性。San Francisco 和 New York 字體在設計中使用時有特定的規則。為了幫助您,當它們使用不正確時,您會收到提醒。

Appibilities 還可以幫助您的另一個方面是,有時在設計過程中,畫板會被錯誤地調整大小。Appibilities 將幫助您檢查畫板,確保您遵循原生 iOS 裝置尺寸。
未完成的句子是另一個我們致力解決的惱人問題。Appibilities 會提醒您省略號的使用,並幫助您確保使用者始終有辦法存取螢幕上未完全顯示的資訊。
透過使用原生樣式、易於辨識的顏色,並給設計一些呼吸空間,您的 app 就能兼具美觀和易用性。
最後,但同樣重要的是,過小的點擊區域會讓 app 的使用者感到困擾。Appibilities 會引導您確保所有互動點的最小點擊區域至少為 44x44pt
。
我們希望擴展 Appibilities 的功能,使其能檢查更多 iOS 的輔助使用規範,但我們也希望這是朝著更友善設計邁出的一步,能真正改善人們的生活。我們也希望將 Appibilities 發展成一個 Material Design 的輔助使用小幫手。
您認為輔助使用的未來會是什麼樣子?
兼顧視覺美感以及易用性和包容性的設計。透過使用原生樣式、易於辨識的顏色,並給設計一些呼吸空間,您的 app 就能兼具美觀和易用性。
我們一直在尋找突破 Sketch 可能性極限的設計師。您是否在 Sketch 中創作了很棒的作品?使用 #MadeWithSketch 與我們分享,我們可能會在下一篇文章中介紹您的作品。