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

Echo ：因為涉及到操作類的組件控件實在太多太多了，我這里劃分歸類的是典型的同時和之前分組不重復(fù)。

系列文章： 

操作類一共含以下八類：

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

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

一.底部操作列表

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

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

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

特征：

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

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

Material Design里面把宮格樣式也算在底部動作條里面。

二.底部浮層視圖

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

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

特征：

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

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

三.編輯菜單

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

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

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

特征：

• 編輯菜單隱蔽，只有通過單擊或者長按呼出。
• 以浮層情勢存在。

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

四.底部工具欄

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

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

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

特征：

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

五.按鈕

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

重要的按鈕有三種：

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

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

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

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

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

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

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

六.選擇器

定義：通過滑動滑輪來選擇時間、地點、人物等?；喌某休d信息很大，可以承載許多的選項。

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

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

特征：

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

七.下拉菜單

定義：通過點擊一個操作按鈕，下拉出一個菜單，菜單由箭頭、浮層列表組成。

用途：

• 為其他功能提供一個快捷入口。
• 功能入口。

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

八.文本框

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

文本框有兩類：單行文本框、多行文本框。

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

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

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

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

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