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

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

先看一張Material Design所有組件的思維導(dǎo)圖：

底部動(dòng)作條

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

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

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

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

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

按鈕

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

重要的按鈕有三種:

懸浮相應(yīng)按鈕(Floating action button)：點(diǎn)擊后會(huì)產(chǎn)生墨水?dāng)U散結(jié)果的圓形按鈕。

懸浮相應(yīng)按鈕是促進(jìn)動(dòng)作里的特別類型。 是一個(gè)圓形的漂浮在界面之上的、擁有一系列特別動(dòng)作的按鈕，這些動(dòng)作通常和變換、啟動(dòng)、以及它自己的轉(zhuǎn)換錨點(diǎn)相干。

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

非懸浮，固定于一個(gè)位置。 點(diǎn)擊后會(huì)產(chǎn)生墨水?dāng)U散結(jié)果。浮動(dòng)按鈕看起來像一張放在網(wǎng)頁上的紙片，點(diǎn)擊后會(huì)浮起來并體現(xiàn)出色彩。

浮動(dòng)按鈕使按鈕在比較擁擠的界面上更清晰可見。能給大多數(shù)扁平的布局帶來?xiàng)l理感。

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

點(diǎn)擊后產(chǎn)生墨水?dāng)U散結(jié)果，和浮動(dòng)按鈕的區(qū)別是沒有浮起的結(jié)果。盡量避免把他們作為純粹裝飾用的元素。按鈕的設(shè)計(jì)應(yīng)當(dāng)和應(yīng)用的顏色主題保持同等。

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

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

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

卡片

定義：是包含一組特定數(shù)據(jù)集的紙片，數(shù)據(jù)集含有各種相干信息，例如，關(guān)于單一主題的照片，文本，和鏈接。卡片通常是通往更細(xì)致復(fù)雜信息的入口?？ㄆ泄潭ǖ膶挾群涂勺兊母叨?。最大高度限定于可適應(yīng)平臺(tái)上單一視圖的內(nèi)容，但假如必要它可以一時(shí)擴(kuò)展（例如，表現(xiàn)評(píng)論欄）。類似分組的薈萃。

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

表現(xiàn)這些內(nèi)容時(shí)使用卡片布局：

• 作為一個(gè)薈萃，由多種數(shù)據(jù)類型組成（例如，卡片集包含照片，電影，文本，圖像）。
• 包含可變長(zhǎng)度內(nèi)容，例如評(píng)論。
• 由富內(nèi)容或互動(dòng)操作組成，例如+1按鈕，滑塊，或評(píng)論。
• 假如使用列表必要表現(xiàn)超過三行文本。
• 假如使用網(wǎng)格列表必要表現(xiàn)更多文原本增補(bǔ)圖像。

紙片

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

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

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

提醒框

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

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

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

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

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

內(nèi)容：重要是描述要作出一個(gè)什么樣的決定 。

事件：重要是許可用戶通過確認(rèn)一個(gè)詳細(xì)操作來繼承下一步活動(dòng)。

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

分割線

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

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

分割線的類型：

等屏寬分隔線：等屏寬分隔線或以用于分隔列表中的每個(gè)數(shù)據(jù)項(xiàng)或者是網(wǎng)頁布局中的不同類型的內(nèi)容。

內(nèi)凹分隔線：在有頭像或者是圖標(biāo)元素，并且有關(guān)鍵字的題目列中，我們可以使用內(nèi)凹分隔線。

子題目和分隔線：在使用分隔的子題目時(shí)，可以將分隔線置于子題目之上，可以增強(qiáng)子題目與內(nèi)容關(guān)聯(lián)度。

網(wǎng)格

定義：網(wǎng)格是一種標(biāo)準(zhǔn)列表視圖的可選組件。

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

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

列表

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

列表最適合應(yīng)用于表現(xiàn)同類的數(shù)據(jù)類型或者數(shù)據(jù)類型組（homogeneous data type or sets of data types），比如圖片和文本，目標(biāo)是區(qū)分多個(gè)數(shù)據(jù)類型數(shù)據(jù)或單一類型的數(shù)據(jù)特征，使得理解起來更加簡(jiǎn)單。

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

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

交互舉動(dòng)：

• 滾動(dòng)（列表只支持垂直滾動(dòng)）。
• 在列表中，每個(gè)列表的滑動(dòng)（swipe）動(dòng)作應(yīng)當(dāng)是同等的。
• 在操作精確時(shí)，可以被選中并且在列表中可以手動(dòng)改變順序。
• 列表可以通過數(shù)據(jù)、文件大小、字母順序或者其它參數(shù)來編程改變其順序或者實(shí)現(xiàn)過濾。

列表控制

定義：對(duì)列表進(jìn)行操作控制的組件。

列表控制分為如下兩種:

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

狀況和主操作放在題目列表的左邊。在這里，列表里面的文本內(nèi)容也被認(rèn)為是主操作的操作目標(biāo)的一部分。

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

列表控制的類型：

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

• 類型：狀況/主操作；次要操作/信息。
• 單獨(dú)可點(diǎn)擊。

開關(guān)

• 類型：次要操作/信息。
• 單獨(dú)可點(diǎn)擊。

重新排序

• 類型：次要?jiǎng)幼?/li>
• 通常都是單獨(dú)可點(diǎn)擊，視當(dāng)前列表所處的模式而定。
• 該動(dòng)作許可用戶給列表中項(xiàng)通過拖動(dòng)變換位置。通常，這個(gè)按鈕出如今列表編輯的模式下。

睜開/折疊

• 類型：次要?jiǎng)幼鳌?/li>
• 單獨(dú)可點(diǎn)擊。
• 垂直睜開或者折疊列表來表現(xiàn)或者隱蔽當(dāng)前列表。

Leave Behinds

• 類型: 其他。
• Leave-behind 是在當(dāng)某一項(xiàng)列表被滑開之后的操作提醒。Leave-behind可以被轉(zhuǎn)換成一項(xiàng)操作。
• 無論從哪個(gè)方向滑動(dòng)列表，都會(huì)出現(xiàn)操作圖標(biāo)。滑動(dòng)了之后，操作圖標(biāo)就會(huì)居中表現(xiàn)于列表空白處。

查看更多

• 類型: 重要操作（連偕行內(nèi)其他內(nèi)容）。
• 非單獨(dú)可點(diǎn)擊。
• 點(diǎn)擊之后跳轉(zhuǎn)到與當(dāng)前列表相干細(xì)致信息的網(wǎng)頁，通常這都是一個(gè)新的網(wǎng)頁或者面板。

選中

• 類型: 狀況。
• 非單獨(dú)可點(diǎn)擊。
• 僅適用于菜單。用來透露表現(xiàn)當(dāng)前列表是否通過不同的操作之后被選中。

菜單

用法：菜單是一時(shí)的一張紙（paper），由按鈕（button）、動(dòng)作（action）、點(diǎn)（pointer）或者包含至少兩個(gè)菜單項(xiàng)的其他控件觸發(fā)。

每一個(gè)菜單項(xiàng)是一個(gè)離散的選項(xiàng)或者動(dòng)作，并且能夠影響到應(yīng)用、視圖或者視圖中選中的按鈕。

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

菜單表現(xiàn)一組同等的菜單項(xiàng)，每個(gè)菜單項(xiàng)可以基于應(yīng)用的當(dāng)前狀況來使能。

交互舉動(dòng)：菜單出如今所有的應(yīng)用內(nèi)部的UI元素之上。通過點(diǎn)擊菜單以外的部分或者點(diǎn)擊觸發(fā)按鈕，可以讓菜單消散。通常，選中一個(gè)菜單項(xiàng)后菜單也會(huì)消散。一個(gè)特例是當(dāng)菜單許可多選時(shí)，比如使用復(fù)選標(biāo)記。

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

進(jìn)度和動(dòng)態(tài)

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

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

指示器的類型有兩種：線形進(jìn)度指示器和圓形進(jìn)度指示器。可以使用其中任何一項(xiàng)來指示確定性和不確定性的操作。

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

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

圓形進(jìn)度指示器：

滑塊

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

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

帶有可編輯數(shù)值的滑塊：用于使用者必要設(shè)定正確數(shù)值的設(shè)置項(xiàng)，可以通過點(diǎn)觸縮略圖、文本框來進(jìn)行編輯。

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

附帶數(shù)值標(biāo)簽的滑塊：用于使用者必要知曉正確數(shù)值的設(shè)置項(xiàng)。

Snackbar 與 Toast

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

它們會(huì)在超時(shí)或者用戶在屏幕其他地方觸摸之后主動(dòng)消散。Snackbar 可以在屏幕上滑動(dòng)關(guān)閉。當(dāng)它們出現(xiàn)時(shí)，不會(huì)阻礙用戶在屏幕上的輸入，并且也不支持輸入。屏幕上同時(shí)最多只能實(shí)際一個(gè) Snackbar。

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

用法

短文本：通常 Snackbar 的高度應(yīng)該僅僅用于容納所有的文本，而文本應(yīng)該與實(shí)行的操作相干。Snackbar 中不能包含圖標(biāo)，操作只能以文本的情勢(shì)存在。

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

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

副題目

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

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

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

為了進(jìn)步分組內(nèi)容的視覺結(jié)果，可以用體系顏色來表現(xiàn)副題目。

開關(guān)

定義：開關(guān)許可用戶選擇選擇項(xiàng)。一共有三種類型的開關(guān)：復(fù)選框、單選按鈕和 on/off 開關(guān)。

解釋：下面示例中所示的圖形環(huán)代表一個(gè)動(dòng)畫，并不是現(xiàn)實(shí)按鈕的表面。

復(fù)選框：許可用戶從一組選項(xiàng)中選擇多個(gè)。

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

假如只有一個(gè) on/off 選擇，不要使用復(fù)選框，而應(yīng)該替代成 on/off 開關(guān)。

復(fù)選框通過動(dòng)畫來表達(dá)按壓和按下的狀況。

單選按鈕：只許可用戶從一組選項(xiàng)中選擇一個(gè)。

單選按鈕通過動(dòng)畫來表達(dá)聚焦和按下的狀況。

開關(guān)：On/off 開關(guān)切換單一設(shè)置選擇的狀況。開關(guān)控制的選項(xiàng)以及它的狀況，應(yīng)該明確的展示出來并且與內(nèi)部的標(biāo)簽相同等。開關(guān)應(yīng)該單選按鈕呈現(xiàn)雷同的視覺特征。

開關(guān)通過動(dòng)畫來傳達(dá)被聚焦和被按下的狀況。開關(guān)滑塊上標(biāo)明 “on” 和 “off” 的做法被棄用，取而代之的是下圖所示的開關(guān)。

Tabs

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

用法：tab 用來表現(xiàn)有關(guān)聯(lián)的分組內(nèi)容。tab標(biāo)簽用來簡(jiǎn)要的描述內(nèi)容。

使用規(guī)則：

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

文本框

文本框可以讓用戶輸入文本。它們可以是單行的，帶或不帶滾動(dòng)條，也可以是多行的，并且?guī)в幸粋€(gè)圖標(biāo)。點(diǎn)擊文本框后表現(xiàn)光標(biāo)，并主動(dòng)表現(xiàn)鍵盤。除了輸入，文本框可以進(jìn)行其他義務(wù)操作，如文本選擇（剪切，復(fù)制，粘貼）以及數(shù)據(jù)的主動(dòng)查找功能。

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

單行文本框：當(dāng)文本輸入光標(biāo)到達(dá)輸入?yún)^(qū)域的最右邊，單行文本框中的內(nèi)容會(huì)主動(dòng)滾動(dòng)到左邊。

帶有滾動(dòng)條的單行文本框：當(dāng)單行文本框的輸入內(nèi)容很長(zhǎng)并需跨越多行的時(shí)候，則文本框應(yīng)該以滾動(dòng)情勢(shì)容納文本

在滾動(dòng)文本框中，一個(gè)圖形化的標(biāo)志出如今標(biāo)線的下面。點(diǎn)擊省略號(hào)，光標(biāo)返回到字符的開頭。

多行文本框：當(dāng)光標(biāo)到達(dá)最下緣，多行文本框會(huì)主動(dòng)讓溢出的的筆墨斷開并形成新的行，使文本可以換行和垂直滾動(dòng)。

工具提醒

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

后記：

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

迎接關(guān)注作者的微信公眾號(hào)：「UEDC」