web交互規劃辦法:信息架構中的常見模型

《信息架構中的常見模型》是整個“web交互規劃辦法”中的一部分：

本期的內容目的是共享和總結信息架構中一部分根本的交互模型。信息架構需求考慮內容和功用的建構, 首要需求考慮怎樣安排內容和功用的關系，也便是切分內容，怎么把一些動作和方針跟主題順暢的結合起來；第二步便是考慮怎樣引導用戶通過界面達到他們的方針,也便是用”物理結構”把內容用頁面\窗口\面板等元素將信息表達出來,交互模型正是針對第二個進程來說的，這些辦法幫助咱們在表達信息的時候能夠有一些常用的思路和出發點。

1. 雙面板展示（Two-panel Selector）

【辦法】把兩個相鄰的面板放在界面上，在第一個面板顯現一組方針，用戶能夠從中恣意挑選，在第二個面板上顯現選中方針的內容。

【長處】

這種辦法由于兩個面板相鄰擺放，用戶能夠很快把他們的注意力換來換去，一會看著列表的整個結構（比方圖中顯現了哪些是最新的運用），一會檢查一個方針的具體信息（這個運用是做什么的，有哪些內容等等）。與單個窗口比較，這種緊密地集成有幾個杰出的好處：

減少膂力開支，兩個面板間隔很近，用戶的眼睛不需求進行長間隔的穿梭，能夠通過用一次鼠標單擊或按鍵來改動挑選的項目，而不是首要要在窗口和屏幕之間挑選；

減少了可視化的認知擔負，當一個窗口彈出到最上面，或當一個頁面的內容徹底改動時，用戶就得花額定的注意力到現在要看的東西上，假如窗口自身一直不變，用戶就能夠把注意力會集在一個較小的改動范圍內；

它也減少了回憶擔負，這兒左面的列表充當了“路標”的角色，因此用戶徹底了解自己當時是在哪個運用下。

【用法】

整體布局：把能夠進行挑選的列表放在上面或左面的面板上，顯現具體內容的面板放在下面或右邊，這樣做利用了絕大多數用戶的視野活動方向，根據用戶從左到右的言語閱覽習慣讓用戶方便找到自己需求得到的信息。

列表的布局：一般有四種布局辦法：線性列表，一般是排序的；二維表格，能夠排序，也能夠讓用戶通過列或行的標題進行過濾；空間安排辦法，如地圖、圖表以及類似桌面的區域，讓用戶能夠按自己的需求放置方針。

操作：當用戶單擊列表中的一個方針時，在第二個面板中立即顯現它的內容或具體信息。一起最好能支持鍵盤操作以改動挑選的辦法，如上下箭頭鍵；

視覺：讓已經選中的方針在視覺上杰出顯現，如給選中的列表方針換一種顏色和亮度。

【比如】

Qzone中的雙面板運用，當從左面列表挑選出信息今后，右側會顯現該方針的具體內容，并且選用了主題類別的信息切分辦法，假如從常用辦法的根本運用辦法來看，當用戶選中左面列表方針后，假如在視覺上能夠對該方針進行杰出顯現，可能會更友好一些。

2. 畫布加東西條（Canvas Plus Palette）

【辦法】

用于圖形編輯器上，把一個帶圖標的東西條放在空白畫布周圍，用戶單擊調色板東西條上的按鈕，在畫布上創立方針。一般東西條用來創立方針，畫布用來擺放方針。

【長處】

這個辦法來自于人們的日常生活經驗，畫布、調色板，便是這樣的款式，因此用戶在運用時簡略了解；一起畫布加東西條也利用了可視化辨認的好處，最常用的圖標（畫筆、手型圖標、放大鏡等）在各種不同的運用系統中一次又一次的得到重用，并且每次都是同樣的用法，減少了用戶回憶和學習的本錢。

【用法】

東西條自身應該是一個圖標按鈕或許看起來像按鈕的網格，由于中文自身詞匯的表達比較強，所以東西條里用圖標加文字的辦法會更簡略了解。

東西條放在畫布的左面或許上面，當東西比較多時，能夠吧東西條的圖標分紅幾個小組，比方用（card stack）辦法的TAB來表明這些分組。

【比如】

QQ秀泡泡日志的編輯框正是一個畫布加東西條的用戶， 通過Icon加文字的辦法組成了東西條，并用分割線將東西進行了分組。

3. 導游（Wizard）

【辦法】

在界面上一步步引導用戶按預定的次序完結使命，把使命分紅一系列進程，在每個進程里讓用戶會集處理一件作業。如，Qzone個人空間的注冊頁面：

【長處】

關于較長的使命，在規劃用戶界面時怎么讓用戶了解操作的進程，導游的長處正是讓用戶按照預先規劃的路線圖來安排這項使命，而不用了解整個使命的結構，用戶要做便是按次序執行每個進程，相信他們假如遵循指示，就會成功完結。

【用法】

把組成使命的操作分紅幾個部分或幾組操作，各個部分的次序擺放可能有必要是嚴厲限制的，也能夠是能夠由用戶挑選的。

Qzone的的注冊進程包括 挑選風格款式、填寫個人信息、彌補資料和完結四步，用戶有必要順次填寫，而不能先填寫后邊的進程再回來寫前面的；而關于一些在線付出類的流程，從產品挑選、付出信息、付出地址、送貨地址等進程，它們的次序并不重要，由于后邊的挑選并不依賴前面的挑選，把相關的挑選放在一起僅僅簡化了人們填寫表單的作業。

使命拆分后進程的數量和粒度往往需求很好的權衡，假如只有兩步，那會顯得很傻，假如有十五步，就會顯得庸俗單調；但是每個進程也需求確保不能太雜亂，否則失去了導游的含義。

【頁面體現】

1）多頁面體現辦法

從頁面體現上來看，最簡略的實現辦法便是將每個進程放在一個獨自的頁面上，用前進和后退按鈕進行操控，但這種辦法也有缺陷，每個獨立的界面不能顯現上下文，用戶不知道前面和后邊分別顯現的是什么，因此這樣的辦法最好能夠答應用戶在進行進程中能夠隨時向前或許向后移動。由于假如不能讓用戶能夠改動前面的選項而有必要重新開始那就會讓人受不了。從這點來說，假如是多頁面的導游，它的規范的配置應該是：

或許結合雙面板挑選辦法：

2） 單一頁面體現辦法：

第一種 帶標題的欄目：標題上有固定編號，由于一眼就能夠看到所有的進程，所以這個辦法適合用在分支不多的使命上。

第二種 呼應式答應或呼應式打開：在用戶完結前面一個進程之后才把后邊的進程顯現在頁面上，假如導游的進程不多,選用這樣的辦法會讓頁面更簡潔一些。

總結：

以上三種常用的辦法：雙面板挑選、畫布加東西條以及導游是咱們經常會在網頁規劃中見到的辦法，平時的運用中咱們已經在不知不覺中認識并習慣它們了，通過這些根本的辦法，在規劃加以變形和創新就能夠創造出更有趣和方便的交互辦法。下面的比如是一個綜合了以上三種交互辦法的比如：

顯而易見的，這個東西運用了畫布加東西條的辦法，由兩組東西條和一個畫布組成。一起，這個網頁東西還結合了雙面板挑選辦法，通過TAB把東西條進行了分類，當單擊“face”、“noses”、“lips”時，東西條一次改動，并顯現這些方針：

并且在操作進程的提示上，選用了導游辦法的呼應式打開：當用戶第一次挑選TAB中的類型是，會提示用戶從東西條中挑選合適的元素到畫布當中，而當用戶作出挑選之后，則會顯現下一個進程的提示：