1、LOGO設(shè)計(jì)交互細(xì)節(jié) 控件About Face 交互設(shè)計(jì)精髓設(shè)計(jì)交互細(xì)節(jié) 控件控件是使用者和數(shù)字產(chǎn)品進(jìn)行交流的屏幕對象，它具有可操作性和自包含性。它們有時也被稱為“小部件”（widget）、“小配件”（gadget）或者“小零件”（gizmos），是創(chuàng)建圖形用戶界面的主要構(gòu)造模塊。About Face 交互設(shè)計(jì)精髓根據(jù)用戶目標(biāo)，控件可分為4種基本類型：v 命令控件（imperative control）：用于啟動功能。v 選擇控件（selection control）：用于選擇項(xiàng)或數(shù)據(jù)。v 輸入控件（entry control）：用于輸入數(shù)據(jù)。v 顯示控件（display control）：用

2、于可視化地直接操作程序。有些控件還包含了上述一種或者幾種類型。About Face 交互設(shè)計(jì)精髓About Face 交互設(shè)計(jì)精髓設(shè)計(jì)交互細(xì)節(jié) 控件1. 命令控件2. 選擇控件3. 輸入控件4. 顯示控件1.命令控件在人機(jī)交互中，有一種由名詞（有時稱為“對象”）、動詞、形容詞和副詞組成的語言。當(dāng)我們發(fā)起命令時，便指定了動詞動作的聲明。當(dāng)描述動作會影響到什么時，我們指定組成句子的名詞。有時我們從已存在的列表中選擇名詞，有時輸入一個新名詞。我們分別用形容詞和副詞來休息名詞和動詞。About Face 交互設(shè)計(jì)精髓1.命令控件與動詞相對應(yīng)的控件類型叫做“命令控件”，因?yàn)樗a(chǎn)生立即的操作，命令控件接收

3、操作并且立即執(zhí)行。在控件世界里，命令習(xí)慣用法的精華例子是按鈕。實(shí)際上它是唯一一種，雖然存在多種不同的外表，單擊按鈕及相關(guān)動作也就是動詞，將立即執(zhí)行。About Face 交互設(shè)計(jì)精髓1.命令控件About Face 交互設(shè)計(jì)精髓按鈕 圖標(biāo)按鈕 超鏈接 1.命令控件About Face 交互設(shè)計(jì)精髓1.1 按鈕1.2圖標(biāo)按鈕1.3 鏈接1.1按鈕按鈕一般具有三維模擬的凸起特征。如果控件是矩形（有時呈橢圓形）并凸起顯示（右側(cè)和底部的陰影，以及頂部和左側(cè)的加亮產(chǎn)生了凸起的效果），那么它就具有命令的視覺啟示。用戶只要單擊后釋放鼠標(biāo)，它就立即執(zhí)行。About Face 交互設(shè)計(jì)精髓1.1按鈕在對話框中總

4、有一個默認(rèn)按鈕（default button），常常被突出顯示出來指示用戶可以選擇的最合理操作。About Face 交互設(shè)計(jì)精髓1.1按鈕按鈕要顯示它的“可按壓特性”。當(dāng)用戶指向并單擊，屏幕上的按鈕視覺上會發(fā)生改變。不要讓人產(chǎn)生疑問：“它到底被按下了嗎？”About Face 交互設(shè)計(jì)精髓正常狀態(tài)：鼠標(biāo)劃過：鼠標(biāo)單擊：如果沒有查詢結(jié)果的變化很難辨別“它到底被按下了嗎？”About Face 交互設(shè)計(jì)精髓1.1 按鈕1.2圖標(biāo)按鈕1.3 鏈接1.命令控件1.2圖標(biāo)按鈕圖標(biāo)按鈕圖標(biāo)按鈕現(xiàn)已成為標(biāo)準(zhǔn)的習(xí)慣用法，和菜單欄一樣為人熟知，按鈕從傳統(tǒng)的對話框移居到了工具欄中，按鈕顯著地?cái)U(kuò)展了它的功能、作用

5、和視覺特征。About Face 交互設(shè)計(jì)精髓交互設(shè)計(jì)精髓1.2圖標(biāo)按鈕當(dāng)按鈕移居到工具欄中時變成了方形，沒有文本而獲得了象形文字，即一個圖標(biāo)。圖標(biāo)第一眼看上去難以確切理解，不過工具提示（ToolTips）的出現(xiàn)有效地提供了幫助。About Face 交互設(shè)計(jì)精髓按鈕、圖標(biāo)按鈕按鈕、圖標(biāo)按鈕有自己的相應(yīng)狀態(tài)和形式。About Face 交互設(shè)計(jì)精髓按照是否可用來分：可用、不可用。按照鼠標(biāo)狀態(tài)來分：正常、鼠標(biāo)劃過、鼠標(biāo)點(diǎn)擊、選中。About Face 交互設(shè)計(jì)精髓1.1 按鈕1.2圖標(biāo)按鈕1.3 鏈接1.命令控件1.3超鏈接超鏈接，或者鏈接是網(wǎng)頁中的一種習(xí)慣用法，現(xiàn)在在各式各樣的不同應(yīng)用程序中都

6、可以見到它的身影，一般來說，它的形式是具有下劃線的文本（當(dāng)然圖片也可以），可以作為瀏覽導(dǎo)航的命令控件。這是一種簡單、直接并有用的交互習(xí)慣用法。About Face 交互設(shè)計(jì)精髓小結(jié)About Face 交互設(shè)計(jì)精髓鏈接用于瀏覽導(dǎo)航，按鈕和圖標(biāo)按鈕用于操作。設(shè)計(jì)原則About Face 交互設(shè)計(jì)精髓設(shè)計(jì)交互細(xì)節(jié) 控件1. 命令控件2. 選擇控件3. 輸入控件4. 顯示控件2.選擇控件About Face 交互設(shè)計(jì)精髓因?yàn)槊羁丶莿釉~，所以它需要一個名詞來進(jìn)行操作。選擇控件和輸入控件是兩類用于選擇名詞的控件，選擇控件允許用戶從一組有效的選項(xiàng)中選擇一個操作數(shù)。2.選擇控件常見的選擇控件有復(fù)選框（c

7、heck box）、列表框（list box）和下拉列表（drop-down list）。2.選擇控件以前，選擇控件不直接導(dǎo)致操作，操作通常需要命令控件來觸發(fā)。現(xiàn)在一些導(dǎo)航控制的下拉列表就可以用于觸發(fā)操作。和交互設(shè)計(jì)中的其他做法一樣，這兩種做法各有優(yōu)缺點(diǎn)。如果使用者在發(fā)起操作前要做出一系列的選擇，這時應(yīng)該提供明顯的命令控件（也就是按鈕）；如果使用者想要立即看到選擇的結(jié)果，并且這個操作也很容易被撤銷，則完全有理由讓選擇控件也變成命令控件。About Face 交互設(shè)計(jì)精髓About Face 交互設(shè)計(jì)精髓2.1 復(fù)選框2.2 滾翻按鈕2.3 單選按鈕2.選擇控件2.4 組合圖標(biāo)按鈕2.5 列表控

8、件2.6 組合框2.7 樹形控件2.1復(fù)選框復(fù)選框主要是基于文本的控件，它是熟悉而有效的習(xí)慣用法。和菜單一樣，存在優(yōu)點(diǎn)的同時也存在缺點(diǎn)。確切的文本使復(fù)選框清楚明確，但也使用戶不得不放慢速度閱讀，而且占據(jù)了數(shù)量可觀的屏幕空間。About Face 交互設(shè)計(jì)精髓2.1復(fù)選框About Face 交互設(shè)計(jì)精髓2.1復(fù)選框我們還是有可能為復(fù)選框加進(jìn)一些圖形元素，就像圖標(biāo)按鈕一樣改進(jìn)復(fù)選框。用圖標(biāo)代替文本，按鈕可以演變成圖標(biāo)按鈕并遷移到工具欄中。鎖定圖標(biāo)按鈕狀態(tài)不再是瞬間的，而是鎖定直到再次單擊?？丶卣饕餐耆淖?yōu)榻厝徊煌念愋停羁丶闪诉x擇控件。About Face 交互設(shè)計(jì)精髓2.1復(fù)選框開關(guān)

9、按鈕作為單次選擇習(xí)慣用法廣泛地取代了復(fù)選框，特別適合用在非模態(tài)交互中，這樣不會打斷用戶做決定時的流狀態(tài)。鎖定圖標(biāo)按鈕比復(fù)選框更節(jié)省空間。About Face 交互設(shè)計(jì)精髓About Face 交互設(shè)計(jì)精髓2.1 復(fù)選框2.2 滾翻按鈕2.3 單選按鈕2.選擇控件2.4 組合圖標(biāo)按鈕2.5 列表控件2.6 組合框2.7 樹形控件2.2滾翻按鈕About Face 交互設(shè)計(jì)精髓滾翻按鈕是一種用于節(jié)約界面控件的最常用控件變體，但這卻讓用戶極度困惑。該按鈕上的動詞總是控件所能處在的多個狀態(tài)之一，最為經(jīng)典的滾翻按鈕是音樂播放器中的播放和暫停按鈕。2.2滾翻按鈕About Face 交互設(shè)計(jì)精髓這種方法的

10、問題在于人們可能認(rèn)為控件是顯示當(dāng)前音樂播放器狀態(tài)（暫停或者播放兩種狀態(tài)）的指示器，意味著這個按鈕會提供兩種既非常合理，又非常矛盾的解釋。控件或者作為狀態(tài)指示器，或者作為狀態(tài)轉(zhuǎn)換的命令控件，但不能同時表示二者。ONOFF單擊控件當(dāng)前處于OFF狀態(tài)控件當(dāng)前處于ON狀態(tài)2.2滾翻按鈕About Face 交互設(shè)計(jì)精髓這個問題的解決方法是要么在按鈕上標(biāo)出動詞或者動詞短語播放或者暫停，要么用一種更好的方式徹底采用其他技術(shù)，比如用兩個按鈕取代它，這樣做的不利因素是消耗了較多的屏幕空間?？傊M量不要使用滾翻按鈕。About Face 交互設(shè)計(jì)精髓2.1 復(fù)選框2.2 滾翻按鈕2.3 單選按鈕2.選擇控件2

11、.4 組合圖標(biāo)按鈕2.5 列表控件2.6 組合框2.7 樹形控件2.3單選按鈕About Face 交互設(shè)計(jì)精髓復(fù)選框的一個變體是單選按鈕，單選按鈕的行為是相互排斥的，這意味著選擇一個選項(xiàng)時以前選擇的選項(xiàng)會自動取消，每次只有一個按鈕可以選擇。2.3單選按鈕About Face 交互設(shè)計(jì)精髓因?yàn)橄嗷ヅ懦猓詥芜x按鈕總以兩個或者多個成組出現(xiàn)，而且每組中只有一個單選按鈕可以被選中。單個單選按鈕沒有意義；相反，它必須表現(xiàn)得象復(fù)選框一樣（在這種情況下，你應(yīng)該使用復(fù)選框或者相似的非互斥選擇控件）。2.3單選按鈕About Face 交互設(shè)計(jì)精髓單選按鈕甚至比復(fù)選按鈕更浪費(fèi)空間，在某些情況下，這種浪費(fèi)是值

12、得的，特別是在向用戶顯示全部可獲得選項(xiàng)的集合時非常重要。它們可以合理地用于不常使用的對話框。而在獨(dú)占姿態(tài)應(yīng)用的界面中，因?yàn)樗仨氂先粘Ｓ脩舻男枰韵吕斜韯t更好。2.3單選按鈕About Face 交互設(shè)計(jì)精髓你可能會想象，圖標(biāo)按鈕就像對復(fù)選框那樣，也能為單選按鈕做些什么，即在應(yīng)用程序界面上取代它。如果兩個或者兩個以上的鎖定圖標(biāo)按鈕按組放在一起，并且相互排斥以至每次只能鎖定其中之一，從而構(gòu)成了一組單選圖標(biāo)按鈕。About Face 交互設(shè)計(jì)精髓2.1 復(fù)選框2.2 滾翻按鈕2.3 單選按鈕2.選擇控件2.4 組合圖標(biāo)按鈕2.5 列表控件2.6 組合框2.7 樹形控件2.4組合圖標(biāo)按鈕Ab

13、out Face 交互設(shè)計(jì)精髓單選圖標(biāo)按鈕的一種變體是下拉版本的，由于它和組合框控件相似，所以我們稱為“組合圖標(biāo)按鈕”。通常，它是一個右側(cè)有向下小箭頭的鎖定圖標(biāo)按鈕。按照展現(xiàn)形式的不同分為：分體式按鈕、一體式按鈕。2.4組合圖標(biāo)按鈕About Face 交互設(shè)計(jì)精髓分體式按鈕：圖標(biāo)與小箭頭各有作用。單擊圖標(biāo)，會切換成圖標(biāo)按鈕上的狀態(tài)。單擊箭頭，會下拉出一個菜單，選擇了菜單中的某項(xiàng)，圖標(biāo)會隨之變化。2.4組合圖標(biāo)按鈕About Face 交互設(shè)計(jì)精髓一體式按鈕：彈出面板。單擊一體式按鈕，會彈出一個面板或者下拉菜單。2.4組合圖標(biāo)按鈕About Face 交互設(shè)計(jì)精髓這些菜單可以將很多效能和信息堆

14、積為緊湊的控件。這種用法是針對頻繁使用鼠標(biāo)的用戶設(shè)計(jì)的。這種習(xí)慣用法通常在自己發(fā)現(xiàn)或者有人示范以后會立即變得很清晰。對于用戶需要長時間交互的獨(dú)占姿態(tài)應(yīng)用程序來說，這是一個極好的常用控件。About Face 交互設(shè)計(jì)精髓2.1 復(fù)選框2.2 滾翻按鈕2.3 單選按鈕2.選擇控件2.4 組合圖標(biāo)按鈕2.5 列表控件2.6 組合框2.7 樹形控件2.5列表控件About Face 交互設(shè)計(jì)精髓列表控件允許用戶從有限的文本字符串中選擇，每個文本字符串代表一個命令、對象或?qū)傩浴＿@些控件有時稱為“選擇列表”（picklist），根據(jù)所討論的平臺和控件變體，它們有時候稱為“列表框”（list box）或“

15、列表視圖”（list view）。和單選按鈕一樣，列表控件是簡化交互功能的強(qiáng)大工具，因?yàn)樗懦俗龀鲥e誤選擇的可能性。2.5列表控件About Face 交互設(shè)計(jì)精髓列表控件通過滾動條上下移動，用戶每次單擊一次選擇一行文本，一種列表控件變體允許多重選擇，用戶單擊的同事按住Shift鍵或者Ctrl鍵一次可以選擇多個項(xiàng)目。2.5列表控件About Face 交互設(shè)計(jì)精髓列表框?qū)︼@示列表項(xiàng)有好處，允許用戶選擇一個或多個項(xiàng)如果列表視圖中的項(xiàng)是可以拖動的，那么它就為用戶提供了一個好工具，將項(xiàng)按特殊順序排列。2.5列表控件About Face 交互設(shè)計(jì)精髓用圖標(biāo)來區(qū)分重要的文本項(xiàng)設(shè)計(jì)原則2.5列表控件About Face 交互設(shè)計(jì)精髓用圖標(biāo)來區(qū)分重要的文本項(xiàng)About Face 交互設(shè)計(jì)精髓2.1 復(fù)選框2.2 滾翻按鈕2.3 單選按鈕2.選擇控件2.4 組合圖標(biāo)按鈕2.5 列表控件2.6 組合框2.7 樹形控件2.5列表控件About Face 交互設(shè)計(jì)精髓組合框是由一個列表