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

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時無法載入或者上傳資料。

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

1. 網路切換：警示框、介面內嵌

2. 斷網情況：整頁提示、佔位符、toast提示、警示框提示、介面內嵌、tips提示

3. 弱網情況：整頁提示、佔位符、介面內嵌、tips提示

 

網路切換

定義

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

使用場景

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

常用的設計形式

1. 警示框

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

（1）定義

警告框傳達應用或裝置某種狀態的重要資訊，並且常常需要使用者來進行操作。

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

（2）建議

1. 必須包含標題，有時候會包含正文文字

2. 包含一個或多個按鈕

2. 介面內嵌

將需要消耗的移動資料提示內嵌到視訊、直播介面裡面，給予使用者提示。這樣的好處是非強阻斷式，在告知使用者的同時還說明消耗的流量資料。

（1）定義

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

（2）建議

1. 文案簡潔，易懂

2. 內嵌文案應該放在介面使用者關注的佈局介面中

斷網情況

定義

移動裝置沒有網路資料，導致無法上傳和下載資料，從而無法正常的使用產品。

使用場景

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

常用的設計形式

• Tips提示

• 警示框提示

• 介面內嵌

• 佔位符

• toast提示

• 整頁提示

1. Tips提示

（1）定義

一般出現在首頁導航欄或搜尋欄之下。通過tips提示告知使用者網路異常。

（2）形式

• 有的Tips一直存在；

• 有的Tips出現1-2s後消失，使用者操作後再次出現；

• 有的Tips點選會跳轉到系統網路設定介面

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

2. 警示框

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

（1）定義

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

（2）建議

1. 彈框按鈕提供前往設定的跳轉按鈕

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

3. 介面內嵌

當整個頁面內容都因為網路異常導致未載入成功，採用介面內嵌的提示的方式。

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

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

4. 佔位符

（1）定義

當由於網路訊號不好或網路中斷等原因引起頁面資料無法調取狀態時，我們可以事先在App預設好圖示或者佔位符來代替載入的文字、數字、圖片等資料。

（2）用途

1. 告知使用者此處有內容，只是還沒有加載出來

2. 佔位符可以從樣式上看出介面佈局大概是那些內容

5. Toast提示

（1）使用場景

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

6. 整頁提示

（1）定義

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

（2）用途

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

（3）建議

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

• 當前場景解說文案

• 當前場景的操作引導

弱網情況

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

 

 

設計規範 | 詳解元件控制元件結構體系：空資料類

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

空資料型別一共有三類：

1. 初始狀態

2. 清空狀態

3. 出錯狀態

 

初始狀態

定義：初始化狀態，沒有任何內容，需要使用者進行某種操作才能產生內容的介面。

用途：提示使用者需要進行某種操作才會出現內容，並不是沒有內容。

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

Gmail直接用一個插畫提示使用者收件箱為空。

初始狀態的組成部分：

• 相關插畫/圖片

• 解說文案

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

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

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

清空狀態

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

用途：提示使用者該介面為空資料的原因是使用者刪除了內容。

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

清空狀態的組成部分：

• 相關插畫/圖片

• 宣傳解說文案的

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

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

出錯狀態

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

用途：告知使用者當前產生的空介面是由於某些原因出錯所致。

例如知乎在網路異常時，頁面載入不出來，出現空資料頁面，給出文案提示和點選重試按鈕。微博國際版也給出文案提示，小插畫和點選按鈕

在對資訊進行搜尋，無法獲取資料時，產生的空資料介面。例如iOS原生郵件在搜尋不到內容時，產生的空資料狀態介面。而網易考拉在搜尋無結果時，給出新的解決方案。

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

 

 

 

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

本篇文章講解功能分類之提示類，如果我是寫資訊的提示類，那麼裡面涉及到的會有toast、警示框、介面內嵌、loading載入、tips提示、空資料介面、卡片等等，這就和之前講的有重複。所以，這裡寫的提示類是訊息的提示類，而不是資訊的提示類。

提示性型別一共有四類：

1. 紅點提示

2. 數字提示

3. 系統推送提示

4. 彈框提示

紅點提示

用途

通過紅點引導使用者點選，從而達到要給使用者傳達的資訊。

使用場景

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. 底部操作列表

2. 底部浮層檢視

3. 編輯選單

4. 底部工具欄

5. 按鈕

6. 選擇器

7. 下拉選單

8. 文字框

 

 

1.底部操作列表

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

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

使用場景：例如在iOS原生郵箱，使用者在讀郵件時，點選底部的工具欄中的回覆/轉發，則出現一系列選項功能，使用者通過點選選擇選項功能開始一個新任務。Android中使用者長按出現底部操作列表，使用者可以對一系列功能選擇從而開始新的任務。

特性：

1. 由使用者某個操作行為觸發

2. 包含兩個或以上的按鈕

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

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

底部浮層檢視

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

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

特性：

1. 由使用者某個操作行為觸發

2. 包含兩個或以上的宮格

PS：在Material Design設計規範中，把底部操作列表和我所說的底部浮層檢視，都叫做底部動作條，裡面可以是列表樣式也可以是宮格樣式。Material Design是以功能的維度來劃分，而我是按照元件呈現樣式來區分。所以才有了兩種不同的結果。

編輯選單

定義：使用者通過長按或者點選能撥出一個編輯選單來完成諸如在文字檢視，網頁或者圖片中的剪貼、複製、以及其他一系列的選擇操作。

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

使用場景：例如微信，如果使用者想對話進行復制、轉發、收藏等操作，通過長按撥出編輯選單。

特性：

1. 編輯選單隱藏，只有通過單擊或者長按撥出

2. 以浮層形式存在

註明：在在Material Design設計規範中，將我所說的編輯選單定義為選單，我覺得叫做編輯選單更形象。

底部工具欄

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

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

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

特性：

1. 工具欄始終位於螢幕底部

2. 工具欄操作可以是文字或圖示，也可以是文字加圖示

3. 工具欄運算元量建議不超過5個

按鈕

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

主要的按鈕有三種：懸浮響應按鈕、浮動按鈕、文字按鈕

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

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

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

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

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

1. 如果是非常重要而且應用廣泛需要用上懸浮響應按鈕。

2. 基於放置按鈕的容器以及螢幕上層次堆疊的數量來選擇使用浮動按鈕還是扁平按鈕，避免過多的層疊。

3. 一個容器應該只使用一種型別的按鈕。 只在比較特殊的情況下（比如需要強調一個浮起的效果）才應該混合使用多種型別的按鈕。

選擇器

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

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

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

特性：

1. 選擇器一般位於底部，或者位於選項列表的下面（如iOS 原生日曆）

2. 同一個滑輪間的選項屬性相同

下拉選單

定義：通過點選一個操作按鈕，下拉出一個選單，選單由箭頭、浮層列表組成。

用途：

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

2. 功能入口。

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

文字框

定義：可以讓使用者輸入文字。它們可以是單行的，帶或不帶滾動條，也可以是多行的，並且帶有一個圖示。點選文字框後顯示游標，並自動顯示鍵盤。除了輸入，文字框可以進行其他任務操作，如文字選擇（剪下，複製，貼上）以及資料的自動查詢功能。

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

文字框可以有不同的輸入型別。輸入型別決定文字框內允許輸入什麼樣的字元，有的可能會提示虛擬鍵盤並調整其佈局來顯示最常用的字元。常見的型別包括數字，文字，電子郵件地址，電話號碼，個人姓名，使用者名稱，URL，街道地址，信用卡號碼，PIN碼，以及搜尋查詢。

單行文字框：當文字輸入游標到達輸入區域的最右邊，單行文字框中的內容會自動滾動到左邊。

多行文字框：當游標到達最下緣，多行文字框會自動讓溢位的的文字斷開並形成新的行，使文字可以換行和垂直滾動。

對於多行文字框，使用者在輸入前N行時，文字框的高度自適應，超過N行時，高度不變，出現滑條，例如微信N=5。

 

 

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

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

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

1. 搜尋

2. 開關

3. 頁面控制

4. 圖示

5. 滑塊

6. 進度

7. 選框

 

1. 搜尋

（1）定義

使用者通過輸入的關鍵詞，搜尋到使用者想要的資訊。

（2）用途

當應用內包含大量的資訊的時候，使用者通過搜尋快速地定位到特定的內容。

（3）使用說明

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

2. 開關

（1）定義

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

（2）用途

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

特性：

1. 含有開關的物件名稱

2. 開關按鈕兩種互斥狀態

3. 頁面控制器

（1）定義

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

（2）用途

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

（3）使用場景

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

特性：

1. 包含一系列圓點，圓點的個數代表當前開啟的檢視數量（從左到右，這些圓點代表了檢視開啟的先後順序）

2. 避免顯示太多點，建議不超過6個，一般超過6個很難讓使用者一目瞭然

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

4. 圖示

（1）定義

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

（2）用途

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

特性：

1. 由圖示和/或文字組成

2. 文字及圖示必須能讓人輕易的識別為按鈕並輕易地點選後展示的內容聯絡起來

5. 滑塊

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

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

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

帶有可編輯數值的滑塊：用於使用者需要設定精確數值的設定項，可以通過點觸縮圖、文字框來進行編輯。

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

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

6. 進度

定義：在重新整理載入或者提交內容時，需要一個時間過度，在做這個過程中需要一個進度和動態的設計。

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

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

在操作中，對於完成部分不確定的情況下，使用者需要等待一定的時間，無需告知後用戶臺的情況以及所需時間，這時可以使用不確定的指示器。

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

圓形進度指示器：

7.選框

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

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

單選框：只允許使用者從一組選項中選擇一個。

複選框：允許使用者從一組選項中選擇多個。

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

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