基于個性化的網(wǎng)頁布局

基于個性化的網(wǎng)頁布局

隨著網(wǎng)絡(luò)的發(fā)展，網(wǎng)絡(luò)在人們的學(xué)習(xí)和生活中發(fā)揮著越來越重要的作用，成為人們獲取信息的重要平臺。但是大多數(shù)網(wǎng)站采用單一的網(wǎng)頁布局形式,缺乏用戶個性化的設(shè)置,忽視用戶多樣性的特點。目前,網(wǎng)頁的布局形式都是在設(shè)計階段固定下來,只有網(wǎng)站的設(shè)計維護人員才可以修改和變動,網(wǎng)站的瀏覽者只能接受和習(xí)慣這種一成不變的網(wǎng)頁構(gòu)成形式,缺乏個性化的符合個人習(xí)慣的布局環(huán)境。對于網(wǎng)頁設(shè)計人員來說,網(wǎng)頁的內(nèi)容決定了網(wǎng)頁的布局形式,網(wǎng)頁所采用的布局形式是網(wǎng)頁內(nèi)容的最佳呈現(xiàn)方式,隨意改動布局結(jié)構(gòu)可能會影響網(wǎng)頁的瀏覽效果。這種擔(dān)心不無道理。雖然有些網(wǎng)站也做了用戶個性化定制的嘗試,但僅限于某些版塊的顯示與隱藏。在網(wǎng)絡(luò)技術(shù)和計算機技術(shù)不斷發(fā)展的今天,尤其是網(wǎng)絡(luò)用戶的多樣化需求的增加,這種單一的方式帶來越來越多的弊端。如果忽視用戶的這些需求,長此以往,千篇一律的網(wǎng)頁布局會使用戶慢慢地產(chǎn)生審美疲勞,從而失去訪問的興趣。如何能夠讓用戶按照個人習(xí)慣設(shè)置個性化的網(wǎng)頁布局,對于網(wǎng)站的進一步發(fā)展有著重要的現(xiàn)實意義。1非均質(zhì)配置存在的缺點1.1顯示設(shè)備的配置當(dāng)前網(wǎng)頁布局的整體設(shè)計都是按照現(xiàn)有顯示設(shè)備的最低配置來進行的,設(shè)計者需要滿足大多數(shù)訪問者的最低顯示需求?，F(xiàn)在顯示設(shè)備的最低配置是17英寸顯示器,橫向分辨率標(biāo)準(zhǔn)為1024,因此,絕大多數(shù)的網(wǎng)頁都是按照1024這個寬度來進行設(shè)計和規(guī)劃。但是,目前主流的顯示設(shè)備多為19英寸以上,甚至24英寸,且大多為寬屏顯示器。以19英寸寬屏顯示器為例,標(biāo)準(zhǔn)顯示分辨率為1440,按照1024分辨率來設(shè)計網(wǎng)頁布局,大約有30%的寬度被浪費了。1.2確定顯示順序和顯示位置網(wǎng)頁各版塊在網(wǎng)頁上的位置在設(shè)計時順序固定,設(shè)計者是根據(jù)大多數(shù)人關(guān)注的重點而設(shè)計的顯示順序和顯示位置,而不同的瀏覽者的關(guān)注重點是有差異的,瀏覽者更愿意把他們關(guān)注的重點和興趣點放到網(wǎng)頁的醒目位置上和排列在最前面。1.3內(nèi)容顯示邏輯不連續(xù)性網(wǎng)頁內(nèi)容的顯示區(qū)域,特別是瀏覽內(nèi)容的顯示局限在一個固定大小的區(qū)域內(nèi),導(dǎo)致內(nèi)容顯示分屏或分頁顯示,使瀏覽內(nèi)容邏輯上不夠完整,需要反復(fù)翻頁或滾屏觀看,從而造成思維不連續(xù)性。瀏覽者更希望可以通過調(diào)整顯示區(qū)域的大小從而在一屏上看到完整或相對完整的內(nèi)容,保持邏輯上的連續(xù)性。2網(wǎng)頁個性化布局所謂個性化布局就是針對用戶個體的需求而進行的布局設(shè)計。由于網(wǎng)站在設(shè)計時就已經(jīng)針對大多數(shù)用戶進行了布局設(shè)計,即默認(rèn)的網(wǎng)頁布局,本文所指的網(wǎng)頁個性化布局就是在默認(rèn)的網(wǎng)頁布局基礎(chǔ)上,用戶可以根據(jù)需要而自行調(diào)整。因此,只有登錄用戶才能進行個性化設(shè)置。網(wǎng)站將每一個注冊用戶的個性化布局參數(shù)保存在數(shù)據(jù)庫中,每次用戶登錄,系統(tǒng)從數(shù)據(jù)庫中讀取用戶瀏覽環(huán)境的布局參數(shù),并按照這些參數(shù)顯示個性化的瀏覽環(huán)境。登錄用戶可以通過個性化布局設(shè)計器,調(diào)整網(wǎng)頁布局的位置和形態(tài),并把調(diào)整后的個性化參數(shù)存儲到用戶數(shù)據(jù)庫中,從而實現(xiàn)個性化布局。3層疊樣式表控制目前網(wǎng)頁的設(shè)計方法主要采用內(nèi)容與形式分離的方法,即DIV+CSS,網(wǎng)頁的內(nèi)容主要放置在DIV容器中,通過CSS(層疊樣式表)控制DIV的顯示方式。因此,個性化布局設(shè)計主要是對CSS樣式表的控制,通過修改CSS樣式表的相關(guān)參數(shù)來更改網(wǎng)頁的布局。將網(wǎng)頁布局中可以調(diào)整的DIV容器的名稱及相關(guān)參數(shù)保存在數(shù)據(jù)庫中,每次修改都根據(jù)調(diào)整后的參數(shù)重新生成CSS樣式表文件和網(wǎng)頁文件。下面就個性化布局的設(shè)計和實現(xiàn)方法進行介紹。3.1用戶表添加personl字段作為個性化設(shè)置網(wǎng)頁布局的設(shè)置主要涉及DIV容器的相關(guān)屬性的設(shè)置,包括寬度、高度、顯示方式等。因此,需要設(shè)置相關(guān)的數(shù)據(jù)表保存相關(guān)參數(shù)。User(ID,Name,…,Personal),在用戶表中添加Personal字段,用來判斷用戶是否進行過個性化布局設(shè)置。如果為0,表示沒有進行個性化設(shè)置,直接調(diào)用默認(rèn)網(wǎng)頁即可;否則,讀取DivPara表中的個性化參數(shù),生成個性化布局頁面。3.2影片錄像結(jié)合白砂糖的圖像是主體部分的結(jié)合實現(xiàn)Web交互的方法很多,本文采用Flash作為個性化布局的設(shè)計工具。Flash作為一種可視化的交互設(shè)計工具,既可以設(shè)計版面布局,又可以實現(xiàn)對頁面元素進行交互控制。1)布局界面設(shè)計。根據(jù)網(wǎng)頁的DIV布局,利用Flash的繪圖功能設(shè)計可以定制的用戶界面,并標(biāo)注可以進行個性化設(shè)置的部分,如圖1所示。網(wǎng)頁的頁眉(包括用戶登錄區(qū)、標(biāo)題和導(dǎo)航)和頁腳(包括快速導(dǎo)航和版權(quán))部分不在調(diào)整的范圍之內(nèi)。用戶可以調(diào)整的主要限于主體部分,由于DIV容器的嵌套結(jié)構(gòu)導(dǎo)致DIV層次不同,相同層次的容器用相同的顏色標(biāo)識,只有同層的DIV才能進行位置的調(diào)整。DIV高度的調(diào)整任意,DIV寬度的調(diào)整受上層DIV容器寬度的限制,最外層DIV的寬度受顯示設(shè)備的寬度限制。2)交互設(shè)計。利用Flash中影片剪輯元件可操作性強的特點,將可以定制的部分設(shè)計成影片剪輯元件,從而實現(xiàn)鼠標(biāo)交互,尤其是拖放操作的控制。影片剪輯模型設(shè)計如圖2所示。(1)寬度、高度感應(yīng)區(qū):主要用于感知鼠標(biāo)指針的位置是否為影片剪輯邊界,當(dāng)鼠標(biāo)指針進入感應(yīng)區(qū),鼠標(biāo)指針改為縮放樣式,可以拖動邊界改變區(qū)域大小(注:只可以大于默認(rèn)寬度和高度)。當(dāng)網(wǎng)頁的整體寬度改變時,內(nèi)部各部分的寬度按比例進行調(diào)整;當(dāng)內(nèi)部容器的寬度和高度改變時,相鄰位置的容器自動進行匹配調(diào)整。(2)位置感應(yīng)區(qū):位于區(qū)域下部和右部,當(dāng)拖動的影片剪輯的注冊點與感應(yīng)區(qū)重合時,表示2個區(qū)域的位置需要互換或調(diào)整;當(dāng)停止拖動操作時,相關(guān)的區(qū)域進行調(diào)整。(3)顯示隱藏按鈕:控制本區(qū)域顯示還是隱藏,隱藏狀態(tài)下,影片剪輯折疊顯示。3)導(dǎo)入和保存布局參數(shù)。調(diào)整結(jié)束后,利用Flash與ASP的接口通過ASP,將修改后的布局參數(shù)保存到數(shù)據(jù)庫的DivPara表中,以便下次登錄時顯示個性化布局。同樣,在設(shè)置個性化布局時,通過ASP讀取數(shù)據(jù)庫的DivPara表中的布局參數(shù),將參數(shù)傳遞給Flash生成個性化設(shè)置界面。個性化布局參數(shù)的導(dǎo)入和保存流程如圖3所示。3.3網(wǎng)頁布局界面的實現(xiàn)用戶登錄后,系統(tǒng)首先驗證用戶是否進行過個性化界面的設(shè)置,如果沒有,就直接打開系統(tǒng)默認(rèn)的布局頁面;否則從數(shù)據(jù)庫中讀取用戶的個性化參數(shù)表中的相關(guān)數(shù)據(jù),通過個性化頁面生成器生成登錄用戶的CSS文件,然后再生成相應(yīng)的網(wǎng)頁文件,傳遞給用戶,從而呈現(xiàn)用戶定制的網(wǎng)頁布局界面。個性化布局頁面實現(xiàn)的流程圖如圖4所示。實現(xiàn)個性化布局的前提是網(wǎng)頁采用DIV+CSS設(shè)計方式,各個部分要盡可能地采用獨立的DIV容器設(shè)計,保持各部分設(shè)置的最大靈活性和操作的簡易性。如果DIV容器嵌套過多,將增加檢測的難度和用戶設(shè)置的復(fù)雜性,從而消耗更多的系統(tǒng)資源而導(dǎo)致系統(tǒng)響應(yīng)速度降低,用戶興趣下降。4探索用戶體驗網(wǎng)站隨著計算機技術(shù)的發(fā)展和網(wǎng)站訪問者的多樣化,單一的網(wǎng)頁布局形式已經(jīng)不能滿足用戶需求,個性化的網(wǎng)頁布局形式必將成為網(wǎng)站發(fā)展的方向。只有通過網(wǎng)頁交互方式與用戶充分的溝通,了解用戶的特點和多樣化需求,進而挖掘和發(fā)現(xiàn)用戶潛在的需求,才能設(shè)計出用戶滿意的網(wǎng)站。DivPara(ID,DIVname,Width,Height,PDIVid,Order,Show),主要用于保存調(diào)整后的布局參數(shù)。Width和Height分別為DIV容器的寬度和高度;PDIVid為父DIV容器的