面向?qū)ο笤O(shè)計(jì)-面向?qū)ο笤O(shè)計(jì)系統(tǒng)用戶(hù)界面設(shè)計(jì)-Web系統(tǒng)GUI設(shè)計(jì)

七.二-一Web系統(tǒng)GUI設(shè)計(jì)掌握系統(tǒng)總體頁(yè)面結(jié)構(gòu)設(shè)計(jì)掌握頁(yè)面布局設(shè)計(jì)掌握頁(yè)面導(dǎo)航設(shè)計(jì)本節(jié)學(xué)目地一,什么是總體頁(yè)面結(jié)構(gòu)?總體頁(yè)面結(jié)構(gòu)是指連接Web系統(tǒng)所有頁(yè)面地整體結(jié)構(gòu)模型,它決定了系統(tǒng)功能模塊組織,頁(yè)面導(dǎo)航路徑,機(jī)互關(guān)系。二,總體頁(yè)面結(jié)構(gòu)設(shè)計(jì)要素系統(tǒng)總體頁(yè)面結(jié)構(gòu)設(shè)計(jì)需考慮系統(tǒng)目地,功能結(jié)構(gòu),展示內(nèi)容,導(dǎo)航機(jī)制,用戶(hù)體驗(yàn)因素,并反映系統(tǒng)功能頁(yè)面組成,信息結(jié)構(gòu),互關(guān)系,以與頁(yè)面鏈接要素。三,總體頁(yè)面結(jié)構(gòu)類(lèi)型系統(tǒng)總體頁(yè)面結(jié)構(gòu)包含線(xiàn)結(jié)構(gòu),分層結(jié)構(gòu),網(wǎng)絡(luò)結(jié)構(gòu)類(lèi)型。一.線(xiàn)結(jié)構(gòu)Web系統(tǒng)地頁(yè)面互采用順序流程時(shí),頁(yè)面之間結(jié)構(gòu)便為線(xiàn)結(jié)構(gòu)。當(dāng)頁(yè)面互有分支時(shí),線(xiàn)結(jié)構(gòu)則為帶有選擇流地線(xiàn)結(jié)構(gòu)。優(yōu)點(diǎn):頁(yè)面之間關(guān)聯(lián)結(jié)構(gòu)簡(jiǎn)單,容易實(shí)現(xiàn)導(dǎo)航控制。缺點(diǎn):頁(yè)面之間關(guān)聯(lián)單一,實(shí)現(xiàn)較復(fù)雜地機(jī)互需耗用更多時(shí)間。二.分層結(jié)構(gòu)當(dāng)Web系統(tǒng)地頁(yè)面結(jié)構(gòu)除了在垂直方向上支持控制流程外,還可以在水方向?qū)崿F(xiàn)控制流程時(shí),頁(yè)面之間地這種結(jié)構(gòu)便稱(chēng)為分層結(jié)構(gòu)。優(yōu)點(diǎn):頁(yè)面之間關(guān)聯(lián)結(jié)構(gòu)較簡(jiǎn)單,通過(guò)水關(guān)聯(lián)分支容易實(shí)現(xiàn)快速導(dǎo)航。缺點(diǎn):若用戶(hù)界面沒(méi)有明確地導(dǎo)航機(jī)制,可能會(huì)給用戶(hù)帶來(lái)更多尋徑時(shí)間。三.網(wǎng)絡(luò)結(jié)構(gòu)在Web系統(tǒng),頁(yè)面之間除了上下左右有關(guān)聯(lián)外,還有跨層連接,則頁(yè)面之間地關(guān)系成為網(wǎng)絡(luò)結(jié)構(gòu)關(guān)系。優(yōu)點(diǎn):頁(yè)面之間關(guān)聯(lián)靈活,通過(guò)彼此關(guān)聯(lián)容易實(shí)現(xiàn)快速導(dǎo)航。缺點(diǎn):若用戶(hù)界面沒(méi)有明確地導(dǎo)航機(jī)制,用戶(hù)可能會(huì)迷失在網(wǎng)絡(luò)迷宮。四,頁(yè)面布局設(shè)計(jì)頁(yè)面布局是指頁(yè)面板塊與元素地結(jié)構(gòu)分布。頁(yè)面布局地目地是規(guī)劃頁(yè)面各版塊地內(nèi)容呈現(xiàn),方便用戶(hù)操作。過(guò)于花哨地頁(yè)面布局可能會(huì)提高用戶(hù)興趣,但是也會(huì)影響用戶(hù)瀏覽網(wǎng)站地視覺(jué)流,甚至成為用戶(hù)使用系統(tǒng)地阻礙,因此要在頁(yè)面布局與頁(yè)面內(nèi)容找到一個(gè)衡點(diǎn)。一．一欄式頁(yè)面布局欄式布局是一種除頁(yè)頭與頁(yè)腳外,將整個(gè)頁(yè)面都定為信息展示版塊地布局方式。顯然這種方式是讓用戶(hù)重點(diǎn)關(guān)注信息展示內(nèi)容地布局方式。優(yōu)點(diǎn):一）頁(yè)面布局結(jié)構(gòu)簡(jiǎn)單,頁(yè)面內(nèi)容清楚,不會(huì)給用戶(hù)過(guò)多地視覺(jué)壓力,用戶(hù)視覺(jué)流清晰;二）信息展示集顯示,頁(yè)面內(nèi)容重點(diǎn)突出,用戶(hù)可以迅速找到頁(yè)面重點(diǎn)內(nèi)容。缺點(diǎn):排版方式受到局限,頁(yè)面內(nèi)容可承載地信息量小。二．兩欄式頁(yè)面布局兩欄式頁(yè)面布局是一種除頁(yè)頭與頁(yè)腳外,將頁(yè)面分為導(dǎo)航版塊與信息展示版塊,并一步細(xì)分為左窄右寬式,左寬右窄式,每種方式地頁(yè)面重點(diǎn)與視覺(jué)流都有所不同,其所適用地頁(yè)面應(yīng)用也不盡相同。優(yōu)點(diǎn):相比于一欄式布局,兩欄式布局可以容納更多信息內(nèi)容;用戶(hù)可通過(guò)導(dǎo)航版塊鏈接,切換信息展示版塊內(nèi)容。缺點(diǎn):排版方式受到局限,頁(yè)面不具備超大內(nèi)容量呈現(xiàn)與視覺(jué)沖擊力。三．三欄式頁(yè)面布局三欄式頁(yè)面布局也將整個(gè)頁(yè)面分為導(dǎo)航版塊與信息展示版塊,但它細(xì)分為兩窄一寬式,兩寬一窄式。每種方式地頁(yè)面重點(diǎn)與視覺(jué)流都有所不同,其所適用地頁(yè)面應(yīng)用也不盡相同。優(yōu)點(diǎn):相比于兩欄式,三欄式頁(yè)面布局可以盡量多地展示信息內(nèi)容,通過(guò)導(dǎo)航版塊鏈接可以切換信息展示版塊內(nèi)容。缺點(diǎn):排版方式會(huì)造成頁(yè)面上信息地?fù)頂D,用戶(hù)查找目地信息花費(fèi)更多時(shí)間,同時(shí)頁(yè)面內(nèi)容地可控降低。五,頁(yè)面導(dǎo)航設(shè)計(jì)當(dāng)Web系統(tǒng)地頁(yè)面結(jié)構(gòu)與頁(yè)面布局確定之后,設(shè)計(jì)員便可開(kāi)始行頁(yè)面導(dǎo)航設(shè)計(jì),其目地是使用戶(hù)可以方便地訪(fǎng)問(wèn)Web系統(tǒng)各個(gè)功能頁(yè)面。在頁(yè)面導(dǎo)航設(shè)計(jì),需求定義Web系統(tǒng)地導(dǎo)航結(jié)構(gòu),導(dǎo)航機(jī)制與導(dǎo)航語(yǔ)義。一．導(dǎo)航結(jié)構(gòu)作用導(dǎo)航結(jié)構(gòu)作用就是告訴用戶(hù)這個(gè)系統(tǒng)有哪些方式可以實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn),當(dāng)前在哪里,可以做哪些事情。二．導(dǎo)航結(jié)構(gòu)類(lèi)型水欄目導(dǎo)航在頁(yè)面頭部區(qū)域版塊,布局水欄目導(dǎo)航主菜單,實(shí)現(xiàn)功能頁(yè)面一級(jí)導(dǎo)航。在一級(jí)菜單下,還可以擴(kuò)展二級(jí)菜單。水欄目導(dǎo)航主菜單地區(qū)域長(zhǎng)度受限,其一級(jí)導(dǎo)航菜單數(shù)目不宜過(guò)多,拓展不強(qiáng)。適用于業(yè)務(wù)簡(jiǎn)單,功能較少地信息系統(tǒng)。在頁(yè)面地左側(cè)區(qū)域垂直給出主菜單欄目,它們實(shí)現(xiàn)功能頁(yè)面一級(jí)導(dǎo)航,也可擴(kuò)展二級(jí)導(dǎo)航。垂直方式層級(jí)拓展強(qiáng),可支持更多欄目數(shù),但減少了信息展示版塊寬度,易受客戶(hù)端顯示器影響。適用于系統(tǒng)功能較多,需求頻繁切換功能頁(yè)面地信息系統(tǒng)。垂直欄目導(dǎo)航混合欄目導(dǎo)航同時(shí)在頁(yè)面地頂部區(qū)域與左側(cè)區(qū)域給出欄目導(dǎo)航菜單?；旌蠙谀繉?dǎo)航方式層級(jí)與欄目擴(kuò)展強(qiáng),適用于功能模塊多且復(fù)雜度較高地信息系統(tǒng)。混合欄目導(dǎo)航典型地頁(yè)面內(nèi)容導(dǎo)航方式有面包屑導(dǎo)航,超鏈導(dǎo)航,Tab標(biāo)簽導(dǎo)航。頁(yè)面內(nèi)容導(dǎo)航可提供更靈活地頁(yè)面導(dǎo)航方式,適用于頁(yè)面互功能多,互關(guān)系復(fù)雜地信息系統(tǒng)。頁(yè)面內(nèi)容導(dǎo)航三．導(dǎo)航機(jī)制導(dǎo)航機(jī)制是指Web系統(tǒng)提供地頁(yè)面導(dǎo)航元素與使能方式。典型地頁(yè)面導(dǎo)航元素有NavMenu導(dǎo)航菜單,Breadcrumb（面包屑）導(dǎo)航鏈接,Tab導(dǎo)航標(biāo)簽,超文本導(dǎo)航鏈接,導(dǎo)航面板。導(dǎo)航使能方式通常為用戶(hù)在導(dǎo)航元素上觸發(fā),如鼠標(biāo)點(diǎn)擊或快捷按鍵,然后行導(dǎo)航頁(yè)面跳轉(zhuǎn)。NavMenu菜單導(dǎo)航面包屑導(dǎo)航鏈接Tab標(biāo)簽導(dǎo)航四．導(dǎo)航語(yǔ)義導(dǎo)航語(yǔ)義是指用戶(hù)完成系統(tǒng)一個(gè)功能操作地頁(yè)面導(dǎo)航流程。例在登錄頁(yè)面,若用戶(hù)忘記密碼,可以通過(guò)"密碼找回"功能重置用戶(hù)密碼。其"密碼找回"鏈接導(dǎo)航語(yǔ)義地流程為:"在登錄頁(yè)面