設計規範 | 詳解組件控件結構體系

什麼是控件？什麼組件？二者的區別是什麼？

Control翻譯爲控件，Component翻譯爲組件。ios

通俗的解釋說法就是組件爲多個元素組合而成。控件爲單一元素組合而成。瀏覽器

若是單純經過組件控件，難以知足功能劃分的需求，因此我將這個範圍擴大，分類裏面不只僅含有組件和控件，因此請不要在乎細節。緩存

以下腦圖是設計規範的重點，這個是系統的學習組件控件和功能分類的目錄。服務器

設計規範 | 詳解組件控件結構體系：導航類

導航的做用有哪些？

1. 結構化產品內容和功能微信

導航系統至關於APP的骨架，支撐着內容和功能組成的血肉，導航系統起着組織內容和功能的做用，讓它們按照產品的信息架構圖進行鏈接，展示在在用戶面前，導航將零散的內容和功能組織成了一個完成的有結構的系統。網絡

2. 突出核心功能架構

導航就起到了突出核心功能，適度隱藏次要功能的做用。核心功能對目標用戶來講是最重要的。app

3. 扁平化用戶任務路徑框架

能夠很好的扁平化信息層級，並同時提供了進入不一樣信息分類或入口。用戶能夠迅速實現不一樣模塊之間的切換且不會迷失方向。ide

底部標籤式導航

定義

用於一級目錄的導航，位於頁面底部，能告訴用戶當前位置及用戶切換統一層級之間的不一樣模塊，通常最多不超過五個標籤。

特色

標籤導航是目前最多見的導航形式。最多見的緣由是標籤式導航可讓流量更大化，分化流量，使得各個模塊都有機會獲取流量提升頁面流量的轉化。

將經常使用的導航放在底部，不管用戶單手仍是雙手操做都能輕鬆點擊，從而實現各功能模塊之間的跳轉。

標籤式導航有底部導航和頂部導航兩種，底部導航用於全局導航，頂部導航用於二級導航(遵循Material Design規範的除外)。

優勢

1. 它能夠承載重要性和頻率處於同一級別的功能模塊、信息或任務。

2. 他能在第一時間支持使用者獲取重要性最高、頻率最大的信息或任務。

3. 它能支持用戶在不一樣模塊、信息和任務之間快速切換。

4. 他具備包容性，能夠將其餘信息的框架溶解掉，構建出容量更大的模塊、信息或任務架構。也就是說，不少app的總體架構都是標籤式結構，而後又使用其餘的架構去承載界面中的具體信息。

缺點

1. 因爲尺寸限制，標籤式導航的數量上限最好是5個，超過5個就要考慮產品的需求分組是否合適或考慮更換框架。

2. 標籤欄佔用了必定的空間，因此減小了頁面的信息承載量。有些產品爲了更好地展現頁面信息，會使用一種隱藏的標籤欄，這種標籤欄會在用戶上滑閱讀時隱藏，下滑返回時再顯示。這種作法確實照顧了頁面的信息展現，可是也要具體產品慎重看待，由於他可能會讓導航失去便捷性從而下降切換效率。

舵式導航

底部標籤式導航的變種。爲了突出中間的功能，將中間標籤圖標設計的比較突出，鼓勵用戶多使用該功能。

除去兩側4個標籤以外，其餘重要的標籤都隱藏在舵式導航中，或者將那些重要性高、使用至關頻繁的功能入口放在裏面。

可是，舵式導航自己是存在設計矛盾的。在舵式導航中位置的應該是重要性和使用頻率高的功能，既然他如此重要，爲何要隱藏在舵式導航中？這些功能放在二級界面中至關於被埋起來了，會增長用戶的記憶負擔和操做負荷。

分段控制式導航

定義

一般用於展現贊成模塊下不一樣類別的信息或者篩選不用模塊的信息。

特色

通常爲二級導航。

優勢

1. 能夠很好地扁平化信息層級，並同時提供了進入不容信息分類或模態的入口。

2. 用戶能夠迅速實現同一模塊下不一樣類別信息之間的切換而且不會迷失方向。

缺點

1. 分段控制式導航位於頂部，切換起來不方便，雖然ios有左右滑動手勢，可是不少用戶並不知道。

2. 佔據空間，致使屏幕可展示區域變少。

列表式導航

定義

一般針對具體某個模塊內容的信息進行分類，以列表的形式去呈現。

特色

1. 將具體的某個模塊的結構以列表的形式進行分類展示，結構清晰，便於用戶理解。

2. 多用於輔助主導航來展示耳機甚至更多層次的內容。

3. 適用於大量的信息分類展示，空間利用效率高，能夠展現大量的條目。

優勢

1. 列表式結構具備很強的延展性，能夠不斷地加強信息。並且通常來說，它的信息格式都比較一致，調整的彈性高，抗信息衝擊力也很強。

2. 它的導航效率高，能夠引入字母索引。

3. 它能夠很方便的進行分組分類。

4. 適合寬而深的信息層級。

缺點

1. 功能重於形式，承載的信息種類也比較單一，容易引發用戶的單調感，很難讓用戶長時間停留。

2. 若是列表中蘊含的信息量比較龐大，每每須要加入搜索功能或者索引，不然用戶會遇到尋找信息的困難。

下拉菜單式導航

定義

一般用於篩選同一模塊下的不一樣類別的信息，或者是快速啓動某些經常使用的功能模塊。

特色

1. 爲了能讓更多用戶在有限的屏幕空間上作更多的動做，減小干擾用戶查看信息。

2. 能將同一模塊的信息作個分類，讓用戶更清晰地瞭解這個模塊都爲咱們提供哪些信息或分類。

這種導航形式通常不會用於全局導航，多用於瀏覽類的APP的二級導航，用戶通常每次只瀏覽一種類型的內容，像刷微博，女生們刷美妝時就會一直刷下去。菜單式導航還有一個好處就是節省屏幕空間，它用一個展開的圖標，將幾個甚至幾十個分類都集合在一塊兒，在寸土寸金的移動端屏幕顯得尤其重要。

微博國際版和無祕的二級導航都採用菜單式導航的形式。

抽屜式導航

定義

一般針對產品偏沉浸式閱讀的狀況下，其餘模塊切換頻率低，可採用此導航形式。

特色

1. 常與底部標籤式導航組合使用，將一級頁面內的信息再細分，給人以清晰的呈現方式。

2. 若該產品追求核心內容的突出。可弱化其餘信息的展現時，便可採用此導航形式。

抽屜，是整理收起的意思，就是把除了核心功能之外的低頻操做都放到一個抽屜裏，使得用戶得到沉浸式的體驗，並且可以集中用戶的注意力，讓用戶去更好的完成核心功能，不被打擾。咱們能夠把抽屜式導航類比成極簡的生活方式，只把必須的東西展示出來，其他的東西要麼丟掉，要麼整理後收起來。

優勢

1. 用戶能夠將注意力放在首頁，減小其餘類型的導航帶來分散用戶注意力的狀況，給用戶更沉浸式的操做感和閱讀感。

2. 最大限度的利用屏幕空間。

缺點

1. 浪費流量，其餘模塊的流量會被遏制。不利於整個產品的頁面流量最大化。

2. 若是產品框架比較大，須要多功能同時推廣的話。不適合用該導航。

宮格式導航

定義

相似於手機桌面各個應用入口的導航方式。每一個入口每每是比較獨立的信息內容，用戶進入一個入口後，只處理與此入口相關的內容，若是要跳轉至其餘入口，必需要先回到入口總界面。

特色

信息的呈現內容比較少，可是多個項目選取的效率比較高。

優勢

1. 宮格式結構能夠做爲信息或平臺的入口，爲產品或項目信息提供聚合的載體。

2. 他適合承載訂閱類產品或衆多屬性差別很是明顯的分類信息。

3. 他能夠劃分多個內容、多個模式，由不一樣團隊獨立開發每一個模塊再聚合。

4. 在具備較強的延展性，能夠無限擴展內容。

缺點

1. 用戶選擇壓力大。

2. 用戶沒法第一時間看到信息，因爲宮格式結構是信息或平臺的入口，因此具體的信息每每隱藏在下一級界面。

卡片式導航

定義

一種更加可視化的導航，它能根據頁面內容的變化及時更新圖片，適合以圖片爲主的內容，像新聞、美食、旅行、視頻圖片等常用，常做爲二級導航。

特色

宮格式導航的一種延展形式。每一個條目能夠呈現更多的信息。

優勢

對運營量的要求比較低，並且單個條目的轉發率會相應的提升，若是產品的運營量較低或須要較高的條目轉化率，可使用這種設計。

缺點

當運營量較大的時候，這種結構會下降用戶尋找信息的效率。

設計規範 | 詳解組件控件結構體系：引導類

本文是系列文章之詳解組件控件結構體系的第三篇——引導類。enjoy~

引導是帶領用戶更快速更愉悅地達到目標的過程，能在用戶使用產品功能前或遇到障礙以前給予及時的引導提示。

爲了業務或者產品目標的須要，有時候須要給予一些適當的提示方便用戶去理解產品。

爲了完成不一樣的引導內容和引導的目標，移動端的引導設計會根據需求進行不一樣的多樣化處理。常見的引導有：引導頁（幻燈片）式引導，浮層式引導，嵌入式引導。

3種類型的引導各有各自的特色以及使用場景，本篇文章詳解組件控件結構體系—引導類。

引導頁（幻燈片）式引導

定義：通常出如今app首次啓動的時候，是一系列宣傳、解說、幫助等頁面的組合。

在移動互聯網的產品的設計中，引導頁的設計則是在用戶初次使用該移動產品時，給予的一些必須性的幫助以使得用戶能快速愉悅地瞭解這個產品的功能與具體操做方式。

一方面從產品的角度考慮，產品但願用戶可以方便得理解產品的特性，減小對產品的陌生感；另外一方面，從用戶角度來看，一個應用裏好的引導不只能使他們對一個應用有好感，也可能更容易得留住他們。

用途

1. 讓用戶快速瞭解是一個什麼樣的產品。

2. 讓用戶快速瞭解該產品的主功能、或者要重點宣傳的特點、重大更換功能。

建議

1. 文案簡單易懂，重點突出

2. 內容能夠是圖片、視頻、插畫漫畫等，且內容和文案要有必定的關聯性。

3. 分頁符通常是2-5個。

4. 提供能夠直接跳過引導頁的操做。不強制用戶必定所有瀏覽。

使用場景

1. 用戶第一次使用時，產品經過引導頁讓用戶快速瞭解產品的主功能。

2. 用戶更新產品時，產品經過引導頁給用戶傳導更新的新功能。

浮層式引導

定義：一種輕量級單目標性很強的引導方式，通常是浮層結合文案的，樣式相似氣泡的引導方式。

用途

1. 提示用戶新增功能或頁面調整，或如何使用該功能。

2. 提示用戶重要功能或一些隱藏操做。

建議

1. 特有文案、帶有指示箭頭的相似氣泡設計。

2. 通常爲非模態浮層，大概顯示3秒左右自動消失，對用戶干擾較小。

3. 文案上儘可能簡潔，表意清晰，建議控制20字之內。

使用場景

1. 有些新增功能不易讓用戶察覺同時這些功能對產品自己來講顯得比較重要，這時候須要浮層引導，讓用戶知道該功能或者使用方法。

2. 用於新手引導

嵌入式引導

定義：將引導內容直接嵌入到界面中的引導方式，能夠嵌入到狀態欄、導航欄、工具欄，比較常見的是嵌入到主題內容界面中。

用途

1. 讓用戶瞭解當前界面或者操做處於何種狀態，並指導接下來如何操做使用。

2. 保留當前界面的內同同時，增長引導提示。

建議

文案簡短表述當前狀態並告知用戶如何操做。

使用場景

1. 異常狀態時使用嵌入式引導，目的是提示用戶異常狀態。

2. 初始狀態時，因爲界面數據爲空，這時候經過嵌入式引導提示用戶操做。

3種引導類型按照重要度依次爲：引導頁（幻燈片）式引導>浮層式引導>嵌入式引導。3種引導可相互組合使用。到底使用哪一個？則根據業務和對產品的定位來判斷。

設計規範 | 詳解組件控件結構體系：加載類

本文做者將加載劃分爲6種類型，分別適用於不一樣的場景，各有優缺點。設計師在設計時，能夠根據用戶的使用場景和環境設計適合的加載。

設計師在進行APP設計時，每每會更加專一於界面的佈局、界面和界面之間怎麼跳轉、操做反饋，卻每每忽略掉一個比較重要的環節，就是APP數據加載中的設計。那麼咱們怎麼處理好界面交互中的加載設計，保證體驗無縫銜接，保證用戶沒有漫長的等待感呢？

依舊附上一張腦圖，組件控件分類（若是單純經過組件控件，難以知足功能劃分的需求，因此我將這個範圍擴大，分類裏面不只僅含有組件和控件，因此請不要在乎細節。）

什麼是加載？

用戶在客戶端的界面上進行操做，客戶端發送請求到服務器，服務器處理請求，返回數據給客戶端，並顯示給用戶。這一過程成爲加載。區別於緩存，緩存是主動的，加載爲被動的。

全屏加載

這種加載比較簡單，通常運用在頁面內容比較單一的狀況下，因此直接一次性加載完全部數據後再顯示內容。

一、優勢

能保證內容的總體性，所有加載完纔可以系統化的閱讀。

二、缺點

比較明顯，就是有很是強烈的等待感，3s以上會產生焦躁情緒。因此，在地鐵等信號很差的地方，使用手機網頁獲取內容實在是比較災難的一件事情。

三、使用場景

三、使用場景

適用於有大量圖片或視頻的APP，如電商類或在線視頻類APP。

上述一共將加載劃分爲6種類型。6種類型適用於不一樣的場景，各有優缺點。設計師在設計時，能夠根據用戶的使用場景和環境設計適合的加載。

設計規範 | 詳解組件控件結構體系：網絡異常類

從用戶使用狀況來講，在用戶在使用APP過程當中，任何操做均可能出現網絡異常的狀況。那麼，針對網絡異常狀況一共有哪幾種設計呢？哪些狀況使用全局組件，哪些狀況使用局部組件呢？本文做者就按照三種網絡狀況，總結了對應設計形式。

網絡異常無非就3種狀況：第一種是網絡切換：WiFi網絡環境切換到了移動數據網絡環境。第二種是斷網狀況：徹底沒有網絡。第三種就是弱網狀況：2G/E時沒法加載或者上傳數據。

本篇文章，按照三種網絡狀況，總結對應設計形式。

網絡切換：警示框、界面內嵌
斷網狀況：整頁提示、佔位符、toast提示、警示框提示、界面內嵌、tips提示
弱網狀況：整頁提示、佔位符、界面內嵌、tips提示

網絡切換

定義

一些須要消耗大量流量的APP的操做，例如開啓視頻、直播、音樂等，爲保證l同時節省用戶流量會給予用戶友好的提示

使用場景

當網絡狀態從WIFI切換到3G/4G時，爲了防止用戶操做大量流量，APP會採用必定的設計形式來告訴用戶，網絡狀態切換了，請當心，防止用戶浪費流量（土豪除外）。固然從非WIFI狀態下開啓消耗大量流量操做時，也會使用警示框、界面內嵌設計形式，但這不在今天討論網絡切換範圍以內。

經常使用的設計形式

1. 警示框

阻斷式操做，告知用戶當前網絡狀況，繼續使用的話會浪費大量流量。用戶點擊警示框上的操做才能夠繼續使用。

（1）定義

警告框傳達應用或設備某種狀態的重要信息，而且經常須要用戶來進行操做。

規範中，對警告框包含的元素作出了以下規定：標題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。同時，警告框的樣式都是磨砂效果的圓角白框，不可更改。

（2）建議

必須包含標題，有時候會包含正文文本
包含一個或多個按鈕

2. 界面內嵌

將須要消耗的移動數據提示內嵌到視頻、直播界面裏面，給予用戶提示。這樣的好處是非強阻斷式，在告知用戶的同時還說明消耗的流量數據。

（1）定義

將提示性文案內嵌到界面中，以此達到告知用戶的目的。界面內嵌的好處是減小界面層級干擾，讓用戶更專一的獲取信息。

（2）建議

文案簡潔，易懂
內嵌文案應該放在界面用戶關注的佈局界面中

斷網狀況

定義

移動設備沒有網絡數據，致使沒法上傳和下載數據，從而沒法正常的使用產品。

使用場景

用戶在使用APP的時候，進行操做時，沒法正常的使用產品。

經常使用的設計形式

Tips提示
警示框提示
界面內嵌
佔位符
toast提示
整頁提示

1. Tips提示

（1）定義

通常出如今首頁導航欄或搜索欄之下。經過tips提示告知用戶網絡異常。

（2）形式

有的Tips一直存在；
有的Tips出現1-2s後消失，用戶操做後再次出現；
有的Tips點擊會跳轉到系統網絡設置界面

例如，微信的Tips就是一直存在，點擊跳轉到提示的新界面。Instagtam出現1-2s後消失。

2. 警示框

阻斷式操做，告知用戶如何經過操做得到正常使用的提示

（1）定義

（2）建議

彈框按鈕提供前往設置的跳轉按鈕
文案可清晰簡潔的提供解決方案

3. 界面內嵌

當整個頁面內容都由於網絡異常致使未加載成功，採用界面內嵌的提示的方式。

相對於整頁提示的優勢在於保留了界面的大體結構。

界面內嵌的設計樣式包括：網絡異常提示文案、從新鏈接網絡的button（非必需）。

4. 佔位符

（1）定義

當因爲網絡信號很差或網絡中斷等緣由引發頁面數據沒法調取狀態時，咱們能夠事先在App預設好圖標或者佔位符來代替加載的文字、數字、圖片等數據。

（2）用途

告知用戶此處有內容，只是尚未加載出來
佔位符能夠從樣式上看出界面佈局大概是那些內容

5. Toast提示

（1）使用場景

當網絡中斷時，用戶點擊界面進行操做時，出現Toast響應。t提示用戶網絡異常。讓用戶的行爲即便在網絡異常時獲得反饋。

6. 整頁提示

（1）定義

整頁異常的設計樣式包括三部分：icon或者插畫形式；網絡異常文案；從新鏈接刷新網絡的button。

（2）用途

使用過程當中網絡忽然中斷沒法正常靜載時給出的提示。

（3）建議

當前場景相關的插畫/圖片
當前場景解說文案
當前場景的操做引導

弱網狀況

弱網狀況和斷網狀況的場景基本一致，常見的有：整頁提示、佔位符、界面內嵌、tips提示，故不作討論介紹

設計規範 | 詳解組件控件結構體系：空數據類

設計師或產品經理在設計產品原型時，大部分狀況都是先設計主流程的主界面，而後設計其餘各個場景的界面，最後設計異常界面、空數據界面等等。那麼，空數據界面一共有哪幾種類型呢？這篇文章咱們來看一下設計規範中的空數據類型。

空數據類型一共有三類：

初始狀態
清空狀態
出錯狀態

初始狀態

定義：初始化狀態，沒有任何內容，須要用戶進行某種操做才能產生內容的界面。

用途：提示用戶須要進行某種操做纔會出現內容，並非沒有內容。

例如京東App，當用戶沒有把商品加入購物車時，進入購物車界面，會給出提示購物車界面爲空，給出用戶提示後，給出相對應的入口按鈕，引導用戶操做。若是直接給出一個空白界面，那樣的話用戶可能覺得該界面出bug了，不知所措。

Gmail直接用一個插畫提示用戶收件箱爲空。

初始狀態的組成部分：

相關插畫/圖片
解說文案
操做入口按鈕或可點擊文字（非必須）

通常對於初始狀態的設計，常規作法是簡單的插畫配合簡潔的文案，必要的時候給出引導用戶操做行爲的按鈕。

如今流行的設計趨勢是插畫越輕量越簡單越好，以避免搶奪了文案信息。

清空狀態

定義：經過刪除或其餘用戶操做，清空當前的頁面內容，產生了空界面，這時候須要有明確的提示，且告知用戶該如何處理。

用途：提示用戶該界面爲空數據的緣由是用戶刪除了內容。

清空狀態是對初始狀態的進一步細化。清空狀態的界面和初始狀態設計很類似，惟一不一樣的是文案的提示。

清空狀態的組成部分：

相關插畫/圖片
宣傳解說文案的
操做入口按鈕或可點擊文字（非必須）

有的產品設計直接把清空狀態的界面按照初始狀態來設計，這樣也是能夠的，缺點就是沒有告知用戶產生空狀態緣由是初始化仍是清空所致。

出錯狀態

定義：因爲網絡、服務器或者沒有找他其餘結果等緣由致使沒法加載內容，產生了空界面，這時候須要有明確的提示，且告知用戶該如何處理。用戶操做反饋的無結果界面也能夠用這樣的思路來設計。

用途：告知用戶當前產生的空界面是因爲某些緣由出錯所致。

例如知乎在網絡異常時，頁面加載不出來，出現空數據頁面，給出文案提示和點擊重試按鈕。微博國際版也給出文案提示，小插畫和點擊按鈕

在對信息進行搜索，沒法獲取數據時，產生的空數據界面。例如iOS原生郵件在搜索不到內容時，產生的空數據狀態界面。而網易考拉在搜索無結果時，給出新的解決方案。

原有界面內容被刪除時，用戶點擊進入時出現的出錯狀態。例如QQ瀏覽器，經過新聞列表點擊，進入新聞詳情，因爲文章被刪除，會出現出錯狀態的提示。

設計規範 | 詳解組件控件結構體系：提示類

本篇文章講解功能分類之提示類，若是我是寫信息的提示類，那麼裏面涉及到的會有toast、警示框、界面內嵌、loading加載、tips提示、空數據界面、卡片等等，這就和以前講的有重複。因此，這裏寫的提示類是消息的提示類，而不是信息的提示類。

提示性類型一共有四類：

紅點提示
數字提示
系統推送提示
彈框提示

紅點提示

用途

經過紅點引導用戶點擊，從而達到要給用戶傳達的信息。

使用場景

1. 以產品的目標來講，新功能更新想讓用戶知道並去使用，從而使用紅點提示用戶。

2. 新消息的提示，經過紅點讓用戶直觀的知道有信息。

3. 由於業務須要，經過紅點讓用戶去點擊操做。

舉例說明

微信讀書，列表關注欄出現紅點，點擊進去，新增微信好友出現紅點。這樣的使用是爲了讓用戶加微信讀書好友從而增長微信讀書的社交化和粘度。這個屬於使用場景第三條。

QQ日跡列表出現紅點，在日跡界面，有新增動態，故經過紅點提示。這個屬入使用場景第二條。

MIX商店有新的更新，經過紅點引導用戶點擊消費，從而知足業務目標。這個屬於使用場景第三條。

數字提示

用途

經過數字讓用戶知道新更新的信息數量，同時引導用戶去點擊，從而達到要給用戶傳達的信息。

使用場景

1. 經過數字來提示用戶新功能的數量。

2. 經過數字來提示用戶收到信息的數量。

3. 桌面圖標的數量讓用戶在進去App以前就知道收到的信息數量。

舉例說明

Messenger在tab 我經過數字提示，讓用戶知道列表功能的數量。這屬於使用場景的第一條。

微信消息列表經過數字讓用戶知道，收到對方多少條消息。這屬於使用場景的第二條。

iOS 桌面圖標的數量讓用戶在進去App以前就知道收到的信息數量。這屬於使用場景的第三條。

紅點和數字提示二者既有相同點又有不一樣點

相同點：都是提示用戶，從而引導用戶去點擊達到信息傳導的做用。
不一樣點：數字提示相對於紅點提示，提示強度更大。同時數字傳達用戶的信息更完整，具體到數量。

系統推送提示

用途

前提是iOS和安卓系統推送權限打開，經過系統推送讓用戶獲取到APP要傳達的信息，屬於強提示類。用戶經過推送消息進入App獲取消息，提升產品的活躍度和使用粘性。

使用場景

1. 重要信息須要提示用戶，例如郵件，IM。當用戶收到新消息時，系統自動推送。

2. 知足運營需求，經過系統推送消息給用戶傳達運營促銷活動，吸引用戶去消費。

舉例說明

1. 若是網易郵箱的系統權限打開時，會收到系統推送，屬於使用場景第一條

2. 貓眼有新電影上映時，會有系統推送消息，引導用戶去點擊消費，這樣的行爲也提升了用戶粘度。屬於使用場景第二條。

彈框提示

用途

彈框可讓用戶知道一些重要的消息，同時經過彈框爲某些業務提供一個流量入口。

使用場景

1. 運營需求，經過彈框的提示語和入口，從而達到流量導入的效果

2. 重要功能重要信息的入口。

3. 用於重要信息的提示，單純的提示信息的做用。

舉例說明

支付寶的信用生活界面，用戶進入後會給出一個彈框提示，引導用戶去搶紅包。知足運營需求。這屬於使用場景的第一條。

QQ的H5頁面經過彈框引導用戶去下載使用QQ音樂，這屬於使用場景的第二條。

QQ的服務號升級，經過彈框讓用戶知曉，這屬於使用場景的第三條。

設計規範 | 詳解組件控件結構體系：操做類

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

因爲涉及到操做類的組件控件實在太多太多了，我這裏劃分歸類的是典型的同時和以前分組不重複。

操做類一共含如下八類：

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

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。

設計規範 | 詳解組件控件結構體系：單元控件類

本篇文章是設計規範中的單元控件類，也是設計規範系列的最後一篇，繼這個系列以後我會寫一些超有意思的文章，敬請期待哦！

單元控件類一共含如下7類：

搜索
開關
頁面控制
圖標
滑塊
進度
選框

1. 搜索

（1）定義

用戶經過輸入的關鍵詞，搜索到用戶想要的信息。

（2）用途

當應用內包含大量的信息的時候，用戶經過搜索快速地定位到特定的內容。

（3）使用說明

微信兩個版本的搜索，很好的遵循了兩個平臺的規範。對於搜索的規範，iOS 官方給出的是隱藏搜索欄，用戶經過下拉展現搜索欄。Android是經過搜索圖標控件引導用戶點擊出現搜索欄。

2. 開關

（1）定義

開關按鈕展現了兩個互斥的選項和狀態。

（2）用途

僅在列表中用，在列表中使用開關按鈕來讓用戶從某一項的兩個互斥狀態中指定一個，好比是/否、開/關。

特性：

含有開關的對象名稱
開關按鈕兩種互斥狀態

3. 頁面控制器

（1）定義

頁面控件告訴用戶當前共打開了幾個視圖（多長的視圖），還有它們正處在其中的哪個（進度）。

（2）用途

告訴用戶當前有多少個視圖（多長的視圖），還有它們處在其中哪個（進度）。

（3）使用場景

例如知乎在瀏覽器中打開，用戶瀏覽頁面時，經過滑條用戶很容易知曉當前界面的視圖有多長，以及所處在哪裏。京東的首頁輪播，經過頁面控制器訴用戶當前共打開了幾個視圖，還有它們正處在其中的哪個。

特性：

包含一系列圓點，圓點的個數表明當前打開的視圖數量（從左到右，這些圓點表明了視圖打開的前後順序）
避免顯示太多點，建議不超過6個，通常超過6個很難讓用戶一目瞭然

PS：在iOS 規範中，把頁面中的滑條（知乎移動網頁端的舉例）也當作頁面控制器。

4. 圖標

（1）定義

界面中的一種圖形元素，用來執行應用程序中的定義的操做。

（2）用途

當單擊它時，能執行指定的功能操做。

特性：

由圖標和/或文字組成
文字及圖標必須能讓人輕易的識別爲按鈕並輕易地點擊後展現的內容聯繫起來

5. 滑塊

定義：滑塊控件(Sliders，簡稱滑塊)可讓咱們經過在連續或間斷的區間內滑動錨點來選擇一個合適的數值。區間最小值放在左邊，對應的，最大值放在右邊。

滑塊能夠在滑動條的左右兩端設定圖標來反映數值的強度。這種交互特性使得它在設置諸如音量、亮度、色彩飽和度等須要反映強度等級的選項時成爲一種極好的選擇。

連續滑塊：在不要求精準、以主觀感受爲主的設置中使用連續滑塊，讓使用者作出更有意義的調整。

帶有可編輯數值的滑塊：用於使用者須要設定精確數值的設置項，能夠經過點觸縮略圖、文本框來進行編輯。

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

附帶數值標籤的滑塊：用於使用者須要知曉精確數值的設置項。

6. 進度

定義：在刷新加載或者提交內容時，須要一個時間過分，在作這個過程當中須要一個進度和動態的設計。

儘量地減小視覺上的變化，儘可能使應用加載過程使人愉快。每次操做只能由一個活動指示器呈現，例如，對於刷新操做，不能即用刷新條，又用動態圓圈來指示。

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

在操做中，對於完成部分不肯定的狀況下，用戶須要等待必定的時間，無需告知後用戶臺的狀況以及所需時間，這時可使用不肯定的指示器。

線形進度條：應該放置在頁眉或某塊區域的邊緣。線形進度指示器應始終從0％到100％顯示，毫不能從高到低反着來。若是一個隊列裏有多個正在進行的操做，使用一個進度指示器來指示總體的所須要等待的時間。

圓形進度指示器：

7.選框

定義：用戶對單個/多個選項進行選擇。

選框分爲兩類：單選框和複選框。

單選框：只容許用戶從一組選項中選擇一個。

複選框：容許用戶從一組選項中選擇多個。

若是須要在一個列表中出現多個 on/off 選項，複選框是一種節省空間的好方式。

若是隻有一個 on/off 選擇，不要使用複選框，而應該替換成開關。