Echo ：本文本篇文章講解設(shè)計(jì)規(guī)范中的單元控件類，也是設(shè)計(jì)規(guī)范系列的最后一篇，繼這個(gè)系列之后我會(huì)寫一些超有意思的文章，敬請(qǐng)期待哦！

系列文章：?

1. 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之提示類》
2. 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之加載類》
3. 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之網(wǎng)絡(luò)異常類》
4. 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之引導(dǎo)類》
5. 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之導(dǎo)航類》
6. 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之空數(shù)據(jù)類》
7. 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之操作類》

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

• 搜索
• 開關(guān)
• 頁面控制
• 圖標(biāo)
• 滑塊
• 進(jìn)度
• 選框

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

一. 搜索

定義：

用戶通過輸入的關(guān)鍵詞，搜索到用戶想要的信息。

用途：

當(dāng)應(yīng)用內(nèi)包含大量的信息的時(shí)候，用戶通過搜索快速地定位到特定的內(nèi)容。

使用說明：

微信兩個(gè)版本的搜索，很好的遵循了兩個(gè)平臺(tái)的規(guī)范。對(duì)于搜索的規(guī)范，iOS 官方給出的是隱藏搜索欄，用戶通過下拉展示搜索欄。Android是通過搜索圖標(biāo)控件引導(dǎo)用戶點(diǎn)擊出現(xiàn)搜索欄。

二. 開關(guān)

定義：

開關(guān)按鈕展示了兩個(gè)互斥的選項(xiàng)和狀態(tài)。

用途：

僅在列表中用，在列表中使用開關(guān)按鈕來讓用戶從某一項(xiàng)的兩個(gè)互斥狀態(tài)中指定一個(gè)，比如是/否、開/關(guān)。

特性：

• 含有開關(guān)的對(duì)象名。
• 開關(guān)按鈕兩種互斥狀態(tài)。

三. 頁面控制器

定義：

頁面控件告訴用戶當(dāng)前共打開了幾個(gè)視圖（多長(zhǎng)的視圖），還有它們正處在其中的哪一個(gè)（進(jìn)度）。

用途：

告訴用戶當(dāng)前有多少個(gè)視圖（多長(zhǎng)的視圖），還有它們處在其中哪一個(gè)（進(jìn)度）。

使用場(chǎng)景：

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

特性：

包含一系列圓點(diǎn)，圓點(diǎn)的個(gè)數(shù)代表當(dāng)前打開的視圖數(shù)量（從左到右，這些圓點(diǎn)代表了視圖打開的先后順序）
避免顯示太多點(diǎn)，建議不超過6個(gè)，一般超過6個(gè)很難讓用戶一目了然。

在iOS 規(guī)范中，把頁面中的滑條（知乎移動(dòng)網(wǎng)頁端的舉例）也當(dāng)做頁面控制器。

四. 圖標(biāo)

定義：

界面中的一種圖形元素，用來執(zhí)行應(yīng)用程序中定義的操作。

用途：

當(dāng)單擊它時(shí)，能執(zhí)行指定的功能操作。

特性：

• 由圖標(biāo)和/或文字組成。
• 文字及圖標(biāo)必須能讓人輕易的識(shí)別為按鈕并輕易的與點(diǎn)擊后展示的內(nèi)容聯(lián)系起來。

五. 滑塊

定義：

滑塊控件(Sliders，簡(jiǎn)稱滑塊)可以讓我們通過在連續(xù)或間斷的區(qū)間內(nèi)滑動(dòng)錨點(diǎn)來選擇一個(gè)合適的數(shù)值。區(qū)間最小值放在左邊，對(duì)應(yīng)的，最大值放在右邊。

滑塊可以在滑動(dòng)條的左右兩端設(shè)定圖標(biāo)來反映數(shù)值的強(qiáng)度。這種交互特性使得它在設(shè)置諸如音量、亮度、色彩飽和度等需要反映強(qiáng)度等級(jí)的選項(xiàng)時(shí)成為一種極好的選擇。

連續(xù)滑塊：在不要求精準(zhǔn)、以主觀感覺為主的設(shè)置中使用連續(xù)滑塊，讓使用者做出更有意義的調(diào)整。

帶有可編輯數(shù)值的滑塊：用于使用者需要設(shè)定精確數(shù)值的設(shè)置項(xiàng)，可以通過點(diǎn)觸縮略圖、文本框來進(jìn)行編輯。

間續(xù)滑塊：間續(xù)滑塊會(huì)恰好咬合到在滑動(dòng)條上平均分布的間續(xù)標(biāo)記上。在要求精準(zhǔn)、以客觀設(shè)定為主的設(shè)置項(xiàng)中使用間續(xù)滑塊，讓使用者做出更有意義的調(diào)整。應(yīng)當(dāng)對(duì)每個(gè)間續(xù)標(biāo)記(tick mark)設(shè)定一定的等級(jí)區(qū)間進(jìn)行分割，使得其調(diào)整效果對(duì)于使用者來說顯而易見。這些生成區(qū)間的值應(yīng)當(dāng)是預(yù)先設(shè)定好的，使用者不可對(duì)其進(jìn)行編輯。

附帶數(shù)值標(biāo)簽的滑塊：用于使用者需要知曉精確數(shù)值的設(shè)置項(xiàng)。

六. 進(jìn)度

定義：

在刷新加載或者提交內(nèi)容時(shí)，需要一個(gè)時(shí)間過度，在做這個(gè)過程中需要一個(gè)進(jìn)度和動(dòng)態(tài)的設(shè)計(jì)。

盡可能地減少視覺上的變化，盡量使應(yīng)用加載過程令人愉快。每次操作只能由一個(gè)活動(dòng)指示器呈現(xiàn)，例如，對(duì)于刷新操作，不能既用刷新條，又用動(dòng)態(tài)圓圈來指示。

指示器的類型有兩種：

• 線形進(jìn)度指示器
• 圓形進(jìn)度指示器

可以使用其中任何一項(xiàng)來指示確定性和不確定性的操作。

在操作中，對(duì)于完成部分不確定的情況下，用戶需要等待一定的時(shí)間，無需告知后臺(tái)的情況以及所需時(shí)間，這時(shí)可以使用不確定的指示器。

線形進(jìn)度條：應(yīng)該放置在頁眉或某塊區(qū)域的邊緣。線形進(jìn)度指示器應(yīng)始終從0％到100％顯示，絕不能從高到低反著來。如果一個(gè)隊(duì)列里有多個(gè)正在進(jìn)行的操作，使用一個(gè)進(jìn)度指示器來指示整體的所需要等待的時(shí)間。

圓形進(jìn)度指示器：

七. 選框

定義：

用戶對(duì)單個(gè)/多個(gè)選項(xiàng)進(jìn)行選擇。

選框分為兩類：

• 單選框
• 復(fù)選框

單選框：只允許用戶從一組選項(xiàng)中選擇一個(gè)。

復(fù)選框：允許用戶從一組選項(xiàng)中選擇多個(gè)。

如果需要在一個(gè)列表中出現(xiàn)多個(gè) On/Off 選項(xiàng)，復(fù)選框是一種節(jié)省空間的好方式。

如果只有一個(gè) On/Off 選擇，不要使用復(fù)選框，而應(yīng)該替換成開關(guān)。

作者是前華為ITUX 的交互組組長(zhǎng)，最近剛離職，想找交互高手的公司可以加他個(gè)人微信號(hào)：goldseng

歡迎關(guān)注作者的微信公眾號(hào)：「UEDC」

「專業(yè)術(shù)語！讓命名更規(guī)范」

1. 《「這個(gè)控件叫什么」系列之小紅點(diǎn)+索引導(dǎo)航+分段控件》
2. 《「這個(gè)控件叫什么」系列之加載占位圖+頁面指示器》
3. 《「這個(gè)控件叫什么」系列之步進(jìn)器+SWITCH》
4. 《「這個(gè)控件叫什么」系列之TOAST》
5. 《「這個(gè)控件叫什么」系列之PICKER/選擇器/拾取器》
6. 《「這個(gè)控件叫什么」系列之動(dòng)作菜單/動(dòng)作面板》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com?是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com