第五章界面設計山東大學計算機學院Lecture42內容提要界面設計原則理解用戶設計流程任務分析以用戶為中心的界面設計Lecture435.1界面設計原則根據表現形式，用戶界面分為命令行界面圖形界面多通道用戶界面5.1.1圖形用戶界面的主要思想圖形用戶界面的三個重要思想桌面隱喻(DesktopMetaphor)所見即所得（WhatYouSeeIsWhatYouGet，WYSIWYG）直接操縱(Directmanipulation)Lecture44Lecture451桌面隱喻(DesktopMetaphor)在用戶界面中用人們熟悉的桌面上的圖例清楚地表示計算機可以處理的能力圖形具有一定的文化和語言獨立性，可以提高搜索目標的效率圖形用戶界面中的圖例可以代表對象、動作、屬性或其他概念表達方式：圖例和文字文字適用于表達某些抽象概念圖例更易于識別，占用較少屏幕空間，可獨立于語言1桌面隱喻隱喻的表現方法靜態圖標動畫視頻隱喻的分類直接隱喻：隱喻本身就帶有操縱的對象如Word中的表格、圖表等圖標，圖標分別代表了操縱對象。工具隱喻：代表所使用的工具如用磁盤圖標隱喻存盤操作、用打印機圖標隱喻打印操作等，這種隱喻設計簡單、形象直觀，應用也最為普遍。過程隱喻：通過描述操作的過程來暗示該操作如Word中的撤銷和恢復圖標。Lecture47Lecture482.所見即所得（WYSIWYG）在WYSIWYG交互界面中顯示的用戶交互行為與應用程序最終產生的結果是一致的。非WYSIWYG的編輯器，用戶只能看到文本的控制代碼，對于最后的輸出結果缺乏直觀的認識。（latex編輯器）2.所見即所得（WYSIWYG）WYSIWYG的弊端如果屏幕的空間或顏色的配置方案與硬件設備所提供的配置不一樣，在兩者之間就很難產生正確的匹配文本處理器都提供了定義章、節、小節等的標記，這些標記顯式地標明了對象的屬性，但并不是用戶最終輸出結果的一部分Lecture4103.直接操縱(Directmanipulation)

直接操縱是指可以把操作的對象、屬性、關系顯式地表示出來，用光筆、鼠標、觸摸屏或數據手套等指點設備直接從屏幕上獲取形象化命令與數據的過程直接操縱的對象是命令、數據或是對數據的某種操作Lecture4113.直接操縱直接操縱的特點直接操縱的對象是動作或數據的形象隱喻形象隱喻應該與其實際內容相近，使用戶能通過屏幕上的隱喻直接想象或感知其內容用指點和選擇代替鍵盤輸入優點：操作簡便，速度快捷操作結果立即可見操作結果立即可見，用戶可以及時修正操作，逐步往正確的方向前進。支持逆向操作用戶在使用系統的過程中，不可避免地會出現一些操作錯誤，通過逆向操作，用戶可以很方便地恢復到出現錯誤之前的狀態Lecture412直接操縱的優缺點優點：借助物理的、空間的或形象的表示，而不是單純的文字或數字的表示。依賴于視覺和手動控制的參與，可以直接操作，有利于解決問題和進行學習缺點：不具備命令語言界面的某些優點。例如從用戶界面設計者角度看，設計圖形比較繁瑣，需進行大量的測試和實驗。表示復雜語義、抽象語義比較困難Lecture4135.1.2圖形用戶界面

一般性原則界面要具有一致性在同一用戶界面中，所有的菜單選擇、命令輸入、數據顯示和其他功能應保持風格的一致性常用操作要有快捷方式不僅會提高用戶的工作效率，還使界面在功能實現上簡潔而高效提供簡單的錯誤處理在出現錯誤時，系統應該能檢測出錯誤，并且提供簡單和容易理解的錯誤處理功能對操作人員的重要操作要有信息反饋

尤其是對不常用操作、至關重要操作要有信息反饋Lecture414操作可逆對大多數動作應允許恢復(UNDO)，對用戶出錯采取比較寬容的態度設計良好的聯機幫助人機界面應該提供上下文敏感的求助系統，讓用戶及時獲得幫助，盡量用簡短的動詞和動詞短語提示命令合理劃分并高效地使用顯示屏只顯示與上下文有關的信息，允許用戶對可視環境進行維護，如放大、縮小窗口；用窗口分隔不同種類的信息，只顯示有意義的出錯信息保證信息顯示方式與數據輸入方式的協調一致減少用戶輸入動作，允許用戶自選輸入方式，能刪除錯誤的輸入允許用戶控制交互過程，隱藏當前狀態下不可用的命令5.1.2圖形用戶界面

一般性原則5.2理解用戶用戶是使用某種產品的人，其包含兩層含義1）用戶是人類的一部分2）用戶是產品的使用者。以用戶為中心的設計在軟件開發過程中要緊緊圍繞用戶，在系統設計和測試過程中，要有用戶的參與，以便及時獲得用戶的反饋信息，根據用戶的需求和反饋信息，不斷改進設計，直到滿足了用戶的需求，這個過程才終止關鍵點是強調產品的最終使用者與產品之間的交互質量，它包括三方面特性：產品在特定使用環境下為特定用戶用于特定用途時所具有的有效性（Effectiveness）、效率（Efficiency）和用戶主觀滿意度（Satisfaction）。5.2.2用戶體驗用戶體驗（UserExperience，UX）通常是指用戶在使用產品或系統時的全面體驗和滿意度。用戶體驗主要有下列四個元素組成（如圖5-5）：品牌（Branding）使用性（Usability）功能性（Functionality）內容（Content）用戶體驗是一個迭代過程，影響用戶體驗的因素很多現有技術上的限制，使得設計人員必須優先在相對固定的UI框架內進行設計；設計的創新，在用戶的接受程度上也存在一定的風險；開發進度表，也會給這樣一種具有藝術性的工作帶來壓力；設計人員很容易認為他們了解用戶需要，但實際情況常常不是這樣。用戶體驗貫穿人類文明始終250萬年前，有一個玉樹臨風的哥們兒，他專門負責部落的飲食供給。你們知道那個時候人們都只吃一些燒烤，野味。這個哥們工作很認真負責，他無時無刻不在思考自己的工作：如何把工作做到最好，去得到領導的賞識和美女的芳心呢？

有一天，他在河邊盤旋，他還在低頭思考。這時，他發現了一塊石頭，他想，如果能用石頭把肉切得小片一點，那么，應該能更入味。

后來，他把那些恐龍肉分別烤成5分熟或者8分熟之后，獻給自己的領導和美女。得到了大家一致的認可。這就是那塊石頭。這個工具有兩個特點：1.鋒利的尖角；2.圓滑的底座。

圓滑的底座方便我們用手拿，而另一端，能讓我們更容易切肉（也就是去征服大自然）。

真是光陰似箭，歲月如梭啊。時間一晃就是250萬年。這是蘋果在09年的產品：MagicMouse（魔鼠），蘋果首創的Multi-touch鼠標。這款鼠標的設計和我們常見到的有一點區別：/v_show/id_XMTI2NzMyNjEy.html沒有滾輪，沒有我們支持左右鍵的左右兩塊。

它同樣支持左右鍵；它支持單指滾動功能，你用雙指還可以進行左右的翻頁......石頭和鼠標有驚人的相似之處，它們長得都差不多，都要好用，而且有用。在人類用石頭征服了首領和美女的250萬年之后，在這個0和1的電腦時代，用戶卻希望自己使用工具時的手感仍然回到最原始。毋庸置疑，用戶體驗與生俱來，不是刻意產生。

這本書作者也不停的告訴大家，產品的功能越強大，讓用戶使用的時候要最簡單這本書作者也不停的告訴大家，產品的功能越強大，讓用戶使用的時候要最簡單增強用戶體驗的實例Multi-TouchTechnology，一款多點觸摸的產品，你可以在大屏幕上進行操作。BumpTop桌面/v_show/id_XMTMzMDE2MjA0.html它將普通的電腦桌面設計成了眩目的3D桌面，使文件瀏覽的經驗變得隨心所欲，可以隨手放置文檔，周圍是貼滿便條的“墻面”。支持蘋果和Windows系統。vizoo公司的Cheoptics360一款展會產品，用戶可以360度觀察你要展示的物品或人物。/v_show/id_XMTMzMDE2NTEy.html微軟的多媒體觸摸屏通過移動桌面的小物件產生不同音效的桌子：reactable。/programs/view/PGuUpJ7SWJM/將一張張平面照片，組合成3D場景的軟件：Photosynth。5.2.3用戶的區別

1.用戶的分類1）偶然型用戶：既沒有計算機應用領域的專業知識，也缺少計算機系統基本知識的用戶。2）生疏型用戶：他們更常使用計算機系統，因而對計算機的性能及操作使用，已經有一定程度的理解和經驗。但他們往往對新使用的計算機系統缺乏了解，不太熟悉，因此對新系統而言，他們仍舊是生疏用戶。3）熟練型用戶：這類用戶一般是專業技術人員，他們對需要計算機完成的工作任務有清楚地了解，對計算機系統也有相當多的知識和經驗，并且能熟練地操作、使用。4）專家型用戶：對需要計算機完成的工作任務和計算機系統都很精通的，通常是計算機專業用戶，稱為專家型用戶。5.2.3用戶的區別

2.計算機領域經驗和問題領域經驗的區別用戶界面還必須至少從兩個維度迎合潛在的廣泛經驗，這兩個維度指的是計算機經驗和領域經驗。計算機經驗不僅包括對計算機的一般性了解，還包括對尚待開發的系統的經驗。計算機領域和問題領域經驗都不足的用戶所需的用戶界面與專家用戶的界面將區別很大。5.2.4用戶交互分析

產品策略分析確定產品的設計方向和預期目標，特別是要了解用戶對設計產品的期望是什么；同類型產品的競爭特點，用戶使用同類型產品時的交互體驗，包括正面的體驗和負面的體驗，從而得出產品交互設計的策略。用戶分析深入而明確的了解產品的目標用戶(如特定年齡區間、特殊的文化背景、職業特征、計算機使用經驗、同類產品使用經驗、愛好等等)，并找到典型用戶。用戶交互特性分析通過對目標用戶群的交互挖掘，得出準確、具體的用戶特征，從而可以進行有的放矢地設計。5.3設計流程

5.3.1用戶的觀察和分析情境訪談（ContextualInterviews）走進用戶的現實環境，盡量了解你的用戶的工作方式、生活環境等情況。焦點小組（FocusGroups）組織一組用戶進行討論，讓你更了解用戶的理解、想法、態度和需求。單獨訪談（IndividualInterviews）一對一的用戶討論，讓你了解某個用戶是如何工作，使你知道用戶的感受、想要什么及其經歷等。5.3.2設計對象模型化:將用戶分析的結果按照討論的對象進行分類整理，并且以各種圖示的方法描述其屬性、行為和關系。比較抽象的視圖有利于進行邏輯分析，稱為低保真原型（Low-fidelityPrototype）；比較具體的視圖更接近于人機界面的最終表達，稱為高保真原型圖（High-fidelityPrototype）5.3.3實施設計師對高真設計原型進行最后的調整，并且撰寫產品的設計風格標準（StyleGuide），產品各個部分風格的一致性由該標準保證。產品實施或投入市場后，面向用戶的設計并沒有結束，而是要進一步的搜集用戶的評價和建議，以利于下一代產品的開發和研制。5.4任務分析

在以用戶為中心的設計中，關心的是如何從用戶那里理解和獲取用戶的思維模式，進行充分、直觀的表達，并用于交互設計。描述用戶行為的工具有很多，目前經常提到的是通用標識語言UML（UnifiedMarkupLanguage）。UML2.0共有10種圖示，分別為組合結構圖、用例圖、類圖、序列圖、對象圖、協作圖、狀態圖、活動圖、組件圖和部署圖在任務分析中使用UML工具，可以清晰地表達一個交互任務諸多方面的內容，包括交互中的使用行為、交互順序、協作關系、工序約束等等名

稱視

圖主

要

符

號組合結構圖(composite-structurediagram)表現結構(架構)性需求，主要包括Part、Port、接口和鏈接(Link)Part、Port、接口、鏈接關系用例圖(usecasediagram)表現功能需求，主要包括用例和參與者用例、參與者、關聯關系類圖(classdiagram)表現靜態結構，主要包括一群類及其間的靜態關系類、關聯關系、泛化關系序列圖(sequencediagram)表現一群對象依序傳送消息的交互狀況對象、消息、活動期對象圖(objectdiagram)表現某時刻下的數據結構，主要包括一群對象及其間擁有的數據數值對象、鏈接、消息協作圖(collaborationdiagram)表現一群有鏈接的對象傳送消息的交互狀況對象、鏈接狀態圖(statechartdiagram)表現某種對象的行為，主要呈現一堆狀態因事件而轉換的狀況狀態、事件、轉換、動作活動圖(activitydiagram)表現一段自動轉換的活動流程，主要包括一堆活動及其間的自動轉換線活動、轉換、分叉、接合組件圖(componentdiagram)表現一群組件及其間的依賴關系組件、接口、依賴關系、實現關系部署圖(deploymentdiagram)表現一堆設備及其間的依賴關系節點、組件、依賴關系例子圖書館管理系統為例說明任務分析的過程，這個用例從讀者提出想要借書開始，經過如下五個交互步驟：根據系統提供查詢功能，讀者可以在系統界面中輸入關鍵字查詢圖書；系統通過交互界面列出可借用的圖書供讀者選擇；如果讀者選定了圖書，系統提示讀者輸入借書證號和密碼；如果最后讀者確定借閱關系，系統處理并通知讀者借書成功，并給讀者一個確認；當確認信息出現時，整個圖書借閱的交互過程就結束了。下面，我們詳細介紹如何用UML來對這些交互任務進行分析。5.4.1使用行為分析

使用行為分析就是要理解系統中每個參與者及其所需完成的任務，即分析系統所涉及的問題領域和系統運行的主要任務，分析使用該系統主要功能部分的是哪些人，誰將需要該系統的支持以完成其工作。使用行為分析一般使用用例圖描述，它從參與者的角度出發來描述一個系統的功能，主要目的是幫助開發團隊以一種可視化的方式理解系統的功能需求。以圖書館管理系統為例，其參與者主要包括：讀者（借閱者）；圖書管理員；圖書館管理系統的系統管理員。讀者使用圖書館管理系統的用例

圖書管理員處理借書、還書的用例系統管理員進行系統維護的用例5.4.2順序分析

每個使用行為都是由若干步驟組成的，這些步驟可以使用順序圖進行描述。順序圖描述了完成一個任務的典型步驟；它可以按照交互任務發生的時間順序，把用例表達的需求轉化為進一步、更加正式層次的精細表達；用例常常被細化為一個或更多的順序圖。讀者借書時序圖5.4.3協作關系分析

協作圖著重顯示了某個用戶行為中各個系統元素之間的關系，而不再重點強調各個步驟的時間順序。讀者借書過程中，幾個交互對象之間的協作關系:5.4.4工序約束陳述用戶完成任務的步驟又被稱為工序，某些工序之間的順序是由一些邏輯關系的。工序約束陳述是工序分析的最直接的方法。本案例中可能存在如下工序約束：系統管理員必須先增加借閱者信息，讀者才能登陸。系統管理員必須先增加書籍信息，讀者才能查閱。讀者借閱信息生成后，圖書管理員圖書管理員才能去書庫取書。讀者必須先在系統中辦理借閱，才能取書。讀者必須先借書才能還書。5.4.5用戶任務一覽表

當所有任務分析完畢，就可以用一覽表的形式描述系統中的所有用戶及其可能需要完成的所有任務:可以一目了然的展示所有用戶的交互任務信息，并且便于更改和調整。任務讀者圖書館管理員系統管理員書籍信息查詢、讀者信息查詢√√借書√√還書√√書籍預定√√增加、刪除或更新書目√增加、刪除書籍√增加、刪除或更新讀者帳戶信息√5.4.6任務金字塔

任務金字塔描述了不同層次的任務之間的關系。任何一個任務都可能包括若干子任務，從而構成金字塔狀的結構。讀者查詢圖書5.4.7故事講述和情節分析

通過描述實際的任務場景可以非常直觀的進行任務描述，便于與用戶的交流，并可以幫助分析設計者和真正用戶之間對任務的不同理解。故事講述（storytelling）可以是真實的案例，也可以是虛構的情節，甚至可以是對理想場景的虛構，關鍵是使這些故事能夠典型的反映交互任務，具有充分的代表性。情節分析（scenarioanalysis）是對故事所反映的交互任務的理性分析，分離出故事中所描述的角色、目標、環境、步驟、策略、感情等諸方面的因素。例子學生借書的過程描述圖書館里系統的交互故事角色：劉凡，圖書館讀者；圖書管理員。目標：完成書籍的借閱或預定。環境：圖書館借閱大廳，有查詢電腦可供查詢使用；借書處，取到借閱的書籍。步驟：查詢書籍，瀏覽圖書信息，確定要借閱的書籍；然后在系統中辦理借閱，并等待從借書處取書。策略：如果圖書在館，則借閱；否則，可以預定圖書。情感：交互系統的交互過程簡潔、順暢，信息提示充分、清晰，用戶對完成任務的過程感到滿意。5.5以用戶為中心的界面設計以用戶為中心設計的四個重要原則。及早以用戶為中心：設計人員應當在設計過程的早期就致力于了解用戶的需要。綜合設計：設計的所有方面應當齊頭并進發展，而不是順次發展，使產品的內部設計與用戶界面的需要始終保持一致。及早并持續性地進行測試：當前對軟件測試的唯一可行的方法是根據經驗總結出的方法，即若實際用戶認為設計是可行的，它就是可行的。通過在開發的全過程引入可用性測試，可以使用戶有機會在產品推出之前就設計提供反饋意見。反復式設計：大問題往往會掩蓋小問題的存在。設計人員和開發人員應當在整個測試過程中反復對設計進行修改。用戶為中心的設計方法圖形用戶界面設計與評估（GraphicalUserInterfaceDesignandEvaluation，GUIDE）以用戶為中心的邏輯交互設計（LogicalUser-CentredInteractionDesign，LUCID）用于交互優化的結構化用戶界面設計（StructuredUser-InterfaceDesignforInteractionOptimisation，STUDIO）以使用為中心的設計（Usage-CenteredDesign）OVID設計OVID方法通過對用戶、目標和任務的分析，系統地指導人機交互界面設計，以達到用戶滿意的設計要求設計者模型就是用對象、對象間的關系等概念來表達目標用戶意圖的概念模型；編程者模型廣泛應用于面向對象的開發方法中，用于表示和實現構成系統的類；用戶概念模型表示用戶對系統的理解，它依賴于用戶的交互經驗OVID方法的關鍵確定交互中涉及的對象，并把這些對象組織到交互視圖中。其中，對象來自用戶的概念模型視圖是支持特定用戶任務的對象的有機組合交互就是那些在交互界面中對對象執行的操作。OVID中的活動循環對象從用戶概念模型的任務分析中獲得，并被轉化到設計者的對象模型中。交互就是那些界面中執行對象操作的必須動作。如果該模型能夠有效地設計和實現，用戶就可以通過與系統的交互理解設計者模型所要表達的信息；這些模型可以使用面向對象概念去表達，如統一對象建模語言（UML）等。下面以一個網上機票訂購系統的界面開發為例，簡單說明OVID方法的過程5.5.1對象建模分析建模是將系統任務的某些概念及其關系用圖的方式直觀綜合地表達出來；分析則是將系統的對象抽象為類，列出對象或類的屬性、行為、以及對象間的關系。對象：乘客會員、航空代理、航班、機票、會員賬戶、航班列表等；操作（交互過程）：用戶注冊、登陸、查詢航班信息、填寫預定信息、支付、出票等對象&操作5.5.2視圖抽象設計視圖抽象設計階段就是仔細研究系統的對象模型，列出其系統狀態，對每個視圖抽象出其中涉及的對象，以及對象的屬性和行為。用戶查詢航班視圖航班信息列表視圖用戶選中的某個具體航班的信息視圖訂購信息填寫視圖支付視圖交易成功反饋和出票視圖等用戶查詢航班視圖對象：航班對象屬性：出發城市、到達城市、航空公司、起飛日期時間、機票類別以及出票城市等，操作：主要是查詢，即要從后臺數據庫中查出符合條件的航班信息，以及重置查詢條件等操作。進一步交互動作例如對于視窗系統界面，在用戶執行航班查詢后，要在屏幕上顯示航班信息和可能的進一步的交互動作航班信息如何展現？以什么順序顯示？已經訂滿的航班還需不需要顯示？如果要顯示的話，是不是用不同的顏色？如果信息超出一屏是用滾動條還使用分頁的方式？這些都要通過與用戶一起分析來確定，最大限度的滿足用戶可用性。進一步交互動作例如對于視窗系統界面，在用戶執行航班查詢后，要在屏幕上顯示航班信息和可能的進一步的交互動作

進一步的操作如何展示？進一步查詢的條件如何輸入？是否提供打印功能？用戶通過什么方式確定要訂購的航班？是否允許用戶把查到的信息存入收藏夾？考慮與其他界面可能的關聯接口。對于其他的用戶界面，如電話語音訂票或手機短信訂票，返回信息的表示方式就大為不同，所以需要針對不同界面進行交互設計，但這些設計都是來自同一個抽象設計。5.5.3概要設計

針對特定的操作系統或交互方式，對抽象的視圖設計做進一步的具體設計，產生視圖的概要設計。實際設計中，這些視圖通常是用鉛筆畫在紙上，這樣做速度快，而且修改起來也比較方便。查詢條件航班號起飛城市到達城市起飛時間到達時間全票票價剩余票額CA1100濟南北京17：3519：1050020……………………………………訂票保存打印上一頁下一頁新查詢結果中查詢5.5.4視圖的關聯設計

很多交互任務需要從一個狀態轉化為另一個狀態，這就要考慮用戶完成任務所需的信息和功能，并將不同交互視圖之間的聯系和狀態轉換關系整理清楚。對一個具體的交互視圖進行關聯性設計一般就要考慮以下因素：該視圖的前一個或幾個視圖是什么？用戶怎樣由前面的