中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

輸入控件作為最常用的界面設(shè)計(jì)控件之一，包含了哪些類型以及各類型與特征以及使用關(guān)鍵點(diǎn)有哪些呢？一起來(lái)了解下。

文章大綱：

• 離散型與連續(xù)型輸入控件
• 便于用戶探索更多選項(xiàng)的UI控件：線性滑塊/旋鈕控件/二維曲線控件
• 同時(shí)支持粗略和精確輸入值調(diào)整的聯(lián)合控件：聯(lián)合控件的鍵盤(pán)聚焦/控件的默認(rèn)預(yù)設(shè)值
• 小結(jié)

數(shù)值參數(shù)是對(duì)象屬性之一，其值為數(shù)字。

具體例子包括：電商網(wǎng)站上的商品價(jià)格、數(shù)量，以及照片編輯應(yīng)用中的照片透明度等。

常用的數(shù)值參數(shù)交互控件包括：文本輸入框、滑塊、旋鈕控件、可編輯的二維曲線控件以及能對(duì)預(yù)先給定的默認(rèn)值進(jìn)行遞增或遞減的步進(jìn)器等。

不同控件適用于不同的交互場(chǎng)景來(lái)傳達(dá)編輯數(shù)值信息。

多數(shù)情況下，控件的類型和參數(shù)值之間存在一定的自然映射關(guān)系。比如旋鈕控件，可以自然地跟角度參數(shù)相對(duì)應(yīng)。

這些UI控件傳達(dá)編輯數(shù)值信息的同時(shí)，也遵循了「尼爾森十大可用性原則」之一 ——環(huán)境貼切原則：匹配系統(tǒng)與真實(shí)世界

許多創(chuàng)意類或數(shù)據(jù)分析類的應(yīng)用和網(wǎng)站均包含了較長(zhǎng)的表單，允許用戶對(duì)特定屬性進(jìn)行詳細(xì)調(diào)整?？丶趯?shí)現(xiàn)連續(xù)復(fù)雜的數(shù)值變化的同時(shí)，需要建立以下兩種體驗(yàn)上的平衡：

• 探索度：便于用戶任意去探索整個(gè)數(shù)值范圍內(nèi)的控件選項(xiàng)
• 精確度：允許用戶精確地選取特定值

離散型與連續(xù)型輸入控件

輸入控件的兩種主要類型：

• 離散型控件：提供有限的步進(jìn)器數(shù)值或可選項(xiàng)。常見(jiàn)的例子包括開(kāi)關(guān)、以及帶有一些預(yù)選項(xiàng)的單選和復(fù)選框
• 連續(xù)型控件：涉及一定范圍（通常在最大值和最小值之間）的數(shù)值輸入?；瑝K和旋鈕均屬于連續(xù)型控件。（需要注意的是，理論上連續(xù)型的控件可以取范圍內(nèi)的任意值）。

嚴(yán)格來(lái)說(shuō)，范圍值從0到100的滑塊是一個(gè)離散型控件，因?yàn)樗闹挡⒉皇沁B續(xù)的。而實(shí)際使用當(dāng)中，如果一個(gè)滑塊可選的數(shù)值范圍夠大而且不僅限于有限的幾個(gè)固定選項(xiàng)值的話，可以被認(rèn)為是連續(xù)型控件，從用戶的實(shí)際體驗(yàn)上來(lái)看它也是連續(xù)的。

Mac 版本 Kindle 包含了離散型及連續(xù)型兩種控件：

1. 字體大小設(shè)置滑條屬于離散型控件：允許設(shè)置的字體大小僅限于12個(gè)預(yù)先設(shè)定的標(biāo)在隱約可見(jiàn)的刻度線上的數(shù)值。即使用戶想要把滑塊移動(dòng)到給定刻度線數(shù)值之間，滑塊也會(huì)自動(dòng)移動(dòng)到臨近的可用數(shù)值刻度線處。
2. 色彩模式設(shè)置的單選按鈕同樣屬于離散型控件：僅提供白、黑、深褐色三種供選擇的色彩模式
3. 單行顯示字?jǐn)?shù)和屏幕亮度調(diào)節(jié)滑塊均屬于連續(xù)型控件：在滑塊范圍內(nèi)可選任意值

便于用戶探索更多選項(xiàng)的UI控件

1. 線性滑塊

線性滑塊是一種有用的控件，當(dāng)對(duì)應(yīng)值屬于給定的范圍內(nèi)（明確的最大值和最小值），并且數(shù)值的精確度對(duì)用戶來(lái)說(shuō)沒(méi)那么重要時(shí)。

根據(jù) Accot-Zhai 提出的“引導(dǎo)法則”（Steering Law），在滑塊上選定一個(gè)精確值并不容易。

所謂“引導(dǎo)法則”，是由人機(jī)交互原則之一的費(fèi)茨定律推導(dǎo)而來(lái)。

引導(dǎo)法則：用戶滑動(dòng)二維路徑上的滑塊時(shí)所需的時(shí)間受路徑的長(zhǎng)度和寬度影響。簡(jiǎn)單地說(shuō)，路徑越寬或長(zhǎng)度越短，則滑塊移動(dòng)速度越快。大多數(shù)的滑塊寬度較窄，使得用戶很難選中相對(duì)精確值。

線性滑塊的高效性在于：用戶在滑動(dòng)滑塊的過(guò)程中可以實(shí)時(shí)預(yù)覽效果。一旦用戶的操作和實(shí)際效果存在一定延遲，線性滑塊可能就不是個(gè)合適的選擇。（根據(jù)標(biāo)準(zhǔn)響應(yīng)時(shí)間原則，延遲的時(shí)間最多不應(yīng)超過(guò)0.1s）

如果是頁(yè)面顯示結(jié)果比較費(fèi)時(shí)的情況下，滑塊同樣不是個(gè)很好的選擇。

可選擇諸如：實(shí)時(shí)渲染視頻效果，龐大的數(shù)據(jù)集合的篩選控件（e.g.價(jià)格范圍的篩選）等等……

IOS系統(tǒng)屏幕亮度滑塊并不是用于選定一個(gè)準(zhǔn)確的亮度值，而是獲取一個(gè)相近的、類似的亮度值。

通常來(lái)說(shuō)，用戶移動(dòng)滑塊僅僅是為了讓屏幕比現(xiàn)有的更亮或更暗些。

這種控件的易用性關(guān)鍵在于——系統(tǒng)是否能夠在用戶滑動(dòng)滑塊的同時(shí)通過(guò)改變屏幕亮度來(lái)給予即時(shí)反饋。

一旦用戶的操作和它產(chǎn)生的實(shí)際屏幕亮度效果存在較大延遲，用戶也就無(wú)法在滑塊上準(zhǔn)確地選定合適的亮度值。

滑塊控件的其中一種變體是：具有兩個(gè)在可選值范圍內(nèi)移動(dòng)的滑塊。

這種滑塊變體常用于網(wǎng)頁(yè)界面的篩選，用戶可以設(shè)定最小最大價(jià)格，航班的起始和結(jié)束時(shí)間等。

和其他類型的滑塊類似，雙滑塊控件選取準(zhǔn)確值比較困難，因此這種控件僅適用于少數(shù)情況。

雙滑塊與直方圖之類的圖表結(jié)合使用時(shí)，可以確保選擇的范圍值可實(shí)際匹配到對(duì)應(yīng)的內(nèi)容或選項(xiàng)，從而避免無(wú)搜索結(jié)果的情況的發(fā)生。

Kayak 網(wǎng)站（提供機(jī)票、酒店服務(wù)的旅游網(wǎng)站）的一大特征就是提供范圍選擇滑塊來(lái)篩選航班起飛時(shí)間段。

雖然精確的起飛時(shí)間如12:15pm比較難選中，但航班起飛時(shí)間與對(duì)應(yīng)費(fèi)用圖表的搭配使用，使得用戶在平衡時(shí)間和費(fèi)用后作出較優(yōu)選擇變?yōu)榭赡堋?/p>

2. 旋鈕控件

旋鈕控件或其他用戶需要旋轉(zhuǎn)的控件自然地代表了平移（音頻工程師可以在混合音頻的時(shí)候調(diào)節(jié)音頻的左右聲道）之類的參數(shù)。

然而，使用常用的鼠標(biāo)、觸控板等輸入設(shè)備去操作旋鈕有一定的難度，在旋轉(zhuǎn)功能上不具備較好的功能可見(jiàn)性。

鑒于鼠標(biāo)之類的線性輸入設(shè)備執(zhí)行旋轉(zhuǎn)操作比較困難，一些設(shè)計(jì)中會(huì)賦予旋鈕一種隱式的線性拖動(dòng)操作。用戶可以任意通過(guò)點(diǎn)擊、上下或垂直拖動(dòng)來(lái)調(diào)整數(shù)值大小。

但這種線性拖動(dòng)操作往往是意料之外的，通常不作任何提示，難以被用戶發(fā)現(xiàn)。

另外，如果應(yīng)用不當(dāng)，會(huì)使那些試圖通過(guò)鼠標(biāo)轉(zhuǎn)圈去模仿旋鈕旋轉(zhuǎn)的人失去自主控制權(quán)。

GarageBand (一款數(shù)碼音樂(lè)創(chuàng)作軟件) 為用戶提供多個(gè)旋鈕，通過(guò)點(diǎn)擊或垂直拖動(dòng)進(jìn)行旋轉(zhuǎn)。

該設(shè)計(jì)彌補(bǔ)了不能很好掌控旋轉(zhuǎn)的設(shè)備（鼠標(biāo)等）的缺陷，但是不容易被發(fā)現(xiàn)，并且與用戶嘗試移動(dòng)光標(biāo)轉(zhuǎn)圈來(lái)轉(zhuǎn)動(dòng)旋鈕的意圖相違背。

這個(gè)例子里，旋鈕控件的靈感來(lái)源于過(guò)去的音頻工程師所使用的旋鈕，是擬物設(shè)計(jì)的不恰當(dāng)應(yīng)用實(shí)例之一。

既然它的參數(shù)值并不能很好地映射到一個(gè)圈內(nèi)，水平的滑塊可能更適用于該參數(shù)。

Adobe 圖像管理器 Lightroom 的設(shè)置面板針對(duì)數(shù)值參數(shù)使用了多種輸入控件，其中包括了滑塊和旋鈕。

盡管每個(gè)控件都代表連續(xù)的數(shù)值，他們也反映了一些重要的額外的關(guān)于這些被修改數(shù)據(jù)的信息。

其中包括：用旋鈕來(lái)代表物體周邊陰影角度的角度控件；包含最小和最大值范圍值的滑塊（e.g.0% – 100%透明度滑塊）。

3. 二維曲線控件

二維曲線輸入控件是一種通過(guò)調(diào)整一個(gè)復(fù)雜曲線來(lái)同時(shí)修改多個(gè)相關(guān)參數(shù)的專業(yè)控件。

通常情況下與之交互方式是，通過(guò)在已有的直線或曲線上添加一個(gè)節(jié)點(diǎn)。

一旦添加了新的節(jié)點(diǎn)，并且將節(jié)點(diǎn)拖曳至新位置時(shí)，系統(tǒng)會(huì)在兩個(gè)節(jié)點(diǎn)之間繪制出一條新的曲線。

這種控件在以下情況下非常實(shí)用：有兩個(gè)相關(guān)聯(lián)、互相牽制、會(huì)被同時(shí)修改的參數(shù)（e.g.圖像視頻編輯應(yīng)用里的亮度和RGB曲線）或需要通過(guò)二維空間來(lái)描述物體的位置和路徑時(shí)（e.g. 電影的環(huán)繞聲）。

GIMP（GNU圖像處理程序）用二維曲線控件來(lái)同時(shí)控制多個(gè)參數(shù)，否則可能需要多個(gè)滑塊才能實(shí)現(xiàn)。

上述例子中，X 軸 Y 軸代表不同參數(shù)，其中 X 軸（從暗到亮）對(duì)應(yīng)輸入，Y 軸對(duì)應(yīng)輸出。曲線越接近于水平，圖片的整體色調(diào)范圍越小。

如果這些數(shù)值用滑塊來(lái)表示并進(jìn)行調(diào)節(jié)，可能需要多對(duì)控件來(lái)實(shí)現(xiàn)，每個(gè)對(duì)應(yīng)用戶需要調(diào)整的參數(shù)值。

使用二維網(wǎng)格的情況下，用戶簡(jiǎn)單地通過(guò)點(diǎn)擊在線上添加任意位置節(jié)點(diǎn)，將節(jié)點(diǎn)拖曳至新的坐標(biāo)處。

這類設(shè)計(jì)使得用戶可以通過(guò)一些小的調(diào)整來(lái)完成復(fù)雜曲線的創(chuàng)建。

同時(shí)支持粗略和精確輸入值調(diào)整的聯(lián)合控件

實(shí)現(xiàn)精確值輸入最簡(jiǎn)單的一種方式是使用輸入框，用戶可以輸入該精確值。

然而，這種解決方案提供精確輸入的同時(shí)，不支持用戶高效地探索參數(shù)值范圍。

輸入一個(gè)提前已知的值比較簡(jiǎn)單，但在你不知道要輸入什么值的情況下，如果讓你不停地隨機(jī)輸入一個(gè)看起來(lái)像樣的顏色值，整個(gè)過(guò)程是冗長(zhǎng)乏味的。

即使額外提供增減顏色值的步進(jìn)器按鈕。有些文本框甚至不會(huì)顯示可輸入值的范圍。比如，RGB 顏色值輸入框，對(duì)于新手用戶來(lái)說(shuō) RGB 顏色值的范圍是0-255就不是那么直觀。

Microosoft Ofiice 通過(guò)在輸入框旁添加上下箭頭按鈕的步進(jìn)器，來(lái)快速地增減數(shù)值。

上述輸入框問(wèn)題的一個(gè)典型的解決方案是，使用兩個(gè)互相獨(dú)立而又相關(guān)聯(lián)的控件來(lái)對(duì)同個(gè)參數(shù)進(jìn)行或粗略或精準(zhǔn)的數(shù)值調(diào)整。

所謂聯(lián)合控件是指兩種（或多種）調(diào)整同個(gè)數(shù)值的控件組合。

一般來(lái)說(shuō)，連續(xù)型控件，如：滑塊，用于粗略的輸入，不斷探索范圍內(nèi)的數(shù)值從而找出所需值的大致臨近值。

之后，輸入框作為精確控件用來(lái)確定具體的數(shù)值。精確控件也有助于那些已經(jīng)知道所需具體數(shù)值的超級(jí)用戶。

聯(lián)合控件的設(shè)計(jì)不僅支持輸入值的精細(xì)調(diào)整，也能直接顯示出當(dāng)前狀態(tài)下的參數(shù)值，告知用戶與其期望輸出效果相關(guān)聯(lián)的值是多少。

一個(gè)關(guān)鍵點(diǎn)：由于這兩個(gè)控件持續(xù)關(guān)聯(lián)，兩者展示同一值時(shí)調(diào)整其中一個(gè)，另一個(gè)控件值應(yīng)隨之立即（通常指0.1s之內(nèi)）發(fā)生變化。

1. 聯(lián)合控件的鍵盤(pán)聚焦

為了使聯(lián)合控件有更好的使用體驗(yàn)，用戶調(diào)整滑塊時(shí)，鍵盤(pán)的聚焦應(yīng)移動(dòng)至輸入框。

這樣一來(lái)，用戶設(shè)置粗略滑塊值后能輕松在文本框進(jìn)行輸入，而無(wú)需點(diǎn)擊文本框。這個(gè)設(shè)計(jì)有助于讓尋的（即移動(dòng)手從鼠標(biāo)到鍵盤(pán)或鍵盤(pán)到鼠標(biāo)的行為）更高效。

另外無(wú)論如何要確保的是：當(dāng)鍵盤(pán)聚焦在微調(diào)輸入控件，鍵盤(pán)快捷鍵仍能被使用。

近期的（文章寫(xiě)于2017.04）一個(gè)可用性研究中顯示，某個(gè) Adobe Photoshop 的PC用戶在使用透明度滑塊與鍵盤(pán)去放大（Alt+滾輪）時(shí)遇到了問(wèn)題：

一旦鍵盤(pán)聚焦在輸入框，該用戶使用快捷鍵時(shí)系統(tǒng)總會(huì)播放錯(cuò)誤的提示音（輸入框僅允許數(shù)字作為有效輸入）。

2. 參數(shù)控件的默認(rèn)預(yù)設(shè)值

合適的參數(shù)默認(rèn)值十分重要：不僅能節(jié)省用戶時(shí)間和精力，而且能為新手提供使用指導(dǎo)。

典型的默認(rèn)值便是選取一個(gè)中立的值（取決于具體參數(shù)）：對(duì)于縮放滑塊來(lái)說(shuō)，100%（值位于滑塊中間）是個(gè)理想的默認(rèn)值；對(duì)于其他包含0和最大值的控件，理想的默認(rèn)值可能是中點(diǎn)。

為默認(rèn)值的輸入提供便捷的方式，例如：重置按鈕。

一旦中立數(shù)值在范圍中的某個(gè)位置或者所處位置不明顯時(shí)，重置按鈕顯得尤其好用。

如果默認(rèn)值帶有某種視覺(jué)指示符號(hào)同樣易于使用，比如默認(rèn)值在滑塊上所處位置顯示小箭頭刻度線。

Apple 的相冊(cè)應(yīng)用包含多個(gè)調(diào)節(jié)參數(shù)滑塊以及能夠一鍵重置這些數(shù)值的重置按鈕。（然而，該重置功能被隱藏于上下文菜單中）

小結(jié)

精確的數(shù)值輸入依賴于合適的控件選擇。

控件傳遞出的信息不僅包括這些控件應(yīng)該如何被使用，也包含了它們所代表數(shù)值的范圍。

控件應(yīng)該提供簡(jiǎn)便的方式用于探索可能的數(shù)值范圍選項(xiàng)以及給定精確值。

為用戶提供獨(dú)立而又相關(guān)聯(lián)的粗略和精確輸入控件，給定合適默認(rèn)值的同時(shí)為正在使用粗略數(shù)值控件的用戶提供輸入框的鍵盤(pán)聚焦。

原文作者：Page Laubheimer

原文地址：https://www.nngroup.com/articles/sliders-knobs

翻譯：一起吃雪糕

本文由 @一起吃雪糕?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議