跳過導覽
Image showing Marianka Cilliers of Glucode over an accessibility app on a purple background.
#使用Sketch製作

Appibilities 介紹:Glucode 的 Marianka Cilliers 如何幫助讓 app 更易於存取

「我們建造坡道讓建築物更容易進出,但我們並不總是想到要讓我們的 app 也易於存取」

如果某些人根本無法使用,那麼精美的設計又有什麼用呢?在過去幾年中,無障礙設計一直是 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 外掛程式,例如 CluseStark 來檢查文字在不同背景上的對比度,理想的對比度是 4.5:1

選擇 4.5:1 的對比度作為 AA 級標準,是因為它可以彌補視力損失的用戶通常會經歷的對比敏感度下降,相當於大約 20/40 的視力。20/40 通常被報導為大約 80 歲老年人的典型視力。

改善視覺無障礙性的另一種方法是透過設計的顏色組合。這可以透過模擬各種色盲形式來實現,以確保用戶能夠區分不同的狀態。您也可以使用圖示來強化這些情況下的意義。

在 iOS 中,請確保您的點擊狀態至少為 44px,以幫助行動不便的用戶。

您還應該為圖像新增替代文字,確保組件的順序正確,並確保文字標籤準確描述組件的功能,以便使用 VoiceOver 朗讀螢幕元素的用戶能夠理解。

您在 Appibilities 中專注於哪些方面來提升無障礙性?

Appibilities 將透過檢查並建議您使用原生字體和字重來協助改善無障礙性。San Francisco 和 New York 字體在設計中使用時有特定的規則。為了幫助您,當它們使用不正確時,您會收到提醒。

Image showing Appibilities in action in Sketch,

Appibilities 還可以幫助您的另一個方面是,有時在設計過程中,畫板會被錯誤地調整大小。Appibilities 將幫助您檢查畫板,確保您遵循原生 iOS 裝置尺寸。

未完成的句子是另一個我們致力解決的惱人問題。Appibilities 會提醒您省略號的使用,並幫助您確保使用者始終有辦法存取螢幕上未完全顯示的資訊。

透過使用原生樣式、易於辨識的顏色,並給設計一些呼吸空間,您的 app 就能兼具美觀和易用性。

最後,但同樣重要的是,過小的點擊區域會讓 app 的使用者感到困擾。Appibilities 會引導您確保所有互動點的最小點擊區域至少為 44x44pt

我們希望擴展 Appibilities 的功能,使其能檢查更多 iOS 的輔助使用規範,但我們也希望這是朝著更友善設計邁出的一步,能真正改善人們的生活。我們也希望將 Appibilities 發展成一個 Material Design 的輔助使用小幫手。

您認為輔助使用的未來會是什麼樣子?

兼顧視覺美感以及易用性和包容性的設計。透過使用原生樣式、易於辨識的顏色,並給設計一些呼吸空間,您的 app 就能兼具美觀和易用性。


我們一直在尋找突破 Sketch 可能性極限的設計師。您是否在 Sketch 中創作了很棒的作品?使用 #MadeWithSketch 與我們分享,我們可能會在下一篇文章中介紹您的作品。

您可能也喜歡

免費試用 Sketch

無論您是 Sketch 的新手,還是回來查看最新功能,我們都能讓您在幾分鐘內設定完成並準備好開始創作。

免費開始使用
免費開始使用