Echo ：iOS 或 Material Design 的設計指南，都是按照組件的屬性來系統介紹。一般把Control翻譯成控件，把Component翻譯成組件。通俗的解釋說法就是組件為多個元素組合而成，控件為單一元素。但是 Material Design 把我所認為的控件和組件都合為一體，統稱為組件。
先看一張Material Design所有組件的思維導圖：
底部動作條
定義：一個從屏幕底部邊緣向上滑出的一個面板，使用這種方式向用戶呈現一組功能。
使用規則：底部動作條(Bottom Sheets)提供三個或三個以上的操作需要提供給用戶選擇、並且不需要對操作有額外解釋的情景。如果只有兩個或者更少的操作，或者需要詳加描述的，可以考慮使用菜單(Menu)或者提示框替代。底部動作條可以是列表樣式的也可以是宮格樣式。
底部動作條的內容：在一個標準的列表樣式的底部動作條(Bottom Sheets)中，每一個操作應該有一句描述和一個左對齊的icon。如果需要的話，也可以使用分隔符對這些操作進行邏輯分組，也可以為分組添加標題或者副標題。一個可以滾動的宮格樣式的底部動作條，可以用來包含標準的分享操作。
交互行為：顯示底部動作條的時候，動畫應該從屏幕底部邊緣向上展開。根據上一步的內容，向用戶展示用戶上一步的操作之後能夠繼續操作的內容，並提供模態的選擇。點擊其他區域會使得底部動作條伴隨下滑的動畫關閉掉。如果這個窗口包含的操作超出了默認的顯示區域，這個窗口需要可以滑動。
說明：底部動作條是一種模態形式之一。模態：模態的對話框需要用戶必須選擇一項操作後才會消失，比如Alert確認等；而非模態的對話框並不需要用戶必須選擇一項操作才會消失，比如頁面上彈出的Toast提示。
按鈕
定義：由文字和/或圖標組成，按鈕告知用戶按下按鈕後將進行的操作。我們可以把按鈕理解為一個操作的觸發器。
主要的按鈕有三種:
懸浮響應按鈕(Floating action button)：點擊後會產生墨水擴散效果的圓形按鈕。
懸浮響應按鈕是促進動作裏的特殊類型。 是一個圓形的漂浮在界面之上的、擁有一系列特殊動作的按鈕，這些動作通常和變換、啟動、以及它本身的轉換錨點相關。
浮動按鈕(Raised button)：常見的方形紙片按鈕，和懸浮響應按鈕相反。
非懸浮，固定於一個位置。 點擊後會產生墨水擴散效果。浮動按鈕看起來像一張放在頁面上的紙片，點擊後會浮起來並表現出色彩。
浮動按鈕使按鈕在比較擁擠的界面上更清晰可見。能給大多數扁平的布局帶來層次感。
扁平按鈕(Flat button)：就是把文字用作按鈕。
點擊後產生墨水擴散效果，和浮動按鈕的區別是沒有浮起的效果。盡量避免把他們作為純粹裝飾用的元素。按鈕的設計應當和應用的顏色主題保持一致。
扁平按鈕一般用在警告框中，推薦居右對齊。一般右邊放操作性的按鈕，左邊放取消按鈕。如果用在卡片中，扁平按鈕一般居左對齊，以增加按鈕的曝光。不過，卡片有很多種不同的樣式，設計師可以根據內容和上下文來安排扁平按鈕的位置。只要保證在同一個產品中，卡片內的扁平按鈕的位置統一就可以了。
按鈕使用規則：按鈕類型應該基於主按鈕、屏幕上容器的數量以及整體布局來進行選擇。
- 如果是非常重要而且應用廣泛需要用上懸浮響應按鈕。
- 基於放置按鈕的容器以及屏幕上層次堆疊的數量來選擇使用浮動按鈕還是扁平按鈕，避免過多的層疊。
- 一個容器應該只使用一種類型的按鈕。 只在比較特殊的情況下（比如需要強調一個浮起的效果）才應該混合使用多種類型的按鈕。
卡片
定義：是包含一組特定數據集的紙片，數據集含有各種相關信息，例如，關於單一主題的照片，文本，和鏈接。卡片通常是通往更詳細復雜信息的入口。卡片有固定的寬度和可變的高度。最大高度限制於可適應平臺上單一視圖的內容，但如果需要它可以臨時擴展（例如，顯示評論欄）。類似分組的集合。
用途：卡片是用來顯示由不同種類對象組成的內容的便捷途徑。它們也適用於展示尺寸或操作相當不同的相似對象，像帶有不同長度標題的照片。
顯示這些內容時使用卡片布局：
- 作為一個集合，由多種數據類型組成（例如，卡片集包含照片，電影，文本，圖像）。
- 包含可變長度內容，例如評論。
- 由富內容或互動操作組成，例如+1按鈕，滑塊，或評論。
- 如果使用列表需要顯示超過三行文本。
- 如果使用網格列表需要顯示更多文本來補充圖像。
紙片
定義：Chips(我們暫時叫他紙片視圖)是一種小塊的用來呈現復雜實體的塊，比如說日歷的事件或聯系人。它可以包含一張圖片，一個短字符串(必要時可能被截取的字符串)，或者是其它的一些與實體對象有關的簡潔的信息。Chips可以非常方便的通過托拽來操作。通過按壓動作可以觸發懸浮卡片(或者是全屏視圖)中的Chip對應實體的視圖，或者是彈出與Chip實體相關的操作菜單。
聯系人的紙片視圖用於呈現聯系人的信息。當用戶在輸入框(收件人一欄)中輸入一個聯系人的名字時，聯系人紙片視圖就會被觸發，用於展示聯系人的地址以供用戶進行選擇。而且聯系人的紙片可以被直接添加到收件人一欄中去。
聯系人的紙片視圖主要用於幫助用戶高效的選擇正確的收件人。
提示框
定義：用於提示用戶作一些決定，或者是完成某個任務時需要的一些其它額外的信息。 提示框可以是用一種 取消/確定 的簡單應答模式，也可以是自定義布局的復雜模式，比如說一些文本設置或者是文本輸入 。
用途：提示框最典型的應用場景是提示用戶去做一個些被安排好的決定 ，而這些決定可能是當前任務的一部分或者是前至條件。 提示框可以用於告知用戶具體的問題以便他們作用重要的決定(起到一個確認作用)，或者是用於解釋接下來的動作的重要性及後果(起到一個警示作用)。
提示框的內容是變化多樣的。但是通常情況下由文本 和(或) 其它UI元素組成的，並且主要是用於聚焦於某個任務或者是某個步驟。
MD規範把警告框分成兩種：有標題的和沒有標題的。
標題：主要是用於簡單描述下選擇類型。它是可選的。
內容：主要是描述要作出一個什麽樣的決定 。
事件：主要是允許用戶通過確認一個具體操作來繼續下一步活動。
交互行為：觸摸提示框外面的區域可以關閉提示框。
分割線
定義：主要用於管理和分隔列表和頁面布局內的內容，以便讓內容生成更好的視覺效果及空間感。示例中呈現的分隔線是一種弱規則，弱到不會去打擾到用戶對內容的關註。
當在列表中沒有像頭像或者是圖標之類的元素時，單靠空格並不足以用於區分每個數據項。這種情況下使用一個等屏寬(full-bleed)的分隔線就會幫助區別開每個數據項目，使其它看起來更獨立和更有韻味。
分割線的類型：
等屏寬分隔線：等屏寬分隔線或以用於分隔列表中的每個數據項或者是頁面布局中的不同類型的內容。
內凹分隔線：在有頭像或者是圖標元素，並且有關鍵字的標題列中，我們可以使用內凹分隔線。
子標題和分隔線：在使用分隔的子標題時，可以將分隔線置於子標題之上，可以加強子標題與內容關聯度。
網格
定義：網格是一種標準列表視圖的可選組件。
用法：網格列表最適合用於同類數據（homogeneous data type），典型的如圖片，並且對可視化理解（visual comprehension ）和相似數據類型的區別進行了優化。
如果卡片中的文本需要與其他主要內容有著足夠顯著的區別，可以考慮使用一個容器，比如列表（Lists）或者卡片（Cards）。這樣可以優化文本顯示、增強閱讀理解的便利性；列表，增強閱讀理解的便利性，尤其是在比較一組具有多種數據類型的數據時；卡片，用於不同格式的內容，比如帶有不同長度標題的圖片;用於不同類內容的數據集合中，比如具有圖片、視頻和圖書的混合式數據集。
列表
定義：列表作為一個單一的連續元素來以垂直排列的方式顯示多行條目。
列表最適合應用於顯示同類的數據類型或者數據類型組（homogeneous data type or sets of data types），比如圖片和文本，目標是區分多個數據類型數據或單一類型的數據特性，使得理解起來更加簡單。
如果有超過三行的文本需要在列表中顯示，換用卡片（cards）代替。
如果內容的主要區別來源於圖片，換用網格列表（grid list）。
交互行為：
- 滾動（列表只支持垂直滾動）。
- 在列表中，每個列表的滑動（swipe）動作應當是一致的。
- 在操作正確時，可以被選中並且在列表中可以手動改變順序。
- 列表可以通過數據、文件大小、字母順序或者其它參數來編程改變其順序或者實現過濾。
列表控制
定義：對列表進行操作控制的組件。
列表控制分為如下兩種:
- 狀態/主操作(包括文本字符串)。
- 次要操作/信息。
狀態和主操作放在標題列表的左邊。在這裏，列表裏面的文本內容也被認為是主操作的操作目標的一部分。
次要操作以及信息應該放在標題的右邊，次要操作通常要和主要操作分開單獨可點擊，因為越來越多的用戶希望每個圖標都能觸發一個動作。
列表控制的類型：
復選框(Checkbox)：既可以被定義成是主操作也可以是次要操作。
- 類型 ： 狀態/主操作；次要操作/信息。
- 單獨可點擊。
開關
- 類型：次要操作/信息。
- 單獨可點擊。
重新排序
- 類型：次要動作
- 通常都是單獨可點擊，視當前列表所處的模式而定。
- 該動作允許用戶給列表中項通過拖動變換位置。通常，這個按鈕出現在列表編輯的模式下。
展開/折疊
- 類型：次要動作。
- 單獨可點擊。
- 垂直展開或者折疊列表來顯示或者隱藏當前列表。
Leave Behinds
- 類型: 其他。
- Leave-behind 是在當某一項列表被滑開之後的操作提示。Leave-behind可以被轉換成一項操作。
- 無論從哪個方向滑動列表，都會出現操作圖標。滑動了之後，操作圖標就會居中顯示於列表空白處。
查看更多
- 類型: 主要操作（連同行內其他內容）。
- 非單獨可點擊。
- 點擊之後跳轉到與當前列表相關詳細信息的頁面，通常這都是一個新的頁面或者面板。
選中
- 類型: 狀態。
- 非單獨可點擊。
- 僅適用於菜單。用來表示當前列表是否通過不同的操作之後被選中。
菜單
用法：菜單是臨時的一張紙（paper），由按鈕（button）、動作（action）、點（pointer）或者包含至少兩個菜單項的其他控件觸發。
每一個菜單項是一個離散的選項或者動作，並且能夠影響到應用、視圖或者視圖中選中的按鈕。
觸發按鈕或者控件的標簽（label）可以簡明準確的反映出菜單中包含的菜單項。菜單欄通常使用一個單詞作為標簽，像“文件”、“格式”、“編輯”和“視圖”，然後其他內容或許有更冗長的標簽。
菜單顯示一組一致的菜單項，每個菜單項可以基於應用的當前狀態來使能。
交互行為：菜單出現在所有的應用內部的UI元素之上。通過點擊菜單以外的部分或者點擊觸發按鈕，可以讓菜單消失。通常，選中一個菜單項後菜單也會消失。一個特例是當菜單允許多選時，比如使用復選標記。
說明：將動作菜單項顯示為禁用狀態，而不是移除它們，這樣可以讓用戶知道在正確條件下它們是存在的。比如，當沒有重做任務時禁用重做（Redo）動作。當內容被選中後，剪切（Cut）和復制（Copy）動作可用。
進度和動態
定義：在刷新加載或者提交內容時，需要一個時間過度，在做這個過程中需要一個進度和動態的設計。
盡可能地減少視覺上的變化，盡量使應用加載過程令人愉快。每次操作只能由一個活動指示器呈現，例如，對於刷新操作，不能即用刷新條，又用動態圓圈來指示。
指示器的類型有兩種：線形進度指示器和圓形進度指示器。可以使用其中任何一項來指示確定性和不確定性的操作。
在操作中，對於完成部分不確定的情況下，用戶需要等待一定的時間，無需告知後用戶臺的情況以及所需時間，這時可以使用不確定的指示器。
線形進度條：應該放置在頁眉或某塊區域的邊緣。線形進度指示器應始終從0％到100％顯示，絕不能從高到低反著來。如果一個隊列裏有多個正在進行的操作，使用一個進度指示器來指示整體的所需要等待的時間。
圓形進度指示器：
滑塊
定義：滑塊控件(Sliders，簡稱滑塊)可以讓我們通過在連續或間斷的區間內滑動錨點來選擇一個合適的數值。區間最小值放在左邊，對應的，最大值放在右邊。滑塊(Sliders)可以在滑動條的左右兩端設定圖標來反映數值的強度。這種交互特性使得它在設置諸如音量、亮度、色彩飽和度等需要反映強度等級的選項時成為一種極好的選擇。
連續滑塊(Continuous Slider)：在不要求精準、以主觀感覺為主的設置中使用連續滑塊，讓使用者做出更有意義的調整。
帶有可編輯數值的滑塊：用於使用者需要設定精確數值的設置項，可以通過點觸縮略圖、文本框來進行編輯。
間續滑塊(Discrete Slider)：間續滑塊會恰好咬合到在滑動條上平均分布的間續標記(tick mark)上。在要求精準、以客觀設定為主的設置項中使用間續滑塊，讓使用者做出更有意義的調整。應當對每個間續標記(tick mark)設定一定的等級區間進行分割，使得其調整效果對於使用者來說顯而易見。這些生成區間的值應當是預先設定好的，使用者不可對其進行編輯。
附帶數值標簽的滑塊：用於使用者需要知曉精確數值的設置項。
Snackbar 與 Toast
定義：Snackbar 是一種針對操作的輕量級反饋機制，常以一個小的彈出框的形式，出現在手機屏幕下方或者桌面左下方。它們出現在屏幕所有層的最上方，包括浮動操作按鈕。
它們會在超時或者用戶在屏幕其他地方觸摸之後自動消失。Snackbar 可以在屏幕上滑動關閉。當它們出現時，不會阻礙用戶在屏幕上的輸入，並且也不支持輸入。屏幕上同時最多只能現實一個 Snackbar。
android 也提供了一種主要用於提示系統消息的膠囊狀的提示框 Toast。Toast 同 Snackbar 非常相似，但是 Toast 並不包含操作也不能從屏幕上滑動關閉，文本內容左對齊。
用法
短文本：通常 Snackbar 的高度應該僅僅用於容納所有的文本，而文本應該與執行的操作相關。Snackbar 中不能包含圖標，操作只能以文本的形式存在。
暫時性：為了保證可用性，Snackbar 不應該成為通往核心操作的唯一方式。作為在所有層的上方，Snackbar 不應該持續存在或相互堆疊。
最多0-1個操作，不包含取消按鈕：當一個動作發生的時候，應當符合提示框和可用性規則。當有2個或者2個以上的操作出現時，應該使用提示框而不是 Snackbar，即使其中的一個是取消操作。如果 Snackbar 中提示的操作重要到需要打斷屏幕上正在進行的操作，那麽理當使用提示框而非 Snackbar。
副標題
定義：副標題是特殊的列表區塊，它描繪出一個列表或是網格的不同部分，通常與當前的篩選條件或排序條件相關。
副標題可以內聯展示在區塊裏，也可以關聯到內容裏，例如，關聯在相鄰的分組列表裏。
在滾動的過程中，副標題一直固定在屏幕的頂部，除非屏幕切換或被其他副標題替換。
為了提高分組內容的視覺效果，可以用系統顏色來顯示副標題。
開關
定義：開關允許用戶選擇選擇項。一共有三種類型的開關：復選框、單選按鈕和 on/off 開關。
註釋：下面示例中所示的圖形環代表一個動畫，並不是實際按鈕的外觀。
復選框：允許用戶從一組選項中選擇多個。
如果需要在一個列表中出現多個 on/off 選項，復選框是一種節省空間的好方式。
如果只有一個 on/off 選擇，不要使用復選框，而應該替換成 on/off 開關。
復選框通過動畫來表達按壓和按下的狀態。
單選按鈕：只允許用戶從一組選項中選擇一個。
單選按鈕通過動畫來表達聚焦和按下的狀態。
開關：On/off 開關切換單一設置選擇的狀態。開關控制的選項以及它的狀態，應該明確的展示出來並且與內部的標簽相一致。開關應該單選按鈕呈現相同的視覺特性。
開關通過動畫來傳達被聚焦和被按下的狀態。開關滑塊上標明 “on” 和 “off” 的做法被棄用，取而代之的是下圖所示的開關。
Tabs
定義：在一個 app 中，tabs 使在不同的視圖和功能間探索和切換以及瀏覽不同類別的數據集合起來變得簡單。
用法：tab 用來顯示有關聯的分組內容。tab標簽用來簡要的描述內容。
使用規則：
- Tabs 也不是用於內容切換或是內容分頁的（例如：應用中頁面之間的切換）。
- Tabs 應該顯示在一行內。
- 一組 tabs 至少包含 2 個 tab 並且不多於 6 個 tab。
- Tabs 控制的顯示內容的定位要一致，為並列關系。
- Tab 中當前可見內容要高亮顯示。
- Tabs 應該歸類並且每組 tabs 中內容順序相連。
文本框
文本框可以讓用戶輸入文本。它們可以是單行的，帶或不帶滾動條，也可以是多行的，並且帶有一個圖標。點擊文本框後顯示光標，並自動顯示鍵盤。除了輸入，文本框可以進行其他任務操作，如文本選擇（剪切，復制，粘貼）以及數據的自動查找功能。
文本框可以有不同的輸入類型。輸入類型決定文本框內允許輸入什麽樣的字符，有的可能會提示虛擬鍵盤並調整其布局來顯示最常用的字符。常見的類型包括數字，文本，電子郵件地址，電話號碼，個人姓名，用戶名，URL，街道地址，信用卡號碼，PIN碼，以及搜索查詢。
單行文本框：當文本輸入光標到達輸入區域的最右邊，單行文本框中的內容會自動滾動到左邊。
帶有滾動條的單行文本框：當單行文本框的輸入內容很長並需跨越多行的時候，則文本框應該以滾動形式容納文本
在滾動文本框中，一個圖形化的標誌出現在標線的下面。點擊省略號，光標返回到字符的開頭。
多行文本框：當光標到達最下緣，多行文本框會自動讓溢出的的文字斷開並形成新的行，使文本可以換行和垂直滾動。
工具提示
用法：對同時滿足以下條件的元素使用工具提示，具有交互性；主要是圖形而非文本。
後記：
iOS和Material Design組件都已經講完了，接下來的幾篇文章都會按照組件控件的功能屬性，詳解 設計規範 之組件控件體系。
歡迎關註作者的微信公眾號： 「UEDC」
「看這幾篇！Material design學習資料就夠了！」
- 《追隨谷歌的設計！MATERIAL DESIGN組件中的學問》
- 《重磅教程！幫你全面徹底搞定MATERIAL DESIGN的學習筆記》
- 《學霸的自學筆記！MATERIAL DESIGN設計規範學習心得》
- 《超贊！谷歌設計師的MATERIAL DESIGN實踐心得》
【優設網 原創文章 投稿郵箱：[email protected]】
================ 明星欄目推薦 ================
優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的 知識樹專欄 。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手並制作出酷炫的視覺效果。
設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com
Tags: 底部 動作 操作 模態 組件 可以
文章來源：