国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

底部動作條

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

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

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

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

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

按鈕

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

主要的按鈕有三種:

懸浮響應按鈕(Floating action button)， 點擊后會產(chǎn)生墨水擴散效果的圓形按鈕。

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

浮動按鈕(Raised button)，常見的方形紙片按鈕，和懸浮響應按鈕相反。非懸浮，固定于一個位置。 點擊后會產(chǎn)生墨水擴散效果。浮動按鈕看起來像一張放在頁面上的紙片，點擊后會浮起來并表現(xiàn)出色彩。

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

扁平按鈕(Flat button)， 就是把文字用作按鈕。點擊后產(chǎn)生墨水擴散效果，和浮動按鈕的區(qū)別是沒有浮起的效果。盡量避免把他們作為純粹裝飾用的元素。按鈕的設計應當和應用的顏色主題保持一致。

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

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

1. 如果是非常重要而且應用廣泛需要用上懸浮響應按鈕。
2. 基于放置按鈕的容器以及屏幕上層次堆疊的數(shù)量來選擇使用浮動按鈕還是扁平按鈕，避免過多的層疊。
3. 一個容器應該只使用一種類型的按鈕。 只在比較特殊的情況下（比如需要強調一個浮起的效果）才應該混合使用多種類型的按鈕。

卡片

定義：是包含一組特定數(shù)據(jù)集的紙片，數(shù)據(jù)集含有各種相關信息，例如，關于單一主題的照片，文本，和鏈接?？ㄆǔＪ峭ㄍ敿殢碗s信息的入口?？ㄆ泄潭ǖ膶挾群涂勺兊母叨?。最大高度限制于可適應平臺上單一視圖的內(nèi)容，但如果需要它可以臨時擴展（例如，顯示評論欄）。類似分組的集合。

用途：卡片是用來顯示由不同種類對象組成的內(nèi)容的便捷途徑。它們也適用于展示尺寸或操作相當不同的相似對象，像帶有不同長度標題的照片。

顯示這些內(nèi)容時使用卡片布局：

• 作為一個集合，由多種數(shù)據(jù)類型組成（例如，卡片集包含照片，電影，文本，圖像）
• 包含可變長度內(nèi)容，例如評論
• 由富內(nèi)容或互動操作組成，例如+1按鈕，滑塊，或評論
• 如果使用列表需要顯示超過三行文本
• 如果使用網(wǎng)格列表需要顯示更多文本來補充圖像

紙片

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

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

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

提示框

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

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

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

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

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

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

事件：主要是允許用戶通過確認一個具體操作來繼續(xù)下一步活動。

交互行為：觸摸提示框外面的區(qū)域可以關閉提示框。

分割線

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

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

分割線的類型：

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

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

3.子標題和分隔線：在使用分隔的子標題時，可以將分隔線置于子標題之上，可以加強子標題與內(nèi)容關聯(lián)度。

網(wǎng)格

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

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

如果卡片中的文本需要與其他主要內(nèi)容有著足夠顯著的區(qū)別，可以考慮使用一個容器，比如列表（Lists）或者卡片（Cards）。這樣可以優(yōu)化文本顯示、增強閱讀理解的便利性；列表，增強閱讀理解的便利性，尤其是在比較一組具有多種數(shù)據(jù)類型的數(shù)據(jù)時；卡片，用于不同格式的內(nèi)容，比如帶有不同長度標題的圖片;用于不同類內(nèi)容的數(shù)據(jù)集合中，比如具有圖片、視頻和圖書的混合式數(shù)據(jù)集。

列表

定義：列表作為一個單一的連續(xù)元素來以垂直排列的方式顯示多行條目。

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

如果有超過三行的文本需要在列表中顯示，換用卡片（cards）代替。

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

交互行為：

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

列表控制

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

列表控制分為如下兩種:

1. 狀態(tài)/主操作(包括文本字符串)
2. 次要操作/信息

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

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

列表控制的類型

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

類型：狀態(tài)/主操作；次要操作/信息

單獨可點擊

開關

類型：次要操作/信息

單獨可點擊

重新排序

類型：次要動作

通常都是單獨可點擊，視當前列表所處的模式而定。

該動作允許用戶給列表中項通過拖動變換位置。通常，這個按鈕出現(xiàn)在列表編輯的模式下。

展開/折疊

類型：次要動作

單獨可點擊

垂直展開或者折疊列表來顯示或者隱藏當前列表

Leave Behinds

類型: 其他

Leave-behind 是在當某一項列表被滑開之后的操作提示。Leave-behind可以被轉換成一項操作。

無論從哪個方向滑動列表，都會出現(xiàn)操作圖標?；瑒恿酥?，操作圖標就會居中顯示于列表空白處。

查看更多

類型: 主要操作（連同行內(nèi)其他內(nèi)容）

非單獨可點擊

點擊之后跳轉到與當前列表相關詳細信息的頁面，通常這都是一個新的頁面或者面板。

選中

類型: 狀態(tài)

非單獨可點擊

僅適用于菜單。用來表示當前列表是否通過不同的操作之后被選中。

菜單

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

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

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

菜單顯示一組一致的菜單項，每個菜單項可以基于應用的當前狀態(tài)來使能。

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

說明：將動作菜單項顯示為禁用狀態(tài)，而不是移除它們，這樣可以讓用戶知道在正確條件下它們是存在的。比如，當沒有重做任務時禁用重做（Redo）動作。當內(nèi)容被選中后，剪切（Cut）和復制（Copy）動作可用

進度和動態(tài)

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

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

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

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

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

圓形進度指示器：

滑塊

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

連續(xù)滑塊(Continuous Slider)

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

帶有可編輯數(shù)值的滑塊

用于使用者需要設定精確數(shù)值的設置項，可以通過點觸縮略圖、文本框來進行編輯。

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

附帶數(shù)值標簽的滑塊：用于使用者需要知曉精確數(shù)值的設置項。

Snackbar 與 Toast

定義：Snackbar 是一種針對操作的輕量級反饋機制，常以一個小的彈出框的形式，出現(xiàn)在手機屏幕下方或者桌面左下方。它們出現(xiàn)在屏幕所有層的最上方，包括浮動操作按鈕。

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

Android 也提供了一種主要用于提示系統(tǒng)消息的膠囊狀的提示框 Toast。Toast 同 Snackbar 非常相似，但是 Toast 并不包含操作也不能從屏幕上滑動關閉，文本內(nèi)容左對齊。

用法

短文本

通常 Snackbar 的高度應該僅僅用于容納所有的文本，而文本應該與執(zhí)行的操作相關。Snackbar 中不能包含圖標，操作只能以文本的形式存在。

暫時性

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

最多0-1個操作，不包含取消按鈕

當一個動作發(fā)生的時候，應當符合提示框和可用性規(guī)則。當有2個或者2個以上的操作出現(xiàn)時，應該使用提示框而不是 Snackbar，即使其中的一個是取消操作。如果 Snackbar 中提示的操作重要到需要打斷屏幕上正在進行的操作，那么理當使用提示框而非 Snackbar。

副標題

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

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

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

為了提高分組內(nèi)容的視覺效果，可以用系統(tǒng)顏色來顯示副標題。

開關

定義：開關允許用戶選擇選擇項。

一共有三種類型的開關：復選框、單選按鈕和 on/off 開關。

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

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

如果需要在一個列表中出現(xiàn)多個 on/off 選項，復選框是一種節(jié)省空間的好方式。

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

復選框通過動畫來表達按壓和按下的狀態(tài)。

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

單選按鈕通過動畫來表達聚焦和按下的狀態(tài)。

開關：On/off 開關切換單一設置選擇的狀態(tài)。開關控制的選項以及它的狀態(tài)，應該明確的展示出來并且與內(nèi)部的標簽相一致。開關應該單選按鈕呈現(xiàn)相同的視覺特性。

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

Tabs

定義：在一個 app 中，tabs 使在不同的視圖和功能間探索和切換以及瀏覽不同類別的數(shù)據(jù)集合起來變得簡單。

用法：tab 用來顯示有關聯(lián)的分組內(nèi)容。tab標簽用來簡要的描述內(nèi)容。

使用規(guī)則：

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

文本框

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

文本框可以有不同的輸入類型。輸入類型決定文本框內(nèi)允許輸入什么樣的字符，有的可能會提示虛擬鍵盤并調整其布局來顯示最常用的字符。常見的類型包括數(shù)字，文本，電子郵件地址，電話號碼，個人姓名，用戶名，URL，街道地址，信用卡號碼，PIN碼，以及搜索查詢。

單行文本框：當文本輸入光標到達輸入?yún)^(qū)域的最右邊，單行文本框中的內(nèi)容會自動滾動到左邊。

帶有滾動條的單行文本框：當單行文本框的輸入內(nèi)容很長并需跨越多行的時候，則文本框應該以滾動形式容納文本

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

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

工具提示

用法：對同時滿足以下條件的元素使用工具提示：1.具有交互性。2.主要是圖形而非文本。

后記：

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

相關閱讀