首頁(yè) > 設計 > 網(wǎng)頁(yè)設計 > 正文

個(gè)性網(wǎng)頁(yè)設計之頁(yè)面設計

2018-10-16 20:51:33
字體:
來(lái)源:轉載
供稿:網(wǎng)友

 頁(yè)面設計包括甚多,可大可小,我分以下幾個(gè)要點(diǎn)與大家討論:頁(yè)面平鋪、整體規劃、功能易用性、氣氛情感表達。大家有什么問(wèn)題可以給我來(lái)信relen@sina.com。
  一、頁(yè)面平鋪
  把頁(yè)面平鋪開(kāi),主要的物件有:導航欄、LOGO、Banner、按鈕、圖片、文字。下面我就針對最主要的幾個(gè)部分具體講解。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1)468×60 全尺寸Banner

  雖然尺寸為國際標準,但是在設計頁(yè)面的時(shí)候,完全可以根據你的頁(yè)面占用空間來(lái)制定Banner廣告位和廣告條大小。

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

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

  2)88×31的Banner

  (1)大家俗稱(chēng)它為L(cháng)OGO。

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

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

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

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

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

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

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

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

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

  (4)圖形盡量選擇顏色數少,能夠說(shuō)明問(wèn)題的事物。

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

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

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

  按鈕設計要點(diǎn):

  1)設計按鈕要同頁(yè)面的整體協(xié)調,不能太搶眼。

  2)有的頁(yè)面很單調,還要依靠花哨的按鈕來(lái)提一下。

  3)選用的字體,選用的插圖,或插圖及字體搭配,都要考慮字跡清楚,色彩簡(jiǎn)單一些,不要超過(guò)四種。

  4)很長(cháng)的按鈕可能就是框架的分界,盡量要纖細一些,否則頁(yè)面會(huì )顯臃腫。

  5.圖片
  為了美化頁(yè)面,圖片是任何一個(gè)頁(yè)面都要用到的,但要考慮網(wǎng)速,建議大家能不用就不用,圖片的運用要合理。

  圖片運用要點(diǎn):

  1)圖形的主體最好清晰可見(jiàn)。

  2)圖形的含義最好簡(jiǎn)單明了。

  3)圖片內所含文字應該清晰容易辨認。

  4)背景與主體明度對比比例應為3∶1到5∶1之間為宜。

  5)淡色系列的背景有助于整體和諧。

  6)淡色材質(zhì)背景最佳,能與主題分離之淺色標志或文字背景亦可。

  6.文字
  文字也是設計的。這里給大家列出幾個(gè)設計要點(diǎn):

  1)每一行文字的長(cháng)度最好20到30個(gè)中文字(40到60個(gè)英文字母)。

  2)行距與字距已由軟件內定。設計時(shí)注意段落與段落間空行及首行縮排方式以輔助閱讀。

  3)標題以H1到H3字號為佳,內文Font size=3到4級為佳。

  4)同版面字型最好在三種以?xún)取?/P>

  5)文字的顏色最好也是三種以?xún)取?/P>

  6)文字在顏色上要與背景區別。

  7)內文的排列向左對齊并與左邊界保持適當距離??梢杂帽砀裉钊胛淖忠赃_此效果。

  8)表格或清單內的字運用相同字型與字體大小,以利辨別。這些都是為用戶(hù)服務(wù)的設計,很重要哦!

  二、整體規劃
  1.有共性,才有統一,有細節區別,就有層次。

  2.防止設計與實(shí)現過(guò)程中的偏差,不要定死具體要放多少條信息。

  3.設計的各部分,要配合整體風(fēng)格,夸張一點(diǎn)好像VI。

  4.不僅頁(yè)面上各項設計要統一,而且網(wǎng)站的各級別頁(yè)面也要統一。

  5.頁(yè)面要“透氣”,就是信息不要太過(guò)集中,以免文字編排太緊密。

  6.不要有太多分散注意力的點(diǎn)。動(dòng)態(tài)閃爍要適中。

  7.頁(yè)面留白部分,要根據平面設計原理來(lái)設計,請注意,分欄式結構不宜留白。

  8.還要考慮到瀏覽器上部占用的屏幕空間,防止圖片截斷等造成視覺(jué)效果不好。

  9.首頁(yè)留白布局部分我為大家準備了一個(gè)例圖(圖6)供參考。

  三、功能易用性
  任何網(wǎng)站都要把這個(gè)問(wèn)題放在第一位。不過(guò)大家請注意以下幾點(diǎn):

  1.導航欄應最先調入,以便??涂焖偾巴栊畔⒖臻g。

  2.頁(yè)面長(cháng)度要短,使得用戶(hù)在信息空間內可迅速移動(dòng)。

  3.導航設計方向要一致。支持導航的層次按鈕應當從上到下或從左到右,但不要兩者都用,不要混用方向。

  四、氣氛情感表達
  氣氛會(huì )自然地激發(fā)出一種情感,不管它來(lái)自圖片、顏色、標題或者是動(dòng)態(tài)的廣告,只要是來(lái)自頁(yè)面,本身就具備了一種表達思想。舉個(gè)對比很鮮明的例子:瀏覽恐怖站點(diǎn)和瀏覽圣誕節慶祝頁(yè)面,你會(huì )有怎樣的感覺(jué)呢?這就是個(gè)性。

  五、推薦站點(diǎn)
  1.導航
  http://www.blashig.com/ 非常不錯的Flash導航。

  http://www.mtvhome.de/ 德國mtv站點(diǎn),導航很典雅。

  http://www.mtve.com/ 值得學(xué)習的下拉式菜單導航,進(jìn)任何一個(gè)頁(yè)面你都會(huì )看見(jiàn)那個(gè)Flash,真的很漂亮。

  http://www.alistapart.com/index.html 右置導航并不常見(jiàn)。

  http://www.giantrobot.com/index2.html 簡(jiǎn)易的導航,也很舒服。

  介紹兩個(gè)收集Banner 的站點(diǎn),可以學(xué)習一下別人的創(chuàng )意,提高自己。

  http://www.homepagecn.com/fbl_brjx/

  http://www.v-4ever.com/8dstudio/base.htm

  2.按鈕
  http://www.apple.com/ 蘋(píng)果按鈕,經(jīng)典且著(zhù)名。

  http://www.mtvchinese.com/臺灣Mtv。

  http://www.mtvjapan.com/shows/index.html日本MTV,我覺(jué)得它的按鈕真的不錯。簡(jiǎn)潔、特別。

  3.圖片運用
  http://www.mayto.com/

  http://www.photoshopclub.com/

  4.首頁(yè)的留白
  http://www.fathomcapital.com/default1.htm

  http://www.litewerx.dk/

  5.頁(yè)面內的留白
  http://www.mtvasia.com/Music/AtoZ/index.html 它還是右邊導航的,圖片運用也很好。

  6.情感烘托好的站點(diǎn)
  http://www.celine.com/ 時(shí)尚站點(diǎn),一個(gè)很棒的Flash。

本文作者:
發(fā)表評論 共有條評論
用戶(hù)名: 密碼:
驗證碼: 匿名發(fā)表