起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識設計規(guī)范 | 詳解組件控件結構體系：單元控件類
本篇文章是設計規(guī)范中的單元控件類，也是設計規(guī)范系列的最后一篇，繼這個系列之后我會寫一些超有意思的文章，敬請期待哦！
單元控件類一共含以下7類：
- 搜索
- 開關
- 頁面控制
- 圖標
- 滑塊
- 進度
- 選框
依舊附上一張腦圖，組件控件分類（如果單純通過組件控件，難以滿足功能劃分的需求，所以我將這個范圍擴大，分類里面不僅僅含有組件和控件，所以請不要在意細節(jié)。）
1. 搜索
（1）定義
用戶通過輸入的關鍵詞，搜索到用戶想要的信息。
（2）用途
當應用內包含大量的信息的時候，用戶通過搜索快速地定位到特定的內容。
（3）使用說明
微信兩個版本的搜索，很好的遵循了兩個平臺的規(guī)范。對于搜索的規(guī)范，iOS 官方給出的是隱藏搜索欄，用戶通過下拉展示搜索欄。Android是通過搜索圖標控件引導用戶點擊出現(xiàn)搜索欄。
2. 開關
（1）定義
開關按鈕展示了兩個互斥的選項和狀態(tài)。
（2）用途
僅在列表中用，在列表中使用開關按鈕來讓用戶從某一項的兩個互斥狀態(tài)中指定一個，比如是/否、開/關。
特性：
- 含有開關的對象名稱
- 開關按鈕兩種互斥狀態(tài)
3. 頁面控制器
（1）定義
頁面控件告訴用戶當前共打開了幾個視圖（多長的視圖），還有它們正處在其中的哪一個（進度）。
（2）用途
告訴用戶當前有多少個視圖（多長的視圖），還有它們處在其中哪一個（進度）。
（3）使用場景
例如知乎在瀏覽器中打開，用戶瀏覽頁面時，通過滑條用戶很容易知曉當前界面的視圖有多長，以及所處在哪里。京東的首頁輪播，通過頁面控制器訴用戶當前共打開了幾個視圖，還有它們正處在其中的哪一個。
特性：
- 包含一系列圓點，圓點的個數(shù)代表當前打開的視圖數(shù)量（從左到右，這些圓點代表了視圖打開的先后順序）
- 避免顯示太多點，建議不超過6個，一般超過6個很難讓用戶一目了然
PS：在iOS 規(guī)范中，把頁面中的滑條（知乎移動網(wǎng)頁端的舉例）也當做頁面控制器。
4. 圖標
（1）定義
界面中的一種圖形元素，用來執(zhí)行應用程序中的定義的操作。
（2）用途
當單擊它時，能執(zhí)行指定的功能操作。
特性：
- 由圖標和/或文字組成
- 文字及圖標必須能讓人輕易的識別為按鈕并輕易地點擊后展示的內容聯(lián)系起來
5. 滑塊
定義：滑塊控件(Sliders，簡稱滑塊)可以讓我們通過在連續(xù)或間斷的區(qū)間內滑動錨點來選擇一個合適的數(shù)值。區(qū)間最小值放在左邊，對應的，最大值放在右邊。
滑塊可以在滑動條的左右兩端設定圖標來反映數(shù)值的強度。這種交互特性使得它在設置諸如音量、亮度、色彩飽和度等需要反映強度等級的選項時成為一種極好的選擇。
連續(xù)滑塊：在不要求精準、以主觀感覺為主的設置中使用連續(xù)滑塊，讓使用者做出更有意義的調整。
帶有可編輯數(shù)值的滑塊：用于使用者需要設定精確數(shù)值的設置項，可以通過點觸縮略圖、文本框來進行編輯。
間續(xù)滑塊：間續(xù)滑塊會恰好咬合到在滑動條上平均分布的間續(xù)標記上。在要求精準、以客觀設定為主的設置項中使用間續(xù)滑塊，讓使用者做出更有意義的調整。應當對每個間續(xù)標記(tick mark)設定一定的等級區(qū)間進行分割，使得其調整效果對于使用者來說顯而易見。這些生成區(qū)間的值應當是預先設定好的，使用者不可對其進行編輯。
附帶數(shù)值標簽的滑塊：用于使用者需要知曉精確數(shù)值的設置項。
6. 進度
定義：在刷新加載或者提交內容時，需要一個時間過度，在做這個過程中需要一個進度和動態(tài)的設計。
盡可能地減少視覺上的變化，盡量使應用加載過程令人愉快。每次操作只能由一個活動指示器呈現(xiàn)，例如，對于刷新操作，不能即用刷新條，又用動態(tài)圓圈來指示。
指示器的類型有兩種：線形進度指示器和圓形進度指示器。可以使用其中任何一項來指示確定性和不確定性的操作。
在操作中，對于完成部分不確定的情況下，用戶需要等待一定的時間，無需告知后用戶臺的情況以及所需時間，這時可以使用不確定的指示器。
線形進度條：應該放置在頁眉或某塊區(qū)域的邊緣。線形進度指示器應始終從0％到100％顯示，絕不能從高到低反著來。如果一個隊列里有多個正在進行的操作，使用一個進度指示器來指示整體的所需要等待的時間。
圓形進度指示器：
7.選框
定義：用戶對單個/多個選項進行選擇。
選框分為兩類：單選框和復選框。
單選框：只允許用戶從一組選項中選擇一個。
復選框：允許用戶從一組選項中選擇多個。
如果需要在一個列表中出現(xiàn)多個 on/off 選項，復選框是一種節(jié)省空間的好方式。
如果只有一個 on/off 選擇，不要使用復選框，而應該替換成開關。
相關閱讀
設計規(guī)范 | 詳解組件控件結構體系：網(wǎng)絡異常類
設計規(guī)范 | 詳解組件控件結構體系：空數(shù)據(jù)類
#專欄作家#
UX，微信公眾號：UEDC，人人都是產(chǎn)品經(jīng)理專欄作家。華為ITUX交互組組長。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載
題圖來自 Pexels，基于 CC0 協(xié)議
iOS的搜索框早就一直顯示了，不帶隱藏功能
你殺掉進程，重新進去看看。默認隱藏，下拉才出現(xiàn)