版本 1.1a (2001年9月17日)
Jesse James Garrett
翻譯于 2002年2月
Arky Tan
目錄：
圖表是網(wǎng)絡(luò)應(yīng)用開發(fā)團(tuán)隊(duì)（Web development teams）在溝通信息架構(gòu)和交互設(shè)計(jì)方面最基本的工具。本文所討論的是使用圖表來描述系統(tǒng)時(shí)所要考慮的事宜、信息架構(gòu)和用戶交互設(shè)計(jì)時(shí)使用這些基本元素的要點(diǎn)，并且介紹這些元素的使用方法。
1.1aSC（2002年2月6日）
簡體中文譯本
1.1a（2001年9月17日）
Macromedia FreeHand新圖形庫
添加PDF的圖形模板
1.1（2001年1月31日）
增加文件組元素
增加條件選擇器元素
修改箭頭元素，增加多箭頭說明路徑方向
修改群組元素，說明其可作為條件分支或條件選擇器的下游元素
修改條件分支元素，增加其可能出現(xiàn)空結(jié)構(gòu)的情況
修改圖形庫中的一些元素
增加Adobe InDesign 的圖形庫
1.0（2000年10月17日）
首次發(fā)布
圖示詞匯表是一套用于描繪某些事物（通?？赡苁且粋€(gè)系統(tǒng)、結(jié)構(gòu)或過程）的符號(hào)庫。本詞匯表可能在信息結(jié)構(gòu)和交互設(shè)計(jì)方面，在一個(gè)宏觀程度上描述網(wǎng)站中用戶體驗(yàn)的結(jié)構(gòu)抑或過程。
本文中的描述、圖表適用于以下五點(diǎn)主要角色：
項(xiàng)目主持人和項(xiàng)目經(jīng)理
通過本文所描述的工具能夠?qū)?xiàng)目的范圍和形態(tài)有所了解。
內(nèi)容制作人
以獲得系統(tǒng)中的內(nèi)容需求。
視覺傳達(dá)和界面設(shè)計(jì)師
使用本工具能夠計(jì)算出設(shè)計(jì)工作量，并且初步了解系統(tǒng)的導(dǎo)航結(jié)構(gòu)和界面設(shè)計(jì)的需求。
技術(shù)專家
以了解系統(tǒng)在技術(shù)方面的需求
信息結(jié)構(gòu)和交互設(shè)計(jì)師
通過本工具能夠?qū)ο到y(tǒng)中的每個(gè)具體界面設(shè)計(jì)詳細(xì)的導(dǎo)航和界面設(shè)計(jì)要求。
除項(xiàng)目主持人以外，其他四種角色的人員在進(jìn)行自己的工作中多需要獲得大量的詳細(xì)信息，但問題在于每種角色所需要了解的信息都各不相同，而且差異很大。并且各個(gè)角色所需要的信息的數(shù)量與該角色的需求并不成正比。因此對(duì)于每個(gè)對(duì)象確實(shí)有效的功用是限定本圖表的詳細(xì)程度。從而能夠使得采用本方法所描述的系統(tǒng)結(jié)構(gòu)能夠成功項(xiàng)目開發(fā)中每個(gè)角色所涉及的更詳細(xì)的描述的基石。
此外，在信息架構(gòu)和交互設(shè)計(jì)中對(duì)于本圖示詞匯表還有其他幾個(gè)重要的要求，包括：
易于書寫
圖表要足夠的簡單以便于用戶能夠快速手繪草圖，同時(shí)每個(gè)圖表元素之間需要有明確的區(qū)別，這樣即便制圖破損污染了也不會(huì)影響圖表被清晰識(shí)別。
工具無關(guān)性
圖示詞匯表需要設(shè)計(jì)成為不需要特殊的軟件工具來繪制圖表。而雖然使用圖示詞匯表不需要用戶使用特殊的軟件工具但需要能夠在各種用戶的常用軟件中能夠方便繪制。
精練而系統(tǒng)完整
由于使用本方法的每位用戶未必都很深入了解本方法（甚至未必有很大的興趣），因此本圖示詞匯表應(yīng)當(dāng)不要求客戶需要那樣專業(yè)的知識(shí)和興趣。所以整套元素必須盡可能的精練，嚴(yán)格地將概念和符號(hào)一一對(duì)應(yīng)起來，以使圖示詞匯表能夠快速地被用戶學(xué)會(huì)和使用。無論所要描述的系統(tǒng)如何負(fù)責(zé)，每個(gè)表達(dá)符號(hào)作為基本元素都必須具有自己簡單明確的含義。
信息結(jié)構(gòu)和交互設(shè)計(jì)好比是硬幣的兩面（在本文中所定義的條款請(qǐng)參見《用戶體驗(yàn)的原理（The Elements of User Experience）》） 。目前大多數(shù)網(wǎng)站和基于Web的應(yīng)用系統(tǒng)都會(huì)涉及這兩方面，而對(duì)任何一面來說，流程圖表的目標(biāo)是顯然和另一方面所不同的。在這兩方面，流程圖表都從宏觀結(jié)構(gòu)上以一個(gè)適當(dāng)?shù)脑敿?xì)程度，讓團(tuán)隊(duì)成員能夠了解項(xiàng)目的大致描述。而系統(tǒng)構(gòu)架師的職責(zé)就是決定流程圖表 所說明項(xiàng)目目的適當(dāng)詳細(xì)程度。而詳細(xì)到頁面的內(nèi)容，或微觀結(jié)構(gòu)將在以后的開發(fā)過程的文檔中體現(xiàn)出來。
在描述信息結(jié)構(gòu)時(shí)，圖表應(yīng)當(dāng)著重于項(xiàng)目概念的結(jié)構(gòu)和內(nèi)容的組織。值得主意的是項(xiàng)目概念的結(jié)構(gòu)不同于導(dǎo)航性的結(jié)構(gòu)，設(shè)計(jì)信息結(jié)構(gòu)的流程圖表的目的不是為了說明詳細(xì)的導(dǎo)航性結(jié)構(gòu)，因而最好 使用其他相關(guān)的文檔來描述導(dǎo)航性結(jié)構(gòu)的詳細(xì)信息。
在描述交互設(shè)計(jì)時(shí)，需要注重于描述用戶在系統(tǒng)定義好的任務(wù)和任務(wù)的每個(gè)過程中的行動(dòng)流程，因此導(dǎo)航條、界面元素等詳細(xì)信息將不會(huì)出現(xiàn)在流程圖表中——如果您發(fā)現(xiàn)自己在繪制按鈕、文字域等元素的時(shí)候，可能您已經(jīng)涉足過分細(xì)節(jié)的內(nèi)容了。
因此本圖示詞匯表同時(shí)包含信息構(gòu)架和交互設(shè)計(jì)的簡單的概念模型為基礎(chǔ)，用來描述：
系統(tǒng)提供給用戶的可行路徑；
用戶在所有路徑中的行為；
用戶行為在系統(tǒng)產(chǎn)生的結(jié)果；
網(wǎng)絡(luò)中用戶交互的最基本單元是頁面，因此我們采用一個(gè)矩形符號(hào)來表示頁面。值得注意的是，在此我們所提到的頁面是一個(gè)表達(dá)單元，而不僅是網(wǎng)絡(luò)交互過程中的一個(gè) 實(shí)際元素。因此流程圖中的一個(gè)頁面符號(hào)可能代表多個(gè)HTML文件（比如在一個(gè)采用幀的頁面中集合了多個(gè)HTML文件）或多段程序代碼文件（比如在服務(wù)器端調(diào)用的嵌入文件或數(shù)據(jù)庫存儲(chǔ)執(zhí)行過程等）。
除頁面之外，還有不具備網(wǎng)站導(dǎo)航屬性的文件。通常文件都是給用戶用于瀏覽器以外的操作（比如聲音和圖象文件、類似與PDF的獨(dú)立格式的文檔或可執(zhí)行文件等）。對(duì)于文件，我們采用一個(gè)卷角的文檔圖標(biāo)來表示。
圖1a：[左側(cè)]“頁面”和“文件”
圖1b:[右側(cè)]“頁面組”和“文件組”
我們采用頁面組的符號(hào)來表示在宏觀結(jié)構(gòu)上導(dǎo)航屬性一致的一組功能類似的頁面。同樣的，文件組用來表示在網(wǎng)站的導(dǎo)航結(jié)構(gòu)中被單一入口指向的一系列文件（ 比如一個(gè)可供下載的游戲集合或一個(gè)PDF說明手冊(cè)庫等等。）我們?cè)陧撁婧臀募霞右詷?biāo)注用來鑒別他們，這些標(biāo)注不必和實(shí)際名稱（比如HTML中的“”標(biāo)簽）或文件名相互關(guān)聯(lián)，但每個(gè)名稱必須是在整個(gè)信息結(jié)構(gòu)中唯一的。采用唯一的數(shù)字標(biāo)識(shí)和類型名稱是在整個(gè)信息結(jié)構(gòu)中跟蹤頁面和文件的一個(gè)好方法。
對(duì)于元素之間的關(guān)系，我們采用連接來描述。這種概念上關(guān)系將不可避免地別描述為導(dǎo)航關(guān)系，但是不是所有的導(dǎo)航關(guān)系都會(huì)出現(xiàn)在信息框架圖表中。
在描述信息結(jié)構(gòu)時(shí)，頁面之間的層基組織關(guān)系通常被描繪為一個(gè)樹形的結(jié)構(gòu)，但這種方式?jīng)Q不是唯一的而恰好是推薦使用的。
圖 2a:[左]一個(gè)簡單的樹形結(jié)構(gòu)
圖 2b:[右]與2a同樣的結(jié)構(gòu)，但是表述方法不同。
當(dāng)使用流程圖表來描述交互作用時(shí)，每個(gè)連接都需要具有方向以表述用戶是如何在系統(tǒng)的每個(gè)任務(wù)中移動(dòng)，因此將連接改成箭頭將有助于說明。對(duì)于移動(dòng)的過程，我們采用下游和上游方向條件來描述元素的相對(duì)位置關(guān)系。值得注意的是這些箭頭不似那些用來單行道的箭頭，而更象超級(jí)市場里指示食品部的那種箭頭。因?yàn)橹甘炯^的目的不是禁止用戶向別處同行，而是僅僅說明用戶想要行動(dòng)的方向。
可能出于某些原因，我們可能要禁止用戶向上游移動(dòng)（比如在進(jìn)行象刪除數(shù)據(jù)庫記錄之類不可撤銷的操作的時(shí)候），采用一個(gè)在箭頭的反向終點(diǎn)加一個(gè)橫條（一條相垂直的短線）來描述。 在某些情況下，我們可能需要在上游附近加一個(gè)箭頭以在更復(fù)雜些的結(jié)構(gòu)中說明流的方向。（一個(gè)實(shí)用提示：不少制圖程序不允許用戶將箭頭畫成這樣。為了解決這個(gè)問題在圖形庫中已經(jīng)包含了一個(gè)名為“gluedot”的元素。這是一個(gè)隱藏的單個(gè)錨點(diǎn)元素，使用這個(gè)元素可以將箭頭鏈接在一起。）
圖 3a:[左上]描述任務(wù)過程中用戶向下游移動(dòng)的箭頭
圖 3b:[左下]橫條說明向上游的移動(dòng)是被禁止的
圖 3c:[右]表明方向的多個(gè)箭頭
連接和箭頭同樣也可以加上標(biāo)注，但是最好只有在用戶行為需要被說明時(shí)才使用標(biāo)注，否則冗長和笨拙的標(biāo)注會(huì)使整個(gè)流程框架變得混亂。但必須加以很長的說明時(shí)，我們可以采用腳注或附錄的方式。
在本文給出的示例中，腳注和附錄的參考說明可以使用圓括號(hào)中數(shù)字與字母結(jié)合的方法來說明。數(shù)字用于說明當(dāng)前注釋在圖表中的出現(xiàn)的頁面，字母用于說明是該頁中的第幾項(xiàng)。比如在流程圖表的第三頁中的第一個(gè)的注解可以表示為：(3a)，第二個(gè)可以表示為：(3b)，依此類推。
圖 4a:[左]一個(gè)失敗的標(biāo)注
圖 4b:[中]一個(gè)有用的標(biāo)注
圖 4c:[右]一個(gè)腳注或附錄的標(biāo)注
并發(fā)事件組（表示為一個(gè)半圓形符號(hào)）是用于描述一個(gè)同時(shí)產(chǎn)生多個(gè)結(jié)構(gòu)得用戶行為（比如出現(xiàn)一個(gè)彈出窗口得同時(shí)主窗口下載頁面，或者顯示一個(gè)頁面的同時(shí)開始文件下載。）和箭頭一樣，并發(fā)事件組等元素都是具有方向性的。出于上游的元素鏈接到并發(fā)事件組符號(hào)的曲線邊，而處于下游的元素鏈接到并發(fā)事件組的平邊上。
圖 5:并發(fā)事件組符號(hào)的使用
描述信息結(jié)構(gòu)的圖表通常希望能夠有足夠大幅面的圖紙用來繪圖。但是即便采用繪圖機(jī)等大型的輸出設(shè)備，一些結(jié)構(gòu)也可能僅因?yàn)樘珡?fù)雜而無法使用單一的圖表中全部囊括。因此為了鏈接圖表頁面的間隙，我們采用鏈接點(diǎn)（表示為方括號(hào)）使用戶易于將圖表拆分成容易消化的模塊。
單個(gè)鏈接點(diǎn)可以根據(jù)需要被鏈接至一個(gè)和多個(gè)資源圖表或目的圖表。同時(shí)方括號(hào)的方向（垂直或水平）并沒有特別的含義，至于采用什么方向的方括號(hào)完全取決于設(shè)計(jì)師的審美。
圖 6a:[左]一個(gè)“鏈接至”的鏈接點(diǎn)將讀者引向下一個(gè)圖表
圖 6b:[右]一個(gè)“鏈接自”的鏈接符號(hào)說明表6a是從何處離開本圖表的。
區(qū)域元素（表示為圓角矩形）用以表示一組共享一個(gè)或多個(gè)基本屬性的頁面的集合（比如同在一個(gè)彈出窗口中顯示的頁面或者具有一些獨(dú)特設(shè)計(jì)規(guī)定的系列頁面等）。在區(qū)域元素上加上標(biāo)注以說明這些屬性，同我們?cè)阪溄悠鞯恼f明使用方法類似，如果有很多屬性需要說明的話可以使用標(biāo)注連接到其他文檔中的其他注釋。
圖 7:使用一個(gè)區(qū)域元素來表達(dá)彈出窗口的示例
不少設(shè)計(jì)師常會(huì)反復(fù)使用相同的基本機(jī)構(gòu)來描述大量功能相同的信息元素，比如您可能遇到一個(gè)產(chǎn)品目錄，其中每個(gè)產(chǎn)品都有若干的頁面與之相關(guān)聯(lián)。此時(shí)，您當(dāng)然可以使用為每個(gè)產(chǎn)品繪制一個(gè)信息結(jié)構(gòu)的引例，但是這樣做難道不是很浪費(fèi)時(shí)間嗎？因此遇到類似的情況時(shí)，請(qǐng)使用區(qū)域疊代（表示為一堆圓角矩形）。
圖 8:使用區(qū)域疊代來表示產(chǎn)品目錄中重復(fù)的結(jié)構(gòu)。
值得注意的是鏈接器和箭頭實(shí)際上并不是指向區(qū)域元素的，區(qū)域元素僅僅用于封裝一些頁面。因此使用區(qū)域元素時(shí)需要小心——使用區(qū)域元素能夠很方便地表述各種用戶體驗(yàn)中無法表明地細(xì)節(jié)信息（比如哪些文件是存放在哪臺(tái)服務(wù)器上的），但是同時(shí)不當(dāng)?shù)氖褂靡部赡軙?huì)混淆流程圖表在宏觀結(jié)構(gòu)上的說明能力。
一些用戶交互功能的設(shè)計(jì)師常常需要在不同的過程中反復(fù)描述一系列相同的步驟（比如用戶登錄過程）。通常這些步驟是系統(tǒng)的一個(gè)功能模塊或者一個(gè)需要用戶完成的較大的任務(wù)，就這一點(diǎn)與計(jì)算機(jī)程序設(shè)計(jì)中的子程序非常類似。 這樣一個(gè)可以重復(fù)步驟叫做流程，在圖表中我們使用兩個(gè)元素來表示流程：第一部分是用于說明流程本身結(jié)構(gòu)的流程區(qū)域；另一部分是流程引用，作用類似于一個(gè)占位符，在系統(tǒng)結(jié)構(gòu)中每個(gè)出現(xiàn)被引用的流程的地方作為。這兩個(gè)元素都具有相同的基本形狀——一個(gè)去角的矩形（如果你愿意，也可以使用變形的八邊形）。流程區(qū)域需要兩個(gè)特殊的鏈接點(diǎn)：進(jìn)入點(diǎn)和退出點(diǎn)，它們都位于流程區(qū)域之外用于說明流程的開始處和截止處。
圖 9a:[左]流程引用的使用示例
圖 9b:[右]圖9a中引用的流程區(qū)域
流程引用就其本身而言和鏈接點(diǎn)很類似，它們的作用都是讓設(shè)計(jì)師將圖表分散成不同的模塊。它們的區(qū)別在于流程引用是同時(shí)鏈接在兩個(gè)過程之中，它具有“鏈接自”和“鏈接至”的步驟，而一個(gè)鏈接點(diǎn)僅能具備一個(gè)步驟。因此如果您需要使用模塊但并不同時(shí)具備來源和去向那么就不必使用流程元素。
伴隨機(jī)構(gòu)分析問題的深入，在信息結(jié)構(gòu)和交互設(shè)計(jì)的構(gòu)成中我們往往需要根據(jù)用戶在系統(tǒng)中行動(dòng)而動(dòng)態(tài)地調(diào)整系統(tǒng)的功能結(jié)構(gòu)。一般這種動(dòng)態(tài)調(diào)整都通過條件邏輯來實(shí)現(xiàn)，因此在本文的后半部分我們將討論條件邏輯結(jié)構(gòu)的表達(dá)方法。當(dāng)然我們?cè)诖怂撌龅亩际窍到y(tǒng)應(yīng)用中基本模塊的條件元素：
系統(tǒng)將跟蹤以下一個(gè)或多個(gè)屬性，這些屬性可能是：
用戶，或用戶類型；
對(duì)話時(shí)間，比如登陸的狀態(tài)；
被訪問的內(nèi)容，比如主題內(nèi)容；
日期或時(shí)間；
每個(gè)屬性都具有值（“3p.m.”可能意味著一天中的時(shí)間）。
一個(gè)屬性的特殊值所關(guān)聯(lián)的內(nèi)容被成為條件。
條件將由系統(tǒng)來判斷是否正確。
在靜態(tài)的結(jié)構(gòu)中，每條系統(tǒng)中的行動(dòng)路徑都被呈現(xiàn)給每種情況下的每個(gè)用戶，而且每條路徑都指向相同的結(jié)構(gòu)。在一個(gè)動(dòng)態(tài)結(jié)構(gòu)中，系統(tǒng)根據(jù)對(duì)一個(gè)或多個(gè)條件的判斷來決定哪條路徑應(yīng)當(dāng)遞送給用戶。為了精簡結(jié)構(gòu)的流程圖，這些條件在伴隨整個(gè)文檔的注腳或附錄中說明。
當(dāng)一個(gè)用戶的行為可能會(huì)觸發(fā)多個(gè)可能結(jié)構(gòu)中的一個(gè)時(shí)，系統(tǒng)就需要作一個(gè)決策以決定將哪個(gè)結(jié)果呈現(xiàn)給用戶（最常見的例子就是在表單提交信息時(shí)的錯(cuò)誤校驗(yàn)）。我們將這個(gè)作決策的環(huán)節(jié)稱為決策點(diǎn)，并使用一個(gè)菱形來表示。在使用時(shí)請(qǐng)注意必須使用箭頭表明和決策點(diǎn)向關(guān)聯(lián)的元素間上游和下游的相對(duì)關(guān)系。
圖 10:在用戶登錄過程機(jī)構(gòu)中的決策點(diǎn)使用示例。
當(dāng)一個(gè)路徑在某些條件成立的情況下在呈現(xiàn)給用戶時(shí)，我們可以采用條件連接（表達(dá)為虛線）來表示。例如對(duì)于一個(gè)包含員工信息的頁面來說，路徑成立的條件時(shí)用戶類型，當(dāng)用戶是公司員工時(shí)系統(tǒng)使該路徑可供用戶通過，反之則路徑不存在。
圖 11a:[左]一個(gè)條件連接
圖 11b:[右]一個(gè)條件箭頭
當(dāng)需要描述系統(tǒng)必須從多個(gè)選擇擲中選取一個(gè)遞送給用戶時(shí)，我們使用條件分支（表達(dá)為三角形）。處于上游的元素必須連接到三角形的一個(gè)頂點(diǎn)，而處于下游的元素則連接到對(duì)應(yīng)的邊上。
圖 12:條件分支示例
上圖示例中的情況和圖10中描繪的決策點(diǎn)的情況看似相同，但是它們所表述的用戶行為是截然不同的。在決策點(diǎn)的示例中，系統(tǒng)依據(jù)特定的條件僅將一條路徑遞送給用戶。而對(duì)于條件分支所描繪的情況，系統(tǒng)雖然也作類似的決策，但是在用戶作出行為之前就已經(jīng)決定的。所以條件分支用于描述系統(tǒng)決定遞送給用戶哪條路徑。并且示例中來自于A頁的B頁、C頁和D頁是相對(duì)唯一的，也就是說如果到B頁的路徑成立，則到C頁和D頁的路徑就不成立了。
和條件連接或條件箭頭類似的，條件分支也可能無法為用戶提供路徑（分支沒有結(jié)果）。但和條件連接不同的是，并不是所有的條件分支都可能存在無法遞送結(jié)果的情況，因此如果存在這種情況請(qǐng)務(wù)必在腳注或附錄中聲明。
條件選擇器和條件分支非常類似，它們唯一的不同在于：就條件選擇器而言，各種處于下游的元素并不是相對(duì)唯一的，只要用戶滿足條件，系統(tǒng)可以同時(shí)遞送任意多的路徑。
圖 13:條件選擇器示例
普通程序中最常使用條件選擇器莫過于搜索引擎了。在搜索引擎中所有檢索出的結(jié)果都是通過上游的條件選擇器而來，而選擇器所作出的決定是依據(jù)其上游用戶輸入的檢索內(nèi)容，再通過下游檢索出的可行路徑將用戶帶到不同的結(jié)果。和條件分支相同，條件選擇器也可能無法產(chǎn)生結(jié)果——實(shí)際上空結(jié)果的情況在條件選擇器中出現(xiàn)的幾率遠(yuǎn)大于條件分支。
某些條件結(jié)構(gòu)中需要系統(tǒng)在一定條件下為用戶同時(shí)為用戶提供多條路徑。我們使用群組（表達(dá)為圓形）來表示這種路徑的集合，群組可以作為條件分支或條件選擇器的下游元素。
圖 14:一個(gè)條件分支中的群組元素
在圖14中示例的群組元素很像一個(gè)普通的條件分支，但是在其中的一個(gè)條件成立時(shí)系統(tǒng)需要為用戶遞送多條路徑。所以當(dāng)條件分支的屬性值為x時(shí)，用戶將得到去往B頁的路徑，而當(dāng)條件分支的屬性值為y時(shí)，用戶將同時(shí)得到去往C頁和D頁的路徑。
當(dāng)系統(tǒng)中有一組頁面使用到條件時(shí)，這些頁面需要使用條件區(qū)域注明（表達(dá)為一個(gè)虛線邊框的圓角矩形）。條件區(qū)域經(jīng)常被用于描述訪問權(quán)限控制等功能，比如驗(yàn)證用戶登陸和對(duì)連接加密（SSL）。和其他類型的區(qū)域不同的是，條件區(qū)域必便隨有一個(gè)出錯(cuò)結(jié)果，以說明當(dāng)其中所有條件未能夠被滿足的時(shí)候所出現(xiàn)的錯(cuò)誤情況。
