建站常識(shí)
信息架構(gòu)中的常見模型
2010-05-12 08:20:00
《信息架構(gòu)中的常見模型》是整個(gè)“web交互設(shè)計(jì)方法”中的一部分:
本期的內(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)用戶通過界面達(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ì)象,用戶可以從中任意選擇,在第二個(gè)面板上顯示選中對(duì)象的內(nèi)容。
【優(yōu)點(diǎn)】
這種模式由于兩個(gè)面板相鄰擺放,用戶可以很快把他們的注意力換來(lái)?yè)Q去,一會(huì)看著列表的整個(gè)結(jié)構(gòu)(比如圖中顯示了哪些是最新的應(yīng)用),一會(huì)查看一個(gè)對(duì)象的詳細(xì)信息(這個(gè)應(yīng)用是做什么的,有哪些內(nèi)容等等)。與單個(gè)窗口相比,這種緊密地集成有幾個(gè)突出的好處:
減少體力開支,兩個(gè)面板距離很近,用戶的眼睛不需要進(jìn)行長(zhǎng)距離的穿梭,可以通過用一次鼠標(biāo)單擊或按鍵來(lái)改變選擇的項(xiàng)目,而不是首先要在窗口和屏幕之間選擇;
減少了可視化的認(rèn)知負(fù)擔(dān),當(dāng)一個(gè)窗口彈出到最上面,或當(dāng)一個(gè)頁(yè)面的內(nèi)容完全改變時(shí),用戶就得花額外的注意力到現(xiàn)在要看的東西上,如果窗口本身一直不變,用戶就可以把注意力集中在一個(gè)較小的變化范圍內(nèi);
它也減少了記憶負(fù)擔(dān),這里左側(cè)的列表充當(dāng)了“路標(biāo)”的角色,因此用戶完全明白自己當(dāng)前是在哪個(gè)應(yīng)用下。
【用法】
整體布局:把可以進(jìn)行選擇的列表放在上面或左邊的面板上,顯示詳細(xì)內(nèi)容的面板放在下面或右邊,這樣做利用了絕大多數(shù)用戶的視線流動(dòng)方向,根據(jù)用戶從左到右的語(yǔ)言閱讀習(xí)慣讓用戶方便找到自己需要得到的信息。
列表的布局:一般有四種布局方式:線性列表,通常是排序的;二維表格,可以排序,也可以讓用戶通過列或行的標(biāo)題進(jìn)行過濾;空間組織方式,如地圖、圖表以及類似桌面的區(qū)域,讓用戶可以按自己的需要放置對(duì)象。
操作:當(dāng)用戶單擊列表中的一個(gè)對(duì)象時(shí),在第二個(gè)面板中立即顯示它的內(nèi)容或詳細(xì)信息。同時(shí)最好能支持鍵盤操作以改變選擇的方式,如上下箭頭鍵;
視覺:讓已經(jīng)選中的對(duì)象在視覺上突出顯示,如給選中的列表對(duì)象換一種顏色和亮度。
【例子】
Qzone中的雙面板應(yīng)用,當(dāng)從左側(cè)列表選擇出信息以后,右側(cè)會(huì)顯示該對(duì)象的詳細(xì)內(nèi)容,并且采用了主題類別的信息切分形式,如果從常用模式的基本應(yīng)用模式來(lái)看,當(dāng)用戶選中左側(cè)列表對(duì)象后,如果在視覺上能夠?qū)υ搶?duì)象進(jìn)行突出顯示,可能會(huì)更友好一些。
2. 畫布加工具條(Canvas Plus Palette)
【形式】
用于圖形編輯器上,把一個(gè)帶圖標(biāo)的工具條放在空白畫布旁邊,用戶單擊調(diào)色板工具條上的按鈕,在畫布上創(chuàng)建對(duì)象。通常工具條用來(lái)創(chuàng)建對(duì)象,畫布用來(lái)擺放對(duì)象。
【優(yōu)點(diǎn)】
這個(gè)模式來(lái)自于人們的日常生活經(jīng)驗(yàn),畫布、調(diào)色板,就是這樣的樣式,因此用戶在使用時(shí)容易理解;同時(shí)畫布加工具條也利用了可視化識(shí)別的好處,最常用的圖標(biāo)(畫筆、手型圖標(biāo)、放大鏡等)在各種不同的應(yīng)用系統(tǒng)中一次又一次的得到重用,而且每次都是同樣的用法,減少了用戶記憶和學(xué)習(xí)的成本。
【用法】
工具條本身應(yīng)該是一個(gè)圖標(biāo)按鈕或者看起來(lái)像按鈕的網(wǎng)格,由于中文本身詞匯的表達(dá)比較強(qiáng),所以工具條里用圖標(biāo)加文字的形式會(huì)更容易理解。
工具條放在畫布的左邊或者上面,當(dāng)工具比較多時(shí),可以吧工具條的圖標(biāo)分成幾個(gè)小組,比如用(card stack)模式的TAB來(lái)表示這些分組。
【例子】
QQ秀泡泡日志的編輯框正是一個(gè)畫布加工具條的用戶, 通過Icon加文字的形式組成了工具條,并用分割線將工具進(jìn)行了分組。
3. 向?qū)В╓izard)
【形式】
在界面上一步步引導(dǎo)用戶按預(yù)定的順序完成任務(wù),把任務(wù)分成一系列步驟,在每個(gè)步驟里讓用戶集中處理一件事情。如,Qzone個(gè)人空間的注冊(cè)頁(yè)面:
【優(yōu)點(diǎn)】
對(duì)于較長(zhǎng)的任務(wù),在設(shè)計(jì)用戶界面時(shí)如何讓用戶明白操作的步驟,向?qū)У膬?yōu)點(diǎn)正是讓用戶按照預(yù)先規(guī)劃的路線圖來(lái)組織這項(xiàng)任務(wù),而不用了解整個(gè)任務(wù)的結(jié)構(gòu),用戶要做就是按順序執(zhí)行每個(gè)步驟,相信他們?nèi)绻裱甘荆蜁?huì)成功完成。
【用法】
把組成任務(wù)的操作分成幾個(gè)部分或幾組操作,各個(gè)部分的次序排列可能必須是嚴(yán)格限制的,也可以是能夠由用戶選擇的。
Qzone的的注冊(cè)過程包括 選擇風(fēng)格樣式、填寫個(gè)人信息、補(bǔ)充資料和完成四步,用戶必須依次填寫,而不能先填寫后面的步驟再回來(lái)寫前面的;而對(duì)于一些在線支付類的流程,從產(chǎn)品挑選、支付信息、支付地址、送貨地址等步驟,它們的順序并不重要,因?yàn)楹竺娴倪x擇并不依賴前面的選擇,把相關(guān)的選擇放在一起只是簡(jiǎn)化了人們填寫表單的工作。
任務(wù)拆分后步驟的數(shù)量和粒度往往需要很好的權(quán)衡,如果只有兩步,那會(huì)顯得很傻,如果有十五步,就會(huì)顯得乏味枯燥;但是每個(gè)步驟也需要保證不能太復(fù)雜,不然失去了向?qū)У囊饬x。
#p#
【頁(yè)面表現(xiàn)】
1)多頁(yè)面表現(xiàn)形式
從頁(yè)面表現(xiàn)上來(lái)看,最簡(jiǎn)單的實(shí)現(xiàn)方式就是將每個(gè)步驟放在一個(gè)單獨(dú)的頁(yè)面上,用前進(jìn)和后退按鈕進(jìn)行控制,但這種形式也有缺點(diǎn),每個(gè)獨(dú)立的界面不能顯示上下文,用戶不知道前面和后面分別顯示的是什么,因此這樣的形式最好能夠允許用戶在進(jìn)行過程中能夠隨時(shí)向前或者向后移動(dòng)。因?yàn)槿绻荒茏層脩艨梢愿淖兦懊娴倪x項(xiàng)而必須重新開始那就會(huì)讓人受不了。從這點(diǎn)來(lái)說(shuō),如果是多頁(yè)面的向?qū)?,它的?biāo)準(zhǔn)的配置應(yīng)該是:
或者結(jié)合雙面板選擇模式:
2) 單一頁(yè)面表現(xiàn)形式:
第一種 帶標(biāo)題的欄目:標(biāo)題上有固定編號(hào),因?yàn)橐谎劬涂梢钥吹剿械牟襟E,所以這個(gè)模式適合用在分支不多的任務(wù)上。
第二種 響應(yīng)式允許或響應(yīng)式展開:在用戶完成前面一個(gè)步驟之后才把后面的步驟顯示在頁(yè)面上,如果向?qū)У牟襟E不多,采用這樣的方式會(huì)讓頁(yè)面更簡(jiǎn)潔一些。
總結(jié):
以上三種常用的模式:雙面板選擇、畫布加工具條以及向?qū)俏覀兘?jīng)常會(huì)在網(wǎng)頁(yè)設(shè)計(jì)中見到的模式,平時(shí)的使用中我們已經(jīng)在不知不覺中認(rèn)識(shí)并習(xí)慣它們了,通過這些基本的模式,在設(shè)計(jì)加以變形和創(chuàng)新就可以創(chuàng)造出更有趣和方便的交互方式。下面的例子是一個(gè)綜合了以上三種交互模式的例子:
顯而易見的,這個(gè)工具運(yùn)用了畫布加工具條的模式,由兩組工具條和一個(gè)畫布組成。同時(shí),這個(gè)網(wǎng)頁(yè)工具還結(jié)合了雙面板選擇模式,通過TAB把工具條進(jìn)行了分類,當(dāng)單擊“face”、“noses”、“l(fā)ips”時(shí),工具條一次變化,并顯示這些對(duì)象:
并且在操作步驟的提示上,采用了向?qū)J降捻憫?yīng)式展開:當(dāng)用戶第一次選擇TAB中的類型是,會(huì)提示用戶從工具條中選擇合適的元素到畫布當(dāng)中,而當(dāng)用戶作出選擇之后,則會(huì)顯示下一個(gè)步驟的提示:
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁(yè)設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2009-11-13 14:22:00] 《web信息架構(gòu)》-組織系統(tǒng)
- [2010-06-01 08:36:00] 信息架構(gòu)中的常見模型-2
- [2009-11-13 14:19:00] 《Web信息架構(gòu)》-標(biāo)簽系統(tǒng)
- [2007-07-30 18:06:00] 初步了解信息架構(gòu)
- [2008-01-15 13:47:00] 導(dǎo)航設(shè)計(jì)與信息架構(gòu)
- [2009-11-13 14:22:00] 《web信息架構(gòu)》-信息架構(gòu)分四類及分類的方式
- [2010-06-17 08:20:00] 優(yōu)化網(wǎng)站信息架構(gòu)
- [2010-09-25 14:48:00] 信息架構(gòu)之Web導(dǎo)航設(shè)計(jì)分類
- [2009-11-16 08:24:00] 《Web信息架構(gòu)》-導(dǎo)航系統(tǒng)
- [2007-12-17 13:41:00] 信息架構(gòu)的流程引入
- [2010-05-05 21:51:00] 關(guān)于音樂試聽網(wǎng)站信息架構(gòu)的一些事
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
css 青島網(wǎng)站制作 官網(wǎng)建設(shè) GOOGLE php程序 企業(yè)建站 青島SEO 網(wǎng)站品牌 青島抖音小程序開發(fā) 青島高端網(wǎng)站建設(shè)公司哪家好 海信網(wǎng)絡(luò)科技 網(wǎng)站視覺 手機(jī)網(wǎng)站建設(shè) 空白和簡(jiǎn)潔的設(shè)計(jì) 手機(jī)網(wǎng)站 網(wǎng)站規(guī)劃 HTML5 青島高端網(wǎng)站建設(shè) 青島好的網(wǎng)站優(yōu)化公司 微網(wǎng)站 良好的導(dǎo)航 平面設(shè)計(jì) H5專題頁(yè)面 蘋果系統(tǒng) 青島網(wǎng)絡(luò)公司 搜索引擎 網(wǎng)站交互設(shè)計(jì) 用戶界面 網(wǎng)站設(shè)計(jì) 青島黃島、紅島網(wǎng)站建設(shè)公司