您的位置:首頁>設計>正文

設計規範|詳解元件控制項結構體系:操作類

本篇文章是設計規範中的操作類, 也是設計規範系列的第七篇, 最近一直寫這個系列, 都寫膩了, 也沒什麼挑戰性。 繼這個系列之後, 我會寫一些超有意思的文章, 想想都好激動哦。

由於涉及到操作類的元件控制項實在太多太多了, 我這裡劃分歸類的是典型的同時和之前分組不重複。

操作類一共含以下八類: 底部操作清單底部浮層視圖編輯功能表底部工具列按鈕選擇器下拉式功能表文字方塊

依舊附上一張腦圖, 元件控制項分類(如果單純通過元件控制項, 難以滿足功能劃分的需求, 所以我將這個範圍擴大, 分類裡面不僅僅含有元件和控制項, 所以請不要在意細節。 )

1.底部操作列表

定義:展示了與用戶觸發的操作直接相關的一系列選項功能。

用途:底部操作列表, 是當用戶激發一個操作的時候, 出現的浮層。 “使用操作列表讓用戶可以開始一個新任務或者對破壞性操作(例如:刪除、退出登錄等)進行二次確認。 ”

使用場景:例如在iOS原生郵箱, 用戶在讀郵件時, 點擊底部的工具列中的回復/轉發, 則出現一系列選項功能, 使用者通過點擊選擇選項功能開始一個新任務。 Android中用戶長按出現底部操作列表,

用戶可以對一系列功能選擇從而開始新的任務。

特性:

由用戶某個操作行為觸發包含兩個或以上的按鈕

使用操作清單:操作列表提供一系列在當前情景下可以完成當前任務的操作, 而這樣的形式不會永久佔用頁面UI的空間。

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

底部浮層視圖

定義:展示了與用戶觸發的操作直接相關的一系列選項。

用途:多用於對當前介面的分享

特性:

由用戶某個操作行為觸發包含兩個或以上的宮格

PS:在Material Design設計規範中, 把底部操作列表和我所說的底部浮層視圖,

都叫做底部動作條, 裡面可以是清單樣式也可以是宮格樣式。 Material Design是以功能的維度來劃分, 而我是按照元件呈現樣式來區分。 所以才有了兩種不同的結果。

編輯功能表

定義:用戶通過長按或者點擊能呼出一個編輯功能表來完成諸如在文本視圖, 網頁或者圖片中的剪貼、複製、以及其他一系列的選擇操作。

用途:將一系列操作隱藏, 只能通過手勢呼出, 這樣的好處是編輯功能表不佔據當前展示介面的空間, 適合非高頻的使用場景。

使用場景:例如微信, 如果使用者想對話進行複製、轉發、收藏等操作, 通過長按呼出編輯功能表。

特性:

編輯功能表隱藏,只有通過按一下或者長按呼出以浮層形式存在

注明:在在Material Design設計規範中,將我所說的編輯功能表定義為功能表,我覺得叫做編輯功能表更形象。

底部工具列

定義:底部工具列上放置著用於操作當前螢幕中各物件的元件。

用途:在工具列裡放置用戶在當前情景下最常見的操作功能,當鍵盤被喚起、使用者上下滑動或者當前視圖變為豎屏的情況下,工具列可以被隱藏。

使用場景:例如iOS 原生郵箱,需要對該封郵件進行轉發、回復、刪除、標記等一系列操作,同時該操作都是高頻操作。不需要隱藏,所以這時候就需要使用底部工具列了。

特性:

工具列始終位於螢幕底部工具列操作可以是文字或圖示,也可以是文字加圖示工具列運算元量建議不超過5個按鈕

定義:由文字和/或圖示組成,按鈕告知使用者按下按鈕後將進行的操作,我們可以把按鈕理解為一個操作的觸發器。

主要的按鈕有三種:懸浮回應按鈕、浮動按鈕、文字按鈕

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

浮動按鈕(Raised button),常見的方形紙片按鈕,和懸浮回應按鈕相反。非懸浮,固定於一個位置。 點擊後會產生墨水擴散效果。浮動按鈕看起來像一張放在頁面上的紙片,點擊後會浮起來並表現出色彩。

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

文字按鈕是點擊後產生墨水擴散效果,和浮動按鈕的區別是沒有浮起的效果。儘量避免把他們作為純粹裝飾用的元素。按鈕的設計應當和應用的顏色主題保持一致。

按鈕使用規則:按鈕類型應該基於主按鈕、螢幕上容器的數量以及整體佈局來進行選擇。

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

定義:通過滑動滑輪來選擇時間、地點、人物等。滑輪的承載資訊很大,可以承載很多很多的選項。

用途:在滑輪中可以來回選擇,如果選擇錯誤可以調整。

使用場景:例如iOS 原生日曆,用戶選定時間時,在點擊結束的列表時,出現選擇器,通過滑動滑輪,選擇所需要的時間。

特性:

選擇器一般位於底部,或者位於選項清單的下面(如iOS 原生日曆)同一個滑輪間的選項屬性相同下拉式功能表

定義:通過點擊一個操作按鈕,下拉出一個功能表,功能表由箭頭、浮層列表組成。

用途:

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

使用場景:例如微信,收付款、掃一掃等層級較深。下拉式功能表可提供快捷入口的作用。

文字方塊

定義:可以讓使用者輸入文本。它們可以是單行的,帶或不帶捲軸,也可以是多行的,並且帶有一個圖示。點擊文字方塊後顯示游標,並自動顯示鍵盤。除了輸入,文字方塊可以進行其他任務操作,如文本選擇(剪切,複製,粘貼)以及資料的自動查找功能。

文字方塊有兩類:單行文字方塊、多行文字方塊

文字方塊可以有不同的輸入類型。輸入類型決定文字方塊內允許輸入什麼樣的字元,有的可能會提示虛擬鍵盤並調整其佈局來顯示最常用的字元。常見的類型包括數位,文本,電子郵寄地址,電話號碼,個人姓名,用戶名,URL,街道地址,信用卡號碼,PIN碼,以及搜索查詢。

單行文字方塊:當文本輸入游標到達輸入區域的最右邊,單行文字方塊中的內容會自動滾動到左邊。

多行文字方塊:當游標到達最下緣,多行文字方塊會自動讓溢出的的文字斷開並形成新的行,使文本可以換行和垂直捲動。

對於多行文字方塊,用戶在輸入前N行時,文字方塊的高度自我調整,超過N行時,高度不變,出現滑條,例如微信N=5。

特性:

編輯功能表隱藏,只有通過按一下或者長按呼出以浮層形式存在

注明:在在Material Design設計規範中,將我所說的編輯功能表定義為功能表,我覺得叫做編輯功能表更形象。

底部工具列

定義:底部工具列上放置著用於操作當前螢幕中各物件的元件。

用途:在工具列裡放置用戶在當前情景下最常見的操作功能,當鍵盤被喚起、使用者上下滑動或者當前視圖變為豎屏的情況下,工具列可以被隱藏。

使用場景:例如iOS 原生郵箱,需要對該封郵件進行轉發、回復、刪除、標記等一系列操作,同時該操作都是高頻操作。不需要隱藏,所以這時候就需要使用底部工具列了。

特性:

工具列始終位於螢幕底部工具列操作可以是文字或圖示,也可以是文字加圖示工具列運算元量建議不超過5個按鈕

定義:由文字和/或圖示組成,按鈕告知使用者按下按鈕後將進行的操作,我們可以把按鈕理解為一個操作的觸發器。

主要的按鈕有三種:懸浮回應按鈕、浮動按鈕、文字按鈕

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

浮動按鈕(Raised button),常見的方形紙片按鈕,和懸浮回應按鈕相反。非懸浮,固定於一個位置。 點擊後會產生墨水擴散效果。浮動按鈕看起來像一張放在頁面上的紙片,點擊後會浮起來並表現出色彩。

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

文字按鈕是點擊後產生墨水擴散效果,和浮動按鈕的區別是沒有浮起的效果。儘量避免把他們作為純粹裝飾用的元素。按鈕的設計應當和應用的顏色主題保持一致。

按鈕使用規則:按鈕類型應該基於主按鈕、螢幕上容器的數量以及整體佈局來進行選擇。

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

定義:通過滑動滑輪來選擇時間、地點、人物等。滑輪的承載資訊很大,可以承載很多很多的選項。

用途:在滑輪中可以來回選擇,如果選擇錯誤可以調整。

使用場景:例如iOS 原生日曆,用戶選定時間時,在點擊結束的列表時,出現選擇器,通過滑動滑輪,選擇所需要的時間。

特性:

選擇器一般位於底部,或者位於選項清單的下面(如iOS 原生日曆)同一個滑輪間的選項屬性相同下拉式功能表

定義:通過點擊一個操作按鈕,下拉出一個功能表,功能表由箭頭、浮層列表組成。

用途:

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

使用場景:例如微信,收付款、掃一掃等層級較深。下拉式功能表可提供快捷入口的作用。

文字方塊

定義:可以讓使用者輸入文本。它們可以是單行的,帶或不帶捲軸,也可以是多行的,並且帶有一個圖示。點擊文字方塊後顯示游標,並自動顯示鍵盤。除了輸入,文字方塊可以進行其他任務操作,如文本選擇(剪切,複製,粘貼)以及資料的自動查找功能。

文字方塊有兩類:單行文字方塊、多行文字方塊

文字方塊可以有不同的輸入類型。輸入類型決定文字方塊內允許輸入什麼樣的字元,有的可能會提示虛擬鍵盤並調整其佈局來顯示最常用的字元。常見的類型包括數位,文本,電子郵寄地址,電話號碼,個人姓名,用戶名,URL,街道地址,信用卡號碼,PIN碼,以及搜索查詢。

單行文字方塊:當文本輸入游標到達輸入區域的最右邊,單行文字方塊中的內容會自動滾動到左邊。

多行文字方塊:當游標到達最下緣,多行文字方塊會自動讓溢出的的文字斷開並形成新的行,使文本可以換行和垂直捲動。

對於多行文字方塊,用戶在輸入前N行時,文字方塊的高度自我調整,超過N行時,高度不變,出現滑條,例如微信N=5。

Next Article
喜欢就按个赞吧!!!
点击关闭提示