電子商務(wù)網(wǎng)站的頁(yè)面設(shè)計(jì)

　　1.網(wǎng)頁(yè)的版面布局設(shè)計(jì)

　　雖然網(wǎng)頁(yè)技術(shù)的發(fā)展使得我們開始趨向于學(xué)習(xí)場(chǎng)景的編劇，但是固定網(wǎng)頁(yè)版面設(shè)計(jì)基礎(chǔ)依然是必須學(xué)習(xí)和掌握的。它們的基本原理是相通的。你可以領(lǐng)會(huì)要點(diǎn)，舉一反三。版面指的是通過瀏覽器看到的完整的一個(gè)頁(yè)面(可以包含框架和層)。因?yàn)槊總€(gè)人的顯示器分辨率不同，所以同一個(gè)頁(yè)面的大小可能出現(xiàn)640×480像素、800×600像素、1024×768像素等不同尺寸。布局則指的是以最適合用戶瀏覽的方式將圖片和文字排放在頁(yè)面中。

　　(1)版面布局的重要性。具體到網(wǎng)站的每一個(gè)網(wǎng)頁(yè)，其排版布局達(dá)到一種和諧的狀態(tài)才算是一種成功的網(wǎng)頁(yè)設(shè)計(jì)，同樣的圖像和文字，用不同的方式將其組合起來，很可能產(chǎn)生截然不同的效果。網(wǎng)頁(yè)的內(nèi)容和頁(yè)面的形式都是網(wǎng)站設(shè)計(jì)者必須考慮的，只考慮內(nèi)容，不重視其形式，會(huì)影響用戶瀏覽時(shí)的情緒；只顧頁(yè)面的排版形式，不顧內(nèi)容，用戶也不會(huì)歡迎。二者缺一不可，少了任何一個(gè)，都是設(shè)計(jì)的失敗。

　　(2)版面布局的步驟。

　　1)草案。屬于創(chuàng)造階段，不講究細(xì)膩工整，也不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡可能多畫幾張，最后選定一幅較滿意的作為繼續(xù)創(chuàng)作的腳本。

　　2)粗略布局。在草案的基礎(chǔ)上，將需要放置的功能模塊安排到頁(yè)面上。功能模塊主要包含網(wǎng)站標(biāo)志、主菜單、新聞、搜索、友情鏈接、廣告條、郵件列表、計(jì)數(shù)器和版權(quán)信息等。注意，這里必須遵循突出重點(diǎn)、平衡協(xié)調(diào)的原則，將網(wǎng)站標(biāo)志、主菜單等重要的模塊放在最顯眼、最突出的位置，然后再考慮次要模塊的排放。

　　3)定案。將粗略布局精細(xì)化、具體化，最后達(dá)到滿意定案。

　　(3)常見的版面布局形式。

　　“T”型布局。所謂“T”型就是指頁(yè)面頂部為“橫條網(wǎng)站標(biāo)志+廣告條”，下方左面為主菜單，右面顯示內(nèi)容的布局。因?yàn)椴藛螚l背景較深，整體效果類似英文字母“T”，所以稱為“T”型布局，這是網(wǎng)頁(yè)設(shè)計(jì)中使用最廣泛的一種布局方式。這種布局的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰、主次分明，且是初學(xué)者最容易掌握的布局方法。缺點(diǎn)是規(guī)矩呆板，如果色彩細(xì)節(jié)上再不注意，很容易讓人看后乏味。

　　“口”型布局。這是一個(gè)象形的說法，就是頁(yè)面一般上下各有一個(gè)廣告條，左面是主菜單，右面放友情鏈接等，中間是主要內(nèi)容。這種布局的優(yōu)點(diǎn)是充分利用版面、信息量大；缺點(diǎn)是頁(yè)面擁擠、不夠靈活。也有將四邊突出，只用中間的窗口型設(shè)計(jì)。

　　“三”型布局。這種布局多用于國(guó)外站點(diǎn)，國(guó)內(nèi)使用得不多。特點(diǎn)是頁(yè)面上橫向有兩條色塊將頁(yè)面整體分割為3部分，色塊中大多放廣告條。

　　對(duì)稱對(duì)比布局。顧名思義，采取左右或者上下對(duì)稱的布局，一半深色，另一半淺色，一般用于設(shè)計(jì)型站點(diǎn)。優(yōu)點(diǎn)是視覺沖擊力強(qiáng)，缺點(diǎn)是將兩部分有機(jī)地結(jié)合起來比較困難。以上總結(jié)了目前網(wǎng)絡(luò)上常見的布局，此外還有許多別具一格的布局，關(guān)鍵在于網(wǎng)站本身的創(chuàng)意和設(shè)計(jì)。

　　(3)頁(yè)面版面布局應(yīng)遵循的原則。

　　正常平衡。亦稱“勻稱”，多指左右、上下對(duì)照的形式，主要強(qiáng)調(diào)秩序，能達(dá)到安定、誠(chéng)實(shí)、信賴的效果。

　　異常平衡。即非對(duì)照形式，但也要平衡和韻律，當(dāng)然都是不均衡的，這種布局能達(dá)到強(qiáng)調(diào)性、高注目性的效果。

　　對(duì)比。所謂對(duì)比，是指不僅利用色彩、色調(diào)等技巧來表現(xiàn)，在內(nèi)容上也可涉及古與今、新與舊的對(duì)比。

　　空白。空白有兩種作用，一方面表示網(wǎng)站的突出卓越，另一方面也表示網(wǎng)頁(yè)品位的優(yōu)越感，這種表現(xiàn)方法對(duì)體現(xiàn)網(wǎng)頁(yè)的格調(diào)十分有效。

　　盡量用圖片解說。此法對(duì)不能用語(yǔ)言說服或用語(yǔ)言無(wú)法表達(dá)的情感，特別有效。圖片解說的內(nèi)容可以傳達(dá)給瀏覽者更多的感性認(rèn)識(shí)。

　　以上的設(shè)計(jì)原則，雖然有些枯燥，但是如果網(wǎng)頁(yè)設(shè)計(jì)人員能領(lǐng)會(huì)并活用到網(wǎng)頁(yè)布局里，效果就大不一樣了。比如，網(wǎng)頁(yè)的白色背景太虛，則可以加些色塊；版面零散，可以用線條和符號(hào)串來分隔；左面文字太多，則右面可以插一張圖片以保持平衡；表格太過規(guī)矩，則可以改用倒角。

　　2.頁(yè)面中圖片和文字的處理

　　用戶在網(wǎng)上一般四處漫游，必須設(shè)法吸引他們對(duì)企業(yè)站點(diǎn)的注意力，所以企業(yè)電子商務(wù)網(wǎng)站的設(shè)計(jì)中要善于利用一些特色的效果，頁(yè)面上最好有醒目的圖像、新穎的畫面、美觀的字體，使其別具特色，令人過目不忘。

　　(1)圖片的使用。

　　圖像的內(nèi)容應(yīng)有一定的實(shí)際作用，切忌虛飾浮夸，最佳的圖像應(yīng)集美觀與信息內(nèi)容于一體。圖像總是為頁(yè)面的使用服務(wù)的，一幅大而漂亮的圖片，如果妨礙了頁(yè)面所要進(jìn)行的工作，就會(huì)降低頁(yè)面的整體質(zhì)量。在這種情況下，使用小圖像甚至不使用圖像將是更好的選擇。一個(gè)頁(yè)面的好壞在于它是否提供了有用的信息，所以不管圖像如何漂亮或標(biāo)新立異，也不能隨意將它加入頁(yè)面中。

　　圖像可以彌補(bǔ)文字的不足，但并不能完全取代文字。很多用戶把瀏覽軟件設(shè)定為略去圖像，只看文字以求節(jié)省時(shí)間。因此，制作頁(yè)面時(shí)，必須注意將圖像所包含的重要信息或鏈接指示用文字替代功能重新表達(dá)一次。

　　(2)網(wǎng)站字體。

　　1)不要用太大或太小的文字。因?yàn)榘婷媸菍氋F而有限的，粗陋的大字不能給瀏覽者更多的信息。文字太小，用戶讀起來難受；文字太大，或者文字視覺效果變化頻繁，用戶看起來很不舒服。另外，按當(dāng)代中文的閱讀習(xí)慣，文本大都是居左的，所以最好是讓文本左對(duì)齊，而不是居中。當(dāng)然，標(biāo)題一般應(yīng)該居中，因?yàn)檫@符合瀏覽者的閱讀習(xí)慣。

　　2)避免過多使用不停閃爍的文字。閃爍的文字看起來好玩，但它可能使用戶分心，最好避免過多地使用它。有的網(wǎng)頁(yè)設(shè)計(jì)者想通過閃爍的文字引起瀏覽者的注意，但一個(gè)頁(yè)面中最多不要超過三處閃爍的文字，太多則給用戶一種眼花繚亂的感覺，影響用戶去訪問該網(wǎng)站的其他內(nèi)容。

　　3)不要使用不常用的字體。網(wǎng)站中應(yīng)該使用常用的字體，如“宋體”、“楷體”等。如果使用不常用的字體制作網(wǎng)頁(yè)，就會(huì)使客戶端所訪問的網(wǎng)頁(yè)達(dá)不到理想的效果。

　　3.網(wǎng)頁(yè)的色彩效果設(shè)計(jì)

　　網(wǎng)頁(yè)的色彩也是樹立網(wǎng)站形象的一個(gè)要素。色彩搭配看似簡(jiǎn)單，實(shí)際上卻是網(wǎng)頁(yè)設(shè)計(jì)中很難處理的問題之一。如何運(yùn)用最簡(jiǎn)單的色彩表達(dá)最豐富的含義是網(wǎng)頁(yè)設(shè)計(jì)人員應(yīng)認(rèn)真思考的問題。在網(wǎng)頁(yè)設(shè)計(jì)中，根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合、搭配來構(gòu)成美麗的頁(yè)面。色調(diào)及黑、自、灰的三色空間關(guān)系無(wú)論是在設(shè)計(jì)上，還是在繪畫上都起著重要的作用。但是需要注意，每個(gè)網(wǎng)站都應(yīng)該有自己的主色調(diào)，不可為追求視覺效果而濫用顏色。例如號(hào)稱藍(lán)色巨人的IBM就用藍(lán)色作為自己網(wǎng)站的主色調(diào)。此外，色彩還會(huì)對(duì)人們的心理產(chǎn)生影響，應(yīng)合理地加以運(yùn)用。按照色彩的記憶性原則，一般暖色較冷色的記憶性強(qiáng)。另外，色彩還具有聯(lián)想與象征的特性，例如，紅色象征火、血、太陽(yáng)，藍(lán)色象征大海、天空和水面等。例如設(shè)計(jì)出售冷食的虛擬店面，可使用清涼而沉靜的顏色，使人心理上感覺涼爽一些。

　　在色彩的運(yùn)用過程中，還應(yīng)注意的一個(gè)問題是：由于國(guó)家和種族的不同，宗教信仰、地理位置以及文化修養(yǎng)的差異，不同的人群對(duì)色彩的喜惡程度有很大的差別；生活在鬧市中的人們喜歡淡雅的顏色；生活在沙漠中的人們喜歡綠色。在設(shè)計(jì)中要考慮各企業(yè)的主要讀者群的背景和構(gòu)成。

　　另外，在網(wǎng)頁(yè)色彩的處理上，要注意以下兩點(diǎn)：一方面色彩的使用要與眾不同，有自己的個(gè)性，這樣網(wǎng)頁(yè)才能引人注目，并給用戶留下深刻的印象；另一方面色彩的使用要和網(wǎng)站的內(nèi)容保持一致，例如用綠色來作為一個(gè)無(wú)公害蔬菜連鎖超市站點(diǎn)的主色調(diào)。