面向?qū)ο笤O計-面向?qū)ο笤O計系統(tǒng)用戶界面設計-Web系統(tǒng)GUI設計

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