想提高可用性？看谷歌Material Design 的官方教程是怎么做的！

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

一.?無障礙/可訪問（Accessibility）

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

原則

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

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

清晰

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

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

直接明了

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

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

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

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

具體

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

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

顏色和對比

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

無障礙調(diào)色板

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

對比度

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

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

W3C建議正文文本和圖像文本的對比度：

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

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

可行

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

不可行

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

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

可行

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

不可行

這些icons沒有遵循顏色對比度建議，所以從其背景中很難辨別。

Logos和裝飾元素

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

可行

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

不可行

沒必要為了滿足對比度讓你的logo失真

其他視覺提示

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

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

可行

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

不可行

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

聲音和動效

聲音

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

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

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

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

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

動效

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

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

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

定時控件

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

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

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

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

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

樣式

布局

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

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

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

觸發(fā)目標(biāo)應(yīng)至少48x48dp大小。無論屏幕大小是多少，該范圍大小的觸發(fā)目標(biāo)的物理大小約等于9mm。觸摸屏元素的推薦目標(biāo)大小為7-10mm。為了容納更大范圍的用戶（如發(fā)展運(yùn)動能力的兒童），可以適當(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)和按鈕案例

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

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

可行

滑塊值與滑塊控件接近

不可行

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

字體

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

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

層級與焦點(diǎn)

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

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

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

屏幕閱讀器

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

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

層級

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

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

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

可行

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

不可行

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

焦點(diǎn)順序

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

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

分組

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

轉(zhuǎn)換

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

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

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

安裝啟用

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

可行

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

不可行

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

設(shè)置中打開平臺的輔助功能來測試你的設(shè)計。

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

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

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

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

可行

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

不可行

此UI沒有適配放大和大文本輔助設(shè)置。部分內(nèi)容已經(jīng)重疊或被截斷。

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

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

測試和研究

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

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

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

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

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

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

描述

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

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

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

簡潔

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

切換到heyfromjonathan@gmail.com。

可行

清晰和簡短的輔助描述文本。

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

不可行

冗長的輔助描述文本。

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

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

可行

使用簡短的描述

不可行

不寫入控件類型

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

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

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

僅通過 Wi-Fi 下載。

可行

使用簡短的描述。

已選擇通過 Wi-Fi 下載。

可行

過多描述

表示元素的含義

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

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

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

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

可行

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

不可行

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

可行

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

可行

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

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

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

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

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

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

不要提及確定的手勢或交互

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

可行

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

不可行

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

確認(rèn)操作

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

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

提供提示語音

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

Android自定義操作

二. ?雙向性（Bidirectionality）

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

鏡像UI概述

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

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

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

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

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

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

時間軸 ? ? ?從左到右的時間序列 ? ? ? ? ? 從右到左的時間序列

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

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

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

數(shù)字

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

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

可行

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

不可行

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

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

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

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

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

△ ?LTR中的英語用戶界面

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

△ ?LTR中的文本編輯菜單

△ ?RTL中的文本編輯菜單

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

LTR頁面

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

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

RTL頁面

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

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

△ ?LTR頁面

RTL頁面

• 標(biāo)題、icons和UI元素從右向左顯示
• 后退按鈕指向右
• 文本右對齊
• 主、輔按鈕匹配讀取方向被鏡像
• ?在文本右側(cè)顯示復(fù)選框
• 不表示方向的icons不改變
• 不同語言之間單位放置的地方也不同
• 進(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)鏡像布局時，icon和文本的內(nèi)外邊距也會切換位置以匹配RTL的布局。
• 列表項(xiàng)高：72dp
• Icon向屏幕右邊緣的外邊距：16dp
• 列表項(xiàng)距離屏幕左側(cè)邊緣：72dp

RTL鏡像指南

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

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

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

什么時候需要鏡像

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

△ ?LTR 后退按鈕

△ ?RTL 后退按鈕

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

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

顯示向前移動的icon需要鏡像。

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

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

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

可行

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

不可行

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

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

△ ?LTR：帶滑塊的音量icon

△ ?RTL：帶滑塊的音量icon

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

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

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

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

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

△ ?LTR：聊天icon

△ ?RTL：聊天icon

什么時候不需要鏡像

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

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

△ ?歷史icon在時間上朝后，方向是逆時針的。該icon沒有鏡像。

某些icons不存在鏡像與否。

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

△ ?鍵盤icon

△ ?耳機(jī)icon

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

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

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

△ ?搜索icon

△ ?咖啡館icon

時間經(jīng)過

任何描述時間經(jīng)過的東西都需要被反映出來。

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

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

可行

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

不可行

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

本地化

圖形中的文本。

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

數(shù)字

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

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

△ ?阿拉伯語中的RTL icon

鏡像

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

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

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

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

「Material Design 好文合集」

官方譯文：

1. 《中文版來了！新版Material Design 官方動效指南》
2. 《中文版來了！新版MATERIAL DESIGN 官方動效指南（二）》
3. 《中文版來了！新版MATERIAL DESIGN 官方動效指南（三）》

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

1. 《學(xué)霸的自學(xué)筆記！Material Design設(shè)計規(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è)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

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