用戶界面設計的技巧與技術
對大多數(shù)人來說，用戶界面就是軟件本身。所以，掌握用戶界面設計的技巧與技術是讓軟件走向市場的最直觀因素。
對于應用軟件來說，一個基本現(xiàn)實就是：用戶界面是面向用戶的。用戶需要的是開發(fā)者開發(fā)的應用軟件滿足其需求，并且易于使用。太多的開發(fā)者自以為是藝術天才，他們不去盡力遵循用戶界面設計標準，或花精力使得產(chǎn)品好用；相反，他們錯誤地認為編寫更靈巧的代碼或是使用一套確實有趣的顏色方案才是重要的事。Constantine(1995)指出，好的用戶界面使得人們不用閱讀用戶手冊或接受培訓就能使用應用軟件。
界面設計的重要性有這么幾個原因：首先，用戶界面越直觀，就越易用，越易用就越便宜。因為界面越好，培訓用戶就越容易，降低丁培訓成本；界面越出色，用戶就越少求助，降低了客戶支持成本。其次，界面越出色，用戶就喜歡使用，增強了開發(fā)者工作的滿意度。
一、用戶界面設計的技巧與技術
本節(jié)所包含的用戶界面設計技巧將有助于提高面向?qū)ο蠼缑娴脑O計。
l、一致，一致，還是——致。
你能做的最重要的事情就是保證用戶界面運作的一致性。對于列表框來說，如果雙擊其中的項，使得某些事件發(fā)生，那么雙擊任何其它列表框中的項，都應該有同樣的事件發(fā)生。所有窗口按鈕的位置要一致，標簽和訊息的措辭要一致，顏色方案要一致。用戶界面的—致性使得在用戶對于界面運作建立起精確的心理模型，從而降低培訓和支持成本。
2，建立標準并遵循之。
在應用軟件中保持一致的唯一途徑就是建立設計標準并加以遵循。最好的辦法是采取一套行業(yè)標準，對自身特殊的需要加以補充。已有的行業(yè)標準，如IBM標準(1993)與Microsoft標準(1995)，通?？蓾M足95％到99％的需要。采用行業(yè)標準，只需利用已有的成果，也使你的應用軟件看起來或感覺上更象用戶已購買或建立的其它應用軟件。應當在定義基礎構造階段就建立用戶界面設計標準(Atablet，1998)。
3、闡明規(guī)則。
用戶要知道怎么使用你為他們開發(fā)的軟件。軟件運作的一致性表明，規(guī)則你只需解釋一遍。這比一步步詳細講解如何使用應用軟件每個特性要容易得多。
4、同時支持生手和熟手。
圖書館目錄符號對圖書館系統(tǒng)的一般用戶來說，也許就夠用了，但對熟手用戶，如圖書管理員，很可能就沒有那么有效了。圖書管理員是受過專門訓練，能夠使用復雜的查詢系統(tǒng)找到信息，因此，應當考慮建立一套查詢界面以滿足他們的獨特需要。
5、界面間切換很重要。
如果從一個屏幕轉(zhuǎn)換到另一屏幕很困難，用戶會很快灰心并放棄。當屏幕流程與用戶想完成的工作流程相符，此軟件對用戶才有意義。由于不同用戶工作方式不同，應用軟件需要有足夠的靈活以支持他們不同的方式。在建模階段，界面流程圖可用來模擬屏幕之間的流程。
6、界面上的布局很重要。
在西方，人們是自左而右，從上而下閱讀，基于人們的習慣，屏幕的組織也應當是自左而右，從上而下。屏幕小部件的布局也應以用戶熟悉的方式進行。
7、訊息和標簽措辭要適當。
屏幕上顯示的文本是用戶主要的信息源。如果文本措辭很糟，用戶的理解就會很糟。要使用完整的措辭和句子，而不要用縮寫和代碼，使文本易于理解。訊息措辭要積極，顯示用戶處于控制之中，并提示如何正確使用軟件。如，下面哪一條訊息更吸引人： “你輸入了錯誤信息”還是“帳號應為8位數(shù)”?
此外，訊息措辭要一致，在屏幕上顯示的位置要一致。盡管這樣的訊息“須輸入名字”和“應輸入帳號”分別來說措辭上沒問題，放在一起就不一致了。根據(jù)第一條訊息的措辭，第二條訊息更好的措辭應當是“須輸入帳號”，這就使得兩條訊息措辭一致了。
8、了解小部件。
為恰當?shù)娜蝿帐褂们‘數(shù)男〔考?，首先可以幫助增強應用軟件的一致性，可能使得應用軟件很容易構造。學會如何正確使用小部件的唯一途徑是閱讀和理解你們所采用的用戶界面標準及準則。
9、對其它軟件不盲從。
除非你知道一個應用軟件是遵循了你們的用戶界面標準和和準則，否則你絕不能認定它做的都是對的。盡管看看人家怎么做，從中獲得些主意是不錯的想法，但在懂得怎樣區(qū)分用戶界面設計的好壞之前，你得留神。太多的開發(fā)者錯誤地模仿其它應用軟件的用戶界面，而那些界面卻設計得很糟。
10、顏色使用要適當。
使用顏色要謹慎。如果使用了，也要使用指示符。問題就在于有些用戶可能是色盲一一如果在屏幕上使用了顏色來突出顯示某些東西，假若想讓色盲的用戶注意到，那么需要做些另外的工作來突出它，如在其旁邊顯示一個符號。顏色的使用也得一致，以使整個應用軟件有同樣的觀感。此外，在不同平臺上，色彩的表現(xiàn)不盡人意一一在一個系統(tǒng)上看上去很好，在另一個系統(tǒng)上常常看上去很糟。展示會上我們經(jīng)常聽到展示者這樣說： “在我家中的機器上看上去可是很好的呀。”
11、遵循對比原則。
打算在應用軟件中使用顏色，要確保屏幕的可讀性。最好的方法是遵循對比原則：在淺色背景上使用深色文字，在深色背景上使用淺色文字。藍色文字以白色為背景很容易讀，但以紅色為背景很難辨認。問題出在藍色與紅色之間沒有足夠反差，而藍色與白色之間則反差很大。
12、字體使用要適當。
老式英語字體可能在莎士比亞的劇本封面看上去很合適，但在屏幕上卻很難認。要用那些可讀性好的字體，如serif或Times Roman。此外，字體的使用要一致。節(jié)儉、有效地使用兩、三種字體的屏幕看上去遠勝于使用五、六種字體的屏幕。要記住每次改變了字體的大小、風格(粗體、斜體、下劃線，……)、樣式或顏色，都是在使用不同的字體。
13、灰掉而不是移走。
在某些時刻，用戶經(jīng)常只能訪問應用軟件的某些功能。在刪除一個對象之前，要先選中它，由此加深用戶的心理模型，軟件應當用刪除按鈕及(或)菜單項去做一些事。按鈕應當移去還是灰掉?灰掉它，決不能移走!當用戶不該使用時就灰掉它，可使用戶對如何使用應用軟件建立精確的心理模型。如果僅僅移走一個小部件或菜單項，而不是灰掉它，用戶很難建立精確的心理模型，因為用戶只知道當前可用的，而不知道什么是不可用的。
14、使用非破壞性的缺省按鈕。
通常每個屏幕定義一個缺省按鈕，如果用戶按了回車鍵調(diào)用此按鈕。問題是有時用戶會意外敲擊回車鍵，結果激活了缺省按鈕。缺省按鈕決不能有潛在的破壞性，如刪除或保存(也許用戶根本不想保存)。
15、區(qū)域排列。
當屏幕有多個編輯區(qū)域，要以視覺效果和效率來組織這些區(qū)域。如圖1所示，編輯區(qū)域左對齊是最好的方法。換句話說，要使編輯區(qū)域左邊界在一條直線上且上下排列。與之相應的標簽則應右對齊，置于編輯區(qū)域旁。這是屏幕上組織區(qū)域的一個整潔有效的方式。
16、數(shù)據(jù)對齊要適當。
對一列列的數(shù)據(jù)，通常的作法是整浮點數(shù)右對齊，字符串左對齊。
17、屏幕不能擁擠。
擁擠的屏幕讓人難以理解，因而難以使用。實驗結果(Mayhew，1992年)顯示屏幕總體蓋度不應超過40％，而分組中屏幕蓋度不應超過62％。
18、有效組合。
邏輯上關聯(lián)的項目在屏幕上應當加以組合，以顯示其關聯(lián)性。反之，任何相互之間毫不相關的項目應當分隔開。在項目集合間用間隔對其進行分組／或用方框也同樣可做到這一點。
19、在操作焦點處打開窗口。
當用戶雙擊一個對象顯示其編輯／詳情屏幕，用戶的注意力亦集中于此。因而在此處而不是其它地方打開窗口才有意義。
20、彈出菜單不應是唯一的功能來源。
如果主要功能被隱藏起來，用戶就不能學會怎樣使用軟件。開發(fā)人員最讓人灰心的作法是濫用彈出菜單，也稱作上下文相關菜單。一種使用鼠標的典型方法，是用來顯示一個隱藏的彈出菜單，提供針對當前工作的屏幕區(qū)域特定功能的訪問。
#p#
二、原型建立及技巧
(一)建立原型
建立原型是一種迭代分析技術，在此過程中用戶參與建立屏幕及報表的實體模型。原型的目的是展示應用軟件用戶界面的可能設計。
1、確定用戶需求。
原型的開發(fā)取決于用戶需求，需求決定了系統(tǒng)必須支持的業(yè)務對象。可以通過面談及在建模階段(如CRC類職責協(xié)作圖)、用例和類圖建模階段收集需求。
2、建立原型。
用原型工具或高級語言開發(fā)用戶所需的屏幕及報表。此階段最有益的忠告是不要花大量時間去寫“好”代碼，因為在對原型作了評估之后，你很可能丟棄這些代碼。
3、評估原型。
一個版本的原型建立后需要進行評估。主要目的是核實原型是否滿足用戶需求。評估時要確定三個基本結果：原型成功之處、失敗之處及遺漏之處。對原型作了評估后會發(fā)現(xiàn)，有的部分要丟棄，有的部分要修改，甚至要添加全新的部分。
4、確定是否完成。
當評估過程中不再有新的需求，或只有少量無關緊要的需求時，原型建立過程就可結束。
(二)原型建立的技巧與技術
1、尋找現(xiàn)實對象。
好的用戶界面令用戶使用時如同身臨其境。因此，應當以此為出發(fā)點，確定用戶在現(xiàn)實世界中的使用方式。
2、實際用戶共同工作。
參與建立原型的最佳人選，是那些在應用軟件開發(fā)完成之后的實際使用者。這些人是系統(tǒng)成功實現(xiàn)的最大獲益者，也正是他們，最清楚自己的需求。
3、設定時間表并執(zhí)行。
設定時間表，確定何時與用戶一起對原型進行評估。這樣做，既給用戶設定了期望，也迫使自己做好這項工作，是一個雙贏局面。
4、使用原型工具。
花錢買那種可以讓你快速整合屏幕的原型工具。因為很快寫出的代碼鮮有值得保留的，即便原型工具生成的代碼，與你打算進一步開發(fā)的代碼類型不同，也不必太在意。
5、用戶參與。
就如同買車之前要試車，用戶在應用軟件開發(fā)之前也應一試。此外，通過親自試用原型，用戶可以很快確定系統(tǒng)是否滿足要求。一個好方法是讓用戶將原型當作實際系統(tǒng)，通過一些用例來使用。
6、了解根本業(yè)務。
開發(fā)支持業(yè)務的原型前，需要了解根本業(yè)務。要與主要用戶面談，閱讀業(yè)務流程的內(nèi)部文檔，閱讀一些競爭對手如何實現(xiàn)的文檔。對業(yè)務越了解，就越有可能建立支持其業(yè)務的原型。
7、原型的不同層次。
可以依次開發(fā)系統(tǒng)的三種不同類型的原型。手繪原型，用來顯示基本／大概功能；電腦原型，用來顯示屏幕，但不包含要顯示的數(shù)據(jù)：最終是包含顯示的數(shù)據(jù)屏幕。由簡單開始，避免在那些很可能被丟棄的東西上花大量時間。隨著原型逐步接近最終方案，依次增加其復雜性，倘若對原型不斷加以改進，用戶對應用軟件實際中將如何運作就會有越來越清晰的認識。
8、別在代碼上下功夫。
在建立原型過程的開始，隨著對業(yè)務了解的深入，許多工作可以丟棄。因此，花大量精力寫那些很可能不會保留的代碼沒有意義。
三、界面流程圖
1、界面流程圖顯示了應用軟件的用戶界面部件、屏幕及報表之間的關系對用戶來說，用戶界面就是系統(tǒng)本身。雖然用戶界面原型常常會使開發(fā)者陷于界面實際如何運作的泥潭之中，它只是描述用戶界面的一種手段。用戶界面原型導致開發(fā)者遺漏了應用程序界面對象(通常是屏幕)之間的高層關系和相互作用。界面流程圖使開發(fā)者模擬了這些高層關系。
2、界面流程圖幫助開發(fā)者驗證用戶界面設計圖3是一個定單系統(tǒng)的界面流程圖。方框表示用戶界面對象(屏幕、報表或表單)，箭頭表示屏幕間可能的流程。如，通過主菜單屏幕，可以進到客戶查詢屏幕或定單登錄屏幕。一旦進入定單登錄屏幕，可以進到產(chǎn)品查詢屏幕或客戶定單登錄屏幕。界面流程圖可以很容易顯示應用軟件界面的高層概貌。
由于界面流程圖提供了系統(tǒng)界面的高層視圖，開發(fā)者可很快理解系統(tǒng)預期的運作流程。它提供了驗證應用軟件的用戶界面整體流程的視角。如，某個屏幕流程是否有意義?為何不能從客戶編輯屏幕進入客戶定單目錄屏幕?哪個目錄包含了一客戶所作的所有定購?此外，為何不能從產(chǎn)品的角度獲得同樣的目錄?
有些情況下，人們對查明哪些定單包含某件產(chǎn)品感興趣，尤其是期貨產(chǎn)品或已不可得的產(chǎn)品。界面流程圖也可用于確定用戶界面的一致性，以圖3為例，選擇打印命令，生成客戶摘要報表和打印定單，從圖上看來，至少對于打印來說，用戶界面是一致的。
四，普始善終
每個開發(fā)人員一一特別是系統(tǒng)分析員、 原型開發(fā)人員及構建用戶界面的程序員，都應對人因工程學(Human Factors En—gineering—--HFE)及所基于開發(fā)平臺行業(yè)標準的用戶界面準則有墓本的了解。如，任何基于Win32平臺的開發(fā)人員，都應當擁有和閱讀微軟用戶界面指南(Microson 1995)。決不可忘記，用戶界面對用戶來說就是軟件，而不是數(shù)據(jù)庫，不是網(wǎng)絡，也不是開發(fā)人員寫的那些很酷的Java代碼?；谝陨弦娊?，可以說，不懂用戶界面設計，就沒資格開發(fā)軟件!
所以，開發(fā)人員要做的是：首先，閱讀本文只是一個好的開端，還需要進一步接受教育。可以從用戶界面設計的概論課程開始，此課程涵蓋了人因工程學、符號、心理模型、屏幕設計基礎、報表設計基礎。如果要開發(fā)面向?qū)ο蟮挠脩艚缑?Object-Oriented User Interfaces)建議閱讀本文作者所著的Building Object Applications That Work(Ambler，1998a)一書的第九章。其次，花兩天時間學習所基于開發(fā)平臺的用戶界面標準。現(xiàn)有的用戶界面標準囊括了許多常見操作系統(tǒng)，包括互聯(lián)網(wǎng)開發(fā)的通用用戶界面標準。再次說明，如果沒有此類課程，你也得作相關的學習。
總之，每個開發(fā)人員都應了解用戶界面設計的基本原則。
五、小結
下面我們將設計高效的用戶界面的主要技巧小結如下：
1、一般指南
- 用戶界面的一致很關鍵，
- 采用行業(yè)標準，也使你的應用軟件看起來或視感上與其它機構開發(fā)的軟件更趨一致，
- 向用戶闡明軟件運行規(guī)則。有了一致性，規(guī)則只會簡練，
- 支持生手也支持熟手；
- 文字措辭一致、正面，要用全稱，
- 對其它軟件不盲從'，要知道不是每個人都懂得如何設計好的用戶界面；
- 在桌面上顯示快捷方式；
- 根據(jù)業(yè)務對象及其相應的界面對象去思考，而不是從應用軟件本身去思考；
- 面對象在視覺上、感覺上和行為上應與其在現(xiàn)實世界的表現(xiàn)一致。
2、屏幕設計
- 界面間切換、界面布局都很重要；
- 理解小部件，才能正確地加以應用；
- 顏色要謹慎，以指示符補充；
- 遵循對比原則一一在淺色背景上使用深色文字，在深色背景上使用淺色文宇；
- 字體使用要適當和一致；
- 項目不可用時，灰掉而不是移走，用戶才有形成精確的心理模型：
- 使用無害的缺省按鈕；
- 編輯區(qū)域左對齊，相應的標簽則應右對齊，
- 數(shù)、浮點數(shù)右對齊， 字符串左對齊；
- 免屏幕擁擠；
- 方框和間隔對屏幕上有邏輯關聯(lián)的項目加以組合；
- 操作焦點處打開窗口；
- 出菜單不應是唯一的功能來源。
3、建立原型
- 用戶需求決定了原型的開發(fā)；
- 原型評估的任務：發(fā)現(xiàn)原型的成功之處，失敗之處及遺漏之處；
- 在評估過程中只發(fā)現(xiàn)少量需求或不再有新的需求時，即可結束原型建立過程；
- 尋找現(xiàn)實對象，確定用戶在現(xiàn)實世界中的使用方式；
- 與軟件開發(fā)完成之后的實際用戶共同工作，
- 設定原型開發(fā)時間表并執(zhí)行；
- 使用原型開發(fā)工具：
- 用戶參與開發(fā)，對原型進行測試：
- 了解根本業(yè)務；
- 別在很可能丟棄的事情上花大時間，
- 一旦界面對象穩(wěn)定，就應文檔化，
- 為原型開發(fā)界面流程圖：
- 對組成原型的每個界面對象建立文檔。內(nèi)容包括：界面對象的用途、用法；指出與之相關的其它界面：對象，每一部件的用徐、用法。
【編輯推薦】
