第10講

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

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

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