個性網(wǎng)站設(shè)計之頁面設(shè)計

2022-07-13    分類: 網(wǎng)站設(shè)計

頁面設(shè)計包括甚多,可大可小,我分以下幾個要點(diǎn)與大家討論:頁面平鋪、整體規(guī)劃、功能易用性、氣氛情感表達(dá)。

一、頁面平鋪

把頁面平鋪開,主要的物件有:導(dǎo)航欄、LOGO、Banner、按鈕、圖片、文字。下面我就針對最主要的幾個部分具體講解。

1.導(dǎo)航欄

導(dǎo)航欄如果設(shè)計得恰到好處,是會給網(wǎng)頁本身增色很多(千萬不要太花哨,它屬于功能物件,喧賓奪主就不好了)。導(dǎo)航欄有一排、兩排、多排、圖片導(dǎo)航和Frame 框架快捷導(dǎo)航等等各種情況的設(shè)計。有時候是橫排,有時候則是豎排。另外還有一些動態(tài)的導(dǎo)航欄,如很精彩的Flash導(dǎo)航。導(dǎo)航欄設(shè)計要點(diǎn)歸納如下:

1)導(dǎo)航不多的情況下,通常是一排,橫豎都可以,其實欄目超過6個就可以考慮用兩排。

2)導(dǎo)航欄目很多的情況,也可以多排,甚至不規(guī)則地多排(一排個數(shù)不同,或長度不同)。商業(yè)設(shè)計或門戶站點(diǎn)通常都會有很多頻道,設(shè)計起來,就要考慮橫向雙排。使用豎排,會占用太大空間。

3)通常內(nèi)容不多的情況下,可能無所謂欄目,站點(diǎn)就包括了導(dǎo)航的具體內(nèi)容,如圖1所示。

4)雙排導(dǎo)航未必要挨在一起,可以自由一些,如圖2所示:上排有導(dǎo)航欄,圖片分隔開后則另起一排。

5)圖片式導(dǎo)航,很漂亮,占用頁面空間比較大。如圖2中每一個孩子圖像就是一個點(diǎn)擊熱點(diǎn)。

6)我推薦大家多用Flash制作導(dǎo)航,其體積小、變化多。

7)內(nèi)容很豐富的站點(diǎn),可以考慮使用快捷導(dǎo)航,即Frame 框架快捷導(dǎo)航,是因為不管你進(jìn)入哪個頁面都可以快速跳躍到另外的欄目,不會失去方向。

8)利用DHTML、JS、動態(tài)隱藏層等技術(shù)實現(xiàn)的多變化的導(dǎo)航,都有瀏覽器的支持問題。我建議大家不要給信息很多的站點(diǎn)作此導(dǎo)航。

9)不是所有的網(wǎng)站都有導(dǎo)航的。大家可根據(jù)自己情況而定。

2.LOGO(標(biāo)志)

關(guān)于LOGO的設(shè)計我會在以后的“CI行銷”一文中具體講解。這里我暫歸納下列兩個設(shè)計要點(diǎn):

1)LOGO的位置通常在頁面的左上角。根據(jù)你的設(shè)計,它不是一成不變的,所謂個性的設(shè)計,不論商業(yè)或個人,都要去大膽嘗試。這里為大家列出LOGO在頁面上常見的布局情況(圖3),以作參考。

2)網(wǎng)站的LOGO,雖然有動態(tài)的,但是絕對不適宜過分的動感,且不是所有的網(wǎng)站標(biāo)志都適合選用動態(tài)。

3.BANNER(廣告條)類型

幾種國際尺寸的Banner如下:468×60(全尺寸Banner)、392×72(全尺寸帶導(dǎo)航條Banner)、234×60(半尺寸Banner)、125×125(方形按鈕)、120×90(按鈕類型1)、120×60(按鈕類型2)、88×31(小按鈕)、120×240(垂直Banner),其中468×60的和88×31最多用,下面就常用的為大家講解一下。

1)468×60 全尺寸Banner

雖然尺寸為國際標(biāo)準(zhǔn),但是在設(shè)計頁面的時候,完全可以根據(jù)你的頁面占用空間來制定Banner廣告位和廣告條大小。

(1)一個頁面內(nèi)不易超出兩個468×60 全尺寸Banner。兩個條的時候,一般是上面一個,下面一個,如圖4所示。

(2)設(shè)計Banner配合頁面的兩種情況:單看Banner很難看,但是放入網(wǎng)頁中,卻會使網(wǎng)頁設(shè)計豐富而炫目,一般也就是468×60的Banner有這本事了。還有設(shè)計的時候必須要考慮LOGO跟別站互換時如何更適合他人網(wǎng)頁的風(fēng)格,所以該多做一些不同顏色不同情況的Banner。

2)88×31的Banner

(1)大家俗稱它為LOGO。

(2)好的Banner也要符合網(wǎng)站的風(fēng)格。經(jīng)常遇到一個很棒的Banner點(diǎn)開卻是很難看的主頁。雖然有被欺騙的感覺,但是從行銷的角度講,它設(shè)計越好,點(diǎn)擊率越高,也就越成功。

(3)如圖4中,區(qū)域7內(nèi)的一般的廣告條, 88×31 Banner也可以用來豐富頁面。這樣的情況很少見,值得注意。

3)Banner設(shè)計注意點(diǎn):

(1)Banner有動態(tài)和靜態(tài)兩種。在瀏覽網(wǎng)頁的過程中,雖然閃爍的圖案會產(chǎn)生瞬間記憶刺激,引起注意,但這種記憶往往為壓迫性的,久之易產(chǎn)生負(fù)面效應(yīng),從而模糊記憶。而穩(wěn)定的畫面不易引發(fā)特殊的關(guān)注,但如果有良好的界面引導(dǎo)和內(nèi)容,可產(chǎn)生良性的記憶,持久而牢固。根據(jù)粗略統(tǒng)計,100個Banner里面有1/3是靜態(tài)的??磥泶蠹覍討B(tài)的Banner更加看好。

(2)Banner的“重量”要輕!以468×60的Banner為例,最好是15K左右,不要超過22K。而88×31的Banner最好在5K左右,不要超過7K。

4)設(shè)計要點(diǎn):

(1)Banner的文字不能太多,用一兩句話來表達(dá)即可。

(2)廣告語要朗朗上口。

(3)圖形無須太繁雜,文字盡量使用黑體等粗壯的字體,否則在視覺上很容易被網(wǎng)頁其他內(nèi)容淹沒。

(4)圖形盡量選擇顏色數(shù)少,能夠說明問題的事物。

(5)如果選擇顏色很復(fù)雜的物體,要考慮一下在低顏色數(shù)情況下,是否會有明顯的色斑。

(6)盡量不要使用彩虹色、暈邊等復(fù)雜的特技圖形效果,這樣做會大大增加圖形所占據(jù)的顏色數(shù),增大體積。

4.按鈕

網(wǎng)頁設(shè)計是新的行業(yè),沒有很久的歷史和規(guī)范的教本,長期以來對按鈕的定義也不是很清晰。哪些算是按鈕呢?如圖5中用圈作記的地方:其中“用戶登錄”、“登錄按鈕”“More按鈕”、“個股推薦”等等類似物件,通常都統(tǒng)稱為按鈕。某種意義上導(dǎo)航的存在形式也是按鈕,只是它的功能很特殊。如果經(jīng)常做網(wǎng)頁,就會感覺到按鈕設(shè)計的要求已越來越高。

分享文章:個性網(wǎng)站設(shè)計之頁面設(shè)計
網(wǎng)站路徑:http://www.muchs.cn/news26/177826.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站設(shè)計

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

微信小程序開發(fā)