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

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

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

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

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

【長(zhǎng)處】

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

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

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

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

【用法】

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

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

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

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

【比如】

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

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

【辦法】

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

【長(zhǎng)處】

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

【用法】

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

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

【比如】

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

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

【辦法】

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

【長(zhǎng)處】

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

【用法】

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

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

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

【頁(yè)面體現(xiàn)】

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

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

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

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

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

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

總結(jié)：

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

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

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