跳過導覽
Main image for the Global Accessibility Awareness Day post
#使用Sketch製作

無障礙設計:與 Cluse 開發者 Yana Gevorgyan 的對談

「身為設計師,我們有道德責任去創造每個人都能使用的產品」

為了慶祝 全球無障礙意識日,我們想分享我們其中一位外掛開發者的傑出工作,並展示小小的無障礙設計改變如何對數百萬用戶產生巨大影響。


如果沒有我們強大的外掛開發者社群,Sketch 就無法成為今天的平台。他們創造的工具讓設計出色的產品變得更容易。而當談到讓您的設計變得更容易使用時,我們的外掛開發者社群已經建立了一些很棒的工具來提供幫助。Cluse 就是其中之一。

最近剛從 MICA 畢業的產品設計師 Yana Gevorgyan 注意到,無障礙設計並不總是一個設計師工作流程中自然而然的一部分。因此,她創造了 Cluse,這是一個獨特的顏色對比外掛,可以確保您的設計符合 WCAG 2.0 的無障礙標準。

我們與 Yana 進行了訪談,了解她對設計中無障礙設計的看法,並進一步了解 Cluse 極其簡單(且簡潔有力)的滑動條系統。


是什麼啟發您創造 Cluse?

我在幾個月前才創造了 Cluse,作為我在 2020 年 5 月獲得學士學位的畢業專題。這個想法來自於我對同學和同事的觀察。

在我最後一次實習期間,團隊花了很多時間將十六進制值從 Sketch 複製並貼上到線上對比度檢查器。如果您每天都在處理多個產品,這些時間加起來會很快,這意味著有些團隊會跳過檢查顏色對比度或無障礙字體樣式。我構思 Cluse 的目的是將無障礙設計融入設計師現有的工作流程中,讓包容性設計變得更加便捷,並因此更加普及。

「世界上大多數人口都連接到網際網路,並依賴它來完成日常任務。其中包括具有不同背景、年齡和身體能力的人。雖然並非所有實體空間都能讓身心障礙者無障礙地進入,但網站沒有理由也這樣。」

設計和開發這個外掛的過程是什麼樣的?

當我第一次考慮 Cluse 的想法時,我觀察了設計師目前的無障礙設計工作流程。經過用戶研究後,我得出結論,大多數設計師會最小化 Sketch,並使用線上對比度檢查工具來獲得指導。設計師們強烈偏好使用滑動條來調整十六進制值,直到它們通過 WCAG 標準的對比度檢查器。我的方向很明確:將設計師最喜歡的無障礙設計工具整合到他們最喜歡的原型設計工具中。我希望確保設計師不需要離開 Sketch 就能進行無障礙設計。

在我的設計過程中,我是一個功能主義者:形式追隨功能。像外掛這樣的周邊設備必須建立在它們所補充產品的用戶體驗基礎上。用戶期望在互動和視覺效果方面都有熟悉的模式。因此,Cluse 用戶介面的視覺設計與 Inspector 非常相似。我實際上為 Sketch Mac 應用程式建立了一個假的樣式指南,專門用於確保整合的相對順暢性和準確性。如果您有興趣,可以在 我的網站 上閱讀更多關於 Cluse 視覺設計過程的資訊。

Yanas mock style guide for Sketch helped her create a plugin that felt like part of Sketch.

Yana 的目標是讓 Cluse 的設計盡可能貼近 Sketch 在 Mac 上的使用者介面。

至於開發過程,Sketch API 文件是一個很好的起點,但我整合更複雜的 macOS 原生 API 最佳指南則來自設計社群。我非常感謝 Matt Curtis 的教學,它講述如何使用 HTML、CSS 和 Javascript 建構 Sketch 外掛程式。他的文章簡潔明瞭,即使是新手程式設計師也能夠理解並為 Sketch 不斷成長的外掛程式庫做出貢獻。

「我經常思考如何以同理心進行設計。不要把你的受眾想成是『使用者』。他們首先是『人』。」

Cluse 與其他 Sketch 的無障礙外掛程式有何不同?

市面上有很多 Sketch 的對比度檢查外掛程式,這讓我感到高興。其概念很簡單:你選取兩個圖層,執行外掛程式,然後就能得到 WCAG 的合規評級。但通常使用者旅程就到此為止了 — 沒有任何上下文或行動呼籲。你不知道為什麼會得到不合格的 WCAG 評級,也不知道如何修正它。Cluse 是唯一一款能讓你不用切換應用程式就能直接處理不合格十六進位色碼的對比度檢查器。透過前景和背景亮度滑桿,設計師可以即時調整顏色對比度,以前所未有的速度設計出無障礙的產品。

為什麼無障礙設計如此重要?

身為設計師,我們有道德責任創造出每個人都能使用的產品,而不只是一部分的人。我們在生活中越來越仰賴科技——尤其在 COVID-19 疫情期間,更多任務從實體轉移到虛擬平台。世界上大多數人口都已連上網路,並依賴它完成日常工作。其中包括來自不同背景、年齡和身體能力的人。雖然並非所有實體空間都能讓身心障礙者無障礙通行,但網站沒有理由也一樣。設計師可以賦能他們的使用者,而這只需要調整幾個十六進位色碼。我認為這很划算。

「設計師可以賦能他們的使用者,而這只需要調整幾個十六進位色碼。我認為這很划算。」

Sketch 如何幫助你(和其他人)設計出更無障礙的產品?

通往無障礙設計的道路始於設計師的 Sketch 文件。大多數人傾向於認為無障礙設計是開發人員的唯一責任。畢竟,是他們在實作螢幕閱讀器功能並進行品質保證測試。但這種想法是錯誤的。如果設計一開始就沒有無障礙考量,開發人員也無能為力。Sketch 是抵禦低對比度、懸停狀態與非懸停狀態之間的區別不足,以及描述性不足的連結文字的第一道防線。在交付給開發人員之前,請查看你的畫板和樣式指南,並進行無障礙評估。使用像 Cluse 這樣的插件,你可以在幾秒鐘內確保你的設計符合無障礙規範。

在設計和使其無障礙 accessible 的過程中,你的方法是什麼?

我經常思考如何以同理心進行設計。不要把你的受眾想成是「使用者」。他們首先是「人」。偶爾,從設計師的角色退一步,設身處地為他們著想。更好的做法是,與你認識的任何視力障礙者交談。讓他們坐在你旁邊,對設計進行認知 walkthrough(認知走查)。在我其中一份實習工作中,我們有一位軟體工程師是紅綠色盲。他是我們團隊中最寶貴的無障礙資源。

Using Cluse to test whether an image is AA accessible in Sketch.

設計師如何從一開始就重新思考他們的方法,讓他們的設計更無障礙?

設計師必須意識到,無障礙設計不僅僅是為了永久性視障人士。您調整的顏色對比度?它幫助人們在弱光環境下更輕鬆地瀏覽您的網站。您省略的干擾元素?您改善了患有注意力不足過動症 (ADHD) 人士的瀏覽體驗。更大的用戶群比例可能會面臨暫時性和情境性障礙,例如在戶外低亮度下瀏覽或手臂骨折。將這種意識框架設定為「包容性」而非「無障礙性」可能對設計師有所幫助。任何使產品對邊緣案例更易於使用的事情最終都會使所有人受益。

「一旦無障礙設計成為您的新常態,您就不再感到受其限制。它成為設計的自然方法,為創意打開了大門。」

如果他們無法勾選每個 AAA 標準,設計師應該關注哪些方面才能使他們的工作無障礙?

製作包容性設計不必困難或耗時。如果您無法滿足每個無障礙指標,請專注於顏色對比度。這是獲得最大影響的最小努力。AA 和 AAA 之間的差異可能只有幾個十六進位值。

Checking color accessibility with the eyedropper tool.

您認為無障礙設計會限制您的創造力嗎?

無障礙設計會限制創造力的觀念是一個錯誤的二分法。限制性設計和視覺創新絕非對立。事實上,從歷史上看,創造力的限制一直是人類創造力的最大動力。限制會促進實驗。一旦無障礙設計成為您的新常態,您就不再感到受其限制。它成為設計的自然方法,為創意打開了大門。

關於設計領域的無障礙性,您希望未來看到什麼?

聽起來很奇怪,我希望減少對 Cluse 等產品的需求。我的目標是將包容性設計根深蒂固地融入我們的工具和工作流程中,以至於不再需要第三方無障礙插件。


作為專案的一部分,Yana 為她的作品展覽設計了一些貼紙——我們有五套要贈送!我們甚至會附上一些我們自己的貼紙來增加吸引力。想要贏得獎品的機會,只需在 6 月 21 日之前發送推文給我們,並附上一個優秀的無障礙設計範例。我們將於 6 月 22 日公布幸運的獲獎者。😎

您可能也喜歡

免費試用 Sketch

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

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