從設計指南說起，詳解Material Design系統(tǒng)組件

Echo ：iOS 或 Material Design的設計指南，都是按照組件的屬性來體系介紹。一樣平常把Control翻譯成控件，把Component翻譯成組件。普通的詮釋說法就是組件為多個元素組合而成，控件為單一元素。但是Material Design把我所認為的控件和組件都合為一體，統(tǒng)稱為組件。

先看一張Material Design所有組件的思維導圖：

底部動作條

定義：一個從屏幕底部邊緣向上滑出的一個面板，使用這種體例向用戶呈現一組功能。

使用規(guī)則：底部動作條(Bottom Sheets)提供三個或三個以上的操作必要提供應用戶選擇、并且不必要對操作有額外詮釋的情景。假如只有兩個或者更少的操作，或者必要詳加描述的，可以考慮使用菜單(Menu)或者提醒框替換。底部動作條可以是列表樣式的也可以是宮格樣式。

底部動作條的內容：在一個標準的列表樣式的底部動作條(Bottom Sheets)中，每一個操作應該有一句描述和一個左對齊的icon。假如必要的話，也可以使用分隔符對這些操作進行邏輯分組，也可以為分組添加題目或者副題目。一個可以滾動的宮格樣式的底部動作條，可以用來包含標準的分享操作。

交互舉動：表現底部動作條的時候，動畫應該從屏幕底部邊緣向上睜開。根據上一步的內容，向用戶展示用戶上一步的操作之后能夠繼承操作的內容，并提供模態(tài)的選擇。點擊其他區(qū)域會使得底部動作條伴隨下滑的動畫關閉掉。假如這個窗口包含的操作超出了默認的表現區(qū)域，這個窗口必要可以滑動。

說明：底部動作條是一種模態(tài)情勢之一。模態(tài)：模態(tài)的對話框必要用戶必須選擇一項操作后才會消散，比如Alert確認等；而非模態(tài)的對話框并不必要用戶必須選擇一項操作才會消散，比如網頁上彈出的Toast提醒。

按鈕

定義：由筆墨和/或圖標組成，按鈕告知用戶按下按鈕后將進行的操作。我們可以把按鈕理解為一個操作的觸發(fā)器。

重要的按鈕有三種:

懸浮相應按鈕(Floating action button)：點擊后會產生墨水擴散結果的圓形按鈕。

懸浮相應按鈕是促進動作里的特別類型。 是一個圓形的漂浮在界面之上的、擁有一系列特別動作的按鈕，這些動作通常和變換、啟動、以及它自己的轉換錨點相干。

浮動按鈕(Raised button)：常見的方形紙片按鈕，和懸浮相應按鈕相反。

非懸浮，固定于一個位置。 點擊后會產生墨水擴散結果。浮動按鈕看起來像一張放在網頁上的紙片，點擊后會浮起來并體現出色彩。

浮動按鈕使按鈕在比較擁擠的界面上更清晰可見。能給大多數扁平的布局帶來條理感。

扁平按鈕(Flat button)：就是把筆墨用作按鈕。

點擊后產生墨水擴散結果，和浮動按鈕的區(qū)別是沒有浮起的結果。盡量避免把他們作為純粹裝飾用的元素。按鈕的設計應當和應用的顏色主題保持同等。

扁平按鈕一樣平常用在警告框中，保舉居右對齊。一樣平常右邊放操作性的按鈕，左邊放取消按鈕。假如用在卡片中，扁平按鈕一樣平常居左對齊，以增長按鈕的曝光。不過，卡片有許多種不同的樣式，設計師可以根據內容和上下文來安排扁平按鈕的位置。只要保證在統(tǒng)一個產品中，卡片內的扁平按鈕的位置同一就可以了。

按鈕使用規(guī)則：按鈕類型應該基于主按鈕、屏幕上容器的數量以及團體布局來進行選擇。

• 假如是特別很是緊張而且應用廣泛必要用上懸浮相應按鈕。
• 基于放置按鈕的容器以及屏幕上條理堆疊的數量來選擇使用浮動按鈕照舊扁平按鈕，避免過多的層疊。
• 一個容器應該只使用一種類型的按鈕。 只在比較特別的情況下（比如必要強調一個浮起的結果）才應該混合使用多種類型的按鈕。

卡片

定義：是包含一組特定數據集的紙片，數據集含有各種相干信息，例如，關于單一主題的照片，文本，和鏈接?？ㄆǔＪ峭ㄍ氈聫碗s信息的入口。卡片有固定的寬度和可變的高度。最大高度限定于可適應平臺上單一視圖的內容，但假如必要它可以一時擴展（例如，表現評論欄）。類似分組的薈萃。

用途：卡片是用來表現由不同種類對象組成的內容的便捷途徑。它們也適用于展示尺寸或操作相稱不同的相似對象，像帶有不同長度題目的照片。

表現這些內容時使用卡片布局：

• 作為一個薈萃，由多種數據類型組成（例如，卡片集包含照片，電影，文本，圖像）。
• 包含可變長度內容，例如評論。
• 由富內容或互動操作組成，例如+1按鈕，滑塊，或評論。
• 假如使用列表必要表現超過三行文本。
• 假如使用網格列表必要表現更多文原本增補圖像。

紙片

定義：Chips(我們臨時叫他紙片視圖)是一種小塊的用來呈現復雜實體的塊，比如說日歷的事件或聯系人。它可以包含一張圖片，一個短字符串(需要時可能被截取的字符串)，或者是其它的一些與實體對象有關的簡潔的信息。Chips可以特別很是方便的通過托拽來操作。通過按壓動作可以觸發(fā)懸浮卡片(或者是全屏視圖)中的Chip對應實體的視圖，或者是彈出與Chip實體相干的操作菜單。

聯系人的紙片視圖用于呈現聯系人的信息。當用戶在輸入框(收件人一欄)中輸入一個聯系人的名字時，聯系人紙片視圖就會被觸發(fā)，用于展示聯系人的地址以供用戶進行選擇。而且聯系人的紙片可以被直接添加到收件人一欄中去。

聯系人的紙片視圖重要用于幫助用戶高效的選擇精確的收件人。

提醒框

定義：用于提醒用戶作一些決定，或者是完成某個義務時必要的一些其它額外的信息。 提醒框可以是用一種 取消/確定 的簡單應答模式，也可以是自定義布局的復雜模式，比如說一些文本設置或者是文本輸入 。

用途：提醒框最典型的應用場景是提醒用戶去做一個些被安排好的決定 ，而這些決定可能是當前義務的一部分或者是前至條件。 提醒框可以用于告知用戶詳細的題目以便他們作用緊張的決定(起到一個確認作用)，或者是用于詮釋接下來的動作的緊張性及后果(起到一個警示作用)。

提醒框的內容是轉變多樣的。但是通常情況下由文本 和(或) 其它UI元素組成的，并且重要是用于聚焦于某個義務或者是某個步驟。

MD規(guī)范把警告框分成兩種：有題目的和沒有題目的。

題目：重要是用于簡單描述下選擇類型。它是可選的。

內容：重要是描述要作出一個什么樣的決定 。

事件：重要是許可用戶通過確認一個詳細操作來繼承下一步活動。

交互舉動：觸摸提醒框表面的區(qū)域可以關閉提醒框。

分割線

定義：重要用于管理和分隔列表和網頁布局內的內容，以便讓內容生成更好的視覺結果及空間感。示例中呈現的分隔線是一種弱規(guī)則，弱到不會去打攪到用戶對內容的關注。

當在列表中沒有像頭像或者是圖標之類的元素時，單靠空格并不足以用于區(qū)分每個數據項。這種情況下使用一個等屏寬(full-bleed)的分隔線就會幫助區(qū)別開每個數據項目，使其它看起來更自力和更有韻味。

分割線的類型：

等屏寬分隔線：等屏寬分隔線或以用于分隔列表中的每個數據項或者是網頁布局中的不同類型的內容。

內凹分隔線：在有頭像或者是圖標元素，并且有關鍵字的題目列中，我們可以使用內凹分隔線。

子題目和分隔線：在使用分隔的子題目時，可以將分隔線置于子題目之上，可以增強子題目與內容關聯度。

網格

定義：網格是一種標準列表視圖的可選組件。

用法：網格列表最適合用于同類數據（homogeneous data type），典型的如圖片，并且對可視化理解（visual comprehension ）和相似數據類型的區(qū)別進行了優(yōu)化。

假如卡片中的文本必要與其他重要內容有著充足明顯的區(qū)別，可以考慮使用一個容器，比如列表（Lists）或者卡片（Cards）。如許可以優(yōu)化文本表現、加強閱讀理解的便利性；列表，加強閱讀理解的便利性，尤其是在比較一組具有多種數據類型的數據時；卡片，用于不同格式的內容，比如帶有不同長度題目的圖片;用于不同類內容的數據薈萃中，比如具有圖片、視頻和圖書的混合式數據集。

列表

定義：列表作為一個單一的延續(xù)元素來以垂直排列的體例表現多行條款。

列表最適合應用于表現同類的數據類型或者數據類型組（homogeneous data type or sets of data types），比如圖片和文本，目標是區(qū)分多個數據類型數據或單一類型的數據特征，使得理解起來更加簡單。

假如有超過三行的文本必要在列表中表現，換用卡片（cards）代替。

假如內容的重要區(qū)別來源于圖片，換用網格列表（grid list）。

交互舉動：

• 滾動（列表只支持垂直滾動）。
• 在列表中，每個列表的滑動（swipe）動作應當是同等的。
• 在操作精確時，可以被選中并且在列表中可以手動改變順序。
• 列表可以通過數據、文件大小、字母順序或者其它參數來編程改變其順序或者實現過濾。

列表控制

定義：對列表進行操作控制的組件。

列表控制分為如下兩種:

• 狀況/主操作(包括文本字符串)。
• 次要操作/信息。

狀況和主操作放在題目列表的左邊。在這里，列表里面的文本內容也被認為是主操作的操作目標的一部分。

次要操作以及信息應該放在題目的右邊，次要操作通常要和重要操作分開單獨可點擊，由于越來越多的用戶盼望每個圖標都能觸發(fā)一個動作。

列表控制的類型：

復選框(Checkbox)：既可以被定義成是主操作也可以是次要操作。

• 類型：狀況/主操作；次要操作/信息。
• 單獨可點擊。

開關

• 類型：次要操作/信息。
• 單獨可點擊。

重新排序

• 類型：次要動作
• 通常都是單獨可點擊，視當前列表所處的模式而定。
• 該動作許可用戶給列表中項通過拖動變換位置。通常，這個按鈕出如今列表編輯的模式下。

睜開/折疊

• 類型：次要動作。
• 單獨可點擊。
• 垂直睜開或者折疊列表來表現或者隱蔽當前列表。

Leave Behinds

• 類型: 其他。
• Leave-behind 是在當某一項列表被滑開之后的操作提醒。Leave-behind可以被轉換成一項操作。
• 無論從哪個方向滑動列表，都會出現操作圖標?；瑒恿酥螅僮鲌D標就會居中表現于列表空白處。

查看更多

• 類型: 重要操作（連偕行內其他內容）。
• 非單獨可點擊。
• 點擊之后跳轉到與當前列表相干細致信息的網頁，通常這都是一個新的網頁或者面板。

選中

• 類型: 狀況。
• 非單獨可點擊。
• 僅適用于菜單。用來透露表現當前列表是否通過不同的操作之后被選中。

菜單

用法：菜單是一時的一張紙（paper），由按鈕（button）、動作（action）、點（pointer）或者包含至少兩個菜單項的其他控件觸發(fā)。

每一個菜單項是一個離散的選項或者動作，并且能夠影響到應用、視圖或者視圖中選中的按鈕。

觸發(fā)按鈕或者控件的標簽（label）可以簡明正確的反映出菜單中包含的菜單項。菜單欄通常使用一個單詞作為標簽，像“文件”、“格式”、“編輯”和“視圖”，然后其他內容或許有更冗長的標簽。

菜單表現一組同等的菜單項，每個菜單項可以基于應用的當前狀況來使能。

交互舉動：菜單出如今所有的應用內部的UI元素之上。通過點擊菜單以外的部分或者點擊觸發(fā)按鈕，可以讓菜單消散。通常，選中一個菜單項后菜單也會消散。一個特例是當菜單許可多選時，比如使用復選標記。

說明：將動作菜單項表現為禁用狀況，而不是移除它們，如許可以讓用戶知道在精確條件下它們是存在的。比如，當沒有重做義務時禁用重做（Redo）動作。當內容被選中后，剪切（Cut）和復制（Copy）動作可用。

進度和動態(tài)

定義：在刷新加載或者提交內容時，必要一個時間過度，在做這個過程中必要一個進度和動態(tài)的設計。

盡可能地削減視覺上的轉變，盡量使應用加載過程令人興奮。每次操作只能由一個活動指示器呈現，例如，對于刷新操作，不能即用刷新條，又用動態(tài)圓圈來指示。

指示器的類型有兩種：線形進度指示器和圓形進度指示器?？梢允褂闷渲腥魏我豁梺碇甘敬_定性和不確定性的操作。

在操作中，對于完成部分不確定的情況下，用戶必要等待肯定的時間，無需告知后用戶臺的情況以及所需時間，這時可以使用不確定的指示器。

線形進度條：應該放置在頁眉或某塊區(qū)域的邊緣。線形進度指示器應始終從0％到100％表現，絕不能從高到低反著來。假如一個隊列里有多個正在進行的操作，使用一個進度指示器來指示團體的所必要等待的時間。

圓形進度指示器：

滑塊

定義：滑塊控件(Sliders，簡稱滑塊)可以讓我們通過在延續(xù)或間斷的區(qū)間內滑動錨點來選擇一個合適的數值。區(qū)間最小值放在左邊，對應的，最大值放在右邊?；瑝K(Sliders)可以在滑動條的左右兩端設定圖標來反映數值的強度。這種交互特征使得它在設置諸如音量、亮度、色彩飽和度等必要反映強度等級的選項時成為一種極好的選擇。

延續(xù)滑塊(Continuous Slider)：在不要求精準、以主觀感覺為主的設置中使用延續(xù)滑塊，讓使用者做出更故意義的調整。

帶有可編輯數值的滑塊：用于使用者必要設定正確數值的設置項，可以通過點觸縮略圖、文本框來進行編輯。

間續(xù)滑塊(Discrete Slider)：間續(xù)滑塊會正好咬合到在滑動條上平均分布的間續(xù)標記(tick mark)上。在要求精準、以客觀設定為主的設置項中使用間續(xù)滑塊，讓使用者做出更故意義的調整。應當對每個間續(xù)標記(tick mark)設定肯定的等級區(qū)間進行分割，使得其調整結果對于使用者來說顯而易見。這些生成區(qū)間的值應當是預先設定好的，使用者不可對其進行編輯。

附帶數值標簽的滑塊：用于使用者必要知曉正確數值的設置項。

Snackbar 與 Toast

定義：Snackbar 是一種針對操作的輕量級反饋機制，常以一個小的彈出框的情勢，出如今手機屏幕下方或者桌面左下方。它們出如今屏幕所有層的最上方，包括浮動操作按鈕。

它們會在超時或者用戶在屏幕其他地方觸摸之后主動消散。Snackbar 可以在屏幕上滑動關閉。當它們出現時，不會阻礙用戶在屏幕上的輸入，并且也不支持輸入。屏幕上同時最多只能實際一個 Snackbar。

Android 也提供了一種重要用于提醒體系新聞的膠囊狀的提醒框 Toast。Toast 同 Snackbar 特別很是相似，但是 Toast 并不包含操作也不能從屏幕上滑動關閉，文本內容左對齊。

用法

短文本：通常 Snackbar 的高度應該僅僅用于容納所有的文本，而文本應該與實行的操作相干。Snackbar 中不能包含圖標，操作只能以文本的情勢存在。

臨時性：為了保證可用性，Snackbar 不應該成為通往核心操作的唯一體例。作為在所有層的上方，Snackbar 不應該持續(xù)存在或相互堆疊。

最多0-1個操作，不包含取消按鈕：當一個動作發(fā)生的時候，應當吻合提醒框和可用性規(guī)則。當有2個或者2個以上的操作出現時，應該使用提醒框而不是 Snackbar，即使其中的一個是取消操作。假如 Snackbar 中提醒的操作緊張到必要打斷屏幕上正在進行的操作，那么理當使用提醒框而非 Snackbar。

副題目

定義：副題目是特別的列表區(qū)塊，它描繪出一個列表或是網格的不同部分，通常與當前的篩選條件或排序條件相干。

副題目可以內聯展示在區(qū)塊里，也可以關聯到內容里，例如，關聯在相鄰的分組列表里。

在滾動的過程中，副題目一向固定在屏幕的頂部，除非屏幕切換或被其他副題目替代。

為了進步分組內容的視覺結果，可以用體系顏色來表現副題目。

開關

定義：開關許可用戶選擇選擇項。一共有三種類型的開關：復選框、單選按鈕和 on/off 開關。

解釋：下面示例中所示的圖形環(huán)代表一個動畫，并不是現實按鈕的表面。

復選框：許可用戶從一組選項中選擇多個。

假如必要在一個列表中出現多個 on/off 選項，復選框是一種節(jié)省空間的好體例。

假如只有一個 on/off 選擇，不要使用復選框，而應該替代成 on/off 開關。

復選框通過動畫來表達按壓和按下的狀況。

單選按鈕：只許可用戶從一組選項中選擇一個。

單選按鈕通過動畫來表達聚焦和按下的狀況。

開關：On/off 開關切換單一設置選擇的狀況。開關控制的選項以及它的狀況，應該明確的展示出來并且與內部的標簽相同等。開關應該單選按鈕呈現雷同的視覺特征。

開關通過動畫來傳達被聚焦和被按下的狀況。開關滑塊上標明 “on” 和 “off” 的做法被棄用，取而代之的是下圖所示的開關。

Tabs

定義：在一個 app 中，tabs 使在不同的視圖和功能間探索和切換以及欣賞不同類別的數據薈萃起來變得簡單。

用法：tab 用來表現有關聯的分組內容。tab標簽用來簡要的描述內容。

使用規(guī)則：

• Tabs 也不是用于內容切換或是內容分頁的（例如：應用中網頁之間的切換）。
• Tabs 應該表現在一行內。
• 一組 tabs 至少包含 2 個 tab 并且不多于 6 個 tab。
• Tabs 控制的表現內容的定位要同等，為并列關系。
• Tab 中當前可見內容要高亮表現。
• Tabs 應該歸類并且每組 tabs 中內容順序相連。

文本框

文本框可以讓用戶輸入文本。它們可以是單行的，帶或不帶滾動條，也可以是多行的，并且?guī)в幸粋€圖標。點擊文本框后表現光標，并主動表現鍵盤。除了輸入，文本框可以進行其他義務操作，如文本選擇（剪切，復制，粘貼）以及數據的主動查找功能。

文本框可以有不同的輸入類型。輸入類型決定文本框內許可輸入什么樣的字符，有的可能會提醒假造鍵盤并調整其布局來表現最常用的字符。常見的類型包括數字，文本，電子郵件地址，電話號碼，小我姓名，用戶名，URL，街道地址，名譽卡號碼，PIN碼，以及搜索查詢。

單行文本框：當文本輸入光標到達輸入區(qū)域的最右邊，單行文本框中的內容會主動滾動到左邊。

帶有滾動條的單行文本框：當單行文本框的輸入內容很長并需跨越多行的時候，則文本框應該以滾動情勢容納文本

在滾動文本框中，一個圖形化的標志出如今標線的下面。點擊省略號，光標返回到字符的開頭。

多行文本框：當光標到達最下緣，多行文本框會主動讓溢出的的筆墨斷開并形成新的行，使文本可以換行和垂直滾動。

工具提醒

用法：對同時知足以下條件的元素使用工具提醒，具有交互性；重要是圖形而非文本。

后記：

iOS和Material Design組件都已經講完了，接下來的幾篇文章都會按照組件控件的功能屬性，詳解設計規(guī)范之組件控件系統(tǒng)。

迎接關注作者的微信公眾號：「UEDC」