輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)系統(tǒng)之操作類

Echo ：因?yàn)樯婕暗讲僮黝惖慕M件控件實(shí)在太多太多了，我這里劃分歸類的是典型的同時(shí)和之前分組不重復(fù)。

系列文章： 

操作類一共含以下八類：

• 底部操作列表
• 底部浮層視圖
• 編輯菜單
• 底部工具欄
• 按鈕
• 選擇器
• 下拉菜單
• 文本框

仍舊附上一張腦圖，組件控件分類（假如單純通過(guò)組件控件，難以知足功能劃分的需求，所以我將這個(gè)范圍擴(kuò)大，分類里面不僅僅含有組件和控件，所以請(qǐng)不要在意細(xì)節(jié)。）

一.底部操作列表

定義：展示與用戶觸發(fā)的操作直接相干的一系列選項(xiàng)功能。

用途：底部操作列表，是當(dāng)用戶激發(fā)一個(gè)操作的時(shí)候，出現(xiàn)的浮層?！甘褂貌僮髁斜碜層脩艨梢蚤_(kāi)始一個(gè)新義務(wù)或者對(duì)破壞性操作（例如：刪除、退出登錄等）進(jìn)行二次確認(rèn)。」

使用場(chǎng)景：例如在iOS原生郵箱，用戶在讀郵件時(shí)，點(diǎn)擊底部的工具欄中的回復(fù)/轉(zhuǎn)發(fā)，則出現(xiàn)一系列選項(xiàng)功能，用戶通過(guò)點(diǎn)擊選擇選項(xiàng)功能開(kāi)始一個(gè)新義務(wù)。Android中用戶長(zhǎng)按出現(xiàn)底部操作列表，用戶可以對(duì)一系列功能選擇從而開(kāi)始新的義務(wù)。

特征：

• 由用戶某個(gè)操作舉動(dòng)觸發(fā)。
• 包含兩個(gè)或以上的按鈕。

使用操作列表：操作列表提供一系列在當(dāng)前情景下可以完成當(dāng)前義務(wù)的操作，而如許的情勢(shì)不會(huì)永世占用網(wǎng)頁(yè)UI的空間。

Material Design里面把宮格樣式也算在底部動(dòng)作條里面。

二.底部浮層視圖

定義：展示了與用戶觸發(fā)的操作直接相干的一系列選項(xiàng)。

用途：多用于對(duì)當(dāng)前界面的分享。

特征：

• 由用戶某個(gè)操作舉動(dòng)觸發(fā)。
• 包含兩個(gè)或以上的宮格。

在Material Design設(shè)計(jì)規(guī)范中，把底部操作列表和我所說(shuō)的底部浮層視圖，都叫做底部動(dòng)作條，里面可以是列表樣式也可以是宮格樣式。Material Design是以功能的維度來(lái)劃分，而我是按照組件呈現(xiàn)樣式來(lái)區(qū)分。所以才有了兩種不同的效果。

三.編輯菜單

定義：用戶通過(guò)長(zhǎng)按或者點(diǎn)擊能呼出一個(gè)編輯菜單來(lái)完成諸如在文本視圖，頁(yè)面或者圖片中的剪貼、復(fù)制、以及其他一系列的選擇操作。

用途：將一系列操作隱蔽，只能通過(guò)手勢(shì)呼出，如許的益處是編輯菜單不占有當(dāng)前展示界面的空間，適合非高頻的使用場(chǎng)景。

使用場(chǎng)景：例如微信，假如用戶想對(duì)話進(jìn)行復(fù)制、轉(zhuǎn)發(fā)、珍藏等操作，通過(guò)長(zhǎng)按呼出編輯菜單。

特征：

• 編輯菜單隱蔽，只有通過(guò)單擊或者長(zhǎng)按呼出。
• 以浮層情勢(shì)存在。

在Material Design設(shè)計(jì)規(guī)范中，將我所說(shuō)的編輯菜單定義為菜單，我覺(jué)得叫做編輯菜單更形象。

四.底部工具欄

定義：底部工具欄上放置著用于操作當(dāng)前屏幕中各對(duì)象的組件。

用途：在工具欄里放置用戶在當(dāng)前情景下最常見(jiàn)的操作功能，當(dāng)鍵盤被喚起、用戶上下滑動(dòng)或者當(dāng)前視圖變?yōu)樨Q屏的情況下，工具欄可以被隱蔽。

使用場(chǎng)景：例如iOS 原生郵箱，必要對(duì)該封郵件進(jìn)行轉(zhuǎn)發(fā)、回復(fù)、刪除、標(biāo)記等一系列操作，同時(shí)該操作都是高頻操作。不必要隱蔽，所以這時(shí)候就必要使用底部工具欄了。

特征：

• 工具欄始終位于屏幕底部。
• 工具欄操作可以是筆墨或圖標(biāo)，也可以是筆墨加圖標(biāo)。
• 工具欄操作數(shù)量建議不超過(guò)5個(gè)。

五.按鈕

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

重要的按鈕有三種：

• 懸浮相應(yīng)按鈕。
• 浮動(dòng)按鈕。
• 筆墨按鈕。

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

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

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

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

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

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

六.選擇器

定義：通過(guò)滑動(dòng)滑輪來(lái)選擇時(shí)間、地點(diǎn)、人物等?；喌某休d信息很大，可以承載許多的選項(xiàng)。

用途：在滑輪中可以往返選擇，假如選擇錯(cuò)誤可以調(diào)整。

使用場(chǎng)景：例如iOS 原生日歷，用戶選準(zhǔn)時(shí)間時(shí)，在點(diǎn)擊結(jié)束的列表時(shí)，出現(xiàn)選擇器，通過(guò)滑動(dòng)滑輪，選擇所必要的時(shí)間。

特征：

• 選擇器一樣平常位于底部，或者位于選項(xiàng)列表的下面（如iOS 原生日歷）。
• 統(tǒng)一個(gè)滑輪間的選項(xiàng)屬性雷同。

七.下拉菜單

定義：通過(guò)點(diǎn)擊一個(gè)操作按鈕，下拉出一個(gè)菜單，菜單由箭頭、浮層列表組成。

用途：

• 為其他功能提供一個(gè)快捷入口。
• 功能入口。

使用場(chǎng)景：例如微信，收付款、掃一掃等層級(jí)較深。下拉菜單可提供快捷入口的作用。

八.文本框

定義：可以讓用戶輸入文本。它們可以是單行的，帶或不帶滾動(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)整其布局來(lái)表現(xiàn)最常用的字符。常見(jià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)光標(biāo)到達(dá)最下緣，多行文本框會(huì)主動(dòng)讓溢出的的筆墨斷開(kāi)并形成新的行，使文本可以換行和垂直滾動(dòng)。

對(duì)于多行文本框，用戶在輸入前N行時(shí)，文本框的高度自適應(yīng)，超過(guò)N行時(shí)，高度不變，出現(xiàn)滑條，例如微信N=5。

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