輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)系統(tǒng)之單元控件類

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

系列文章： 

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

• 搜索
• 開關(guān)
• 網(wǎng)頁(yè)控制
• 圖標(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)和狀況。

用途：

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

特征：

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

三. 網(wǎng)頁(yè)控制器

定義：

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

用途：

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

使用場(chǎng)景：

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

特征：

包含一系列圓點(diǎn)，圓點(diǎn)的個(gè)數(shù)代表當(dāng)前打開的視圖數(shù)量（從左到右，這些圓點(diǎn)代表了視圖打開的先后順序）
避免表現(xiàn)太多點(diǎn)，建議不超過6個(gè)，一樣平常超過6個(gè)很難讓用戶一覽無(wú)余。

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

四. 圖標(biāo)

定義：

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

用途：

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

特征：

• 由圖標(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)整結(jié)果對(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ì)。

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

指示器的類型有兩種：

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

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

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

線形進(jìn)度條：應(yīng)該放置在頁(yè)眉或某塊區(qū)域的邊緣。線形進(jìn)度指示器應(yīng)始終從0％到100％表現(xiàn)，絕不能從高到低反著來。假如一個(gè)隊(duì)列里有多個(gè)正在進(jìn)行的操作，使用一個(gè)進(jìn)度指示器來指示團(tuá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)。

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