幾何

在設計界面交互時,為了讓用戶主動提供信息,有很多種方式供其錄入或選擇。比如,用文本框打字輸入、從復選框中勾選、從下拉菜單里選擇,等等。今天的主角–滑塊組件也是選擇工具的一種。

 

什么是滑塊

滑塊(Slider)是讓用戶通過滑動,在一定范圍內選擇數值,或數值范圍的組件。

圖源:追波Cuberto

滑塊是觸發類組件,也就是說,每滑到一個位置,會立刻響應,這個屬性很方便調試和即時預覽效果?;瑝K還有個特點是只能在一定范圍內選擇。在這兩種條件都滿足時,就可以使用滑塊,它比選擇控件文本框等組件都來得快捷方便。

滑塊經常出現在調音量、播放條控制進度的場景中:

騰訊視頻

 

類型

滑塊分為兩種:連續滑塊?(Continuous slider)?和間續滑塊 (Discrete slider)?。

連續滑塊?? ??

用戶在一定范圍區間內可自由選擇數值。?適合場景:不要求精準,遵照用戶的主觀感受,比如調音量:

iOS 13音量滑條

間續滑塊?

用戶在一定范圍內只能選擇特定值,滑動小滑塊時,它會自動咬合到最接近的特定位置。適合場景:要求精準,以設定值為主,比如字號設置,字號只能是離散的整數:?

iOS 13字號設置

 

原型

滑塊的形狀有線性和圓形之分,它們的物理原型分別是調音器推桿和旋鈕開關:

線性滑塊和圓形滑塊的原型

 

一個滑塊

剖析一下滑塊的組成元素:

  • 軌道*
  • 小滑塊*
  • 選中值標簽
  • 刻度
  • 文本框
  • 滑塊標簽

標*為必需

軌道(track):可以是線性或圓形,線性軌道是UI中用得更多的,它可以垂直或水平分布。圓形軌道多用在和圓圈形象相關的場景,比如時鐘區間,旋轉角度等。

線性軌道和圓形軌道

圖源:追波Shunsuke Kawai/Renat Muratshin

 

在從左至右閱讀的語言中,水平軌道其數值是左邊最小,右邊最大。

小滑塊(thumb):有些地方把thumb這個元素也翻譯作“滑塊”,但由于整個組件叫滑塊,為了不混淆我把thumb叫做小滑塊。小滑塊絕大多數時候是一個圓,偶爾也會是方形或指針形狀。

macOS指針形狀的小滑塊

 

小滑塊可能會有兩個,這樣的滑塊叫區間滑塊(Range slider),它是用來選擇一個范圍的。

tip

  • 區間滑塊的兩個小滑塊如果是同色的純色塊,那么它們兩太接近的時候,要加上描邊效果,以免兩者融化在一起難以辨認:

選中值標簽(value label?):這是告知用戶當前選中的數值,它既可以懸浮于小滑塊上方,也可以出現在軌道邊上一個固定的地方–如上面的macOS節能面板。設計移動端時,要注意手指的遮擋,這時標簽不能離小滑塊太近了。選中值標簽可以只在滑動時出現,也可以常顯。

刻度(tick mark):沿著軌道分布的若干刻度,可以幫助用戶在滑動時更準確地感知選項值。它可以用在連續和間續滑塊中??潭炔灰欢ㄊ蔷鶆蚍植嫉?,這和參數值本身是否呈線性有關。如果參數值呈線性,通常只需要標最小值和最大值就足夠了,但如果非線性,如下圖的macOS的關屏時間設置,不僅需要有刻度,還需加上對刻度值的描述,否則會有歧義:

時間刻度不是線性分布,需要文字描述其刻度

 

最小值和最大值的描述文本可以用更形象的圖標來替代,比如用一大一小的圖標表示字號大?。?/p>

文本框:可以輔助滑塊做精準輸入,對那些明確自己要錄入哪一個數值,不樂意通過滑塊來逐漸接近目標值的用戶有幫助。同時,文本框還可以自帶一個步進器(stepper)。文本框和滑塊要做到互相實時同步。

??帶有步進器的文本框(螞蟻金服)

 

滑塊標簽:和選中值標簽不同,這是介紹整個滑塊的,一般帶個冒號結尾。

tips

  • 線性滑塊的軌道在最小值和小滑塊之間的部分需要填充一個焦點色,區間滑塊的兩個小滑塊之間同理。當小滑塊的形狀是一個指針,且有刻度標記時,可以不填充顏色,如上圖macOS節能面板;
  • 選用最符合直覺的滑塊形狀,舉個??,物體平移用線性更好,旋轉用圓形更佳;
  • 小滑塊可以給出廠默認位置做個標記,讓用戶知道原來位置在哪。這個細節雖小卻能避免用戶因滑離了原來位置而不安,提升體驗。

索尼電視的滑塊經過原始位置時有個小豎線標記

 

操作和狀態

滑塊的操作在不同終端的差別:

滑塊的狀態有四種:

狀態示意圖:

滑塊的大小

以下是常見的大小,單位pt,供參考:

移動端:

PC端:

TV端:

備注:對應換算

  • 750*1334的移動界面:1px=2pt
  • 桌面端1px=1pt
  • tv端1px=2pt

 

本文小結

  • 滑塊是讓用戶通過滑動,在一定范圍內選擇數值,或數值范圍的組件;
  • 它分為連續滑塊和間續滑塊,分別適用于不求精確和要求精確;
  • 滑塊可以是線性,也可以是圓形,前者更常見,后者多用在和圓圈形象相關的場景;
  • 滑塊的組成元素:軌道*、小滑塊*、選中值標簽、刻度、文本框、滑塊標簽;
  • 它的操作主要為拽動小滑塊、方向鍵控制步移和直接點擊軌道某個位置;這些操作和狀態會因終端而異。

這些就是滑塊的知識,回見哦??

 

原文地址:UI設計語言(公眾號)

作者:a珠珠

轉載請注明:學UI網 » UI組件-滑塊 用戶超愛的選擇小助手

登錄收藏
 
你可能喜歡的:
設計沉思錄| 品牌體驗一致性&高效協同設計沉思錄| 品牌體驗一致性&高效協同
Material Design Offline States 離線狀態Material Design Offline States 離線狀態
Material Design Writing 書寫Material Design Writing 書寫
真正優秀的圖標,少不了這7個底層設計原則真正優秀的圖標,少不了這7個底層設計原則
全面解析APP「個人中心」設計思路全面解析APP「個人中心」設計思路
善用“心理賬戶”,提升用戶付費率善用“心理賬戶”,提升用戶付費率
花了半年時間,我們做了一套通用型移動設計規范給大家花了半年時間,我們做了一套通用型移動設計規范給大家
Material Design Onboarding 導覽Material Design Onboarding 導覽
數據可視化設計師如何建立靈感庫?數據可視化設計師如何建立靈感庫?
從4款主流產品出發,掌握“搜索”交互從4款主流產品出發,掌握“搜索”交互
?
街机捕鱼城金库券 福彩3d复式投注价格 福彩北京快三开奖查询 甘肃快三开奖结果走势图今天 辽宁快乐12遗漏任五 四肖期期中准天天中码 360配资 安徽快三预测计划 排列五综合走势图版500期 广东11选五玩法规则 期货配资怎么挣钱