Google Material Design 正體中文版

親和性

親和性

產品親和性使任何人(無論能力或身心障礙)都能夠瀏覽、理解並使用之。 越具有良好親和性的產品,能夠越廣泛地讓使用者接受。

以下這些準則將提供設計師們學習「親和性」的開端。 設計一個良好親和性的產品是一個複雜的題目,需要深度的研究, 更多資訊請上Google Accesibility site

身障人士如何使用你的產品?

首先,思考使用者怎麼透過輔助性科技使用你的產品? 想像在以下的情況下使用你的產品:

  • 沒有聲音
  • 沒有色彩
  • 螢幕高採用對比模式
  • 螢幕放大模式
  • 僅能使用螢幕閱讀器
  • 僅能使用聲控
  • 以上狀況同時出現時

此時,考量以下幾個影響親和性的關鍵區域: 導覽、可讀性、導引與回饋。

導覽

導覽能快速有效地幫助使用者。好的導覽取決於使用者使用的速度與效率有多好 ((例如跳到關鍵區塊或跳回主要導覽列)? 先呈現最重要的資訊,再利用一些小變化,例如將「create」按鈕帶到頂端,能夠使導覽速度更加快速。

觸碰標的至少要有48x48 pixel的面積。在任何觸控螢幕中,螢幕上元素的大小,建議至少要有48x48 pixel。 而元素之間的距離至少要8 dp。

支援無滑鼠與標準手勢導覽。在你的設計中,任何操作或使用方式,能在網路介面上使用鍵盤嗎?在行動裝置上能透過標準手勢互動嗎?盲人使用者無法使用滑鼠瀏覽視覺界面。取而代之的,他們使鍵盤或手勢。確定滑鼠移至上方才會出現的資訊,在沒滑鼠時仍然能正常被取得。若有鍵盤熱鍵,確保整個平台的鍵盤熱鍵保持一致。

管理使用者專注的重點。 確保使用者關注的焦點不會因彈跳視窗、警告訊息或多螢幕而分心。 思考使用者在關閉彈跳視窗後如何回到原始主畫面,如同彈跳視窗出現前的狀態。

可讀性

確定你的產品套用大型字體時仍然可以使用。當使用者將螢幕或字型放大時,是否仍保有良好的閱讀性? 關鍵的元素是否消失?功能是否可正常使用?在畫面上會不會重疊? 你可以利用OS/Browser/App提供的親和性開發工具檢查螢幕縮放與大型字體時狀態。

確定關鍵文字有良好的對比。普遍來說,對比度比率在 4.5:1最為適當。 替背景與關鍵元素設置適當的對比度,讓使用者與視弱的使用者都能夠更輕易地閱讀你的訊息。 較小的字體需要較高的對比度;較大型的標頭則能容許更低的對比。

不要只依賴顏色傳達關鍵資訊。顏色是色盲使用者的一大障礙。 當重要訊息透過顏色傳達時(例如交通流量:紅色代表塞車;綠色代表流暢),為顏色的設置替代方案是很重要的,確保任何使用者即使無法辨認顏色,都能接收到一樣的訊息。 除了顏色,你也能利用形狀、圖案、紋路或文字傳達訊息。

提供空間關係的線索。使用聽覺元素時,是否有提供標題、副本或任何視覺的替代訊息? 這個原則一樣適用於系統警告聲。同樣的,你也該為視覺訊息設置替代的聽覺訊息。

導引與回饋

讓互動控制清楚且容易察覺。互動控制的原件是否有相關的標簽、簡介或占位,以提醒使用者的目的?元素是否有一致的命名方式貫穿整個應用程式?替使用者提供及時的相關協助訊息。命名應用程式的元素時,要確保前後規則的一致性。

替圖片或影片設置替代文字。當使用圖像式傳達訊息時,你是否忽略了提供替代文字? 標簽是否符合語義?例如使用「下載晚餐菜單」而非只是「下載」,以符合語義。 所有的圖片與圖標都要設置替代文字,並且避免使用文字圖片,以免標準小工具無法運用。

提供指示與協助。使用者對於元素有問題時是否能及時找到說明指南?如果某個關鍵元素過期了,是否有其他方式重新啟動?提供清楚且容易查詢的說明指南,讓使用者能查詢有哪些熱鍵或手勢可用與各功能的使用方式。

賦予你的連結意義。連結的意義是否明確?設置連結時,常見的「點選這裡」無法提供任何連結意義。 賦予連結該有的意義,例如將連結顯示為「裝置設定」就比「點選此處」好得多。 另外也能利用輔助模式,讓使用者跳過不相干的資訊,直接掃描連結,提升導覽的效率。

翻譯: Peter