web交互規(guī)劃辦法:信息架構(gòu)中的常見模型

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

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

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

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

【長處】

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

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

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

它也減少了回憶擔(dān)負(fù)，這兒左面的列表充當(dāng)了“路標(biāo)”的角色，因此用戶徹底了解自己當(dāng)時(shí)是在哪個運(yùn)用下。

【用法】

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

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

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

視覺：讓已經(jīng)選中的方針在視覺上杰出顯現(xiàn)，如給選中的列表方針換一種顏色和亮度。

【比如】

Qzone中的雙面板運(yùn)用，當(dāng)從左面列表挑選出信息今后，右側(cè)會顯現(xiàn)該方針的具體內(nèi)容，并且選用了主題類別的信息切分辦法，假如從常用辦法的根本運(yùn)用辦法來看，當(dāng)用戶選中左面列表方針后，假如在視覺上能夠?qū)υ摲结樳M(jìn)行杰出顯現(xiàn)，可能會更友好一些。

2. 畫布加?xùn)|西條（Canvas Plus Palette）

【辦法】

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

【長處】

這個辦法來自于人們的日常生活經(jīng)驗(yàn)，畫布、調(diào)色板，便是這樣的款式，因此用戶在運(yùn)用時(shí)簡略了解；一起畫布加?xùn)|西條也利用了可視化辨認(rèn)的好處，最常用的圖標(biāo)（畫筆、手型圖標(biāo)、放大鏡等）在各種不同的運(yùn)用系統(tǒng)中一次又一次的得到重用，并且每次都是同樣的用法，減少了用戶回憶和學(xué)習(xí)的本錢。

【用法】

東西條自身應(yīng)該是一個圖標(biāo)按鈕或許看起來像按鈕的網(wǎng)格，由于中文自身詞匯的表達(dá)比較強(qiáng)，所以東西條里用圖標(biāo)加文字的辦法會更簡略了解。

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

【比如】

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

3. 導(dǎo)游（Wizard）

【辦法】

在界面上一步步引導(dǎo)用戶按預(yù)定的次序完結(jié)使命，把使命分紅一系列進(jìn)程，在每個進(jìn)程里讓用戶會集處理一件作業(yè)。如，Qzone個人空間的注冊頁面：

【長處】

關(guān)于較長的使命，在規(guī)劃用戶界面時(shí)怎么讓用戶了解操作的進(jìn)程，導(dǎo)游的長處正是讓用戶按照預(yù)先規(guī)劃的路線圖來安排這項(xiàng)使命，而不用了解整個使命的結(jié)構(gòu)，用戶要做便是按次序執(zhí)行每個進(jìn)程，相信他們假如遵循指示，就會成功完結(jié)。

【用法】

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

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

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

【頁面體現(xiàn)】

1）多頁面體現(xiàn)辦法

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

或許結(jié)合雙面板挑選辦法：

2） 單一頁面體現(xiàn)辦法：

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

第二種 呼應(yīng)式答應(yīng)或呼應(yīng)式打開：在用戶完結(jié)前面一個進(jìn)程之后才把后邊的進(jìn)程顯現(xiàn)在頁面上，假如導(dǎo)游的進(jìn)程不多,選用這樣的辦法會讓頁面更簡潔一些。

總結(jié)：

以上三種常用的辦法：雙面板挑選、畫布加?xùn)|西條以及導(dǎo)游是咱們經(jīng)常會在網(wǎng)頁規(guī)劃中見到的辦法，平時(shí)的運(yùn)用中咱們已經(jīng)在不知不覺中認(rèn)識并習(xí)慣它們了，通過這些根本的辦法，在規(guī)劃加以變形和創(chuàng)新就能夠創(chuàng)造出更有趣和方便的交互辦法。下面的比如是一個綜合了以上三種交互辦法的比如：

顯而易見的，這個東西運(yùn)用了畫布加?xùn)|西條的辦法，由兩組東西條和一個畫布組成。一起，這個網(wǎng)頁東西還結(jié)合了雙面板挑選辦法，通過TAB把東西條進(jìn)行了分類，當(dāng)單擊“face”、“noses”、“l(fā)ips”時(shí)，東西條一次改動，并顯現(xiàn)這些方針：

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