劉華敏

(安徽文達信息工程學院)

網頁設計因素的分析與探討*

劉華敏

(安徽文達信息工程學院)

網頁設計要運用互聯(lián)網+的思維，以客戶需求為原則，靈活的使用文字、圖片和多媒體等元素設計網頁，從而提高信息的傳播速度，使界面與用戶之間能及時的進行交流互動來滿足用戶的需求，為用戶提供快速獲取準確信息，提高頁面的訪問量.

互聯(lián)網+;交流互動;訪問量

0 引言

隨著互聯(lián)網+的發(fā)展，網頁設計已經滲入到多學科領域.過去的頁面設計是圍繞客戶所需要表達的內容進行組織、整理，最后在互聯(lián)網上運行，讓更多的瀏覽者能獲取信息就夠了.現(xiàn)在這樣的頁面已完全不能滿足客戶的需求，客戶需要將情感、內容、互動等因素綜合的展示在互聯(lián)網上.這就迫使頁面設計者不能單純的使用計算機技術來設計頁面，需要了解與頁面相關的心理學知識，從客戶的角度考慮客戶的心理;了解藝術知識，知道如何搭配頁面的色彩，圖片如何處理，文字使用何種字體，如何用特效處理文字，為頁面增添活力、生動性.設計者設計頁面應遵循軟件工程開發(fā)項目的思想即需求分析－總體設計－詳細設計－編碼 －調試－測試，以客戶為中心、實現(xiàn)客戶需求為原則設計頁面布局，讓瀏覽者在愉悅的氛圍中對頁面進行訪問與操作.

軟件需求分析階段要解決“頁面設計最終目標必須做什么”，也就是要深入實際與客戶進行洽談，真實的了解客戶的想法.利用繪制頁面整體布局的草圖來合理的安排內容素材，與客戶進一步的討論如何宏觀的解決這個目標，溝通基本完成后，以總體設計為基礎，如何具體地實現(xiàn)這個系統(tǒng)，進行素材的存放、編碼，最終實現(xiàn)頁面設計的目標.運行過程中，與客戶交流探討是否需要修改或擴充，完善頁面的功能，盡善盡美.

1 網頁布局的合理性與設計原則的分析

網頁設計需要對各個元素進行整體理解，在進行網站設計時，需要對網頁的布局進行整體性的規(guī)劃.從布局合理性與設計原則兩個方面進行探討.

1.1 分析頁面布局設計合理的重要性

網頁版面布局是否合理是設計網頁成功與否的關鍵.特別是一級頁面的布局設計尤為重要，是任何一個類型網站平臺的“臉面”.首頁是網站所有子頁面內容的索引，首頁面的導航是起到引航的作用.因此不同的網頁界面設計的原則和風格是不同的，但首頁面存放的內容一般是網站標記、導航、主體內容、公告、友情鏈接等，如何合理的在頁面空間擺放這些元素是受設計者設計風格的影響.如果設計者知曉現(xiàn)在的大部分年輕人都生活在快節(jié)奏中，他們在瀏覽頁面時不僅希望能獲取信息，而且需要在一種輕松、快樂的氛圍中緩解心理和生活壓力，這就需要設計師在設計頁面時，能將技術、藝術與心理學等結合，在頁面的布局中適當?shù)摹傲舭住?，顏色搭配盡可能的選擇洋溢幸福的色彩來修飾頁面內容，此時設計的布局就達到了“此時無聲勝有聲”的境界.如果設計者僅僅把“留白”理解成頁面布局的背景使用白色或者留出一片空白區(qū)域，不存放任何內容，這就是一種敗筆.可見，頁面布局設計是否合理對網頁設計的成功起到畫龍點睛的作用.

1.2 網頁界面布局設計原則

網頁界面是連接用戶與瀏覽者進行交流、互動的橋梁，現(xiàn)代社會中的網頁設計已經融合了多學科，包括藝術設計、計算機技術和心理學等領域.界面設計者不能簡單的把頁面的元素和版式粗略的組合，拼湊出頁面;而是在設計的過程中，要以客戶至上為原則，從心理學的角度出發(fā)研究客戶的情感和需求，后用計算機技術、藝術技術相結合來有效地設計頁面，達到與用戶產生共鳴的反應.由于用戶的年齡、接受的教育程度、生成環(huán)境等因素的影響，對需求的頁面也是五花八門的，這就促使設計師需要將設計風格多樣化，爭取得到多數(shù)用戶的認可.

設計師對用戶的需求了解后，應策劃出一幅界面版式的草稿圖，與客戶進行進一步的溝通，從用戶的角度去考慮素材和需求如何完美的結合，不僅能突出主題，還能達到美的享受，從而追求整個網站的和諧性.

以客戶為中心，設計出友好互動的界面是客戶的目標.設計師在設計的時候應盡量的圍繞客戶的需求進行設計，在設計中摒棄過多的外觀美的影響，以簡潔、清新、明了的設計原則展現(xiàn)主題內容，頁面主題內容需要分門別類的存放，以優(yōu)化為設計理念，提高捕捉信息的效率，讓用戶在第一時間感受到頁面帶來的快樂，在最短時間獲取信息.

最后，要以整個網站或平臺的統(tǒng)一風格來局部調整頁面的內容，盡量的以少修改的原則來調整頁面的內容.

2 頁面構成的基本元素

頁面內容需要有文字、圖片、導航欄等基本元素構成，但不是所有元素都是必須的.通常是以頁面的內容為中心，基本元素為素材設計頁面;在設計的過程中，元素不是簡單的堆砌在一起，而是經過藝術性的處理、分析，從用戶的情感、視覺審美與內容結合的方面來選取素材.

2.1 文字

文字是人類溝通、傳遞信息、表達情感的一種有效的工具之一.網頁頁面中的文字盡量使用常用的字體，雖然不同的字體能增加頁面的美觀性.但如果一個頁面使用過多的字體，會給人眼花繚亂的視覺審美，削弱了內容表達的能力.不同風格的網站可以選用與頁面主題有關的字體，更好的體現(xiàn)頁面的特點.兒童網站可以采用藝術字，體現(xiàn)小孩陽光、快樂和精力旺盛.

頁面內容離不開文字的支撐，但如何合理的編排文字呢?如果是容納豐富信息內容的頁面，讓瀏覽者能在第一時間找到所需的信息，可以充分調動文字的顏色、字體、大小、濾鏡等屬性運用，將重要的或最新的信息放在最醒目的位置，提高閱讀的效率;如果是宣傳類的頁面，海報和圖片占據(jù)頁面的大部分，沖擊客戶的視覺審美，吸引眼球，這時僅有的一點文字能和海報主題達到和諧，起到相得益彰的效果.

滾動文字能吸引用戶的注意力，一般頁面的最新信息、天氣預報等采用滾動文字表現(xiàn).如果頁面布局中有一行區(qū)域顯示天氣預報，直接采用水平方向滾動;如果是繪制出的一塊矩形區(qū)域顯示最新信息，采用垂直方向滾動，需注意滾動文字運動區(qū)域的大小，不能超出邊界，否則有損頁面的美觀性.代碼如下:

＜marquee direction=“right”scrollamount=“20”scrolldelay=“100”width=“n”height=“m”onmouseover=“this.stop()”onmouseout=“this.start()”＞這里是滾動的文字＜/marquee＞.Width與height值需根據(jù)實際區(qū)域大小定.

2.2 圖片

“千言萬語不如一張圖”，圖片是界面設計中其中的一個重要元素，它能準確、直觀的傳遞文字無法表達的信息.例如支付寶中螞蟻森林，這是個公益活動，大家在這個頁面種樹，依靠出門選擇行走或公共交通，為地球減負，獲取綠色能量，小樹(如圖1所示)就一點點的長大，直到長成一棵樹(如圖2所示)，最后被阿拉善基金會認領，將種植到阿拉善地區(qū).這個過程用文字表達欠準確，而且還不簡潔明了.但大家一看下面的圖就知道其中的寓意.

頁面設計離不開圖片的加入，特別是現(xiàn)在的頁面設計若沒有圖片，顯得蒼白無力;但圖片又不能隨意使用，容易造成凌亂.將圖片插入到頁面中，需巧妙的處理圖片與文字的關系，從圖片上獲取情感，從文字中讀取信息.

圖1 小樹

圖2 不斷獲取能量成長的樹

圖片插入到頁面中，可以選擇圖片輪換的方式，這樣節(jié)省頁面的區(qū)域空間，同時能更新信息，添加了生動性;使用圖片首尾連接的方式，能在短時間內看到圖片傳遞的信息.

2.3 超鏈接

超鏈接是指從一個網頁指向另一個網頁，或者指向同一個頁面的不同位置.在頁面中常見的超級鏈接是給文本、圖片建立超鏈接.

一般情況下，超鏈接分為絕對鏈接與相對鏈接.絕對鏈接的路徑必須是完整的URL，包括所使用的傳輸協(xié)議http或硬盤的盤符;相對路徑是以當前文檔所在位置為開始到鏈接目標所經過的路徑.通常，使用相對路徑時建議所有文件都存放在站點中.

圖片不同位置可以創(chuàng)建不同的超級鏈接，如實現(xiàn)該功能，需要與圖片的熱點區(qū)域結合使用，在圖片不同位置繪制熱點區(qū)域并創(chuàng)建超級鏈接.2.4 導航欄

導航欄的形式多樣，分為文字、圖片和FLASH按鈕編輯的導航菜單.文字制作的導航盡可能的容納豐富的信息;圖片和FLASH按鈕編輯的導航菜單主要是外觀上豐富多彩，容納的信息少.

導航欄在頁面中起到引導作用，這就需要導航菜單在設計時必須合理清晰，準確定位鏈接的頁面.被人熟知的電子商務平臺如淘寶、天貓，導航欄是頁面中不可或缺的一個元素.平臺中所有商品都是通過導航欄展示在頁面中，瀏覽者根據(jù)個人需要去查找所需的物品信息，滿足個人的需求.此時，若用超文本鏈接二級頁面的商品是實現(xiàn)不了的，無法在頁面中合理的排列所有商品.導航欄可以通過子菜單鏈接商品，子菜單需要時顯示，否則就隱藏，這種布局不占用頁面空間，如圖3所示.

圖3 天貓的導航菜單

3 動態(tài)元素的應用

頁面只靜不動，猶如一潭死水，沒有任何生機，瀏覽者訪問頁面會丟失繼續(xù)瀏覽的興趣.為了留住更多的用戶，在不影響頁面原有的設計的基礎上，適當?shù)奶砑觿討B(tài)效果，能讓頁面生動起來，增加人氣，頁面的訪問量就得以提升.例如圖像飄動、彈出信息、跟隨鼠標移動的圖案等，這些動態(tài)效果實現(xiàn)起來簡單，但要適當合理的運用才能錦上添花.

用戶刪除某個操作會造成一定的影響，此時若在真正的刪除之前彈出一個友情提示窗口，用戶頓時覺得這是個貼心的服務，用戶在刪除時會仔細考慮再做出是否刪除的決定.電商購物平臺中購物車添加商品進行編輯時就有這個溫馨的提示信息.

圖像飄動的運用，能給網頁增加飄逸性、活潑性.頁面中的圖片在理論上支持*.png、*.jpg和*.gif動畫格式，但在實際應用中，設計者會選擇*.gif動畫和*.jpg.因為*.gif動畫容量小還生動，不失真，不占用頁面的空間;*.jpg圖片能真實、清晰的表達所需要傳遞的信息.跟隨鼠標移動的圖案動態(tài)效果可以插入到兒童頁面中，兒童在瀏覽時會覺得很新奇，激發(fā)他們的想象力，也被頁面吸引住舍不得離開.

4 其他元素的運用

4.1 色彩

在網頁設計中，色彩是一個不可忽略的重要因素.因為整個頁面的色彩搭配的完美，不僅能對瀏覽者的視覺審美起到一個刺激的作用，而且能抓住瀏覽者的心理，留住用戶.在網頁設計中如何才能正確用色，這是需要設計者長期積累的過程，不是一蹴而就的.不管怎樣，設計者對頁面設計用色的基本常識的了解，這是很有必要的.網頁界面中的色彩分冷、暖色調，在運用時要理解不同顏色代表不同的涵義.譬如，白色是潔白無瑕的，給人潔凈、純真等美好的想法;黑色往往給人莊重、嚴肅的印象，容易讓人產生悲哀、恐怖、不祥等消極印象;紅色在中國代表喜慶，易使人聯(lián)想起太陽、熱情、積極、希望等向上的傾向;藍色是甜美的，一說起藍色，用戶就會在第一時間想到藍色的天空與海洋，給人一種唯美、甜蜜的浪漫氣息.

在網頁用色中，色彩搭配應遵循“總體協(xié)調、局部對比”的大原則;同時對于具體的頁面用色會從“單色－五彩繽紛－標準色－單色”的一個制作趨勢選取色彩.無論什么樣的原則，只要合理的搭配頁面的用色，就能起到事半功倍的作用.

4.2 多媒體元素

隨多媒體技術的普遍應用，Internet的功能日益完善.音樂、動畫、視頻等媒體元素應用到網頁中，有利于制作出動感、受用戶青睞的網頁.

音樂是能釋放心情、緩解生活壓力的一種有力的工具.大部分年輕人都生活在壓力之中，閑暇時瀏覽有音樂伴隨的網頁，心情豁然開朗.很多優(yōu)美的文字與音樂相配，在閱讀的過程中，讀者頓時感到輕松、愉悅，有與文字意境同在的體驗.瀏覽者訪問qq好友空間的頁面，聆聽音樂，訪問頁面能明了好友的心情，同時也是與好友進行一種無聲的交流.

Flash動畫是當今流行的Web頁面動畫格式，具有體積小、動感強的特點.將Flash動畫運用到頁面中，可以增加瀏覽者點擊動畫頁面的機會，另外對瀏覽者的視覺產生強有力的沖擊，可以更好的滿足用戶的需求，使網頁有聲有色.

5 結束語

設計元素是呈現(xiàn)頁面設計主題內容的，但如何體現(xiàn)是值得深究的一個方向.通過對頁面元素與頁面設計的分析得出設計頁面是一項復雜的“工程”，設計者不僅要有計算機技術的設計能力、心理學的分析能力，還需有藝術設計的視覺審美.作為一名網頁設計者，僅僅是對實際操作的過程中常見的幾個元素進行分析與探討，期望能更好的設計出出彩的頁面.

［1］李貌，徐林濤.網頁設計中的色彩搭配研究［J］.包裝工程，2016，37(16):177～180.

［2］張乃恒.網頁界面設計風格多樣化研究［D］.南京:東南大學，2015.

［3］高翔.巧頁設計中文字巧素的應用與研究［J］.美術視點，2014，11.

［4］程輝.色彩在網頁界面設計制作中的應用［J］.現(xiàn)代裝飾(理論)，2014，12.

The Analysis and Discussion of Web Design Factors

Liu Huamin
(Auhui Wonder Information Engineering University)

Design web pages should have Internet+ thinking，which should meet the demand of customer.The integrated use of elements such as words，pictures and multimedia，can improve web aesthetic effect，the timely interaction between web interface with the users is provided and a better experience are gained.Application of this principle for the design of the web page can improve the speed of information dissemination，useful informationed can be quickly and accurately obtained，and page access will be improved.

Internet+;Exchange interaction;Page view

TP393.02

:A

:1000－5617(2017)01－0071－04

(責任編輯:李家云)

2016－12－03

*安徽省省級質量工程精品資源共享課程“《數(shù)據(jù)結構》精品課程”研究成果(2016gxx060)