本期的內(nèi)容目的是分享和總結(jié)信息架構(gòu)中一部分基本的交互模型。信息架構(gòu)需要考慮內(nèi)容和功能的建構(gòu), 首先需要考慮怎樣組織內(nèi)容和功能的關(guān)系,也就是切分內(nèi)容,如何把一些動(dòng)作和對(duì)象跟主題順暢的結(jié)合起來(lái);第二步就是考慮怎樣引導(dǎo)用戶(hù)通過(guò)界面達(dá)成他們的目標(biāo),也就是用”物理結(jié)構(gòu)”把內(nèi)容用頁(yè)面\窗口\面板等元素將信息表達(dá)出來(lái),交互模型正是針對(duì)第二個(gè)步驟來(lái)說(shuō)的,這些模式幫助我們?cè)诒磉_(dá)信息的時(shí)候能夠有一些常用的思路和出發(fā)點(diǎn)。
1. 雙面板展示(Two-panel Selector)
【形式】把兩個(gè)相鄰的面板放在界面上,在第一個(gè)面板顯示一組對(duì)象,用戶(hù)可以從中任意選擇,在第二個(gè)面板上顯示選中對(duì)象的內(nèi)容。
【優(yōu)點(diǎn)】
這種模式由于兩個(gè)面板相鄰擺放,用戶(hù)可以很快把他們的注意力換來(lái)?yè)Q去,一會(huì)看著列表的整個(gè)結(jié)構(gòu)(比如圖中顯示了哪些是最新的應(yīng)用),一會(huì)查看一個(gè)對(duì)象的詳細(xì)信息(這個(gè)應(yīng)用是做什么的,有哪些內(nèi)容等等)。與單個(gè)窗口相比,這種緊密地集成有幾個(gè)突出的好處:
減少體力開(kāi)支,兩個(gè)面板距離很近,用戶(hù)的眼睛不需要進(jìn)行長(zhǎng)距離的穿梭,可以通過(guò)用一次鼠標(biāo)單擊或按鍵來(lái)改變選擇的項(xiàng)目,而不是首先要在窗口和屏幕之間選擇;
減少了可視化的認(rèn)知負(fù)擔(dān),當(dāng)一個(gè)窗口彈出到最上面,或當(dāng)一個(gè)頁(yè)面的內(nèi)容完全改變時(shí),用戶(hù)就得花額外的注意力到現(xiàn)在要看的東西上,如果窗口本身一直不變,用戶(hù)就可以把注意力集中在一個(gè)較小的變化范圍內(nèi);
它也減少了記憶負(fù)擔(dān),這里左側(cè)的列表充當(dāng)了“路標(biāo)”的角色,因此用戶(hù)完全明白自己當(dāng)前是在哪個(gè)應(yīng)用下。
【用法】
整體布局:把可以進(jìn)行選擇的列表放在上面或左邊的面板上,顯示詳細(xì)內(nèi)容的面板放在下面或右邊,這樣做利用了絕大多數(shù)用戶(hù)的視線流動(dòng)方向,根據(jù)用戶(hù)從左到右的語(yǔ)言閱讀習(xí)慣讓用戶(hù)方便找到自己需要得到的信息。
列表的布局:一般有四種布局方式:線性列表,通常是排序的;二維表格,可以排序,也可以讓用戶(hù)通過(guò)列或行的標(biāo)題進(jìn)行過(guò)濾;空間組織方式,如地圖、圖表以及類(lèi)似桌面的區(qū)域,讓用戶(hù)可以按自己的需要放置對(duì)象。
操作:當(dāng)用戶(hù)單擊列表中的一個(gè)對(duì)象時(shí),在第二個(gè)面板中立即顯示它的內(nèi)容或詳細(xì)信息。同時(shí)最好能支持鍵盤(pán)操作以改變選擇的方式,如上下箭頭鍵;
視覺(jué):讓已經(jīng)選中的對(duì)象在視覺(jué)上突出顯示,如給選中的列表對(duì)象換一種顏色和亮度。
【例子】
Qzone中的雙面板應(yīng)用,當(dāng)從左側(cè)列表選擇出信息以后,右側(cè)會(huì)顯示該對(duì)象的詳細(xì)內(nèi)容,并且采用了主題類(lèi)別的信息切分形式,如果從常用模式的基本應(yīng)用模式來(lái)看,當(dāng)用戶(hù)選中左側(cè)列表對(duì)象后,如果在視覺(jué)上能夠?qū)υ搶?duì)象進(jìn)行突出顯示,可能會(huì)更友好一些。
2.畫(huà)布加工具條(Canvas Plus Palette)
【形式】
用于圖形編輯器上,把一個(gè)帶圖標(biāo)的工具條放在空白畫(huà)布旁邊,用戶(hù)單擊調(diào)色板工具條上的按鈕,在畫(huà)布上創(chuàng)建對(duì)象。通常工具條用來(lái)創(chuàng)建對(duì)象,畫(huà)布用來(lái)擺放對(duì)象。
【優(yōu)點(diǎn)】
這個(gè)模式來(lái)自于人們的日常生活經(jīng)驗(yàn),畫(huà)布、調(diào)色板,就是這樣的樣式,因此用戶(hù)在使用時(shí)容易理解;同時(shí)畫(huà)布加工具條也利用了可視化識(shí)別的好處,最常用的圖標(biāo)(畫(huà)筆、手型圖標(biāo)、放大鏡等)在各種不同的應(yīng)用系統(tǒng)中一次又一次的得到重用,而且每次都是同樣的用法,減少了用戶(hù)記憶和學(xué)習(xí)的成本。
【用法】
工具條本身應(yīng)該是一個(gè)圖標(biāo)按鈕或者看起來(lái)像按鈕的網(wǎng)格,由于中文本身詞匯的表達(dá)比較強(qiáng),所以工具條里用圖標(biāo)加文字的形式會(huì)更容易理解。
工具條放在畫(huà)布的左邊或者上面,當(dāng)工具比較多時(shí),可以吧工具條的圖標(biāo)分成幾個(gè)小組,比如用(card stack)模式的TAB來(lái)表示這些分組。
【例子】
0
喜歡他,就推薦他上首頁(yè)吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)