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

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

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

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

　　(2)版面布局的步驟。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　2.頁面中圖片和文字的處理

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

　　(1)圖片的使用。

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

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

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

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

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

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

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

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

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

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