設(shè)計交互細節(jié)

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

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

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

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

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

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

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

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

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

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

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

12、得的，特別是在向用戶顯示全部可獲得選項的集合時非常重要。它們可以合理地用于不常使用的對話框。而在獨占姿態(tài)應(yīng)用的界面中，因為它必須迎合日常用戶的需要，所以下拉列表則更好。2.3單選按鈕About Face 交互設(shè)計精髓你可能會想象，圖標按鈕就像對復(fù)選框那樣，也能為單選按鈕做些什么，即在應(yīng)用程序界面上取代它。如果兩個或者兩個以上的鎖定圖標按鈕按組放在一起，并且相互排斥以至每次只能鎖定其中之一，從而構(gòu)成了一組單選圖標按鈕。About Face 交互設(shè)計精髓2.1 復(fù)選框2.2 滾翻按鈕2.3 單選按鈕2.選擇控件2.4 組合圖標按鈕2.5 列表控件2.6 組合框2.7 樹形控件2.4組合圖標按鈕Ab

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

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

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