楊亦藝

（廈門理工學(xué)院 設(shè)計(jì)藝術(shù)系，福建 廈門 361024）

對(duì)人性化網(wǎng)站設(shè)計(jì)的探討

楊亦藝

（廈門理工學(xué)院 設(shè)計(jì)藝術(shù)系，福建 廈門 361024）

網(wǎng)站是傳播網(wǎng)絡(luò)信息的載體，越來越多的機(jī)構(gòu)在網(wǎng)絡(luò)建立網(wǎng)站，網(wǎng)站設(shè)計(jì)成為設(shè)計(jì)師施展藝術(shù)才能的另一個(gè)舞臺(tái)。圍繞人性化特點(diǎn)結(jié)合網(wǎng)站設(shè)計(jì)的用戶群與界面等因素的分析，從人性化角度來探討網(wǎng)站設(shè)計(jì)應(yīng)遵循的原則，創(chuàng)造出符合人們需求的人性化網(wǎng)站，這對(duì)設(shè)計(jì)師從事網(wǎng)站設(shè)計(jì)將受益匪淺。

人性化；界面設(shè)計(jì)；網(wǎng)站設(shè)計(jì)

信息技術(shù)高速發(fā)展，因特網(wǎng)在人們的生活中已占據(jù)了很重要的地位，它成為人們獲取信息和交流信息的主要平臺(tái)。網(wǎng)站設(shè)計(jì)也因此成為新興的設(shè)計(jì)領(lǐng)域備受關(guān)注，而界面設(shè)計(jì)是網(wǎng)站設(shè)計(jì)中最重要的部分，它展現(xiàn)網(wǎng)站所要傳達(dá)的全部信息內(nèi)容。但由于很多設(shè)計(jì)師沒有意識(shí)到網(wǎng)頁設(shè)計(jì)師既是平面設(shè)計(jì)師又不同于平面設(shè)計(jì)師，把設(shè)計(jì)重點(diǎn)放在網(wǎng)站的圖像、色彩及文本設(shè)計(jì)上，卻忽略人與電腦之間的和諧關(guān)系，沒能很好地把人性化與網(wǎng)頁界面有機(jī)的結(jié)合起來。所以，如何構(gòu)建人性化網(wǎng)站，將是本文所研究的內(nèi)容。

一、人性化網(wǎng)站設(shè)計(jì)的概念

（一）人性化定義

從20世紀(jì)80年代開始，“人性化”這一詞語頻繁的出現(xiàn)各類學(xué)術(shù)理念當(dāng)中。所謂人性化就是以滿足人的需求，實(shí)現(xiàn)人的價(jià)值，追求人的發(fā)展為價(jià)值取向，以人文關(guān)懷的角度來開展的一種柔性活動(dòng)原則。設(shè)計(jì)是為人服務(wù)的，人性化設(shè)計(jì)是以人為中心和尺度，滿足人的社會(huì)需要與情感需要。[1]現(xiàn)代設(shè)計(jì)是科學(xué)與藝術(shù)、技術(shù)與人性的結(jié)合，科學(xué)技術(shù)給設(shè)計(jì)以嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)和良好的功能，而藝術(shù)和人性使設(shè)計(jì)充滿情趣和活力，成為人與設(shè)計(jì)親近和諧的紐帶。

（二）人性化網(wǎng)站設(shè)計(jì)

墨子有言：“衣必常暖，而后求麗，居必常安，而后求樂”。[2]隨著大眾生活水平的整體提高，人們對(duì)設(shè)計(jì)物的基本功能感到滿足后，愈發(fā)希望設(shè)計(jì)物能夠帶來方便舒適的使用功能，設(shè)計(jì)就是這樣讓物質(zhì)從無到有、從粗到精，不斷滿足人們各方面的需要。因此人性化設(shè)計(jì)趨勢的出現(xiàn)，是人類深刻的內(nèi)在需求。現(xiàn)代設(shè)計(jì)除了滿足最基本的實(shí)用、適用要求之外，還要具備更多情感的、文化的、審美的、精神的含義，每件設(shè)計(jì)作品都滲透著人的氣息。網(wǎng)站設(shè)計(jì)也是以“人”為主體，為廣義上的人服務(wù)的。網(wǎng)站設(shè)計(jì)作為科學(xué)與藝術(shù)的“產(chǎn)兒”，具備理性化和人性化的兩面，以此同時(shí)它也具備人類精神的承載與表達(dá)功能的載體存在于人類的生活當(dāng)中。

二、人性化網(wǎng)站設(shè)計(jì)分析

色彩、圖形、文字是構(gòu)成網(wǎng)站傳達(dá)信息不可或缺的手段，它們是展示網(wǎng)站內(nèi)容的重要組成部分。網(wǎng)站的第一印象和整體風(fēng)格對(duì)用戶的吸引是很重要的。只有多為用戶著想，認(rèn)真地以用戶的切身體會(huì)出發(fā)去完成網(wǎng)站的整體設(shè)計(jì)，才能設(shè)計(jì)出符合人性化需求的網(wǎng)站。當(dāng)然，在設(shè)計(jì)過程中需要考慮的因素很多，用戶群因素和和界面因素是首要考慮的兩個(gè)方面。

（一）人性化網(wǎng)站設(shè)計(jì)的因素分析

我們對(duì)網(wǎng)站的設(shè)計(jì)都會(huì)把用戶因素充分的考慮到網(wǎng)站設(shè)計(jì)領(lǐng)域中，這樣就會(huì)更好的設(shè)計(jì)出符合用戶需要的界面，可以使網(wǎng)站設(shè)計(jì)變得更容易。

首先，是用戶群的方面因素?，F(xiàn)在網(wǎng)絡(luò)已經(jīng)融入到人們的生活當(dāng)中，所以，我們每一個(gè)人都將是網(wǎng)絡(luò)發(fā)展中的現(xiàn)有用戶或潛在用戶。現(xiàn)代的人們幾乎都喜歡網(wǎng)絡(luò)中的虛擬生活，在那樣的虛擬空間里，我們可以找到輕松、舒適的工作、無憂無慮的生活和娛樂的方式是在不久的將來我們每個(gè)人可以期待。因此，網(wǎng)站設(shè)計(jì)揉合人類的期待，有著人類的感情，我們的網(wǎng)絡(luò)生活會(huì)變得豐富溫暖，富有樂趣。但是，由于人的因素是不確定、多變的、要想使每一個(gè)細(xì)節(jié)都達(dá)到人們想象的那樣，是有難度的，所以，網(wǎng)站設(shè)計(jì)必須從“以人為本”的角度出發(fā)，逐步實(shí)現(xiàn)網(wǎng)站設(shè)計(jì)人性化的發(fā)展要求。

其次，是網(wǎng)站界面方面的因素。每一個(gè)網(wǎng)站的界面都像個(gè)矩形框，在矩形框內(nèi)按一定的類別、功能將其劃分幾個(gè)區(qū)域，，這些區(qū)域就是網(wǎng)站信息構(gòu)架的全部內(nèi)容，因此網(wǎng)站界面布局的美觀與實(shí)用是設(shè)計(jì)師所要考慮到問題。現(xiàn)在流行的web站點(diǎn)布局中就有好多種布局類型。如“T”結(jié)構(gòu)布局、“口”型布局、“三”型布局、對(duì)稱對(duì)比布局、POP布局等等。例如一個(gè)人性化“數(shù)字圖書館”的網(wǎng)站布局，它以“T”結(jié)構(gòu)來布局展開設(shè)計(jì)。所謂的“T”結(jié)構(gòu)， 就是指頁面頂部，它一般顯示網(wǎng)頁的主題名稱，可以是靜態(tài)的或動(dòng)態(tài)的廣告條(Banner)，下方左面為主菜單，右邊顯示內(nèi)容的布局，整體效果類似的英文字母“T”，所以我們把它稱為一個(gè)“T”型布局。 “T”結(jié)構(gòu)的網(wǎng)站布局在結(jié)構(gòu)上是很清晰的，雖然它也是矩形之間的嵌套，但可以利用色彩上的搭配彌補(bǔ)這一缺陷，就會(huì)給人一種新穎美觀的感覺。在其功能上又有明確的劃分，信息的發(fā)布和各個(gè)區(qū)域的搜索、瀏覽、查詢以及文件的傳輸?shù)鹊?，全部都是設(shè)計(jì)師用計(jì)算機(jī)技術(shù)來處理各項(xiàng)工作，這樣就使用戶很方便的可以查到自己想了解的資訊和信息。[3]所以，盡管一個(gè)網(wǎng)頁界面設(shè)計(jì)，除了用戶復(fù)雜的因素需要考慮外，還要解決頁面元素、導(dǎo)航因素等諸多的方面問題，這樣才能很好的展現(xiàn)網(wǎng)頁界面的風(fēng)格。

（二）人性化網(wǎng)站的設(shè)計(jì)

人性化對(duì)網(wǎng)站的基本要求是一個(gè)自由舒適的使用。由于人性化設(shè)計(jì)是針對(duì)大多數(shù)的用戶，因此需要考慮網(wǎng)站的每一個(gè)設(shè)計(jì)細(xì)節(jié)。如屏幕尺寸的規(guī)格，普遍的瀏覽特點(diǎn)、閱讀的習(xí)慣，信息框架遞進(jìn)層次的合理性等等。

首先，界面設(shè)計(jì)要符合訪問者的視覺需求。網(wǎng)頁界面設(shè)計(jì)，是在有限的屏幕空間上將視聽多種元素有機(jī)地排列組合，并將理性思維個(gè)性化地表現(xiàn)出來。

在設(shè)計(jì)之前我們必須根據(jù)表現(xiàn)題材和前期創(chuàng)意策劃的要求，首先確定出網(wǎng)站界面的版式，它會(huì)決定各個(gè)元素的排布方式和最終的表現(xiàn)風(fēng)格。網(wǎng)頁的表現(xiàn)形式多種多樣，從版式編排上可分為水平式、垂直式、交叉式、傾斜式、圓弧式、背景式、中心式、棋盤式、放射式、散點(diǎn)式、旋轉(zhuǎn)式、圖形式，文字式等多種形式。[4]每種形式都有自己的特點(diǎn)，如水平式構(gòu)圖在平面設(shè)計(jì)中也是最常用的構(gòu)圖方式，也是目前國際上比較流行的網(wǎng)頁版式，折中構(gòu)圖給人的感覺比較穩(wěn)重，開闊、舒展、自由，適合各種不同類型的站點(diǎn)；中心式構(gòu)圖是主題部分圖形置于頁面中心，進(jìn)而吸引瀏覽者的視線以起到突出頁面主題的作用；頁面背景和其它部分比較簡潔、單一；并置式構(gòu)圖是兩個(gè)以上的元素在頁面上不分主次地并列放置，從而形成一種適度的節(jié)奏感。根據(jù)不同的排列形式，畫面或整齊嚴(yán)謹(jǐn)，或輕松而有變化。這類構(gòu)圖給人的感覺清新嚴(yán)謹(jǐn)，有規(guī)律性，整體感較強(qiáng)；棋盤式構(gòu)圖是通過水平和垂直分割，把畫面分成多個(gè)大小相近的區(qū)域，象棋盤的格子，分別放置圖片和文字內(nèi)容。這種構(gòu)圖形式活潑、隨意而不失規(guī)范化；頁面感覺豐富，具有趣味等。設(shè)計(jì)者可根據(jù)網(wǎng)站整體風(fēng)格進(jìn)行網(wǎng)頁版式的設(shè)計(jì)。

我們觀察世界時(shí)，受到視域的限制，只能看到眼前的部分，所見之物就好像鑲嵌在框子里一樣。同樣，在網(wǎng)頁設(shè)計(jì)中頁面也被限制在顯示器這樣的框子內(nèi)。因此設(shè)計(jì)師創(chuàng)作空間受到了限制，在確定適合于網(wǎng)站版式風(fēng)格的同時(shí)也要遵從瀏覽器的屏幕空間尺寸,必須在有限的空間內(nèi)進(jìn)行視聽多種元素的編排。

網(wǎng)頁的正常狀態(tài)下，由于網(wǎng)絡(luò)瀏覽器的工具條、狀態(tài)欄及滾動(dòng)條占用屏幕的一部分空間，所以網(wǎng)絡(luò)頁面實(shí)際的空間要小于屏幕。目前根據(jù)市場銷量的調(diào)查，17寸的計(jì)算機(jī)所占的比例較大，它的普及性決定網(wǎng)頁界面設(shè)計(jì)的尺寸。現(xiàn)在的網(wǎng)頁界面設(shè)計(jì)的通用尺寸就以1024*768（像素）的分辨率為基準(zhǔn)，頁面寬度為900～1000（像素）之間，設(shè)計(jì)者可根據(jù)以上提供的尺寸范圍內(nèi)進(jìn)行頁面的編排。

網(wǎng)頁頁面一般都是垂直的，長度可以變化，可以利用滾動(dòng)條進(jìn)行瀏覽。網(wǎng)頁的高度以屏為單位，第一屏是指一個(gè)頁面在不滾動(dòng)的情況下，屏幕能夠完整的呈現(xiàn)的部分。第一屏是網(wǎng)頁展示的黃金位置，一般放置網(wǎng)站最主要的信息內(nèi)容。網(wǎng)頁設(shè)計(jì)高度從一屏到三屏不等，最好不要超過三屏，較長的頁面會(huì)給訪問者造成閱讀和查找信息的困難。所以在設(shè)計(jì)中要了解屏的具體尺寸，一般來講， 1024*768（像素）的分辨率高度610（像素）為一屏。以一屏為尺度的設(shè)計(jì)能在有效的范圍內(nèi)展現(xiàn)所要傳達(dá)的信息，同時(shí)訪問者在瀏覽頁面能迅速的找到自己感興趣的信息。

為了方便訪問者瀏覽，網(wǎng)頁都應(yīng)在瀏覽器寬度范圍內(nèi)完整的橫向顯示。不要因?yàn)闉g覽器的窗口可以通過水平與垂直方向的滾動(dòng)，在設(shè)計(jì)中只考慮畫面的視覺效果，而無限制的增加頁面的尺寸，訪問者閱讀時(shí)鼠標(biāo)不停地滾動(dòng)水平方向和垂直方向，會(huì)造成視覺的疲勞和厭倦感，甚至造成放棄瀏覽本網(wǎng)站的不良后果。設(shè)計(jì)者必須要小心地確定頁面的尺寸，特別是避免橫向出現(xiàn)滾動(dòng)條，才能給訪問者帶來視覺的舒適感。

其次，導(dǎo)航結(jié)構(gòu)要符合訪問者的瀏覽需求。從一本書的目錄上我們可以直接感受到它的內(nèi)容構(gòu)架，無論閱讀到哪里，都能輕而易舉的知道看了多少，還有多少?zèng)]看。而電腦屏幕是平面的，我們無法直觀地了解網(wǎng)站信息的立體結(jié)構(gòu)，很容易在網(wǎng)絡(luò)中“迷失”方向。導(dǎo)航系統(tǒng)是網(wǎng)站的指示系統(tǒng)，它具有明確的導(dǎo)向性。導(dǎo)航系統(tǒng)的有效設(shè)定可以讓訪問者在信息“迷宮”中快速達(dá)到目的地。也就是說導(dǎo)航系統(tǒng)是整個(gè)網(wǎng)站的結(jié)構(gòu)，訪問者主要是通過導(dǎo)航系統(tǒng)的設(shè)置來了解整個(gè)網(wǎng)站的構(gòu)成。那么人性化設(shè)計(jì)就取決于導(dǎo)航系統(tǒng)的合理規(guī)劃。如何使訪問者更快地把握網(wǎng)站的立體結(jié)構(gòu)，如何使訪問者在網(wǎng)絡(luò)上穿梭自如，這是設(shè)計(jì)者著重考慮的問題，也是體現(xiàn)人性化設(shè)計(jì)的關(guān)鍵。因此在設(shè)計(jì)導(dǎo)航系統(tǒng)時(shí)設(shè)計(jì)者要時(shí)刻以訪問者的體驗(yàn)來周全的考慮設(shè)置導(dǎo)航結(jié)構(gòu)。

一個(gè)網(wǎng)站一般包含很多的內(nèi)容，它通常也包含不止一個(gè)層次的結(jié)構(gòu)。設(shè)置導(dǎo)航系統(tǒng)就是對(duì)這些內(nèi)容進(jìn)行分類。導(dǎo)航系統(tǒng)設(shè)計(jì)關(guān)鍵不在于一次性地給訪問者所有的信息，而在于有合理的信息導(dǎo)向。導(dǎo)航又細(xì)分為主導(dǎo)航、子導(dǎo)航，子導(dǎo)航還有再下一級(jí)頁面的導(dǎo)航。而這些結(jié)構(gòu)需要設(shè)計(jì)者對(duì)網(wǎng)站信息合理的整理確定的。以筆者設(shè)計(jì)的設(shè)計(jì)藝術(shù)系網(wǎng)站為例來進(jìn)一步說明。根據(jù)對(duì)藝術(shù)系現(xiàn)有資料的搜集與整理，確定系網(wǎng)站的主導(dǎo)航由“系部概況”、“教育科研”、“實(shí)驗(yàn)中心”、“黨群工作”、“學(xué)生園地”、“作品展示”和“聯(lián)系我們”這七個(gè)部分組成。這些導(dǎo)航是整個(gè)藝術(shù)系部網(wǎng)站信息的主干結(jié)構(gòu)，是最能展現(xiàn)系網(wǎng)站主題信息目錄的集合。通過它訪問者可以了解藝術(shù)系網(wǎng)站表現(xiàn)的主旨。那么每個(gè)主導(dǎo)航又因各自的信息量分解成若干個(gè)部分，我們稱之為“子導(dǎo)航”。子導(dǎo)航是主導(dǎo)航的分支。如“系部概況”又細(xì)分為“系部簡介”、“系部領(lǐng)導(dǎo)”、“師資隊(duì)伍”、“系VI形象”等。每個(gè)子導(dǎo)航又可分下一級(jí)頁面導(dǎo)航。例如“師資隊(duì)伍”又分了“服裝設(shè)計(jì)與工程”和“設(shè)計(jì)藝術(shù)計(jì)”等不同專業(yè)的師資隊(duì)伍。它是子導(dǎo)航的分支。網(wǎng)站的導(dǎo)航系統(tǒng)就是通過這種階梯式的導(dǎo)航系統(tǒng)來實(shí)現(xiàn)。合理的導(dǎo)航系統(tǒng)，是訪問者了解網(wǎng)站內(nèi)容的得力助手，方便訪問者自由穿梭于網(wǎng)站之間。

確定好導(dǎo)航的結(jié)構(gòu)，那如何設(shè)計(jì)展現(xiàn)這些主導(dǎo)航，子導(dǎo)航和下一級(jí)頁面的關(guān)系？目前有兩種導(dǎo)航系統(tǒng)的展示方式：展開式導(dǎo)航和隱藏式導(dǎo)航。不管采用何種方式導(dǎo)航，主導(dǎo)航始終貫穿于一個(gè)網(wǎng)站的每個(gè)頁面上。主導(dǎo)航中的每一部分都包含子導(dǎo)航的內(nèi)容，但子導(dǎo)航不需要網(wǎng)站的每一個(gè)頁面上，只需要在相應(yīng)的頁面上呈現(xiàn)相應(yīng)的信息即可。

導(dǎo)航系統(tǒng)在整個(gè)網(wǎng)站設(shè)計(jì)中既要注重視覺審美的需求也要符合人性化的功能需求，以達(dá)到瀏覽的便捷性。導(dǎo)航系統(tǒng)的設(shè)計(jì)應(yīng)清晰易見，讓訪問者輕易識(shí)別哪里是導(dǎo)航系統(tǒng)，并通過導(dǎo)航系統(tǒng)進(jìn)入所需要的信息頁面，并從其它信息頁面進(jìn)入任意的頁面當(dāng)中或返回首頁；導(dǎo)航系統(tǒng)的設(shè)計(jì)還應(yīng)是易操作的，當(dāng)訪問者由主導(dǎo)航進(jìn)入到子頁面時(shí)，導(dǎo)航系統(tǒng)可以通過顏色肌理或大小的變化來指示訪問者當(dāng)前所處的位置，使訪問者避免重復(fù)進(jìn)入相同的頁面；導(dǎo)航系統(tǒng)還必須保持視覺元素和設(shè)計(jì)風(fēng)格的一致性，以方便訪問者在不同頁面中合理利用導(dǎo)航。

以上是筆者在設(shè)計(jì)網(wǎng)站中的經(jīng)驗(yàn)與體會(huì)，而這兩個(gè)方面是網(wǎng)站設(shè)計(jì)的重中之重，以它為設(shè)計(jì)原則就可以盡量避免不必要的麻煩及修改的次數(shù)，最大程度的體現(xiàn)人性化的網(wǎng)站設(shè)計(jì)。當(dāng)然除了這兩個(gè)方面，其他方面的設(shè)計(jì)也要以人性化設(shè)計(jì)為出發(fā)點(diǎn)，像網(wǎng)頁頁面中文本、圖片、視頻、動(dòng)畫產(chǎn)品，聲音等的設(shè)計(jì)，控制按鈕(包括數(shù)字、外形、放置位置、大小等)，字體大小、圖表、動(dòng)畫和視頻大小和位置等也要按著人性化設(shè)計(jì)來考慮，甚至導(dǎo)航的形狀、大小、整體的導(dǎo)航位置等也要充分考慮到人性化，這些部分都要在符合使用網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)的條件下，利用字、形、色等元素的對(duì)比關(guān)系創(chuàng)造出迷人而饒有趣味的網(wǎng)絡(luò)空間。因此相對(duì)平面設(shè)計(jì)而言網(wǎng)站設(shè)計(jì)的是個(gè)“大工程”，每個(gè)設(shè)計(jì)環(huán)節(jié)都包含設(shè)計(jì)師對(duì)細(xì)節(jié)的精益求精和人性化的思考。

結(jié)論

網(wǎng)絡(luò)給設(shè)計(jì)師展現(xiàn)了一個(gè)廣闊的舞臺(tái)，使其成為網(wǎng)站的締造者。網(wǎng)頁設(shè)計(jì)不僅涉及色彩構(gòu)成、平面構(gòu)成、版式設(shè)計(jì)、CI等方面的知識(shí)，還涉及到Java、JavaScript、CSS、HTML等編程語言方面的知識(shí)。在高科技迅猛發(fā)展的時(shí)代，知識(shí)更換是對(duì)設(shè)計(jì)師的考驗(yàn)，它也改變了設(shè)計(jì)師的工作方式與表現(xiàn)手法。如何反映網(wǎng)絡(luò)時(shí)代全新的傳媒藝術(shù)語匯；如何創(chuàng)造出符合人們需求的網(wǎng)絡(luò)設(shè)計(jì)符號(hào)；這些都值得設(shè)計(jì)師去思考的問題。任何設(shè)計(jì)都為人所用，特別是網(wǎng)站設(shè)計(jì)的藝術(shù)表現(xiàn)，它既是信息傳播的載體，又是美感的傳遞使者，人性化便是一把驗(yàn)證的標(biāo)尺。

[1] （美）施奈德曼，普萊薩特.用戶界面設(shè)計(jì)——有效的人機(jī)交互策略(第五版)[M] .張國印譯.北京：電子工業(yè)出版社，2011:98-102.

[2] 孫詒讓.墨子閑沽（卷八）[M].北京：中華書局，2001：47.

[3] 崔紅娟，劉勛人.平等服務(wù)與個(gè)性化信息服務(wù)[J].中南林業(yè)科技大學(xué)學(xué)報(bào)，2012，6(1)： 127-128.

[4] 馬明明.互動(dòng)出版：數(shù)字出版時(shí)代的新潮流[J].中南林業(yè)科技大學(xué)學(xué)報(bào)，2011，5(5)：153-154.

The Discussion Based on Humanized Web Design

YANG Yi-yi

(Department of Design Art, Xiamen University of Technology, Xiameng 361024, Fujian, China)

Website is a carrier communicating network information. Along with more and more organizations building websites on the Internet, website design becomes another stage where designers can display their artistic ability. How designers create humanized website to meet people’s requirements? This paper simply analyzes the definition, factors and proposals of humanized web design, states that website design should follow the principle of humanity, and provides some referential suggestions.

humanity; UI design; website design

G202

A

1673-9272(2012)06-0157-03

2012-09-10

楊亦藝（1973-），女，福建廈門人，廈門理工學(xué)院設(shè)計(jì)藝術(shù)系講師，碩士，研究方向：設(shè)計(jì)教育與理論研究。

[本文編校：李浩慧]