中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本篇文章是設(shè)計(jì)規(guī)范中的操作類，也是設(shè)計(jì)規(guī)范系列的第七篇，最近一直寫這個(gè)系列，都寫膩了，也沒什么挑戰(zhàn)性。繼這個(gè)系列之后，我會(huì)寫一些超有意思的文章，想想都好激動(dòng)哦。

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

操作類一共含以下八類：

1. 底部操作列表
2. 底部浮層視圖
3. 編輯菜單
4. 底部工具欄
5. 按鈕
6. 選擇器
7. 下拉菜單
8. 文本框

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

1.底部操作列表

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

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

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

特性：

1. 由用戶某個(gè)操作行為觸發(fā)
2. 包含兩個(gè)或以上的按鈕

使用操作列表：操作列表提供一系列在當(dāng)前情景下可以完成當(dāng)前任務(wù)的操作，而這樣的形式不會(huì)永久占用頁面UI的空間。

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

底部浮層視圖

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

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

特性：

1. 由用戶某個(gè)操作行為觸發(fā)
2. 包含兩個(gè)或以上的宮格

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

編輯菜單

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

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

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

特性：

1. 編輯菜單隱藏，只有通過單擊或者長按呼出
2. 以浮層形式存在

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

底部工具欄

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

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

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

特性：

1. 工具欄始終位于屏幕底部
2. 工具欄操作可以是文字或圖標(biāo)，也可以是文字加圖標(biāo)
3. 工具欄操作數(shù)量建議不超過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)相關(guān)。

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

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

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

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

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

選擇器

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

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

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

特性：

1. 選擇器一般位于底部，或者位于選項(xiàng)列表的下面（如iOS 原生日歷）
2. 同一個(gè)滑輪間的選項(xiàng)屬性相同

下拉菜單

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

用途：

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

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

文本框

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

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

文本框可以有不同的輸入類型。輸入類型決定文本框內(nèi)允許輸入什么樣的字符，有的可能會(huì)提示虛擬鍵盤并調(diào)整其布局來顯示最常用的字符。常見的類型包括數(shù)字，文本，電子郵件地址，電話號(hào)碼，個(gè)人姓名，用戶名，URL，街道地址，信用卡號(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)讓溢出的的文字?jǐn)嚅_并形成新的行，使文本可以換行和垂直滾動(dòng)。

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

相關(guān)閱讀

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：導(dǎo)航類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：引導(dǎo)類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：加載類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：網(wǎng)絡(luò)異常類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：空數(shù)據(jù)類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：提示類

設(shè)計(jì)規(guī)范 | 詳解組件控件結(jié)構(gòu)體系：單元控件類

#專欄作家#

UX，微信公眾號(hào)：UEDC，人人都是產(chǎn)品經(jīng)理專欄作家。華為ITUX交互組組長。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議