網(wǎng)頁設(shè)計(jì)的技巧分析
首先我們需要了解一下網(wǎng)站的頁面組成,網(wǎng)站一般包括以下幾部分:
首頁:網(wǎng)站的門面,如同公司的形象,特別注重設(shè)計(jì)和規(guī)劃。
框架頁:網(wǎng)站的主要結(jié)構(gòu)頁面,又稱次首頁、內(nèi)頁,大型網(wǎng)站往往框架頁即首頁,如一些門戶網(wǎng)站??蚣茼撝饕蔷W(wǎng)站內(nèi)部主要欄目的首頁,講究風(fēng)格的一致性,并于主頁呼應(yīng)。
普通頁:網(wǎng)站主要的承載信息的頁面,設(shè)計(jì)要求不高,但要求鏈接準(zhǔn)確、文字無誤、圖文并茂,并沿襲網(wǎng)頁的風(fēng)格。
彈出頁:一般用于廣告、新聞、消息、到其他網(wǎng)站的鏈接等等,一般用的很少。
通過上面的分析,我們可以看出:
從功能上來看,首頁主要承擔(dān)著樹立企業(yè)形象(當(dāng)然不僅僅是首頁)的作用,框架頁在導(dǎo)航方面起著重要的作用,比如各欄目?jī)?nèi)部主要內(nèi)容的介紹,都可以在框架頁中體現(xiàn)再進(jìn)入普通頁,讓瀏覽者能夠迅速了解網(wǎng)站各欄目的主要內(nèi)容,擇其需要而瀏覽,而普通頁則是主要的信息頁面,也是網(wǎng)站的非常終頁面,對(duì)于大型網(wǎng)站,這種結(jié)構(gòu)非常重要,而對(duì)于中小型企業(yè),網(wǎng)站規(guī)模較小、頁面數(shù)量不多,有時(shí)框架頁就起著普通頁的作用,至于彈出頁,建議您不是必要,非常好不要用。下面詳細(xì)介紹各頁面的設(shè)計(jì)技巧:
一、首頁設(shè)計(jì)技巧
網(wǎng)站首頁是企業(yè)網(wǎng)上的虛擬門面,在此,提醒上網(wǎng)的企業(yè)注意自己門面的設(shè)計(jì),決不能敷衍了事、馬馬虎虎。我們會(huì)經(jīng)??吹接∷⒕赖漠a(chǎn)品目錄或廣告,當(dāng)您屢屢看到那些印有產(chǎn)品目錄或廣告的精美印刷制品的時(shí)候,相信您或多或少會(huì)對(duì)有關(guān)的產(chǎn)品形成一種好感,即使您不會(huì)購買,也必然對(duì)這些產(chǎn)品形成一定程度的認(rèn)同。而對(duì)于設(shè)計(jì)毛糙的宣傳品,您肯定會(huì)懷疑其內(nèi)容的真實(shí)性,從而對(duì)其產(chǎn)品或服務(wù)產(chǎn)生質(zhì)疑。好,現(xiàn)在說說網(wǎng)站的設(shè)計(jì),相信您會(huì)同意這種說法:網(wǎng)站的頁面就好比是“無紙的印刷品”。既然如此,我們會(huì)因此而得出一個(gè)結(jié)論:精良和專業(yè)網(wǎng)站的設(shè)計(jì),如同制作精美的印刷品,會(huì)大大刺激消費(fèi)者(訪問者)的購買欲望,反之,您公司所提供的產(chǎn)品或服務(wù)將不會(huì)給消費(fèi)者(訪問者)留下較好的印象。值得一提的是,除非您的企業(yè)有專業(yè)的網(wǎng)站規(guī)劃、設(shè)計(jì)人員,否則您非常好找專業(yè)公司或?qū)I(yè)人員為您設(shè)計(jì)制作,一個(gè)優(yōu)秀的專業(yè)設(shè)計(jì)人員會(huì)很快明白您的意圖,并根據(jù)您的建站目的提出建設(shè)性的意見。
一般來說,網(wǎng)站首頁的形式不外乎有兩種,一種是純粹的形象展示型,這種類型文字信息較少,圖像信息較多,通過藝術(shù)造型和設(shè)計(jì)布局,利用一系列與公司形象和產(chǎn)品、服務(wù)有關(guān)的圖像、文字信息,組成一幅生動(dòng)的畫面,向?yàn)g覽者展示一種形象、一個(gè)氛圍,從而吸引瀏覽者進(jìn)入瀏覽。這需要設(shè)計(jì)者具有良好的設(shè)計(jì)基礎(chǔ)和審美能力,能夠努力挖掘企業(yè)深層的內(nèi)涵,展示企業(yè)文化。這種類型的首頁在設(shè)計(jì)過程中一定要明確要以設(shè)計(jì)為主導(dǎo),通過色彩、布局給訪問者留下深刻的印象,當(dāng)然,我們不能為了設(shè)計(jì)而設(shè)計(jì),我們的目的是營(yíng)銷,在設(shè)計(jì)過程中一定要牢記這一點(diǎn)!
另一種是信息羅列型,一般的大、中型企業(yè)網(wǎng)站和門戶網(wǎng)站常用的方式,即在首頁中就羅列出網(wǎng)站的主要內(nèi)容分類、重點(diǎn)信息、網(wǎng)站導(dǎo)航、公司信息等等,也就是我們上面談到的框架頁,這種風(fēng)格比較適合網(wǎng)站信息量大,內(nèi)容豐富的網(wǎng)站,因?yàn)槭且哉故拘畔橹?,這是的設(shè)計(jì)就要在細(xì)微之處體現(xiàn)企業(yè)形象,建議設(shè)計(jì)人員非常好仔細(xì)閱讀企業(yè)的CI手冊(cè),熟悉企業(yè)標(biāo)志、吉祥物、字體及用色標(biāo)準(zhǔn),在網(wǎng)站的局部體現(xiàn)出來,往往平淡之中一個(gè)優(yōu)美的符合企業(yè)特點(diǎn)的曲線就能夠給人以深刻的印象,從而將企業(yè)形象印在瀏覽者的腦海里。設(shè)計(jì)人員在設(shè)計(jì)過程中要注意使用這些語言符號(hào)來表達(dá)一種獨(dú)特的企業(yè)信息。
二、風(fēng)格保持一致——內(nèi)頁設(shè)計(jì)技巧
如何保持網(wǎng)站風(fēng)格的一致,是進(jìn)行內(nèi)頁設(shè)計(jì)過程中考慮的重要方面,根據(jù)我的經(jīng)驗(yàn),您可以嘗試以下幾種設(shè)計(jì)方式:
1、結(jié)構(gòu)的一致性:我們知道,網(wǎng)站的統(tǒng)一性在網(wǎng)站營(yíng)銷中占重要地位,而網(wǎng)站結(jié)構(gòu)是網(wǎng)站風(fēng)格統(tǒng)一的重要手段,包括網(wǎng)站布局、文字排版、裝飾性元素出現(xiàn)的位置、導(dǎo)航的統(tǒng)一、圖片的位置等等,到國(guó)外著名的電子商務(wù)網(wǎng)站瀏覽,你會(huì)發(fā)現(xiàn)這些網(wǎng)站結(jié)構(gòu)驚奇的一致性,所不同的是色彩或內(nèi)容,在結(jié)構(gòu)的一致性中,我們要強(qiáng)調(diào)網(wǎng)站標(biāo)志性元素的一致性,即網(wǎng)站或公司名稱、網(wǎng)站或企業(yè)標(biāo)志、導(dǎo)航及輔助導(dǎo)航的形式及位置、公司聯(lián)系信息等,這種方式是目前網(wǎng)站普遍采用的結(jié)構(gòu),一方面減少設(shè)計(jì)、開發(fā)的工作量,同時(shí)更有利于以后的網(wǎng)站維護(hù)與更新。
2、色彩的一致性:方式是保持站點(diǎn)主體色彩的一致,只改變局部色塊,優(yōu)點(diǎn)是一個(gè)獨(dú)特色彩的網(wǎng)站會(huì)給人留下很深刻的印象,因?yàn)槿说囊曈X對(duì)色彩要比布局更敏感,更容易在大腦中形成記憶符號(hào)。在色彩的一致性中,我們強(qiáng)調(diào)的是如果企業(yè)有自身的CI形象,非常好在互聯(lián)網(wǎng)中沿襲這個(gè)形象,給觀眾網(wǎng)上網(wǎng)下一致的感覺,更有利于企業(yè)形象的樹立。一個(gè)建議是選取一兩種主要色彩,幾種輔助色彩。
3、利用導(dǎo)航取得統(tǒng)一:導(dǎo)航是網(wǎng)站的一項(xiàng)重要組成部分,一個(gè)出色的富有企業(yè)特性的導(dǎo)航將會(huì)給人留下深刻的印象,比如將標(biāo)志的形態(tài)寓于導(dǎo)航之中,或?qū)?dǎo)航設(shè)計(jì)在整個(gè)網(wǎng)站布局之中等等不一而足,花點(diǎn)力氣在導(dǎo)航上,也會(huì)設(shè)計(jì)出一個(gè)出色的站點(diǎn)。
|4、特別元素的一致性:在網(wǎng)站設(shè)計(jì)中,個(gè)別具有特色的元素(如標(biāo)志、象征圖形、局部設(shè)計(jì)等)重復(fù)出現(xiàn),也會(huì)給訪問者留下深刻印象。比如網(wǎng)站結(jié)構(gòu)在某一點(diǎn)上的變化,由直線變?yōu)閳A弧、暗色點(diǎn)綴的亮色、色彩中的補(bǔ)色等等。
5、利用圖像取得統(tǒng)一:網(wǎng)頁中的圖像在使用上一定要甚之又甚,尤其是一些動(dòng)畫,網(wǎng)頁中充斥著各種可有可無的動(dòng)畫,而這些動(dòng)畫根本與本企業(yè)內(nèi)容無關(guān)!認(rèn)真檢查網(wǎng)頁中的動(dòng)畫,將沒用的刪掉!這里我們所說的利用圖像取得統(tǒng)一,決不是在每頁中放置幾個(gè)動(dòng)畫!而是作為網(wǎng)站結(jié)構(gòu)一部分的局部圖像,根據(jù)網(wǎng)頁內(nèi)容的不同,配以相應(yīng)的圖像或動(dòng)畫,從而給瀏覽者形成頁面的連續(xù)性。
6、利用背景取得統(tǒng)一:從技術(shù)上而言,網(wǎng)頁背景包括背景色和背景圖像兩種,一般來說,我們并不提倡使用背景圖像,而使用背景色或色塊。原因很明顯,第一,下載速度,背景色的下載速度忽略不計(jì),而背景圖像就得根據(jù)圖像字節(jié)大小下載了,這里需要說明的是,如果你的背景圖像比較深,那么非常好將背景色置為深色調(diào)(默認(rèn)的背景色是白色),這樣在等待瀏覽器下載背景圖片的時(shí)候前面的淺色文字可以很容易閱讀,因?yàn)槿绻斜尘吧?,瀏覽器先將其下載,然后下載背景圖片;第二,顯示效果,經(jīng)??吹絿?guó)內(nèi)一些網(wǎng)站設(shè)有背景圖像,或者是公司的廠房、辦公大樓,或者是產(chǎn)品圖片,甚至是某某人物的照片,使得前面的文字很難辨認(rèn)!給人一種很不舒服的感覺,讓人無法停留。在此,提醒您注意:有效利用背景取得網(wǎng)站統(tǒng)一和專業(yè)化的方法有以下幾種:
第一,認(rèn)識(shí)到并不是所有的圖片都可以作為背景,在考慮設(shè)置網(wǎng)站背景圖像的時(shí)請(qǐng)您注意;
第二,加強(qiáng)與前景的明暗對(duì)比,即要么淡化背景,隱隱約約可以看到即可,要么加深背景,而將前面的文字亮化。
那么什么適合網(wǎng)頁背景呢?一個(gè)好的建議是將公司的標(biāo)志、象征性的簡(jiǎn)單圖片作為背景,并將其淡化,使瀏覽者在閱讀網(wǎng)站內(nèi)容的同時(shí)不經(jīng)意記下公司的標(biāo)志。曾經(jīng)一個(gè)網(wǎng)站的背景設(shè)計(jì)給我留下深刻的印象:?jiǎn)紊尘爸幸粋€(gè)網(wǎng)站標(biāo)志的居中放大淡化,前面元素中也不斷重復(fù)這個(gè)標(biāo)志:如提交按紐形狀刻意設(shè)計(jì)成標(biāo)志的形式等等,在整個(gè)頁面中形成特有元素在大小、明暗及位置的呼應(yīng),很好地塑造了網(wǎng)站的特有形象。
三、色彩搭配
網(wǎng)頁中非常難處理的也就是色彩搭配的問題了。如何運(yùn)用非常簡(jiǎn)單的色彩表達(dá)非常豐富的含義,體現(xiàn)企業(yè)形象是網(wǎng)頁設(shè)計(jì)人員需要不斷學(xué)習(xí)、探索的課題。如何進(jìn)行色彩搭配是一門學(xué)問,下面的一些方法是我在實(shí)踐過程中的體會(huì),希望能夠?yàn)槟鸬揭欢ǖ膮⒖甲饔谩?/p>
1、運(yùn)用相同色系色彩:所謂相同色系,是指幾種色彩在360°色相環(huán)上位置十分相近,大約在45°左右或同一色彩不同明度的幾種色彩,如:,這種搭配的優(yōu)點(diǎn)是易于使網(wǎng)頁色彩趨于一致,對(duì)于網(wǎng)頁設(shè)計(jì)新手有很好的借鑒作用,這種用色方式容易塑造網(wǎng)頁和諧統(tǒng)一的氛圍,缺點(diǎn)是容易造成頁面的單調(diào),因此往往利用局部加入對(duì)比色來增加變化,如局部對(duì)比色彩的圖片等。這種方法不失為一種設(shè)計(jì)的好方法。
2、運(yùn)用對(duì)比色或互補(bǔ)色:所謂對(duì)比色,是指色相環(huán)相距較遠(yuǎn),大約在100°左右,視覺效果鮮亮、強(qiáng)烈,而互補(bǔ)色則是色相環(huán)上相距非常遠(yuǎn)的連種色彩,即相距180°,其對(duì)比關(guān)系非常強(qiáng)烈、非常富有刺激性,往往使畫面十分突出,如:,這種用色方式容易塑造活潑、韻動(dòng)的網(wǎng)頁效果,特別適合體現(xiàn)輕松、積極的素材的網(wǎng)站,缺點(diǎn)是容易造成色彩的花,使用中注意色彩使用的度。
值得注意的是,以上兩種用色方式在實(shí)際應(yīng)用中要注意主體色彩的運(yùn)用,即以一種或兩種色彩為主,其它色彩為輔,不要幾種色彩等量使用,以免造成色彩的混亂。
3、使用過渡色:過渡色能夠神奇地將幾種不協(xié)調(diào)的色彩統(tǒng)一起來,在網(wǎng)頁中合理地使用過渡色能夠使你的色彩搭配技術(shù)更上一層樓。過渡色包括幾種形式:兩種色彩的中間色調(diào)、單色中混入黑、白、灰進(jìn)行調(diào)和以及單色中混入相同色彩進(jìn)行調(diào)和等等,您可以自己嘗試調(diào)配,在以后的更新中,我會(huì)專題介紹如何使用過渡色。
四、版面布局
一般來說,企業(yè)網(wǎng)站首頁的布局比較靈活,著重設(shè)計(jì),這里我所說的布局主要是指內(nèi)頁的版面布局。中、小型企業(yè)網(wǎng)站的內(nèi)頁布局一般比較簡(jiǎn)單,即內(nèi)頁的一欄式版面布局,從排版布局的角度而言,我們還可以設(shè)計(jì)成等分兩欄式、三欄式、多欄式,不等分兩欄式、三欄式、多欄式等等,但因?yàn)闉g覽器寬幅有限,一般不宜設(shè)計(jì)成三欄以上的布局。
在版面布局中主要是考慮導(dǎo)航、必要信息與正文之間的布局關(guān)系。比較多的情況是采用頂部放置必要的信息,如公司名稱、標(biāo)志、廣告條以及導(dǎo)航條,或?qū)?dǎo)航條放在左側(cè)而右側(cè)是正文等等,這樣的布局結(jié)構(gòu)清晰、易于使用。當(dāng)然,您也可以嘗試這些布局的變化形式,如:左右兩欄式布局,一半是正文,另一半是形象的圖片、導(dǎo)航;或正文不等兩欄式布置,通過背景色區(qū)分,分別放置圖片和文字等等。在設(shè)計(jì)中注意多吸取好的網(wǎng)站設(shè)計(jì)的精髓。