簡介
用戶界面設計界面設計從流程上分為結構設計、互動設計和視覺設計三部分。
隨著產品螢幕操作的不斷普及，用戶界面已經融入我們的日常生活。一個良好設計的用戶界面，可以大大提高工作效率，使用戶從中獲得樂趣，減少由於界面問題而造成用戶的諮詢與投訴，減輕客戶服務的壓力，減少售後服務的成本。因此，用戶界面設計對於任何產品/服務都極其重要。
在國外，用戶界面設計人員有了一個新的稱謂：Information Architecture,信息建築師。它不僅僅是指美工，而是具有心理學、軟體工程學、設計學等綜合知識的人。
工作流程
用戶界面設計· 結構設計 Structure Design
結構設計也稱概念設計 （Conceptual Design），是界面設計的骨架。通過對用戶研究和任務分析，制定出產品的整體架構。基於紙質的的低保真原型（Paper Prototype）可提供用戶測試並進行完善。在結構設計中，目錄體系的邏輯分類和語詞定義是用戶易於理解和操作的重要前提。如西門子手機的設定鬧鐘的詞條是“重要記事”，讓用戶很難找到。
· 互動設計 Interactive Design
互動設計的目的是使產品讓用戶能簡單使用。 任何產品功能的實現都是通過人和機器的互動來完成的。因此，人的因素應作為設計的核心被體現出來。互動設計的原則如下：
1) 有清楚的錯誤提示。誤操作後，系統提供有針對性的提示。
2) 讓用戶控制界面。“下一步”、“完成”，面對不同層次提供多種選擇，給不同層次的用戶提供多種可能性。
3) 允許兼用滑鼠和鍵盤。同一種功能，同時可以用滑鼠和鍵盤。提供多種可能性。
4) 允許工作中斷。例如用手機寫新簡訊的時候，收到簡訊或電話，完成後回來仍能夠找到剛才正寫的新簡訊。
5) 使用用戶的語言，而非技術的語言。
6) 提供快速反饋。給用戶心理上的暗示，避免用戶焦急。
7) 方便退出。如手機的退出，是按一個鍵完全退出，還是一層一層的退出。提供兩種可能性。
8）導航功能。隨時轉移功能，很容易從一個功能跳到另外一個功能。
9）讓用戶知道自己當前的位置，使其做出下一步行動的決定。
· 視覺設計 Visual Design
在結構設計的基礎上，參照目標群體的心理模型和任務達成進行視覺設計。包括色彩、字型、頁面等。視覺設計要達到用戶愉悅使用的目的。視覺設計的原則如下：
1）界面清晰明了。允許用戶定製界面。
2） 減少短期記憶的負擔。讓計算機幫助記憶，例：User Name,、Password、IE進入界面地址可以讓機器記住。
3） 依賴認知而非記憶。如列印圖示的記憶、下拉選單列表中的選擇
4） 提供視覺線索。圖形符號的視覺的刺激；GUI（圖形界面設計）：Where, What, Next Step
5） 提供默認（default）、撤銷（undo）、恢復（redo）的功能
6） 提供界面的捷徑
7） 儘量使用真實世界的比喻。如：電話、印表機的圖示設計，尊重用戶以往的使用經驗。
8） 完善視覺的清晰度。條理清晰；圖片、文字的布局和隱喻不要讓用戶去猜。
9）界面的協調一致。如手機界面按鈕排放，左鍵肯定；右鍵否定；或按內容擺放。
10） 同樣功能用同樣的圖形。
11）色彩與內容。整體軟體不超過5個色系，儘量少用紅色、綠色。近似的顏色表示近似的意思。
界面規範
用戶界面設計1. 易用性原則
按鈕名稱應該易懂，用詞準確，沒有摸稜兩可的字眼，要與同一界面上的其他按鈕易於區分，如能望文知意最好。理想的情況是用戶不用查閱幫助就能知道該界面的功能並進行相關的正確操作。
易用性細則：
完成相同或相近功能的按鈕用Frame 框起來，常用按鈕要支持捷徑。
完成同一功能或任務的元素放在集中位置，減少滑鼠移動的距離。
按功能將界面劃分局域塊，用Frame 框起來，並要有功能說明或標題。
界面要支持鍵盤自動瀏覽按鈕功能，即按Tab 鍵的自動切換功能。
界面上首先應輸入的信息和重要信息的控制項在Tab 順序中應當靠前，位置也應放在視窗上較醒目的位置。
同一界面上的控制項數最好不要超過10 個，多於10 個時可以考慮使用分頁界面顯示。
分頁界面要支持在頁面間的快捷切換，常用組合快捷鍵Ctrl+Tab
默認按鈕要支持Enter 操作，即按Enter 後自動執行默認按鈕對應操作。
可輸入控制項檢測到非法輸入後應給出說明信息並能自動獲得焦點。
Tab 鍵的順序與控制項排列順序要一直，目前流行總體從上到下，同時行間從左到右的方式。
複選框和選項框按選擇幾率的高底而先後排列。
複選框和選項框要有默認選項，並支持Tab 選擇。
選項數相同時多用選項框而不用下拉列表框。
界面空間較小時使用下拉框而不用選項框。
選項數較少時使用選項框，相反使用下拉列表框。
專業性強的軟體要使用相關的專業術語，通用性界面則提倡使用通用性詞眼。
對於界面輸入重複性高的情況，該界面應全面支持鍵盤操作，即在不使用滑鼠的情況下採用鍵盤進行操作。
2. 規範性原則
通常界面設計都按Windows 界面的規範來設計，即包含“選單條、工具列、工具箱廂、狀態欄、滾動條、右鍵快捷選單”的標準格式，可以說：界面遵循規範化的程度越高，則易用性相應的就越好。小型軟體一般不提供工具箱。
規範性細則：
常用選單要有命令捷徑。
完成相同或相近功能的選單用橫線隔開放在同一位置。
選單前的圖示能直觀的代表要完成的操作。
選單深度一般要求最多控制在三層以內。
工具列要求可以根據用戶的要求自己選擇定製。
相同或相近功能的工具列放在一起。
工具列中的每一個按鈕要有及時提示信息。
一條工具列的長度最長不能超出螢幕寬度。
工具列的圖示能直觀的代表要完成的操作。
系統常用的工具列設定默認放置位置。
工具列太多時可以考慮使用工具箱。
工具箱要具有可增減性，由用戶自己根據需求定製。
工具箱的默認總寬度不要超過螢幕寬度的1/5。
狀態條要能顯示用戶切實需要的信息，常用的有：目前的操作、系統狀態、用戶位置、用戶信息、提示信息、錯誤信息、使用單位信息及軟體開發商信息等，如果某一操作需要的時間較長，還應該顯示進度條和進程提示。
滾動條的長度要根據顯示信息的長度或寬度能及時變換，以利於用戶了解顯示信息的位置和百分比。
狀態條的高度以放置五好字為宜，滾動條的寬度比狀態條的略窄。
選單和工具條要有清楚的界限；選單要求凸出顯示，這樣在移走工具條時仍有立體感。
選單和狀態條中通常使用5 號字型。工具條一般比選單要寬，但不要寬的太多，否則看起來很不協調。
右鍵快捷選單採用與選單相同的準則。
3. 幫助設施原則
系統應該提供詳盡而可靠的幫助文檔，在用戶使用產生迷惑時可以自己尋求解決方法。
幫助設施細則：
幫助文檔中的性能介紹與說明要與系統性能配套一致。
打包新系統時，對作了修改的地方在幫助文檔中要做相應的修改，做到版本統一。
操作時要提供及時調用系統幫助的功能。常用F1。
在界面上調用幫助時應該能夠及時定位到與該操作相對的幫助位置。也就是說幫助要有即時針對性。
最好提供目前流行的在線上幫助格式或HTML 幫助格式。
用戶可以用關鍵字在幫助索引中搜尋所要的幫助，當然也應該提供幫助主題詞。
如果沒有提供書面的幫助文檔的話，最好有列印幫助的功能。
在幫助中應該提供我們的技術支持方式，一旦用戶難以自己解決可以方便的尋求新的幫助方式.
4. 合理性原則
螢幕對角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引用戶注意力的位置，在放置窗體時要注意利用這兩個位置。
合理性細則：
父窗體或主窗體的中心位置應該在對角線焦點附近。
子窗體位置應該在主窗體的左上角或正中。
多個子窗體彈出時應該依次向右下方偏移，以顯示窗體出標題為宜。
重要的命令按鈕與使用較頻繁的按鈕要放在界面上注目的位置。
錯誤使用容易引起界面退出或關閉的按鈕不應該放在易點位置。橫排開頭或最後與豎排最後為易點位置。
與正在進行的操作無關的按鈕應該加以禁止。
對可能造成數據無法恢復的操作必須提供確認信息，給用戶放棄選擇的機會。
非法的輸入或操作應有足夠的提示說明。
對運行過程中出現問題而引起錯誤的地方要有提示，讓用戶明白錯誤出處，避免形成無限期的等待。
提示、警告、或錯誤說明應該清楚、明了、恰當並且應避免英文提示的出現。
5. 美觀與協調性原則
界面應該大小適合美學觀點，感覺協調舒適，能在有效的範圍內吸引用戶的注意力。
美觀與協調性細則：
長寬接近黃金點比例，切忌長寬比例失調、或寬度超過長度。
布局要合理，不宜過於密集，也不能過於空曠，合理的利用空間。
按鈕大小基本相近，忌用太長的名稱，免得占用過多的界面位置。
按鈕的大小要與界面的大小和空間要協調。
避免空曠的界面上放置很大的按鈕。
放置完控制項後界面不應有很大的空缺位置。
字型的大小要與界面的大小比例協調， 通常使用的字型中宋體9-12 較為美觀，很少使用超過12號的字型。
前景與背景色搭配合理協調，反差不宜太大，最好少用深色，如大紅、大綠等。常用色考慮使用Windows 界面色調。
如果使用其他顏色，主色要柔和，具有親和力與磁力，堅決杜絕刺目的顏色。
大型系統常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。
界面風格要保持一致，字的大小、顏色、字型要相同，除非是需要藝術處理或有特殊要求的地方。
如果窗體支持最小化和最大化或放大時，窗體上的控制項也要隨著窗體而縮放；切忌只放大窗體而忽略控制項的縮放。
對於含有按鈕的界面一般不應該支持縮放，即右上角只有關閉功能。
通常父窗體支持縮放時，子窗體沒有必要縮放。
如果能給用戶提供自定義界面風格則更好，由用戶自己選擇顏色、字型等。
6. 選單位置原則
選單是界面上最重要的元素，選單位置按照按功能來組織。
選單設定細則：
選單通常採用“常用--主要--次要--工具--幫助”的位置排列，符合流行的Windows 風格。
常用的有“檔案”、“編輯”，“查看”等，幾乎每個系統都有這些選項，當然要根據不同的系統有所取捨。
下拉選單要根據選單選項的含義進行分組，並切按照一定的規則進行排列，用橫線隔開。
一組選單的使用有先後要求或有嚮導作用時，應該按先後次序排列。
沒有順序要求的選單項按使用頻率和重要性排列，常用的放在開頭， 不常用的靠後放置；重要的放在開頭，次要的放在後邊。
如果選單選項較多，應該採用加長選單的長度而減少深度的原則排列。
選單深度一般要求最多控制在三層以內。
對常用的選單要有快捷命令方式，組合原則見8。
對與進行的操作無關的選單要用禁止的方式加以處理，如果採用動態載入方式—即只有需要的選單才顯示—最好。
選單前的圖示不宜太大，與字高保持一直最好。
主選單的寬度要接近，字數不應多於四個，每個選單的字數能相同最好。
主選單數目不應太多，最好為單排布置。
7. 獨特性原則
如果一味的遵循業界的界面標準，則會喪失自己的個性。在框架符合以上規範的情況下，設計具有自己獨特風格的界面尤為重要。尤其在商業軟體流通中有著很好的遷移默化的廣告效用。
獨特性細則：
安裝界面上應有單位介紹或產品介紹，並有自己的圖示或徽標。
主界面，最好是大多數界面上要有公司圖示或徽標。
登錄界面上要有本產品的標誌，同時包含公司圖示或徽標。
幫助選單的“關於”中應有著作權和產品信息。
公司的系列產品要保持一直的界面風格，如背景色、字型、選單排列方式、圖示、安裝過程、按鈕用語等應該大體一致。
應為產品製作特有的圖示並區別於公司圖示或徽標
8. 捷徑的組合原則
在選單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤的用戶操作得更快一些 在西文Windows 及其套用軟體中快捷鍵的使用大多是一致的。
選單中：
面向事務的組合有：Ctrl-D 刪除；Ctrl-F 尋找 ；Ctrl –H 替換；Ctrl-I 插入 ；Ctrl-N 新記錄 ；Ctrl-S 保存 Ctrl-O 打開。
列表：Ctrl-R ，Ctrl-G 定位；Ctrl-Tab 下一分頁視窗或反序瀏覽同一頁面控制項；。
編輯：Ctrl-A 全選；Ctrl-C 拷貝；Ctrl-V 貼上；Ctrl-X 剪下；Ctrl-Z 撤消操作；Ctrl-Y 恢復操作。
檔案操作：Ctrl-P 列印；Ctrl-W 關閉。
系統選單：Alt-A 檔案；Alt-E 編輯；Alt-T 工具；Alt－W 視窗；Alt－H 幫助。
MS Windows 保留鍵：Ctrl-Esc 任務列表 ；Ctrl-F4 關閉視窗； Alt-F4 結束套用；Alt-Tab 下一套用 ；Enter 預設按鈕/確認 操作 ；Esc取消按鈕/取消操作；Shift-F1 上下文相關幫助 。
按鈕中：
可以根據系統需要而調節，以下只是常用的組合。
Alt-Y 確定(是）；Alt-C 取消；Alt-N 否；Alt-D 刪除；Alt-Q 退出；Alt-A 添加；Alt-E 編輯；Alt-B 瀏覽；Alt-R 讀；Alt-W 寫。這些快捷鍵也可以作為開發中文套用軟體的標準，但亦可使用漢語拼音的開頭字母。
9. 排錯性考慮原則
在界面上通過下列方式來控制出錯幾率，會大大減少系統因用戶人為的錯誤引起的破壞。開發者應當儘量周全地考慮到各種可能發生的問題，使出錯的可能降至最小。如套用出現保護性錯誤而退出系統，這種錯誤最容易使用戶對軟體失去信心。因為這意味著用戶要中斷思路，並費時費力地重新登錄，而且已進行的操作也會因沒有存檔而全部丟失。
排錯性細則：
最重要的是排除可能會使套用非正常中止的錯誤。
應當注意儘可能避免用戶無意錄入無效的數據。
採用相關控制項限制用戶輸入值的種類。
當用戶作出選擇的可能性只有兩個時，可以採用單選框。
當選擇的可能再多一些時，可以採用複選框，每一種選擇都是有效的，用戶不可能輸入任何一種無效的選擇。
當選項特別多時，可以採用列表框，下拉式列表框。
在一個套用系統中，開發者應當避免用戶作出未經授權或沒有意義的操作。
對可能引起致命錯誤或系統出錯的輸入字元或動作要加限制或禁止。
對可能發生嚴重後果的操作要有補救措施。通過補救措施用戶可以回到原來的正確狀態。
對一些特殊符號的輸入、與系統使用的符號相衝突的字元等進行判斷並阻止用戶輸入該字元。
對錯誤操作最好支持可逆性處理，如取消系列操作。
在輸入有效性字元之前應該阻止用戶進行只有輸入之後才可進行的操作。
對可能造成等待時間較長的操作應該提供取消功能。
特殊字元常有；；’”><，`‘：“[”{、\|}]+=）-(_*&&^%$#@!~，。?/還有空格。
與系統採用的保留字元衝突的要加以限制。
在讀入用戶所輸入的信息時，根據需要選擇是否去掉前後空格。
有些讀入資料庫的欄位不支持中間有空格，但用戶切實需要輸入中間空格，這時要在程式中加以處理。
10. 多視窗的套用與系統資源原則
設計良好的軟體不僅要有完備的功能，而且要儘可能的占用最底限度的資源。
在多視窗系統中，有些界面要求必須保持在最頂層，避免用戶在打開多個視窗時，不停的切換甚至最小化其他視窗來顯示該視窗。
在主界面載入完畢後自動卸出記憶體，讓出所占用的WINDOWS 系統資源。
關閉所有窗體，系統退出後要釋放所占的所有系統資源 ，除非是需要後台運行的系統。
儘量防止對系統的獨占使用。
了解了良好的用戶界面的規範，那么我們測試工作該如何下手？該注意那些方面呢？
1. 一致性
如果你可以在一個列表的項目上雙擊後能夠彈出對話框，那么應該在任何列表中雙擊都能彈出對話框。要有統一的字型寫號、統一的色調、統一的提示用詞、視窗在統一的位置、按鈕也在視窗的相同的位置。
2. 設定標準並遵循它
可以參數一些工業標準，如IBM的界面設計規範或MS的設計規則，它提供了90%你所需要的規範。
3. 設定嚮導
如果用戶使用了一個功能後，不知道如何做下一個，他們就會放棄。如果*作流程和手工工作流程一致，用戶就會努力去完成它。最好的方式來引導用戶就是在桌面上設定一個流程嚮導。
4. 提示信息必須恰當且規範
提示信息必須容易理解並且口徑統一，比如“您輸入了錯誤的數據”、“用戶數據不能超過8位”。一致的措詞，提示信息還應該出現在一致的位置，如彈出提示視窗、視窗的上方或視窗的下方。對用戶的稱呼應該統一，比如有時提示“用戶輸入了錯誤的數據”，有時提示“您輸入了錯誤的數據”，有時又提示“使用者輸入了錯誤的數據”，這樣會使用戶無所適從。
5. 借鑑好的程式
多了解同類軟體的界面，並加以分析與了解，直到能夠區別好的用戶界面與差的用戶界面。但不能夠簡單的模仿別人的界面，而使得自己的軟體沒有特色
6. 功能的統一
有一些很常用的功能，如添加、修改、刪除、查看，同一個軟體中，這些功能應該有相同的處理方法。
7. 變灰的功能
有時有些功能不可用，最好不要刪除這些按鈕若項目，而是使他們變灰為不可用狀態，這樣有助於用戶理解整個程式的功能。
8. 默認按鈕
使用不具有破壞功能的默認按鈕，在每個視窗中，為了方便用戶，一般都定義了一個默認按鈕，當用戶敲回車鍵時可以快速執行某功能，但有時用戶會不小心按錯回車鍵，這時候執行了默認功能後，不能產生不可還原的操作，比如刪除或保存。
按照上面的規範和測試的細則檢驗過被測試的軟體。相信軟體界面上能顯得更加規範和容易被用戶所接受。
測試用例
用戶界面設計檢查項
測試人員評價
合適性和正確性
用戶界面是否與軟體的功能相融洽？
是否所有界面元素的文字和狀態都正確無誤？
容易理解
對於常用的功能，用戶能否不必閱讀手冊就能使用？
是否所有界面元素（例如圖示）都不會讓人誤解？
是否所有界面元素提供了充分而必要的提示？
界面結構能夠清晰地反映工作流程？
用戶是否容易知道自己在界面中的位置，不會迷失方向？
有在線上幫助嗎？
風格一致
同類的界面元素是否有相同的視感和相同的操作方式？
字型是否一致？
是否符合廣大用戶使用同類軟體的習慣？
及時反饋信息
是否提供進度條、動畫等反映正在進行的比較耗時間的過程？
是否為重要的操作返回必要的結果信息？
出錯處理
是否對重要的輸入數據進行校驗？
執行有風險的操作時，有“確認”、“放棄”等提示嗎？
是否根據用戶的許可權自動禁止某些功能？
是否提供Undo功能用以撤銷不期望的操作？
適應各種水平的用戶
所有界面元素都具備充分必要的鍵盤操作和滑鼠操作嗎？
初學者和專家都有合適的方式操作這個界面嗎？
色盲或者色弱的用戶能正常使用該界面嗎？
國際化
是否使用國際通行的圖示和語言？
度量單位、日期格式、人的名字等是否符合國際慣例？
個性化
是否具有與眾不同的、讓用戶記憶深刻的界面設計？
是否在具備必要的“一致性”的前提下突出“個性化”設計？
合理布局
和諧色彩
界面的布局符合軟體的功能邏輯嗎？
界面元素是否在水平或者垂直方向對齊？
界面元素的尺寸是否合理？行、列的間距是否保持一致？
是否恰當地利用窗體和控制項的空白，以及分割線條？
視窗切換、移動、改變大小時，界面正常嗎？
界面的色調是否讓人感到和諧、滿意？
重要的對象是否用醒目的色彩表示？
色彩使用是否符合行業的習慣？
