Google Material Design 正體中文版 - Aaron網誌

1.介紹

2. MaterialDesigni.介紹

3. Whatismaterial?i. *環境

ii. *Material特性

iii. *3D空間中的物件

4. Animationi.逼真的動畫效果

ii.響應式互動(動畫)設計

iii. 有意義的動畫

iv.討人歡心的細節

5. Stylei. *顏色

ii. *排版樣式

iii. *圖示

iv.圖像

6. Layouti.原則

ii.指標及標線

iii. 結構

7. Componentsi.底部工作表

ii.按鈕

iii. 卡片

iv.芯片

v. *對話框

vi.分隔器

vii.網格

viii. 清單

ix.清單控制器

x.菜單

xi. *選擇器

xii.進度與活動

xiii. 滑軌

xiv. SnackbarsandToastsxv.副標題

xvi.開關

xvii.頁籤

xviii. 文字輸入框

xix.工具提示

8. Patterni. *資料格式

ii. *錯誤

iii. 選擇

iv.手勢

v. *抽出式導覽面板

vi. *導覽式動畫

vii. *捲動方式

目錄

GoogleMaterialDesign正體中文版

2

viii. 促進式指令

ix.設定

x.影像處理

xi.搜尋

xii. *滑動更新

9. Usabilityi.親和性

ii. *雙向性

10. Resourcesi.版型架構

ii.貼紙範本

iii. Roboto字型

iv.調色板

11. What'snewi. *What'snew


3

本篇文件是由GoogleMaterialDesign翻譯而來。

date:2014-12-04

在2014年11月3日Google更新了部分文章，而我們也盡快更新了中文版的部分，相關更新可參考What'sNew，這次協助翻譯

也特別感謝，有他們的協助才能在一個月內完成更新：

CasperHelenTillonterSeanYi-Bei

這次也加入了Disqus留言功能，可對章節內容提出自己的看法，增加電子書的互動性。

感謝下面人員參與本翻譯計畫(依暱稱第一個英文字母排序)：

CasperCharleneFrancesHelenMkdodosTillonterPeterSeanXuanXunyiYi-Bei陳聖博

https://github.com/Wcc723/google_design_translate

對於翻譯有任何問題，可以在Issue中提出，或者使用Pullrequests。

當然直接聯絡負責人也是可以的。


更新

致謝

Github

校稿


4介紹

http://www.google.com/design/spec/material-design/introduction.html

http://wcc723.github.io/

http://weijutu.blogspot.tw/

https://tw.linkedin.com/pub/sean-chen/53/83/4a8/

http://wcc723.github.io/

https://www.facebook.com/Francishuang1224


https://www.facebook.com/mkdodos

https://www.facebook.com/viator75

https://tw.linkedin.com/pub/sean-chen/53/83/4a8/

https://www.facebook.com/Shengbo.Arthur.Chen

https://github.com/Wcc723/google_design_translate

https://github.com/Wcc723/google_design_translate/issues

https://github.com/Wcc723/google_design_translate/pulls

https://www.facebook.com/chihcheng.wang.3

我們挑戰自己，為我們的用⼾創造一種視覺語言，遵循創新技術和科學的可能性，組合出良好設計的經典原則。這就是

MaterialDesign。這個規範是一個及時更動的文件，我們將陸續開發、更新更多質感設計的原則和細節。

創造一種視覺語言，遵循創新技術和科學的可能性，組合出良好設計的經典原則。

開發一個單一的基礎系統，允許跨平台裝置和設備大小，並統一使用者的體驗。行動裝置的限制是基本的，但觸摸，聲音，

鼠標和鍵盤都是優異的輸入方式。

介紹

目標


5介紹

原則


6介紹

質感隱喻

質感隱喻是針對合理的空間以及系統的運作訂定出的統一理論。質感源於實際的觸覺感官，受到對紙張和墨水的研究啟發，

然而是科技先進，且開放想像力的延伸與魔法般的構思。

質感的表面和邊緣提供了線索，這是起源於現實世界。使用熟悉的觸覺特性可以幫助用⼾快速了解其中暗示。然而該質感的

延展性創造了新的啟發，取代在物理世界中原有的那些，而不會破壞物理學的規則。

基本的光、外觀和運行是如何傳達物件移動的關鍵，存在空間與交互作用彼此相互關聯，逼真的照明能夠顯示接縫，劃分空

間，並說明了移動部件。


7介紹

大膽、圖形、動機

印刷中基礎設計裡的基本元素-排版、網格、空間、尺度、色彩，和用圖像引導的視覺處理，這些元素不只是好看，他們創

造的層次結構、意義和重點。精心的色彩選擇，邊緣連接邊緣的圖像，大規模的排版，以及故意空白打造出大膽的圖形界

面，讓用⼾沉浸在使用者體驗。

對使用者動作的強調使得主要的功能立刻凸顯出來並且提供了導航路徑。


8介紹

動畫提供意義

動畫尊重且加強了使用者為主要執行動作的人。主要的使用者動作是開始動畫和改變整個設計的轉折點。

所有動作都發生在單一的環境中。物件以不破壞使用經驗的連續性來呈現在使用者面前，即使它們改變形狀或重新編排了。

動畫是有意義的和適當的，有利於集中注意力，並保持連續性。反饋是微妙而清晰。過渡動畫是高效而且連貫。

翻譯：Tillonter

校稿：陳世能


9介紹

https://www.facebook.com/shihneng.chen

內容

3D的世界

光源與陰影

Material所存在的環境是一個3D空間，這表示所有物件都有x、y和z維度。z軸是與畫面所在的平面垂直的，正的z軸值表示向

視聽者的方面延伸。每一個material表單在z軸上佔據一個位置並且有一個標準的1dp厚度。

在Material環境中，虛擬的光源照明整個場景並且使得物件可以投射陰影。一個主要的光源創造了直接的陰影，而另一個環境

光源從各個角度創造一致的，柔和的陰影。

所有在material環境中的陰影都是由這兩個光源所投射。陰影是因為在z軸上的個個不同位置的material表單吸收了這些光源

後所造成的。

環境

3D的世界

光源與陰影


10*環境

Shadowcastbykeylight


11*環境

Shadowcastbyambientlight


12*環境

Combinedshadowfromkeyandambientlights

翻譯：SeanChen


13*環境


內容

物理特性

Material的變形

Material的動作

Material有兩個不同的維度x與y（以dps為單位）和一個統一的厚度（1dp）。Material絕對不會有厚度為0的情況。

Do.

Material特性

物理特性


14*Material特性

Material的寬與高可以不同

Don't.

Material永遠都是1dp厚

Material會投射陰影。

陰影是因為material元素間在z軸上的不同高度自然產生的。

Do.

Material投射陰影

Don't.

陰影大小永遠不會用material來做估計

內容以不同形狀與顏色顯示在material上。內容不會增加material的厚度。


15*Material特性

Do.

Material可以顯示各種形狀與顏色。

內容的行為可以被從material中抽離。但是，material的邊界可以限制內容的顯示。

Do.

Material是固體。

輸入的事件不會穿透material。

Do.


16*Material特性

Don't.

多個material元素不能同時佔據空間上的同一點。


17*Material特性

Do.


18*Material特性

Don't.

Material不能穿透其他material。

舉例來說，一個material表單不能在變換高度時穿透另一個material表單。


19*Material特性

Don't.

Material可以改變形狀。

Material只和它所在的平面一起變大與縮小。

Do.

Material絕對不會彎曲或對折。

Don't.

Material表單可以結合在一起成為一個單一的material表單。

當分裂後，material會回復。例如如果你從一個material表單上移除了一部份，那個material表單會再一次回復成一個完整的

表單。

Material可以自發地在環境中的任何地方產生或消滅。

Material可以沿著任何軸線移動。

z軸上的移動是一個典型的用⼾與material互動的結果。

翻譯：SeanChen

Material的變形

Material的動作


20*Material特性


在現實世界中組織物件與在materialdesign的空間中安排物件其實是類似的。在現實世界中，物件可以堆疊或者固定在另一

個物件上，但是不能穿透另一個物件。這些物件可以投射陰影與反射光線。

這些特質也適用在materialdesign中的物件上而且協助創造一個可以一致性地使用在不同應用程式中的空間模型，而這個空

間模型對用⼾來說是熟悉的。

內容

高度

物件關係

高度是物件與它的parent的z軸上的相對位置。高度是parent與child間的相對數值。

高度是以x與y軸相同的單位來做衡量的，一般來說是densityindependentpixels(dps)。因為material有一個標準的1dp厚度，

所有高度的距離是以物件最高的平面和另一個物件最高平面來做計算。

所有material物件都有一個靜止高度，不論這個物件是一個小元件或者是一個橫跨整個顯示畫面的表單。

3D空間中的物件

高度

高度

靜止高度


21*3D空間中的物件

典型元件靜止高度範例

在靜止狀態下，物件的靜止高度是不會改變的，這高度在整個應用程式中都是一致的。如果一個物件改變了高度，它應該儘

快地回到它原來的靜止高度。



一種特定元件類型的靜止高度在一個平台中的所有應用程式都是一致的。然而同一種元件類型在不同平台中可能會有不同的

靜止高度，這是取決于該環境的深度（例如：電視有比手機或桌上型電腦更大的深度）。



某些元件類型具有彈性的高度，也就是說它們可以依據用⼾輸入或是系統事件改變高度以作為回應。不同的元件狀態（例

如：正常、聚焦、按壓）也許會造成不同的高度改變，這是統一地以使用動態高度偏移量來達到這樣的效果。

動態高度偏移量是指相對于元件靜止狀態來說的，動態高度偏移量用來做為當元件轉換成一個特定元件狀態時的目的高度。

動態高度偏移量也用來確保一個元件類型當高度因為某個動作而改變時有一致的行為。舉例來說，所有元件因為點壓而提升

高度時，有相對于它們目前（靜止）高度的相同高度變化。

一旦輸入事件完成或取消後，元件就會回到它的靜止高度。

彈性的高度與動態高度偏移量

功能性陰影



陰影提供了一些對於物件在空間中的排列方式的重要的視覺線索。陰影是表示物件表面之間分離數量的唯一視覺訊息。物件

的高度決定了它的陰影在視覺上會如何呈現。

沒有陰影就沒有東西表示浮動按鈕按鍵是一個與背景表面互相分離的另一個表面



俐落的陰影表示浮動動作按鈕和應用程式橫欄非常地靠近背景表面



柔和的，較大的陰影表示浮動動作按鈕比應用程式橫欄處於更高的高度

在動作中，陰影也提供了關於物件的行動方向的線索。這也是一個表示物件表面之間的距離是增加或減少的工具。



沒有了陰影來表示高度，就無法清楚得知這個圓圈是否處於同樣的高度或者單純只是增加了它的高度。



當這個物件的高度增加時，陰影變得更柔和也更大，當高度減少時，陰影變得更利落也更小。



在這個範例中，一致的陰影幫助用⼾了解這個物件只是改變形狀而沒有改變高度。

怎麼安排物件在應用程式中決定了物件或物件組合互相之間移動的關係。物件可以獨立于彼此來移動，或者他們的行動可以

被限制或依賴于它們所在的容器。容器與它們包含的物件有parent-child的關係。每個物件都有一個parent，而且也許有一個/多個child或者根本沒有child。

Child從他們的parent繼承了變形的特性，比如說位置、旋轉、大小與高度。舉例來說，在可捲動的卡片式組合中所有的卡片

都一起移動，卡片們彼此是siblings，而且他們都是這個處理捲動的卡片式組合的容器的child。

Parent和child的階層架構決定了物件群組間怎麼互動。比如說，child物件和parant有最小的間距，其他的物件不能插入到

parent和它的child中。

物件關係



當parent內容捲動時，這個被提高的按鈕（child）也跟著到畫面之外。

這些卡片（siblings與卡片組的child）捲動到畫面之外，同時浮動動作按鈕（自己為自己的parent）留在了原地。

翻譯：SeanChen




理解物件的實體形式幫助我們了解如何熟練地運用它，觀察物件的移動則可以辨別它的輕重、彈性與大小。MaterialDesign中動畫效果不只是增加美麗的效果，它更建立了空間關係、功能顯示和系統意向的意義。

就物理性而言所有物體都有質量且只在受到外力時移動。因此，物體並不會突然地移動或停止，突然移動或停止以及瞬間改

變方向的動畫效果看起來並不符合自然規則，對使用者來說這樣的效果是不符合期待且造成令人不愉快的混亂。

MaterialDesign中動畫重要的關鍵是保留其物理性感受，且不會失去優雅、簡約、美麗的特性，以及無縫式使用者經驗設計

魅力。下列設計準則將以動畫效果展示上述概念。

這麼做吧

即時加速與溫和減速的動作讓人覺得自然與討喜。

千萬不要這麼做

線性移動會讓人覺得機械化。在物體進行曲線移動的開始或結束時驟然改變速度，表示物體快速地啟動或停止，那並

不符合真實情況。

當物體進場時，確保他以最高速度進入。這模擬了自然的動作，一個人並非在進入我們的視野時才開始移動步伐，而是在進

入我們的視野前就已經邁步前進。相同地，當物體退場時，請保持它的速度，這樣的作法會比降低速度退場好。從容地進場

和緩速退場會讓使用者的注意力集中在動畫效果中，但大多數情況下，這並不是我們要的結果。

這麼做吧

以高速進退場。這顆球以高速進退場時，會給人有自信的感覺。

千萬不要這麼做

進場時加快速度或退場時減速，不要用不必要的速度變化來分散使用者的注意力。

不是所有的物體都以同樣的方式移動，較輕較小的物體有可能會在更短時間內加速或減速，因為他們的質量較小，且需要較

少的外力去達成加減速的結果。較重較大的物體可能需要更多的時間到達最高速或者停止移動。想想該如何套用這些界面元

素到你的應用程式中，同時思考要如何呈現這些動畫效果。

翻譯：Charlene

逼真的動畫效果

質量與重量

最佳實例

特例：進退場

做些調整


32逼真的動畫效果

https://www.facebook.com/charlene.feng.7

響應式互動(動畫)設計可以建立與使用者之間的信任感，同時也吸引他們的注意力。使用者與程式互動時，若出現漂亮且極

具邏輯性的效果，使用者會感覺被滿足甚至是愉悅的，這樣的動畫設計是經過深思熟慮且具有目的性的,並不是隨機發生，可

以有一點點異想天開，但從來不會是導致使用者分心的，它鼓舞使用者對應用程式更進一步探索：如果按了這個會有什麼事

情發生？那這個呢？

在MaterialDesign中，應用程式是會對使用者的輸入操作進行回饋，並且極其盼望使用者的輸入：

觸控，聲音，滑鼠和鍵盤都是首要的輸入方式。

雖然使用者介面元件是看得到的形體，但它們被鎖在一層玻璃後面(也就是電腦或任何裝置的螢幕後)藉由即時識別輸入

與指示操作方向，視覺和動畫效果的提示，彌補了使用者與裝置溝通的鴻溝。

響應式互動(動畫)設計將應用程式提升到另一個層次，從依照使用者要求顯示訊息的程式，變成以更具體的方式在溝通的軟

體。

表象層的互動設計

物體本身的反應

放射狀的動畫

當接收到一個輸入事件，系統即時在下列人機溝通的接觸點上，提供視覺化的(輸入)確認，例如手指觸控處之下，或者是語

音輸入的麥克風圖示上，或者是在讓使用者用鍵盤輸入的適當區域。一種說法是這樣的確認方式暗喻了墨水的使用，墨水是

覆蓋在每一張紙上的動態展示表象層。

最基礎簡單呈現人機溝通的視覺方法是觸控漣漪的效果，裝置可以明確地表達被觸控時的反應方式和時間長短，還有各方面

的動態外觀，如：聲波的振幅或者觸控的力度。

(資料/訊息的)輸入是發生在特定位置的，例如在手指觸控的接觸點，或是傳入聲音的麥克風圖示，從這個位置，產生放射狀

的視覺化動畫效果。

觸控漣漪-按壓/釋放

觸控漣漪-拖進/拉出

除了在表象層呈現像墨水渲染般的動畫效果，物體本身也可以做出回饋。當被觸控或點選的時候，物體可以往上移動，表示

是啟用的狀態，使用者透過觸控或點選，產生新的物體或改變物體現有的狀態，或是透過拖曳或者撥動的方式直接操作這些

物體。

響應式互動(動畫)設計

實例

表象層的互動設計

最佳實例

物體本身的回饋

最佳實例


33響應式互動(動畫)設計

當程式與使用者互動之下產生新物體時，物體表象層的擴展效果必須從輸入點開始。

這樣做吧

物體從觸控點出現，視覺上可看到物體與觸控點是繫結在一起的。

請不要這樣做

紙卡從螢幕的中心點出現，切斷了與輸入點之間的關係。

當一張卡片或可分離元素啟用時，它的位置會向上移動表示是啟用的狀態。

觸控時的上升效果

使用者的操作行為會有一個中心點，透過這個中心點，使用者將他們的操作意圖輸入這個系統。與使用者的輸入點建立強烈

視覺連結，可以讓使用者更清楚知道他所做的動作，不論是從手指觸控螢幕或是從麥克風輸入聲音。橫跨螢幕的動畫效果，

應該隨著與中心點的距離增加，前進式地引發動畫，就像建立一個漣漪動畫。

使用者的輸入會有一個中心點，他們在觸控點上進行觸控動作，透過麥克風圖示傳入聲音，經由虛擬按鍵打字輸入。

每一個動畫都應該在視覺上與它們各自的輸入中心點進行連結，與中心點較近的動畫效果比與中心點較遠的動畫效果快出

現，建立一個漣漪動畫(從中心點根據距離產生移動的動畫效果)。

翻譯：Charlene

原點

觸控時的上升效果

放射狀的動畫效果


34響應式互動(動畫)設計


有時候使用者不易專注於應用程式本身，或迷失於元件A變換到元件B的過程，當使用者在多重程序或多步驟的狀態下時，

審慎安排動線設計能有效地導引使用者的注意力。當佈局或元件重新排列時，要避免造成使用者困惑，並改善整個使用者體

驗的美感。動線的設計不但使產品更漂亮，更應該考量到功能性的目的。

範例

兩個不同狀態的視覺漸變必須是流暢、輕鬆而不間斷的。最重要的是讓使用者更清晰而非困惑。設計良好的動畫，能幫助使

用者清楚了解現在應該要專注在哪個地方。

漸變動畫的範疇包含三種元件：

進入的元件：可能是直接新增的元件或從其他位置轉變過來的，這些元件有各自被引進或再製造的方式。

離開的元件：與新內容不再相關的元件必須透過適當的方式移除。

共用的元件：從漸變動畫開始到結束都持續存在的元件，可能是細小的icon圖示或顯眼的大型圖片，透過動畫改變成符

合螢幕的尺寸。

當你在設計你的動畫時，請注意以下幾件事：

思考使用者的注意力應該如何被引導？什麼樣的元件或動作能夠協助這個目標？動畫過程中，要進入、離開或共用的元

件，要如何安排強調或弱化？

設計畫面時，思考動畫前後的狀態，在漸變的過程中透過顏色及共用的元件，找到機會創造視覺關聯性。

審慎地加入動作：思考如何透過移動一個元件，使動畫漸變的過程更加清晰流暢。

範例

你該這麼做：

圖層式的紙張元件是常用的設計，紙張元件常常以滑入的方式進入畫面，而墨水元件則較常使用淡入的方式。不建議

使用全螢幕的淡出效果，但是至少比直接切換畫面好。

不要這麼做：

避免直接切換畫面。直接切換畫面的突兀感，導致使用者難以理解動畫的運作。

當你建置一個動畫，要考量該元件的移動方式與移動的時間差。確保動畫能幫助你更層次化的顯示資訊；即透過視線動向的

安排來傳達給使用者，什麼是最重要的資訊。

然而，並沒有一個公式告訴你最重要的東西要最先出來，最不重要的東西要最後出來。動畫時間差的安排必須流暢且必須避

免讓使用者覺得與產品脫節。

範例

你該這麼做：

有意義的動畫

視覺的連續性

注意

階層式的時間差


35有意義的動畫

使用重疊的動線引導使用者的注意力。

不要這麼做：

動畫時間差的安排並沒有暗示使用者什麼是重要的。如果所有的元件都同等重要，你可以考慮使用一個大型動畫，暗

示使用者它們屬於同一個群組。

動畫元件在畫面中的移動順序應該要以協調的方式呈現，元件移動的路徑必須合理且有次序。隨機的移動方式容易使人分

心，規劃良好的應用程式能幫助使用者學習使用的方式，協調的動畫元件能提升使用者對於應用程式理解度，一旦使用者了

解應用程式的設計原則，他們就不易在使用的過程迷失方向。

避免線性空間路徑，除非運動方式是沿著特定軸線，或與其他元件一起朝向或離開特定目標。

確保各個元件的路徑相互配合。避免有衝突或重疊的路徑。

考慮動畫的故事性：什麼元件在什麼元件下移動，以及為何如此？

如果在螢幕上追蹤所有移動元件的路徑，看起來是否漂亮且具組織性？這些路徑是否有創造出清楚的畫面引導使用者該

注意哪個位置？

在進入與離開的元件上套用一致的動畫，強化各元件的空間關係。

範例

你該這麼做：

使用協調且有順序性的動線指引使用者的注意力。

不要這麼做：

避免使用無連續性或無順序性的動線，物件進出時也要避免看似隨機的方向。

翻譯：Peter

編排規則的一致性

最佳典範


36有意義的動畫


動畫能存在於應用程式內所有的元件中，包含所有的比例，從細小圖示到關鍵動畫或動作，都能設計動畫。所有的元件共同

運作，創造出無縫的使用體驗，以及一個兼具美感及功能性的應用程式。漸變是最基本的動畫表現方式，但是只有協調不突

兀的動畫才能討使用者歡心。

一個清單圖示在箭頭或播放器間無縫地變換提供了雙重作用：知會使用者，以及讓你的應用程式充滿驚奇與高超的技巧。使

用者一定會注意到這些細節。

翻譯：Peter

討人歡心的細節

討人歡心的細節


37討人歡心的細節


顏色的靈感是來自於設置在寧靜場合之中強調色的標示，參考當代建築、道路標誌、地面標線以及體育場地給的啟發。強調

明顯的陰影及聚光，使用意想不到的鮮豔色彩。

ColorSwatch0.13MB(.zip)

色票包含了基本色和強調色，可以被用來繪圖或是發展成你的品牌色。它們被設計成彼此相互協調。

這些色票從基本色開始填滿色譜，建立一個完整的色票，可供Android、網頁及iOS使用。Google建議在你的應用程式中使

用這500色作為基本色，其他顏色則作為強調色。

下載色卡

0.02MB(.zip)

Red500#f4433650#ffebee100#ffcdd2200#ef9a9a300#e57373400#ef5350500#f44336600#e53935700#d32f2f800#c62828900#b71c1cA100#ff8a80A200#ff5252

顏色

色票


38*顏色

http://quantum-paper.storage.googleapis.com/downloads/color_swatches.zip

http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B08MbvYZK1iNT0dFWFBjdTNKaXM/color_swatches.zip

A400#ff1744A700#d50000

Pink500#e91e6350#fce4ec100#f8bbd0200#f48fb1300#f06292400#ec407a500#e91e63600#d81b60700#c2185b800#ad1457900#880e4fA100#ff80abA200#ff4081A400#f50057A700#c51162

Purple500#9c27b050#f3e5f5100#e1bee7200#ce93d8300#ba68c8400#ab47bc500#9c27b0600#8e24aa700#7b1fa2800#6a1b9a900#4a148cA100#ea80fcA200#e040fbA400#d500f9A700#aa00ff

DeepPurple500#673ab750#ede7f6100#d1c4e9200#b39ddb300#9575cd400#7e57c2500#673ab7600#5e35b1700#512da8800#4527a0900#311b92A100#b388ffA200#7c4dffA400#651fffA700#6200ea

Indigo500#3f51b550#e8eaf6100#c5cae9


39*顏色

200#9fa8da300#7986cb400#5c6bc0500#3f51b5600#3949ab700#303f9f800#283593900#1a237eA100#8c9effA200#536dfeA400#3d5afeA700#304ffe

Blue500#2196f350#e3f2fd100#bbdefb200#90caf9300#64b5f6400#42a5f5500#2196f3600#1e88e5700#1976d2800#1565c0900#0d47a1A100#82b1ffA200#448affA400#2979ffA700#2962ff

LightBlue500#03a9f450#e1f5fe100#b3e5fc200#81d4fa300#4fc3f7400#29b6f6500#03a9f4600#039be5700#0288d1800#0277bd900#01579bA100#80d8ffA200#40c4ffA400#00b0ffA700#0091ea

Cyan500#00bcd450#e0f7fa100#b2ebf2200#80deea300#4dd0e1400#26c6da500#00bcd4600#00acc1


40*顏色

700#0097a7800#00838f900#006064A100#84ffffA200#18ffffA400#00e5ffA700#00b8d4

Teal500#00968850#e0f2f1100#b2dfdb200#80cbc4300#4db6ac400#26a69a500#009688600#00897b700#00796b800#00695c900#004d40A100#a7ffebA200#64ffdaA400#1de9b6A700#00bfa5

Green500#4caf5050#e8f5e9100#c8e6c9200#a5d6a7300#81c784400#66bb6a500#4caf50600#43a047700#388e3c800#2e7d32900#1b5e20A100#b9f6caA200#69f0aeA400#00e676A700#00c853

LightGreen500#8bc34a50#f1f8e9100#dcedc8200#c5e1a5300#aed581400#9ccc65500#8bc34a600#7cb342700#689f38800#558b2f900#33691eA100#ccff90A200#b2ff59


41*顏色

A400#76ff03A700#64dd17

Lime500#cddc3950#f9fbe7100#f0f4c3200#e6ee9c300#dce775400#d4e157500#cddc39600#c0ca33700#afb42b800#9e9d24900#827717A100#f4ff81A200#eeff41A400#c6ff00A700#aeea00

Yellow500#ffeb3b50#fffde7100#fff9c4200#fff59d300#fff176400#ffee58500#ffeb3b600#fdd835700#fbc02d800#f9a825900#f57f17A100#ffff8dA200#ffff00A400#ffea00A700#ffd600

Amber500#ffc10750#fff8e1100#ffecb3200#ffe082300#ffd54f400#ffca28500#ffc107600#ffb300700#ffa000800#ff8f00900#ff6f00A100#ffe57fA200#ffd740A400#ffc400A700#ffab00

Orange500#ff980050#fff3e0100#ffe0b2


42*顏色

200#ffcc80300#ffb74d400#ffa726500#ff9800600#fb8c00700#f57c00800#ef6c00900#e65100A100#ffd180A200#ffab40A400#ff9100A700#ff6d00

DeepOrange500#ff572250#fbe9e7100#ffccbc200#ffab91300#ff8a65400#ff7043500#ff5722600#f4511e700#e64a19800#d84315900#bf360cA100#ff9e80A200#ff6e40A400#ff3d00A700#dd2c00

Brown500#79554850#efebe9100#d7ccc8200#bcaaa4300#a1887f400#8d6e63500#795548600#6d4c41700#5d4037800#4e342e900#3e2723

Grey500#9e9e9e50#fafafa100#f5f5f5200#eeeeee300#e0e0e0400#bdbdbd500#9e9e9e600#757575700#616161800#424242900#2121211000#000000


43*顏色

1000#ffffff

BlueGrey500#607d8b50#eceff1100#cfd8dc200#b0bec5300#90a4ae400#78909c500#607d8b600#546e7a700#455a64800#37474f900#263238

Black#000000White#ffffff

從主要色票中選擇的基本色調侷限在三種以內，次要色票中則選擇一種強調色強調色依情況，是可有可無的預備方案。

自定義色票

定義你的應用程式色票

使用者介面的顏色運用

選擇你的色票

關聯


44*顏色

http://developer.android.com/training/material/theme.html#ColorPalette

範例：主要色票

範例：次要色票

為了傳達層次化的訊息，可以使用深淺不同的文字。白色背景文字的標準alpha值為87%（#000000）。次要文字，也就是視

覺階層上再低一階的文字，則應該有54%（#000000）的alpha值。像那些在文字欄位和標籤上給使用者看的文字提示，應該

有更低階的視覺效果，適用26%（#000000）的alpha值。

其他元件，如icon與分隔線，也可使用黑色背景的alpha值來取代實心顏色，這樣可以確保它們在任何顏色背景上都可發揮作

用。

在灰階文字、icon以及分隔線上使用alpha值


45*顏色


46*顏色

工具欄以及更大的色塊應該使用主要色500，這應該是你的應用程式主色，狀態欄應該是主要色的較暗色調700。

大膽地在大面積的區塊上使用顏色是被鼓勵的，你所選擇的色票上的不同顏色，可以使用在應用程式介面中的不同元件上。

工具欄與狀態欄


47*顏色


48*顏色

強調色用於您的主要操作按鈕以及元件上，如開關或滑桿。

強調色


49*顏色


50*顏色


51*顏色

好的做法

僅使用強調色在內文中強調連結


52*顏色

不好的做法

別使用強調色強調整個內文


53*顏色

好的做法


54*顏色

不好的做法

別在應用程式欄或大面積區域上使用強調色。避免在浮動按鈕和背景上使用相同的色彩。

如果你的強調色對於背景來說實在太亮或太暗，你可以選擇比起原來的強調色更亮或更暗的顏色。如果你的強調色起不了任

何作用，在白色背景上使用主要色500。如果你的背景已經是主要色500，可使用100%的白色或54%的黑色。

備用強調色


55*顏色

好的做法


56*顏色

不好的做法

主題讓你在應用程式上有一致性的風格。主題指定了表面的暗色、陰影的階層以及墨水元件的適當透明度。

為了促進應用程式之間的一致性，有兩個主題可供選擇：明亮系及暗色系。

下載主題

主題


57*顏色

http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B71WflkWs_SAcDhkeFlZbmVJdG8/stickersheet_uielements.ai

1.23MB(.ai)

使用Material主題

自定義屬於你的品牌識別


58*顏色

http://developer.android.com/training/material/theme.html


59*顏色


60*顏色


61*顏色

翻譯：Tillonter

更新：Casper


62*顏色


從IceCreamSandwich公開發佈消息後，Roboto一直是Android的標準字體，在這個版本中，Roboto更著重於廣泛地應用在

各種不同的平台，將字體變得稍寬、稍圓了些，使它更加清晰，並使其閱讀更為舒適。Noto也是給ChromeOS上所有語言

的標準字體。

為了支援全世界語言，Google建議使用Roboto於拉丁文、希臘文與西里爾字，以及使用Noto於所有其他語言。

Robotofont

1.21MB(.zip)

GetNoto

所有語言的Notofontfamily可供下載.

Roboto已經可以更廣泛地在各種不同的平台做應用。字體變得稍寬、稍圓，使它更加清晰，並使其閱讀更舒適。

排版樣式

Roboto


63*排版樣式

http://material-design.storage.googleapis.com/downloads/RobotoTTF.zip

http://www.google.com/get/noto

Roboto的範例


64*排版樣式

RobotoA-Z和羅馬數字

Noto的縱向metrics與Roboto可以並存。

NotoSansCJK


65*排版樣式

NotoSansThaiandDevanagari

Roboto對語言的支援有拉丁文、希臘文和西里爾字，像是英文、法文、希臘文和俄羅斯文。除此之外，Roboto已經擴充到

完全含括所有拉丁文、希臘文和以Unicode7.0所定義的西里爾字。所支援的字元數量比先前發布的版本增加了兩倍之多，

由約莫兩千增加到目前約略四千。

Noto涵蓋所有主要現存語言，包含英文、希臘文、俄羅斯文、阿拉伯、希伯來文、中文、日文和韓文（CJK）、印度文、孟

加拉文、喬治亞文、亞美尼亞文、泰文、寮文、柬埔寨文以及很多其他的。

Roboto有六種粗細:Thin、Light、Regular、Medium、Bold和Black.

語言覆蓋率

字體粗細


66*排版樣式

Roboto字體粗細

NotoSansCJK有七種粗細：Thin、Light、DemiLight、Regular、Medium、Bold和Black。NotoSansCJKRegular的粗

細與RobotoRegular的粗細相同。


67*排版樣式

NotoSansCJK字體粗細

Notofonts提供Regular和Bold，用於泰文、梵文以及所有其他主要現存語言。

Noto泰文和梵文的字體粗細

字體微調是字體本身的方法，為求在低分辨率顯示器看起來更好而做修改（扭曲）。作為一個折衷，一個字體的微調版會比

未微調版消耗更多空間。

Roboto和Noto兩者都有微調版和未微調版。Google建議：

於Android和MacOSX上使用未微調版，尚未經過調整的。

字體微調（Hintedfonts）


68*排版樣式

於ChromeOS、Windows和Linux使用微調字體。

對Android和web兩者，字體順序應指定為Roboto、Noto而後是sans-serif。

排版指南提供了三種類型語言：

EnglishandEnglish-like:拉丁文（除了越南文）、希臘文、西里爾文、希伯來文、亞美尼亞文和喬治亞文。

Tall:語言文字需要額外的行高去適應更大的字型。包括南亞、東南亞和中東語言，例如阿拉伯文、印度文、泰盧固語

(Telugu)、泰文和越南文。

Dense:語言文字需要額外的行高去適應更大的字型但與tall擁有不同的metrics。包含中文、日文和韓文。

太多的文字尺寸與樣式可以摧毀任何一個版面，文字比例應該限制幾種大小使其在版面的隱藏格線中互相配合、對齊，基本

的字體尺寸為12,14,16,20,以及34。

English-like:在文字使用的條件下，這些尺寸與樣式平衡了內文的密度以及閱讀的舒適，文字尺寸指定伸縮像素(SP)可以使

大尺寸的文字提高可訪問性。

Tall:

粗細:使用Regular，當Noto的Medium不可用。除此之外，基於母語使用者的回饋指出Bold過於沉重，Google建議

避免使用Bold。字體大小:Title使用Caption樣式，字體大小比英語指定的大1像素。比標題大的樣式，英文類的字體大小是適合的。

Dense:

粗細：自從NotoCJK與Roboto一樣提供七種粗細，使用與英文相同的粗細設定。

字體大小：Title使用Caption樣式，字體大小比英語指定的大1像素。比標題大的樣式，英文類的字體大小是適合的。

字體順序（FontStack）

標準樣式

文字大小與基本樣式


69*排版樣式

http://www.google.com/design/spec/usability/accessibility.html


70*排版樣式

使用Display樣式的範例


71*排版樣式


72*排版樣式

使用Headline樣式的範例


73*排版樣式

EnglishandEnglish-like:外型尺寸，文字出現在appbar上應使用Title樣式，Medium20sp。


74*排版樣式

使用Title樣式的範例


75*排版樣式

有些時候大的Subhead樣式會使用較小的Body樣式來替代，這些範例包括當資訊是介紹用途的一個小片段；或當標題與

Body-styled這行的文字是互相配對的時候。


76*排版樣式

使用Subhead樣式的範例


77*排版樣式


78*排版樣式

使用Body樣式的範例


79*排版樣式


80*排版樣式

使用Body樣式的範例


81*排版樣式

按鈕樣式(Medium14sp,全大寫)是應用於所有按鈕，不管他們是ink或material。


82*排版樣式

使用Button樣式的範例


83*排版樣式

如果文字使用與背景相似的顏色，會非常難以閱讀，使用太多高對比、奪目的顏色也會使文字不明顯，甚至難以閱讀，尤其

是針對黑色背景...

文字應該維持在4:5:1的最低限度比率對比(基於亮度值做計算)，針對易讀性，7:1的對比比率是最適合閱讀的。

這些顏色的組合都有經過對比比率的考慮，為了非典型使用者的回應。

基本顏色/顏色對比


84*排版樣式


85*排版樣式

當正當的使用情況下，大型字可以使應用程式更有趣，在不同的版面當中，能夠幫助使用者更快的理解文章傳達的內容。

流動文字的大小樣式使用在專案來說文章的長度是未知的，流動文字的字型大小取決於可用的空間以及文字間距的計算。

強烈不建議慣用小型文字去符合一個糟糕的專案，並依靠其作為退而求其次的最後手段。

大型字/流動文字


86*排版樣式

搭配的範例


87*排版樣式


88*排版樣式

行高取決於各種獨特風格的樣式以及粗細，去呈現良好的可讀性以及適當的留白。換行只適合用在內文、條目、首行文字，

還有更小的顯示樣式，其他的樣式則應該以單行的文字顯示。

EnglishandEnglish-like:看圖。

Tall:用於Body1和Subhead1，行高應大於0.1em。在English和English-like文字上，行之間有明顯清楚的空白間

隙。在tall這組，這個間隙是不夠的。對於Body1和Subhead1，相對於英文的較小行高，缺乏空間是顯而易見的。

因此，需要增加間隔確保行間隙在視覺上與English-like文字相似。

很小的Title行高和較大的樣式會被調整，以避免該行字元的降部緊貼於下一行字元的升部。

Dense:

大於0.1em行高用於所有樣式。CJKideographiccharacters使用整個字體框，而英文大多使用部分字體框－通常低於x-高的部分。因此當設置相同高時，用於CJK中行與行的實際間隔將較小。為了讓CJK達到與英文相同設計時，行高須比用於

英文時高。

行高


89*排版樣式

EnglishandEnglish-liketypeandleading

Pairingexamples

Isolatedexamples—增加行高

斷行規則/斷字


90*排版樣式


91*排版樣式

可行


92*排版樣式


93*排版樣式

不可行

從Baymard學院我們在可讀性和行高考量了這些建議：

如果你希望有更好的閱讀體驗的話，你應該要將每行的文字侷限在60個字以內，控制每行文字在適當的量是良好閱讀性的最

佳關鍵。

太寬-如果一行的文字太長，使用者必須長時間聚焦在文字上，這是因為那樣的長度很難讓人快速領會哪邊是開頭、哪邊是

結尾，此外他可能會使在大區塊裡正確行內的文字裡連續性上變得困難。

太窄-如果單行文字太短，會使得使用者的眼睛必須時常來回閱讀，打斷了閱讀的良好韻律，短行的文字也趨向壓迫閱讀

者，使他們在閱讀完重要的部分之前就開始下一段。(因此反而跳過了隱含重要的關鍵字)

來源：Readability:theOptimalLineLength

太窄

理想範圍

太寬

單行字符長度


94*排版樣式

http://baymard.com/blog/line-length-readability

太窄

理想範圍

太寬

翻譯：Tillonter

更新：Yi-Bei

和字距調整


95*排版樣式

產品圖示是一個品牌的產品的服務和工具的視覺表達。簡單、大膽、友好的傳達產品的核心理念和意圖。雖然每個產品圖示

在視覺上都不相同，但對於一個給定品牌的所有產品圖示應透過理念和執行將其統一。

產品圖示是傳達你的品牌的重要方式。使用這些準則作為出發點，確保您的產品圖示的顏色和其他關鍵要素反映你的品牌標

識。

產品圖示的設計靈感是由材料的觸覺和物理質量作為啟發。每個圖標都被切斷、折疊，並模擬紙張會是這樣，透過簡單的圖

形元素表示。用乾淨的褶皺和清晰的邊緣使材料的質量是堅固的。磨砂般交互作用的表面與光線照射產生微妙的高光及一致

的陰影。

圖示

產品圖示

設計方法


96*圖示

物理原型


97*圖示

光影研究


98*圖示

質感原型


99*圖示

色彩研究

該產品的圖示網格已經發展到方便的一致性，建立一套明確的規則去定位所有的圖形元素。這種標準化導致了靈活，但連貫

的系統。

產品圖示網格


100*圖示

網格


101*圖示

關鍵線條

關鍵線條形狀是網格的基礎。透過使用這些核心形狀為指標，你可以保持整個相關產品的圖標一致性的視覺比例。

關鍵線條產生的形狀


102*圖示

矩形

寬高:152


103*圖示

圓形

直徑:176


104*圖示

縱向矩形

高:176

寬:128


105*圖示

橫向矩形

高:128

寬:176

裝置顯示產品圖標在48dp。當您建立一個圖示，請維持在48單位的測量，但在192×192像素則放大到400％。

通過維持這單元比，可以保持鋒利的邊緣和正確的對齊，當被縮小的時候。

DP單元格線


106*圖示

1:1單元網格


107*圖示

4:1單元網格

預設標準已被定為特定關鍵線：圓形、正方形、長方形、直角線和對角線。這個板面裡普遍和簡單的元素已經發展到統一的

產品圖示，且系統化了物件在網格上的擺放位置。

幾何


108*圖示


109*圖示


110*圖示


111*圖示

產品圖示剖面介紹圖形元素是如何組成一個產品圖示。這些一致性的元素對於給定品牌的圖示是保持一個共享的視覺語言的

關鍵。熟悉這些元件可以更容易地理解每個標誌和它們之間的細微差異及特徵。也將協助你的雙眼來識別標誌設計的底層結

構。

1.完成

2. Material背景

3. Material前景

4.顏色

5.陰影

產品圖示剖面


112*圖示

組件

每一個組件都定位在前一個組件雙眼直視的正上方。


113*圖示

組成透視

分解透視案例說明每個內含組件的架構。


114*圖示

Material背景

最後方的material元素.


115*圖示

Material前景

一個重疊在Material背景並產生陰影的元素


116*圖示

色彩斑點

一個用在小部分元素上的色彩


117*圖示

超出

一個將元素從邊線到邊線填滿的色彩


118*圖示

邊緣上色

在Material元素上方的邊界，是一個混和白色、比原色系更亮一些的色彩。


119*圖示

陰影般的邊緣

在Material元素下方的邊界，是一個混和暗色調、比原色系更暗一些的色彩。


120*圖示

緊貼的陰影

一個圍繞在元素邊線外圍的柔和陰影。


121*圖示

光潔的

從左上角至右下角漸漸淡化並覆蓋所有元素，提供表面光源的柔和色彩

在Material的環境中，模擬燈光照亮場景，讓物體投射陰影。上方光源投射在元素上產生一個連帶陰影，在元素的頂部和底

部邊緣。有角度的光增強整個表面元素的質感。

產品圖示指標

光源


122*圖示

上方光源


123*圖示

45º角光源

產品圖示上方的光源產生柔和陰影環繞整個元素，在上方跟左方示比較明亮的，陰影比較重的部分是在下方和右方，這個陰

影會永遠跟圖示的外框相連。

陰影


124*圖示

下落式陰影指標

模式:一般

透明度:20%

X偏移:0px

Y偏移:6px

模糊:6px

色彩:比參考色暗一些的值

元素的頂部和底部邊緣提供深度和表面感。materiel有一個標準1dp厚度。所有邊緣的距離都是從元素的內緣開始算起。

Tintedge使用在所有元素的上方，左、右、下皆不使用。

著色與陰影邊緣


125*圖示

Shadeedge使用在所有元素的下方，左、右、上皆不使用。

上色邊緣

高:1dp

透明度:20%

色彩:White(#FFFFFF)


126*圖示

陰影般的邊緣

高:1dp

透明度:20%

色彩:比參考色暗一些的值

光潔的圖層是一個模擬的45度角光源，從圖示的左上延伸至右下的邊線，光潔圖層永遠都會擺在圖示的邊框內緣。

光潔


127*圖示

漸層指標

類型:放射,角度:45º,色彩:白色(#FFFFFF),中心點位置:33%

漸變1,透明度:10%,位置:0%

漸變2,透明:0%,位置:100%

當加入以上元素時每種顏色的變化不同，並非老實的加入黑或白的成分，每個顏色必須做調整至確保看起來夠和諧以及是否

為適當的對應值。

著色、暗處和陰影的值


128*圖示


129*圖示

透過物理材料的影響，簡單制度提供表面質感和觸感。材質和色彩的相互作用產生眾多獨特的成分。

色彩元素平面化至一張紙面上，不要做任何邊線及陰影的裝飾。

產品圖示模式

色彩


130*圖示

這麼做


131*圖示

別這麼做

每個圖層可以加入深度及陰影。

但請不要超過兩層圖層，過多的圖層太複雜，會沒有重點。

圖層


132*圖示

這麼做


133*圖示

別這麼做

摺邊或者狗耳，用來暗喻表格或者文件，甚至傳統紙張。

請不要將狗耳這個元素用在圖示左邊，因為產生的陰影會中斷整個圖示整體的和諧。

狗耳般的摺角


134*圖示

這麼做


135*圖示

別這麼做

提升是關鍵元素，他在背景邊線的正中央容易注視到的上方。

不要讓它被其他圖形裁切。

提升


136*圖示

這麼做


137*圖示

別這麼做

這個元素能夠在不破壞原本的形狀下產生深度的層次感，但必須在對稱圖形的中央。

請不要使用多個，或者將它放在非中心位置。

畫線


138*圖示

這麼做


139*圖示

別這麼做

摺疊元素具有較大的維度，Spotcolors不該使用，以便避免改變或歪曲要素的本質。

折


140*圖示

這麼做


141*圖示

別這麼做

重疊的物質元素創造出獨特的剪影。所有的元素，邊緣和陰影僅限於輪廓的內部。

不要超過兩個以上的重疊。有太多的複雜的圖標，缺乏重點。

交疊


142*圖示

這麼做


143*圖示

別這麼做

手風琴折疊元素是毗鄰且相連的對折，用於增加單一元素的尺寸。

不要超過兩個對折，太複雜的圖示沒有重點

手風琴


144*圖示

這麼做


145*圖示

別這麼做

產品圖標不應該被扭曲或變形。元素應該保留原來的幾何形狀，而不被扭曲，旋轉，鞠躬，彎曲。

扭曲


146*圖示

這麼做


147*圖示

別這麼做

系統圖示，或稱介面圖示，能象徵指令、檔案、裝置或目錄。系統圖示也用來表示常見的指令，例如「移至垃圾桶」、「列

印」或「存檔」。

系統圖示被設計成簡潔、現代感、友善使用者甚至有時候帶點趣味感。每個圖示都將設計簡化到最精髓的樣式，這樣的設計

即使在小型尺寸的圖示也能確保可讀性與清晰度。

系統圖示


148*圖示

形態鮮明與幾何化。

對稱性與一致性維持獨特的品質，同時兼顧簡潔與鮮明。

設計原則


149*圖示

簡單


150*圖示

直覺的


151*圖示

可操作的


152*圖示

具有一致性

系統圖示被顯示於24dp，當製作圖示時，它能被精準的100%縮放設計是很重要的。

柵格、比例與大小

DP單位的網格


153*圖示

100%scale


154*圖示

800%scale

圖示的網格已經被發展的建立一致性，且建立清楚的規範來圖形元素的地位。這個標準是富有彈性但也具有連貫性的系統。

圖示網格


155*圖示

網格


156*圖示

基線

內容區域是一個圖示應該能夠存在的範圍。如果視覺比重需求，內容區域僅能延伸到修飾範圍。不要把圖標的任何部分超出

修飾範圍外。

內容區域


157*圖示

活動區域


158*圖示

修飾範圍

基線形狀是網格的基礎，在使用這些核心的形狀，你可以維持整個系統圖示的一致性。

基線形狀


159*圖示

方形

寬與高：18px


160*圖示

圓形

半徑：20px


161*圖示

垂直矩形

高：20px,寬：16px


162*圖示

水平矩形

高：16px,寬：20px

預設設計的標準確定為特殊的基線：圓形、正方形、長方形、正交矩陣和對角線。這些普遍級簡單元素的小面板已經被發展

為統一的Google系統圖示，並有系統的放置在圖示網格上。

幾何形


163*圖示

建構


164*圖示

組成

1.筆畫終端

2.角3.區域單位

4.筆畫

5.筆畫單位

6.邊界區域

系統圖示解析


165*圖示

一致性的圓角半徑是統一整個系統圖示的關鍵。2px的圓角用來表現圖示的輪廓。別調整圓角的筆劃(2px的寬或是更少)

內部的角會是方形，別把內部的角調整成圓角。

角


166*圖示

外部角


167*圖示

內部角

一致性的筆畫寬度是統一系統圖示的關鍵。維持2px寬度的比例，包含了曲線、角、外部及內部的筆畫。

筆劃


168*圖示

一致性的


169*圖示

折線及角


170*圖示

線段終點


171*圖示

筆劃單位

在一些極端的情況來說，細微的調整能夠增加圖示的辨識度。在複雜的情況下調整細節是不可避免的。

如果視覺修正是必要的，只能用和其他圖標一致的幾何性，別用扭曲或傾斜的形式。

視覺修正


172*圖示

複雜


173*圖示

小縮放

圖示周圍保持一定的空間是需要符合易讀性和可觸控性。

清空


174*圖示

清空區域


175*圖示

放置

一致性幫助使用者理解圖示。盡可能的在不同應用程式下使用已存在的系統圖示。

最佳實踐


176*圖示

好的做法

使用相同的筆畫寬度以及方正的筆畫結尾


177*圖示

不好的做法

別使用不一致的筆畫寬度及圓角筆畫結尾


178*圖示

好的做法

讓圖示的顯示正面並且堅固


179*圖示

不好的做法

不要傾斜、旋轉，或者讓圖示表現出空間


180*圖示

好的做法

讓圖示簡化使其更有清晰度及易度性


181*圖示

不好的做法

不要過度直譯，避免複雜的圖示


182*圖示

好的做法

使圖示更加圖形化且大膽


183*圖示

不好的做法

別過度精巧，以及細的筆畫寬度


184*圖示

好的做法

使用幾何圖形，一致性的筆畫


185*圖示

不好的做法

別使用過度鬆散的形狀


186*圖示

好的做法

讓圖示在點陣上—意指X、Y座標數值是整數，不包含小數。

圖示需有相等的寬度和高度(Ex:24x24)，避免扭曲的圖標


187*圖示

不好的做法

圖示的座標沒有再像素上。

不要有不相等的寬與高值。


188*圖示

啟動圖示在標準的不透明度在亮色背景上是54%(#000000)。非啟動的圖示，在視覺層級上是較低的，透明度為26%(#000000)。

啟動圖示在標準的不透明度在暗色背景上是100%(#FFFFFF)。非啟動的圖示，在視覺層級上是較低的，透明度為30%(#FFFFFF)。

翻譯：Peter

更新：Tillonter

更新：Casper

顏色


189*圖示




190*圖示

圖像不只是裝飾。圖像是一個幫助你傳遞和差異化你的產品的強大工具。大膽、生動、有目的的圖像有助於吸引使用者。

不論心情是壓抑且緩和的或者是明亮且多彩的，以下的原則和最佳實作可以幫助你成功地整合圖像並且賦予你的應用程式生

命，適用於任何品牌形象。

當使用圖片和影像來提升用⼾體驗，建議選擇可以傳達個人相關的、資訊和喜悅，這些原則可以幫助傳遞你的產品的圖像涵

義。

Imagery

原則


191圖像


192圖像

個人相關

一個聰明的應用程式會有可以準確反映內文和使用者所居住的世界。


193圖像


194圖像

內含訊息傳達特定的信息，加速並促進理解。


195圖像


196圖像

喜悅

具有美感的體貼想法與合適的內文，可以讓你產品感覺是特殊的並且和你的使用者感受相關，藉此使你的使用者覺得

愉快。

統合邏輯以確保圖像是動態、生動的，上下文易理解，以及上下文有相關性。能預測的視覺效果顯示了傳達的層級，大幅改

善使用者體驗。

別害怕以色彩和文字疊層遮掩或提示到整合的英雄圖像與小圖示。

善用上下文

3D思維


197圖像

這兩張圖和攝影可以使用在同一個產品中。攝影自動地意味著一定程度的特殊性，應該用來展示特定的對象和故事。插圖是

一個在攝影可能無法有效表達意念的情形下，卻能有效地展現概念和隱喻的方式。

最佳實踐

使用各種不同媒介


198圖像


199圖像

能這麼做

對於明確的實體，首先使用攝影來表達。


200圖像


201圖像

能這麼做

當所有的特殊性不可用或不適用，使用插畫能清楚傳達應用程式情報，同時也提供了對於內容的立即了解。

能這麼做

對於特定的概念，使用特定的照片。


202圖像

不能這麼做

不要預設當成是文字的圖片庫

用圖像來傳達一種獨特的聲音和體現創意的卓越。

對於特定的實體或品牌的內容，用具體的意象。對於較抽象的內容，多一些敘述內容。照片圖庫和拼貼畫面並不能傳達內容

的額外資訊或暗示。

遠離圖庫


203圖像

能這麼做


204圖像

不能這麼做

使用具有焦點、且有標誌性意義的圖像。聚焦範圍從單一實體到全體組合。確保用一個難忘的方式將清晰的概念傳達給使用

者。

聚焦一個重點


205圖像

能這麼做

讓意思可以立刻被辨別。


206圖像

不能這麼做

不要讓使用者尋思圖像中要表達的意思。


207圖像

能這麼做

具有最強力傳達能力的圖像，包含了少量地具有意義的元素和最少的使人分心的元素。


208圖像

不能這麼做

當重點被模糊掉了，圖像的傳達能力的特質也就消失了。


209圖像

能這麼做

一個清晰的重點在第一眼就傳遞了整個概念。


210圖像

不能這麼做

失去了重點讓圖像毫無意義。

營造一個讓人身歷其境的故事和一個對內容的感覺來讓應用程式人性化。透過視覺化的故事來定義一個情緒。令人有所啟發

的？陰沉的？歡樂的？

創造一個故事


211圖像

能這麼做

一個可以說故事的影像是非常有趣而且可以傳遞訊息的。


212圖像

不能這麼做

一個沒有故事的影像喪失了可以傳遞情緒、品牌和內容的機會。


213圖像

能這麼做

適當地與內容相連結的概念更有效地傳送你的訊息與品牌。


214圖像

不能這麼做

一個與內容無關的呈現方式是無趣的。

保留圖像的原始完整性。不要施加沉重的濾鏡或高斯模糊效果，尤其是為了要隱藏圖片解析度太差。

不要過度加工


215圖像

能這麼做


216圖像

不能這麼做


217圖像

能這麼做


218圖像

不能這麼做

請確保您的圖像的大小適應各種發佈此產品的平台、裝置。使用的框架注重高畫質圖像。理想情況下，不應該會出現像素

化。測試合適的大小以及比率支援各種設備。

使用者介面統合

解析度


219圖像


220圖像

能這麼做

適當大小的圖樣


221圖像


222圖像

不能這麼做

解析度太差的圖像

使用替換的縮放大小來創造視覺重要性的層級。

縮放大小


223圖像


224圖像

在一個畫廊內容中，引入各種尺寸的略縮圖來傳達內容層次結構。


225圖像


226圖像

推薦在同一個生態圈中使用各種容器。

為了使文字清晰的顯示在圖像上方，添加文字保護的紗。

凸顯文字


227圖像


228圖像

能這麼做

取決於不同內容，深的紗的不透明度應當在20％-40％、淺的紗應當在40％-60％最為理想。


229圖像


230圖像

不能這麼做

不要用太厚重的陰影來保護文字，導致圖片晦暗。


231圖像


232圖像

能這麼做

對於較大的區塊，如果要凸顯文字，請保護特定區域，而不是籠罩整個圖像。


233圖像


234圖像

不能這麼做

不要將整張圖像套上一層遮罩。


235圖像


236圖像

能這麼做

顏色疊加跟文字保護不同，可以用來作為設計元素。當創建補色疊加，從並列的顏色樣本來創建一個統一的調色板以

及顯示內容的意象。


237圖像


238圖像

不能這麼做

頭像和縮略圖代表的實體或內容，無論是從字面上通過攝影或概念。一般來說，它們是點擊進入內容主要畫面的目標。

頭像可被用於表示人。對於個人頭像，提供個性化的選擇。由於用⼾可以選擇不進行個人化頭像，提供令人愉快的預設頭

像。當與一個特定的標誌使用，替身也可以用來表示品牌。

縮略圖暗示更多的信息讓用⼾一窺內容，並協助導航。縮略圖讓你可以在狹小的空間置放圖片。

頭像跟略縮圖


239圖像


240圖像

頭像使一個應用程式感覺更個人化，且佔用最小空間。


241圖像


242圖像

一個企業形象的頭像，一目了然地傳達企業形象。

英雄形象圖片，通常是擺放在突出位置，如橫幅在畫面的頂部。他們為拉攏使用者，提供了與上下文有關的內容，或加強了

品牌意念。

英雄形象


243圖像


244圖像

特徵圖像

特徵圖像是在異類佈局中重要而基本的焦點。


245圖像


246圖像

英雄形象集合

整合的英雄圖像建立了一個設置在不同的版面內文片段中。他們不是主要的焦點。

畫廊內的圖像是將有著類似格式的強烈視覺化英雄圖像，其放在grid中或者以單獨一張影像作顯示。

畫廊


247圖像


248圖像

圖片網格


249圖像


250圖像

畫廊圖片

翻譯：Tillonter

校稿：陳世能


251圖像


Materialdesign的根本都是來自現實世界中的印刷設計，像是頁面的基線以及網格結構。這種佈局都是被設計給予不同屏幕

尺寸且便於UI的開發使用，最終的目的是要做出可伸縮的應用程式。

佈局規範也強烈建議Apps擁有一致且使用相同的視覺元素、網格架構以及間距，且在不同的平台以及屏幕尺寸皆是如此。架

構以及視覺的一致性可以幫助使用者有條理的認識各式產品，提供用⼾更高水準的熟悉且舒適環境。

在深入的了解佈局細節之前，請思考MaterialDesign是一種基於紙張特性的設計。了解紙的特徵以及細節是很重要的。

在MaterialDesign，應用程式的所繪製像素就像是在一張紙上，紙擁有平坦的背景顏色以及不同尺寸，可以用在各種用途，

典型的佈局是由多張圖紙組成。

系統可能有一些元件，像是狀態列或者捲軸，那些不存在於紙上。比較好的思考方式：就是這些系統元素是被顯示在顯示器

玻璃的背面，它是和表面的應用程式是分離的，且是顯示在下方。

在兩張圖紙等分一個全長的面上都會產生接縫。而兩張圖紙的連接也是靠這接縫，而且接縫通常會一起移動。

階層是兩個不同深度的圖紙所交疊而形成，且兩紙張通常是獨立的移動。

原則

紙的工藝

圖紙的排列


252原則

工具列是一個長條狀且顯示在圖紙上的焦點，用於呈現各種功能。這些功能通常在於工具列的左右側。導航功能會顯示於左

側(收合選單、向上箭頭)，而內容操作的功能則是顯示在右側。

紙的工具列


253原則

工具列左右側的功能，絕對不能被其它的圖紙隔開。因此，工具欄可以限制它的寬度小於紙張的全寬。


254原則

Do.

限制它的寬度小於紙張的全寬。


255原則

Don't.

絕對不允許被額外的圖紙隔開。

工具列經常因頁面動作影響下方顯示主要內容的圖紙，當圖紙在工具列下方捲動時，工具列形成一個點防止圖紙通過到另外

一端。


256原則

工具欄一樣可以與其他的圖紙產生接縫，隨後向上抬起形成了階層，這樣的變異被稱為瀑布(waterfall)。

另外，工具欄依然可以維持其接縫，讓兩張紙在屏幕上同時推移。


257原則

最後，另一張圖紙也能在移動時，覆蓋在工具欄上方。

工具列通常有一個標準的高度，但也能夠更高。當在更高的情況下，功能選單也同時需要固定在工具列的頂或底部。


258原則

在位置固定時工具列可以動態的改變高度，在縮放的時候將截取他們最大及最小(標準)的高。

浮動的操作是一個圓形紙樣，它是從工具欄分離出來的。

浮動操作表示一個上下的轉換行為。如果圖紙組成是有階層的，浮動操作紙樣也能夠跨過這一個階層。

浮動操作


259原則

如果內容的圖紙是由接縫組成的，浮動操作紙樣也能跨過一個接縫。

絕不要用裝飾性的接縫，只是來固定一個浮動操作紙樣。

為了建立一個跨裝置的佈局，我們的網格結合了固定、黏著以及流體的方法。

這裡我們有一些簡單的樣式規範需要去遵循：

1.尊重人的常態行為

2.更大的屏幕≠更多的認知容量

3.線的長度應該能夠被削減。

4.賬⼾與角落的距離

5.將內容遠離邊界：允許空白，別將內容呈現限制於工具欄的錨點。

要使用這樣的方法對應不同階層的尺寸，像是屏幕與卡片這樣的落差。

以下的樣板套用一些格線規則來展示響應式效果。

響應式的原則


260原則

樣板

深度的測量單位是dps，就像是X與Y軸，當然它也能夠想像成元素的優先值。相較於元素絕對位置與固定位置的Z軸，dps也比較能夠理解優先順序。

高層次的每個應用程式都必須考慮不同空間及容器。

一個應用程式圖紙與其他應用程式圖紙，兩者並不會交錯於Z空間。

動作以及項目會分別在另一個應用程式，舉個例來說，在一個應用程式拖離一個選單項目時，並不會使另一個不相關應用程

式進入畫面空間。

容器允許同時多個應用程式顯示在畫面上，像是多個瀏覽器標簽。

維度

概念模型


261原則

http://material-design.storage.googleapis.com/downloads/Layout_Desktop_Whiteframe.ai

在特定的應用程式中，大多元素的位置都是依據主要及次要的關係。例如，一個按鈕在被關注的狀態是次要的步驟，而當它

被按下時就是主要的步驟。

其他元素有一個固定的優先級的應用程序的Z-空間內，這意味著它們總是出現上面或下面的其他元素，無論這些項目'沿z軸的

相對位置。例如，浮動操作按鈕總是出現上面的內容和工具欄，無論張紙多少可能正在使用的應用程序。

在應用程式內，部分的元素有固定的優先層級，不論這些物件的Z軸為何，它們總是會顯示在其他元素上方或是下方。舉例來

說，先前所提到的浮動按鈕，不論應用程式有多少的圖紙，按鈕總是顯示在內容之上的工具欄。

系統的元件，像是狀態列還有系統提示，他們所存在的區域是所有應用程式的上或下方(深度位置)。

根據目前的狀態，系統元件不一定要呈現在畫面上(如在畫面關閉的時候(LightsOutmode))，但當它們存在時，系統原件還

是屬於優先於其他元素。總而言之，系統的提示框還是還是會高於目前運作的應用程式。


262原則

深度並不只是裝飾。

試著去思考物件之間的相對優先層級，而不是絕對層級。

應用程式深度會與使用者溝通有重要的關係，這將會幫助使用者注意到他想要執行的工作。

陰影是由兩個不同層級的圖紙產生：而陰影的強度是由兩者之間的深度所定義出來。

佈局的注意事項

陰影


263原則


264原則


265原則


266原則


267原則


268原則

翻譯：Casper


269原則


所有元件都會對齊8dp的方形基線網格，單字則對齊4dp的基線網格。工具列的圖像對齊4dp的方形基線網格。以上會運用到

手機、平板、桌面裝置。

註：DP:與(像素)密度無關的像素單位

指標及標線

基線網格


270指標及標線


271指標及標線


272指標及標線

參考更多的元件(components)細節.

參考更多的文字排版(typography)細節.

手機佈局樣板包含各種螢幕呈現的訊息，這些是關於標線、間距在橫跨螢幕邊緣的元素是如何運作的。在下方的連結可以下

載這份樣板。

手機佈局樣板(Download)

導覽線及間距

手機


273指標及標線

http://material-design.storage.googleapis.com/downloads/Layout_Mobile_Whiteframe.ai


274指標及標線

情境

這個畫面呈現了圖標、頭像以及一個2線的列表在左方排列，還有一個56dp的浮動動作圖樣及文字對齊右方。


275指標及標線


276指標及標線

垂直標線及水平邊距

垂直標線在距離左右方的邊緣16dp，內容相關的圖示或者是頭像距離左方72dp的邊緣。手機有16dp的水平邊距。


277指標及標線


278指標及標線

垂直間隔

1. 24dp2. 56dp3. 48dp4. 72dp


279指標及標線


280指標及標線

情境

這個畫面顯示了圖標、頭像、2線列表、副標以及一個40dp的浮動動作圖樣對齊在左方，另外有圖示對齊在右邊


281指標及標線


282指標及標線


垂直標線在左右邊的邊距各有16dp，圖示也對齊這標線。內容的圖示、頭像對齊左方邊緣72dp。

手機有16dp的水平邊距。


283指標及標線


284指標及標線

垂直間隔

1. 24dp2. 56dp3. 72dp4. 48dp5. 8dp


285指標及標線


286指標及標線

情境

這個畫面展示了對齊在左方的圖示，以及另外的圖示、一個56dp浮動動作圖樣對齊在右方。


287指標及標線


288指標及標線


圖示在左側邊緣的16dp的垂直標線，內容的圖示以及頭像對其左邊緣72dp。另外有一條額外的標線從右方32dp的邊

緣，讓下方賬⼾的圖標與浮動動作圖樣對齊。



289指標及標線


290指標及標線

垂直間隔

1. 24dp2. 56dp3. 8dp4. 72dp


291指標及標線


292指標及標線

情境

這個畫面呈現了圖示、頭像以及段落文字對齊左方，另外浮動動作圖樣以及內文對齊在右方。


293指標及標線


294指標及標線


垂直標線在左右邊的邊距各有16dp，內容的圖示、頭像對齊左方邊緣72dp。



295指標及標線


296指標及標線

垂直間隔

1. 24dp2. 56dp3. 48dp4. 8dp


297指標及標線


298指標及標線

情境

這個畫面呈現了側欄的導覽選單，它包含了圖示、頭像以及部分文字在左，而圖示在右方的畫面。


299指標及標線


300指標及標線


在側欄選單的邊緣16dp建立垂直標線，其內容的圖示以及頭像對齊側欄左邊緣72dp。側欄的寬度等於屏幕的寬度減去

操作欄的高度，在這個範例中就是從右側邊緣算起的56dp。



301指標及標線


302指標及標線

垂直間隔

1. 48dp2. 8dp3. 56dp

平板的佈局樣板包含了14種不同的屏幕，用來顯示標線以及間距橫跨螢幕邊緣元素是如何運作的。在下方的連結可以下載這

份樣板。

平板的佈局樣板(Download)

平板


303指標及標線

http://material-design.storage.googleapis.com/downloads/Layout_Tablet_Whiteframe.ai

1. 24dp2. 64dp3. 8dp4. 72dp


304指標及標線


305指標及標線

1. 24dp2. 64dp3. 8dp4. 48dp5. 80dp

在桌面佈局樣板中包含了4種不同的屏幕，每個還有四種不同的視窗大小，並且顯示標線以及間隔是如何在不同視窗及元件中

運作。建立在視窗的尺寸之上，標線與間隔空間將繼承平板以及手機的格線規則。

桌面的佈局樣板(Download)

桌面


306指標及標線



307指標及標線

標線比

標線比


308指標及標線

標線比適用在手機螢幕的寬度，以及UI元素在手機、平板及桌面版的寬度。


309指標及標線


310指標及標線

螢幕寬


311指標及標線


312指標及標線

範例


313指標及標線


314指標及標線

元素寬


315指標及標線


316指標及標線

Example

定義標線的增量，像是使用操作欄的高度倍數，來確定應用程式中其它的元件尺寸及位置。這些應用大部分用在桌面程式，

也會用在平板，但很少用在手機上。增量的數值基準來自應用程式視窗的大小。

增量的標線

增量的標線


317指標及標線

最小的觸控範圍是48dp，在佈局中必須注意圖示(24dp)或頭像(40dp)的間隔，它們觸控的範圍不可以重疊。

觸控點的大小


318指標及標線


319指標及標線


320指標及標線


321指標及標線

翻譯：Casper


322指標及標線


這個章節包含手機到桌面應用程式其中的幾點指導方針。

應用程式的款式相當多，是為了滿足不同的需求，舉例來說：

應用程序，其主要目的是沒有更深的導航不同的活動之間切換（如電話撥號器提供收藏，最近和聯繫人）

專門處理單一個行為的應用程式(像是計算機、相機、還有一些遊戲)主要用來處理不同行為的應用程式，而並沒有更深入的操作(像是電話簿、聯絡人、最近的通話)包含一個廣泛的數據以及深度的導覽(像是有不同資料夾的郵件工具或是購物的應用程式)

你的應用程式結構，是來自於內容以及想要呈現給使用者的功能。

啟動畫面的佈局需要格外注意，這是人們在啟動應用程式所看到的第一個畫面，所以要讓新舊訪客擁有相同的使用者體驗。

試問你自己：“一般的使用者將怎樣去使用我的應用程式”，而這將會是你開始畫面的依據。

將內容轉發。許多應用程序集中的內容顯示。避免導航僅屏幕，而是讓人們通過使內容的開始屏幕的中心找到您的應用程序

的核心體驗的時候了。選擇佈局，在視覺上具有吸引力和適當的數據類型和屏幕尺寸。

將內容擺前面。許多應用程式專注在內容的顯示。避免螢幕只有顯示導覽，而是讓人們透過啟動畫面就了解你們的應用程式

核心概念。以具吸引力的視覺、適合的數據及不同螢幕尺寸來選擇畫面的佈局。

導航及操作。像是任何的工具列，工具欄可以整合各種重要的功能。理想呈現導覽選項的位置，就是將它放在螢幕的頂端。

如果你的內容可以被搜索，工具欄內就包含搜尋功能吧，這樣人們可以透過導航快速切換不同的層級

重視的功能。，當你的應用程式擁有大量的功能及內容，指引用⼾去關注產品重要的環節。突顯內容的重點，把最有特色功

能放在浮動功能的按鈕。別強調應用程式少用的功能。

譯者：TOP-LEVELVIEW是應用程式進入後的第一個階層參考，雖然和索引頁意思並不相同，但為了翻譯順暢，這裡翻譯

做"索引頁"

索引頁是主要介紹應用程式功能的區域，有些應用程式容易被關注，且有適度的導航；其他應用程式索引頁會存在許多的畫

面，而你必須確保使用者可以透過這些導覽找到他們的需求。

選擇最好的且符合你應用程式的導航。

專注一個被嵌入的導覽視點。所有必要的連結都放置在導覽上，提高導航的可見度。當應用程式導覽很簡單的情況下，這或

許是適當的，然而，在大量的連結顯示在導覽時，這可能會減少內容顯示的空間；而且這些路徑可能被分佈在整個螢幕，而

不是容易被預測和方便的位置。

以下情形請用上下文的導覽：

應用程式有強烈的主視覺，且沒有(甚至很少)的替代方案。

結構

UI區域及導覽

從上方開始

索引頁策略(TOP-LEVELVIEWSTRATEGIES)


323結構

http://developer.android.com/design/patterns/app-structure.html

透過主要的畫面，使用者能夠完成大部份常用工作。

你期待使用者會是不常使用這應用程式，而是注重這些連結。

使用頁籤來切換數量不多，且同等重要的內容。如果應用程式只有少數的功能區，每個功能的層次也不多，就使用頁籤來切

換每個不同的索引頁內容。不僅可以快速切換不同的內容，且能透過點擊或是滑動來將內容顯示出來。然而這些頁籤，小顯

示器上也要夠為顯著，且適用在少數且簡潔外觀的標簽上。

以下情況建議使用頁籤：

你期待使用者會很頻繁的切換內容。

索引頁內容總數是有被限制住的。

你想要使用者會關注這些交互的內容。

透過左方導覽面板來管理複雜的結構。在左方導覽面板能夠同時顯示大量的導航目標。在應用程式中有種單一功能的特別有

用，"回首頁"，還有側欄面板還能作為一個較少使用的索引。如果應用程式需要直接從另一個重要的區塊切換過來，從應用

程式的左方滑動面版，來切換不同的內容是很有效率的。然而，由於它沒有一個直覺的提示，它需要使用者花些時間去熟悉

它。

以下情況建議使用側面導覽面板(navigationdrawer)：

應用程式有大量的索引頁內容

你希望應用程式能夠在不同的內容中切換，即使他們沒有直接關係

應用程式中有較深層的架構，需要加速回到應用程式的頂層。

你希望降低一些不常使用的連結能見度。

無論你選擇怎樣的索引頁，導覽都是有效在不同資料中切換。有些範例是提供連結在一首音樂與同歌手的不同音樂中切換，

或者是在最近的項目以及完整歷史資料中切換，或者是從一篇文章中連結其他相關資料。這些連結提供一個平台，使內容延

伸到另一個相關的。

手機的結構上包含一個總是存在的應用程式列，以及浮動操作按鈕。而底部可以增加一個按鈕來附加額外的功能。側欄選單

當使用者使用時，它可以覆蓋其他的元素。

手機


324結構

平板的結構總是會存在浮動操作按鈕，而工具欄是繼承平板和手機的元素，底部可以增加一個按鈕來附加額外的功能。側欄

選單當使用者使用時，它可以覆蓋其他的元素。右方的導覽可以暫時或是永久固定的呈現。

這個結構總是會存在著浮動操作按鈕，而工具欄是繼承平板和手機的底部元素。視窗的的功能鍵可以被併入工具欄。側邊的

平板

桌面


325結構

導覽選單可以暫時或是永久固定的呈現。側邊選單針對內容可以有它們第二個工具欄，用來顯示標籤、樣式、或是次級的操

作。

定義一個主要的水平或垂直線。

避免分割過多的區域，這樣可能會導致L型佈局。而我們可以用空白去規劃次要的區域。

UI規範


326結構

利用卡片及懸浮操作按鈕來突破邊線。

當需要特定的行為或是資訊內容需要明顯的分割時，可以利用卡片去組織內容，這會比分割線或空白更為適合。


327結構

工具欄的用途很多，可以應用在各種地方，已是可以參考一些工具欄的使用範例。

全寬，預設高度的工具欄

全寬,高度延伸超過複數的欄寬

工具欄


328結構

再多層次結構的欄寬工具欄

可伸縮的工具欄及卡片式工具欄

浮動工具欄

分離的樣式工具欄


329結構

底部的工具欄，他緊貼在鍵盤或是其他底部元件的上方。

底部工具欄

應用程式欄，是之前Android的操作欄，被用來放Branding、導覽、搜尋以及其他操作。

如果你的應用程式欄用的是開合側欄，那麼它的圖示在開啟時必須轉換成倒退的箭頭圖示。標題可以當作應用程式的標題、

頁面的標題或是頁面的過濾器。

右邊的圖示必須和應用程式的操作有關，選單的圖示可以展開選單，選單的項目包含幫助、設定、回饋。

應用程式工具欄

應用程式工具欄的結構


330結構

亮色

暗色


331結構

彩色

透明

預設高度

手機垂直狀態:48dp

手機水平狀態:56dp

平板、桌面:64dp

如果要延伸應用程式欄，他的高度等於預設高度加上內容的高度。

標準


332結構


333結構


334結構


335結構


336結構


337結構


338結構

選單像是一張臨時擺放的圖紙，他總是覆蓋在應用程式欄上方，而不是應用程式欄的延伸。

選單


339結構


340結構


341結構


342結構

左邊和右邊的側欄可以被固定用來永久顯示，或者它們可以暫時覆蓋在上方。左邊的側欄，主要是用來導覽或是顯示身份

的。右邊的側欄，則是用在更深的階層資訊，或是頁面次要的內容。

側欄


343結構


344結構

側欄暫時展開時會覆蓋內容，如果它固定的狀態則會緊貼內容的邊緣，或是在內容的下方。

標準

手機:側欄寬=螢幕寬-工具欄高度

範例:

Nexus4:304dp

Nexus5:288dp

iPhone:264dp

桌面:左方最大寬度是400dp，右邊的尺寸則是依據內容。

結構


345結構

桌面、平板:固定，寬度需要對齊欄。

浮動最大寬度:304dp

手機


346結構


347結構

桌面左方側欄

桌面右方側欄

基本框架


348結構

基本框架提供了各種佈局結構，利用相同的方式表現圖層、陰影及表現區域。

基本框架

卡片式的內容擴展及收合


349結構

http://material-design.storage.googleapis.com/downloads/Whiteframes.ai

在手機上，重疊的內容及被關注的應用程式欄。

在手機上，卡片與多個工具欄以及背景圖。

擴展的應用程式工具欄以及又方的側欄。


350結構

在手機上，左方的工具欄。

資源列表


351結構

嵌入式搜尋區域以及卡片式搜尋結果，以及全螢幕背景圖。

可以展開的底部

翻譯：Casper


352結構


呈現在按鈕下方一組操作動作的工作表，從畫面下方邊緣向上滑動。按鈕工作表在顯示上提供更彈性清楚及簡單的操作。

內容

用法

內容

行為

規格

底部工作表特別適用於在三個以上的操作，並且此操作功能不需要描述很多細節。如果功能只有兩個或更少的操作或者細節

描述，請考慮使用菜單或對話框代替。

底部工作表可以當作是列表樣式或網格樣式。以網格形式佈局增加了視覺有避免含糊不清的現象。

您可以使用底部工作表顯示與其他應用程式的關係，或者允許進入到其他應用程式（透過應用程式圖示）

在標準的列表形式的底部工作表，每個動作應該要有一個文字描述以及靠左對齊的圖示。必要時你可以使用分隔符號分類群

組的動作。你也可以選擇使用副標題或標題定義上下文

網格形式的底部工作表是一種可滾動捲軸方式，其中是包含標準的操作圖示。

底部工作表

用法

內容


353底部工作表


354底部工作表

當顯示底部工作表時，它應該是從螢幕底部邊緣向上滑動的動畫。在使用者選擇底部工作表中的上下文及模組的時候，原先

的畫面將變暗淡。輕擊變暗的區域將關閉工作表，並且從工作表上向下滑動回去。若工作表初始項目顯示許多操作，此工作

表是可滾動捲軸的方式呈現。滾動時將拉起工作表容器，最終將覆蓋整個螢幕。當此動作覆蓋了整個螢幕時，將會在標頭的

左方增加一個關閉按鈕。

提供字體和顏色的規格以及紅線輔助於行動裝置應用程式。

行為

規格


355底部工作表

紅線為列表樣式表頭


356底部工作表


357底部工作表


358底部工作表

紅線為網格樣式底部工作表，此包含一套標準動作提供給不同應用程式使用。

翻譯：WeijuTu


359底部工作表

https://www.facebook.com/weiju516

按鈕是由文字及/或圖片所組成，而它能清楚地傳達出一種觸碰時會發生的動作。

在這裡提供三種主要的按鈕：

浮動式的按鈕：一種圓形按鈕，按下去時有具有墨水散開的反應以及升降的效果

凸起式的按鈕：一種典型的按鈕，按下去時具有墨水散開的反應以及升降的效果

扁平式的按鈕：一種一般的按鈕，按下去時具有墨水散開的反應，但是沒有升降的效果

此外，在您的設計中，完全飽和圖示是一般性的預設用途，避免讓它們變成一種單純的裝飾物件

按鈕的設計應該根據應用程式的佈景顏色

用法

按鈕


360按鈕


361按鈕

浮動式的按鈕


362按鈕


363按鈕

凸起的按鈕


364按鈕


365按鈕

扁平式的按鈕

按鈕類型是您在選擇按鈕時應將此考慮放在第一位，並且考量螢幕上的容器數量以及螢幕的整體佈局。

首先，看一下按鈕的功能：是否常態性出現以及重要的一種浮動動作按鈕？

接著．選擇凸起或扁平的按鈕，在將是根據這個螢幕上的容器裡面需要有多少的z-space層。他們不應該在螢幕上層層疊

起。

最後，看一下您的具體局。您應該在每一個容器使用主要的一種類型的按鈕，若您有更好的理由去使用混合型的按鈕，比如

強調一個功能。

在對話框上使用主要的油墨式的按鈕以防止太多層次。

主要按鈕

對話框的按鈕


366按鈕

內嵌式按鈕


367按鈕

選擇凸起或扁平的按鈕是根據您特定的佈局上。請務必保留足夠的位置擺放未放置的按鈕讓使用者能夠方便找到它們。


368按鈕

如果您的應用程式需要永久性且容易地使用者操作，首先要考慮的事使用浮動式的按鈕。如果這個動作並不會改變，但又仍

然需要容易的操作，那麼請使用永久性的頁尾按鈕。

永久性的頁尾按鈕


369按鈕


370按鈕

請不要在永久性按鈕的區域使用凸出的按鈕


371按鈕

另外一種分隔器的動作，永久性的頁尾按鈕也可以用在可滾動的對話框


372按鈕

浮動的操作按鈕是一種特殊的進階的技巧。它們是由一個圓圈圖示漂浮在UI上，並且與特殊的意向行為作為區隔，這涉及到

變形，發射，以及傳遞錨點”。

如需要使用更多浮動的動作按鈕，請參考(TBD)

主要按鈕

浮動的動作按鈕


373按鈕


374按鈕

這裡有兩種浮動動作按鈕尺寸：預設大小以及最小的尺寸。最小的尺寸應該只能用在建立與螢幕上其他元素的持續性的視

覺。


375按鈕

凸起按鈕是另一種在寬廣的空間或擁擠的地方丟失的強調性功能，他們多半在扁平的佈局建立。

凸起式按鈕


376按鈕


377按鈕

好的。

正確的使用凸起式按鈕


378按鈕

不好的。

按鈕很難被看見。

使用扁平式按鈕是避免太多分層，就像是工具列，對話框和彈出區塊。

扁平式按鈕


379按鈕


380按鈕


381按鈕

好的。

正確的使用扁平式按鈕


382按鈕

不好的。

凸起式按鈕太笨重了。

模擬按鈕狀態

凸起的按鈕就像一張紙放在另一張紙上面。他們在上方按下時的浮起及顏色。

扁平的按鈕保留著扁平面以及在上面按下時的飽和顏色。

按鈕當呈現墨水散開的樣式表示著目前正為聚焦的目標。聚焦的狀態動畫是在正常狀態下與按下時之間的效果。

在模擬的方式解釋按鈕狀態，您可以使用圖形環來表示動畫。需要注意的是聚焦的狀態種是在操作按鈕的動畫中呈現。（這

些圖像並不代表聚焦狀態就應該呈現實作的樣子）

扁平及凸起按鈕的狀態


383按鈕

FlatLight/Lightcolor

最小寬度：88DP,高度：36DP

Hover:20%#999,Pressed:40%#999,Disabled:10%#999


384按鈕

FlatDark/DarkColor


Hover:15%#ccc,Pressed:25%#ccc,Disabled:10%#ccc


385按鈕

RaisedLight/LightColor



386按鈕

RaisedDark/DarkColor


Normal:Color500,Hover:Color600,Pressed:Color700,Disabled:10%#ccc

扁平式按鈕

凸起式按鈕

圖示是用在應用程式列及工具列上，可以用來作為操作按鈕或切換按鈕。

圖示切換可以在觸碰到目標範圍時顯示有邊界或無邊界的區域。若想瞭解更多訊息，請參考SurfaceReactions.(TBD)

按鈕效果

其他按鈕

圖示切換


387按鈕


388按鈕

下拉式按鈕是一個控制某一個控制項值的狀態;可能有兩個或多個狀態。該按鈕顯示目前的狀態以及向下箭頭的圖示，互動時

會有個菜單緊鄰控制項飛出，並且通常呈現所有選項。狀態可能在下拉的菜單裡表示一個列表的字串，調色板，圖示，或是

顯示其他的選項。

按下一個選項改變目前顯示的狀態。下拉的顯示呈現通常是列表清單。滾動的方式也應該像是菜單的樣子。

行動式的下拉選單

下拉式按鈕


389按鈕


390按鈕

一個下拉選單通常在沒有顯示狀態但顯示一個箭頭或通用的菜單按鈕。當按鈕被按下時，該菜單將會飛出。按下選單時一般

在菜單上會導覽更多設定的選項。

分段的下拉選單有兩個部分：目前狀態及下拉箭頭圖示。按下目前狀態會在螢幕上出現變更狀態的動作。在按下下拉箭頭的

圖式時，將顯示所有狀態的選項，並且可以選擇一個將要改變選項的狀態

在分段的下拉選單顯示為可編輯的內文，就像是字體大小的選擇器。按下目前的狀態可以使狀態改變以及顯示目前編輯的狀

態。按下按鈕顯示所有狀態的選項。

一般溢出的下拉選單

分段的下拉選單

可編輯的分段下拉選單


391按鈕

桌面應用程式列的規格

桌面樣式的下拉選單


392按鈕

翻譯：WeijuTu


393按鈕


卡片就像一張紙一樣，它包含了相關的資料以及由不同的資訊所組成的。舉例來說，一張照片，文字，以及並且連接著單一

的主題。卡片通常是前往更複雜以及詳細資料的一個進入點。卡片有一個特定的寬度以及可變的高度。最大的限制高度是取

決於平台上最適當的視圖，不過如果有必要也可以暫時性擴展（比如顯示一個註解的段落欄位）卡片不做翻轉去顯示背後的

訊息。

內容

用法

內容

動作

行為

卡片是一種很方便顯示不同類型所組成的內容。他們也非常適合呈現相似的大小或是支援操作的物件，像是具有可變長度的

照片。

備註:雖然在外觀上相似，而現在的卡片都要求不同子卡片俱有獨特的行為和格式。

卡片集是卡片佈局裡同一面的。

卡片

用法


394卡片


395卡片

這些卡片都包含這一個獨特的資料集：含有操作的核選清單，含有操作的記錄說明，帶有照片的說明。


396卡片

當顯示內容時使用卡片佈局：

作為一個集合，是由多種不同資料所組成的類型（例如：卡片系列包括照片，影片，文字，圖像）

不需要直接的對比（使用者不需要比較圖片或文本字串）

包含高度可變長度的內容（比如：意見內容）

需要顯示超過三行的文字，否則不會在清單裡

需要顯示更多文字來描述圖片，否則不會在網格列表裡


397卡片

好的做法.

1.卡片有圓角的邊.

2.卡片可以有許多操作.

3.卡片可以被關閉以及重新排列.

不好的做法.

這是磚塊，不是卡片.

1.磚塊有正方形的四角.


398卡片

2.磚塊無法有超過兩個以上的操作.

好的做法.

用卡片代替是相當適合在可快速閱覽的列表裡，因為他沒有太多的動作表達同值性的內容


399卡片

不好的做法.

在這裡呈現各別快速閱覽且採用項目分隔的卡片．這些列表的項目裡面沒有可關閉的功能，所以在分散的卡片呈現裡

是混雜的感覺。


400卡片

好的做法.

網格磚塊是一種乾淨又輕量型的方式來呈現圖片集


401卡片

不好的做法.

卡片式不需要做圖片集（同質性的內容）

內文字:14spor16sp

標題字:24sporlarger

扁平化按鈕:RobotoMedium,14sp,10sptracking

卡片內距:8dp

卡片間距:8dp

卡片佈局指南

活版印刷

卡片欄距


402卡片

16dp

內文內距


403卡片


404卡片


405卡片

卡片的內容與數量取決于內容的表達可以做些改變。卡片提供上下文以及進入點以取得健全的資訊以及呈現。請確保不要載

入無相關的訊息或操作

內容


406卡片


407卡片

主要的內容的位置通常在卡片的頂部。使用層次的結構引導使用者的注意獲取卡片裡重要的資訊


408卡片


409卡片

卡片裡主要的動作通常是卡片本身。

輔助性質的動作可以改變卡片到卡片的集合，取決於內容類型以及預期的結果。舉個例子，播放音樂與打開一本書之間，在

集合的卡片裡面，操作的地位是相同的。

輔助性的操作明確的指出使用圖示，文本，UI控制項是通常放置在卡片的底部。

UI控制項內容內嵌入在主要內容裡面，以可修改的內容來看可以是，使用一個滑動功能來選擇日期，使用星星作為評分內

容，或者分段按鈕選擇一個日期範圍

除了溢出的菜單控制項之外，都限制輔助性功能操作兩次動作

動作

輔助性的操作

溢出菜單


410卡片

溢出菜單（可選）通常被放置在卡片的右上角，但是假設放的位置可以增加內容的佈局及可讀性，那麼它也可以被放在右下

角

請小心不要載入溢出的菜單有太多的動作

本文內容嵌入的連結強烈阻止。

雖然卡片可以支援多個操作，UI控制項，以及溢出菜單，請禁止放置更複雜及資料細節在上面，也請記住卡片切入點的原意

注意事項


411卡片

支援每張卡片都有刷動手勢。卡片的手勢行為應該在卡片集做一致性的實作。

獲取與移動手勢是做得到的。然而，思考它是否為使用者能後針對卡片排序或者內容能用編程方式做到過濾或排序提供更棒

的使用者體驗。

卡片集可以透過編寫程式方式做排序或篩選日期，檔案大小，或按照字母排序或者其他參數。卡片集合的第一個位置位於集

行為

手勢

卡片集的過濾，排序，重組


412卡片

合的左上角，並且從左到右，從上到下。

卡片集只能垂直滾動。超過最大高度被截斷並且不滾動。

被截斷的內容可以擴展，在這種情況下，卡片的高度可能會超過視圖的最大值。因此卡片滾動將伴隨著卡片集。

對於依賴在導航的順序，其在卡片聚焦的介面（DPad,鍵盤），個人化卡片應該也只能有一個主要動作或者打開現有主要的

以及輔助動作的新的視圖。

翻譯：WeijuTu

滾動

卡片聚焦


413卡片


芯片是代表一個複雜的實體的小方塊。就像是日曆活動或者連絡人。他們可以包含照片，短標題字串（如果需要被截斷），

以及有關其他實體的簡要訊息。新聘很容易透過拖放操作。按下時可以呈現全部實體視圖在一個游標，全螢幕或者芯片的實

體選項上的菜單。動畫呈現以及從芯片呈現應該調整為永久性的實體視圖之間的芯片紙張元素。

內容

觸點芯片

觸點芯片代表使用者來說就像是連絡人資訊。他們在呈現上並且插入到一個輸入欄位（通常是“收件者”的欄位）當使用者開

始輸入連絡人的名字時，將看到連絡人的地址並且可以選擇正確的地址。觸點芯片可以直接從聯絡菜單加入到一個輸入欄

位。

因為他們可以讓使用者確認他們將發送消息送到正確的收件者。並且在空間上與操作上是相當有效率的。

芯片

觸點芯片


414芯片


415芯片

聯絡人的姓名字型是採RobotoRegular14sp.當芯片凸起時，此時為焦點目標。當按下時，擴展顯示可選擇的連絡人列表。

預設情況下，上方的欄位是被啟用並且是聚焦狀態

聯絡人姓名的字型是RobotoRegular16sp.地址字型是RobotoRegular14sp.當按下時，觸點芯片將關閉

關閉觸點芯片

開啓觸點芯片


416芯片


417芯片

翻譯：WeijuTu


418芯片



419芯片

對話框是在告知使用者緊急的訊息，要求使用者做出決定，或者在一個分散的過程中包裝成多個任務。由於對話框是一種中

斷性突然顯示並且停止使用者當前的任務和需要關注對話框裏的內容。並非每個選擇、設定或者細節都是像中途中斷或是明

顯的方式。

可替代對話框的元件包含簡易的菜單或者當前內容區域內擴展內容。這兩種方法提供訊息或者同時保持當前內文與比較少破

壞性的選擇。

對話框的內容可以有廣泛的變化，不過典型的做法是通常包含內文或者UI控制元件在特定的任務或程序，就像確認項目的刪

除或是選擇一種設定。

使用對話框的內容區域可揭露更多的訊息或者更進階的內容。避免從對話框裡面又打開對話框。

全螢幕的對話框可能會打開更多的對話框，比如顏色選取器，因為它們所設計的材料必須做為附加層，且不增加感知的z深度的應用或是增加視覺聲音。

避免產生有滾動式內容的對話框，特別是提示視窗。相反的，須考慮正在閱讀或者具有交互資料的大量內容，必要時使用替

代性的容器或者佈局。

對話框

內容


420*對話框


421*對話框


422*對話框


423*對話框

對話框是獨立在基礎本體上並且不會與本體造成滾動。

某些類型的對話內容，自然需要一些滾動，比如較長的鈴聲。在這樣的情況下，將預設顯示滾動條明顯顯示資料內容。

對話框不應該被其他元素或是只出現部分在螢幕上所掩蓋。對話框總是保持明顯的關注，直到它們被確認或是反向的選擇行

為。比如選擇設定。

警告是用來通知使用者需要在繼續前進之前的一種確認或是確認狀況的行為。它們是基於在一個嚴重性與傳遞訊息且有外觀

會有稍微不同。

警告是一種干擾性質與緊急迫切的，並且在做出決定之前防止使用者繼續進行下個階段。

澄清：相對於警告訊息，Snackbars目前是可選的，但是重要的訊息或者動作，通常會出現在一個操作之後。例如，使用警

告確認刪除草稿。使用Snackbars呈現一個取消動作，因為操作是可以選的，使用者可以在無需採取動作下繼續的使用它們

主要的任務。

警告不包含標題欄位

大部份的警告不需要使用標題欄位。通常的狀況下，決定不具有嚴重的影響，它是可以在一兩個句子簡潔的方式描述。內容

區域可以詢問問題（例如：“刪除”的對話）或者做出一個明確的描述，其操作的按鈕是容易明顯的。

行為

警告


424*對話框

建議的做法。

刪除的操作文本很清楚地表明決策的結果。


425*對話框

不建議的做法。

在否定動作文字No答案，不建議後面會發生什麼事。更好的操作是需要將取消以及刪除的按鈕一併做出明顯的顯

示。

警告包含標題欄位

使用警告包含標題欄位時需謹慎使用。它們只用在高風險的情況下使用，例如資料有潛在的遺失或是資料連接或者有額外費

用的訊息。

如果標題是必填的，那麼在內容區域的地方使用清楚的問題或是補充說明的陳述。例如，“是否刪除USB儲存？”

避免道歉狀況，以及模糊的陳述或者問題。例如。“警告！”或者“您是否確定？”

使用者應該能夠完全跳過內容，並且仍然根據標題及操作按鈕上的文字呈現一個清楚的概念提供使用者的選擇。


426*對話框


427*對話框

建議的做法。

這個對話筐提出了一個具體的問題，扼要的闡述影響並且提供一個明確的動作。


428*對話框


429*對話框

不建議的做法。

這個對話框構成了一個模稜兩可的問題以及不清楚的影響範圍。

簡易選單都使用在平板、行動裝置上的列表圖示，用來顯示特定的列表選項。簡易選單選擇後會立即提交選擇。可參考元件

>選單>簡易選單有更多細節關於簡易選單。

澄清：相對於簡易選單，簡易對話框能夠呈現選項的附加細節，或者是提供導航在主要流程中的相關選擇。雖然他們能夠顯

示相同的內容，簡易選單更優於簡易對話框，因為簡易選單對於目前使用者的畫面破壞性較少。

簡易對話框能夠提供附加的細節以及用於列表的選項，或是提供導航等其他相關的主要任務。舉例來說，簡易對話框能夠顯

示頭像、圖示、相關的內文，或者是他們能夠讓使用者增加非目前列表上的一個帳⼾。

選擇一個選項將立即被提交並且關閉選單。

點擊對話框的外部，或是倒退、取消將會關閉對話框。

簡易選單

簡易對話框


430*對話框

簡易對話框比簡易選單更具有干擾性，應該謹慎使用。


431*對話框


432*對話框


433*對話框


434*對話框

簡易對話框沒有明確的接受及取消按鈕。

簡易對話框顯示在屏幕的垂直及水平中央。

對話框在距離邊緣的距離，左右最小為40dp，上下最小為24dp。

對話框的邊緣與內容之間的距離是24dp。


435*對話框


436*對話框

別這麼做


437*對話框


438*對話框

別這麼做

確認對話框，需要使用者明確確認他們的選擇在提交之前。舉例來說，使用者可以聽到許多的鈴聲，但只有點擊"OK"這個選

擇才會被提交。

在確認對話框終點取消、倒退、取消動作、放棄修改並關閉視窗。

點擊確認對話框的外部將不會有任何動作；使用者必須明確的確認或是取消以關閉確認對話框。

確認對話框


439*對話框


440*對話框

在使用者在確認對話框選擇OK之前，鈴聲的選則是不會被設置的。


441*對話框


442*對話框

確認對話框能夠使用其他佈局，舉例來說一個日期的選取器，但他們仍然集中在一個特定的值(選個日期，但不包含時間)。


443*對話框


444*對話框


445*對話框


446*對話框

確認對話框提供一個明確的確認按鈕及一個明確的取消按鈕。明確的取消按鈕會表明離開確認對話框將會放棄所有變更，舉

例來說，點擊取消或是按下倒退。

確認對話框應該避免彈出額外的簡易對話框或是選單。Material的額外圖層會增加應用程式Z軸深度，以及不必要的視覺複雜

化。

如果需要額外的簡易對話框或是選單來完成任務或是進度，考慮使用全屏對話框取代確認對話框。


447*對話框


448*對話框

好的做法

提供一個明確的確認按鈕及明確的取消按鈕。


449*對話框


450*對話框

別這麼做

一個單獨的對話框按鈕在系統倒退功能造成模糊不清：這是倒退取消還是確認功能？

只有行動版:因為行動裝置的限制，對話框的顯示還有許多其他形式(平板、桌機等)，可能有更適合的方式來取代全屏對話

框。

全屏對話框可以用來將複雜操作的任務群組化，這需要一個明確的指示，像是存擋或是創建、在變更前的提交或是放棄，舉

例來說，創建立日期的輸入。

全屏對話框能夠將複雜的編排最小化顯示，以material方式層疊(對話框上的對話框)，他增加了應用程式的Z軸深度。它們能

夠獨立每個單獨的任務並彈出簡易的選單，或者是複雜操作的一部分。

當內容或是進度符合以下任何的條件，考慮使用全屏對話框。

對話框的內容包含元件，像是選取器(日曆)或是表單需要IME輸入。

當變更不會被即時儲存。

當應用程式沒有草稿的功能時。

當操作排程需要被依序改變提交時。

在這範例中，全屏的對話框提供一個簡易的對話框用來選取日期。全屏對話框沒有修改以及選擇，而是當被點擊時儲存。點

擊"X"金會取消所有變更，並且離開全屏對話框。

全屏對話框


451*對話框


452*對話框

全屏對話框


453*對話框


454*對話框

從全屏對話框打開日曆選取器

全屏對話框中，確認及取消動作在畫面的頂部。

確認動作是在螢幕的右上角，並使用正確的描述用語，像是"存檔"、"送出"、"增加"、"分享"、"更新"、"建立"(原文:“save”,“send”,“add”,“share”,“update”,or“create”)。

別使用模糊的詞像是"完成"、"好"、"關閉"(原文:“done”or“ok”or“close”)來表示確認動作。這些都與"X"的語意太相近了，且

結果沒什麼不同。

在對話框中所有強制性的條件被滿足之前，確認功能是無效的。

放棄動作的功能，一個"X"在屏幕的左上方，關閉全屏對話框以及放棄所有更動。倒退按鈕相等於放棄的動作。

如果使用者有做任何的更動，他們會提示放棄更動的動作。

如果沒有任何更動，點擊"X"或是倒退會立即關閉對話框，也不會有放棄確認的需求。


455*對話框


456*對話框

別這麼做

別用模糊的用詞像是關閉在確認動作上。

"X"不同於向上的箭頭，它是使用在畫面狀態不斷的被儲存，或者是應用程式有儲存草稿或有自動儲存的功能。舉例來說，向

上箭頭用在被應用在設定上，因為所有的改變都會立即的被提交。在這些情況下，倒退按鈕的導航及行為將會配合向上箭頭

的功能，且沒有明確的確認或是取消的行為。


457*對話框


458*對話框

向上的箭頭在這例子中說明，任何的改變將會被立即儲存。


459*對話框


460*對話框

點擊"X"在這設定的範例將會取消所有改變，只有在點擊"儲存"時才會被存檔。

對話框包含了一個標題、內文、及互動元件。

這個標題簡單描述了需要選則的類型。標題應該總是顯示在整體之中，並應該在需要時使用。標題可以用來描述在正做出的

決定。舉例來說：標題可以用來說明目前在對話框中的進度，這進度可能是在設置中的將受到的決定。

對話框的內容相當的廣泛，但一般來說內文或UI控制元素是集中在一個特定的任務或是進度，如確認項目的缺失或是選擇一

個設置。

當需要時，動作被執行核定、駁回特定選擇、或是由對話框內容呈現進度。

為了確保對殘疾人們的可用性，請確保你的按鈕有36dp的最低高度，但可觸摸的的目標有48的最低高度

所有對話框的操作文字預設顏色是應用程式的主題強調色。總是確保操作文字顏色有足夠的對比度，且滿足親和性的規範。

改變預設文字色彩當需要足夠的的對比。

規範

親和性的注意事項


461*對話框

對話框呈現一個集中和受到限制的一套動作，通常來說包含核定及取消。

核定的動作放置在右方，並且繼續流程。核定動作也可能是具破壞性的，像是刪除或是移除。

取消動作放置在核定動作的左方，並且返回使用原本的畫面或是到特定的流程中。

取消及核定動作文字可以是"Cancel/OK"或者是更具體的主動詞或片語，能夠表示決定的結果。

不好的做法

取消動作總是放置在核定動作的左方

按鈕寬度及內距指南


462*對話框


463*對話框

在使用並排按鈕時，建議每個按鈕的文字不要超過按鈕的最大寬度，如常用的確認/取消按鈕。

用下面公式來計算對話框的按鈕最大寬度。

對話框按鈕的最大寬度=(Dialogwidth-16dp-16dp-8dp)/2

舉例來說

寬度280dp對話框的按鈕最大寬度=(280dp-16dp-16dp-8dp)/2=120dp

並排按鈕


464*對話框

當文字標籤超過了最大寬度，使用堆疊式按鈕容納本文。核定的按鈕會堆疊在取消的上方。

翻譯：WeijuTu

堆疊式全寬按鈕


465*對話框


分隔器以及分隔內容使用了強烈的視覺和空間上的區以及頁面佈局中不同的內容。在這個例子將說明分隔器是一個輕量型的

規則足以不分散使用者的內容。

如果列表沒有固定的元素。例如頭像或者是圖示，單獨的間距是不夠分隔區塊。在這種情況下，全滿的分隔器能夠幫助建立

韻律以及個別分隔區塊。

分隔器

使用

無鏈接項目


466分隔器

由於網格本身會造成視覺上的區隔，網格列表是不需要為副標題的內容分開。在這種情況下，空格及副標題就需要稍微分開

一點。

基於圖示的內容


467分隔器

全滿的分隔線是在分隔章節或不同類型的列表以及頁面佈局。

分隔線的類型

全滿分隔線


468分隔器


469分隔器

當在鏈接元素請使用插入分隔線，就像是圖示或標題上的主要線路。

插入分隔線


470分隔器


471分隔器

當副標題使用了一個分隔線，分隔線放在副標題的上方以強調副標題與內容之間的關係。

副標題及分隔線


472分隔器


473分隔器

翻譯：WeijuTu


474分隔器


網格列表是基本視覺列表的其中一種，是用於表現不一樣的視覺呈現和排版。

內容

使用

內容

行為

關鍵對齊線

網格列表是最適合用於介紹同性質的檔案、典型的圖片，這樣的編排方式，有效提昇使用者在視覺上的閱讀和區分資料間的

不同之處。

網格列表是一種棋盤狀的連續元素，每一個部分是由資料框(cells)內包含資料塊(tiles)

資料框(Cells)垂直和水平排列在往格內。

資料塊(Tiles)儲存內容，可在內部再劃分單個或多個資料框(Cells)。

網格

使用


475網格

如果在資料塊內的文字，需要跟主要內容做特別的區分，應該考慮使用不同的容器結構去包裝它，像是列表(Lists)或區塊

(Cards)，那樣可以優化你的文字視覺，並在閱讀上更好理解。

列表(Lists):讓閱讀上更好理解，特別在比較一組包含多種型態資料時。

區塊(Cards):當內容與格式不一致的時候使用，舉個例子，圖片的標題長度、多樣化的資料集合，例如：可能也是圖片、影

片、書籍的混在一起的內容。

內容

資料塊(tiles)內的內容


476網格

資料塊內容由主要內容和次要內容構成。主要內容是主要的區分元素，通常是圖片。次要內容可以是一段文字或是功能。

在主要內容避免缺少圖案的情況下，應該要有一個基本的預設圖案。

在主要或次要內容裡的功能執行時，放大、刪除或著是選擇，通常是不會有子選單在網格列表中出現(在動作執行時)。

動作執行後，可以開啟一個顯示區塊，例如懸浮的區塊或滑入區塊來做視覺上的呈現。

主要動作:

針對整個資料塊區域，而且不經由圖標(icon)或文字來觸發這個動作。

在特定網格區域內，針對相同的資料塊元素執行。例如，在網格內的所有資料塊的主要動作，皆是觀看內容圖片的相關

資料塊內的功能


477網格

訊息。

輔助操作或內容:

代表在資料格內的圖標和文字。

在特定網格區域內，針對相同的資料塊元素執行。

在網格內所有的資料格下，但在定位上沒有一樣(在邊角或邊線內)，例如：所有的標題對齊格線的左下角

行為

滾動


478網格

網格通常只做垂直滾動

水平滾動不是很好的一個方式，因為這種方式並不符合一般人的閱讀方式，很容易影響使用者體驗。

將超過滾動方向的溢出內容截掉。

截斷這是將溢出內容截斷的方式

未截斷

資料塊滑動是不被允許的。整塊幅浮起來之後移動不是一個好的做法。

手勢移動

資料塊的篩選和排序


479網格

內容在網格裡可以用程式的方式去依照資料、檔案大小、字母順序或其他參數進行篩選或分類。

第一項從左上角開始，排列方式為由左至右，由上到下。

調整大小可為每列創造更多的空間，但資料塊沒有辦法填滿可用的左右空白。

網格列表在橫向的狀態下，並不會轉變成列表。網格列表和列表不同的資料型態各是不同的結構:圖像的優先權會大於文字。

高:48dp

文字內距:16dp

文字大小(預設):16sp

輔助操作是對齊右邊的表尾

高:68dp

文字內距:16dp

字體大小(每行預設):16sp/12spor14sp/14sp

尺寸和大小調整

關鍵對齊線

網格列表表頭/表尾

單列表頭/表尾

雙列表頭/表尾


480網格


481網格

網格內距:4dp

資料格在網格表內可跨越多欄。

仔細考慮輔助文字是不是要在網格列表中出現，因為它會佔去非常多的空間，讓圖片得空間變小，單張圖片所呈現出來的視

覺效果較為空曠舒適，比較不會有壓迫感。

只有圖片的網格列表


482網格

元素

單行的網格列表


483網格

高:48dp

文字內距:16dp


網格內距:4dp

元素

只有文字


484網格

內容

高:48dp

文字內距:16dp


網格內距:4dp

輔助操作可以對齊右邊或左邊的表頭或表尾

文字和圖標


485網格


486網格

元素

兩行的網格列表


487網格

高:68dp

文字內距:16dp


網格內距:4dp

元素

只有文字


488網格

內容

高:68dp

文字內距:16dp


這輔助操作可以對齊右邊或左邊的表頭或表尾

網格內距是4dp

文字和圖標


489網格


490網格

元素

內容

翻譯：Xuan


491網格

https://www.facebook.com/profile.php?id=100000106076100


492網格

清單是用來將多個項目，以垂直排列的方式，顯示成一個單一且連續的元素。

一個「清單」是由一欄連續格狀化的子區塊--「列」所構成，而「列」的功能是當作「磁磚」的容器。

「磁磚」用來放置內容，且在一個清單中，每個「磁磚」的高度屬性可以不等。

清單最適合用來呈現為了閱讀理解而進行最佳化的「同性質資料或集合型資料」--例如：多個圖片或文字，其目的是為了區

分不同的資料類型或區分單一類型資料中不同的性質。

如果清單的磁磚裡的文字超過三行，則應使用「卡片」。

如果做為主要的識別內容是圖片，則應使用「網格清單」。

清單

用法


493清單

一個清單中的每個磁磚，可將具有關聯性的內容群組，以統一的格式呈現，並且透過提高同類型內容或者同群組內容的重要

性，利用階層，加強內容可讀性。例如：將大頭照和文字描述的重要性，設定的比時間戳記高。這麼做可以幫助使用者更容

易找到一個內容群組中的顯著資訊。

清單中的每個磁磚最多可放三行文字，同一個清單中，各個磁磚的字數可以不等。若要顯示三行文字以上，應使用「卡

片」。

最具識別性的內容方向性，是向著磁磚的左側，且向著多行內容的第一行。

一個清單的磁磚表面上的大部分面積，應該被用來執行主要動作。

內容

磁磚的內容

磁磚的動作


494清單

因為動作並非清單磁磚中的可識別元素，所以輔助動作應該放置於磁磚的右側。

主要動作與輔助動作，例如：播放、放大、刪除和選擇，因為會被立即執行，所以一般並不會再顯示一個包含數個選項的子

選單(溢出清單的動作)。

動作可以打開一個後續的「檢視」，例如：「卡片」或者「滑入滑出卡片」。

會佔滿整個磁磚，且不透過圖示或文字...等(元素)呈現。

在一個特定的清單中所有磁磚的動作是一樣的。例如，在一個音樂清單中，所有的磁磚的主要動作是播放歌曲；在郵件

清單中，則是開啟並閱讀郵件。

會透過磁磚中的圖示或次要文字...等(元素)呈現。

在一個特定清單的所有磁磚中，輔助動作的運作方式是一樣的。例如，可以從一個圖示看出某人是否處於上線狀態。

在一個特定清單的所有磁磚中，輔助動作的放置處也是一致的。

應避免在磁磚中利用輔助動作的重複性製造出「視覺噪音」(譯註：煩人的)。例如在每個磁磚中都顯示「分享」動作。但是

「切換開關」動作，例如星星圖示或大頭釘圖示可以被視為例外。因為他們顯示的狀態，可以提供有意義的資訊。

清單只能垂直捲動。

清單中的各個磁磚，其「滑推」動作應該是一致的。

當操作適當時，磁磚可以在清單和拖放目標之間移動（例如，將一個檔案移動到一個資料夾中）。

當操作適當時，磁磚可以被抓起，並且在一個清單中手動重新排列順序。

清單中的磁磚可以透過程式，以日期、檔案大小、字母順序或其他參數進行過濾和排序。

主要動作

輔助動作

行為

捲動

手勢

磁磚的過濾與排序


495清單

可以這樣做。(譯註：依照人名第一個字母排序。)

不要這樣做。(譯註：介面上看不出來排序的條件依據。)

在一個「單行文字」清單中，每個磁磚都包含單行文字。在同一個清單中，各個磁磚內的字數是可以不等的。

排版線


496清單

元素


497清單

使用情境

在一個「雙行文字」清單中，每個磁磚最多可包含兩行文字。在同一個清單中，各個磁磚內的字數是可以不等的。

元素


498清單

使用情境

在一個三行文字清單中，每個磁磚最多可包含三行文字。

在同一個清單中，各個磁磚內的字數是可以不等的。


499清單

元素

使用情境


500清單

字體:RobotoRegular16sp

磁磚高度:48dp

文字內間距:16dp

在清單的頂部和底部會(自動)增加8dp的內距。唯一的例外是在清單頂部使用子標題，因為子標題已經有他們自己的內距

了。

元素

元素

單行文字清單

僅有文字


501清單

使用情境


磁磚高度:48dp

(畫面)左邊界到圖示的距離:16dp

(畫面)左邊界到文字的距離:72dp

文字上方與下方的內距:16dp


了。

帶有文字的圖示


502清單

元素

元素


503清單

使用情境


磁磚高度:56dp

(畫面)左邊界到大頭照的距離:16dp




了。

帶有文字的大頭照


504清單

元素

元素


505清單

使用情境

主要文字字體:RobotoRegular16sp

次要文字字體:RobotoRegular14sp

磁磚高度:72dp

文字內距:16dp


了。

雙行文字清單

僅有文字


506清單

元素

元素


507清單

使用情境



磁磚高度:72dp




圖示對準文字區域垂直置中。


了。



508清單

元素

元素


509清單

使用情境



磁磚高度:72dp




(畫面)右邊界到圖示的距離:16dp


了。

帶有文字和圖示的大頭照


510清單

元素

元素


511清單

使用情境



磁磚高度:88dp

文字內距:16dp


了。

三行文字清單

僅有文字


512清單

元素

元素


513清單

使用情境



磁磚高度:88dp



大頭照對齊主要文字上方。


了。



514清單

元素

元素


515清單

使用情境



磁磚高度:88dp





大頭照和圖示對齊主要文字上方。

帶有文字和圖示的大頭照


516清單


了。

元素

元素


517清單

使用情境

翻譯：陳聖博


518清單


清單控制器可分為四大類：

狀態

主要指令(包含字串)次要指令

次要訊息

清單的辨識元素

辨識元素的清單標題應該要率先被閱讀，因此，「狀態」與「主要指令」應該被置放於清單標題的左側。而清單內含的文字

也應該被視為指令的一部份。

不要把兩個圖示或指令放在一起，像是把選擇框跟使用者的縮圖並排。

如果清單的目的是導覽用的，請勿使用圖示，清單本身的文字與內容就足以讓使用者了解目標。

次級指令與資訊必須放置在標題的右側，次級指令與主要指令必須分開，因為使用者傾向預期一個圖示會出發一個指令。

選擇框可以是主要指另，也可以是次要指令。

類型：主要指令/狀態

清單控制器

使用方式

清單控制器的類型

選擇框

分離標的


519清單控制器

滑鼠滑過的動作僅使用於桌上型電腦。

選擇框能作為主要指令，也能顯示清單的狀態。

類型：次要指令

分離標的

如果你要控制一系列的變因，而不是單一的變因時，考慮以開關的方式代替。

選擇框能最為清單項目的次要指令。


分離標的

開關


520清單控制器


隨著清單的模式而不同，通常是分離的標的。

通常用在清單的編輯模式，透過拖拉改變清單項目的順序。


分離標的

透過垂直的分散與合併，顯示或隱藏清單中的項目。

重新排列

延展與合併


521清單控制器


522清單控制器


523清單控制器

類型：其他

當我們試著用滑動手勢去除清單項目時，可以利用遺留式資訊，以動畫的方式進入畫面，提供此手勢對於該項目所下指令的

資訊。

沿著特定方向對清單項目滑動時，可叫出象徵指令的圖示。當滑動之後，指令會以文字按鈕的方式出現，並排列於清單空間

的中央。

遺留式


524清單控制器


525清單控制器


526清單控制器

一般來說，導覽只需透過文字清單，額外的圖像化是不必要的。

類型：主要功能（排列於欄位剩下的空間）

非分離性的標的

可導至該清單更多相關的資訊，通常會另開視窗或分頁呈現資訊。

不建議這麼做：導覽性的清單控制器。

更多資訊


527清單控制器

類型：狀態

非分離性的標的

僅使用於選單。被選擇的項目要以不同的記號標記出來。

類型：次級資訊

非分離的標的

只用在選單中。行內資訊是一段小文字，它提供提示或相關訊息，像是鍵盤熱鍵。行內資訊不可被截掉。

清單控制器的類型

選擇框

行內資訊


528清單控制器

翻譯：Peter


529清單控制器


內容

用法

菜單項目

行為

簡單菜單

規格

菜單是一種從一個按鈕，一個動作，或者包含至少兩個菜單控制項，所觸發時出現暫時性的一張紙。

每個菜單項目是一個零散的選項或者動作，而這可能會影響到應用程式，檢視或者被選擇的元素中的呈現。

菜單不應該在應用程式上被用作一個頁面導航上的主要功能。

菜單

菜單讓用⼾可以從一個暫時開啟，新的material表單的列表中以選擇的方式執行一個動作。

使用


530菜單


531菜單

觸發按鈕的文字或者控制項的標籤，準確的反映出包含菜單裡的菜單項目。菜單列通常使用單字作為標籤，例如“文件”，“格式”，“編輯”，“檢視”，而其它情況下可能會有更詳細的標籤文字。

菜單是顯示一組相近菜單項目，其中每一個可以被啟用或者應用程式上當前狀態應該被禁止。


532菜單

好的做法

不好的做法

根據應用程式的當前狀態上下文菜單動態改變其現有的和已啟用菜單項。

一般情況下，不放一些與當前上下文無關的內容的菜單項目，以及雖然是相關但是需要滿足某些特定條件的菜單項目。（例

如：複製功能是當文字被選擇時會被啟用的）


533菜單

某些應用程式的狀態下可能會導致內文菜單只包含單一菜單項目。例如：在網頁上凸顯文字，Android只顯示複製文字，因

為使用者不能剪下或貼上文字。

依據菜單靠近螢幕邊緣的程度將將菜單垂直地與水平地重新定位。


534菜單

如果菜單的高度阻擋了所有菜單項目的顯示。那麼菜單可以使用內部的滾動方式。舉一個例子是，在橫向的手機顯示上檢視

菜單時。


535菜單

菜單也可以是層疊的。


536菜單

這些動作會顯示滾動以及層疊菜單。

下拉式

文字下拉式

應用程式下拉式

層疊下拉式

每個菜單項目都限制在一個本文內，說明這個動作將在被選擇時會被執行。

菜單項目


537菜單

本文通常是一個單字或者很短的語句，不過它可以包含圖示以及幫助本文。例如鍵盤的快捷鍵，和控制項。就像是複選方塊

來表示多個項目或狀態。請詳見控制項列表.

靜態內容的菜單應該放在菜單上方作為最常用的項目。

動態內容的菜單包含可能有其他行為，例如：以前在菜單上選擇字體時，會根據使用者動作而改變。

菜單項目可以顯示巢狀式的子菜單。試著限制使用一層的巢狀式的方式，因為它會讓多重嵌入的巢狀式子菜單變得更難以控

制。

當顯示動作為禁止時，而不是要將它們移除，需要讓使用者知道必須在適當的情況下，這些被禁止的動作才能啟用。

例如：重做的功能是當這個動作不需要再重做時，此時這個按鈕是被禁止的。剪下以及複製是在內容被選擇的時候才會出現

的功能。


538菜單

菜單顯示上述所有其他在應用程式的UI元素。

菜單的消失，可以透過點選菜單以外的區域，或者在觸發按鈕上點選。

一般的情況下，選擇一個菜單項目也會將菜單消失。當菜單允許多個項目選擇的時候，這時將是屬於例外情形。例如：使用

複選方塊控制項。

菜單被定位在觸發菜單的元素上面，使得當前選擇菜單顯示在觸發元素的上方。

行為


539菜單

好的做法

不要顯示一個重複的菜單項目

不好的做法菜單被定位在觸發菜單的元素下面使得菜單和內文分離。


540菜單

簡單菜單是用在平板電腦上顯示列表以及在行動裝置上顯示一個特別列表物件的選項。

去除不明確性：與簡單菜當相反，簡單對話框可以顯示更多和一個列表項目可選擇選項的相關細節或者提供導航或與主要工

作相關的動作。雖然它們可以顯示同樣的內容，因為簡單菜單對於用⼾當下所在的內文造成較小的干擾，所以在簡單對話框

上偏向使用簡單菜單。

使用簡單菜單在列表上來顯示特定列表項目的各種選項。

選擇一個選項立即送出選擇並且關閉菜單。

點擊在菜單之外或點擊上一頁會取消動作和關閉菜單。

簡單菜單


541菜單

當開啟時，簡單菜單嘗試將列表項目垂直對齊於選取的菜單項目。


542菜單


543菜單

當靠近畫面邊緣時，簡單菜單改變它們的垂直位置以便讓所有菜單項目都可被見到。


544菜單

好的做法

不要任意地將第一個菜單項目置於列表項目上。


545菜單

不好的做法

簡單菜單顯示在投射菜單的元素的上方，而不是下面。

好的做法


546菜單

不好的做法

菜單寬度依據字串長度不同而變化。

簡單菜單在畫面左邊以及右邊永遠保持一個16dp的邊緣（手機上）或者24dp的邊緣（平板電腦上）。


547菜單


548菜單

當內容是可捲動時，菜單顯示一個一致的捲軸。


549菜單

好的做法有可捲動的內容時預設顯示捲軸。


550菜單

不好的做法沒有捲軸的話就無法清楚表達還有其他菜單項目可選擇。

不要複製以選取的菜單項目。


551菜單

好的做法


552菜單

不好的做法不要重複顯示已選取的元素。

簡單菜單永遠和列表項目文字對齊，而且不會依據點擊地點而水平地改變位置。

好的做法簡單菜單不論點擊地點在何處都置左。


553菜單

不好的做法簡單菜單不依據點擊地點來改變位置。

規格是提供給不同尺寸與類型的菜單以及給不同平台的。

規格

行動

各種寬度


554菜單

層疊菜單


555菜單

層疊紅線


556菜單

翻譯：Weiju修訂：SeanChen


557菜單



選擇器提供淺易的方式在一組中去選擇單一值。現成的日期以及時間選擇器都包含在內。

選擇器是含有一組可以輸入日期（日、月、年）或時間（時、分，早／晚）控制項目部分的對話框。在你的應用程式上使用

這些，將有助於確保使用者的日期、時間是有效的輸入且格式正確。時間和日期選擇器的格式會自動依據地區做調整，例

如：在美國使用「月-日-年」，而其他地區則使用「日-月-年」。

選擇器可以在表單上作行內使用，但用在手機上，相對來說較大的底部位置（footprint？）則適合用在顯示對話框上。於行

內顯示，需考量使用更簡潔的控制項，例如文字欄位或下拉選單。

在直式、橫式中的亮色、暗色主題

選擇器(Pickers)

日期選擇器


558*選擇器


559*選擇器

日期選擇器：亮色，直式


560*選擇器


561*選擇器

日期選擇器：亮色，橫式

日期選擇器：暗色，橫式

在直式、橫式中的亮色、暗色主題

時間


562*選擇器


563*選擇器

時間選擇器：亮色，直式


564*選擇器


565*選擇器

時間選擇器：暗色，直式

時間選擇器：亮色，橫式

時間選擇器：暗色，橫式

翻譯：Yi-Bei


566*選擇器

當您使用應用程式載入內容時，是令人感到愉快並且無痛地透過減少視覺變化，在使用者看到之前及內容進行交互動作。每

一次的操作只能由一個活動指標，例如：重新整理的操作不能顯示重新整理條及環狀型的旋轉

對於操作，其中可以確定完成操作的百分比。使用一個較為確定的指標，讓使用者知道操作會需要花多長的時間。

對於操作，用⼾被要求等待一段時間完成動作，它並不需要暴露背後端發生了什麼事情，多久會完成，可使用一個不定性的

指標呈現。

有兩種指標類型：線性及環形。你可以使用一種確定或不確定的操作項目。

線性進度指示應該總是0%至100%的進度百分比，並不會向後移動道更低的數值。如果有多個操作在序列中，使用進度指

示器來顯示整體的延遲動作，這樣，當進度到達100%時，並不會退回到0%進度而再次讀取。

線性條應該在頁面上的標頭或片材上的邊緣顯示及消失。

環形旋轉的載入器可以整合在圖示或是一個重新整理的圖式

一階段載入

在現有上載入油墨（複製及圖片），不改變容器

兩階段載入

紙的容器裡產生，接著油墨也載入（複製及圖片）

初次載入內容

在所有內容一次性載入及顯示

在兩個階段載入及顯示

範例1:卡片的擴展

建議用在卡片的擴展上比較大的表面時，使用一個不定的線性指標呈現。

進度與活動

指標類型

線性

環形

整合環形

行為

階段式載入

載入額外的內容


567進度與活動

範例2:向上滾動刷新

建議在從下方刷新一個列表時，可以使用一個不定的圓形旋轉指示燈與油墨散開的觸發

範例3:向下滑動刷新

建議在從上方刷新一個列表時，可以使用一個不定的環形旋轉指示燈與油墨散開的觸發

翻譯：Weiju


568進度與活動


讓使用者透過移動滑軌的方式，從連續或不連續的一段範圍值中選取當中的一個值。最小值在左邊，最大值在右邊。滑軌的

左右邊可以用圖示來表示值的大小。移動滑軌這種自然的互動方式來調整音量，亮度，顏色飽和度等等的設定值是一種很不

錯的選擇。

用來作為主題設定，使用者不需要一個有著明確意義的數值。

LightTheme

Darktheme

滑軌上的左邊或/和右邊圖示和滑軌間的空格

滑軌

連續性滑軌


569滑軌


570滑軌


571滑軌


572滑軌

用來給使用者設定精確的數值，在數字上點一下，就會變成可編輯。

可編輯的數字


573滑軌


574滑軌


575滑軌


576滑軌

在滑軌上有著平均間隔的數字標示，可以讓使用者選擇代表明確意義的數字。每個標示，會隨著滑動到不同位置，讓使用者

可以清楚分辨目前所調整的等級。這些數值都是事先所定義好，使用者是無法編輯的。

用來讓使用者可以明確知道目前所設定的數字是多少

Lighttheme

Darktheme

不連續滑軌

有數字的標籤


577滑軌

翻譯：Mkdodos


578滑軌


Snackcbars是使用者在進行一項操作後，螢幕提供的簡短回饋，出現在行動裝置螢幕底部，或桌上型電腦螢幕左下方的小型

彈出式視窗中。他們位在所有螢幕元素-包括浮動式動作按鈕-之上。

Snackcbars在出現一段時間後，或是使用者於螢幕其他位置進行操作時會自動消失，亦可以滑動螢幕來進行刪除。他們不會

阻擋所在螢幕的資訊輸入，且無法接收焦點輸入(inputfocus)。建議一次在螢幕上只顯示一個Snackbar。

Android系統也提供了膠囊形狀的toast，主要用來呈現系統訊息。Toasts和snackbars相似，但前者不包含動態功能，亦無法

透過滑動從螢幕上去除。

Snackbars通常應該維持在足以容納一行字串的高度即可，且字串內容應與使用者進行的操作直接相關。它們不應該包含一

般或動態的icons。動作以文字的方式呈現。

請這麼做

別這麼做

為了達到可用性，snackbars不應包含進入主要使用步驟(usecase)的唯一路徑。因為snackbars位於螢幕所有元素之上，因

此他們不應該持續出現於螢幕或產生堆疊的情形。

SnackbarsandToasts

用法

非常簡短的文字字串

暫時性


579SnackbarsandToasts

請這麼做

別這麼做

如果在螢幕上呈現一個動作訊息，遵循對話方塊的空間配置及支援規則。當有兩個或更多動作時，即便其中有解除的動作

(dismissaction)，應使用對話方塊而非snackbar。如果snackbars中描述的動作訊息，其重要性需要阻擋到螢幕的使用，它應

該以對話方塊呈現。

請這麼做

別這麼做

無或有的動作訊息(0-1actions)，不出現解除或取消

不要阻擋到浮動式的動作按鈕



垂直移動浮動式的動作按鈕，提供足以容納snackbar高度的空間。

請這麼做

別這麼做

單行snackbar高度：48dp多行snackbar高度：80dp文字內容：Roboto字體Regular14sp動作按鈕：Roboto字體Medium14sp,文字以全大寫呈現

預設背景填色：#323232100%

設計說明

行動裝置的snackbar



平板/桌上型電腦的snackbar



單行snackbar高度：48dp最小寬度：288dp最大寬度：568dp2dp的圓角

文字內容：Roboto字體Regular14sp動作按鈕：Roboto字體Medium14sp,文字以全大寫呈現

預設背景填色：#323232100%

開發者可以製作自訂的toasts，及(或)自訂的螢幕配置方式。如果要製作自訂的toast，強烈鼓勵您依照上述提供的snackbar樣式進行製作。

Androidtoast



翻譯：Xunyi



副標題是列表區塊用，它用來區分一般列表或網格列表的區域，傳統上是用來過濾或是排列的指標。副標題可以顯示在區塊

內或者是其相關聯的內容，舉例來說：在它相鄰垂直欄旁。在滾動的時候，副標題固定在畫面的上方，直到內容離開的畫面

或是到達下一個副標題。強化視覺的群組，將系統化的色彩套用在你的副標題。

區塊的高度48dp

副標題字體:RobotoMedium14sp

副標題在清單中應該對齊圖示或頭像的左側，除非有一個重要的功能在這。

如果那一個功能對齊了頭像/圖示左側，那麼副標題則會對齊清單中的內文。

副標題

列表副標題


586副標題


587副標題

區塊的高度48dp

副標題字體:RobotoMedium14sp

副標題是被對齊距離左方16dp的邊緣。

網格副標題


588副標題

翻譯：Casper


589副標題


開關提供選項以便讓使用者進行選擇的動作。共有三種類型的開關：核取方塊、選項按鈕和切換開關。

注意：在接下來的例子中的(半透明的)圓形，是代表一個(操作)動畫，並非按鈕實際的外觀。

核取方塊可以讓使用者從一組選項中進行多選。

假如您必須在一個清單中顯示多個「開/關」選項，使用核取方塊是一個節省空間的好方法。

但是如果您只有一個「開/關」選項，請避免使用核取方塊，而應該使用切換開關就好。

透過將一個方框換成一個勾選記號，這種操作勾選的動作，令人感到更滿意、更直接。

核取方塊使用動畫來表示是否取得焦點以及被按下的狀態。

核取方塊的操作動畫

選項按鈕可以讓使用者從一組選項中進行單選。如果您認為使用者需要一口氣看到所有選項展開排列，請使用選項按鈕提供

開關

核取方塊

選項按鈕


590開關

單一選擇。

否則，請考慮使用一個下拉元件，其佔用的空間比把所有選項展開顯示來得少。

選項按鈕使用動畫來表示是否取得焦點以及被按下的狀態。

選項按鈕的操作動畫

切換開關可以反覆地切換單一選項的狀態。該開關控制的選項及它所切換的狀態，必須很明確地與行內標籤一致。此外，切

換開關也採用了與選項按鈕相同的外觀屬性。(譯註：都是圓形)

切換開關使用動畫來表示是否取得焦點以及被按下的狀態。

在切換開關滑軌旁顯示“on”和“off”字樣的做法已經被廢除，請以下圖所示的開關取代。

切換開關


591開關

為了幫助手指觸控，可以採圓形方式向外擴張，然而其互動性也可能會完全干擾到該元素(譯註：可能是擴張後感應區的重

疊而造成錯亂的互動行為之類的)。由於桌上型電腦是用滑鼠操作，您不需要前述這些額外的指示。


592開關

翻譯：陳聖博


593開關


頁籤利用切換的方式，讓app可以很方便的在不同內容或分類的資料集間瀏覽。

頁籤提供一個介面，用來顯示相關的群組內容，頁籤文字簡潔的標註了該頁籤和內容的關連性。

可延伸appbar+頁籤

嵌入搜尋框+appbar+頁籤

頁籤

用法

行動裝置的頁籤種類


594頁籤

預設appbar+頁籤

預設appbar+可滑動頁籤


595頁籤

文字顏色和選取指示線相同

滑動時鎖定頁籤

預設appbar+頁籤

更多項目的下拉選單

桌上型電腦的頁籤種類


596頁籤

分頁式頁籤

展開式選單


597頁籤

置中頁籤

使用頁籤，將大量相關資料或選項分割，成為較高易讀性。目標放在輔助內容導覽和內容組織，而不用從目前的內容中導向

別的地方。

雖然頁籤內容可能有導覽特性(例：地圖路徑選項改變地圖顯示畫面，搜尋結果導向其他站台)，但本身並不用在導覽上。

頁籤也不應用在滑動或分頁的內容(例：app中的滑動換頁)。

Do.

使用時機


598頁籤

Don't.

用一橫列來表示。

不可巢狀，頁籤中的內容不可由其他頁籤所構成。

一組頁籤至少有2個頁籤，最多不超過6個。

頁籤控制內容的顯示在一致性的位置。

目前顯示內容所對應的頁籤需要特別標示。

頁籤會被群組在一起，然後每一組頁籤依次和其內容做連結。

讓頁籤和其內容保持相連，可以維持二者關連性。當它們分的太開，二者的對應就會模糊不清。

Tabcharacteristics


599頁籤

Do.


600頁籤

Don't.


601頁籤

Do.


602頁籤

Don't.

不同頁籤之間和顯示在頁籤中的內容都可以包羅萬像。例，在一個頁籤中顯示不同年份的資料或不同的設定類型。

在一組頁籤中的內容應該建構在一個比較大的規則下（例，設定，方向），每個頁籤內容都是不同的。頁籤應該提供有意義

的標籤，用來有邏輯的明確區分相關內容。

標籤可以使用圖示或文字，且文字不能被縮減。

避免需要跨頁籤的內容比較，顯著的跨頁籤內容對照，可能會需要從不同的區塊中指示出內容。

內容

頁籤內容


603頁籤

不要縮減文字，如果使用固定式頁籤，文字太長，改用滑動式頁籤。

不要改變標籤大小，如果標籤太長，使用滑動式頁籤代替。

標籤不要使用二行文字，如果標籤太長，使用滑動式頁籤代替。

標籤不要混用文字和圖示，使用全部文字，或是全部圖示的標籤。

依據裝置和使用情境不同，可以使用固定式頁籤或是滑動式頁籤。

固定式頁籤顯示全部的頁籤，需要從不同頁籤間快速切換內容時，是種最佳使用方式，例如：在地圖導航中切換不同交通工

具。

頁籤的最大數量受限於可視寬度。每個頁籤有固定寬度，此寬度取決於標籤中的最大寬度。切換方式為觸碰該頁籤或是在內

容區向左或向右滑動。

頁籤類型

固定式頁籤


604頁籤

在每次會顯示所有頁籤的其中一部份，可以包含較長的標籤和較多頁籤，當使用者在瀏覽切換內容，不需直接對照標籤的時

候，是種最佳使用方式。

切換方式為觸碰該頁籤，向左或向右滑動頁籤，或是向左或向右滑動內容區。

頁籤寬度：⅓螢幕寬度

滑動式頁籤

規格標準

固定式和全螢幕寬度


605頁籤

頁籤指示：2dp高

文字:14spRobotoMedium

文字在頁籤格裹置中

目前所在頁籤文字顏色：#fff或次要顏色

不可點選的頁籤文字顏色：#fff60%

頁籤寬度：12dp＋文字長度＋12dp


文字:14spRobotoMedium

文字在頁籤格裹置中



可滑動式


606頁籤

頁籤寬度：24dp＋文字長度＋24dp


文字:14spTablet,13spDesktopRobotoMedium



翻譯：Mkdodos

桌上型電腦/平版電腦

頁籤觸控的動畫


607頁籤


輸入框允許使用者輸入文字。可以是單行，啟用有或沒有捲軸，或者是多行，並且也可以具有圖示的輸入框。接觸時輸入框

位置會放置游標，並且自動顯示鍵盤。除了打字之外，文字輸入框允許其他各種任務，例如文字選擇（剪下，複製，貼上）

以及資料透過自動完成功能查詢。詳見模式>文字選擇設計

文字輸入框可以有不同的類型。類型決定什麼樣的字符可以允許在領域裡，可能會提示虛擬鍵盤優化字符的佈局。常見類型

包含數字，文字，電子信箱，電話號碼，個人姓名，帳號，網址，街道位置，信用卡號碼，PIN以及查詢功能。

單行欄位在輸入時會自動從內文的左方直到游標至輸入框的右方邊緣

文字輸入框

單行文字框


608文字輸入框

提示及輸入字體：RobotoRegular16sp方塊高度：48dp文字的上下內距：16dp輸入框分隔器內距：8dp

亮色主題


609文字輸入框

暗色主題


610文字輸入框

提示及輸入字體：RobotoRegular16sp方塊高度：48dp文字的上下內距：16dp輸入框分隔器內距：8dp

紅線

包含圖示的亮色主題


611文字輸入框

當單列欄的輸入框是很長且跨越多行，則輸入框應該啟用滾動方式以能夠容納文字

在滾動文字輸入框時，有個圖形畫的指示器顯示在線的下方。觸碰時將會跳至字串的最前方。

包含圖示的暗色主題

紅線

包含滾動的單行文字框

搭配捲軸的單行輸入框

亮色主題

暗色主題


612文字輸入框

當使用者正在輸入框輸入字串時，標籤將會浮動地移至欄位的上方

浮動文字

浮動的文字


613文字輸入框

提示及輸入字體：RobotoRegular16sp標籤字體：RobotoRegular12sp區塊高度：72dp文字的上下內距：16dp輸入框分隔器內距：8dp

亮色主題

暗色主題

紅線


614文字輸入框

多行輸入框當超過字寬度時會自動換行至新的列，並且在游標到最下緣的時候會出現垂直捲軸

多行輸入框


615文字輸入框

提示及輸入字體：RobotoRegular16sp標籤字體：RobotoRegular12sp文字的上下內距：16dp輸入框分隔器內距：8dp

亮色主題


616文字輸入框

暗色主題

紅線


617文字輸入框

全寬輸入框適合用在較深入的工作項目

全寬輸入框


618文字輸入框

提示及輸入字體：RobotoRegular16sp文字的上下內距：:20dp

單行與多行輸入框


619文字輸入框

在欄位上使用字元數可作為字數的限制提醒

字元數是採用RobotoRegular12sp

紅線

字元數

包含字元數的單行輸入框


620文字輸入框


621文字輸入框

字元數的文字:RobotoRegular12sp

包含字元數的多行輸入框


622文字輸入框


623文字輸入框


624文字輸入框

包含字元數的全寬輸入框


625文字輸入框


626文字輸入框


627文字輸入框

使用自動完成輸入框的時候，將會彈出視窗在當前頁面即時提供建議或者完整文字，如此使用者可以更精確以及更高效率的

輸入訊息。

自動輸入文字輸入框


628文字輸入框


629文字輸入框

全寬自動輸入框


630文字輸入框

插入自動完成


631文字輸入框


632文字輸入框


633文字輸入框

全寬行內輸入框自動完成


634文字輸入框


635文字輸入框


636文字輸入框

功能列能夠作為輸入框的欄位。依照類型，其下方的內容進行篩選與排序。

行內輸入框自動完成

搜尋篩選器


637文字輸入框


638文字輸入框

功能列上全寬的輸入框


639文字輸入框


640文字輸入框

原件工具提示的使用方式有兩種：互動式與圖像優先式（非文字式）。

這麼做

工具提示

使用方式


641工具提示

別這麼做

工具提示與滑鼠移過出現的卡片不同，卡片提供的是豐富的資訊，包含圖片或固定格式的文字。

工具提示也不是ALT屬性，ALT屬性通常是標示靜態圖片用的。


642工具提示

這麼做


643工具提示

別這麼做

文字：RobotoMedium10sp

背景顏色充填：90%透明度

游標與鍵盤工具提示


644工具提示

文字：RobotoMedium14sp

背景顏色充填：90%透明度

工具提示的運動方式

觸控介面工具提示

觸控介面工具提示


645工具提示


646工具提示


647工具提示


648工具提示

翻譯：Peter


649工具提示


本章節將介紹如何保持一致性與友善性方式顯示日期與時間的資訊。

這些的指導方針將運用於：

目前日期與時間

日期與時間的設定，比如警告與提醒

當物件被建立、送出、編輯或以其他方式的行為

時間，使用大寫的上午或下午，用空格將時間隔開。

10:00AM

如果時間戳記表示目前日期，通常不需要顯示“今天”，也就是這天或日期。只顯示“時：分鐘AM/PM”格式。

11:51AM

如果這天是在現在日期年份裡面的過去或未來式，那麼就顯示縮寫日期。

Jul14

如果這天是在現在日期年份以外的過去或未來式，那麼就顯示縮寫日期與年。

Jul14,2012

如果日期是一個時間的範圍，那麼使用沒有間隔的方式使用破折號做區隔。

8:00AM–12:30PM

Jan6–Feb2

如果兩個日期範圍表示當前年度的開始時間與結束的時間時，就忽略年。否則，請顯示兩個年份的開始於結束時間。

資料格式

日期&時間

基本的顯示


650*資料格式

Dec6,2013–Jan2,2014

當時間是在共同範圍裏的上午或下午，那麼只需要在範圍的最後附加上午或下午。

8:00–10:30AM

當表示時間區域時，前方的時間需從0開始的個位數。

UTC+5:00

當空間允許，顯示目前日期/時間的內文，通常比較能讓人做彼此溝通。

假設日期是昨天或明天，那麼使用這個的方式。

Yesterday,Tomorrow

假設這一天是未來的一週以內，那麼顯示一週的縮寫

Tuesday

假設要用一個單字代替有助於理解與描述的時間，預設值將顯示

Storeopen9:00AM–Midnight

Reminderfortomorrowafternoon

假設絕對時間是沒有必要的特定狀況或比較，您可以選擇顯示近似的相對時間。

不適合結合單位（例如：一小時又三十二分鐘前），而（例如：一小時前）四捨五入到最近的最大單位

In5minutes

8hoursfromnow

3daysago

使用人類與相關語言以及概略時間


651*資料格式

相對語言中可能不並總是很適合。例如當前日期在一個時鐘app或者事件或警告的具體時間。在這些情況下，都是使用絕對

時間

Mon,Jan10

Today,10:00AM

根據文章，顯示日期或時間，或者顯示兩個日期及時間。

通常的情況下，未來的設定必須附加時間在一天或者日期。

Jan10,8:00AM

當過去時間是必須顯示的，例如觸發提醒事件，那麼就同時顯示日期與時間。

RemindedJan5,7:16AM

當星期是必須顯示的，例如日曆的邀請，顯示縮寫的那天以及採逗點分隔。

Mon,Jan10,8:00AM

當表示過去的事件，就需略時間。

Jan3

使用HH:MM:SS顯示持續性的紀錄，例如音樂或影片。如果小時或秒則不適用，就請忽略。

0:30

2:14

1:01:05

模組方式

簡易方式


652*資料格式

當只有單數或雙數的日期時，總是使用縮寫月份。

Jan6,Feb7,Mar8,Apr9,

May10,Jun11,Jul12,Aug13,

Sep14,Oct15,Nov16,Dec17

當有與時間合在一起時，將星期以縮寫呈現。

Mon,8:00AM

Tue,9:00AM

Wed,10:00AM

Thu,11:00AM

Fri,12:00PM

Sat,1:00PM

Sun,2:00PM

假設時間是有特定限制（例如時間戳記，圖形上的標籤、持續性的時間等等...）的縮寫單位，使用數字的版本以及/或移除

":00"

8AM

2hr32minago

3/12/12

假設“明天”或“昨天”重複發生，請勿使用縮寫。相反地，使用月份日期格式。

Jun6

翻譯：WeijuTu


653*資料格式


錯誤是當應用程式在完成預期結果時失敗的情況。錯誤發生於：

應用程式無法理解用⼾所輸入。

系統或應用程式失敗。

用⼾企圖同時運行不符合的操作。

試著透過好的設計避免錯誤。讓您的應用程式理解用⼾，而非讓用⼾必須了解應用程式。當錯誤發生時，清楚地與用⼾溝通

發生什麼事並且如何快速解決它。儲存並且盡可能地保存狀態，尤其當用⼾有輸入內容時。

如同所有的回饋，優先考慮最重要的訊息為何，透過內容狀態溝通以避免多餘的元素在畫面上，以及在畫面上的外觀形狀具

有一致性(andbeconsistentwithscreenplacementswithinandacrossformfactors.)。

提供用⼾錯誤輸入的語境（上下文）以幫助用⼾修正它們。盡可能快速地、客氣地讓用⼾知道他們有錯誤需要修正。別讓他

們提交一份冗長的表單時，才跟他們說他們犯了錯。當偵測到錯誤，便停用提交按鈕。當錯誤僅能在用⼾提交表單後才被發

現，要清楚什麼地方出錯，以及用⼾該如何具體地修正它。

輔助信息將顯示在任何用⼾與之互動的時間前、之中、後。錯誤信息不得出現在用⼾尚未與該欄位互動前。輔助信息將轉換

成錯誤信息當用⼾輸入錯誤文字。

避免畫面上過多的信息，降低用⼾（填表的）速度。並非每個文字欄位都需要輔助和（或）錯誤信息。

當文字欄位之下可放錯誤信息，文字欄位下方需有額外的內間距16dps作為錯誤信息的用途。

錯誤

用⼾輸入錯誤

文字欄位輸入


654*錯誤


655*錯誤


656*錯誤


657*錯誤

錯誤信息的字型是RobotoRegular12sp提示以及輔助信息是#000000和38%alpha

錯誤信息的字型是RobotoRegular12sp提示以及輔助信息是#FFFFFFwith30%alpha

亮版

暗版

輔助及錯誤信息


658*錯誤


659*錯誤


660*錯誤


661*錯誤


662*錯誤


663*錯誤


664*錯誤


665*錯誤

錯誤與浮動文字標籤


666*錯誤


667*錯誤


668*錯誤


669*錯誤

計字器可以在用⼾與欄位互動之前、之中和之後顯示。考慮不顯示計字器直到用⼾接近字數限制。計字欄位需額外的內間距

16dps在它下方。

計字器字型是RobotoRegular12sp

文字欄位輸入-字數以上／以下或字元計算

計字器於單行


670*錯誤


671*錯誤


672*錯誤


673*錯誤

計字器於多行


674*錯誤


675*錯誤


676*錯誤


677*錯誤

不符合值的錯誤信息，將在用⼾與欄位互動時或後被觸發。

當有兩個以上不符合值的輸入，在每個須修正的欄位應顯示文字欄位以及錯誤訊息。額外的訊息將加在表單或畫面上方，總

括所需做的修正以及其他額外的說明。

表單重載需滾到表單上方，統一錯誤信息的位置。單一欄位的錯誤信息將因用⼾作用後解決。

不符合值

試圖提交表單後錯誤偵測


678*錯誤


679*錯誤


680*錯誤


681*錯誤

表單填寫不完整的錯誤需在用⼾已經充分填寫過表單後，顯示被他們跳過的欄位。如果無法在用⼾填寫表單時偵測，將於用

⼾試圖提交表單後顯示此錯誤。

當表單內的欄位被留白，則每一個文字欄位以及欄位下方的錯誤訊息需顯示錯誤。

當用⼾填寫完表單，它足以單獨地標記錯誤訊息。

表單不完整

提交前表單內含有多個錯誤


682*錯誤


683*錯誤


684*錯誤


685*錯誤

單行列錯誤


686*錯誤


687*錯誤

應用程式錯誤發生於無關用⼾輸入。

當錯誤還在過程中，應用程式仍要顯示其作用／載入指示器，直到達到失敗狀態並顯示該應用程式錯誤。

如果功能不可用，可以在UI中表示。並非每個錯誤都需要彈出一個新組件。

盡可能給予您的用⼾一個動作以幫助他們解決錯誤。別讓他們被錯誤困住。

應用程式錯誤

一般應用程式錯誤


688*錯誤


689*錯誤

警告對話框：應用程式回饋關於阻止正常運作的錯誤。


690*錯誤


691*錯誤

Snackbar：應用程式回饋關於外部的錯誤。Snackbars是短暫的，避免用它們來顯示嚴重的、持續性地、大量的錯

誤。

設計一個應用程式的關鍵部分在於確定內容如何於畫面呈現。這邊的集合是每個畫面在它正常內容無法顯示時該如何做。範例包含：

畫面通常呈現一份項目清單，但尚無項目存在。

畫面通常顯示搜尋結果，但目前的搜尋不到任何結果。

畫面通常顯示雲端內容，但目前因未知錯誤而無法顯示。

這類型的狀況稱為空狀態。雖然他們並非常態，但將之設計好很重要。因為用⼾可能對遇到非期望的事而感到失望。

當同步已經關閉或內容載入失敗，用⼾應能與應用程式中尚能使用的最大部分做互動。

同步加載錯誤／失敗


692*錯誤


693*錯誤

正在加載空狀態畫面／內容。


694*錯誤


695*錯誤

內容／組件操作的具體錯誤。

當斷線時，用⼾應能與應用程式中尚能作用的最大部分做互動。

如果合適的話，顯示一個連結幫助用⼾完成他們的任務。僅只提供確實可以支援的連結給他們。例如，不要提供一個像是

「重試」的選項，如果您已經察覺到這個操作會失敗。

連線狀態


696*錯誤


697*錯誤

含有重試的Snackbar


698*錯誤


699*錯誤

在畫面上的空狀態，僅可在連線時作用。

不符合的狀態錯誤發生於用⼾試圖執行互相衝突的操作，例如在飛航模式播電話或在受限的帳號做截圖。透過清楚地傳達用

⼾所選的狀態以及他們來自其餘經驗的暗示，避免讓用⼾自己陷入那個處境。當這些錯誤被觸發，並不意味著這是用⼾所犯

的過失。

清楚關於錯誤發生的原因以及產生的地方。

範例：

在受限模式中，不允許使用截圖以及高級功能。

不符合的狀態錯誤

一般不符合


700*錯誤


701*錯誤

Snackbar+Specialmodeindicator

當用⼾在這一個狀態時，考慮顯示一個不唐突但持續性的指示。

範例：

於飛航模式中撥打電話

離線時聽音樂的有效性

自行選擇離線


702*錯誤


703*錯誤

Snackbar


704*錯誤


705*錯誤

裝置已轉為飛航模式的指示器。

當您的應用程式在工作流程進行前需要用⼾的授權，考慮讓權限要求成為應用程式流程的一部分，而非將它當作錯誤。

如果授權在第一次執行應用程式時是必要的，考慮如何使它適合應用程式的歡迎步驟。

範例：

一個應用程式的權限有所改變。

應用程式的內部加購功能已被禁用。

權限請求


706*錯誤


707*錯誤

對話框

翻譯：Yi-Bei


708*錯誤

多重選項的支援可強烈推薦給清單和網格使用者(gridcontainer)，然而，如果只有一個可用的動作是固定單一選擇的（像是

電話號碼清單—只有撥打電話的動作）；或是如果內容是強烈指向直接、單一滑動（像是移動安卓手機上的主頁圖示

(icon)），就沒有這麼必要了。

在一開始的選擇時，曳拉的手勢可能延伸成長按及兩指觸碰以選擇多重的項目。其他項目如開始與結束點的曳拉亦將包含於

其中。在桌上型電腦中，簡單的曳拉由外而內的方向也可以用來啟動多重選項（舉例來說：從左側邊緣的清單曳拉開始，由

此延伸到右邊的多個項目選擇。）

當一開始的選項已完成，則可藉由使用者的動作的順序以變更它：

觸碰以「選擇尚未選擇的項目」，或「讓已選擇的項目變為未選擇」。

按住Shift加上觸碰／點擊項目以在所有項目中，由此選項跳到另一選項。

文字選擇將會由已選擇文字的劃線方向來顯示。

在手機的平台上，一個選項的處理會被夾在開始與結束的選項中。最理想關於文字在清單上跳出的標準動作是讓文字立即地

在下面出現（但最好不要重疊到選項本身）。

文字選擇處理

選擇

項目選擇

項目選擇

文字選擇


709選擇


710選擇


711選擇


712選擇

文字選擇—亮主題

文字選擇—暗主題

剪下、拷貝、貼上及更多於以上出現的選項區域之跳出清單，當使用者選擇「更多」的鈕時，則跳出的樣子將會往圖示方向

倒，而跑出的清單將會從圖示中心往外變大。在字型的文字選擇清單上是RobotoMedium14sp,app,caps.


713選擇


714選擇


715選擇


716選擇


717選擇


718選擇


719選擇


720選擇

文字選擇是一種有效地單選內容，如同選項必須在臨近的區塊一樣。然而，選項的方向可能會隨著使用者動作的次數而改

變。

曳拉開始的選項以延展選項（之）

曳拉選項的處理以延展或減少選項（之）

在選項間重複地觸碰或點擊以延展之（單個字>段落>全部）

鍵盤熱鍵

逐字地按住Shift+Left/Right箭頭

逐行地按住Shift+Up/Down箭頭

Crl/Command+A以選擇全部€

翻譯：Frances


721選擇


手勢又分為觸控手法觸控手法TouchMechanics(你的指頭在螢幕上所做的)和觸控行動TouchActivities(在使用者界面

上特定手勢所產生的特定內容).這是因為觸控手法可能有仰賴內容上（輕敲、取消、增加／拿掉）的多重結果，而單一觸控

行動（拉近）可能會帶動多重的觸控手法（像是捏pinch地打開、雙重觸碰、雙重觸碰曳拉等等）。

注意曳拉(drag)、揮過(swipe)、丟擲(fling)的手勢行動會隨著前後之間的高度關係在它們自己的區域轉換。

觸控手法是使用的手指在螢幕上所做的事。

點擊

一指頭去按、提起

舉例：選擇

手勢

手勢

觸控手法TouchMechanics


722手勢

雙重點擊

兩指頭去按、提起，一隻指頭壓、提起

舉例：推近


723手勢

曳拉(drag)、揮過(swipe)、丟擲(fling)

一指頭去按、移動、提起

舉例：去除、滾動、傾斜移動


724手勢

長按

一指頭去按、等待、移動、提起

舉例：拿起然後移動、選擇多重項目


725手勢

雙重點擊、拉

一指頭去按、提起，一隻手指去壓、曳拉、提起

舉例：推近、拉遠


726手勢

捏地打開

兩指頭去按、往外移動、提起

舉例：推近


727手勢

捏地關起

兩指頭去按、往內移動、提起

舉例：拉遠


728手勢

兩指頭點擊

兩指頭去按、提起

舉例：拉遠


729手勢

兩指頭曳拉、揮過、丟擲

兩手指去按、移動、提起

舉例：選擇多重項目、搖pan、傾斜移動


730手勢

兩指頭長按

兩指頭長按、等待、提起

舉例：不常見


731手勢

兩指頭長按、曳拉

兩指頭按、等待、提起

舉例：拿、移動


732手勢

兩指頭雙重點擊

兩指頭按、提起、兩指頭按、提起

舉例：拉遠


733手勢

旋轉

兩指頭按、同時環繞兩指之間的中心點、提起

舉例：環繞內容，像是地圖

使用者界面上特定的手勢所產生的特定結果

啟動螢幕上的元素，像是按鈕。

觸控手法：點擊

當在對畫框或選單中，取消或跳出目前的所執行的任務


藏起或秀出chrome的樣子


觸控行動TouchActivities

輕敲Tap

取消或跳出CancelorEscape

增加／拿掉


734手勢

看看以下部分是這些不同動作的區別，滾動、在上面滾動、搖搖、消除、揮過以重新來過、邊界的揮動、頁面的揮動、整體

頁面的滾動以跳出、打開選單及傾斜移動。

觸控手法：曳拉、揮過、丟擲

選一個元素

觸控手法：長按、兩指頭點擊

當處於選擇模式裡時，選擇額外的元素。可以運用任何連續性一或二指頭手勢的組合。

觸控手法：點擊、兩指頭點擊

揭露起源於手勢開始點的選擇模組（盒子），可以指頭位置為基準來調整高度與寬度，而最後的選項考量則是以選擇盒子的

維度基準，來做指頭提起動作的考量。

觸控手法：兩指頭滑動、曳拉、在無項目被選定之下長按並曳拉。

影響已選定的單一或多個項目，可以被用來：

重新排列視線內的資料

移動一個項目到集合處或標的上

重新排序清單上或集點卡（集合卡）上的清單

觸控手法：兩指頭長按並曳拉、長按並曳拉已選定項目

放大內容

觸控手法：

雙重點擊

雙重點擊並曳拉（往下）

捏地打開

嵌入性的視窗，放大最小的標的視窗

觸控手法：雙重點擊

曳拉、揮過、丟擲

資料選擇（當還沒選擇時）

資料選擇（當項目已選定時）

Datamulti-selectiondrag

拿起並移動

推近

推近以符合

拉遠


735手勢

縮小內容

觸控手法：

在最大的視窗中，雙重點擊

雙重點擊並曳拉（往下）

捏地關起

兩指頭點擊

兩指頭雙重點擊

拓展摺疊的內容

觸控手法：捏地打開

摺疊拓展的內容

觸控手法：捏地關起

環繞標的的內容

觸控手法：環繞

因為揮的手勢非常以內容為基礎，因此這裡的部分會說明一些主要關於揮的手勢及其差異處。手勢的速度（從最慢到最快）

是曳拉、揮、擲之間最主要的區隔。基於使用的前後脈絡、手勢速度將產生不同的結果。

曳拉：細微的手勢、較慢的、較刻意的、受控制的，典型上有螢幕上的標的

揮：大手勢、較快的，典型上沒有螢幕上的標的

擲：擲：大手勢、無螢幕上的標的

揮的動作，將基於結束的速度及受影響的元素是否穿過臨界點，以成為擲的動作。

一般來說，手勢的速度將衝擊行動是否能在穿過臨界點時反轉過來：一個曳拉會保持與元素的接觸；而反向的手勢將會把元

素拉回來；當穿過臨界點、避免反轉時，擲的動作將賦予速度及拿開與元素間的接觸。

在內文中垂直或水平地揮

基於手勢的速度，滾動的量有很多種：曳拉（慢）、揮、擲（快）

一般來說：

滾動方向是共同單一的

運用到100％比例的內容

拓展

摺疊

環繞

曳拉、揮、擲

滾動


736手勢

在內文區域中反向滾動可以有一個立即叫出隱藏在App裡元素的額外效果，例如：往上滾動Chrome會秀出Omnibox。

照原本方向滾動則能關掉在app裡的元素。

根據滾動的揭露


737手勢

各個方向，一或兩指頭

一般應用於：

無邊際的內文（地圖）

比螢幕的寬或高還要大的內文（可拉近看的網頁或照片

兩指頭刷的手勢，當從另外兩指頭手勢過渡來此時（舉例：捏地推近、拉遠或是旋轉）像是在地圖裡，將會用到兩指頭來

刷。

當在起始手勢時，兩指頭刷的手勢會成為傾斜移動。

曳拉在典型上會用刷。

擲的動作，擲會維持手勢的速度，其導因於一個內文顯著刷的動作並連同擲的手勢一起。

刷（pan）


738手勢


739手勢

起源於一個可揮動的元素，像是一個清單的項目或卡片。與滾動的方向呈直角狀。

手勢在典型上以對稱的動作呈水平方向。

消除的手勢以穿越臨界點來表示。

可用於清單零的指標上、或在內文開始的空白處。

一般來說會以垂直或往下的方向來表示。

消除

揮動以更新


740手勢

一個揮的動作起源於螢幕的外圍，可叫出內文外的內文，換句話說，叫出與目前視窗之內文分開與不同區隔的部分。

如果沒有邊緣揮動的動作被定義，一個邊緣揮動手勢可以解釋成頁面的揮動。

邊緣揮動的手勢以穿越臨界點來表示。

邊緣揮動


741手勢

一個在螢幕上、內文中的揮動顯露出額外與螢幕外相關的內容。

當個別元素均可揮動時，不要使用頁面揮動。手勢將顯示出各頁面揮動間的頁面或標籤。

頁面內文可能會大於視窗的100%，而在內文裏面的揮動將會刷出內文本身的邊界，而額外的內文揮動將會超出範圍。

（gesture裡的原文要確認一下）

Seealso:滾動外的重疊

頁面揮動的手勢以穿越臨界點來表示。

頁面揮動


742手勢

層級式的導覽。

以在頂端或底端滾動內文的頁面揮動來導覽母子內文。

滾動外的重疊手勢以穿越臨界點來表示。

滾動外的重疊


743手勢

曳拉選單或挖掘者顯示的選單在作出提起的手勢之下，重點式的選項將被選定。

曳拉被用來當做打開選單。

打開選單


744手勢

傾斜3D的內文向前或向後。

當從兩指頭手勢（例如：捏地推進、拉遠或旋轉）過場到像是在地圖中時，將會用到兩指頭刷動。

曳拉被用來傾斜移動。

傾斜移動


745手勢

翻譯：Frances


746手勢


導覽抽出式面板在Google應用程式中是一個常見的模式。導覽抽出式面板從左側滑進視窗中。它依循了列表的印刷關鍵線設

計原則與量度。

抽出式導覽面板


747*抽出式導覽面板

印刷格式

1. RobotoMedium,14sp,#FFFFFF2. RobotoRegular,14sp,#FFFFFF3.列表物件:RobotoMedium,14sp,87%#0000004.次標題:RobotoMedium,14sp,54%#000000.和16dp寬的關鍵線對齊



垂直的關鍵線和水平的邊緣

讓圖示對齊的垂直關鍵線位於從左側以及導覽面板的右側邊緣算起16dp的地方，並且為54%#000000。

和圖示或圖像相關的內容對齊於從導覽面板左側邊緣算起72dp的位置。

導覽面板的寬度等於畫面寬度減掉功能列的高度，在這個例子中即為從畫面右邊算起56dp。

在行動裝置上使用16dp寬的水平邊緣。



垂直間隔

1. 24dp2. 56dp3. 8dp4. 48dp

在每個列表群組的上方和底部加上8dp的padding。有一個例外是次標題下方最上面那個列表，因為次標題自己已經有

padding了。

導覽抽出式面板跨越整個螢幕的高度，而且面板是在狀態列的底下。

Android上的抽出式導覽面板

當一個列表物件被選取了，那個物件變成應用程式的主要顏色或者#000000100%來明確的表達選取狀態。點擊漣漪也變成

強調效果來更加凸顯選取狀態。

如果點擊漣漪（強調效果）不能提供和你的主色調足夠的對比，那就使用以主色調再深一點的色調。

提升高度

選取狀態



所有在導覽面板中的分隔線都是面板中的全出血版。同樣的分隔線上下也有8dp的padding。

分隔線



內文



8dp的垂直間距

抽出式導覽面板跟任何畫面一樣都可以捲動。

捲動



設定與支援位於捲動列表的底部，和其他列表內容相同。

如果抽出式導覽面板的列表內容很長，這兩個選項可以釘住在一個高度較高的平面上置放于抽出式導覽面板的底部。這個平

面只當位於列表頂部時才顯示，任何其他捲動位置會立即讓該平面消失且移到列表底部和其列表內容相同。抽出式導覽面板

的底部在關閉或開啟時會保持捲動位置。

設定與支援



如果列表不會捲動，設定與支援選項會顯示在列表最後而且不會釘住。



註：抽出式導覽面板（Navigationaldrawer）註：印刷關鍵線設計原則（keylines）註：全流血版（full-bleed）

翻譯：SeanChen




導覽式動畫只有當用⼾在應用程式中從某一狀態被帶領到另一個狀態才會發生，像是從縱觀的視角轉換到細節的視角或是任

務完成的視角。大部份的動畫自然而然地是階層式的，但是非階層式的動畫也會發生。

這些短暫的時間對於用⼾經驗來說是很重要的。仔細的考量用⼾的使用過程來決定什麼動畫在什麼時候使用。不同的動畫在

不同情形下都是合適的。

一個最重要的動畫是當用⼾"往下鑽探"到內容時。這可以想成是從parent到child的動畫，因為這很自然是階層式的。

在materialdesign中，一個從parent到child的動畫是以高度的變化來做顯示。用⼾觸碰的表面或表面所在的區域應該從它本

來的位置上昇並且擴展。此動作帶領用⼾從A點到B點，同時應該強調原來位置和目的位置。利用material動作曲線來實作，

這一切應該感覺上要是自然與熟悉的，因為從原來位置擴展和移動感覺上很符合邏輯。

非階層式的動畫與階層式動畫的表現方式不同。你可以把非階層式動畫想成從sibling到sibling。

一個這類動畫的範例是當用⼾在一排頁籤中移動時。這時候沒有高度變化，頁籤的內容、表面都停留在同一個高度。新的內

容從右邊滑進來並且把它的sibling推出畫面左側。

Sibling動畫

翻譯：SeanChen

導覽式動畫

從parent到child

從sibling到sibling


770*導覽式動畫


在設計捲動行為時，以區塊作為基礎來思考是有幫助的。這只是在腦海中的模型，並不會以任何看得到的互動方式呈現。

下面四個主要的區塊是用來協助建構捲動架構的應用程式列：

狀態列:24dp導覽列:手機上是56dp，平板和桌上電腦是64dp頁籤列/搜尋列:48dp彈性空間:用來容納具有理想的長寬比例的圖片或延伸的應用程式列的空間

捲動方式

捲動

以區塊為基礎


771*捲動方式

標準應用程式列的高度在手機上是56dp，而在較大的螢幕上是64dp。當捲動的時候有兩個選擇。

1.應用程式列與內容可以捲動到螢幕之外，當用⼾反方向捲動時則回到螢幕內。

2.應用程式列可以固定在上方，讓內容在其下方捲動。

標準應用程式列可以加以延伸來容納頁籤和一個搜尋輸入框。在腦海中使用區塊模型在決定捲動行為時是有幫助的。在這個

例子中，你有兩個選擇：

1.導覽列捲動到螢幕之外，頁籤列停留在最上方。

2.應用程式列留在原地，內容在其下方捲動。

標準應用程式列

頁籤


772*捲動方式

應用程式列是具彈性的，而且可以延伸以容納較大的版面或圖片。要延伸應用程式列的話，需要加上一個彈性空間。

1.當只有導覽列存在的時候，彈性空間會縮小。導覽列內的標題也應該縮小到20sp。當捲動回去時，彈性空間與標題也再

次回復原先位置。

2.整個應用程式列捲動出螢幕之外。當用⼾回捲時，導覽列回復成固定在頂部。當完全捲動回去時，彈性空間與標題也再

次回復原先位置。

在應用程式列中使用圖片時，你可以使用彈性空間來容納想要的長寬比例。在此範例中長寬比是4:3。當捲動時，內容把圖片

上推，因此彈性空間縮減了。圖片的最後20%彈性空間的顏色為加深後的應用程式主顏色。

彈性空間

彈性空間與圖片


773*捲動方式

翻譯：SeanChen


774*捲動方式


浮起式指令鈕是促進式指令的一個特別的例子。他們會以在使用者界面中圓形浮起的圖示來區別，並且有關於變形、開始及

轉換矛點的特定動作行為。

這裡有兩種浮起式指令鈕：預設的尺寸與小尺寸，而這只能被用來跟其他螢幕上的元素創造視覺的連續性。

促進式指令

浮起式指令鈕


775促進式指令


776促進式指令

不是每個螢幕都需要浮起式指令鈕。浮起式指令鈕必須是應用程式裡的主要動作。在螢幕的左邊，主要的動作是去觸碰並打

開藝廊裡的圖片，所以不需要浮起式指令鈕。而在右邊，主要動作是附加檔案，將浮起式指令鈕放在這裡是適合的。

相關的內容


777促進式指令

請這麼做


778促進式指令

請這麼做

試著只使用一個浮動按鈕在每個畫面，因為他是畫面上最突出的按鈕。


779促進式指令

別這麼做


780促進式指令

別這麼做

不要（請勿）將浮起式指令鈕放在對話框中，要使用扁平鈕。


781促進式指令

請這麼做


782促進式指令

別這麼做

不要將浮起式鈕放在側面搖曳處，這樣會讓使用者從原本想要完成的任務中分心。側面搖曳處是拿來導覽用的。


783促進式指令

請這麼做


784促進式指令

別這麼做

不要讓浮起式鈕跟下拉式選單重疊到。


785促進式指令

請這麼做

別這麼做

將總覽（overflow）指令功能放在總覽選單的工具列中而不是放在浮起式指令鈕。

相關的指令


786促進式指令

請這麼做

請這麼做


787促進式指令

別這麼做

別這麼做

如果此應用程式的標識是附加檔案，則浮起式指令鈕可以在被觸控到時變形為後續的相關動作。

請這麼做


788促進式指令

請這麼做

然而，如果一組動作在觸控到「與按鈕不相干的浮起式指令鈕」以及「其不自然的動作延伸」之後出現，此動作應該會進入

總覽選單中。

別這麼做

別這麼做

如果浮起式鈕便行為工具列，那麼工具列則必須包含相關的動作。在這個例子中，此按鈕讓使用者選擇欲加入的媒體樣式。

請這麼做


789促進式指令

請這麼做

不要讓浮起式鈕變形為不相干或是令人感到困惑的工具列。

別這麼做

別這麼做

一個浮起式指令鈕可以包含聯絡人們的清單。


790促進式指令

請這麼做

請這麼做

不應該包含不相干的動作。


791促進式指令

別這麼做

別這麼做

品質


792促進式指令

讓浮起式指令鈕變成更正面的動作，像是創造、喜愛、分享、導航、探索。

請這麼做

一般來說，避免使用浮起式指令鈕作為破壞性的動作，像是存檔或垃圾桶；不特定的動作；警示或錯誤；有限性的任務，像

是剪下文字；或是掌控應該放在工具列的部分，像是字體大小的控制或是改變字型顏色。浮起式指令鈕不能包含在應用程式

的圖示列中或像是「通知」的狀態列資訊。不要將標誌圖示或其他的元素層層堆疊在浮起式指令按鈕上方。

別這麼做

持續地使用圓形的圖示以不讓使用者感到困惑。


793促進式指令

請這麼做

別這麼做

不要讓浮起式指令鈕彈起

請這麼做


794促進式指令

別這麼做

一個浮起式指令鈕可以被放置於「以主要行距為規則」或「應用程式延伸的列」之上。

放置


795促進式指令

請這麼做


796促進式指令

請這麼做

一個浮起式指令鈕可以放在下方或一個延伸的頁面。


797促進式指令

請這麼做


798促進式指令

請這麼做

一個浮起式指令鈕不應該浮在一個隨意的地方，注意當把浮起式指令鈕至於工具列時，它可能會重疊到或覆蓋到其他觸控的

標的。


799促進式指令

別這麼做


800促進式指令

別這麼做

一個浮起式指令鈕可以放在延伸頁面的上方。


801促進式指令

請這麼做

一個浮起式指令鈕可以被放在工具列或頁面裡的結構性元素（只要它不要檔到其他的元素）上。


802促進式指令

請這麼做

一個浮起式指令鈕可以被放在頁面的邊緣。


803促進式指令

請這麼做

不要放超過一個以上的浮起式指令鈕在每個螢幕中。


804促進式指令

別這麼做

不要將浮起式指令鈕放在搖曳處裡面或是搖曳處上面。


805促進式指令

別這麼做

不要將浮起式指令鈕當成螢幕上的每個元素。


806促進式指令

別這麼做

不要讓橫幅擋到浮起式指令鈕。

請這麼做


807促進式指令

別這麼做

翻譯：Frances


808促進式指令


應用程式的設定允許使用者將個人的偏好習慣反映在應用程式的表現上面。他們給予使用者一個直覺性的控制，而對於避免

使用者反覆地被同一個問題干擾方面是有用的。

「設定」在使用者介面中是不明顯的，因為使用者不會常常用到它。當你在應用程式上使用「設定」時，進入設定的指令表

達方式就應該只要簡單的「設定」兩字。

如果目前的螢幕支援是在左側欄，則將「設定」放在所有項目之下，而僅在「協助＆回饋」之上。否則，如果是在一個螢幕

上的工具列，則將「設定」放在工具列的指令中，並置於所有的項目之下，「協助＆回饋」之上是最適合的。

當使用者常常造訪「設定」時，他們將會把期望設得跟自己使用界面的經驗一樣。這必須加以好好的組織化及可預測化的。

特別是，必須避免用太多的選項把使用者給淹沒。避免以流於衝動的方式「只做一個設定」，而在一個困難的產品決定中下

賭注。

對於每一個你想要加到設定裡的控制，要去確保這可以接續下一個問題：這真的是使用者喜歡的嗎？資訊與指令都不是使用

者喜歡的。如果不是，那就別將此作為設定，如果這是應用程式的統計資訊，（例如：版本數字、服務用語、公開資源執

照），將這些放到協助的視窗裡吧！

如果是一個指令（例如：更新、改變帳⼾），在你的應用程式當中為它找出一個適合的位置。這是使用者常常會去改變的地

方嗎？使用者每次要進入這個控制時會因為要採取很多指令進入而感到負擔嗎？如果不是，那就別做這個設定。

讓控制能夠更加的可行，盡可能地透過工具列或指令讓其運作。是否有少於20%的使用者改變這個控制的價值？如果不是，

那就別做這個設定。這些問題必須應用到全新的與既有的設定中。對於既有的設定而言，最後一個問題可能是較緩和的：如

果此設定被移除掉，會造成少數人的傷害而不再能夠改變它嗎？如果是，如果你沒有留意到，那麼就將它視為是的設定並維

持它吧！

當你有很多設定時，將一個很長的清單以及節的方式將其轉換成好幾的短一點的清單。你整理他們的策略將會隨著設定的數

量而調整。

不要將全部都集結起來

試著集結一個或兩個以下分類的相關設定。如果你有任何的單一模組（這些設定不跟其他設定相關聯也無法被歸於你的分類

中），將他們視為以下所提及處：

如果他們包含你最重要設定的一些內容，那就將它們列為在最上面而不要有分類。

否則，用分類將他們列在下面會被稱為「其他」，inorderofimportance。

設定

設定

入口設定

適當的使用設定

集結設定

七個或少點的設定

八個到十個設定


809設定

誠如上述的建議，但試試用二至三個分類。

而且看看這些「組合」：兩個與其他一個相關，但卻跟其他的沒有關聯，試著把他們結合成一種設定。舉例來說，你可能會

將兩個選擇框設定重新設計成多種選擇設定。

如果你有任何四個或更多相關設定的情況，將它們集結在次要的視窗中。將導覽應用在各個次要視窗之上。

使用者將會預期一開始設定的使用價值是好用的。以下的一些問題可以幫助告知你的決定：在沒有預設的情況下，哪一個選

擇可能是最多使用者會自己去選擇的？哪一個選擇是最中立或是最不偏袒的？哪一個選擇是最少風險、最不具爭議、或最不

超越上限？哪一個選擇用最少量的電池或手機的資訊空間？哪一個選擇可以得到使用者最多的注意，而且當有重要的事情時

才打擾一下使用者？

翻譯：Frances

十一到十五個設定

十六或更多設定

預設的選擇


810設定


illustrations和photographs可能會在令人吃驚的期間持續地進行三階段的裝載及轉換，而不是仰賴於繁瑣的透明度轉換。在程

度上會以低對比曝光及不飽和的顏色來做調整。只有在透明度是100%時，最後的階段可能會是完整的飽和顏色。較低對比的

效果是較暗影像的伽瑪射線轉換與黑色輸出的結合。

影像處理

影像裝載

影像裝載


811影像處理

低透明度及低對比度


812影像處理

完全不透明及曝光度


813影像處理

顏色飽和度

不要將白色調整得太過明亮，這樣會透過相機的鏡頭製造出一個過度曝光的效果。想像一個照片照片在輸出的過程中褪色的

影像。

光圈與輸出


814影像處理

可以

不可以

使用三個階段比例（透明度、對比度及飽和度）畫出以上適合你需求的圖。建議可以較長的期間來裝載、較短的時間來轉

換。

這個步驟對於大螢幕會是理想的，就像在這個裝載Chrome及OS的桌布的例子一樣。

在這個例子的影像處理上方，加上如同帳⼾變更的小動作轉換。

裝載及轉換

裝載在大一點的螢幕

額外增加之動畫


815影像處理

翻譯：Frances


816影像處理


當一個應用程式保有大量資訊時，使用者會希望能夠透過搜尋馬上找到特定內容。

最基本形式的搜尋意味著：

開啟一個搜尋文字框

輸入搜尋條件並進行查詢

呈現一組搜尋結果

然而透過一些增強，搜尋經驗可以變得更受矚目更令人滿意的：

支援語音搜尋

在使用者進行搜尋前，根據近期使用者的歷史搜尋紀錄提供建議

提供自動完成的搜尋建議，且這些建議與你的應用程式資料搜尋結果相符合(亦即這些建議都是應用程式內的資料)

Therearetwomajorpatternsforin-appsearch:persistentsearchandexpandablesearch.

應用程式內搜尋有兩個主要的模式：持續式搜尋與可擴展式搜尋。

當搜尋是你的應用程式的主要重點功能時，持續式搜尋是適當的方式。

搜尋的文字欄位是呈現在一個嵌入的搜尋框內，隨時準備好被啟動使用。

使用者可以透過觸控麥克風裝置，開啟語音搜尋。

搜尋

應用程式內搜尋

持續式搜尋


817搜尋


818搜尋


819搜尋


820搜尋

當搜尋欄位被啟動使用時，搜尋框會展開並呈現依據歷史搜尋紀錄所做的建議，鍵盤也會視需要顯示在螢幕上，若使

用者選擇了任何建議，就是提交系統執行這個建議的搜尋，點擊向上的箭頭圖示放棄搜尋，取消系統建議清單以及螢

幕鍵盤。


821搜尋


822搜尋

當使用者開始輸入查詢的關鍵字時，搜尋系統會依據輸入的關鍵字變換自動完成的選項。

點擊搜尋框旁的'x'會全部清除使用者輸入的關鍵字。

選擇一個搜尋建議項目或按下返回鍵都會提交系統執行這個搜尋。


823搜尋


824搜尋

顯示搜尋結果時，仍然顯示搜尋框，只是未被聚焦啟用，為了顯示更多的搜尋結果，螢幕鍵盤被收起來了。

為了與嵌入式搜尋框的外觀相稱，搜尋結果會以卡片方式編排，這樣的樣式可以適應各樣不同型態的搜尋結果。

當搜尋不是你的應用程式的主要重點功能時，可擴展式搜尋是適當的方式。

不再顯示搜尋文字欄位，取而代之，搜尋功能(以放大鏡圖案表示)顯示在工具列中。

可擴展式搜尋


825搜尋


826搜尋


827搜尋


828搜尋

觸控搜尋圖示時，工具列會改變樣式，清除其它的內容並顯示一個搜尋文字框，若有支援語音搜尋，同時會顯示麥克

風圖示。

搜尋文字欄位會自動接收使用者的聚焦啟用，如果需要的話螢幕鍵盤也會一起顯示。歷史搜尋建議可以顯示在工具列

下，取代之前顯示的內容，選擇任何一個搜尋建議的項目就是向系統提交執行這個搜尋。

觸控向上箭頭的圖示關閉搜尋模式，並且恢復工具列原來的顯示方式。


829搜尋


830搜尋

當使用者開始輸入查詢的關鍵字時，搜尋系統會依據輸入的關鍵字變換自動完成的選項。

點擊搜尋框旁的'x'會全部清除使用者輸入的關鍵字。

選擇一個搜尋建議項目或按下返回鍵都會提交系統執行這個搜尋。


831搜尋


832搜尋

顯示搜尋結果時，工具列仍然保持搜尋模式，只是未被聚焦啟用。為了顯示更多的搜尋結果，螢幕鍵盤被收起來了。

就像前面所建議的一樣，搜尋結果顯示在工具列下方的頁面主要區域。

翻譯：Charlene


833搜尋


有兩種方式可以更新一個應用程式中的內容。推薦的方式是用同步自動更新內容。同步是一種應用程式用來週期性地與自動

地保持內容保持最新的狀態。推薦使用同步是因為這不需要用⼾執行動作，而可以讓用⼾對於他們隨時在看的內容有自信是

最新的。

另一個是用手動更新的方式。更新需要用⼾利用執行動作或滑動更新手勢來啟動內容更新。更新可以用來補充同步不足之

處，比如說當在Gmail中檢查新信件或在Google+中檢查通知訊息時。一個明確的更新動作使用⼾能更新內容同時也保持他們

當下的捲動位置。

滑動更新是一個可以在列表、網格與卡片式群組的起點處，也就是大部份最新內容出現的地方所使用的滑動手勢。一般來

說，這個手勢是在內容集合的最頂端使用的，但是也能是在最底部（像是在聊天軟體中）。最好是利用這個手勢來提供常常

更新的，且在同一個固定位置顯示的動態內容，那個位置要是能確保用⼾啟動這個手勢後有較高機率看到新內容的地方。

要注意的是當滑動更新手勢被使用，畫面會大幅度改變或是被更新內容完全取代的這些變動可能不是可以立即呈現給用⼾

的。舉例來說，更新內容可能會不按順序的刪除、重新排列、修改與插入物件或是改變螢幕之外的物件。

滑動更新不應該被使用在下面的情形中：

滑動更新

滑動更新

更新內容

滑動更新


834*滑動更新

http://developer.android.com/training/sync-adapters/index.html

http://www.google.com/design/spec/patterns/gestures.html#gestures-gestures


835*滑動更新

Don't.

抽出式導覽面板（如果應用程式中有的話）包含了導覽目的地，這並不是動態內容。


836*滑動更新


837*滑動更新

Don't.

主視窗的小工具不應該自動更新內容。


838*滑動更新


839*滑動更新

Don't.

掏金式內容，像是地圖，沒有主要的方向或內容起點能讓用⼾能預想到滑動更新將從什麼地方啟動。

更新中指示器預設位置永遠都是水平置中於欲更新內容的。

Do.

更新中指示器的位置與行為


840*滑動更新

Don't.


841*滑動更新

Don't.

更新中指示器永遠都位於接近欲更新內容的頂部。

Y軸的更新中指示器預設位置可以調整，所以它的位置可以和底下的格式在視覺上保持和諧。比方說，指示器可以在material邊緣或是網格線上，當是它應當永遠都位於接近欲更新內容的頂部。


842*滑動更新


843*滑動更新

Do.


844*滑動更新


845*滑動更新

Don't.

更新中指示器在更新動作完成且新內容顯示了，或者用⼾移動到欲更新內容外之前要保持在顯示狀態。

更新中指示器只會在更新手勢或更新動作後面才顯示。同步並不會呈現更新中指示器。

Do.

Don't.

當另一個表面在z軸上位於包含欲更新內容的material之上時，更新中指示器從下方移動上來，並且當它完整顯示時是簡潔

的。

當包含欲更新內容的material在z軸上高於其他表面或者與另一個表面同層時，更新中指示器跳出來呈現，同時也執行動畫。

當透過應用程式列的動作或者浮現選單來啟動內容更新時，更新中指示器從它的預設位置跳出來呈現。

===更新與另一個表面同層的內容

更新位於下方另一個表面的內容

利用應用程式列動作來更新內容

當更新中指示器顯示或跳出至畫面上時，環形轉動圖示邊轉動邊呈現進畫面。

為了確保用⼾使用滑動更新手勢來啟動更新，更新中指示器在應用程式開始更新之前必須通過一個瓶頸。這個瓶頸透過一些

暗喻來表達：環形轉動圖示達到100%的不透明性、環形轉動圖示的轉動速度減慢、更新中指示器的動畫速率減慢。

在通過這個瓶頸後的任何時間點完成這個手勢將會啟動更新。

在通過這個瓶頸後的任何時間點反過來作這個手勢將會取消更新。

翻譯：SeanChen

更新中指示器動畫

實作細節


846*滑動更新


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

者接受。

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

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

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

沒有聲音

沒有色彩

螢幕高採用對比模式

螢幕放大模式

僅能使用螢幕閱讀器

僅能使用聲控

以上狀況同時出現時

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

導覽能快速有效地幫助使用者。好的導覽取決於使用者使用的速度與效率有多好(（例如跳到關鍵區塊或跳回主要導覽

列）？先呈現最重要的資訊，再利用一些小變化，例如將「create」按鈕帶到頂端，能夠使導覽速度更加快速。

觸碰標的至少要有48x48pixel的面積。在任何觸控螢幕中，螢幕上元素的大小，建議至少要有48x48pixel。而元素之間的

距離至少要8dp。

支援無滑鼠與標準手勢導覽。在你的設計中，任何操作或使用方式，能在網路介面上使用鍵盤嗎？在行動裝置上能透過標準

手勢互動嗎？盲人使用者無法使用滑鼠瀏覽視覺界面。取而代之的，他們使鍵盤或手勢。確定滑鼠移至上方才會出現的資

訊，在沒滑鼠時仍然能正常被取得。若有鍵盤熱鍵，確保整個平台的鍵盤熱鍵保持一致。

管理使用者專注的重點。確保使用者關注的焦點不會因彈跳視窗、警告訊息或多螢幕而分心。思考使用者在關閉彈跳視窗後

如何回到原始主畫面，如同彈跳視窗出現前的狀態。

確定你的產品套用大型字體時仍然可以使用。當使用者將螢幕或字型放大時，是否仍保有良好的閱讀性？關鍵的元素是否消

失？功能是否可正常使用？在畫面上會不會重疊？你可以利用OS/Browser/App提供的親和性開發工具檢查螢幕縮放與大型

字體時狀態。

確定關鍵文字有良好的對比。普遍來說，對比度比率在4.5：1最為適當。替背景與關鍵元素設置適當的對比度，讓使用者與

視弱的使用者都能夠更輕易地閱讀你的訊息。較小的字體需要較高的對比度；較大型的標頭則能容許更低的對比。

不要只依賴顏色傳達關鍵資訊。顏色是色盲使用者的一大障礙。當重要訊息透過顏色傳達時（例如交通流量：紅色代表塞

車；綠色代表流暢），為顏色的設置替代方案是很重要的，確保任何使用者即使無法辨認顏色，都能接收到一樣的訊息。除了顏色，你也能利用形狀、圖案、紋路或文字傳達訊息。

親和性

親和性

導覽

可讀性


847親和性

http://www.google.com/accessibility/building/

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

同樣的，你也該為視覺訊息設置替代的聽覺訊息。

讓互動控制清楚且容易察覺。互動控制的原件是否有相關的標簽、簡介或占位，以提醒使用者的目的？元素是否有一致的命

名方式貫穿整個應用程式？替使用者提供及時的相關協助訊息。命名應用程式的元素時，要確保前後規則的一致性。

替圖片或影片設置替代文字。當使用圖像式傳達訊息時，你是否忽略了提供替代文字？標簽是否符合語義？例如使用「下載

晚餐菜單」而非只是「下載」，以符合語義。所有的圖片與圖標都要設置替代文字，並且避免使用文字圖片，以免標準小工

具無法運用。

提供指示與協助。使用者對於元素有問題時是否能及時找到說明指南？如果某個關鍵元素過期了，是否有其他方式重新啟

動？提供清楚且容易查詢的說明指南，讓使用者能查詢有哪些熱鍵或手勢可用與各功能的使用方式。

賦予你的連結意義。連結的意義是否明確？設置連結時，常見的「點選這裡」無法提供任何連結意義。賦予連結該有的意

義，例如將連結顯示為「裝置設定」就比「點選此處」好得多。另外也能利用輔助模式，讓使用者跳過不相干的資訊，直接

掃描連結，提升導覽的效率。

翻譯：Peter

導引與回饋


848親和性


一個設計良好的應用程式支援雙向性，這個意思是說它可以輕易的轉換成由右向左（RTL）、由左向右（LTR）書寫及閱讀的

語言體制。由右向左的語言體制包含了阿拉伯語、希伯來語和波斯語。

雙向性影響的不止是文字，也影響了格式與圖示。

RTL和LTR主要的差異是時間的方向。對於使用RTL體制語言的讀者來說，時間是從右邊移動到左邊。這些用⼾期待使用者界

面也從右邊向左邊流動以準確的反應時間的方向。

鏡像式的變化使用者界面從LTR到RTL或是反過來從RTL到LTR，這邊指的包括應用程式的格式與圖像元素。

一個RTL的格式是LTR格式的鏡像。圖示在文字區塊的右邊。導航用按鈕排序反了過來，『前一頁』按鈕位於右邊。

提示了特定方向的圖示以鏡像方式處理，如說話者圖示。其他圖示故意不做鏡像處理，比如說相機與勾選圖示。

雙向性

使用者界面鏡像概述


849*雙向性


850*雙向性

使用LTR使用者界面的範例


851*雙向性


852*雙向性

使用RTL使用者界面的範例

依據這些準則來鏡像處理文字、格式與圖示來支援RTL使用者界面。

RTL使用者界面的原則就是時間是從右邊流向左邊。『向前』指向左邊、『向後』指向右邊。

需要做鏡像處理的最重要圖示是向前與向後按鈕。

作為導航的向前與向後按鈕顛倒了過來。

LTR向後按鈕

RTL鏡像準則

何時做鏡像處理


853*雙向性

RTL向後按鈕


854*雙向性

LTR向前按鈕


855*雙向性

RTL向後按鈕

一個表示向前的動作的圖式應該要被鏡像處理。


856*雙向性

一個LTR的自行車往前移動方向指向右方


857*雙向性

一個RTL的自行車往前移動方向指向左方

其他的事項更為細微。舉例來說，一個在圖像上使用斜線來表達關閉狀態的圖示，在LTR使用者界面上，斜線是從左上到右

下；在RTL使用者界面上，斜線是從右上到左下。


858*雙向性

LTR下的關閉飛航模式狀態


859*雙向性

RTL下的關閉飛航模式狀態

在這個圖片中，斜線做了鏡像處理。飛機本身指向了上方，所以不需要做特別處理。

一個右方有著滑桿的音量圖示應該要被鏡像處理。滑桿應該要從右到左，音波應該從右邊出現。


860*雙向性

LTR下的音量控制滑桿

RTL下的喇叭音量圖示與滑桿做了鏡像處理

關於人們、頭像或臉孔的圖示應該被鏡像處理，尤其是當它們出現在靠近文字的地方時。人臉應該面向前方，朝向文字，而

不是面向後方，避開文字。

這有時可以是非常細微的，像是一個或一組稍微轉向、偏開的臉孔。


861*雙向性

LTR下的群組圖示


862*雙向性

RTL下的群組圖示

有時候平面和環形的時間方向都以隱喻方式呈現在一個圖示中。比方說，GoogleDocs中重做和取消的按鈕都有著平面和環

形的方向。

在LTR中，這些環形和平面的時間表達方式都指向了同一個方向，在RTL中則選擇顯示環形或者是平面方向。


863*雙向性

LTR下的文件內重做和取消按鈕

包含了文字顯示方式的圖示需要小心的鏡像處理。

文字在RTL中是靠右的。如果圖示中有在段落開頭有文字縮排、段落中有未完成的一行文字或者有一個不平整的右側，那它

就需要被做鏡像處理。


864*雙向性

LTR下的聊天圖示


865*雙向性

RTL下的聊天圖示

線性的時間表達在RTL中需要做鏡像處理，而環形的時間方向不需要。時鐘在RTL語言中依舊是瞬時中旋轉。時鐘圖示、還

行的重整圖示或者順時鐘方向的進度圖示不應該做鏡像處理。

何時不做鏡像處理


866*雙向性

重整圖示


867*雙向性

歷史圖示

某些表達實體物件的圖示在RTL的世界中也不是鏡像的。

舉例來說，實體的鍵盤在世界上每個地方看起來都一樣，所以它們不應該被鏡像處理。


868*雙向性

鍵盤圖示


869*雙向性

耳機圖示

有些圖是看起來好像是有方向性的，但是它們實際上是代表著一個人的右手拿著一個物體。

比方說，搜尋圖示一般來說它的手把位於右下方，這是因為大部份的人都是右撇子。

在RTL書寫的國家中，大部份的人也還是右撇子，所以這些圖是不應該做鏡像處理。


870*雙向性

搜尋圖示


871*雙向性

媒體回播按鈕和進度條不做鏡像處理。這些元素的LTR方向表示卡帶的方向而不是時間的方向。


872*雙向性

當考慮應用程式設計中的雙向性時，同時也要想想本地化應用程式的其他要素。

因為圖像元素中的文字也需要被本地化，所以試著已不需要文字的方式傳達概念。

數字也是文字。包含數字的圖示也需要為使用不同數字系統的語言做本地化。比如說，孟加拉語、馬拉地語和大部分的阿拉

伯語系使用不同的數字形式。一個包含這些數字的圖示會需要重畫來遷就它們的形狀。

內文也很重要，甚至在LTR語系中也需要做鏡像處理。像是在GoogleDocs中的英文使用者界面中的英文文件編輯一段RTL段落，有編號的項目符號列表按鈕、縮排與不縮排都應該被鏡像處理來符合RTL，即使主要的使用者界面方式還是LTR。

翻譯：SeanChen

其他本地化的考量


873*雙向性


10個不同的手機介面模板，使用圖層面板設定你的版面與空間配置。

LayoutMobileWhiteframe2MB(.ai)

14個不同的平板電腦介面模板，使用圖層面板設定你的版面與空間配置。

LayoutTabletWhiteframe3MB(.ai)

4個不同螢幕大小的桌上型電腦介面模板，使用圖層面板設定你的版面與空間規則。

LayoutDesktopWhiteframe96MB(.ai)

多種不同的版型架構，包含畫面、圖層與陰影，提供一致設計。

Whiteframes15MB(.ai)

翻譯：Peter

版型架構

智慧型手機

平板電腦

桌上型電腦

版型架構


874版型架構

http://material-design.storage.googleapis.com/downloads/Layout_Mobile_Whiteframe.ai

http://material-design.storage.googleapis.com/downloads/Layout_Tablet_Whiteframe.ai


http://material-design.storage.googleapis.com/downloads/Whiteframes.ai


貼紙範本已經更新以反映最新的改進，集合而成的範本更容易使用。

在這貼紙範本中，可以尋找到各式各樣的元素，像是佈局的組成、包含亮色及暗色的狀態列、應用程式工具列、底部工具

列、卡片樣式、下拉式選單、搜尋欄、分隔線、側欄、對話框、浮動動作按鈕以及其他元件。

貼紙範本的元素對齊在8dp的隔線上，以及基準線類型落在4dp的隔線。

文字框的設置位置為齊頭(類型>區域類型選項)，這範本中也包含可以運用在各式文字框的文字樣式。

元件貼紙範本AdobePhotoshop

237.74MB(.psd)

元件貼紙範本AdobeIllustrator

189.09MB(.ai)

元件貼紙範本Sketch

6.67MB(.sketch)

Materialdesign的系統圖示包含不同應用程式所常用的圖示，像是影音播放的圖示、通訊、內容編輯、連線等等。這個下載

包含了750個圖示，提供SVG，對應不同解析度的PNG，還有PNG及SVG的sprites。

系統圖示

56.51MB(.zip)

Github上的系統圖示

你也可以從Github上下載系統圖示。

翻譯：Peter

更新：Casper

貼紙範本及圖示

元件

系統圖示


875貼紙範本

http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7MGtzS0lpeFZUYmc/stickersheet_general.psd

http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7WDR5Q25OcXVuU28/stickersheet_general.ai

http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7Q3FVZ0FnM18yTHM/stickersheet_general.sketch

http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B08MbvYZK1iNZ19ldS1aNzdTQkU/material-design-icons-1.0.0.zip

https://github.com/google/material-design-icons



最新版的Roboto字型可以運用在行動裝置或網站上。

RobotoFont1.21MB(.zip)

翻譯：Peter

Roboto字型


876Roboto字型

http://material-design.storage.googleapis.com/downloads/RobotoTTF.zip


zip檔案中有色票樣本，可安裝到AdobePhotoshop與AdobeIllustrator中，安裝到Photoshop時選擇.aco檔，安裝Illustrator時選擇.ase檔。安裝時請先閱讀Read-Me.pdf。

ColorSwatches0.13MB(.zip)

翻譯：Peter

調色板


877調色板

http://material-design.storage.googleapis.com/downloads/color_swatches.zip


2014年11月3日發佈了MaterialDesign的規範，包含了以下新內容：

全新的章節"什麼是Material"提供一個MaterialDesign關鍵性的概觀，對於環境的章節，包含了在3D世界中陰影及深

度資訊；另外還有Material特性及3D空間中的物件。

選擇器元件，用來選擇日期和時間的。

抽出式導覽面板

導覽式動畫

捲動方式

滑動更新

資料格式

錯誤

產品圖示

雙向性，這內容關於國際化RTL語言的支援性。

其他明顯的內容更新：

貼紙範本有Illustrator、Photoshop、Sketch格式，取代了原本單張的範本。

系統圖示包含了最通用的系統圖示，適合任何平台上的應用程式。

色票，Teal已經更名為Cyan，Deep更名為Teal。排版樣式包含了Notofonts以及說明單行字符長度。

對話框及選單擴增了新的元件使用規範。

連結到Android開發者文件相關章節。

本次更新的文章，在Gitbook的左側選單上，都有增加"*"符號

更新了什麼


878*What'snew

http://developer.android.com/index.html

Google Material Design 正體中文版 - Aaron網誌

Documents

Transcript of Google Material Design 正體中文版 - Aaron網誌