用戶界面設計

用戶界面設計

《用戶界面設計》是2010年11月1日電子工業出版社出版的圖書,作者是施奈德曼(BenShneiderman)。

在人和機器的互動過程(Human Machine Interaction)中,有一個層面,即我們所說的界面(interface)。從心理學意義來分,界面可分為感覺(視覺、觸覺、聽覺等)和情感兩個層次。用戶界面設計是屏幕產品的重要組成部分。界面設計是一個複雜的有不同學科參與的工程,認知心理學、設計學、語言學等在此都扮演著重要的角色。用戶界面設計的三大原則是:置界面於用戶的控制之下;減少用戶的記憶負擔;保持界面的一致性。

內容介紹


《用戶界面設計:有效的人機交互策略(第5版)(英文版)》為了適應網際網路和各種移動設備迅猛發展的形勢,在第四版的基礎上始終以基於Web、桌面和移動設備的設計作為內容主線。新的設計實例涉及電子商務、在線社區、電子政府、圖片管理、購物、交通、遊戲和行動電話,選材新穎實用,切合應用實際。同時,新版本擴展了社會媒體參與和用戶生成內容的介紹,代表了人機交互著作的主流發展趨勢。
《用戶界面設計:有效的人機交互策略(第5版)(英文版)》面向的讀者極為廣泛,具有計算機科學、心理學、社會學、工業工程學、信息科學、信息研究、信息系統、商業、教育和通信知識背景的讀者,都可以在《用戶界面設計:有效的人機交互策略(第5版)(英文版)》中發現新鮮的、有價值的信息。

作者介紹


作者:(美國)施奈德曼(Ben Shneiderman) (美國)普萊薩特(Catherine Plaisant)

作品目錄


PART 1 INTRODUCTION 1
CHAPTER 1 Usability of Interactive Systems 3
CHAPTER 2 Guidelines,Principles,and Theories 55
PART 2 DEVELOPMENT PROCESSES 95
CHAPTER 3 Managing Design Processes 97
CHAPTER 4 Evaluating Interface Designs 131
PART 3 INTERACTION STYLES 171
CHAPTER 5 Direct Manipulation and Virtual Environments 173
CHAPTER 6 Menu Selection,Form Fill-in,and Dialog Boxes 225
CHAPTER 7 Command and Natural Languages 271
CHAPTER 8 Interaction Devices 303
CHAPTER 9 Collaboration and Social Media Participation 359
PART 4 DESIGN ISSUES 403
CHAPTER 10 Quality of Service 405
CHAPTER 11 Balancing Function and Fashion 433
CHAPTER 12 User Documentation and Online Help 477
CHAPTER 13 Information Search 513
CHAPTER 14 Information Visualization 537
Afterword Societal and Individual Impact of User Interfaces 563

相關介紹


用戶界面是人與機之間交流、溝通的層面。從深度上分為兩個層次:感覺的和情感的。感覺層次指人和機器之間的視覺、觸覺、聽覺層面;情感層次指人和機器之間由於溝通所達成的融洽關係。總之用戶界面設計是以人為中心,使產品達到簡單使用和愉悅使用的設計。
界面設計從流程上分為結構設計、交互設計和視覺設計三部分。
隨著產品屏幕操作的不斷普及,用戶界面已經融入我們的日常生活。一個良好設計的用戶界面,可以大大提高工作效率,使用戶從中獲得樂趣,減少由於界面問題而造成用戶的諮詢與投訴,減輕客戶服務的壓力,減少售後服務的成本。因此,用戶界面設計對於任何產品/服務都極其重要。
在國外,用戶界面設計人員有了一個新的稱謂:Information Architecture,信息建築師。它不僅僅是指美工,而是具有心理學、軟體工程學、設計學等綜合知識的人。
好的用戶界面應該集“實用、易用、美觀”於一體。如果軟體的功能不實用,不能為用戶解決問題,那麼不管這個軟體是否易用和美觀,用戶都不會使用這個軟體,除非用戶沒有選擇餘地。如果兩個軟體的功能和價格都差不多,那麼易用性就成為用戶選擇的第一標準。哪款軟體更好操作,效率更高,用戶就會選擇哪款軟體。如果兩個軟體的功能、價格、易用性都差不多,那麼用戶一定會選擇更加美觀的那款軟體。

不良反應


不好的用戶界面主要有以下一些表現:
• 界面操作步驟繁瑣 界面布局混亂,缺乏邏輯,盲目堆放界面元素,讓用戶不知如何下手 界面措辭不專業,含糊不清,如消息框出現文不對題的語病 沒有防錯處理,對用戶輸入的信息沒有校驗;執行破壞性的操作之前,不提醒用戶確認等等 不提供進度條、動畫來反映正在進行的進程,對於重要的操作也不返回結果 界面缺乏美觀和個性,甚至出現界面風格不一致的情況

測試用例


指標
檢查項
測試人員評價
合適性
和正確性
用戶界面是否與軟體的功能相融洽?
是否所有界面元素的文字和狀態都正確無誤?
容易理解
對於常用的功能,用戶能否不必閱讀手冊就能使用?
是否所有界面元素(例如圖標)都不會讓人誤解?
是否所有界面元素提供了充分而必要的提示?
界面結構能夠清晰地反映工作流程?
用戶是否容易知道自己在界面中的位置,不會迷失方向?
有聯機幫助嗎?
風格一致
同類的界面元素是否有相同的視感和相同的操作方式?
字體是否一致?
是否符合廣大用戶使用同類軟體的習慣?
及時反饋信息
是否提供進度條、動畫等反映正在進行的比較耗時間的過程?
是否為重要的操作返回必要的結果信息?
出錯處理
是否對重要的輸入數據進行校驗?
執行有風險的操作時,有“確認”、“放棄”等提示嗎?
是否根據用戶的許可權自動屏蔽某些功能?
是否提供Undo功能用以撤銷不期望的操作?
適應各種水平的用戶
所有界面元素都具備充分必要的鍵盤操作和滑鼠操作嗎?
初學者和專家都有合適的方式操作這個界面嗎?
色盲或者色弱的用戶能正常使用該界面嗎?
國際化
是否使用國際通行的圖標和語言?
度量單位、日期格式、人的名字等是否符合國際慣例?
個性化
是否具有與眾不同的、讓用戶記憶深刻的界面設計?
是否在具備必要的“一致性”的前提下突出“個性化”設計?
合理布局
和諧色彩
界面的布局符合軟體的功能邏輯嗎?
界面元素是否在水平或者垂直方向對齊?
界面元素的尺寸是否合理?行、列的間距是否保持一致?
是否恰當地利用窗體和控制項的空白,以及分割線條?
窗口切換、移動、改變大小時,界面正常嗎?
界面的色調是否讓人感到和諧、滿意?
重要的對象是否用醒目的色彩表示?
色彩使用是否符合行業的習慣?

三大原則


置界面於用戶的控制之下、減少用戶的記憶負擔、保持界面的一致性。
1.簡易性
界面的簡潔是要讓用戶便於使用、便於了解、並能減少用戶發生錯誤選擇的可能性。
2.用戶語言
界面中要使用能反應用戶本身的語言,而不是用戶界面設計者的語言,即“用戶至上”原則。
3.記憶負擔最小化
人腦不是電腦,在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶極不穩定、有限,24小時內存在25%的遺忘率。所以對用戶來說,瀏覽信息要比記憶更容易。
4.一致性
是每一個優秀界面都具備的特點。界面的結構必須清晰且一致,風格必須要與內容相一致。
5.清楚
在視覺效果上便於理解和使用。
6.用戶的熟悉程度
用戶可通過已掌握的知識來使用界面,但不應超出一般常識。
7.從用戶的觀點考慮
想用戶所想,做用戶所做。用戶總是按照他們自己的方法理解和使用。
通過比較兩個不同世界(真實與虛擬)的事物,完成更好的設計。如:書籍對比竹簡。
8.排列
一個有序的界面能讓用戶輕鬆的使用。
9.安全性
用戶能自由的作出選擇,且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統的提示。
10.靈活性
簡單來說就是要讓用戶方便的使用,但不同於上述。即互動多重性,不局限於單一的工具(包括滑鼠、鍵盤或手柄)。
11.人性化
高效率和用戶滿意度是人性化的體現。應具備專家級和初級玩家系統,即用戶可依據自己的習慣定製界面,並能保存設置。

工作流程


用戶界面設計在工作流程上分為結構設計、交互設計、視覺設計三個部分。
· 結構設計 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系統資源。
關閉所有窗體,系統退出后要釋放所佔的所有系統資源,除非是需要後台運行的系統。
盡量防止對系統的獨佔使用。
了解了良好的用戶界面的規範,那麼我們測試工作該如何下手?該注意那些方面呢?
⒈ 一致性
如果你可以在一個列表的項目上雙擊后能夠彈出對話框,那麼應該在任何列表中雙擊都能彈出對話框。要有統一的字體寫號、統一的色調、統一的提示用詞、窗口在統一的位置、按鈕也在窗口的相同的位置。
⒉ 設置標準並遵循它
可以參數一些工業標準,如IBM的界面設計規範或MS的設計規則,它提供了90%你所需要的規範。
⒊ 設置嚮導
如果用戶使用了一個功能后,不知道如何做下一個,他們就會放棄。如果*作流程和手工工作流程一致,用戶就會努力去完成它。最好的方式來引導用戶就是在桌面上設置一個流程嚮導。
⒋ 提示信息必須恰當且規範
提示信息必須容易理解並且口徑統一,比如“您輸入了錯誤的數據”、“用戶數據不能超過8位”。一致的措詞,提示信息還應該出現在一致的位置,如彈出提示窗口、窗口的上方或窗口的下方。對用戶的稱呼應該統一,比如有時提示“用戶輸入了錯誤的數據”,有時提示“您輸入了錯誤的數據”,有時又提示“使用者輸入了錯誤的數據”,這樣會使用戶無所適從。
⒌ 借鑒好的程序
多了解同類軟體的界面,並加以分析與了解,直到能夠區別好的用戶界面與差的用戶界面。但不能夠簡單的模仿別人的界面,而使得自己的軟體沒有特色
⒍ 功能的統一
有一些很常用的功能,如添加、修改、刪除、查看,同一個軟體中,這些功能應該有相同的處理方法。
⒎ 變灰的功能
有時有些功能不可用,最好不要刪除這些按鈕若項目,而是使他們變灰為不可用狀態,這樣有助於用戶理解整個程序的功能。
⒏ 默認按鈕
使用不具有破壞功能的默認按鈕,在每個窗口中,為了方便用戶,一般都定義了一個默認按鈕,當用戶敲回車鍵時可以快速執行某功能,但有時用戶會不小心按錯回車鍵,這時候執行了默認功能后,不能產生不可還原的操作,比如刪除或保存。
按照上面的規範和測試的細則檢驗過被測試的軟體。相信軟體界面上能顯得更加規範和容易被用戶所接受。

規範


一致性原則
堅持以用戶體驗為中心設計原則,界面直觀、簡潔,操作方便快捷,用戶接觸軟體后對界面上對應的功能一目了然、不需要太多培訓就可以方便使用本應用系統。
• 字體 -保持字體及顏色一致,避免一套主題出現多個字體; -不可修改的欄位,統一用灰色文字顯示。
• 對齊 -保持頁面內元素對齊方式的一致,如無特殊情況應避免同一頁面出現多種數據對齊方式。
• 表單錄入 -在包含必須與選填的頁面中,必須在必填項旁邊給出醒目標識(*); -各類型數據輸入需限制文本類型,並做格式校驗如電話號碼輸入只允許輸入數字、郵箱地址需要包含“@”等,在用戶輸入有誤時給出明確提示。
• 滑鼠手勢 -可點擊的按鈕、鏈接需要切換滑鼠手勢至手型;
• 保持功能及內容描述一致 -避免同一功能描述使用多個辭彙,如編輯和修改,新增和增加,刪除和清除混用等。建議在項目開發階段建立一個產品詞典,包括產品中常用術語及描述,設計或開發人員嚴格按照產品詞典中的術語辭彙來展示文字信息。
準確性原則
使用一致的標記、標準縮寫和顏色,顯示信息的含義應該非常明確,用戶不必再參考其它信息源。
• 顯示有意義的出錯信息,而不是單純的程序錯誤代碼。
• 避免使用文本輸入框來放置不可編輯的文字內容,不要文本將輸入框當成標籤使用。
• 使用縮進和文本來輔助理解。
• 使用用戶語言辭彙,而不是單純的專業計算機術語。
• 高效地使用顯示器的顯示空間,但要避免空間過於擁擠。
• 保持語言的一致性,如“確定”對應“取消”,“是”對應“否”。
布局合理化原則
在進行UI設計時需要充分考慮布局的合理化問題,遵循用戶從上而下,自左向右瀏覽、操作習慣,避免常用業務功能按鍵排列過於分散,以造成用戶滑鼠移動距離過長的弊端。多做“減法”運算,將不常用的功能區塊隱藏,以保持界面的簡潔,使用戶專註於主要業務操作流程,有利於提高軟體的易用性及可用性。
• 菜單 -保持菜單簡潔性及分類的準確性,避免菜單深度超過3層。 -菜單中功能是需要打開一個新頁面來完成的,需要在菜單名字後面加上“…”。【只適用於C/S架構,B/S請無視】。
• 按鈕 確認操作按鈕放置左邊,取消或關閉按鈕放置於右邊。
• 功能 -未完成功能必須隱藏處理,不要置於頁面內容中,以免引起誤會。
• 排版 -所有文字內容排版避免貼邊顯示(頁面邊緣),盡量保持10-20像素的間距並在垂直方向上居中對齊;各控制項元素間也保持至少10像素以上的間距,並確保控制項元素不緊貼於頁面邊沿。
• 表格數據列表 -字元型數據保持左對齊,數值型右對齊(方便閱讀對比),並根據欄位要求,統一顯示小數位位數。
• 滾動條 -頁面布局設計時應避免出現橫向滾動條。
• 頁面導航(麵包屑導航) -在頁面顯眼位置應該出現麵包屑導航欄,讓用戶知道當前所在頁面的位置,並明確導航結構,如:首頁>新聞中心>歐科智能招商服務平台正式發布,其中帶下劃線部分為可點擊鏈接。
• 信息提示窗口 -信息提示窗口應位於當前頁面的居中位置,並適當弱化背景層以減少信息干擾,讓用戶把注意力集中在當前的信息提示窗口。一般做法是在信息提示窗口的背面加一個半透明顏色填充的遮罩層。
系統響應時間原則
系統響應時間應該適中,響應時間過長,用戶就會感到不安和沮喪,而響應時間過快也會影響到用戶的操作節奏,並可能導致錯誤。因此在系統響應時間上堅持如下原則:
• 2-5秒窗口顯示處理信息提示,避免用戶誤認為沒響應而重複操作;
• 5秒以上顯示處理窗口,或顯示進度條;
一個長時間的處理完成時應給予完成警告信息。
系統操作合理性原則
• 盡量確保用戶在不使用滑鼠(只使用鍵盤)的情況下也可以流暢地完成一些常用的業務操作,各控制項間可以通過Tab鍵進行切換,並將可編輯的文本全選處理。
• 查詢檢索類頁面,在查詢條件輸入框內按回車應該自動觸發查詢操作。
• 在進行一些不可逆或者刪除操作時應該有信息提示用戶,並讓用戶確認是否繼續操作,必要時應該把操作造成的後果也告訴用戶。
• 信息提示窗口的“確認”及“取消”按鈕需要分別映射鍵盤按鍵“Enter”和“ESC”。
• 避免使用滑鼠雙擊動作,不僅會增加用戶操作難度,還可能會引過用戶誤會,認為功能點擊無效。
• 表單錄入頁面,需要把輸入焦點定位到第一個輸入項。用戶通過Tab鍵可以在輸入框或操作按鈕間切換,並注意Tab的操作應該遵循從左向右、從上而下的順序。