第5章界面設(shè)計

1、第5章 界面設(shè)計重點大學(xué)計算機(jī)專業(yè)系列教材界面設(shè)計原則理解用戶設(shè)計流程任務(wù)分析以用戶為中心的界面設(shè)計命令行界面可以看作是第一代人機(jī)界面，其中人被看成操作員，機(jī)器只做出被動的反應(yīng)，人用手操作鍵盤，輸入數(shù)據(jù)和命令信息，通過視覺通道獲取信息，界面輸出只能為靜態(tài)的文本字符。圖形界面可看作是第二代人機(jī)界面，是基于圖形方式的人機(jī)界面。由于引入了圖標(biāo)、按鈕和滾動條技術(shù)，大大減少了鍵盤輸入，提高了交互效率。多通道用戶界面則進(jìn)一步綜合采用視覺、語音、手勢等新的交互通道、設(shè)備和交互技術(shù)，使用戶利用多個通道以自然、并行、協(xié)作的方式進(jìn)行人機(jī)對話，通過整合來自多個通道的、精確的或不精確的輸入來捕捉用戶的交互意圖，提高人

2、機(jī)交互的自然性和高效性。桌面隱喻 桌面隱喻是指在用戶界面中用人們熟悉的桌面上的圖例清楚地表示計算機(jī)可以處理的能力。所見即所得 在WYSIWYG交互界面中，其所顯示的用戶交互行為與應(yīng)用程序最終產(chǎn)生的結(jié)果是一致的。直接操縱 直接操縱是指可以把操作的對象、屬性、關(guān)系顯式地表示出來，用光筆、鼠標(biāo)、觸摸屏或數(shù)據(jù)手套等指點設(shè)備直接從屏幕上獲取形象化命令與數(shù)據(jù)的過程。界面要具有一致性常用操作要有快捷方式提供必要的錯誤處理功能提供信息反饋允許操作可逆設(shè)計良好的聯(lián)機(jī)幫助合理劃分并高效地使用顯示屏幕用戶的含義 簡單的說，用戶是使用某種產(chǎn)品的人，其包含兩層含義：1）用戶是人類的一部分；2）用戶是產(chǎn)品的使用者。產(chǎn)品的

3、設(shè)計只有以用戶為中心，才能得到更多用戶的青睞。 衡量一個以用戶為中心的設(shè)計的好壞，關(guān)鍵點是強(qiáng)調(diào)產(chǎn)品的最終使用者與產(chǎn)品之間的交互質(zhì)量，它包括三方面特性：產(chǎn)品在特定使用環(huán)境下為特定用戶用于特定用途時所具有的有效性（Effectiveness）、效率（Efficiency）和用戶主觀滿意度（Satisfaction）。延伸開來，還包括對特定用戶而言，產(chǎn)品的易學(xué)程度、對用戶的吸引程度、用戶在體驗產(chǎn)品前后時的整體心理感受等。 用戶體驗（User Experience，UX）通常是指用戶在使用產(chǎn)品或系統(tǒng)時的全面體驗和滿意度。 用戶體驗主要有下列四個元素組成： 品牌（Branding） 使用性（Usabil

4、ity） 功能性（Functionality） 內(nèi)容（Content）影響用戶體驗的因素很多：現(xiàn)有技術(shù)上的限制，使得設(shè)計人員必須優(yōu)先在相對固定的UI框架內(nèi)進(jìn)行設(shè)計；設(shè)計的創(chuàng)新，在用戶的接受程度上也存在一定的風(fēng)險；開發(fā)進(jìn)度表，也會給這樣一種具有藝術(shù)性的工作帶來壓；設(shè)計人員很容易認(rèn)為他們了解用戶需要，但實際情況常常不是這樣。 偶然型用戶：既沒有計算機(jī)應(yīng)用領(lǐng)域的專業(yè)知識，也缺少計算機(jī)系統(tǒng)基本知識的用戶。 生疏型用戶：他們更常使用計算機(jī)系統(tǒng)，因而對計算機(jī)的性能及操作使用，已經(jīng)有一定程度的理解和經(jīng)驗。但他們往往對新使用的計算機(jī)系統(tǒng)缺乏了解，不太熟悉，因此對新系統(tǒng)而言，他們?nèi)耘f是生疏用戶。 熟練型用戶：這

5、類用戶一般是專業(yè)技術(shù)人員，他們對需要計算機(jī)完成的工作任務(wù)有清楚地了解，對計算機(jī)系統(tǒng)也有相當(dāng)多的知識和經(jīng)驗，并且能熟練地操作、使用。 專家型用戶：對需要計算機(jī)完成的工作任務(wù)和計算機(jī)系統(tǒng)都很精通的，通常是計算機(jī)專業(yè)用戶，稱為專家型用戶。計算機(jī)和領(lǐng)域經(jīng)驗對易于學(xué)習(xí)和易于使用的影響在理解用戶的基礎(chǔ)上，需要針對軟件的功能和目標(biāo)用戶，全面分析用戶的交互內(nèi)容，主要包括： 產(chǎn)品策略分析 用戶分析 用戶交互特性分析用戶的觀察和分析 情境訪談（Contextual Interviews） 走進(jìn)用戶的現(xiàn)實環(huán)境，盡量了解你的用戶的工作方式、生活環(huán)境等情況。 焦點小組（Focus Groups） 組織一組用戶進(jìn)行討論，

6、讓你更了解用戶的理解、想法、態(tài)度和需求。 單獨訪談（Individual Interviews） 一對一的用戶討論，讓你了解某個用戶是如何工作，使你知道用戶的感受、想要什么及其經(jīng)歷等。設(shè)計 常用的素材分析方法是對象模型化，即將用戶分析的結(jié)果按照討論的對象進(jìn)行分類整理，并且以各種圖示的方法描述其屬性、行為和關(guān)系。 對象抽象模型可以逐步轉(zhuǎn)化為不同具體程度的用戶視圖。比較抽象的視圖有利于進(jìn)行邏輯分析，稱為低真視圖（Low-fidelity Prototype）；比較具體的視圖更接近于人機(jī)界面的最終表達(dá)，稱為高真視圖（High-fidelity Prototype）。實施 隨著產(chǎn)品進(jìn)入實施階段，設(shè)計師

7、對高真設(shè)計原型進(jìn)行最后的調(diào)整，并且撰寫產(chǎn)品的設(shè)計風(fēng)格標(biāo)準(zhǔn)（Style Guide），產(chǎn)品各個部分風(fēng)格的一致性由該標(biāo)準(zhǔn)保證。 產(chǎn)品實施或投入市場后，面向用戶的設(shè)計并沒有結(jié)束，而是要進(jìn)一步的搜集用戶的評價和建議，以利于下一代產(chǎn)品的開發(fā)和研制。任務(wù)分析是交互設(shè)計至關(guān)重要的環(huán)節(jié)，在以用戶為中心的設(shè)計中，關(guān)心的是如何從用戶那里理解和獲取用戶的思維模式，進(jìn)行充分、直觀的表達(dá)，并用于交互設(shè)計。描述用戶行為的工具有很多，目前經(jīng)常提到的是通用標(biāo)識語言UML（Unified Markup Language）。UML 2.0共有10種圖示，分別為組合結(jié)構(gòu)圖、用例圖、類圖、序列圖、對象圖、協(xié)作圖、狀態(tài)圖、活動圖、組件

8、圖和部署圖，它們分別用以表現(xiàn)不同的視圖。在任務(wù)分析中使用UML工具，可以清晰地表達(dá)一個交互任務(wù)諸多方面的內(nèi)容，包括交互中的使用行為、交互順序、協(xié)作關(guān)系、工序約束等等。使用行為分析就是要理解系統(tǒng)中每個參與者及其所需完成的任務(wù)，即分析系統(tǒng)所涉及的問題領(lǐng)域和系統(tǒng)運行的主要任務(wù)，分析使用該系統(tǒng)主要功能部分的是哪些人，誰將需要該系統(tǒng)的支持以完成其工作。使用行為分析一般使用用例圖描述，它從參與者的角度出發(fā)來描述一個系統(tǒng)的功能，主要目的是幫助開發(fā)團(tuán)隊以一種可視化的方式理解系統(tǒng)的功能需求。讀者請求服務(wù)用例圖書管理員處理借書、還書的用例系統(tǒng)管理員進(jìn)行系統(tǒng)維護(hù)的用每個使用行為都是由若干步驟組成的，這些步驟可以使用

9、順序圖進(jìn)行描述。順序圖描述了完成一個任務(wù)的典型步驟；它可以按照交互任務(wù)發(fā)生的時間順序，把用例表達(dá)的需求轉(zhuǎn)化為進(jìn)一步、更加正式層次的精細(xì)表達(dá)；用例常常被細(xì)化為一個或更多的順序圖。協(xié)作圖著重顯示了某個用戶行為中各個系統(tǒng)元素之間的關(guān)系，而不再重點強(qiáng)調(diào)各個步驟的時間順序。用戶完成任務(wù)的步驟又被稱為工序，某些工序之間的順序是由一些邏輯關(guān)系的。工序約束陳述是工序分析的最直接的方法。本案例中可能存在如下工序約束： 系統(tǒng)管理員必須先增加借閱者信息，讀者才能登陸。 系統(tǒng)管理員必須先增加書籍信息，讀者才能查閱。 讀者借閱信息生成后，圖書管理員圖書管理員才能去書庫取書。 讀者必須先在系統(tǒng)中辦理借閱，才能取書。 讀者

10、必須先借書才能還書。當(dāng)所有任務(wù)分析完畢，就可以用一覽表的形式描述系統(tǒng)中的所有用戶及其可能需要完成的所有任務(wù)。任務(wù)讀者圖書館管理員系統(tǒng)管理員書籍信息查詢、讀者信息查詢借書還書書籍預(yù)定增加、刪除或更新書目增加、刪除書籍增加、刪除或更新讀者帳戶信息任務(wù)金字塔描述了不同層次的任務(wù)之間的關(guān)系。任何一個任務(wù)都可能包括若干子任務(wù)，從而構(gòu)成金字塔狀的結(jié)構(gòu)。以讀者查詢圖書為例通過描述實際的任務(wù)場景可以非常直觀的進(jìn)行任務(wù)描述，便于與用戶的交流，并可以幫助分析設(shè)計者和真正用戶之間對任務(wù)的不同理解。故事講述（story telling）可以是真實的案例，也可以是虛構(gòu)的情節(jié)，甚至可以是對理想場景的虛構(gòu)，關(guān)鍵是使這些故事

11、能夠典型的反映交互任務(wù)，具有充分的代表性。情節(jié)分析（scenario analysis）是對故事所反映的交互任務(wù)的理性分析，分離出故事中所描述的角色、目標(biāo)、環(huán)境、步驟、策略、感情等諸方面的因素。Gould、Boies和Lewis于1991年提出了以用戶為中心設(shè)計的四個重要原則。 及早以用戶為中心：設(shè)計人員應(yīng)當(dāng)在設(shè)計過程的早期就致力于了解用戶的需要。 綜合設(shè)計：設(shè)計的所有方面應(yīng)當(dāng)齊頭并進(jìn)發(fā)展，而不是順次發(fā)展，使產(chǎn)品的內(nèi)部設(shè)計與用戶界面的需要始終保持一致。 及早并持續(xù)性地進(jìn)行測試：當(dāng)前對軟件測試的唯一可行的方法是根據(jù)經(jīng)驗總結(jié)出的方法，即若實際用戶認(rèn)為設(shè)計是可行的，它就是可行的。通過在開發(fā)的全過程引

12、入可用性測試，可以使用戶有機(jī)會在產(chǎn)品推出之前就設(shè)計提供反饋意見。 反復(fù)式設(shè)計：大問題往往會掩蓋小問題的存在。設(shè)計人員和開發(fā)人員應(yīng)當(dāng)在整個測試過程中反復(fù)對設(shè)計進(jìn)行修改。以用戶為中心的設(shè)計方法有很多種，包括 圖形用戶界面設(shè)計與評估（Graphical User Interface Design and Evaluation，GUIDE） 以用戶為中心的邏輯交互設(shè)計（Logical User-Centred Interaction Design，LUCID） 用于交互優(yōu)化的結(jié)構(gòu)化用戶界面設(shè)計（Structured User-Interface Design for Interaction Optim

13、isation，STUDIO） 以使用為中心的設(shè)計（Usage-Centered Design） OVID設(shè)計OVID中涉及到三個模型，這些模型之間是相互關(guān)聯(lián)的 設(shè)計者模型就是用對象、對象間的關(guān)系等概念來表達(dá)目標(biāo)用戶意圖的概念模型 編程者模型廣泛應(yīng)用于面向?qū)ο蟮拈_發(fā)方法中，用于表示和實現(xiàn)構(gòu)成系統(tǒng)的類 用戶概念模型表示用戶對系統(tǒng)的理解，它依賴于用戶的交互經(jīng)驗對象從用戶概念模型的任務(wù)分析中獲得，并被轉(zhuǎn)化到設(shè)計者的對象模型中，而交互就是那些界面中執(zhí)行對象操作的必須動作。如果該模型能夠有效地設(shè)計和實現(xiàn)，用戶就可以通過與系統(tǒng)的交互理解設(shè)計者模型所要表達(dá)的信息；這些模型可以使用面向?qū)ο蟾拍钊ケ磉_(dá)，如統(tǒng)一對

14、象建模語言（UML）等。對象建模分析是將系統(tǒng)和用戶任務(wù)分析的結(jié)果轉(zhuǎn)化為用戶界面設(shè)計的第一步；建模是將系統(tǒng)任務(wù)的某些概念及其關(guān)系用圖的方式直觀綜合地表達(dá)出來；分析則是將系統(tǒng)的對象抽象為類，列出對象或類的屬性、行為、以及對象間的關(guān)系。視圖抽象設(shè)計通過組合概念模型中的對象和對象操作，提供系統(tǒng)運行的方法和方式，為具體的設(shè)計提供指導(dǎo)，并要為系統(tǒng)的不同實施方案提供靈活的界面選擇。 在線機(jī)票訂購例子中完成上述交互的視圖可能包括：用戶查詢航班視圖，航班信息列表視圖，用戶選中的某個具體航班的信息視圖，訂購信息填寫視圖，支付視圖，交易成功反饋和出票視圖等。針對特定的操作系統(tǒng)或交互方式，對抽象的視圖設(shè)計做進(jìn)一步的具

15、體設(shè)計，產(chǎn)生視圖的概要設(shè)計。實際設(shè)計中，這些視圖通常是用鉛筆畫在紙上，這樣做速度快，而且修改起來也比較方便。查詢條件航班號起飛城市到達(dá)城市起飛時間到達(dá)時間全票票價剩余票額CA1100濟(jì)南北京17：3519：1050020訂票操作員B保存操作員B打印操作員B上一頁操作員B下一頁操作員B新查詢操作員B結(jié)果中查詢操作員B任何一個人機(jī)交互系統(tǒng)的界面都可能包括若干狀態(tài)，用戶在不同界面狀態(tài)下根據(jù)自己完成任務(wù)需要進(jìn)行不同的操作；很多交互任務(wù)需要從一個狀態(tài)轉(zhuǎn)化為另一個狀態(tài)，這就要考慮用戶完成任務(wù)所需的信息和功能，并將不同交互視圖之間的聯(lián)系和狀態(tài)轉(zhuǎn)換關(guān)系整理清楚。確定各個視圖的具體內(nèi)容和大致布局，并在每個視圖上明確體現(xiàn)與其他視圖的關(guān)系，保證系統(tǒng)的整體性和和諧性。然后可以借助具體的開發(fā)工具進(jìn)行界面的實際設(shè)計。瀏覽器交互方式下，Web界面視圖的整體性主要通過下列幾點保證： 使用相同的界面風(fēng)格，包括顏色、字體、