網站設計思考：網站設計中網頁版面布局的原理

設(she)計首(shou)頁的第一步是(shi)設(she)計版面(mian)(mian)布局。就象傳(chuan)統的報(bao)刊(kan)雜(za)志(zhi)編(bian)輯(ji)一樣，我們(men)將網頁看作一張報(bao)紙，一本雜(za)志(zhi)來(lai)進行排版布局。雖然動態(tai)網頁技術的發(fa)展使得我們(men)開始(shi)趨(qu)向于學習(xi)場景編(bian)劇，但(dan)是(shi)固定(ding)的網頁版面(mian)(mian)設(she)計基(ji)礎(chu)依然是(shi)必須學習(xi)和(he)掌握的。它們(men)的基(ji)本原理(li)是(shi)共通的，你可以領(ling)會要點，舉一反三(san)。 

　　版面(mian)指的(de)(de)是(shi)瀏覽器(qi)看到的(de)(de)完整的(de)(de)一(yi)個頁面(mian)(可以(yi)包(bao)含(han)框架和層)。因為每個人的(de)(de)顯示器(qi)分辨(bian)率不同，所以(yi)同一(yi)個頁面(mian)的(de)(de)大小可能出(chu)現640*480像(xiang)素,800*600像(xiang)素,1024*768像(xiang)素等不同尺(chi)寸。 

　　布局(ju)，就是以最(zui)適合(he)瀏(liu)覽(lan)的方式將圖片和文字排放在頁面的不(bu)同位(wei)置。 

　　你可能(neng)(neng)注意到(dao):“最(zui)適合”是(shi)一個不確(que)定的(de)形容(rong)詞(ci)，什(shen)(shen)么(me)才是(shi)最(zui)適合的(de)呢?抱歉的(de)是(shi)阿(a)捷(jie)不能(neng)(neng)也(ye)不可能(neng)(neng)給您(nin)一個完整的(de)正確(que)的(de)答案(an)。就好(hao)比有人希望知道(dao)成功的(de)秘訣是(shi)什(shen)(shen)么(me)，成功者只能(neng)(neng)建議您(nin)用(yong)什(shen)(shen)么(me)方法，什(shen)(shen)么(me)途徑(jing)才能(neng)(neng)最(zui)容(rong)易獲得(de)成功，而不可能(neng)(neng)有一步成功的(de)"秘訣"告訴您(nin)。 

　　我(wo)們(men)在設計思考系列文(wen)章第四篇講過站點(dian)整體的(de)創意(yi)，版面布局也是一個創意(yi)的(de)問題(ti)，但要比站點(dian)整體的(de)創意(yi)容易(yi)，有(you)規律的(de)多。讓我(wo)們(men)先(xian)來了解(jie)一下(xia)版面布局的(de)步驟: 

　　一(yi).草案 

　　新建頁(ye)面就象一(yi)張(zhang)白紙，沒有任何表格，框(kuang)架和約定俗(su)成的(de)(de)東西，你(ni)可(ke)以(yi)(yi)盡可(ke)能的(de)(de)發揮你(ni)的(de)(de)想象力，將你(ni)想到的(de)(de)"景(jing)象"畫上去(我(wo)們建議(yi)您用一(yi)張(zhang)白紙和一(yi)支鉛筆，當然用作圖軟(ruan)件Photoshop等也可(ke)以(yi)(yi))。這屬于創(chuang)造階段，不(bu)講究細膩工整(zheng)，不(bu)必(bi)考(kao)慮細節功能，只以(yi)(yi)粗(cu)陋的(de)(de)線條勾畫出創(chuang)意的(de)(de)輪廓即可(ke)。盡你(ni)的(de)(de)可(ke)能多畫幾(ji)張(zhang)，最(zui)后選定一(yi)個滿意的(de)(de)作為(wei)繼(ji)續創(chuang)作的(de)(de)腳本。 

　　二(er).粗略布局 

　　在(zai)草案(an)的(de)(de)(de)基礎(chu)上(shang)，將(jiang)你確(que)定需要(yao)(yao)放置的(de)(de)(de)功能模(mo)(mo)塊安(an)排(pai)到頁(ye)面上(shang)。(注:功能模(mo)(mo)塊我們在(zai)"首(shou)頁(ye)設計-引子"中(zhong)提(ti)過，主要(yao)(yao)包含網(wang)站標志(zhi),主菜單,新聞,搜索,友情鏈接(jie),廣告條,郵件列表,計數器,版權信(xin)息等)。注意，這里我們必(bi)須遵(zun)循突(tu)出重(zhong)點、平衡(heng)諧(xie)調的(de)(de)(de)原則，將(jiang)網(wang)站標志(zhi)，主菜單等最(zui)重(zhong)要(yao)(yao)的(de)(de)(de)模(mo)(mo)塊放在(zai)最(zui)顯(xian)眼，最(zui)突(tu)出的(de)(de)(de)位置，然后(hou)在(zai)考慮次要(yao)(yao)模(mo)(mo)塊的(de)(de)(de)排(pai)放。 

　　三.定案(an) 

　　將粗略(lve)布(bu)局(ju)精(jing)細化，具體化。(靠(kao)你的智慧和經(jing)驗，旁(pang)敲(qiao)側擊多方聯想(xiang)，才能作(zuo)出具有(you)創意的布(bu)局(ju)。)在布(bu)局(ju)過程中，我(wo)們可以(yi)遵循的原(yuan)則有(you): 

　　1、正常(chang)平衡---亦稱"勻稱"。多指左右、上下對照形式，主要強調(diao)秩序，能達到安(an)定誠(cheng)實、信(xin)賴的效(xiao)果。 

　　2、異常(chang)平(ping)衡---即非(fei)對照形式，但也(ye)要平(ping)衡和韻律，當然都是不均(jun)整(zheng)的，此種布(bu)局能達到強調性(xing)、不安性(xing)、高注目(mu)性(xing)的效(xiao)果。 

　　3、對比---所謂對比，不僅利(li)用色彩(cai)、色調等技巧(qiao)來作表現(xian)，在內(nei)容上也可涉(she)及(ji)古與(yu)今、新與(yu)舊、貧與(yu)富等對比。 

　　4、凝視(shi)---所謂凝視(shi)是利用(yong)頁面(mian)中人(ren)物視(shi)線，使(shi)瀏覽(lan)者(zhe)仿照跟(gen)隨的心理，以達到注視(shi)頁面(mian)的效果，一般多用(yong)明星凝視(shi)狀(zhuang)。 

　　5、空白---空白有兩種作用(yong)，一(yi)方(fang)(fang)(fang)面(mian)對(dui)其他網站表(biao)示突(tu)出卓越，另一(yi)方(fang)(fang)(fang)面(mian)也(ye)表(biao)示網頁品位的優越感，這(zhe)種表(biao)現方(fang)(fang)(fang)法對(dui)體顯網頁的格(ge)調十分(fen)有效(xiao)。 

　　6、盡量用(yong)圖片解說(shuo)---此法對不(bu)能用(yong)語(yu)(yu)言說(shuo)服、或用(yong)語(yu)(yu)言無法表(biao)達(da)的情感，特別有效。圖片解說(shuo)的內(nei)容(rong)，可以(yi)傳達(da)給瀏覽者(zhe)的更(geng)多的心理因素。 

　　------------(轉載自廣(guang)告(gao)大師樊志(zhi)育(yu)《廣(guang)告(gao)制作》) 

　　以上(shang)的(de)設計(ji)原則，雖然(ran)枯燥，但(dan)是(shi)我們(men)如果(guo)(guo)能領會并活用到(dao)頁面(mian)布局里，效果(guo)(guo)就大不一樣了(le)。比如， 

　　○網(wang)頁的白(bai)色背景太(tai)虛(xu)，則可以加些色快; 

　　○版面零(ling)散，可(ke)以(yi)用線條和(he)符號(hao)串聯; 

　　○左面文(wen)字過多，右面則可(ke)以(yi)插一張圖片保持(chi)平衡; 

　　○表格(ge)太規矩，可(ke)以改用(yong)導(dao)角(jiao)試試。 

　　經(jing)過不斷的(de)嘗試和推敲，你(ni)的(de)網(wang)頁一(yi)定會亮麗起(qi)來的(de)哦:) 

　　看看我們經常(chang)用到的版(ban)面布局(ju)形式: 

　　1."T"結構布局。所謂(wei)"T"結構。就是(shi)(shi)(shi)指頁(ye)面(mian)頂(ding)部(bu)為(wei)橫(heng)條(tiao)網(wang)站標志 廣告條(tiao)，下方(fang)左面(mian)為(wei)主(zhu)(zhu)菜單(dan)，右(you)面(mian)顯示(shi)內(nei)容的(de)布局，因為(wei)菜單(dan)條(tiao)背景教深(shen)，整體效果類似(si)英文字母"T",所以我(wo)們(men)稱之為(wei)"T"形布局。這(zhe)(zhe)是(shi)(shi)(shi)網(wang)頁(ye)設計中用的(de)最廣返的(de)一(yi)種布局方(fang)式。(圖略)這(zhe)(zhe)種布局的(de)優點是(shi)(shi)(shi)頁(ye)面(mian)結構清晰，主(zhu)(zhu)次分明。是(shi)(shi)(shi)初學者最容易上手的(de)布局方(fang)法。缺點是(shi)(shi)(shi)規矩(ju)呆(dai)板，如(ru)果細節色彩上不注(zhu)意，很(hen)容易讓人(ren)"看之無味"。 

　　2."口(kou)"型(xing)布局。這是一(yi)個(ge)象形的(de)說(shuo)法，就(jiu)是頁(ye)(ye)面(mian)(mian)(mian)一(yi)般上下各有一(yi)個(ge)廣告(gao)條(tiao)，左面(mian)(mian)(mian)是主(zhu)菜單(dan)，右面(mian)(mian)(mian)放友(you)情(qing)連接(jie)等(deng)，中間(jian)(jian)是主(zhu)要內(nei)容。(圖略)這種布局的(de)優(you)點(dian)是充分(fen)利用(yong)版面(mian)(mian)(mian)，信(xin)息量(liang)大(da)(我的(de)主(zhu)頁(ye)(ye)首頁(ye)(ye)即屬于(yu)這種布局)。缺(que)點(dian)是頁(ye)(ye)面(mian)(mian)(mian)擁擠，不夠靈(ling)活。也有將四邊空出，只用(yong)中間(jian)(jian)的(de)窗口(kou)型(xing)設計(ji)，例(li)如(ru)網易壁紙站,小乖工(gong)作室。 

　　3."三"型布局。這種布局多(duo)用于(yu)國外站點，國內用的不(bu)多(duo)。特(te)點是頁面上橫向兩條色(se)塊，將頁面整(zheng)體(ti)分割為四(si)部分，色(se)塊中大多(duo)放廣告(gao)條。 

　　4.對稱對比(bi)布(bu)局。顧(gu)名思(si)義，采(cai)取左右或(huo)者(zhe)上下(xia)對稱的(de)布(bu)局，一(yi)半深色(se)，一(yi)半淺色(se)，一(yi)般用于設計型站點(dian)。優(you)點(dian)是視覺沖擊力強，缺(que)點(dian)是將兩(liang)部分有(you)機的(de)結合比(bi)較困難。 

　　5.POP布(bu)局。POP引自廣告術語(yu)，就是指頁面(mian)布(bu)局象一張(zhang)宣傳海報，以一張(zhang)精美圖片(pian)作(zuo)為頁面(mian)的(de)設計中心。常(chang)用(yong)于時尚類(lei)站點(dian)，比(bi)如ELLE.com。優點(dian)顯而易(yi)見:漂亮(liang)吸引人(ren)。缺點(dian)就是速度慢(man)。作(zuo)為版面(mian)布(bu)局還是值得借鑒的(de)。 

　　以上總結了目(mu)前(qian)網絡上常見的布(bu)(bu)局，其實還有許許多多別具一格的布(bu)(bu)局，關(guan)鍵在(zai)于你(ni)的創意和(he) ;

　　設計了。對(dui)于版面布局的技巧，這里提供四個建議，您可以自己推敲(qiao): 

　　1.加強視覺效(xiao)果 

　　2.加強文案的(de)可(ke)視(shi)度和可(ke)讀(du)性 

　　3.統一感的(de)視覺 

　　4.新鮮(xian)和個性是布局(ju)的(de)最高境(jing)界 

　　本文首發小(xiao)乖(guai)工作室(www.xiaoguai.net.cn)歡迎(ying)合作交(jiao)流(liu)