本站小編為你精心準(zhǔn)備了漢正街網(wǎng)頁設(shè)計(jì)視覺優(yōu)化分析參考范文，愿這些范文能點(diǎn)燃您思維的火花，激發(fā)您的寫作靈感。歡迎深入閱讀并收藏。

漢正街，這個(gè)有著500多年歷史的小商品集市，坐落在白云黃鶴的故鄉(xiāng)，長(zhǎng)江和漢水交匯處，是漢口歷史上最早的中心街道，是萬商云集，商品爭(zhēng)流之地。在全球化、信息化浪潮沖擊下，漢正街轉(zhuǎn)變傳統(tǒng)經(jīng)營(yíng)理念，注重先進(jìn)科技手段的應(yīng)用和文化資源優(yōu)勢(shì)的發(fā)揮，依靠科技手段和文化資源，致力于實(shí)現(xiàn)由古老的采取攤位式經(jīng)營(yíng)，喜歡現(xiàn)場(chǎng)、現(xiàn)金、現(xiàn)貨的“三現(xiàn)”交易的方式向現(xiàn)代化的電子商務(wù)交易方式悄然轉(zhuǎn)進(jìn)；由低端向高端市場(chǎng)延伸的華麗轉(zhuǎn)身。通過建設(shè)一些電子商務(wù)平臺(tái)，力求實(shí)現(xiàn)現(xiàn)代化的商品交易，“漢正街”買賣網(wǎng)正是其中之一。本人試從以下幾個(gè)方面淺析“漢正街”買賣網(wǎng)網(wǎng)頁設(shè)計(jì)中的視覺優(yōu)化。

一、風(fēng)格定位

主頁的美化首先要考慮的是風(fēng)格的定位。任何一個(gè)網(wǎng)站的主頁都要根據(jù)其主題的內(nèi)容決定其風(fēng)格和形式，只有形式與內(nèi)容的完美統(tǒng)一，才能達(dá)到理想的宣傳效果。主頁在許多行業(yè)應(yīng)用，并日益擴(kuò)大。歸納起來有這幾大類：新聞機(jī)構(gòu)、政府機(jī)關(guān)、科教文化、娛樂藝術(shù)、電子商務(wù)等。不同性質(zhì)的行業(yè)，又體現(xiàn)出了不同的主頁風(fēng)格，如人的穿著打扮，不同性別以及年齡層次不同，著裝自然也就不一樣了。如：政府部門的主頁風(fēng)格一般比較莊重，娛樂行業(yè)的生動(dòng)活潑，文化教育部門的高雅大方，而商務(wù)主頁則可貼近風(fēng)俗，使大眾喜聞樂見。“網(wǎng)易”是平易近人的，“迪斯尼”是生動(dòng)活潑的，“IBM”是專業(yè)嚴(yán)肅的，這些都是網(wǎng)站給人們留下的不同感受。“漢正街”買賣網(wǎng)屬于電子商務(wù)網(wǎng)站，簡(jiǎn)潔明了。一個(gè)網(wǎng)站主頁風(fēng)格的形成主要依賴于視覺語言的運(yùn)用，主頁的版式設(shè)計(jì)，依賴于頁面的色調(diào)處理，還有圖片與文字的組合形式等。

二、版面編排

版面是廣告視覺傳達(dá)的載體，編排是視覺溝通方式的設(shè)計(jì)。“版面編排”實(shí)際上就是中國(guó)古代畫論中的“經(jīng)營(yíng)位置”。主頁作為一種版面，既有文字，又有圖片，都需要同時(shí)展示給觀眾，必須根據(jù)內(nèi)容的需要。以文字為主的廣告版面，其文案標(biāo)題與標(biāo)語要處于最醒目的位置，字體設(shè)置得要大些。標(biāo)題的位置往往是畫面的醒目之處，起到誘導(dǎo)觀眾進(jìn)一步關(guān)注廣告正文內(nèi)容的積極作用。以圖片為主的版面，給人的視覺印象是直觀的，美觀的。一幅產(chǎn)品照片可以傳達(dá)出產(chǎn)品的特征，特別是經(jīng)過攝影師拍攝的具有特殊創(chuàng)意效果的圖片，本身就傳達(dá)了主題的內(nèi)容，使人一目了然。圖片和文字按照一定的次序進(jìn)行合理的編排，使之組成一個(gè)有機(jī)的整體展現(xiàn)給廣大的觀眾。“漢正街”買賣網(wǎng)版面設(shè)計(jì)從以下幾條來做的：

1．主次分明。在一個(gè)頁面上，必須考慮視覺的中心，這個(gè)中心一般在屏幕的中央，或者在中間偏上的部位。因此，一些重要的文章和圖片一般可以安排在這個(gè)位置，在視覺中心以外的地方就可以安排稍微次要的內(nèi)容，這樣在頁面上就突出了重點(diǎn)，做到了主次分明。“漢正街”買賣網(wǎng)除了把主要展示的各類商品放在視覺中心外，還精心設(shè)置了一些如：時(shí)間、地圖、公交查詢、天氣預(yù)報(bào)等服務(wù)，把它們放置頁面的右上角處，既豐富網(wǎng)站內(nèi)容，又方便大眾。

2．圖文并茂。文字和圖片具有相互補(bǔ)充的視覺關(guān)系，頁面上文字太多，就顯得沉悶，缺乏生氣。頁面上圖片太多，缺少文字，必須就會(huì)減少頁面的信息容量。最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁面，又使主頁有豐富的內(nèi)容。

3．簡(jiǎn)明易懂。版面設(shè)計(jì)不同于繪畫制作，它特別強(qiáng)調(diào)利用簡(jiǎn)明的方式，清晰的語言進(jìn)行創(chuàng)意。奉行“更少為了更多”，使編排簡(jiǎn)潔易于傳達(dá)。只有簡(jiǎn)明次序的編排形式，才能有效地傳達(dá)信息，使文字更清晰、字體易閱讀、圖形易識(shí)別。

三、色彩處理

網(wǎng)頁色彩的搭配，無論是平面設(shè)計(jì)，還是網(wǎng)頁設(shè)計(jì)，色彩永遠(yuǎn)是最重要的一環(huán)。當(dāng)我們距離顯示屏較遠(yuǎn)的時(shí)候，我們首先看到的不是合理的版式或美麗的圖片，而是網(wǎng)頁的色彩。色彩是藝術(shù)表現(xiàn)的要素之一，是人的視覺中最敏感的東西，也是視覺傳達(dá)中十分重要的組成部分。我們?cè)谠O(shè)計(jì)網(wǎng)頁或是平面作品時(shí)大多會(huì)想好用什么色彩為主色，并找到相關(guān)的色彩為輔色。整體色彩效果應(yīng)該是和諧的，只有局部的，小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)比，應(yīng)根據(jù)主頁內(nèi)容的需要，分別采用不同的主色調(diào)。試想一下，一個(gè)網(wǎng)站采用一種顏色，將是讓人感覺多么單調(diào)，乏味；但也不可能將所有的顏色都運(yùn)用到網(wǎng)站中，會(huì)讓人感覺很花哨。建議是選取一兩種主題色彩，幾種輔助色彩，不至于讓客戶迷失方向，也不至于單調(diào)，乏味。當(dāng)主題色確定好以后，考慮其它配色時(shí)，一定要考慮其它配色與主題色的關(guān)系，要體現(xiàn)什么樣的效果。最后，還要考慮主頁底色（背景色）的深淺。底色深，文字的顏色就要淺，以深色的背景襯托淺色的內(nèi)容（文字或圖片）；反之，底色淡的，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容（文字或圖片）。“漢正街”買賣網(wǎng)的主題色為紅、藍(lán)兩色，輔助色為桔紅和灰色，主頁以白色為背景色，配以大量的黑色字和少量的灰色調(diào)。總之，保持主體色彩的一致，只改變局部色塊，會(huì)給人留下很深刻的印象，因?yàn)槿说囊曈X對(duì)色彩要比布局更敏感，更容易在大腦中形成記憶符號(hào)。

四、網(wǎng)頁布局

當(dāng)網(wǎng)頁呈現(xiàn)在面前的時(shí)候，好似一張白紙，需要發(fā)揮設(shè)計(jì)才能。首先，一定要知道什么是約定俗成的標(biāo)準(zhǔn)或者說大多數(shù)人的瀏覽習(xí)慣，主觀的設(shè)計(jì)行為需要切合這些自然習(xí)慣以獲得最大的視覺效果。人類視線的自然流程和視覺習(xí)慣實(shí)際上也形成了版面中的最佳視覺區(qū)域，在同一版面中，上半部分區(qū)域的視覺感受力大于下半部分，左半部分區(qū)域的視覺感受大于右半部分，因此，版面中的左上部分和中上部分區(qū)域就成了版面中最有利視覺傳達(dá)的位置，即所謂的最佳視覺區(qū)域。了解了這些，就可以在此基礎(chǔ)上加上自己的東西，設(shè)計(jì)出自己的方案。

1．文本。文本在頁面中出現(xiàn)多數(shù)以行或塊（段落），它們的擺放位置決定著整個(gè)頁面布局的可視性。在印刷的手工時(shí)代，文本的編排受到了多方面的技術(shù)制約，而在數(shù)字時(shí)代計(jì)算機(jī)技術(shù)的輔助下，文本的視覺創(chuàng)作變得隨心所欲起來，已經(jīng)可以按照自己的要求放置到頁面的任何位置。大量運(yùn)用計(jì)算機(jī)數(shù)字技術(shù)創(chuàng)造出來的反常規(guī)的文字編排形式，也是對(duì)于數(shù)字時(shí)代文本的閱讀次序和閱讀價(jià)值的重新詮釋。

2．頁頭。頁頭即頁眉。頁眉的作用是定義頁面的主題。頁眉里多數(shù)都顯示站點(diǎn)的名字，常放置站點(diǎn)名字的圖片和公司標(biāo)志以及導(dǎo)航條。這樣，訪問者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。“漢正街”買賣網(wǎng)的頁眉處放置了公司的標(biāo)志、站點(diǎn)名字（漢正街買賣網(wǎng)）、標(biāo)語（華中打折批發(fā)甩賣第一網(wǎng)）以及導(dǎo)航條（如圖二）。頁眉也是整個(gè)頁面設(shè)計(jì)的關(guān)鍵，它將牽涉到更多設(shè)計(jì)和整個(gè)頁面的協(xié)調(diào)性。

3．頁體。頁體中包含了各個(gè)欄目，占據(jù)整個(gè)頁面的多半部分，也是信息的主要傳達(dá)區(qū)域。為使每個(gè)欄目增強(qiáng)整個(gè)頁面的可視性和便于不同信息的歸納，可將它們按欄目分成矩形塊以“左中右”或“上中下”的結(jié)構(gòu)排列。“漢正街”買賣網(wǎng)整體以“上中下”的結(jié)構(gòu)排列。上半部分區(qū)域的視覺感受力大于下半部分，所以有意地把主要的信息放置于整個(gè)頁面的上面部分，其主要內(nèi)容有：本站網(wǎng)購店、客戶服務(wù)區(qū)、黃金廣告位及登陸區(qū)域。中間區(qū)域則是頁面的主體部分，可放置大量的圖片文字信息，既然是商品買賣網(wǎng)站，那么優(yōu)質(zhì)的商品圖片展示是不可缺少的。網(wǎng)頁中間部分展示了大量的圖片，并配以對(duì)應(yīng)的文字說明。分為：產(chǎn)品文字信息展示區(qū)域和產(chǎn)品圖片展示區(qū)域，其間插入“大雜燴”欄目，內(nèi)容有大眾喜愛的新聞文摘、緊急求購、二手市場(chǎng)、招商加盟、人才招聘、門面信息和一句短波一系列服務(wù)項(xiàng)目，貼近民心，使大眾喜聞樂見。頁體部分內(nèi)容豐富，功能強(qiáng)大，但給人以簡(jiǎn)潔明了，干凈利索之感。

4．頁腳。頁腳和頁頭相呼應(yīng)。頁頭是放置站點(diǎn)主題的地方，而頁腳是放置作者或公司信息的地方，許多制作信息都是放置在頁腳處，或者還添加一些小面積的廣告信息和鏈接功能。

5．圖片。圖片和文本是網(wǎng)頁中最基本的視覺元素，這些元素直接參與了版面視覺意義的表達(dá)，因此顯得尤為重要。如何處理好圖片和文本的位置成了整個(gè)頁面布局的關(guān)鍵。

6．多媒體。除了文本和圖片，還有聲音，動(dòng)畫Flash，視頻等其它媒體，雖然它們不是經(jīng)常能被利用到，但隨著動(dòng)態(tài)網(wǎng)頁的興起，它們?cè)诰W(wǎng)頁布局上也將變得更重要。

五、結(jié)語

網(wǎng)頁作為一種新的視覺表現(xiàn)形式，它的發(fā)展雖然沒有多長(zhǎng)時(shí)間，它兼容了傳統(tǒng)平面設(shè)計(jì)的特征，又具備其所沒有的優(yōu)勢(shì)，成為今后信息交流的一個(gè)非常有影響的途徑。網(wǎng)頁設(shè)計(jì)是一種綜合性的設(shè)計(jì)，它所涉及的范圍非常的廣泛，包括消費(fèi)者心理學(xué)、視覺設(shè)計(jì)美學(xué)、人機(jī)工程、哲學(xué)等諸多方面，當(dāng)然也離不開一定的科學(xué)技術(shù)發(fā)展。在本文中只從視覺優(yōu)化的角度進(jìn)行了一些闡述與分析，除了首先考慮其內(nèi)容上的精益求精外，其次就是對(duì)內(nèi)容合理有效的視覺編排。美是任何網(wǎng)頁所必備的基本因素，網(wǎng)頁信息不僅是為了滿足使用者的需求，更重要的是創(chuàng)造一種愉悅的視覺環(huán)境，使他們有一種全身心的享受和共鳴。