《信息架構(gòu)中的常見模型》是整個“web交互設(shè)計方法”中的一部分:
本期的內(nèi)容目的是分享和總結(jié)信息架構(gòu)中一部分基本的交互模型。信息架構(gòu)需要考慮內(nèi)容和功能的建構(gòu), 首先需要考慮怎樣組織內(nèi)容和功能的關(guān)系,也就是切分內(nèi)容,如何把一些動作和對象跟主題順暢的結(jié)合起來;第二步就是考慮怎樣引導(dǎo)用戶通過界面達成他們的目標,也就是用”物理結(jié)構(gòu)”把內(nèi)容用頁面\窗口\面板等元素將信息表達出來,交互模型正是針對第二個步驟來說的,這些模式幫助我們在表達信息的時候能夠有一些常用的思路和出發(fā)點。
1. 雙面板展示(Two-panel Selector)
【形式】把兩個相鄰的面板放在界面上,在第一個面板顯示一組對象,用戶可以從中任意選擇,在第二個面板上顯示選中對象的內(nèi)容。
【優(yōu)點】
這種模式由于兩個面板相鄰擺放,用戶可以很快把他們的注意力換來換去,一會看著列表的整個結(jié)構(gòu)(比如圖中顯示了哪些是最新的應(yīng)用),一會查看一個對象的詳細信息(這個應(yīng)用是做什么的,有哪些內(nèi)容等等)。與單個窗口相比,這種緊密地集成有幾個突出的好處:
減少體力開支,兩個面板距離很近,用戶的眼睛不需要進行長距離的穿梭,可以通過用一次鼠標單擊或按鍵來改變選擇的項目,而不是首先要在窗口和屏幕之間選擇;
減少了可視化的認知負擔(dān),當一個窗口彈出到最上面,或當一個頁面的內(nèi)容完全改變時,用戶就得花額外的注意力到現(xiàn)在要看的東西上,如果窗口本身一直不變,用戶就可以把注意力集中在一個較小的變化范圍內(nèi);
它也減少了記憶負擔(dān),這里左側(cè)的列表充當了“路標”的角色,因此用戶完全明白自己當前是在哪個應(yīng)用下。
【用法】
整體布局:把可以進行選擇的列表放在上面或左邊的面板上,顯示詳細內(nèi)容的面板放在下面或右邊,這樣做利用了絕大多數(shù)用戶的視線流動方向,根據(jù)用戶從左到右的語言閱讀習(xí)慣讓用戶方便找到自己需要得到的信息。
列表的布局:一般有四種布局方式:線性列表,通常是排序的;二維表格,可以排序,也可以讓用戶通過列或行的標題進行過濾;空間組織方式,如地圖、圖表以及類似桌面的區(qū)域,讓用戶可以按自己的需要放置對象。
操作:當用戶單擊列表中的一個對象時,在第二個面板中立即顯示它的內(nèi)容或詳細信息。同時最好能支持鍵盤操作以改變選擇的方式,如上下箭頭鍵;
視覺:讓已經(jīng)選中的對象在視覺上突出顯示,如給選中的列表對象換一種顏色和亮度。
【例子】
Qzone中的雙面板應(yīng)用,當從左側(cè)列表選擇出信息以后,右側(cè)會顯示該對象的詳細內(nèi)容,并且采用了主題類別的信息切分形式,如果從常用模式的基本應(yīng)用模式來看,當用戶選中左側(cè)列表對象后,如果在視覺上能夠?qū)υ搶ο筮M行突出顯示,可能會更友好一些。
出處:騰訊Webteam
責(zé)任編輯:bluehearts
上一頁 下一頁 信息架構(gòu)中的常見模型 [2]
|