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

2017/11/21 9:45:21來源：互聯(lián)網(wǎng)

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

系列文章：

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

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

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

一. 搜索

定義：

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

用途：

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

使用說明：

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

二. 開關(guān)

定義：

開關(guān)按鈕展示了兩個互斥的選項和狀況。

用途：

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

特征：

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

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

定義：

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

用途：

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

使用場景：

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

特征：

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

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

四. 圖標(biāo)

定義：

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

用途：

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

特征：

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

五. 滑塊

定義：

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

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

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

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

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

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