您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 設(shè)計理論 >> 瀏覽設(shè)計教程

輕松看懂規(guī)范!詳解組件控件結(jié)構(gòu)系統(tǒ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è)置項。

六. 進(jìn)度

定義

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

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

指示器的類型有兩種:

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

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

在操作中,對于完成部分不確定的情況下,用戶必要等待肯定的時間,無需告知后臺的情況以及所需時間,這時可以使用不確定的指示器。

線形進(jìn)度條:應(yīng)該放置在頁眉或某塊區(qū)域的邊緣。線形進(jìn)度指示器應(yīng)始終從0%到100%表現(xiàn),絕不能從高到低反著來。假如一個隊列里有多個正在進(jìn)行的操作,使用一個進(jìn)度指示器來指示團(tuán)體的所必要等待的時間。

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

七. 選框

定義

用戶對單個/多個選項進(jìn)行選擇。

選框分為兩類:

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

單選框:只許可用戶從一組選項中選擇一個。

復(fù)選框:許可用戶從一組選項中選擇多個。

假如必要在一個列表中出現(xiàn)多個 On/Off 選項,復(fù)選框是一種節(jié)省空間的好體例。

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

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


[教程作者:互聯(lián)網(wǎng)]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di3841.html
配色和字體都很棒,但為什么界面看著不高級?
幫你理清創(chuàng)意的情緒板,是設(shè)計項目前期的利器
圖趣網(wǎng)微信
建議反饋
×