一、控件和組件

1. 什么是控件，什么是組件？

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

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

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

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

一、導航類組件控件規范

導航系統一般分為以下幾類：底部標簽式導航、分段控制式導航、列表式導航、下拉菜單式導航、抽屜式導航、宮格式導航和卡片式導航。

1. 導航的作用有哪些？

結構化產品內容和功能

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

?突出核心功能

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

扁平化用戶任務路徑

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

2. 底部標簽式導航

（1）定義

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

（2）特點

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

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

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

（3）優點

它可以承載重要性和頻率處于同一級別的功能模塊、信息或任務。

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

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

他具有包容性，可以將其他信息的框架溶解掉，構建出容量更大的模塊、信息或任務架構。也就是說，很多app的整體架構都是標簽式結構，然后又使用其他的架構去承載界面中的具體信息。

（4）缺點

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

標簽欄占用了一定的空間，所以減少了頁面的信息承載量。有些產品為了更好地展示頁面信息，會使用一種隱藏的標簽欄，這種標簽欄會在用戶上滑閱讀時隱藏，下滑返回時再顯示。這種做法確實照顧了頁面的信息展示，但是也要具體產品慎重看待，因為他可能會讓導航失去便捷性從而降低切換效率。

3. 舵式導航

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

除去兩側4個標簽之外，其他重要的標簽都隱藏在舵式導航中，或者將那些重要性高、使用相當頻繁的功能入口放在里面。

但是，舵式導航本身是存在設計矛盾的。在舵式導航中位置的應該是重要性和使用頻率高的功能，既然他如此重要，為什么要隱藏在舵式導航中？這些功能放在二級界面中相當于被埋起來了，會增加用戶的記憶負擔和操作負荷。

4. 分段控制式導航

（1）定義

通常用于展示同意模塊下不同類別的信息或者篩選不用模塊的信息。

（2）特點

一般為二級導航。

（3）優點

可以很好地扁平化信息層級，并同時提供了進入不容信息分類或模態的入口。

用戶可以迅速實現同一模塊下不同類別信息之間的切換并且不會迷失方向。

（4）缺點

分段控制式導航位于頂部，切換起來不方便，雖然ios有左右滑動手勢，但是很多用戶并不知道。

占據空間，導致屏幕可展現區域變少。

5.列表式導航

（1）定義

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

（2）特點

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

多用于輔助主導航來展現耳機甚至更多層次的內容。

適用于大量的信息分類展現，空間利用效率高，可以展示大量的條目。

（3）優點

列表式結構具有很強的延展性，可以不斷地增強信息。而且一般來講，它的信息格式都比較一致，調整的彈性高，抗信息沖擊力也很強。

它的導航效率高，可以引入字母索引。

它可以很方便的進行分組分類。

適合寬而深的信息層級。

（4）缺點

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

如果列表中蘊含的信息量比較龐大，往往需要加入搜索功能或者索引，否則用戶會遇到尋找信息的困難。

6.下拉菜單式導航

（1）定義

通常用于篩選同一模塊下的不同類別的信息，或者是快速啟動某些常用的功能模塊。

（2）特點

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

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

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

微博二級導航采用菜單式導航的形式。

7.抽屜式導航

（1）定義

通常針對產品偏沉浸式閱讀的情況下，其他模塊切換頻率低，可采用此導航形式。

（2）特點

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

若該產品追求核心內容的突出。可弱化其他信息的展示時，即可采用此導航形式。

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

（2）優點

用戶可以將注意力放在首頁，減少其他類型的導航帶來分散用戶注意力的情況，給用戶更沉浸式的操作感和閱讀感。

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

（3）缺點

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

如果產品框架比較大，需要多功能同時推廣的話。不適合用該導航。

8. 宮格式導航

（1）定義

類似于手機桌面各個應用入口的導航方式。每個入口往往是比較獨立的信息內容，用戶進入一個入口后，只處理與此入口相關的內容，如果要跳轉至其他入口，必須要先回到入口總界面。

（2）特點

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

（3）優點

宮格式結構可以作為信息或平臺的入口，為產品或項目信息提供聚合的載體。

他適合承載訂閱類產品或眾多屬性差異非常明顯的分類信息。

他可以劃分多個內容、多個模式，由不同團隊獨立開發每個模塊再聚合。

在具有較強的延展性，可以無限擴展內容。

（4）缺點

用戶選擇壓力大。

用戶無法第一時間看到信息，由于宮格式結構是信息或平臺的入口，所以具體的信息往往隱藏在下一級界面。

9. 卡片式導航

（1）定義

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

（2）特點

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

（3）優點

對運營量的要求比較低，而且單個條目的轉發率會相應的提高，如果產品的運營量較低或需要較高的條目轉化率，可以使用這種設計。

（4）缺點

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

二、引導類

1.引導的定義和作用

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

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

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

2.引導頁（幻燈片）式引導

（1）定義

一般出現在app首次啟動的時候，是一系列宣傳、解說、幫助等頁面的組合。

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

一方面從產品的角度考慮，產品希望用戶能夠方便得理解產品的特性，減少對產品的陌生感；另一方面，從用戶角度來看，一個應用里好的引導不僅能使他們對一個應用有好感，也可能更容易得留住他們。

（2）用途

讓用戶快速了解是一個什么樣的產品。

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

（3）建議

文案簡單易懂，重點突出

內容可以是圖片、視頻、插畫漫畫等，且內容和文案要有一定的關聯性。

分頁符一般是2-5個。

提供可以直接跳過引導頁的操作。不強制用戶一定全部瀏覽。

（4）使用場景

用戶第一次使用時，產品通過引導頁讓用戶快速了解產品的主功能。

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

3.浮層式引導

（1）定義

一種輕量級單目標性很強的引導方式，一般是浮層結合文案的，樣式類似氣泡的引導方式。

（2）用途

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

提示用戶重要功能或一些隱藏操作。

（3）建議

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

一般為非模態浮層，大概顯示3秒左右自動消失，對用戶干擾較小。

文案上盡量簡潔，表意清晰，建議控制20字以內。

（4）使用場景

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

用于新手引導。

4.嵌入式引導

（1）定義

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

（2）用途

讓用戶了解當前界面或者操作處于何種狀態，并指導接下來如何操作使用。

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

（3）建議

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

（4）使用場景

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

初始狀態時，由于界面數據為空，這時候通過嵌入式引導提示用戶操作。

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

三、加載類

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

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

1.什么是加載？

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

2.全屏加載

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

（1）優點

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

（2）缺點

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

（3）使用場景

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

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

3.分布加載

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

（1）優點

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

（2）缺點

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

（3）使用場景

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

4.下拉加載

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

（1）優點

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

（2）缺點

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

（3）使用場景

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

5.上拉加載

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

（1）優點

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

（2）缺點

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

（3）使用場景

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

5. 預加載

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

（1）優點

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

（2）缺點

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

（3）使用場景

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

6. 智能加載

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

（1）優點

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

（2）缺點

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

（3）使用場景

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

上述一共將加載劃分為6種類型。6種類型適用于不同的場景，各有優缺點。設計師在設計時，可以根據用戶的使用場景和環境設計適合的加載。

四、網絡異常類

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

按照三種網絡情況，總結對應設計形式。

網絡切換：警示框、界面內嵌

斷網情況：整頁提示、占位符、toast提示、警示框提示、界面內嵌、tips提示

弱網情況：整頁提示、占位符、界面內嵌、tips提示

1.網絡切換

（1）定義

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

（2）使用場景

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

（3）常用的設計形式

a.警示框

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

①定義

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

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

②建議

必須包含標題，有時候會包含正文文本

包含一個或多個按鈕

b.界面內嵌

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

（1）定義

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

（2）建議

文案簡潔，易懂

內嵌文案應該放在界面用戶關注的布局界面中

2.斷網情況

（1）定義

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

（2）使用場景

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

（3）常用的設計形式

a.Tips提示

①定義

一般出現在首頁導航欄或搜索欄之下。通過tips提示告知用戶網絡異常。

②場景

有的Tips一直存在；

有的Tips出現1-2s后消失，用戶操作后再次出現；

有的Tips點擊會跳轉到系統網絡設置界面，

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

b.警示框

阻斷式操作，告知用戶如何通過操作獲得正常使用的提示

①定義

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

②建議

彈框按鈕提供前往設置的跳轉按鈕

文案可清晰簡潔的提供解決方案

c.界面內嵌

當整個頁面內容都因為網絡異常導致未加載成功，采用界面內嵌的提示的方式。

相對于整頁提示的優點在于保留了界面的大致結構。

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

d.占位符

①定義

當由于網絡信號不好或網絡中斷等原因引起頁面數據無法調取狀態時，我們可以事先在App預設好圖標或者占位符來代替加載的文字、數字、圖片等數據。

②用途

當由于網絡信號不好或網絡中斷等原因引起頁面數據無法調取狀態時，我們可以事先在App預設好圖標或者占位符來代替加載的文字、數字、圖片等數據。

e.Toast提示

①使用場景

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

f. 整頁提示

①定義

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

②用途

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

③建議

當前場景相關的插畫/圖片

當前場景解說文案

當前場景的操作引導

3.弱網情況

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

五、空數據類

空數據類型一共有三類：

初始狀態

清空狀態

出錯狀態

1.初始狀態

（1）定義

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

（2）用途

提示用戶需要進行某種操作才會出現內容，并不是沒有內容。

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

網易郵箱直接用一個插畫提示用戶收件箱為空。

（3）初始狀態的組成部分

相關插畫/圖片

解說文案

操作入口按鈕或可點擊文字（非必須）

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

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

2.清空狀態

（1）定義

通過刪除或其他用戶操作，清空當前的頁面內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。

（2）用途

提示用戶該界面為空數據的原因是用戶刪除了內容。

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

（3）清空狀態的組成部分

相關插畫/圖片

宣傳解說文案的

操作入口按鈕或可點擊文字（非必須）

有的產品設計直接把清空狀態的界面按照初始狀態來設計，這樣也是可以的，缺點就是沒有告知用戶產生空狀態原因是初始化還是清空所致。

3. 出錯狀態

（1）定義

由于網絡、服務器或者沒有找他其他結果等原因導致無法加載內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。用戶操作反饋的無結果界面也可以用這樣的思路來設計。

（2）用途

告知用戶當前產生的空界面是由于某些原因出錯所致。

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

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

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

六、提示類

提示性類型一共有四類：

紅點提示

數字提示

系統推送提示

彈框提示

1.紅點提示

（1）用途

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

（2）使用場景

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

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

因為業務需要，通過紅點讓用戶去點擊操作。

（3）舉例說明

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

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

2. 數字提示

（1）用途

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

（2）使用場景

通過數字來提示用戶新功能的數量。

通過數字來提示用戶收到信息的數量。

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

（3）舉例說明

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

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

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

（4）紅點與數字提示兩者既有相同點又有不同點

相同點：都是提示用戶，從而引導用戶去點擊達到信息傳導的作用。

不同點：數字提示相對于紅點提示，提示強度更大。同時數字傳達用戶的信息更完整，具體到數量。

3.系統推送提示

（1）用途

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

（2）使用場景

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

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

（3）舉例說明

如果即刻的系統權限打開時，會收到系統推送，屬于使用場景第一條

唯品會有新活動時，會有系統推送消息，引導用戶去點擊消費，這樣的行為也提高了用戶粘度。屬于使用場景第二條。

4.彈框提示

（1）用途

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

（2）使用場景

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

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

用于重要信息的提示，單純的提示信息的作用。

（3）舉例說明

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

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

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

七、單元控件類

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

搜索

開關

頁面控制

圖標

滑塊

進度

選框

1. 搜索

（1）定義

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

（2）用途

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

（3）使用說明

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

2.開關

（1）定義

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

（2）用途

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

（3）特性

含有開關的對象名稱

開關按鈕兩種互斥狀態

3.頁面控制器

（1）定義

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

（2）用途

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

（3）使用場景

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

（4）特性

包含一系列圓點，圓點的個數代表當前打開的視圖數量（從左到右，這些圓點代表了視圖打開的先后順序）

避免顯示太多點，建議不超過6個，一般超過6個很難讓用戶一目了然

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

4. 圖標

（1）定義

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

（2）用途

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

（3）特性

由圖標和/或文字組成

文字及圖標必須能讓人輕易的識別為按鈕并輕易地點擊后展示的內容聯系起來

5.滑塊

（1）定義

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

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

（2）連續滑塊

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

（3）帶有可編輯數值的滑塊

用于使用者需要設定精確數值的設置項，可以通過點觸縮略圖、文本框來進行編輯。

（4）間續滑塊

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

（5）附帶數值標簽的滑塊

用于使用者需要知曉精確數值的設置項。

6.進度

（1）定義

在刷新加載或者提交內容時，需要一個時間過度，在做這個過程中需要一個進度和動態的設計。

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

（2）線形進度指示器

應該放置在頁眉或某塊區域的邊緣。線形進度指示器應始終從0％到100％顯示，絕不能從高到低反著來。如果一個隊列里有多個正在進行的操作，使用一個進度指示器來指示整體的所需要等待的時間。

（3）圓形進度指示器

7. 選框

（1）定義

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

（2）單選框

只允許用戶從一組選項中選擇一個。

（3）復選框

允許用戶從一組選項中選擇多個。

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

如果只有一個 on/off 選擇，不要使用復選框，而應該替換成開關。