設計規范 | 詳解組件控件結構體系-單元控件類

@Echo  本篇文章是設計規范中的單元控件類,也是設計規范系列的最后一篇,繼這個系列之后我會寫一些超有意思的文章,敬請期待哦!

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

  1. 搜索

  2. 開關

  3. 頁面控制

  4. 圖標

  5. 滑塊

  6. 進度

  7. 選框

 

依舊附上一張腦圖,組件控件分類(如果單純通過組件控件,難以滿足功能劃分的需求,所以我將這個范圍擴大,分類里面不僅僅含有組件和控件,所以請不要在意細節。)

 

1. 搜索

(1)定義

用戶通過輸入的關鍵詞,搜索到用戶想要的信息。

(2)用途

當應用內包含大量的信息的時候,用戶通過搜索快速地定位到特定的內容。

(3)使用說明

微信兩個版本的搜索,很好的遵循了兩個平臺的規范。對于搜索的規范,iOS 官方給出的是隱藏搜索欄,用戶通過下拉展示搜索欄。Android是通過搜索圖標控件引導用戶點擊出現搜索欄。

 

2. 開關

(1)定義

開關按鈕展示了兩個互斥的選項和狀態。

(2)用途

僅在列表中用,在列表中使用開關按鈕來讓用戶從某一項的兩個互斥狀態中指定一個,比如是/否、開/關。

特性:

  1. 含有開關的對象名稱

  2. 開關按鈕兩種互斥狀態

 

3. 頁面控制器

(1)定義

頁面控件告訴用戶當前共打開了幾個視圖(多長的視圖),還有它們正處在其中的哪一個(進度)。

(2)用途

告訴用戶當前有多少個視圖(多長的視圖),還有它們處在其中哪一個(進度)。

(3)使用場景

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

特性:

  1. 包含一系列圓點,圓點的個數代表當前打開的視圖數量(從左到右,這些圓點代表了視圖打開的先后順序)

  2. 避免顯示太多點,建議不超過6個,一般超過6個很難讓用戶一目了然

PS:在iOS 規范中,把頁面中的滑條(知乎移動網頁端的舉例)也當做頁面控制器。

 

4. 圖標

(1)定義

界面中的一種圖形元素,用來執行應用程序中的定義的操作。

(2)用途

當單擊它時,能執行指定的功能操作。

特性:

  1. 由圖標和/或文字組成

  2. 文字及圖標必須能讓人輕易的識別為按鈕并輕易地點擊后展示的內容聯系起來

 

5. 滑塊

定義:滑塊控件(Sliders,簡稱滑塊)可以讓我們通過在連續或間斷的區間內滑動錨點來選擇一個合適的數值。區間最小值放在左邊,對應的,最大值放在右邊。

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

連續滑塊:在不要求精準、以主觀感覺為主的設置中使用連續滑塊,讓使用者做出更有意義的調整。

帶有可編輯數值的滑塊:用于使用者需要設定精確數值的設置項,可以通過點觸縮略圖、文本框來進行編輯。

間續滑塊:間續滑塊會恰好咬合到在滑動條上平均分布的間續標記上。在要求精準、以客觀設定為主的設置項中使用間續滑塊,讓使用者做出更有意義的調整。應當對每個間續標記(tick mark)設定一定的等級區間進行分割,使得其調整效果對于使用者來說顯而易見。這些生成區間的值應當是預先設定好的,使用者不可對其進行編輯。

附帶數值標簽的滑塊:用于使用者需要知曉精確數值的設置項。

 

6. 進度

定義:在刷新加載或者提交內容時,需要一個時間過度,在做這個過程中需要一個進度和動態的設計。

盡可能地減少視覺上的變化,盡量使應用加載過程令人愉快。每次操作只能由一個活動指示器呈現,例如,對于刷新操作,不能即用刷新條,又用動態圓圈來指示。

指示器的類型有兩種:線形進度指示器和圓形進度指示器。可以使用其中任何一項來指示確定性和不確定性的操作。

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

線形進度條:應該放置在頁眉或某塊區域的邊緣。線形進度指示器應始終從0%到100%顯示,絕不能從高到低反著來。如果一個隊列里有多個正在進行的操作,使用一個進度指示器來指示整體的所需要等待的時間。

圓形進度指示器:

 

7.選框

定義:用戶對單個/多個選項進行選擇。

選框分為兩類:單選框和復選框。

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

復選框:允許用戶從一組選項中選擇多個。

如果需要在一個列表中出現多個 on/off 選項,復選框是一種節省空間的好方式。

如果只有一個 on/off 選擇,不要使用復選框,而應該替換成開關。

 


 

封面作者:

作者:Echo(微信公眾號:UEDC)

來源:學UI網

上一篇: 三分鐘搞清iPhone X 設計尺寸和適配

下一篇: 最新版IOS 11設計規范,官方源文件下載!

分享到: 更多
手机斗牛看牌抢庄技巧 幸运飞艇有什么方法 中国竞彩网首页 重庆时时开彩结果 pk拾永久免费计划软件 我想做彩票计划员赚钱 网上双色球投注 注册送38.币的捕鱼 重庆时时开彩龙虎和玩法 七星彩技巧和方法 后三组选包胆是什么意思 时时彩宝典手机下载 澳门博彩骗局 星辰娱乐棋牌下载 北京pk10高手赌法 长期 任二直选单式怎么玩