Windows桌面應(yīng)用程序設(shè)計(jì)指南(控件篇14-滑動(dòng)條)

用戶使用滑動(dòng)條在一系列連續(xù)值中進(jìn)行選擇反番∥グ兀滑動(dòng)條包含一個(gè)表示范圍的數(shù)值欄脓斩、一個(gè)指示當(dāng)前值的指針耍群,以及一個(gè)可選的刻度標(biāo)記义桂。


一個(gè)典型的滑動(dòng)條

何時(shí)使用該控件

如果希望用戶能夠設(shè)置確定的連續(xù)值(如音量或亮度)或離散值范圍(如屏幕分辨率設(shè)置),請(qǐng)使用滑塊蹈垢。

當(dāng)用戶能理解當(dāng)前的值是相對(duì)數(shù)量而不是絕對(duì)數(shù)值的時(shí)候慷吊,使用滑動(dòng)條是一個(gè)很好的選擇。例如調(diào)節(jié)音量時(shí)曹抬,用戶在意的是將音量調(diào)到低或者中等溉瓶,而不會(huì)關(guān)注音量是2還是5。

考慮以下幾點(diǎn):

  • 需要設(shè)置的是否是相對(duì)的值谤民?如果不是堰酿,使用單選按鈕、下拉控件或者單選列表张足。
  • 需要設(shè)置的是否是一個(gè)明確的數(shù)字值触创?如果是,使用數(shù)字文本框兢榨。
  • 變更設(shè)置時(shí)的即時(shí)反饋是否對(duì)用戶有幫助嗅榕?如果這樣顺饮,使用滑動(dòng)條吵聪。例如在選擇顏色時(shí),用戶如果能實(shí)時(shí)看到色相兼雄、純度和明度的變化效果吟逝,選擇起來會(huì)更直觀。
  • 可設(shè)置值是否超過四個(gè)赦肋?如果沒有块攒,使用單選按鈕。
  • 用戶可以對(duì)值進(jìn)行更改嗎佃乘?滑動(dòng)條的作用是供用戶交互操作使用囱井。如果用戶不能自行更改值的話,使用只讀的文本框代替趣避。

當(dāng)使用滑動(dòng)條和數(shù)字文本框都可以時(shí)庞呕,以下情況傾向于使用數(shù)字文本框:

  • 屏幕空間有限
  • 用戶更傾向于使用鍵盤
    以下情況則使用滑動(dòng)條:
  • 變更設(shè)置的即時(shí)反饋對(duì)用戶有幫助

設(shè)計(jì)指南

  • 使用更自然的方向。例如,若滑動(dòng)條代表的值在現(xiàn)實(shí)世界中就是豎向表示的(例如溫度)住练,則使用豎直方向滑動(dòng)條地啰。

  • 根據(jù)目標(biāo)用戶的文化背景設(shè)置滑動(dòng)條方向。例如讲逛,西方文化圈的閱讀順序是從左至右亏吝,所以對(duì)于水平滑塊來說,最小值放置在最左邊盏混,最大值放置在最右邊蔚鸥。而對(duì)于閱讀順序從右至左的國(guó)家和地區(qū),則需要相反設(shè)置许赃。

  • 合理設(shè)置控件尺寸株茶,保證用戶能方便地設(shè)置到理想的值上。對(duì)于離散值的設(shè)置图焰,確保用戶能使用鼠標(biāo)選擇到想要的值启盛。

  • 如果值的范圍很大,而且用戶很有可能去選擇在范圍某一端的數(shù)值技羔,考慮將滑塊標(biāo)尺設(shè)置為非線性的僵闯。例如,時(shí)間刻度尺可以設(shè)置為1分鐘藤滥,1小時(shí)鳖粟、1天或1個(gè)月。

  • 如果可行拙绊,在用戶做出選擇時(shí)或之后立即給予反饋向图。例如,microsoftwindows音量控制器在音量調(diào)整后會(huì)立即發(fā)出嗶嗶聲以表示調(diào)整結(jié)果标沪。

  • 使用標(biāo)簽文字顯示值的范圍榄攀。

例外: 如果滑塊是垂直方向的,頂部的標(biāo)簽是最大值金句、最高檩赢、更多,或者類似文字违寞,你可以省略其他的標(biāo)簽贞瞒,因?yàn)橐馑己芮宄?/p>

示例
  • 當(dāng)用戶需要知道設(shè)置的大概數(shù)值時(shí),使用刻度標(biāo)尺趁曼。

  • 當(dāng)用戶需要知道設(shè)置的確切數(shù)值時(shí)军浆,使用刻度標(biāo)尺以及表明值范圍的文字標(biāo)簽。當(dāng)用戶需要知道設(shè)置值的單位以保證設(shè)置正確時(shí)挡闰,一定要使用文字標(biāo)簽進(jìn)行說明乒融。

    該例中,文字標(biāo)簽顯示了用戶選擇的確切數(shù)值

  • 在水平方向的滑動(dòng)條中,刻度標(biāo)尺放置在滑動(dòng)條下方簇抵。對(duì)豎向的滑動(dòng)條庆杜,從左到右閱讀習(xí)慣的國(guó)家和地區(qū),刻度標(biāo)尺放在滑動(dòng)條右邊碟摆;從右至左的地區(qū)則相反晃财。

  • 將值標(biāo)簽完全放置于滑動(dòng)條下方,以明確邏輯關(guān)系典蜕。

    錯(cuò)誤示例:沒有完全放置于滑動(dòng)條下方的值標(biāo)簽文字會(huì)引起歧義

  • 禁用滑動(dòng)條時(shí)断盛,也要同時(shí)禁用所有相關(guān)的標(biāo)簽。

  • 對(duì)一個(gè)設(shè)置愉舔,不要同時(shí)使用滑動(dòng)條和數(shù)字文本框钢猛。選擇更合適的那個(gè)使用。
    例外情況: 當(dāng)用戶既需要即時(shí)反饋轩缤,又需要設(shè)置精確數(shù)值的能力時(shí)命迈,同時(shí)使用這兩個(gè)控件。

  • 不要使用滑動(dòng)條作為進(jìn)程指示器火的。

  • 不要更改滑動(dòng)指針的默認(rèn)尺寸壶愤。

    錯(cuò)誤示例:指針過小

    正確示例:默認(rèn)尺寸

  • 不要對(duì)每個(gè)刻度都標(biāo)注數(shù)值標(biāo)簽。

建議尺寸和間距

滑動(dòng)條的建議尺寸和間距

標(biāo)簽

滑動(dòng)條標(biāo)簽

  • 使用以冒號(hào)結(jié)尾的靜態(tài)文本標(biāo)簽馏鹤,或者使用沒有結(jié)尾標(biāo)點(diǎn)符號(hào)的分組框標(biāo)簽征椒。
  • 為每個(gè)標(biāo)簽分配一個(gè)唯一的訪問鍵。
  • 使用句式大小寫規(guī)則湃累。
  • 滑動(dòng)條標(biāo)簽放置在滑動(dòng)條的左邊勃救,或在滑動(dòng)條的上方與其或其最左邊范圍的標(biāo)識(shí)符左對(duì)齊。

范圍標(biāo)簽

  • 除了垂直方向的滑動(dòng)條不需要治力,橫向滑動(dòng)條的的兩端都需要標(biāo)出范圍蒙秒。
  • 如果可能的話,每個(gè)標(biāo)簽只使用單詞表達(dá)琴许。
  • 不要在結(jié)尾使用標(biāo)點(diǎn)符號(hào)税肪。
  • 確保這些標(biāo)簽是描述性溉躲、并且結(jié)構(gòu)是平行的榜田。例如: 最大 / 最小值,多 / 少锻梳,低 / 高箭券,柔和 / 響亮。
  • 使用句式大小寫規(guī)則疑枯。
  • 不要給范圍標(biāo)簽分配存取鍵辩块。

數(shù)值標(biāo)簽

  • 如需要展示數(shù)值標(biāo)簽,將它放置于滑動(dòng)條下方。
  • 將文本相對(duì)于控件居中并包含單位(例如像素)废亭。


    示例:數(shù)值標(biāo)簽相對(duì)控件居中

說明

在提到滑動(dòng)條時(shí):

  • 使用確切的標(biāo)簽文本国章,包括其大小寫,并包括單詞 slider | 滑動(dòng)條文字描述豆村。 不要包含訪問鍵下劃線或冒號(hào)液兽。
  • 要描述用戶交互,請(qǐng)使用 move(滑動(dòng))掌动。
  • 如果可能四啰,使用粗體文本格式化標(biāo)簽。 否則粗恢,只有在需要時(shí)才將標(biāo)簽加上引號(hào)柑晒,以防混淆。
    示例:要提高屏幕分辨率眷射,請(qǐng)將屏幕分辨率滑動(dòng)條向右滑動(dòng)匙赞。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市妖碉,隨后出現(xiàn)的幾起案子罚屋,更是在濱河造成了極大的恐慌,老刑警劉巖嗅绸,帶你破解...
    沈念sama閱讀 218,755評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件脾猛,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡鱼鸠,警方通過查閱死者的電腦和手機(jī)猛拴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蚀狰,“玉大人愉昆,你說我怎么就攤上這事÷樘#” “怎么了跛溉?”我有些...
    開封第一講書人閱讀 165,138評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)扮授。 經(jīng)常有香客問我芳室,道長(zhǎng),這世上最難降的妖魔是什么刹勃? 我笑而不...
    開封第一講書人閱讀 58,791評(píng)論 1 295
  • 正文 為了忘掉前任堪侯,我火速辦了婚禮,結(jié)果婚禮上荔仁,老公的妹妹穿的比我還像新娘伍宦。我一直安慰自己芽死,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評(píng)論 6 392
  • 文/花漫 我一把揭開白布次洼。 她就那樣靜靜地躺著关贵,像睡著了一般。 火紅的嫁衣襯著肌膚如雪卖毁。 梳的紋絲不亂的頭發(fā)上坪哄,一...
    開封第一講書人閱讀 51,631評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音势篡,去河邊找鬼翩肌。 笑死,一個(gè)胖子當(dāng)著我的面吹牛禁悠,可吹牛的內(nèi)容都是我干的念祭。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼碍侦,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼粱坤!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起瓷产,我...
    開封第一講書人閱讀 39,264評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤站玄,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后濒旦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體株旷,經(jīng)...
    沈念sama閱讀 45,724評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年尔邓,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了晾剖。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,040評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡梯嗽,死狀恐怖齿尽,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情灯节,我是刑警寧澤循头,帶...
    沈念sama閱讀 35,742評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站炎疆,受9級(jí)特大地震影響卡骂,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜磷雇,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評(píng)論 3 330
  • 文/蒙蒙 一偿警、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧唯笙,春花似錦螟蒸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至苞慢,卻和暖如春诵原,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背挽放。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工绍赛, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人辑畦。 一個(gè)月前我還...
    沈念sama閱讀 48,247評(píng)論 3 371
  • 正文 我出身青樓吗蚌,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親纯出。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蚯妇,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評(píng)論 2 355