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

2018年4月16日luodonggan

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

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

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

如果單純通過組件控件，難以滿足功能劃分的需求，所以我將這個範圍擴大，分類裏面不僅僅含有組件和控件，所以請不要在意細節。

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

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

導航的作用有哪些？

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

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

2. 突出核心功能

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

3. 扁平化用戶任務路徑

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

底部標籤式導航

定義

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

特點

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

將常用的導航放在底部，無論用戶單手還是雙手操作都能輕鬆點擊，從而實現各功能模塊之間的跳轉。

標籤式導航有底部導航和頂部導航兩種，底部導航用於全局導航，頂部導航用於二級導航(遵循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數據加載中的設計。那麼我們怎麼處理好界面交互中的加載設計，保證體驗無縫銜接，保證用戶沒有漫長的等待感呢？

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

什麼是加載？

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

全屏加載

這種加載比較簡單，一般運用在頁面內容比較單一的情況下，所以直接一次性加載完所有數據後再顯示內容。

1、優點

能保證內容的整體性，全部加載完才能夠系統化的閱讀。

2、缺點

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

3、使用場景

常見的是從上一級界面進入下一級界面；或者H5中常使用。

一般這種情況會配合有明確進度標識的加載loading。

分步加載

當有文字和圖片時，圖片會比文字加載的慢，這個時候往往文字先加載出來，圖片在加載過程中使用佔位符，直到圖片加載成功。當加載的頁面內容有固定的框架時，可以先加載框架，再加載框架內的內容。通過先加載頁面框架，設計佔位符等形式可以提前讓用戶知道整個界面的架構，提高產品的體驗感。

1、優點

可以幫助用戶快速瞭解整個界面的信息佈局。

2、缺點

開始瞬間會丟失掉重要的關鍵信息，用戶初次感知會認爲產品出問題了

3、使用場景

適用於多圖片佈局的界面。比較消耗流量的界面

下拉加載

用戶下拉時，出現loading動畫，對整個頁面的重新加載刷新。現在很多的產品重新設計loading加載動畫，使得加載過程更加具有情感化，人性化和品牌化。

1、優點

方便用戶刷新當前界面，獲取新數據。

2、缺點

非首屏時，無法進行該手勢操作。

3、使用場景

界面信息可以刷新加載時使用。

上拉加載

用戶在瀏覽界面的過程中，對於未加載的信息，上拉過程中自動加載。

1、優點

把用戶代入無盡瀏覽模式，讓用戶一直向下滾動，不需要手動點擊下一頁。

2、缺點

沒有盡頭，容易迷失，不方便快速索引定位到某個內容。

3、使用場景

適用於瀑布流、長列表、商品列表等情況。

預加載

當用戶在停留一個界面時候，將對應當前界面通向下一界面的所有信息都加載出來。使用這個加載方式會使得使用過程中很快減少時間等待。

1、優點

用戶進入下一級頁面無需加載過程，使用給用戶流暢之感。

2、缺點

在非WiFi情況下，浪費用戶流量。

3、使用場景

信息需要即時刷新，同時預加載後消耗流量較少的場景，例如IM或郵件。這種加載機制的好處就是進入下一頁無需加載，使用流程。

智能加載

根據用戶的網絡情況，加載不同質量的圖片內容。例如在WiFi情況下，加載出來的圖片是高清，在非WiFi情況下加載出來的圖片是標清的。

1、優點

是根據具體場景來控制流量和加載速度。

2、缺點

不一定是真實有效的命中用戶需求。

3、使用場景

適用於有大量圖片或視頻的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)設定一定的等級區間進行分割，使得其調整效果對於使用者來說顯而易見。這些生成區間的值應當是預先設定好的，使用者不可對其進行編輯。

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