第10講人機(jī)交互技術(shù)精

第10講

用戶界面設(shè)計(jì)第一部分用戶界面設(shè)計(jì)誰來設(shè)計(jì)軟件的用戶界面？用戶眼中的好軟件好的用戶界面應(yīng)具備的特性界面設(shè)計(jì)美學(xué)用戶界面的主要思想界面設(shè)計(jì)的原則誰來設(shè)計(jì)軟件的用戶界面？毫無疑問，應(yīng)當(dāng)由用戶界面設(shè)計(jì)師用戶界面設(shè)計(jì)不完全等于美工如果軟件企業(yè)里沒有專職的用戶界面設(shè)計(jì)師，那么請產(chǎn)品經(jīng)理甚至軟件工程師和美工人員共同設(shè)計(jì)用戶界面。相比較而言，讓軟件開發(fā)人員學(xué)會(huì)用戶界面設(shè)計(jì)，要比美工人員學(xué)會(huì)軟件開發(fā)容易得多。對軟件開發(fā)工程師進(jìn)行用戶界面設(shè)計(jì)的培訓(xùn)，然后讓軟件開發(fā)工程師負(fù)責(zé)應(yīng)用軟件用戶界面的設(shè)計(jì)和實(shí)現(xiàn)，請美工人員做錦上添花的美化工作。誰來設(shè)計(jì)軟件的用戶界面？很多人有疑慮，讓軟件開發(fā)工程師從事用戶界面設(shè)計(jì)，他們能做好嗎？回答是肯定的，只要軟件工程師不自我封閉，追求上進(jìn)，那么他肯定能夠?qū)W會(huì)用戶界面設(shè)計(jì)，絕對比他原先做的用戶界面好。軟件工程師的智商都不低，只要他不懶惰，勤于學(xué)習(xí)、實(shí)踐和思考，那么他就能夠成為某些領(lǐng)域的行家乃至專家。用戶眼中的好軟件“好”的軟件意味著“實(shí)用、易用、美觀”如果軟件的功能不實(shí)用（不能為用戶解決問題），那么不管該軟件是否易用和美觀，用戶一般都不愿意購買該軟件，除非用戶沒有選擇余地。如果兩個(gè)軟件的功能和價(jià)格都相似，那么用戶會(huì)挑選更加易用的那個(gè)軟件。如果兩個(gè)軟件的功能、價(jià)格、易用性都差不多，那么用戶會(huì)選擇更加美觀的那個(gè)軟件。誰來評價(jià)“好或差”用戶才真正有資格說軟件“好或壞”。如果用戶對軟件很不滿意，開發(fā)人員不要有逆反情緒：從哪里找來的笨蛋用戶！應(yīng)當(dāng)站在用戶的立場看待軟件開發(fā)機(jī)構(gòu)宣揚(yáng)“以客戶為中心”，但是卻撇開客戶只顧忙碌地開發(fā)軟件，做出客戶不會(huì)用的東西。很多軟件開發(fā)人員不能夠一次性地完成某些開發(fā)任務(wù)，主要原因不是技術(shù)水平低下，而是他們沒有真正理解用戶的需求，也沒有站在用戶角度看待軟件。如果用戶不滿意軟件的功能和界面，那么開發(fā)人員將被迫重新開發(fā)。重新開發(fā)的代價(jià)顯然要比修改Bug大得多。如果軟件企業(yè)能夠真正重視并且下功夫提升“需求分析”和“用戶界面設(shè)計(jì)”的能力，通常會(huì)顯著地提升軟件生產(chǎn)率和客戶的滿意度。好的用戶界面應(yīng)具備的特性可使用性使用的簡單性用戶界面中的術(shù)語標(biāo)準(zhǔn)化和一致性擁有HELP幫助功能快速的系統(tǒng)響應(yīng)和低的系統(tǒng)成本用戶界面應(yīng)具有容錯(cuò)能力靈活性能夠按照用戶的希望和需要，提供不同詳細(xì)程度的系統(tǒng)響應(yīng)信息與其它軟件系統(tǒng)應(yīng)有標(biāo)準(zhǔn)的界面用戶可以根據(jù)需要制定和修改界面方式為使用戶界面具有一定的靈活性，需要付出代價(jià)，而且有可能降低軟件系統(tǒng)的運(yùn)行效率。適度復(fù)雜性和可靠性用戶界面的規(guī)模和組織的復(fù)雜程度就是界面的復(fù)雜性。在完成預(yù)定功能的前提下，應(yīng)使用戶界面越簡單越好。但不是把所有功能和界面安排成線性序列就一定簡單。用戶界面的可靠性是指無故障使用的間隔時(shí)間。用戶界面應(yīng)能保證用戶正確、可靠地使用系統(tǒng)，保證有關(guān)程序和數(shù)據(jù)的安全性。界面美觀性界面美的內(nèi)涵優(yōu)美的界面可以令人賞心悅目，界面的美不僅是它的外觀漂亮，更在于其豐富的內(nèi)涵。界面美的內(nèi)涵在于其有效表達(dá)思想的能力，這也是衡量美的一種標(biāo)準(zhǔn)，它的主要構(gòu)成因素是：

合適性、吸引力和風(fēng)格。圖形用戶界面的主要思想桌面隱喻：是指在用戶界面中用人們熟悉的桌面上的圖形清楚地表示計(jì)算機(jī)可以處理的能力。圖形用戶界面中的圖例可以代表對象、動(dòng)作、屬性或其他概念。圖形具有一定的文化和語言獨(dú)立性，可以提高搜索目標(biāo)的效率。隱喻的分類：直接隱喻：隱喻本身就帶有操縱的對象——如Word繪圖工具中的圖標(biāo)工具隱喻：代表所使用的工具——如存盤操作的磁盤圖標(biāo)、打印操作的打印機(jī)圖標(biāo)等過程隱喻：通過描述操作的過程來暗示該操作——如Word中的撤銷和恢復(fù)圖標(biāo)。圖形用戶界面的主要思想隱喻的主要缺點(diǎn)：需要占用屏幕空間難以表達(dá)和支持比較抽象的信息晦澀的隱喻不僅不能增加可用性，反而會(huì)弄巧成拙。不好的隱喻圖形用戶界面的主要思想所見即所得（WhatYouSeeIsWhatYouGet，WYSIWYG）在WYSIWYG交互界面中顯示的用戶交互行為與應(yīng)用程序最終產(chǎn)生的結(jié)果是一致的，人們可以對于最后的輸出結(jié)果有直觀的認(rèn)識。弊端：如果屏幕的空間或顏色的配置方案與硬件設(shè)備所提供的配置不一樣，在兩者之間就很難產(chǎn)生正確的匹配。完全的WYSIWYG也可能不適合某些用戶的需要。圖形用戶界面的主要思想直接操縱：是指可以把操作的對象、屬性、關(guān)系顯式地表示出來，用光筆、鼠標(biāo)、觸摸屏或數(shù)據(jù)手套等指點(diǎn)設(shè)備直接從屏幕上啟動(dòng)命令與數(shù)據(jù)的過程。直接操縱的特性：直接操縱的對象是動(dòng)作或數(shù)據(jù)的形象隱喻形象隱喻應(yīng)該與其實(shí)際內(nèi)容相近，使用戶能通過屏幕上的隱喻直接想象或感知其內(nèi)容。用指點(diǎn)和選擇代替鍵盤輸入有兩個(gè)優(yōu)點(diǎn)：一是操作簡便，速度快捷；二是不用記憶復(fù)雜的命令。界面設(shè)計(jì)的三大原則以用戶為中心將界面置于用戶的控制之下減輕用戶的記憶負(fù)擔(dān)良好的直覺特性保持界面的一致性1.用戶中心用戶應(yīng)該總是感覺在控制軟件而不是感覺被軟件所控制用戶--而不是計(jì)算機(jī)或軟件--開始動(dòng)作采取交互式和易感應(yīng)的窗口從用戶的視角出發(fā)，使用用戶的語言后臺(tái)運(yùn)行長進(jìn)程時(shí)，保持前臺(tái)的交互性容忍用戶探索中出錯(cuò)提供用戶自定義設(shè)置2.減輕記憶負(fù)擔(dān)用熟悉的隱喻為用戶的任務(wù)提供直接而直觀的界面喚醒用戶的知識和經(jīng)驗(yàn)，一看就知道支持用戶“認(rèn)知”而不是記憶與常見軟件保持一致3.一致性一致性為用戶提供熟悉可預(yù)測的環(huán)境用戶能夠?qū)⒁延械闹R應(yīng)用到新的任務(wù)中，從而更快地接受新事物統(tǒng)一的命令術(shù)語一致的操作環(huán)境一致的功能和響應(yīng)一致的隱喻界面設(shè)計(jì)的一般詳則交互布局色彩圖標(biāo)聯(lián)機(jī)幫助錯(cuò)誤處理1交互的設(shè)計(jì)原則盡量提供對所有功能的鍵盤訪問盡量提供對所有功能的鼠標(biāo)訪問不可逆的操作要求用戶確認(rèn)耗時(shí)的操作給出反饋可視的狀態(tài)轉(zhuǎn)換反饋鼠標(biāo)右鍵僅用于快捷菜單快捷鍵的習(xí)慣一致性避免水平滾動(dòng)條2版式布局的設(shè)計(jì)原則平衡原則整齊有序、整體平衡協(xié)調(diào)原則劃分一致的功能區(qū)對比原則預(yù)期原則屏幕上所有對象的動(dòng)作可預(yù)期順序原則根據(jù)需要排列對象顯示的順序示例分析專業(yè)軟件一般都要提供反饋操作信息的窗口區(qū)域。頁面被用戶關(guān)注的程度不同3色彩的設(shè)計(jì)原則合理利用顏色，實(shí)現(xiàn)內(nèi)容與形式的協(xié)調(diào)采用柔和中性的顏色，支持用戶定制顏色設(shè)計(jì)一致盡量用單色一屏的色彩種類少于7種對象顏色的選取符合習(xí)慣（如果有的話）重要對象選取醒目顏色為區(qū)分對象，首先按亮度、其次按顏色背景色選取淺色調(diào)暖色調(diào)接近觀眾，冷色調(diào)遠(yuǎn)離觀眾圖標(biāo)的設(shè)計(jì)圖標(biāo)是可視地表示實(shí)體信息的簡潔、抽象的符號。設(shè)計(jì)圖標(biāo)時(shí)應(yīng)該著重考慮視覺沖擊力，要使用簡單的顏色，利用眼睛對色彩和網(wǎng)點(diǎn)的空間混合效果，做出精彩圖標(biāo)。設(shè)計(jì)圖標(biāo)時(shí)須遵守的原則和方法：圖標(biāo)的圖形應(yīng)該和目標(biāo)的外形相似，盡量避免過于抽象?？稍趫D標(biāo)中附加上簡要的文本標(biāo)注，使用戶明確圖標(biāo)的含義。設(shè)計(jì)圖標(biāo)應(yīng)盡可能簡單（三維的圖標(biāo)雖然醒目但也能使人分心），符合常規(guī)的表達(dá)習(xí)慣，保持圖標(biāo)含義的前后連貫。5聯(lián)機(jī)幫助的設(shè)計(jì)原則對用戶的操作隨時(shí)給出必要的幫助提供幫助信息而不是數(shù)據(jù)幫助信息的內(nèi)容簡潔易懂幫助信息的形式包括圖表、動(dòng)畫和聲音等幫助信息有統(tǒng)一的風(fēng)格為不同類型的用戶提供不同的幫助功能幫助不能影響用戶的工作任務(wù)，聯(lián)機(jī)幫助結(jié)束后應(yīng)該返回用戶的工作任務(wù)6錯(cuò)誤處理的設(shè)計(jì)原則檢測用戶的錯(cuò)誤，并提供簡明的錯(cuò)誤處理手段報(bào)錯(cuò)信息以可視化的形式出現(xiàn)報(bào)錯(cuò)信息語氣友善報(bào)錯(cuò)信息盡可能準(zhǔn)確報(bào)錯(cuò)信息簡潔明了、通俗易懂報(bào)錯(cuò)信息風(fēng)格一致提供保護(hù)功能和恢復(fù)(Undo)功能示例分析軟件人員經(jīng)常編寫出“劣質(zhì)”的消息框，例如措詞生硬、幼稚、蹩腳，甚至有文字、語法錯(cuò)誤；消息文本、圖形標(biāo)志和命令按鈕在語義上不一致。

好的差的7按鈕的設(shè)計(jì)按鈕的設(shè)計(jì)原則：具有交互性，應(yīng)該有3到6種狀態(tài)效果：點(diǎn)擊時(shí)的狀態(tài)鼠標(biāo)放在上面但未點(diǎn)擊的狀態(tài)點(diǎn)擊前鼠標(biāo)未放在上面時(shí)的狀態(tài)點(diǎn)擊后鼠標(biāo)未放在上面時(shí)的狀態(tài)不能點(diǎn)擊時(shí)的狀態(tài)獨(dú)立自動(dòng)變化的狀態(tài)按鈕應(yīng)具備簡潔的圖示效果，應(yīng)能夠讓使用者產(chǎn)生功能上的關(guān)聯(lián)反應(yīng)。屬于一個(gè)群組的按鈕應(yīng)該風(fēng)格統(tǒng)一，功能差異大的按鈕可以有所區(qū)別。8屏幕布局的設(shè)計(jì)屏幕顯示信息是由計(jì)算機(jī)系統(tǒng)向用戶提供的反饋信息，屏幕顯示界面的設(shè)計(jì)應(yīng)能展現(xiàn)這些信息。設(shè)計(jì)屏幕布局時(shí)應(yīng)該使各功能區(qū)重點(diǎn)突出，應(yīng)遵循如下幾條原則：平衡原則：屏幕上下左右平衡預(yù)期原則：屏幕上所有對象處理一致化，使對象的操作結(jié)果可預(yù)期經(jīng)濟(jì)原則：提供足夠信息量的同時(shí)要注意簡明、清晰順序原則：按照需要排列順序規(guī)則化：畫面應(yīng)對稱，顯示應(yīng)盡量統(tǒng)一規(guī)范9菜單界面的設(shè)計(jì)菜單在圖形界面的應(yīng)用程序中使用得非常普遍，是軟件界面設(shè)計(jì)的一個(gè)重要組成方面，描述了一個(gè)軟件的大致功能和風(fēng)格。菜單中的選項(xiàng)在功能上與按鈕相當(dāng)，一般具有下列一種或幾種類型的選項(xiàng)：命令項(xiàng)、菜單項(xiàng)和窗口項(xiàng)。菜單的結(jié)構(gòu)一般有：單一菜單線狀序列菜單樹狀結(jié)構(gòu)菜單網(wǎng)狀結(jié)構(gòu)菜單10填表輸入界面的設(shè)計(jì)在處理大量相關(guān)數(shù)據(jù)的場合下，需要輸入一系列的數(shù)據(jù)，這時(shí)填表輸入界面是最理想的數(shù)據(jù)輸入界面。填表輸入界面的特點(diǎn)：有明確的提示，使用戶可以不需要學(xué)習(xí)、訓(xùn)練，