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

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

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

原則

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

Material design的內置無障礙注意事項將幫助你的產品適應所有用戶。本節所講主要適用于移動端UI設計。有關設計和開發無障礙產品的詳細信息，請訪問 Google accessibility site

清晰

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

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

直接明了

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

導航：給予用戶信心，讓用戶知道自己在應用中所處的位置以及當下最重要的任務是什么。

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

訪問你的應用：使用合適的內容標簽去提升純文本版本應用的用戶體驗。

具體

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

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

顏色和對比

使用顏色和對比度幫助用戶瀏覽和理解你應用的內容，同時了解操作并與正確的元素進行交互。

無障礙調色板

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

對比度

根據萬維網聯盟（W3C），顏色與其背景之間的對比度基于明度或發出的光的強度不同分成1-21。

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

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

小文本相對其背景應有至少4.5：1的對比度。

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

可行

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

不可行

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

Icons或其他關鍵元素也應使用上述對比度建議。

可行

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

不可行

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

Logos和裝飾元素

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

可行

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

不可行

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

其他視覺提示

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

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

可行

文本字段的錯誤狀態使用了多個提示進行傳遞：標題顏色、字段路徑和字段下面的錯誤消息提示。

不可行

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

聲音和動效

聲音

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

允許用戶向UI元素添加描述性標簽來使用聲音進行應用內導航。當使用屏幕閱讀器（如TalkBack和觸摸探索導航）時，當用戶用指尖觸摸到UI元素時，標簽會大聲朗讀。

應避免下列聲音：

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

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

動效

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

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

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

定時控件

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

高優先級控件：

避免在高優先級功能的控件上使用計時器，因為用戶很可能還沒注意到這些控件時就已經消失不見。例如，TalkBack閱讀控件被用戶激活朗讀時，如果控件設置了定時將會阻止控件完成任務。

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

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

樣式

布局

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

觸發目標

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

觸發目標應至少48x48dp大小。無論屏幕大小是多少，該范圍大小的觸發目標的物理大小約等于9mm。觸摸屏元素的推薦目標大小為7-10mm。為了容納更大范圍的用戶（如發展運動能力的兒童），可以適當使用更大范圍的觸發目標區域。

觸發目標間距

在大多數情況下，觸發目標之間應該間隔8dp或更多的空間以確保信息密度的平衡和可用性。

• 頭像：40dp
• Icon：24dp
• 觸發目標：48dp

△ ?觸發目標案例

• 觸發目標高：48dp
• 按鈕高：36dp

△ ?觸發目標和按鈕案例

對項進行分組

將關聯項保持在彼此接近的水平，對于那些視力低下或注視屏幕有缺陷的人是很有幫助的。

可行

滑塊值與滑塊控件接近

不可行

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

字體

為提高可讀性，用戶可能會增大字號。移動設備和瀏覽器包含允許用戶調整系統范圍內字體大小的功能。要在Android應用中啟用系統字體大小，請將文本及其相關的容器的單位變為sp。

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

層級與焦點

應用應該向用戶傳遞他們在應用中的位置。導航控件應該易于定位和清晰寫入。視覺反饋（如標簽、顏色和icons）和觸摸反饋表示界面中可訪問的內容。

導航需要有清晰的任務流程，同時能夠以最少步驟達成。焦點控制，或控制鍵盤和閱讀焦點的能力，應該在頻繁使用的任務中實現。

啟用焦點導航（Use focus controls for navigation）

屏幕閱讀器

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

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

層級

根據它們之間的重要性區分將其放置在頁面中。

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

相關項: 將類似層次結構的相關項放在相鄰的位置。

可行

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

不可行

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

焦點順序

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

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

分組

將相似項進行分組。這些組對內容進行組織。

轉換

屏幕和任務之間的焦點遍歷應盡可能的連續。

如果任務被中斷然后再繼續，請將焦點放在先前聚焦的元素上。

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

安裝啟用

通過使用標準的平臺控件，你的應用將自動包含某平臺輔助技術中正常運行所需的標記和代碼。同時能夠適配你的應用以滿足每個平臺上的無障礙標準和輔助技術 (包括快捷方式和結構），從而給予用戶一個有效的體驗。

可行

此屏使用了該平臺的標準對話框

不可行

此屏使用了非標準的對話框來執行標準化的對話任務。如果想實現無障礙訪問就需要額外的編碼和測試讓這個非標準的控件運行輔助技術

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

其他設計注意事項：

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

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

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

可行

此UI已擴展適配放大和大文本輔助設置

不可行

此UI沒有適配放大和大文本輔助設置。部分內容已經重疊或被截斷。

標簽可視化UI元素

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

設置UI元素標簽（Use the contentDes cription attribute to set labels）

• 設置搜索icon標簽
• 設置麥克風icon標簽

• 設置編輯icon標簽
• 設置聊天icon標簽

幫助文檔

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

測試和研究

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

讓有障礙的用戶測試你的應用。

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

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

與用戶交談，特別是那些使用輔助技術的人。了解他們的需求--他們想從你的應用中得到什么。他們使用哪些工具以及他們如何使用它們。熟悉這些工具，這樣你就能給他們最好的體驗。

△ ?人們用不同方式使用輔助技術

描述

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

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

可見的和不可見的文本應該具備有意義的描述和獨立的意義，因為一些用戶只通過網頁上的標題或鏈接進行瀏覽。使用屏幕閱讀器測試你的應用--識別出缺少的區域或確定使用更好的輔助描述文本。

簡潔

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

切換到heyfromjonathan@gmail.com。

可行

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

賬戶切換開關。切換賬戶到 heyfromjonathan@gmail。

不可行

冗長的輔助描述文本。

避免在文本中包含控件類型或狀態

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

可行

使用簡短的描述

不可行

不寫入控件類型

開發人員注意：如果控件類型或狀態未正確讀取，則控件的可訪問性role可能設置不當或為自定義控件。每個元素在網站上都應該有一個相關的可訪問性role，或者被編碼為正確發布。這意味著按鈕應設置為按鈕，復選框為復選框，從而以便將控件的類型或狀態正確地傳達給用戶。如果從本地UI元素擴展或繼承，則會得到正確的role。如果不是，你可以在每個平臺上覆蓋此信息以獲得可訪問性（用于web的ARIA、AccessibilityNodeInfo for Android）。

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

構建可訪問的自定義視圖

僅通過 Wi-Fi 下載。

可行

使用簡短的描述。

已選擇通過 Wi-Fi 下載。

可行

過多描述

表示元素的含義

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

說明點擊鏈接將執行的任務。

避免含糊的描述，如“點擊這里”。

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

可行

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

不可行

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

可行

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

可行

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

元素和其狀態更改

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

如果icon為列表項所有，請將其設置為復選框，以便屏幕閱讀器表達其當前狀態，例如“on”或“off”。

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

元素的使用方式將影響它們的展示方式。例如，如果星形icon代表向“收藏”中添加東西的操作，則在應用中需表達為“添加到收藏夾”或“從收藏中刪除”。

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

不要告訴用戶如何與控件進行物理交互，因為他們可能使用鍵盤或其他設備進行瀏覽，而不是用手指或鼠標。輔助軟件將向用戶描述正確的交互方式。

可行

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

不可行

指令“點擊”描述不準確，因為它不是激活此控件的唯一方法（用戶可以通過鍵盤按鍵、開關設備或盲文顯示進行選擇）。與此同時，這個例子中用戶的主要任務是搜索，所以應該向用戶提到操作而不是“說話（speak）”。

確認操作

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

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

提供提示語音

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

Android自定義操作

二. ?雙向性（Bidirectionality）

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

鏡像UI概述

從左向右（LTR）和從右向左（RTL）語言系統之間的主要區別是內容的顯示方向：

LTR的語言從左向右顯示內容

RTL的語言從右向左顯示內容

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

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

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

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

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

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

當UI從一個方向更改為另一方向時，以下項將不被鏡像：

數字

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

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

可行

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

不可行

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

當UI被鏡像時，以下內容將會改變：

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

以下內容不被鏡像：

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

△ ?LTR中的英語用戶界面

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

△ ?LTR中的文本編輯菜單

△ ?RTL中的文本編輯菜單

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

LTR頁面

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

• 觸摸目標高度：48dp
• 第一個tab距屏幕邊緣的距離：72dp
• Tab標簽底部內邊距：20dp
• Tab標簽左右內邊距：12dp

RTL頁面

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

• 觸摸目標高度：48dp
• 第一個tab距屏幕邊緣的距離：72dp
• Tab標簽底部內邊距：20dp
• Tab標簽左右內邊距：12dp

△ ?LTR頁面

RTL頁面

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

LTR

導航、溢出菜單和從左向右顯示的icons

Icon向屏幕邊緣的內邊距：16dp

標題距屏幕邊緣：72dp

標題的下內邊距：20dp

導航欄高：56dp

溢出菜單的內邊距：16dp

RTL

• 導航、溢出菜單和從右向左顯示的icons
• Icon向屏幕邊緣的內邊距：16dp
• 標題距屏幕邊緣：72dp
• 標題的下內邊距：20dp
• 導航欄高：56dp
• 溢出菜單的內邊距：16dp

LTR

• LTR icons和文本的外邊距和內邊距
• 列表項高：72dp
• Icon向屏幕左邊緣的外邊距：16dp
• 列表項距離屏幕左側邊緣：72dp

RTL

• 當鏡像布局時，icon和文本的內外邊距也會切換位置以匹配RTL的布局。
• 列表項高：72dp
• Icon向屏幕右邊緣的外邊距：16dp
• 列表項距離屏幕左側邊緣：72dp

RTL鏡像指南

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

有關RTL icons的詳細開發指南，請查閱：

• RTL Material Design icons 指南（了解如何鏡像圖標）
• RTL Sketch 插件（將現有設計和資源轉換為RTL格式）

什么時候需要鏡像

最重要的鏡像icons是“后退”和“前進”按鈕。后退和前進導航按鈕剛好相反。

△ ?LTR 后退按鈕

△ ?RTL 后退按鈕

△ ?LTR 前進按鈕

△ ?RTL 前進按鈕

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

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

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

大多數RTL國家不會鏡像斜杠。

可行

LTR的斜杠一樣使用RTL環境

不可行

RTL環境下斜杠不需要鏡像

右側帶有滑塊的音量icon需要鏡像。滑塊在RTL下，音量應從右邊開始計算。

△ ?LTR：帶滑塊的音量icon

△ ?RTL：帶滑塊的音量icon

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

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

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

包含文本表示形式的icons的鏡像需要小心謹慎。

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

△ ?LTR：聊天icon

△ ?RTL：聊天icon

什么時候不需要鏡像

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

△ ?刷新icon顯示時間朝前，方向為順時針。該icon沒有鏡像。

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

某些icons不存在鏡像與否。

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

△ ?鍵盤icon

△ ?耳機icon

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

例如，搜索icon的手柄通常在右下角。因為大多數用戶是右撇子。

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

△ ?搜索icon

△ ?咖啡館icon

時間經過

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

不要鏡像媒體播放按鈕和進度條，因為它們指的是正在播放的“磁帶”的方向，而不是時間方向。

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

可行

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

不可行

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

本地化

圖形中的文本。

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

數字

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

△ ?包含數字的LTR icon

△ ?阿拉伯語中的RTL icon

鏡像

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

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

• 段落對齊
• Icons翻轉
• 希伯來語文本方向為RTL

本章結束。想繼續學習的同學記得轉微博喲。

「Material Design 好文合集」

官方譯文：

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

學習筆記：

1. 《學霸的自學筆記！Material Design設計規范學習心得》
2. 《重磅教程！幫你全面徹底搞定MATERIAL DESIGN的學習筆記》

素材篇：

1. 《新鮮熱辣！一組實用的MATERIAL DESIGN風格素材！》

實戰教程：

1. 《重磅改版！網易新聞安卓客戶端MATERIAL DESIGN實戰》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

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

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com