1、軟件需求分析實戰第 6 章：界面設計授課老師：楊長春軟件需求分析實戰如果讀者需要獲得書中提到的一些文檔模板、案例等電子資料，請關注作者公眾號“IT改變管理”并發送消息“需求資料”。清華大學出版社目錄CONTENTS第6章：界面設計思考題本章重點6.1 界面設計基礎6.2 界面設計過程6.3 界面優化第6章：界面設計以人為本原型設計開發模型定義6.1界面設計基礎什么是軟件界面軟件界面界面是用戶跟軟件系統交互信息的媒介。通過界面，系統知道用戶需要它干什么，用戶知道系統干了什么。界面離不開輸入、輸出設備。常用輸入設備常用輸出設備鍵盤鼠標攝像頭麥克風掃描儀掃描槍顯示器打印機音箱LED屏【案例：沒有界面

2、的輸入】以人為本原型設計開發模型定義6.1界面設計基礎2.不要讓用戶感到厭煩讓用戶感到厭煩的軟件，不是難學的軟件，不是操作復雜的軟件，甚至不是給用戶帶來巨大工作量的軟件，而是那種讓人哭笑不得的軟件。4.不要讓用戶難以捉摸管理軟件是用來工作的，要讓一個普通的、有某種常識的用戶對自己的操作結果有個基本準確的預判，要合乎常理、遵從習慣，不要太出乎用戶意料。1.不要讓用戶難以學習“以人為本”的軟件容易學習，會盡量減少用戶的學習成本。3.不要讓用戶感到恐懼“以人為本”的軟件讓用戶有安全感，用戶在操作的過程中不會戰戰兢兢、如履薄冰，生怕犯了什么錯誤后無法收拾。界面設計要強調以用戶（人）為中心，而不是以機器

3、為中心。以人為本的軟件應該做到【用戶如何學會軟件】【讓人哭笑不得的小事例】【如何讓用戶不感到恐懼】【讓人難以捉摸的小事例】以人為本原型設計開發模型定義6.1界面設計基礎所謂軟件的原型設計，就是設計軟件運行的模擬界面，設計系統如何接受用戶錄入的信息以及發布的指令，指令執行過程中如何與用戶溝通，處理結果如何在界面上反饋。原型設計的常用方法12345在白紙上用筆畫界面草圖，或者在電腦上通過畫圖板之類的軟件畫出界面示意圖手畫法使用Office設計，如Word、Excel、PPT、Visio都可以作為設計工具Office工具設計法采用專業的原型工具設計原型，如Axure RP原型工具設計法采用軟件開發工

4、具設計軟件原型，如VB、Delphi開發工具設計法直接開發界面，不經過原型設計這一步直接開發法原型設計以人為本原型設計開發模型定義6.1界面設計基礎7. 根據原型開發軟件1. 需求調研2. 原型設計3. 原型評審4. 根據用戶反饋修改原型5. 重新評審6. 用戶確認一般步驟1.與用戶溝通要有個度，過猶不及。2.用戶的意見很重要，但并不總是正確的。3.從用戶的意見中發現設計稿存在的問題，而不是解決方法。4.不同的項目，可以采用不同的評審方式。注意事項6.1 界面設計基礎6.2 界面設計過程6.3 界面優化第6章：界面設計6.2界面設計過程界面設計入口設計強調如何讓用戶方便地獲得自己需要的功能功能

5、主界面設計強調如何劃分組件區域表單布局設計強調如何排放組件操作設計強調如何讓用戶獲得功能點包括的所有原子功能消息設計強調系統如何向用戶反饋程序執行情況功能主界面表單布局操作入口6.2界面設計過程消息用戶登錄進入系統后，如何才能打開自己需要的功能界面，這是入口設計需要考慮的問題。一些常用的入口方式1. 功能菜單最常見的入口方式是功能菜單，菜單區可以在上邊，通過下拉的方式展開，也可以在左邊，通過樹狀節點加載。2. 工作臺可以給用戶建立一系列工作臺，在工作臺上羅列用戶最需要的信息、最常用的功能、當前需要處理的任務等。3. 九宮格習慣于將三行三列九個格子拼在一起的界面叫做九宮格界面。4. 彈出菜單用戶

6、點擊某區域，或執行某操作后，系統彈出菜單，用戶點擊菜單，進入功能界面。5. 快捷方式對于某些非常常用的功能，可以通過快捷方式建立快速入口。功能主界面表單布局操作入口6.2界面設計過程消息所謂功能主界面，指用戶通過菜單或其它入口方式打開某功能點后，系統加載的用于使用該功能點的主界面，用戶可以從中獲得各種子功能的入口。一些常用的界面結構12345678上邊查詢條件，下邊查詢結果左邊大項，右邊查詢結果左邊樹狀結構，右邊查詢結果上邊主表，下邊子表左邊主表，右邊子表樹形列表分級列表日歷功能主界面表單布局操作入口6.2界面設計過程消息一些常用表單布局方式1. 平鋪將本界面需要的所有組件按次放置在界面上，用

7、戶打開界面時就能看到所有的組件。2. 分組用戶打開界面時同樣能夠看到所有組件，但這些組件被分成了若干個組。3. 動態加載用戶打開界面時并不顯示所有組件，只有在滿足某種條件或者用戶執行了某種操作時，才會顯示相關的組件。4. 表格類似于Excel，一般用于快速錄入信息，但如果每條記錄需要錄入的信息較多，或者字段跟字段之間的控制關系較強時，這種方式就不太適合。5. Tab頁當在某個有限的空間內無法放置需要的組件，就將組件分組，放置到不同的Tab頁中。6. 混合在一次需要錄入或編輯大量信息時，在一個表單中同時使用上述多種布局形式也很常見。功能主界面表單布局操作入口6.2界面設計過程消息表單布局設計的幾

8、個注意點2.突出重點重要的信息，優先考慮放置在左上方與首屏1.合理安排界面空間使用Tab頁、動態加載等方式合理安排界面空間3.信息展現要有層次感數據元素過多，需要考慮分層處理4.注意組件順序組件排放的順序要符合業務處理的步驟功能主界面表單布局操作入口6.2界面設計過程消息查詢類界面由于不需要往數據庫中寫入數據，也就少了許多數據組織與驗證的過程，人機交互的過程非常簡單。表單類界面由于用戶在操作的過程中系統可能會提供大量的數據驗證、輔助錄入、確認提醒的支持工作，因此，很多時候就會有非常復雜的人機交互要求。兩種界面兩種操作面向數據庫的寫操作改變數據庫中的數據，包括Insert、Update、Dele

9、te。不改變數據庫的操作可能僅僅是從數據庫讀取數據（Select），或者甚至跟數據庫中的數據毫無關系。【案例：表單的保存與輔助錄入】功能主界面表單布局操作入口6.2界面設計過程消息設置消息區，將消息顯示在消息區，用戶如果需要，可以到消息區查看消息，用戶如果不想查看這種消息，對接下來的工作也不會有什么不良影響消息區消息顏色的變化、字體的變化、圖像的變化，或者發出某種聲音，或者發出某種振動（手機）其他方式在程序運行過程中，或程序運行結束后，彈出一個窗口，告訴用戶程序運行的狀態，或者請求用戶干預消息彈出框寫入日志的信息一般用于管理員對系統進行監控、分析、跟蹤、調試等日志01020304Hello W

10、orld!當用戶在界面上操作時，一個友好的系統會將執行情況根據需要反饋給用戶，這就是所謂的“消息”系統給用戶帶來的關于計算機內部的消息。常見的方式6.1 界面設計基礎6.2 界面設計過程6.3 界面優化第6章：界面設計易用性健壯性交互性易學性6.3界面優化1提煉核心功能將功能中最常用的部分提煉出來2追隨主流軟件模仿主流軟件可以大大降低學習難度3貼近業務流程讓用戶看到界面就能夠聯想到業務處理過程45統一操作習慣保證軟件的界面風格、操作方式等的統一性減少用戶干預程序運行過程中減少用戶干預、減少交互6倡導邊干邊學界面設計可以支持用戶邊干邊學【案例：提煉核心功能】【案例：常用的快捷方式】【案例：貼近業

11、務流程】【案例：統一操作習慣】【案例：減少用戶干預】【案例：倡導邊干邊學】易用性健壯性交互性易學性6.3界面優化1. 讓功能方便調用常用的技巧包括快捷方式與提供多入口。快捷方式：讓用戶使用鍵盤快捷鍵或者輸入命令打開功能。多入口：同樣的功能，可以采用不同的方式進入。2. 讓工作容易處理為了讓工作容易處理，需要考慮根據用戶的工作方式安排界面，界面中的元素符合用戶處理業務的操作順序；將完成一件事情需要的功能安排在一起以減少用戶在界面之間來回切換的次數，等等。3. 減少用戶錄入盡量減少用戶的錄入，能讓系統自動生成的數據不要讓用戶錄入。4. 減少按鍵此數減少用戶敲擊鍵盤的次數，減少用戶使用鼠標點擊的次數

12、。5. 減少在鍵盤與鼠標之間的切換在鍵盤與鼠標之間的切換會影響操作的流暢性。【案例：多入口】【案例：讓工作容易處理】【案例：減少用戶錄入】【案例：減少按鍵次數】【案例：減少在鍵盤與鼠標之間的切換】易用性健壯性交互性易學性6.3界面優化1. 不讓用戶犯錯誤通過軟件的控制、約束避免用戶犯錯2. 讓用戶少犯錯誤通過一定的手段將用戶犯錯誤的可能性降低3. 讓用戶容易發現錯誤用戶犯錯后，要讓用戶盡早發現，越早發現越容易處理4. 允許用戶糾正錯誤提供修改錯誤的功能，允許用戶“反悔”錯誤操作5. 降低用戶錯誤的影響面將用戶錯誤的影響面降低到最小，不能出現多米諾骨牌效應逐層考慮提高健壯性易用性健壯性交互性易學性6.3界面優化交互性，指系統在執行過程中能否與用戶進行友好溝通，讓用戶獲得他應該知道的系統信息，讓系統獲得用戶應該提供的信息。要讓系統具有良好的交互性，可以從以下這些方面考慮123456重要操作需要確認不要讓用戶有石沉大海的感覺消息是給用戶看的，不是給程序員看的消息需要精準交互要適可而止不要濫用彈出框本章重點本章重點本章重點： 理解人機交互要強調“以人為本”（ ） 常用的原型設計方式（ ） 界面設計包括哪些過程（ ） 常用的功能主界面（ ） 常用的表單布局方式（ ） 易學性優化（ ） 易用性優化（ ） 健壯性優化（ ） 交互性優化（