在這個 系列 中，在 IBM Internet Technology Group 團(tuán)隊的帶領(lǐng)下使用一套可免費(fèi)獲得的軟件來設(shè)計、開發(fā)和部署一個完整的社區(qū) Web 站點(diǎn)。這個系列的大多數(shù)文章主要關(guān)注這個 Web 站點(diǎn)的實(shí)際實(shí)現(xiàn)，但是這第二篇文章偏重于通用方法。這里解釋了我們的設(shè)計過程，可以幫助您為應(yīng)用程序、其他界面或 Web 站點(diǎn)創(chuàng)建用戶體驗(yàn)。第 1 部分 討論了團(tuán)隊的需求，對比了幾種開放源碼內(nèi)容管理系統(tǒng)，并解釋了選擇 Drupal 的基本原因。 簡介 在這個系列中，我們使用一個虛構(gòu)的組織，International Business Council（IBC）。IBC 讓它的職員在一個協(xié)作型社區(qū)中與外部業(yè)務(wù)伙伴進(jìn)行交流。IBC 需要重新設(shè)計現(xiàn)有的 Web 站點(diǎn)，需要有文檔存儲、討論組、專門的工作組、研討會日程安排、日程議題描述、會話過期和其他功能。 我們的過程涉及到分析業(yè)務(wù)目標(biāo)、分析用戶的目標(biāo)和評估現(xiàn)有的 Web 站點(diǎn)。通過分析，我們設(shè)計了幾個備選解決方案，然后根據(jù)用戶反饋迭代地調(diào)整它們，最后形成了最終的設(shè)計解決方案。 圖 1 概述了我們的過程，這個過程由四個基本階段組成： - 分析
- 設(shè)計
- 構(gòu)建原型
- 開發(fā)
這個過程幫助我們將注意力集中于用戶的目標(biāo)、任務(wù)和關(guān)注點(diǎn)。盡管圖 1 是一個線性的序列，但是這個過程并不是線性的。每個階段都向其他階段提供信息（既可以向前，也可以向后）。在整個過程中，反饋向前面的階段提供基本信息，從而支持對解決方案進(jìn)行改進(jìn)。反饋會提供有價值的信息，保持項目不會偏離正確的方向并一直關(guān)注總體目標(biāo)。本文主要關(guān)注這個過程的前三個階段。
圖 1. 設(shè)計的四個階段：分析、設(shè)計、構(gòu)建原型和開發(fā)
查看 這張圖的大版本。 正式的過程通常會生成文檔，從而幫助從客戶那里得到反饋和認(rèn)可。在項目向前發(fā)展時，每個階段的文檔提供了對項目現(xiàn)狀的共同理解，并為第四階段中的實(shí)現(xiàn)提供藍(lán)圖。由于日程很緊，除了要設(shè)計的工件之外，可能沒時間生成其他東西。IBC 現(xiàn)有的 Web 站點(diǎn)有一些已知的問題，也有一些有用的特性。我們使用一個正式的框架對分析進(jìn)行組織，從而更有效地與客戶進(jìn)行討論。 隨著收集到更多關(guān)于項目的信息，過程的方向越來越明確，支持設(shè)計目標(biāo)的備選方案的數(shù)量也逐漸減少。通過更深入地了解設(shè)計問題，設(shè)計決策得到了改進(jìn)。隨著時間的推移，備選方案的范圍逐漸收縮，而關(guān)于設(shè)計方面的信息逐漸增加。這些決策會驅(qū)動這個過程和最終的實(shí)現(xiàn)。 本文詳細(xì)描述分析階段。您會發(fā)現(xiàn)設(shè)計階段是一個迭代式的循環(huán)過程，包括設(shè)計、構(gòu)建原型和評估設(shè)計備選方案。通過了解我們的用戶，我們可以建立一個有用、好用且符合期望的 Web 站點(diǎn)。 分析階段 分析階段主要關(guān)注收集信息以便更好地理解項目。它會收集關(guān)于業(yè)務(wù)和用戶目標(biāo)的信息。 | firmitas（堅固性）、utilitas（實(shí)用性）和 venustas（優(yōu)雅性）
著名的架構(gòu)師 Vitruvius 在他的書 De architectura 中指出，結(jié)構(gòu)必須展現(xiàn)出 firmitas、utilitas 和 venustas 三方面的品質(zhì) —— 它必須是堅固的（即持久耐用）、有用的和優(yōu)雅的。這個規(guī)則適用于任何良好的設(shè)計。它必須持久耐用，不會崩潰。它必須提供一些實(shí)用的功能。最后，它必須是優(yōu)雅的，讓用戶滿意，讓他們愿意再次使用這個工件。 與之相似，AIGA 認(rèn)為良好的 體驗(yàn)設(shè)計 應(yīng)該滿足三個必要條件：有用（提供所需的功能）、好用（提供流暢的體驗(yàn)）以及符合期望（提供用戶希望體驗(yàn)的交互方式）。通過使 Web 站點(diǎn)有用、好用且符合期望，可以提高客戶的滿意度和參與度。 | | 我們首先分析現(xiàn)有的 Web 站點(diǎn)。我們的過程分四個方面評估這個 Web 站點(diǎn)： 這種方法主要基于 TSDesign 的 User Experience Audit（參見 參考資料）。在整個過程中一直使用這些分析類別作為對評估、建議和設(shè)計討論進(jìn)行組織的方法。我們將分析所獲得的信息整合在一起，提供有用的建議。下面簡要描述業(yè)務(wù)和用戶目標(biāo)以及每個分析領(lǐng)域。 業(yè)務(wù)目標(biāo) 在任何項目的一開始，了解業(yè)務(wù)目標(biāo)都是很重要的。明確任務(wù)、業(yè)務(wù)目標(biāo)和項目目標(biāo)會在客戶和設(shè)計者之間建立一個共同的理解基礎(chǔ)。這樣，后續(xù)的設(shè)計決策才能夠支持這些目標(biāo)。目標(biāo)必須是明確的，這樣后續(xù)的設(shè)計決策才能夠在整個過程中針對并支持這些目標(biāo)。我們的目標(biāo)是為客戶提供外部 Web 站點(diǎn)的組織的典型目標(biāo)。在這個設(shè)計問題中，業(yè)務(wù)目標(biāo)包括： - 在公司的解決方案和策略方面，與客戶進(jìn)行更充分的協(xié)作
- 從客戶那里收集反饋
- 傳播關(guān)于組織和即將舉行的活動的信息
- 吸引客戶
用戶目標(biāo) 識別用戶的目標(biāo)和期望也很重要。有許多種技術(shù)可以用來收集這種信息。通常，利用用戶訪談和調(diào)查表可以更好地了解用戶在與設(shè)計進(jìn)行交互時的角色和任務(wù)。如果有現(xiàn)有的設(shè)計，就可以向用戶詢問對這個設(shè)計的評價和建議。 對于我們的設(shè)計問題，用戶目標(biāo)包括： - 能夠輕松地訪問內(nèi)容，比如只需不超過三次點(diǎn)擊就能夠訪問到任何內(nèi)容
- 提供簡單且一致的 Web 站點(diǎn)導(dǎo)航
- 在編輯內(nèi)容和提交文件附件時允許選擇成員
- 允許用戶社區(qū)進(jìn)行討論和發(fā)表評論
- 向社區(qū)提供及時的信息
受眾（audience） 這個概念描述訪問站點(diǎn)的所有用戶以及他們訪問站點(diǎn)的原因。然后，將識別出的用戶類型整理成主要角色。然后，根據(jù) Cooper 的定義，識別出每個類別的角色（參見 參考資料）。Cooper 的 GOAL-DIRECTED? 方法依賴于代表特定興趣的人，而這些虛構(gòu)的人依賴于正在創(chuàng)建的產(chǎn)品、服務(wù)和系統(tǒng)。 這些模型中最關(guān)鍵的部分是用戶集。這些原型用戶的特征是從調(diào)查結(jié)果中整理出來的。不同的用戶集代表不同的行為模式和目標(biāo) —— Cooper。 通過確定角色（如 圖 2 所示），就可以度量設(shè)計的易用性和有用性，而不需要向過多的用戶征詢意見。如果在設(shè)計過程中這些角色感到滿意，那么大部分用戶也會感到滿意。在我們的設(shè)計中，定義了三種角色：典型客戶、組負(fù)責(zé)人和管理員。這些用戶的需求差異很大，這樣對用戶類型進(jìn)行劃分是很合理的。我們與每個類別中的許多用戶進(jìn)行會談，了解他們?nèi)绾问褂矛F(xiàn)有的 Web 站點(diǎn)。在設(shè)計過程中，我們還會觀察他們在我們的原型中執(zhí)行任務(wù)的情況，以此為設(shè)計提供反饋并更好地了解他們使用站點(diǎn)的實(shí)際方式。
圖 2. 將受眾轉(zhuǎn)換為角色
內(nèi)容 內(nèi)容是吸引用戶訪問任何站點(diǎn)的原因。內(nèi)容必須是一致的、最新的，而且支持每類用戶的總體目標(biāo)。在重新設(shè)計期間，我們必須考慮幾個問題，包括： - 內(nèi)容的表達(dá)方式應(yīng)該是一致的。
- 內(nèi)容應(yīng)該是一致的，以免用戶被相互矛盾的消息弄糊涂。內(nèi)容中的不一致會導(dǎo)致用戶感到混亂和迷惑。
不一致內(nèi)容的典型例子是在整個站點(diǎn)中對詞匯的使用。應(yīng)該確定一個詞匯表，并一致地使用它。例如，圖 3 顯示一個內(nèi)容詞匯整理過程，它將導(dǎo)航詞匯從不一致的讓人混淆的詞匯表轉(zhuǎn)換為更一致的詞匯表。在研究導(dǎo)航和站點(diǎn)的層次結(jié)構(gòu)時會進(jìn)一步整理這些詞匯。（一些詞匯是第二級鏈接，其他詞匯是第三級鏈接。） - 特性應(yīng)該支持總體目標(biāo)。
- 每個特性都應(yīng)該支持應(yīng)用程序的總體目標(biāo)。否則，它們會使用戶分心。如果內(nèi)容的組織散亂，用戶就難以集中注意力。
- 內(nèi)容的數(shù)量應(yīng)該與它的使用方法相適應(yīng)。
- 內(nèi)容的數(shù)量應(yīng)該與它的使用方法相適應(yīng)。通常情況下，用戶不會詳細(xì)閱讀整個 Web 頁面，而是會尋找相關(guān)信息。應(yīng)該盡可能減少信息量，同時提供必要的層次結(jié)構(gòu)。這樣，用戶就能夠輕松地 “掃描” 頁面。在適當(dāng)?shù)牡胤教峁└嗉?xì)節(jié)。
- 圖像、圖形和動畫應(yīng)該增加價值。
- 任何圖形元素都應(yīng)該為總體體驗(yàn)增加價值，并支持對內(nèi)容的表達(dá)。在某些應(yīng)用程序中，圖像往往會分散注意力，而不是幫助用戶理解內(nèi)容。要避免這種情況。
- 內(nèi)容應(yīng)該是精確的和最新的。
- 顯然，所有內(nèi)容和代碼都應(yīng)該是精確的和最新的，尤其是對于時間敏感的數(shù)據(jù)。這包括為了安全目的所做的軟件升級以及修改過的內(nèi)容。
圖 3 顯示現(xiàn)有站點(diǎn)和重新設(shè)計的 Web 站點(diǎn)上的導(dǎo)航條內(nèi)容詞匯。在整個站點(diǎn)中使用一致的詞匯表會使站點(diǎn)更清晰，減少產(chǎn)生混淆的可能性。
圖 3. 重新設(shè)計前后的導(dǎo)航條
導(dǎo)航和層次結(jié)構(gòu) 在幫助用戶輕松地完成任務(wù)方面，導(dǎo)航和層次結(jié)構(gòu)是很重要的；它們可以幫助實(shí)現(xiàn)自然而且容易使用的界面；它們應(yīng)該是直觀、簡單且可預(yù)測的。當(dāng)用戶點(diǎn)擊某一元素時，用戶會轉(zhuǎn)到哪里應(yīng)該是很明顯的。Krug 對 “真實(shí)世界” 中的導(dǎo)航和 Web 站點(diǎn)導(dǎo)航做了比較（參見 參考資料）。他指出，在網(wǎng)上比例尺、方向和位置是沒有意義的。為了克服這些差異，Web 站點(diǎn)應(yīng)該采用幾種通用技術(shù)和約定，包括： - 適當(dāng)?shù)拿Q
- 通過給元素提供與其用途相適應(yīng)的標(biāo)簽，用戶會更好地了解當(dāng)前的位置以及點(diǎn)擊鏈接時可能轉(zhuǎn)到的位置。能夠正確地預(yù)知鏈接的目標(biāo)位置是很重要的。這可以通過提供結(jié)果頁面的 “跡象” 來實(shí)現(xiàn)。
- 適當(dāng)?shù)穆窂?/strong>
- 通過提供到達(dá)層次結(jié)構(gòu)中的元素的適當(dāng)路徑，用戶可以在頭腦中對 Web 站點(diǎn)形成正確的思維模型，并明確他們在站點(diǎn)上的位置。
- 位置感
- 良好的應(yīng)用程序總是會提供適當(dāng)?shù)奈恢酶?，讓用戶能夠知道?dāng)前所處的位置和上下文。另外，他們也知道接下來要去哪里。這可以利用可視元素（品牌）和頁面在站點(diǎn)層次結(jié)構(gòu)中的位置來實(shí)現(xiàn)。
- 導(dǎo)航和層次結(jié)構(gòu)的貫穿
- Web 站點(diǎn)內(nèi)容應(yīng)該進(jìn)行適當(dāng)?shù)某溄印Ｔ谀承┣闆r下，breadcrumb 導(dǎo)航有助于用戶了解他們在信息空間中的位置，并提供了在層次結(jié)構(gòu)中后退的快速方法。例如，對 Web 站點(diǎn)其他部分的引用應(yīng)該是活動鏈接。人的名字應(yīng)該鏈接到這個人的配置文件。
最后，這個 Web 站點(diǎn)劃分成由工作組、研討會和成員組成的三個主要區(qū)域。在可視語言中使用顏色來表示每個主要部分，從而建立位置感。圖 4 對比了每個區(qū)域中顏色的使用。
圖 4. 在導(dǎo)航時用顏色建立位置感
交互 交互應(yīng)該盡可能明確以便于用戶完成任務(wù)。在總體設(shè)計的設(shè)計和構(gòu)建原型階段中，將研究并記錄典型的交互場景。交互是主要的設(shè)計元素之一，它對使用的簡便性有很大影響。交互包括： - 清晰的指示
- 盡可能向用戶提供簡單直觀的說明。在這種情況下，“少就是好”，而且提供簡單的說明有助于確保用戶閱讀這些說明并按說明進(jìn)行操作。盡管大多數(shù)操作只對操作團(tuán)隊是有效的，但它們依然是始終在整個站點(diǎn)中顯示的簡單文字。
- 清晰的反饋
- 對于用戶執(zhí)行的任何操作，都應(yīng)該提供一致且清晰的反饋，這是很重要的。顯示給用戶的消息應(yīng)該采用一致的語言和術(shù)語。反饋在任何情況下都不應(yīng)該誤導(dǎo)用戶。
- 高效的完成
- 系統(tǒng)應(yīng)該在恰當(dāng)時支持任務(wù)的高效完成。為用戶提供完成（或不完成）特定任務(wù)的替代方法。提供適當(dāng)?shù)姆答亖肀砻魅蝿?wù)的完成。
- 錯誤處理
- 應(yīng)該盡可能避免會出現(xiàn)錯誤的情況。但是如果錯誤發(fā)生了，處理應(yīng)該簡單直觀。顯示給用戶的任何消息都不應(yīng)該將當(dāng)前的情況歸罪于用戶。
- 意圖明確的體驗(yàn)
- 意圖明確的體驗(yàn)就是期望管理，比如為用戶操作的后果提供暗示。提供一種機(jī)制，讓用戶知道他們的操作會有什么后果。
- 沒有死胡同
- 死胡同會使用戶處于不知道要做什么或接下來要到哪里去的境地，界面應(yīng)該避免這種情況。
- 進(jìn)度的指示
- 與應(yīng)用程序的交互應(yīng)該向用戶提供任務(wù)進(jìn)度的指示。
- 協(xié)作
- 協(xié)作不一定是設(shè)計的目標(biāo)，但是在網(wǎng)絡(luò)環(huán)境中在設(shè)計中支持協(xié)作越來越常見了。盡可能支持用戶之間的協(xié)作，從而促進(jìn)社區(qū)的發(fā)展。社區(qū)可以通過用戶發(fā)起的評論和討論相互支持。
在遇到錯誤時，不要提供 404 頁面（這是一個顯示錯誤消息的死胡同），而是顯示一個修改過的站點(diǎn)地圖頁面（見 圖 5），這樣用戶就能夠輕松地找到相關(guān)信息。
圖 5. 修改過的站點(diǎn)地圖，可以輕松地找到相關(guān)信息
可視語言 可視語言是一套圖形技術(shù)，用來將站點(diǎn)聯(lián)系在一起并為用戶提供一致的明確的體驗(yàn)?？梢曊Z言有幾種不同的元素，包括顏色、網(wǎng)格、排版方式、窗口小部件和圖像。可視語言在整個站點(diǎn)中應(yīng)該保持一致，并支持設(shè)計的總體目標(biāo)。它應(yīng)該對應(yīng)用程序的導(dǎo)航和層次結(jié)構(gòu)起補(bǔ)充作用?？梢曊Z言是建立強(qiáng)烈且一致的風(fēng)格的最有效方法之一。它有助于通過共同的元素風(fēng)格在設(shè)計中建立位置感。 - 一致的可視樣式
- 可視樣式應(yīng)該在整個站點(diǎn)上保持一致，并對總體設(shè)計策略起補(bǔ)充作用。使用一致的元素會讓用戶意識到他們是在同一個 Web 站點(diǎn)上。
- 有效的概念
- 有效的可視概念在表示的所有方面支持總體設(shè)計。它會在視覺上表示設(shè)計的共同業(yè)務(wù)目標(biāo)和用戶目標(biāo)。
- 對導(dǎo)航和層次結(jié)構(gòu)的支持
- 可視語言應(yīng)該支持層次結(jié)構(gòu)的概念，并對用戶的位置感和任務(wù)的上下文起補(bǔ)充作用。它應(yīng)該明確地指出用戶接下來可以去哪里。Web 站點(diǎn)的結(jié)構(gòu)應(yīng)該是容易理解的。
- 明確的品牌標(biāo)識
- 明確的品牌標(biāo)識非常重要，它會使用戶對 Web 站點(diǎn)感覺良好，并知道站點(diǎn)是穩(wěn)定且一致的。
使用顏色來幫助定義品牌和可視語言。如 圖 6 所示，顏色有助于在 Web 站點(diǎn)中建立位置感。
圖 6. 使用顏色為不同的頁面類型建立位置感
下面的階段要研究候選方案，主要關(guān)注在迭代過程中沒有被淘汰的那些想法和技術(shù)。我們通過循環(huán)進(jìn)行設(shè)計、構(gòu)建原型和分析來產(chǎn)生設(shè)計決策，并創(chuàng)建有用、好用且符合期望的解決方案。結(jié)果是產(chǎn)生了 Web 站點(diǎn)的場景（或者說 “彩排”），這些場景突出表現(xiàn)了已定義的角色的活動。通過用戶反饋以及對常見的導(dǎo)航類別、層次結(jié)構(gòu)、交互和可視語言的分析，可以判斷候選方案的效能。
設(shè)計階段 設(shè)計階段為新應(yīng)用程序或 Web 站點(diǎn)創(chuàng)建設(shè)計。這個階段幫助對 Web 站點(diǎn)的功能和技術(shù)規(guī)格說明進(jìn)行精練。設(shè)計決策并不是隨便決定的，而是必須支持 Web 站點(diǎn)的業(yè)務(wù)目標(biāo)和用戶目標(biāo)。利用 第一階段 取得的分析結(jié)果和建議，設(shè)計階段要對以下方面進(jìn)行詳細(xì)設(shè)計： 內(nèi)容 內(nèi)容及其結(jié)構(gòu)應(yīng)該在整個 Web 站點(diǎn)上保持一致。在這里，應(yīng)該建立對典型頁面的描述，其中包括識別出的主要元素以及它們在頁面上的相互關(guān)系。最終的布局可能有所不同，但是已經(jīng)識別出的組件元素將出現(xiàn)在所有頁面上。例如，一級導(dǎo)航元素可能出現(xiàn)在頁面的頂部，二級鏈接可能出現(xiàn)在右欄中?，F(xiàn)有頁面的相關(guān)信息根據(jù)當(dāng)前用戶進(jìn)行定制，之后再顯示出來。圖 7 粗略地顯示內(nèi)容的布局及其與頁面上其他元素的關(guān)系。
圖 7. 內(nèi)容的布局及其與其他元素的關(guān)系
導(dǎo)航和層次結(jié)構(gòu) 導(dǎo)航和層次結(jié)構(gòu)提供了 Web 站點(diǎn)的骨架，其中描述了信息的主要類別及其屬性。然后，將它們組織成 Web 站點(diǎn)的地圖以及一套菜單、按鈕和相關(guān)鏈接。共有三級導(dǎo)航，這反映在 圖 8 所示的站點(diǎn)地圖中。
圖 8. 按照導(dǎo)航級別組織頁面
查看 這張圖的大版本。 交互 通過構(gòu)造出站點(diǎn)上最常見活動的交互序列（靜態(tài)的或動態(tài)的），對交互進(jìn)行分析。我們的目標(biāo)是減少訪問 Web 站點(diǎn)上的任何信息所需的點(diǎn)擊次數(shù)。我們希望減低感知負(fù)擔(dān)并盡可能提高使用的簡便性。 典型的交互序列如 圖 9 所示。這一系列屏幕表示一個簡單的任務(wù)交互序列，從主頁到研討會頁面，再到特定研討會集會的信息。每個頁面都是通過在前一個頁面上進(jìn)行用戶選擇（點(diǎn)擊）而到達(dá)的新頁面。這個簡短的序列從主頁開始，尋找特定研討會中某次集會的相關(guān)信息。我們已經(jīng)對在原 Web 站點(diǎn)上非常困難的一個任務(wù)進(jìn)行了修改，使它只需要兩次點(diǎn)擊。如果需要的話，可以為同一任務(wù)針對每個角色創(chuàng)建不同的場景。然后，可以確定不同的角色在新設(shè)計中如何高效地執(zhí)行他們的任務(wù)?？梢酝ㄟ^易用性研究、會談或其他技術(shù)發(fā)現(xiàn)這些任務(wù)。通常，執(zhí)行任何任務(wù)都有多種方法。一些替代方法也記錄在設(shè)計文檔中。
圖 9. 一個簡單的任務(wù)交互序列
可視語言 我們希望建立一套一致的可視語言，以此對業(yè)務(wù)目標(biāo)和用戶目標(biāo)進(jìn)行補(bǔ)充。這里的意圖是使 “外觀和感覺” 更簡單、干凈且容易使用?？梢曊Z言要反映設(shè)計方式，并有助于簡單化和使用的簡便性。可視語言包括許多圖形技術(shù)，比如菜單以及： - 顏色
- 顏色是一種有用的可視工具，可以幫助為 Web 站點(diǎn)創(chuàng)建特色和外觀。為了符合簡單性這個設(shè)計目標(biāo)，使用白色的背景和淺灰色定義一個簡單且干凈的外觀。意圖是讓讀者將注意力集中在內(nèi)容和他們與內(nèi)容的交互上。
- 排版方式
- 這是另一個幫助定義 Web 站點(diǎn)的風(fēng)格的工具。同樣，其意圖是顯示一個簡單、干凈且可伸縮的字體設(shè)計。使用的字型應(yīng)該在不同的平臺上都存在，至少應(yīng)該可以退化到一般的替代字體。圖 10 給出了一個例子。
圖 10. Web 站點(diǎn)的字體風(fēng)格方針
- 圖像、圖標(biāo)和徽標(biāo)
- 還可以使用圖像、圖標(biāo)和徽標(biāo)為設(shè)計提供獨(dú)特的品牌和位置感。
- 布局和網(wǎng)格
- 布局將所有組件組合在一起。網(wǎng)格是使原本很復(fù)雜的頁面井井有條的好方法。
可以建立一個風(fēng)格方針，在其中總結(jié)這些技術(shù)以及應(yīng)該如何應(yīng)用它們。實(shí)際上，這些風(fēng)格方針常常采用 Web 頁面的形式，其中用大量示例向客戶提供整套可視語言的參考實(shí)現(xiàn)。
構(gòu)建原型階段 在構(gòu)建原型階段中，使用從前面階段收集到的信息創(chuàng)建設(shè)計候選方案。這些候選方案可以采用多種形式，從可以快速建立的低真實(shí)度原型（如 圖 11 所示）到包含用戶交互的高真實(shí)度原型。正如 Berger 指出的，有許多類型的原型，從抽象的到比較具體的（參見 參考資料）。原型技術(shù)包括： - 交互式卡片序列
- 紙上原型
- 線框圖
- Excel 電子表格模擬
- Photoshop 模擬
- Flash demo
- 基于代碼的實(shí)現(xiàn)
原型具有內(nèi)容真實(shí)度、交互真實(shí)度和可視真實(shí)度等屬性。圖 11 說明了這些原型技術(shù)的內(nèi)容真實(shí)度、可視真實(shí)度和交互真實(shí)度。原點(diǎn)代表靜態(tài)的原型，右上角代表最接近真實(shí)應(yīng)用程序的原型。
圖 11. 原型技術(shù)
在構(gòu)建原型時，提供更詳細(xì)的原型和在給定的時間內(nèi)開發(fā)更多候選方案，這兩種愿望是相互沖突的，需要在它們之間進(jìn)行權(quán)衡。這兩類原型都很重要。但是在設(shè)計過程的早期，如果細(xì)節(jié)太多，就可能偏離原型的目標(biāo)，將注意力吸引到錯誤的設(shè)計領(lǐng)域。正如 Yin Yin Wong 在她關(guān)于快速原型開發(fā)的文章中指出的（參見 參考資料），界面設(shè)計人員可以使用許多圖形設(shè)計技術(shù)。例如，如果對布局感興趣，可以用文本塊構(gòu)建原型，這樣就可以展示信息結(jié)構(gòu)而不需要給出過多的細(xì)節(jié)，如 圖 12 所示。
圖 12. 使用文本塊構(gòu)建原型來說明信息結(jié)構(gòu)
Marc Rettig（參見 參考資料）將使用低真實(shí)度原型的動機(jī)總結(jié)為： - 構(gòu)建高真實(shí)度原型要花費(fèi)很長時間。
- 審查人員會對原型細(xì)節(jié)進(jìn)行評論，而忽視重要的特性。
- 因?yàn)樾薷母哒鎸?shí)度原型比較困難，開發(fā)人員往往不樂意進(jìn)行修改。
- 原型會使人們對系統(tǒng)形成預(yù)期，一旦形成，就很難改變。
- 高真實(shí)度原型中的一個 bug 就可能使測試完全中斷。
通過使用低真實(shí)度的原型，可以更有效地進(jìn)行設(shè)計。 反饋是這個過程的重要方面。原型階段與設(shè)計階段緊密結(jié)合，它們相互傳遞信息以此促進(jìn)發(fā)展。 我們選擇了兩種原型技術(shù)。最初，我們使用低真實(shí)度的線框圖，從而將討論的重點(diǎn)放在內(nèi)容和信息體系結(jié)構(gòu)上。我們用這些線框圖表示 Web 站點(diǎn)的每個重要部分。圖 7 和 圖 9 顯示了典型的線框圖。 在從低真實(shí)度模擬中獲得頁面需求之后，我們使用更高真實(shí)度的原型來說明各個任務(wù)的流程。這些原型都是靜態(tài)的，高分辨率，并包含相當(dāng)多的可視語言成分。圖 13 顯示 Web 站點(diǎn)上典型研討會頁面的高分辨率原型示例。
圖 13. 高分辨率原型
開發(fā)階段 這個過程中的最后一個階段是構(gòu)建 Web 站點(diǎn)。在開發(fā)階段中，要實(shí)際構(gòu)建和測試 Web 站點(diǎn)。前三個階段為設(shè)計的實(shí)現(xiàn)提供了指導(dǎo)方針。開發(fā)階段主要關(guān)注實(shí)現(xiàn)。 沒有專門的測試階段。在開發(fā)的過程中，要經(jīng)常進(jìn)行測試，檢查實(shí)現(xiàn)的穩(wěn)定性和正確性。在實(shí)現(xiàn)的不同階段，利用來自客戶的反饋使總體設(shè)計保持正確的方向。本系列中后續(xù)的文章將詳細(xì)討論實(shí)現(xiàn)問題。
結(jié)束語 在這篇文章中，討論了我們?yōu)榭蛻粼O(shè)計 Web 站點(diǎn)的過程。這個過程也有助于設(shè)計其他用戶體驗(yàn)，比如應(yīng)用程序和物理對象的界面。希望本文能夠幫助您對自己的過程進(jìn)行組織。文中提供了相關(guān)方法和技術(shù)的參考資料，幫助您了解別人的設(shè)計過程。 設(shè)計完 Web 站點(diǎn)之后，就要開始實(shí)現(xiàn)階段。本系列中的后兩篇文章將講解如何為 Windows（第 3 部分）和 Linux（第 4 部分）安裝開發(fā)環(huán)境。建立這個環(huán)境之后，就可以使用 Drupal 創(chuàng)建自己的 Web 站點(diǎn)。后續(xù)文章將討論用 Drupal 開發(fā) Web 站點(diǎn)特有的問題。
| 
