榮超：本節(jié)是谷歌Material Design可用性部分的中文完整譯本，非常完整地闡述了提高可用性的方法和技巧。

一.?無(wú)障礙/可訪問(wèn)（Accessibility）

無(wú)障礙設(shè)計(jì)能夠使用戶成功瀏覽、理解和使用您的UI。

原則

讓無(wú)論是視力低下、失明、聽(tīng)力障礙、認(rèn)知障礙或運(yùn)動(dòng)障礙的用戶都可以使用產(chǎn)品。提高產(chǎn)品的可訪問(wèn)性就是提高面向所有用戶產(chǎn)品的可用性。這也是正確的事情。

Material design的內(nèi)置無(wú)障礙注意事項(xiàng)將幫助你的產(chǎn)品適應(yīng)所有用戶。本節(jié)所講主要適用于移動(dòng)端UI設(shè)計(jì)。有關(guān)設(shè)計(jì)和開(kāi)發(fā)無(wú)障礙產(chǎn)品的詳細(xì)信息，請(qǐng)?jiān)L問(wèn) Google accessibility site

清晰

設(shè)計(jì)清晰的布局和調(diào)用不同的操作來(lái)幫助用戶導(dǎo)航。每一個(gè)額外添加的按鈕、圖像和文本行都會(huì)使頁(yè)面變得更加復(fù)雜。所以你需要簡(jiǎn)化你應(yīng)用的UI：

• 清晰可見(jiàn)的元素
• 足夠的對(duì)比度和尺寸大小
• 明確的優(yōu)先級(jí)關(guān)系
• 關(guān)鍵信息一目了然

直接明了

設(shè)計(jì)你的應(yīng)用來(lái)適應(yīng)不同情況的用戶。實(shí)際場(chǎng)景中，面對(duì)使用新產(chǎn)品注意力相對(duì)分散，或使用純文本屏幕閱讀器（一個(gè)使用語(yǔ)音合成朗讀或使用盲文顯示的軟件）的用戶，你的應(yīng)用應(yīng)該讓其中每個(gè)用戶都能輕松地：

導(dǎo)航：給予用戶信心，讓用戶知道自己在應(yīng)用中所處的位置以及當(dāng)下最重要的任務(wù)是什么。

了解重要的任務(wù)：通過(guò)視覺(jué)和文字提示加強(qiáng)重要的信息。使用顏色、形狀、文本和動(dòng)效來(lái)向用戶傳達(dá)正在發(fā)生的事情。

訪問(wèn)你的應(yīng)用：使用合適的內(nèi)容標(biāo)簽去提升純文本版本應(yīng)用的用戶體驗(yàn)。

具體

適配不同平臺(tái)的輔助技術(shù)，就像支持觸摸屏、鍵盤(pán)或鼠標(biāo)輸入方式一樣。例如，你的Android應(yīng)用需要支持Google屏幕閱讀器，TalkBack

輔助技術(shù)通過(guò)屏幕閱讀器、放大設(shè)備、輪椅、助聽(tīng)器或記憶輔助設(shè)備來(lái)幫助殘障人士提高、維持或改善自身功能性的能力。

顏色和對(duì)比

使用顏色和對(duì)比度幫助用戶瀏覽和理解你應(yīng)用的內(nèi)容，同時(shí)了解操作并與正確的元素進(jìn)行交互。

無(wú)障礙調(diào)色板

選擇支持可用性的應(yīng)用主色、輔色和強(qiáng)調(diào)色。確保元素顏色之間有足夠的對(duì)比度，以便視力低下的用戶可以正常瀏覽和使用你的應(yīng)用。

對(duì)比度

根據(jù)萬(wàn)維網(wǎng)聯(lián)盟（W3C），顏色與其背景之間的對(duì)比度基于明度或發(fā)出的光的強(qiáng)度不同分成1-21。

對(duì)比度表示顏色與另一種顏色之間的區(qū)分，通常寫(xiě)成1：1或21：1。比值中兩個(gè)數(shù)之間的差值越大， 顏色間的相對(duì)明度的差值就越高。

W3C建議正文文本和圖像文本的對(duì)比度：

小文本相對(duì)其背景應(yīng)有至少4.5：1的對(duì)比度。

大文本（14 pt bold/18 pt regular及以上字重）相對(duì)其背景應(yīng)有至少3：1的對(duì)比度。

可行

以上文本行遵循了顏色對(duì)比度建議，因此相對(duì)其背景顏色是可讀的。

不可行

以上文本行不符合顏色對(duì)比度建議，并且很難根據(jù)從其背景顏色中進(jìn)行讀取文字

Icons或其他關(guān)鍵元素也應(yīng)使用上述對(duì)比度建議。

可行

這些icons遵循了顏色對(duì)比度建議，因此可以能夠從其背景中突顯出來(lái)。

不可行

這些icons沒(méi)有遵循顏色對(duì)比度建議，所以從其背景中很難辨別。

Logos和裝飾元素

裝飾元素（如logos或插圖）雖然不需要滿足上述對(duì)比度建議，但如果它們?cè)趹?yīng)用中具備重要功能時(shí)，那它們必須能夠被用戶辨識(shí)。

可行

可區(qū)分、辨識(shí)的裝飾logos不需要滿足對(duì)比度。

不可行

沒(méi)必要為了滿足對(duì)比度讓你的logo失真

其他視覺(jué)提示

面對(duì)色盲或看不到顏色差異的用戶，除了顏色外，還需要包含設(shè)計(jì)元素，以此確保這類用戶能夠與其他人一樣接收到相同數(shù)量的信息。

色盲有不同的形式（如紅-綠、藍(lán)-黃、單色）。面對(duì)這類用戶你需要使用多個(gè)視覺(jué)提示來(lái)傳達(dá)重要的狀態(tài)。例如使用路徑、指示器、圖案、紋理或文本等元素來(lái)描述操作和內(nèi)容。

可行

文本字段的錯(cuò)誤狀態(tài)使用了多個(gè)提示進(jìn)行傳遞：標(biāo)題顏色、字段路徑和字段下面的錯(cuò)誤消息提示。

不可行

文本字段的錯(cuò)誤狀態(tài)只通過(guò)紅色路徑進(jìn)行傳遞，但是色盲用戶是無(wú)法感知路徑顏色的。

聲音和動(dòng)效

聲音

聲音是視覺(jué)的替代物，反之亦然。為關(guān)鍵的音頻元素和聲音警告提供隱藏字幕（CC）、文字副本或其他可視化選項(xiàng)。

允許用戶向UI元素添加描述性標(biāo)簽來(lái)使用聲音進(jìn)行應(yīng)用內(nèi)導(dǎo)航。當(dāng)使用屏幕閱讀器（如TalkBack和觸摸探索導(dǎo)航）時(shí)，當(dāng)用戶用指尖觸摸到UI元素時(shí)，標(biāo)簽會(huì)大聲朗讀。

應(yīng)避免下列聲音：

在屏幕閱讀器上播放不必要的聲音，如在進(jìn)入網(wǎng)頁(yè)時(shí)自動(dòng)播放的背景音樂(lè)。如果有背景聲音，請(qǐng)確保用戶可以安全的暫停或停止。
添加到本地元素上的額外聲音（屏幕閱讀器能夠正確解讀本地元素）。

標(biāo)記用戶界面元素（Add audible des criptions to input controls and other elements）

動(dòng)效

Material design利用動(dòng)效來(lái)引導(dǎo)不同視圖間的焦點(diǎn)，這有助于減少用戶分心。用戶跟隨頁(yè)面焦點(diǎn)變化，為了避免分散用戶注意力，那些不重要的元素會(huì)被移除。

為了讓對(duì)運(yùn)動(dòng)和視覺(jué)敏感的用戶能夠舒適地使用界面，請(qǐng)遵循Material design動(dòng)效規(guī)范，同時(shí)它支持以下W3C的動(dòng)效準(zhǔn)則：

• 如果啟用自動(dòng)移動(dòng)、滾動(dòng)或閃爍的內(nèi)容的持續(xù)時(shí)間超過(guò)5s的話將被暫停、停止或隱藏。
• 閃爍內(nèi)容限制在1/2時(shí)間內(nèi)允許三次閃爍, 以滿足閃爍和紅色閃爍閾值。
• 避免在屏幕中央大面積閃爍。

定時(shí)控件

應(yīng)用中的控件可能會(huì)被設(shè)置為在一定時(shí)間后自動(dòng)消失。例如，啟動(dòng)視頻五秒后，播放控件會(huì)從屏幕上淡出。

高優(yōu)先級(jí)控件：

避免在高優(yōu)先級(jí)功能的控件上使用計(jì)時(shí)器，因?yàn)橛脩艉芸赡苓€沒(méi)注意到這些控件時(shí)就已經(jīng)消失不見(jiàn)。例如，TalkBack閱讀控件被用戶激活朗讀時(shí)，如果控件設(shè)置了定時(shí)將會(huì)阻止控件完成任務(wù)。

對(duì)于啟用其他重要功能的控件，請(qǐng)確保用戶可以再次打開(kāi)控件或以其他方式執(zhí)行相同的功能。了解更多的層次結(jié)構(gòu)和焦點(diǎn)。詳情見(jiàn)以下 層級(jí)與焦點(diǎn) 。

自動(dòng)發(fā)聲文本（Read about placing text in a live region.）

樣式

布局

Material design的觸發(fā)目標(biāo)指南能夠幫助那些無(wú)法看到屏幕或有手腳不便問(wèn)題的用戶可以在你的應(yīng)用中正常觸發(fā)元素。

觸發(fā)目標(biāo)

觸發(fā)目標(biāo)是屏幕上響應(yīng)用戶輸入的區(qū)域。這個(gè)區(qū)域超出了元素的可視界限。例如，一個(gè)24x24dp大小的icon，它周圍存在48x48dp的觸發(fā)區(qū)域。

觸發(fā)目標(biāo)應(yīng)至少48x48dp大小。無(wú)論屏幕大小是多少，該范圍大小的觸發(fā)目標(biāo)的物理大小約等于9mm。觸摸屏元素的推薦目標(biāo)大小為7-10mm。為了容納更大范圍的用戶（如發(fā)展運(yùn)動(dòng)能力的兒童），可以適當(dāng)使用更大范圍的觸發(fā)目標(biāo)區(qū)域。

觸發(fā)目標(biāo)間距

在大多數(shù)情況下，觸發(fā)目標(biāo)之間應(yīng)該間隔8dp或更多的空間以確保信息密度的平衡和可用性。

• 頭像：40dp
• Icon：24dp
• 觸發(fā)目標(biāo)：48dp

△ ?觸發(fā)目標(biāo)案例

• 觸發(fā)目標(biāo)高：48dp
• 按鈕高：36dp

△ ?觸發(fā)目標(biāo)和按鈕案例

對(duì)項(xiàng)進(jìn)行分組

將關(guān)聯(lián)項(xiàng)保持在彼此接近的水平，對(duì)于那些視力低下或注視屏幕有缺陷的人是很有幫助的。

可行

滑塊值與滑塊控件接近

不可行

滑塊值離控件太遠(yuǎn)。使用屏幕放大的用戶可能無(wú)法同時(shí)查看到滑塊和滑塊值

字體

為提高可讀性，用戶可能會(huì)增大字號(hào)。移動(dòng)設(shè)備和瀏覽器包含允許用戶調(diào)整系統(tǒng)范圍內(nèi)字體大小的功能。要在Android應(yīng)用中啟用系統(tǒng)字體大小，請(qǐng)將文本及其相關(guān)的容器的單位變?yōu)閟p。

請(qǐng)確保大的外文字體有著足夠多的空間。推薦外文字體大小的相關(guān)信息, 請(qǐng)參閱 行高

層級(jí)與焦點(diǎn)

應(yīng)用應(yīng)該向用戶傳遞他們?cè)趹?yīng)用中的位置。導(dǎo)航控件應(yīng)該易于定位和清晰寫(xiě)入。視覺(jué)反饋（如標(biāo)簽、顏色和icons）和觸摸反饋表示界面中可訪問(wèn)的內(nèi)容。

導(dǎo)航需要有清晰的任務(wù)流程，同時(shí)能夠以最少步驟達(dá)成。焦點(diǎn)控制，或控制鍵盤(pán)和閱讀焦點(diǎn)的能力，應(yīng)該在頻繁使用的任務(wù)中實(shí)現(xiàn)。

啟用焦點(diǎn)導(dǎo)航（Use focus controls for navigation）

屏幕閱讀器

屏幕閱讀器為用戶提供了多種瀏覽屏幕的方式，其中包括:

• 觸摸界面屏幕閱讀器允許用戶在屏幕上移動(dòng)他們的手指去聽(tīng)手指下方傳遞的信息。這種方式能夠快速的為用戶營(yíng)造整個(gè)界面的感覺(jué)。另外，用戶也可以從肌肉記憶中快速找到并移動(dòng)到一個(gè)UI元素上。在TalkBack中，此功能稱為“通過(guò)觸摸進(jìn)行探索”。最后，用戶必須雙擊才能進(jìn)行選擇。
• 用戶也可以通過(guò)在屏幕上來(lái)回滑動(dòng)來(lái)移動(dòng)焦點(diǎn)，從上到下進(jìn)行線性閱讀。這能夠讓用戶可以在某些元素上進(jìn)行磨練。在TalkBack中，這稱為線性導(dǎo)航。
• 用戶可以在“觸摸式瀏覽”和“線性導(dǎo)航”模式之間切換。當(dāng)頁(yè)面內(nèi)標(biāo)記使用了適當(dāng)?shù)恼Z(yǔ)義標(biāo)示時(shí)，一些輔助技術(shù)允許用戶在這些頁(yè)面標(biāo)記（如標(biāo)題）之間進(jìn)行導(dǎo)航。
• 硬件或軟件方面控制器（如D-pad、軌跡球或鍵盤(pán)）允許用戶以線性方式從選區(qū)跳轉(zhuǎn)到另一選區(qū)。

層級(jí)

根據(jù)它們之間的重要性區(qū)分將其放置在頁(yè)面中。

重要操作: 在屏幕的頂部或底部放置重要的操作（可通過(guò)快捷方式到達(dá)）。

相關(guān)項(xiàng): 將類似層次結(jié)構(gòu)的相關(guān)項(xiàng)放在相鄰的位置。

可行

在屏幕頂部放置的重要操作，它們會(huì)在層次結(jié)構(gòu)中加倍賦予更大的重要性。

不可行

如果重要的操作嵌入到其他內(nèi)容中去，用戶會(huì)不知道頁(yè)面上最重要的元素是什么。

焦點(diǎn)順序

輸入焦點(diǎn)應(yīng)遵循視覺(jué)布局的順序：從屏幕的頂部到底部。同時(shí)也是最重要的到最不重要的排序。決定以下的焦點(diǎn)和操作：

• 元素接收焦點(diǎn)的順序
• 元素的分組方式
• 當(dāng)元素焦點(diǎn)消失時(shí)焦點(diǎn)移動(dòng)
• 通過(guò)視覺(jué)指示器和輔助功能文本的組合來(lái)說(shuō)明焦點(diǎn)存在的位置。

分組

將相似項(xiàng)進(jìn)行分組。這些組對(duì)內(nèi)容進(jìn)行組織。

轉(zhuǎn)換

屏幕和任務(wù)之間的焦點(diǎn)遍歷應(yīng)盡可能的連續(xù)。

如果任務(wù)被中斷然后再繼續(xù)，請(qǐng)將焦點(diǎn)放在先前聚焦的元素上。

△ ?綠色圓圈表示屏幕上元素接收焦點(diǎn)的順序

安裝啟用

通過(guò)使用標(biāo)準(zhǔn)的平臺(tái)控件，你的應(yīng)用將自動(dòng)包含某平臺(tái)輔助技術(shù)中正常運(yùn)行所需的標(biāo)記和代碼。同時(shí)能夠適配你的應(yīng)用以滿足每個(gè)平臺(tái)上的無(wú)障礙標(biāo)準(zhǔn)和輔助技術(shù) (包括快捷方式和結(jié)構(gòu)），從而給予用戶一個(gè)有效的體驗(yàn)。

可行

此屏使用了該平臺(tái)的標(biāo)準(zhǔn)對(duì)話框

不可行

此屏使用了非標(biāo)準(zhǔn)的對(duì)話框來(lái)執(zhí)行標(biāo)準(zhǔn)化的對(duì)話任務(wù)。如果想實(shí)現(xiàn)無(wú)障礙訪問(wèn)就需要額外的編碼和測(cè)試讓這個(gè)非標(biāo)準(zhǔn)的控件運(yùn)行輔助技術(shù)

設(shè)置中打開(kāi)平臺(tái)的輔助功能來(lái)測(cè)試你的設(shè)計(jì)。

其他設(shè)計(jì)注意事項(xiàng)：

使用可伸縮文本和寬泛的布局來(lái)適配可能打開(kāi)了大文本、顏色校正、放大或其他輔助設(shè)置的用戶。

使用鍵盤(pán)/鼠標(biāo)作為輸入方式的界面中的每個(gè)任務(wù)和所有懸停（hover）信息需要只通過(guò)鍵盤(pán)就能夠進(jìn)行訪問(wèn)。

使用手指觸摸作為輸入方式的應(yīng)允許屏幕閱讀器和其他輔助技術(shù)設(shè)備對(duì)界面進(jìn)行朗讀。朗讀的文本對(duì)用戶來(lái)說(shuō)應(yīng)該是有意義且有幫助的。

可行

此UI已擴(kuò)展適配放大和大文本輔助設(shè)置

不可行

此UI沒(méi)有適配放大和大文本輔助設(shè)置。部分內(nèi)容已經(jīng)重疊或被截?cái)唷?/p>

標(biāo)簽可視化UI元素

屏幕閱讀器需要讓用戶知道哪些UI元素是能被點(diǎn)擊觸發(fā)的。要使屏幕閱讀器能夠大聲讀出組件的名稱，請(qǐng)將 contentDes cription 屬性添加到組件 (如按鈕、icons和包含icons但無(wú)文本的tabs) 中。

設(shè)置UI元素標(biāo)簽（Use the contentDes cription attribute to set labels）

• 設(shè)置搜索icon標(biāo)簽
• 設(shè)置麥克風(fēng)icon標(biāo)簽

• 設(shè)置編輯icon標(biāo)簽
• 設(shè)置聊天icon標(biāo)簽

幫助文檔

任何具備特殊輔助注意事項(xiàng)的功能都應(yīng)包含在幫助文檔中。例如，閱讀該指南了解如何在Google Drive中使用屏幕閱讀器。

測(cè)試和研究

遵循這些輔助指南將有助于提高應(yīng)用的可訪問(wèn)性，但是不能保證完全的可訪問(wèn)體驗(yàn)。所以建議你：
在各種輔助技術(shù)啟用下測(cè)試完全你應(yīng)用中的任務(wù)。例如，通過(guò)在TalkBack中觸摸來(lái)打開(kāi)“探索”，同時(shí)更改文本朗讀的速度。

讓有障礙的用戶測(cè)試你的應(yīng)用。

考慮如何在一連貫的用戶流程中對(duì)個(gè)別元素進(jìn)行訪問(wèn)。

確保每個(gè)用戶都能完成你希望用戶完成的主要任務(wù)。

與用戶交談，特別是那些使用輔助技術(shù)的人。了解他們的需求--他們想從你的應(yīng)用中得到什么。他們使用哪些工具以及他們?nèi)绾问褂盟鼈儭Ｊ煜み@些工具，這樣你就能給他們最好的體驗(yàn)。

△ ?人們用不同方式使用輔助技術(shù)

描述

清晰、有用的輔助描述文本能夠讓用戶更容易訪問(wèn)UI。視力受限或失明的用戶能夠從清晰的口頭描述中獲得訪問(wèn)幫助。輔助描述文本是指屏幕閱讀可訪問(wèn)性軟件使用的文本，例如Android上的TalkBack、iOS上的VoiceOver和桌面端上的JAWS。屏幕閱讀器朗讀屏幕上的所有文本，包括可見(jiàn)文本和不可見(jiàn)的替代文本。

輔助描述文本包括可見(jiàn)文本（包括UI元素的標(biāo)簽、按鈕上的文本、鏈接和表單) 和不顯示在屏幕上的不可見(jiàn)的描述（如不帶文本標(biāo)簽按鈕的替代文本)。有時(shí)，屏幕上的標(biāo)簽可以用輔助描述文本覆蓋，從而為用戶提供更多信息。

可見(jiàn)的和不可見(jiàn)的文本應(yīng)該具備有意義的描述和獨(dú)立的意義，因?yàn)橐恍┯脩糁煌ㄟ^(guò)網(wǎng)頁(yè)上的標(biāo)題或鏈接進(jìn)行瀏覽。使用屏幕閱讀器測(cè)試你的應(yīng)用--識(shí)別出缺少的區(qū)域或確定使用更好的輔助描述文本。

簡(jiǎn)潔

內(nèi)容和輔助描述文本需簡(jiǎn)短清晰。文本越短，用戶就可以越快地瀏覽它。

切換到heyfromjonathan@gmail.com。

可行

清晰和簡(jiǎn)短的輔助描述文本。

賬戶切換開(kāi)關(guān)。切換賬戶到 heyfromjonathan@gmail。

不可行

冗長(zhǎng)的輔助描述文本。

避免在文本中包含控件類型或狀態(tài)

屏幕閱讀器可以通過(guò)聲音自動(dòng)述說(shuō)控件的類型或狀態(tài)，或者在輔助描述文本之前或之后說(shuō)出控件名稱。

可行

使用簡(jiǎn)短的描述

不可行

不寫(xiě)入控件類型

開(kāi)發(fā)人員注意：如果控件類型或狀態(tài)未正確讀取，則控件的可訪問(wèn)性role可能設(shè)置不當(dāng)或?yàn)樽远x控件。每個(gè)元素在網(wǎng)站上都應(yīng)該有一個(gè)相關(guān)的可訪問(wèn)性role，或者被編碼為正確發(fā)布。這意味著按鈕應(yīng)設(shè)置為按鈕，復(fù)選框?yàn)閺?fù)選框，從而以便將控件的類型或狀態(tài)正確地傳達(dá)給用戶。如果從本地UI元素?cái)U(kuò)展或繼承，則會(huì)得到正確的role。如果不是，你可以在每個(gè)平臺(tái)上覆蓋此信息以獲得可訪問(wèn)性（用于web的ARIA、AccessibilityNodeInfo for Android）。

在Android上，將控件的類的 name 字段AccessibilityNodeInfo設(shè)置為 "android.widget.Button"。

構(gòu)建可訪問(wèn)的自定義視圖

僅通過(guò) Wi-Fi 下載。

可行

使用簡(jiǎn)短的描述。

已選擇通過(guò) Wi-Fi 下載。

可行

過(guò)多描述

表示元素的含義

使用操作動(dòng)詞來(lái)表示元素或鏈接的作用，而不是通過(guò)描述元素外觀。這樣才能使視力受損的用戶理解。其中，鏈接文本需：

說(shuō)明點(diǎn)擊鏈接將執(zhí)行的任務(wù)。

避免含糊的描述，如“點(diǎn)擊這里”。

確保元素在所使用的任何地方都具備相同的描述。

可行

朗讀中的描述指示該icon所代表的操作

不可行

描述icon的外觀并不能清楚地說(shuō)明該操作的作用

可行

導(dǎo)航菜單的輔助描述文本可以是“顯示/隱藏導(dǎo)航菜單” (首選) 或“顯示/隱藏主菜單”(次選)。

可行

朗讀時(shí)，描述文本“側(cè)邊抽屜”并不能表示其操作的作用。

元素和其狀態(tài)更改

對(duì)于在確切含義或狀態(tài)之間切換的icon，請(qǐng)根據(jù)向用戶顯示的方式來(lái)描述icon。

如果icon為列表項(xiàng)所有，請(qǐng)將其設(shè)置為復(fù)選框，以便屏幕閱讀器表達(dá)其當(dāng)前狀態(tài)，例如“on”或“off”。

如果icon是一個(gè)操作，請(qǐng)編寫(xiě)在選擇icon時(shí)發(fā)生操作的文本標(biāo)簽，如“添加到收藏夾”。

元素的使用方式將影響它們的展示方式。例如，如果星形icon代表向“收藏”中添加?xùn)|西的操作，則在應(yīng)用中需表達(dá)為“添加到收藏夾”或“從收藏中刪除”。

不要提及確定的手勢(shì)或交互

不要告訴用戶如何與控件進(jìn)行物理交互，因?yàn)樗麄兛赡苁褂面I盤(pán)或其他設(shè)備進(jìn)行瀏覽，而不是用手指或鼠標(biāo)。輔助軟件將向用戶描述正確的交互方式。

可行

指令“語(yǔ)音搜索”的描述與輸入方式為語(yǔ)音的用戶任務(wù)（搜索）配對(duì)

不可行

指令“點(diǎn)擊”描述不準(zhǔn)確，因?yàn)樗皇羌せ畲丝丶奈ㄒ环椒ǎㄓ脩艨梢酝ㄟ^(guò)鍵盤(pán)按鍵、開(kāi)關(guān)設(shè)備或盲文顯示進(jìn)行選擇）。與此同時(shí)，這個(gè)例子中用戶的主要任務(wù)是搜索，所以應(yīng)該向用戶提到操作而不是“說(shuō)話（speak）”。

確認(rèn)操作

使用對(duì)話框、toasts或snackbars（Android）來(lái)確定或確認(rèn)用戶操作的破壞性（如“刪除”或“移除”）或難以撤消操作。

對(duì)于通過(guò)可視方式確認(rèn)的操作（例如在刪除項(xiàng)目時(shí)宮格重新排列）就不需要toasts。在這些情況下添加輔助描述文本提供確認(rèn)。

提供提示語(yǔ)音

提示語(yǔ)音能為不清晰的操作提供額外的提示信息。例如，Android的“雙擊選擇”功能在用戶選擇某個(gè)項(xiàng)目但沒(méi)有雙擊選擇時(shí)提示。Android的TalkBack也會(huì)朗讀任何與元素相關(guān)的自定義操作。謹(jǐn)慎地使用提示語(yǔ)音（僅適用于復(fù)雜的UI）。

Android自定義操作

二. ?雙向性（Bidirectionality）

像阿拉伯語(yǔ)和希伯來(lái)語(yǔ)這種從右向左（RTL）閱讀的語(yǔ)言，需要符合閱讀習(xí)慣確保內(nèi)容能被這類用戶正常閱讀。

鏡像UI概述

從左向右（LTR）和從右向左（RTL）語(yǔ)言系統(tǒng)之間的主要區(qū)別是內(nèi)容的顯示方向：

LTR的語(yǔ)言從左向右顯示內(nèi)容

RTL的語(yǔ)言從右向左顯示內(nèi)容

RTL的內(nèi)容也會(huì)影響一些icons和圖像的顯示方向，特別是那些描述一系列事件的內(nèi)容。

元素 ? ? ? ? ? LTR ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? RTL

文本 ? ? ? ? ? 句子從左向右讀 ? ? ? ? ? ? ? ? ? ?句子從右向左讀

時(shí)間軸 ? ? ?從左到右的時(shí)間序列 ? ? ? ? ? 從右到左的時(shí)間序列

圖像 ? ? ? ? ? 從左向右向前指示：→ ? ? ?從右向左向前指示：←

當(dāng)UI從LTR更改為RTL（反之一樣）時(shí)被稱為鏡像。RTL布局是LTR布局的鏡像，不同的布局會(huì)影響內(nèi)容、文本和圖像的安排。

當(dāng)UI從一個(gè)方向更改為另一方向時(shí)，以下項(xiàng)將不被鏡像：

數(shù)字

未翻譯的文本（即使它是詞組的一部分）

文本應(yīng)遵循語(yǔ)言始終在其正確的方向。例如，任何LTR的單詞（如URL），即使UI的其余部分處于RTL中，它仍然會(huì)繼續(xù)以LTR的格式顯示。

可行

文本和數(shù)字需始終為該語(yǔ)言的正確閱讀方向

不可行

LTR文本不應(yīng)以相反的順序顯示，保持原來(lái)的閱讀順序。

當(dāng)UI被鏡像時(shí)，以下內(nèi)容將會(huì)改變：

• 文本字段icons顯示在字段的另一側(cè)
• 導(dǎo)航按鈕以相反的順序顯示
• 類似“箭頭”這樣表示方向的icons會(huì)被鏡像
• 文本（如果轉(zhuǎn)換為RTL語(yǔ)言）向右側(cè)對(duì)齊

以下內(nèi)容不被鏡像：

• 不表示方向的icons，如相機(jī)icon
• 數(shù)字，如時(shí)鐘和電話號(hào)碼
• 圖表和圖形

△ ?LTR中的英語(yǔ)用戶界面

△ ?RTL中的阿拉伯語(yǔ)用戶界面，數(shù)字以LTR形式顯示

△ ?LTR中的文本編輯菜單

△ ?RTL中的文本編輯菜單

圖中1：與雙向性相關(guān)的icons被鏡像，以此反映一行文字的開(kāi)始和結(jié)尾

LTR頁(yè)面

在LTR頁(yè)面上，第一項(xiàng)個(gè)tab向左對(duì)齊，用戶向左滑動(dòng)可以查看更多tabs。

• 觸摸目標(biāo)高度：48dp
• 第一個(gè)tab距屏幕邊緣的距離：72dp
• Tab標(biāo)簽底部?jī)?nèi)邊距：20dp
• Tab標(biāo)簽左右內(nèi)邊距：12dp

RTL頁(yè)面

在RTL頁(yè)面上，第一項(xiàng)個(gè)tab向右對(duì)齊，用戶向右滑動(dòng)可以查看更多tabs

• 觸摸目標(biāo)高度：48dp
• 第一個(gè)tab距屏幕邊緣的距離：72dp
• Tab標(biāo)簽底部?jī)?nèi)邊距：20dp
• Tab標(biāo)簽左右內(nèi)邊距：12dp

△ ?LTR頁(yè)面

RTL頁(yè)面

• 標(biāo)題、icons和UI元素從右向左顯示
• 后退按鈕指向右
• 文本右對(duì)齊
• 主、輔按鈕匹配讀取方向被鏡像
• ?在文本右側(cè)顯示復(fù)選框
• 不表示方向的icons不改變
• 不同語(yǔ)言之間單位放置的地方也不同
• 進(jìn)度條在內(nèi)容閱讀的方向上進(jìn)行填充

LTR

導(dǎo)航、溢出菜單和從左向右顯示的icons

Icon向屏幕邊緣的內(nèi)邊距：16dp

標(biāo)題距屏幕邊緣：72dp

標(biāo)題的下內(nèi)邊距：20dp

導(dǎo)航欄高：56dp

溢出菜單的內(nèi)邊距：16dp

RTL

• 導(dǎo)航、溢出菜單和從右向左顯示的icons
• Icon向屏幕邊緣的內(nèi)邊距：16dp
• 標(biāo)題距屏幕邊緣：72dp
• 標(biāo)題的下內(nèi)邊距：20dp
• 導(dǎo)航欄高：56dp
• 溢出菜單的內(nèi)邊距：16dp

LTR

• LTR icons和文本的外邊距和內(nèi)邊距
• 列表項(xiàng)高：72dp
• Icon向屏幕左邊緣的外邊距：16dp
• 列表項(xiàng)距離屏幕左側(cè)邊緣：72dp

RTL

• 當(dāng)鏡像布局時(shí)，icon和文本的內(nèi)外邊距也會(huì)切換位置以匹配RTL的布局。
• 列表項(xiàng)高：72dp
• Icon向屏幕右邊緣的外邊距：16dp
• 列表項(xiàng)距離屏幕左側(cè)邊緣：72dp

RTL鏡像指南

當(dāng)文本、布局和icons都被鏡像匹配從右向左（RTL）UI時(shí)，與時(shí)間相關(guān)的任何內(nèi)容都需要從右向左改變。例如，在RTL布局中，向前是指向左側(cè)，向后是指向右側(cè)。

有關(guān)RTL icons的詳細(xì)開(kāi)發(fā)指南，請(qǐng)查閱：

• RTL Material Design icons 指南（了解如何鏡像圖標(biāo)）
• RTL Sketch 插件（將現(xiàn)有設(shè)計(jì)和資源轉(zhuǎn)換為RTL格式）

什么時(shí)候需要鏡像

最重要的鏡像icons是“后退”和“前進(jìn)”按鈕。后退和前進(jìn)導(dǎo)航按鈕剛好相反。

△ ?LTR 后退按鈕

△ ?RTL 后退按鈕

△ ?LTR 前進(jìn)按鈕

△ ?RTL 前進(jìn)按鈕

顯示向前移動(dòng)的icon需要鏡像。

在LTR的UI中，一輛面向右側(cè)的自行車通常會(huì)傳達(dá)一種向前移動(dòng)的感覺(jué)。

在RTL的UI中，一輛面向左側(cè)的自行車一樣會(huì)傳達(dá)一種向前移動(dòng)的感覺(jué)。

大多數(shù)RTL國(guó)家不會(huì)鏡像斜杠。

可行

LTR的斜杠一樣使用RTL環(huán)境

不可行

RTL環(huán)境下斜杠不需要鏡像

右側(cè)帶有滑塊的音量icon需要鏡像。滑塊在RTL下，音量應(yīng)從右邊開(kāi)始計(jì)算。

△ ?LTR：帶滑塊的音量icon

△ ?RTL：帶滑塊的音量icon

有些icon中帶有時(shí)間的隱喻。例如，Google文檔中的“重做”和“撤消”按鈕用一個(gè)水平（線性）和環(huán)形（循環(huán)）方向指向來(lái)隱喻“時(shí)間”。

在LTR中，環(huán)形和水平指向與時(shí)間進(jìn)度相同。但在RTL中，你需要考慮是否還用環(huán)形或水平方向去指示時(shí)間。

△ ?LTR：Google文檔的工具欄中的“重做”和“撤消”按鈕

包含文本表示形式的icons的鏡像需要小心謹(jǐn)慎。

RTL中文本向右對(duì)齊。如果段落開(kāi)頭有段落縮進(jìn)，且段落末尾有未完成的行或右側(cè)出現(xiàn)不齊整的情況，那需要鏡像icon。

△ ?LTR：聊天icon

△ ?RTL：聊天icon

什么時(shí)候不需要鏡像

在RTL中，時(shí)間的線性指向發(fā)生鏡像時(shí)，時(shí)間的循環(huán)指向就不需要鏡像。對(duì)于RTL語(yǔ)言，時(shí)鐘依舊是順時(shí)針旋轉(zhuǎn)。也就是說(shuō)不需要鏡像如帶有順時(shí)針指向的時(shí)鐘icon、循環(huán)刷新或進(jìn)度指示器。

△ ?刷新icon顯示時(shí)間朝前，方向?yàn)轫槙r(shí)針。該icon沒(méi)有鏡像。

△ ?歷史icon在時(shí)間上朝后，方向是逆時(shí)針的。該icon沒(méi)有鏡像。

某些icons不存在鏡像與否。

例如，物理鍵盤(pán)在世界各地看起來(lái)都一樣，所以它們不應(yīng)該被鏡像。

△ ?鍵盤(pán)icon

△ ?耳機(jī)icon

某些icons看起來(lái)似乎具有方向性，但實(shí)際上它們代表的是用右手持有物體。

例如，搜索icon的手柄通常在右下角。因?yàn)榇蠖鄶?shù)用戶是右撇子。

使用RTL書(shū)寫(xiě)的國(guó)家的大多數(shù)用戶也是用右手的，所以這樣的icon不需要鏡像。

△ ?搜索icon

△ ?咖啡館icon

時(shí)間經(jīng)過(guò)

任何描述時(shí)間經(jīng)過(guò)的東西都需要被反映出來(lái)。

不要鏡像媒體播放按鈕和進(jìn)度條，因?yàn)樗鼈冎傅氖钦诓シ诺摹按艓А钡姆较颍皇菚r(shí)間方向。

由于媒體播放按鈕和進(jìn)度條反映了磁帶的方向，所以它們不需要鏡像

可行

用于播放的媒體控件一直都是LTR

不可行

不要鏡像媒體播放按鈕或進(jìn)度條。這些元素的方向表示磁帶的方向，而不是時(shí)間

本地化

圖形中的文本。

包含文本的圖形通常需要本地化。

數(shù)字

數(shù)字（包括包含數(shù)字的icon）必須針對(duì)使用不同數(shù)字符號(hào)的語(yǔ)言進(jìn)行本地化。例如，孟加拉語(yǔ)、馬拉地語(yǔ)、尼泊爾語(yǔ)和一些阿拉伯語(yǔ)語(yǔ)言環(huán)境下使用的不同數(shù)字符號(hào)形式。

△ ?包含數(shù)字的LTR icon

△ ?阿拉伯語(yǔ)中的RTL icon

鏡像

有時(shí)候，即使UI沒(méi)有被鏡像，也可能需要鏡像內(nèi)容。例如，當(dāng)用戶在LTR文檔中編輯RTL段落時(shí)，RTL文本的工具欄按鈕需要在RTL布局中。

在LTR文檔的這個(gè)RTL段落中，即使主要的UI方向是LTR的，但縮進(jìn)和列表按鈕也應(yīng)該是RTL的。

• 段落對(duì)齊
• Icons翻轉(zhuǎn)
• 希伯來(lái)語(yǔ)文本方向?yàn)镽TL

本章結(jié)束。想繼續(xù)學(xué)習(xí)的同學(xué)記得轉(zhuǎn)微博喲。

「Material Design 好文合集」

官方譯文：

1. 《中文版來(lái)了！新版Material Design 官方動(dòng)效指南》
2. 《中文版來(lái)了！新版MATERIAL DESIGN 官方動(dòng)效指南（二）》
3. 《中文版來(lái)了！新版MATERIAL DESIGN 官方動(dòng)效指南（三）》

學(xué)習(xí)筆記：

1. 《學(xué)霸的自學(xué)筆記！Material Design設(shè)計(jì)規(guī)范學(xué)習(xí)心得》
2. 《重磅教程！幫你全面徹底搞定MATERIAL DESIGN的學(xué)習(xí)筆記》

素材篇：

1. 《新鮮熱辣！一組實(shí)用的MATERIAL DESIGN風(fēng)格素材！》

實(shí)戰(zhàn)教程：

1. 《重磅改版！網(wǎng)易新聞安卓客戶端MATERIAL DESIGN實(shí)戰(zhàn)》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com