前 言
目前，網(wǎng)絡(luò )上有關(guān)網(wǎng)頁(yè)制作的各種教程已經(jīng)相當多，可以方便地學(xué)習到最新的技術(shù)和技巧?？墒?，有關(guān)網(wǎng)頁(yè)的設計,比如設計靈感的實(shí)現，風(fēng)格的確定，發(fā)展策略，技術(shù)的篩選等的文章卻比較少，許多網(wǎng)友往往有好的材料，卻苦惱沒(méi)有好的具有表現力的設計。
網(wǎng)站設計，包含的內容非常多。大體分兩個(gè)方面：
一方面是純網(wǎng)站本身的設計比如文字排版，圖片制作，平面設計，三維立體設計，靜態(tài)無(wú)聲圖文，動(dòng)態(tài)有聲影像等；
另一方面是網(wǎng)站的延伸設計，包括網(wǎng)站的主題定位和瀏覽群的定位，智能交互，制作策劃，形象包裝，宣傳營(yíng)銷(xiāo)等等。
這兩方面相輔相成（感覺(jué)有點(diǎn)象寫(xiě)辨證論文：），加之網(wǎng)絡(luò )技術(shù)的飛速發(fā)展，要提出一個(gè)絕對正確和權威的設計思路是不可能的，要想在一篇文章中概括出來(lái)也很難，所以阿捷根據建設一個(gè)網(wǎng)站的思路，將自己幾年來(lái)網(wǎng)站設計制作的心得整理成一個(gè)系列“講座”，告訴給大家（注意：我并不會(huì )非常具體地講某一個(gè)技術(shù)或制作技巧，重點(diǎn)在于思路）希望能給您一些幫助。下面是大致的提綱：
1.定位你的網(wǎng)站主題和名稱(chēng)
2.定位你的網(wǎng)站CI形象
3.確定你的欄目和版塊
4.網(wǎng)站的整體風(fēng)格創(chuàng )意設計
5.網(wǎng)站的層次結構和鏈接結構
6.首頁(yè)的設計
7.版面布局的竅門(mén)
8.色彩的搭配
我們開(kāi)始之前，首先明確幾個(gè)前提：
一．網(wǎng)站設計與網(wǎng)站制作。我們說(shuō)網(wǎng)站“設計”而不是網(wǎng)站“制作”，它們的區別在于設計是一個(gè)思考的過(guò)程，而制作只是將思考的結果表現出來(lái)。一個(gè)成功的網(wǎng)站首先需要一個(gè)優(yōu)秀的設計，然后輔之優(yōu)秀的制作。設計是網(wǎng)站的核心和靈魂，一個(gè)相同的設計可以有多種制作表現的方式。
二．我們說(shuō)的“網(wǎng)站”是指有確定主題和明確目的的實(shí)用性站點(diǎn)，不包括純表現類(lèi)或者純文字類(lèi)等網(wǎng)站。
三．在文章中，可能舉例說(shuō)明或點(diǎn)評到某些具體站點(diǎn)。首先申明，阿捷不存在為任何站點(diǎn)作廣告的 “嫌疑”。
定位你的網(wǎng)站主題和名稱(chēng)
作者：阿捷
ajie@soim.com 1.定位你的網(wǎng)站主題和名稱(chēng)
2.定位你的網(wǎng)站CI形象
3.確定你的欄目和版塊
4.網(wǎng)站的整體風(fēng)格創(chuàng )意設計
5.網(wǎng)站的層次結構和鏈接結構
6.首頁(yè)的設計
7.版面布局的竅門(mén)
8.色彩的搭配
設計一個(gè)站點(diǎn)，首先遇到的問(wèn)題就是定位網(wǎng)站主題。
所謂主題也就是你的網(wǎng)站的題材。網(wǎng)絡(luò )上的網(wǎng)站題材千奇百怪,琳瑯滿(mǎn)目。只要你想的到，就可以把它制作出來(lái)。下面是美國《個(gè)人電腦》雜志(PC Magazine)評出的99年度排名前100位的全美知名網(wǎng)站的十類(lèi)題材，對我們有一些參考價(jià)值。
第1類(lèi)：網(wǎng)上求職
第2類(lèi)：網(wǎng)上聊天／即時(shí)信息/ ICQ
第3類(lèi)：網(wǎng)上社區／討論 / 郵件列表
第4類(lèi)：計算機技術(shù)
第5類(lèi)：網(wǎng)頁(yè)/ 網(wǎng)站開(kāi)發(fā)
第6類(lèi)：娛樂(lè )網(wǎng)站
第7類(lèi)：旅行
第8類(lèi)：參考 /資訊
第9類(lèi)：家庭/教育
第10類(lèi)：生活/時(shí)尚
每個(gè)大類(lèi)都可以繼續細分，比如娛樂(lè )類(lèi)再分為體育 /電影/ 音樂(lè )大類(lèi)，音樂(lè )又可以按格式分為MP3，VQF，Ra，按表現形式分古典，現代，搖滾等。以上都只是最常見(jiàn)的題材，還有許多專(zhuān)業(yè)的，另類(lèi)的，獨特的題材可以選擇，比如中醫，熱帶魚(yú)，天氣預報等等，同時(shí)，各個(gè)題材相聯(lián)系和交叉結合可以產(chǎn)生新得題材，例如旅游論壇（旅游+討論），經(jīng)典入球播放（足球+影視）按這樣分下去，題材可以有成千上萬(wàn)個(gè)，你不會(huì )再為題材重復，難以選擇而煩惱了吧:)
對于題材的選擇，我的建議是：
1.主題要小而精。定位要小，內容要精。如果你想制作一個(gè)包羅萬(wàn)象的站點(diǎn)，把所有您認為精彩的東西都放在上面，那么往往會(huì )事與愿違，給人的感覺(jué)是沒(méi)有主題，沒(méi)有特色，樣樣有卻樣樣都很膚淺，因為您不可能有那么多的精力去維護它。網(wǎng)絡(luò )的最大特點(diǎn)就是新和快，目前最熱門(mén)的個(gè)人主頁(yè)都是天天更新甚至幾小時(shí)更新一次。最新的調查結果也顯示，網(wǎng)絡(luò )上的“主題站”比“萬(wàn)全站”更受人們喜愛(ài)，就好比專(zhuān)賣(mài)店和百貨商店，如果我需要買(mǎi)某方面的東西，肯定會(huì )選擇專(zhuān)買(mǎi)店。再舉個(gè)例子，我的一位網(wǎng)友KK希望制作文學(xué)方面的題材，但是文學(xué)也包括許多許多內容，有小說(shuō)，詩(shī)歌，散文；有科幻，武俠，推理；阿捷仔細了解了他的擅長(cháng)和想要提供的主要內容，最后將題材定位在網(wǎng)絡(luò )文學(xué)上，刪除了原有的一些無(wú)關(guān)的文學(xué)作品，集中擴大和整理網(wǎng)絡(luò )文學(xué)作品。網(wǎng)站推出后，很快受到大家的喜愛(ài)。
2.題材最好是你自己擅長(cháng)或者喜愛(ài)的內容。比如：您對擅長(cháng)編程，就可以建立一個(gè)編程愛(ài)好者網(wǎng)站；對足球感興趣，可以報道最新的戰況，球星動(dòng)態(tài)等。這樣在制作時(shí)，才不會(huì )覺(jué)得無(wú)聊或者力不從心。興趣是制作網(wǎng)站的動(dòng)力，沒(méi)有熱情，很難設計制作出杰出的作品。
3.題材不要太濫或者目標太高。“太濫”是指到處可見(jiàn)，人人都有的題材；比如軟件下載，免費信息。“目標太高”是指在這一題材上已經(jīng)有非常優(yōu)秀，知名度很高的站點(diǎn)，你要超過(guò)它是很困難的。除非你下決心和有實(shí)力競爭并超過(guò)它，記住，在互聯(lián)網(wǎng)上只有第一，人們往往只記得最好的網(wǎng)站，第二第三名的印象則會(huì )淺得多。OK，如果你已經(jīng)有一個(gè)絕妙的主意了，那我們開(kāi)始為網(wǎng)站起名字。（哎呀，別踢我?。┠赡苷J為起名字與網(wǎng)站設計無(wú)關(guān)，阿捷在這里浪費時(shí)間。其實(shí)網(wǎng)站名稱(chēng)也是網(wǎng)站設計的一部分，而且是很關(guān)鍵的一個(gè)要素。你來(lái)看，“電腦學(xué)習室”和“電腦之家”顯然是后者簡(jiǎn)練；“迷笛樂(lè )園”和“MIDI樂(lè )園”顯然是后者明晰；“兒童天地”和“中國幼兒園”顯然是后者大氣。我們都知道PIIICUP的中文名稱(chēng)“奔騰”，如果改為“奔跑”，可能就沒(méi)有今天這么“火”了:)。和現實(shí)生活中一樣，網(wǎng)站名稱(chēng)是否正氣，響亮，易記，對網(wǎng)站的形象和宣傳推廣也有很大影響。一般的建議是：
1). 名稱(chēng)要正。這個(gè)“正”是阿捷自己的說(shuō)法，其實(shí)就是要合法，和理，和情。不能用反動(dòng)的，色情的，迷信的，危害社會(huì )安全的名詞語(yǔ)句。
2). 名稱(chēng)要易記。根據中文網(wǎng)站瀏覽者的特點(diǎn)，除非特定需要，網(wǎng)站名稱(chēng)最好用中文名稱(chēng)，不要使用英文或者中英文混合型名稱(chēng)。例如：beyond studio和超越工作室，后者更親切好記。另外，網(wǎng)站名稱(chēng)的字數應該控制在六個(gè)字（最好四個(gè)字）以?xún)?，比?#8220;XX閣”“XX設計室”，四個(gè)字的可以用成語(yǔ)，如“一網(wǎng)打進(jìn)”。字數少還有個(gè)好處，一般友情鏈接的小logo尺寸是88X31，而六個(gè)字的寬度是78左右，適合于其他站點(diǎn)的鏈接排版。
3). 名稱(chēng)要有特色。名稱(chēng)平實(shí)就可以接受，如果能體現一定的內涵，給瀏覽者更多的視覺(jué)沖擊和空間想象力，則為上品。這里舉幾個(gè)阿捷認為很好的名稱(chēng)：音樂(lè )前衛，網(wǎng)頁(yè)陶吧，天籟絕音。在體現出網(wǎng)站主題的同時(shí)，能點(diǎn)出特色之處。
總之，定位題材和名稱(chēng)是設計一個(gè)網(wǎng)站的第一步，也是很重要的一部分。如果能找到一個(gè)滿(mǎn)意的名稱(chēng)，花一天時(shí)間翻字典也是值得的:)
定位你的網(wǎng)站CI形象
作者：阿捷
ajie@soim.com 1.定位你的網(wǎng)站主題和名稱(chēng)
2.定位你的網(wǎng)站CI形象
3.確定你的欄目和版塊
4.網(wǎng)站的整體風(fēng)格創(chuàng )意設計
5.網(wǎng)站的層次結構和鏈接結構
6.首頁(yè)的設計
7.版面布局的竅門(mén)
8.色彩的搭配
所謂CI，是借用的廣告術(shù)語(yǔ)。(CI是英文corporate identity的縮寫(xiě))，意思是通過(guò)視覺(jué)來(lái)統一企業(yè)的形象?，F實(shí)生活中的CI策劃比比皆是，杰出的例子如：可口可樂(lè )公司，全球統一的標志，色彩和產(chǎn)品包裝，給我們的印象極為深刻。更多的例子如SONY,三菱，麥當勞等等。
一個(gè)杰出的網(wǎng)站，和實(shí)體公司一樣，也需要整體的形象包裝和設計。準確的，有創(chuàng )意的CI設計，對網(wǎng)站的宣傳推廣有事半功倍的效果。在您的網(wǎng)站主題和名稱(chēng)定下來(lái)之后，需要思考的就是網(wǎng)站的CI形象。
有網(wǎng)友要問(wèn)了：我不是學(xué)廣告專(zhuān)業(yè)的，CI對我來(lái)說(shuō)可能太難了吧:( 不用擔心，阿捷自己也沒(méi)有學(xué)過(guò)設計專(zhuān)業(yè)哦。大家只要參考我的一些具體做法和經(jīng)驗，很容易將自己網(wǎng)站的CI搞定:)
1.設計網(wǎng)站的標志(logo).首先你需要設計制作一個(gè)網(wǎng)站的標志(logo)。就如同商標一樣，logo是你站點(diǎn)特色和內涵的集中體現，看見(jiàn)logo就讓大家聯(lián)想起你的站點(diǎn)。注意：這里的logo不是指88X31的小圖標banner,而是網(wǎng)站的標志。
標志可以是中文，英文字母，可以是符號，圖案，可以是動(dòng)物或者人物等等。比如：soim是用soim的英文作為標志，新浪用字母sina+眼睛作為標志。標志的設計創(chuàng )意來(lái)自你網(wǎng)站的名稱(chēng)和內容。
(1).網(wǎng)站有代表性的人物，動(dòng)物，花草，可以用它們作為設計的藍本，加以卡通化和藝術(shù)化，例如迪斯尼的米老鼠，搜狐的卡通狐貍，鯊威體壇的籃球鯊魚(yú)。
(2).網(wǎng)站有專(zhuān)業(yè)性的，可以以本專(zhuān)業(yè)有代表的物品作為標志。比如中國銀行的銅板標志，奔馳汽車(chē)的方向盤(pán)標志。
(3).最常用和最簡(jiǎn)單的方式是用自己網(wǎng)站的英文名稱(chēng)作標志。采用不同的字體，字母的變形，字母的組合可以很容易制作好自己的標志。
2.設計網(wǎng)站的標準色彩。網(wǎng)站給人的第一印象來(lái)自視覺(jué)沖擊，確定網(wǎng)站的標準色彩是相當重要的一步。不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪(fǎng)問(wèn)者的情緒。
“標準色彩”是指能體現網(wǎng)站型象和延伸內涵的色彩。舉個(gè)實(shí)際的例子就明白了：IBM的深藍色，肯得基的紅色條型，windows視窗標志上的紅藍黃綠色塊，都使我們覺(jué)得很貼切，很和諧。如果將IBM改用綠色或金黃色，我們會(huì )有什么感覺(jué)？
一般來(lái)說(shuō)，一個(gè)網(wǎng)站的標準色彩不超過(guò)3種，太多則讓人眼花繚亂。標準色彩要用于網(wǎng)站的標志，標題，主菜單和主色塊。給人以整體統一的感覺(jué)。至于其它色彩也可以使用，只是作為點(diǎn)綴和襯托，絕不能喧賓奪主。
一般來(lái)說(shuō)，適合于網(wǎng)頁(yè)標準色的顏色有：藍色，黃/橙色，黑/灰/白色三大系列色。
3.設計網(wǎng)站的標準字體。和標準色彩一樣，標準字體是指用于標志，標題，主菜單的特有字體。一般我們網(wǎng)頁(yè)默認的字體是宋體。為了體現站點(diǎn)的“與眾不同”和特有風(fēng)格，我門(mén)可以根據需要選擇一些特別字體。例如，為了體現專(zhuān)業(yè)可以使用粗仿宋體，體現設計精美可以用廣告體，體現親切隨意可以用手寫(xiě)體等等。當然這些都是阿捷的個(gè)人看法，你可以根據自己網(wǎng)站所表達的內涵，選擇更貼切的字體。目前常見(jiàn)的中文字體有二三十種，常見(jiàn)的英文字體有近百種，網(wǎng)絡(luò )上還有許多專(zhuān)用英文藝術(shù)字體下載，要尋找一款滿(mǎn)意的字體并不算困難:) 需要說(shuō)明的是：使用非默認字體只能用圖片的形式，因為很可能瀏覽者的PC里沒(méi)有安裝你的特別字體，那么您的辛苦設計制作便付之東流啦！
4.設計網(wǎng)站的宣傳標語(yǔ)。也可以說(shuō)是網(wǎng)站的精神，網(wǎng)站的目標。用一句話(huà)甚至一個(gè)詞來(lái)高度概括。類(lèi)似實(shí)際生活中的廣告金句。例如：鵲巢的“味道好極了”；麥斯威爾的“好東西和好朋友一起分享”；Intel的“給你一個(gè)奔騰的心”。
以上四方面：標志，色彩，字體，標語(yǔ)，是一個(gè)網(wǎng)站樹(shù)立CI形象的關(guān)鍵，確切的說(shuō)是網(wǎng)站的表面文章，設計并完成這幾步，你的網(wǎng)站將脫胎換骨，整體形象有一個(gè)提高。形象地說(shuō)：你從一個(gè)土氣的農民轉變?yōu)橐晃晃餮b革履的白領(lǐng)人士。(注意：我們只是以平面靜態(tài)來(lái)設計CI,還沒(méi)有引入聲音，三維立體等因素。)
確定網(wǎng)站的欄目和版塊
作者：阿捷
ajie@soim.com 1.定位你的網(wǎng)站主題和名稱(chēng)
2.定位你的網(wǎng)站CI形象
3.確定你的欄目和版塊
4.網(wǎng)站的整體風(fēng)格創(chuàng )意設計
5.網(wǎng)站的層次結構和鏈接結構
6.首頁(yè)的設計
7.版面布局的竅門(mén)
8.色彩的搭配
我們在前二篇文章里學(xué)習了定位網(wǎng)站主題和確立網(wǎng)站的CI形象。下面是否該進(jìn)入實(shí)質(zhì)性的設計制作階段呢？答案是：不能。經(jīng)驗告訴我們，建立一個(gè)網(wǎng)站好比寫(xiě)一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰；也好比造一座高樓，首先要設計好框架圖紙，才能使樓房結構合理。
初學(xué)者(包括我自己:-)，最容易犯的錯誤就是：確定題材后立刻開(kāi)始制作。當你一頁(yè)一頁(yè)制作完畢后才發(fā)現：網(wǎng)站結構不清晰，目錄龐雜，內容東一塊西一塊。結果不但瀏覽者看得糊涂，自己擴充和維護網(wǎng)站也相當困難，您的網(wǎng)站或許就此半途而廢，更糟糕的是：你因此失去了制作主頁(yè)的信心和興趣！
所以，我們在動(dòng)手制作網(wǎng)頁(yè)前，一定要考慮好以下三方面：
1.確定欄目和版塊；
2.確定網(wǎng)站的目錄結構和鏈接結構
3.確定網(wǎng)站的整體風(fēng)格創(chuàng )意設計
今天我們首先來(lái)討論“確定網(wǎng)站的欄目和版塊”。網(wǎng)站的題材確定后，相信你已經(jīng)收集和組織了許多相關(guān)的資料內容。你一定認為這些都是最好的，肯定能吸引網(wǎng)友們來(lái)瀏覽網(wǎng)站。但是你有沒(méi)有將最好的，最吸引人的內容放在最突出的位置呢？有沒(méi)有讓好東西在版面分布上占絕對優(yōu)勢呢？
我看見(jiàn)許多個(gè)人主頁(yè)的欄目(主菜單)并不是這樣的。舉個(gè)例子：有一個(gè)以提供動(dòng)畫(huà)素材為主題的站點(diǎn)，它的主欄目是：關(guān)于站長(cháng)，本站導航，動(dòng)畫(huà)寶庫，本站論壇，本站留言本，聯(lián)系站長(cháng)。首頁(yè)上寫(xiě)著(zhù)本站網(wǎng)址和版權申明(居然還有將本站設為首頁(yè)字樣)。最主要的，最吸引人的動(dòng)畫(huà)素材在主欄目里占1/6，在首頁(yè)上一字沒(méi)提。我想即使這個(gè)站點(diǎn)的確有大量的，精美的動(dòng)畫(huà)素材，也很難吸引瀏覽者繼續挖掘。
欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引，索引應該將網(wǎng)站的主體明確顯示出來(lái)。在制定欄目的時(shí)候，要仔細考慮，合理安排。一般的網(wǎng)站欄目安排要注意以下幾方面：
1.一定記住要緊扣你的主題！
一般的做法是：將你的主題按一定的方法分類(lèi)并將它們作為網(wǎng)站的主欄目。例如上面的例子，可以將欄目分為動(dòng)物動(dòng)畫(huà)，標志動(dòng)畫(huà)，三維動(dòng)畫(huà)，卡通動(dòng)畫(huà)等，在首頁(yè)上標明最近更新的動(dòng)畫(huà)。記?。褐黝}欄目個(gè)數在總欄目中要占絕對優(yōu)勢，這樣的網(wǎng)站顯的專(zhuān)業(yè)，主題突出，容易給人留下深刻印象。
2.設一個(gè)最近更新或網(wǎng)站指南欄目
如果你的首頁(yè)沒(méi)有安排版面放置最近更新內容信息，就有必要設立一個(gè)“最近更新”的欄目。這樣做是為了照顧常來(lái)的訪(fǎng)客，讓你的主頁(yè)更有人性化。
如果你的主頁(yè)內容龐大(超過(guò)15MB)，層次較多，而又沒(méi)有站內的搜索引擎，建議您設置“本站指南”欄目?？梢詭椭踉L(fǎng)者快速找到他們想要的內容。
3.設定一個(gè)可以雙向交流的欄目
不需要很多，但一定要有。比如論壇，留言本，郵件列表等，可以讓瀏覽者留下他們的信息。有調查表明，提供雙向交流的站點(diǎn)比簡(jiǎn)單的留一個(gè)"Email me"的站點(diǎn)更具有親和力。
4.設一個(gè)下載或常見(jiàn)問(wèn)題回答欄目
網(wǎng)絡(luò )的特點(diǎn)是信息共享。如果你看到一個(gè)站點(diǎn)有大量的優(yōu)秀的有價(jià)值的資料，你肯定希望能一次性下載，而不是一頁(yè)一頁(yè)瀏覽存盤(pán)。“將心比心”在你自己的主頁(yè)上設置一個(gè)資料下載欄目，會(huì )得到大家的喜歡。有些站點(diǎn)為了廣告顯示量，一篇文章還要分幾頁(yè)顯示，我覺(jué)得遲早會(huì )因訪(fǎng)問(wèn)量下降而淘汰(個(gè)人意見(jiàn):)。另外，如果您的站點(diǎn)經(jīng)常收到網(wǎng)友關(guān)于某方面的問(wèn)題來(lái)信，你最好設立一個(gè)常見(jiàn)問(wèn)題回答的欄目，既方便了網(wǎng)友，也可以節約自己更多時(shí)間用以學(xué)習。
至于其他的輔助內容，如關(guān)于本站，版權信息等可以不放在主欄目里，以免沖淡主題?？?
結以上幾點(diǎn)，我們得出劃分欄目需要注意的是：
●盡可能刪除與主題無(wú)關(guān)的欄目
●盡可能將網(wǎng)站最有價(jià)值的內容列在欄目上
●盡可能方便訪(fǎng)問(wèn)者的瀏覽和查詢(xún)
上面說(shuō)的是欄目，我們再看看版塊設置。版塊比欄目的概念要大一些，每個(gè)版塊都有自己的欄目。舉個(gè)例子：網(wǎng)易的站點(diǎn)分新聞，體育，財經(jīng)，娛樂(lè )，教育等版塊，每個(gè)版塊下面有各有自己的主欄目。一般的個(gè)人站點(diǎn)內容少，只有主欄目(主菜單)就夠了，不需要設置版塊。如果你覺(jué)得的確有必要設置版塊的，應該注意1.各版塊要有相對獨立性。2.各版塊要有相互關(guān)聯(lián)。3.版塊的內容要圍繞站點(diǎn)主題。關(guān)于版塊方面，主要是門(mén)戶(hù)站點(diǎn)等較大ICP需要考慮的問(wèn)題，阿捷在此不再作展開(kāi)討論。
確定網(wǎng)站的整體風(fēng)格和創(chuàng )意設計
作者：阿捷
ajie@soim.com 1.定位你的網(wǎng)站主題和名稱(chēng)
2.定位你的網(wǎng)站CI形象
3.確定你的欄目和版塊
4.網(wǎng)站的整體風(fēng)格創(chuàng )意設計
5.網(wǎng)站的層次結構和鏈接結構
6.首頁(yè)的設計
7.版面布局的竅門(mén)
8.色彩的搭配
網(wǎng)站的整體風(fēng)格及其創(chuàng )意設計是站長(cháng)們最希望掌握，也是最難以學(xué)習的。難就難在沒(méi)有一個(gè)固定的程式可以參照和模仿。給你一個(gè)主題，任何兩人都不可能設計出完全一樣的網(wǎng)站。當我們說(shuō)："這個(gè)站點(diǎn)很cool，很有個(gè)性！"那么，是什么讓你覺(jué)得很cool呢？它到底和一般的網(wǎng)站有什么區別呢？本文試圖用最簡(jiǎn)明的語(yǔ)言來(lái)說(shuō)明：
1.風(fēng)格是什么，如何樹(shù)立網(wǎng)站風(fēng)格？
2.創(chuàng )意是什么，如何產(chǎn)生創(chuàng )意？
●風(fēng)格(style)是抽象的。是指站點(diǎn)的整體形象給瀏覽者的綜合感受。
這個(gè)“整體形象”包括站點(diǎn)的CI（標志，色彩，字體，標語(yǔ)），版面布局，瀏覽方式，交互性，文字，語(yǔ)氣，內容價(jià)值，存在意義，站點(diǎn)榮譽(yù)等等諸多因素。舉個(gè)例子：
我們覺(jué)得網(wǎng)易是平易近人的，迪斯尼是生動(dòng)活潑的，IBM是專(zhuān)業(yè)嚴肅的。這些都是網(wǎng)站給人們留下的不同感受。
風(fēng)格是獨特的，是站點(diǎn)不同與其他網(wǎng)站的地方?；蛘呱?，或者技術(shù)，或者是交互方式，能讓瀏覽者明確分辨出這是你的網(wǎng)站獨有的。例如新世紀網(wǎng)絡(luò )(
www.century.2000c.net)的黑白色,網(wǎng)易壁紙站的特有框架,即使你只看到其中一頁(yè)，也可以分辨出是哪個(gè)網(wǎng)站的。
風(fēng)格是有人性的。通過(guò)網(wǎng)站的外表，內容，文字，交流可以概括出一個(gè)站點(diǎn)的個(gè)性，情緒。是溫文儒雅，是執著(zhù)熱情，是活潑易變,是放任不羈。象詩(shī)詞中的“豪放派”和“婉約派”，你可以用人的性格來(lái)比喻站點(diǎn)。
有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區別在于：普通網(wǎng)站你看到的只是堆砌在一起的信息，你只能用理性的感受來(lái)描述，比如信息量大小，瀏覽速度快慢。但你瀏覽過(guò)有風(fēng)格的網(wǎng)站后你能有更深一層的感性認識，比如站點(diǎn)有品位，和藹可親，是老師，是朋友。
看了以上描述，你可能對風(fēng)格是什么可能依然模糊。其實(shí)風(fēng)格就是一句話(huà)：與眾不同！
如何樹(shù)立網(wǎng)站風(fēng)格呢？我們可以分這樣幾個(gè)步驟：
第一，確信風(fēng)格是建立在有價(jià)值內容之上的。一個(gè)網(wǎng)站有風(fēng)格而沒(méi)有內容，就好比繡花枕頭一包草，好比一個(gè)性格傲慢但卻目不識丁的人。你首先必須保證內容的質(zhì)量和價(jià)值性。這是最基本的，無(wú)須置疑。
第二，你需要徹底搞清楚自己希望站點(diǎn)給人的印象是什么?？梢詮倪@幾方面來(lái)理清思路：
1.如果只用一句話(huà)來(lái)描述你的站點(diǎn)，應該是:_____________
參考答案：
有創(chuàng )意，專(zhuān)業(yè)，有(技術(shù))實(shí)力，有美感，有沖擊力
2.想到你的站點(diǎn)，可以聯(lián)想到的色彩是：________________
參考答案：
熱情的紅色，幻想的天蘭色，聰明的金黃色
3.想到你的站點(diǎn)，可以聯(lián)想到的畫(huà)面是：________________
參考答案：
一份早報，一輛法拉利跑車(chē)，人群擁擠的廣場(chǎng)，雜貨店
4.如果網(wǎng)站是一個(gè)人，他擁有的個(gè)性是：________________
參考答案：
思想成熟的中年人，狂野奔放的牛仔，自信憨厚的創(chuàng )業(yè)者
5.作為站長(cháng)，你希望給人的印象是：____________________
參考答案：
敬業(yè)，認真投入，有深度，負責，純真，直爽，淑女
6.用一種動(dòng)物來(lái)比喻，你的網(wǎng)站最象：__________________
參考答案：
貓(神秘高貴)，鷹(目光銳利)，兔子(聰明敏感)，獅子(自信威信)
7.瀏覽者覺(jué)得你和其他網(wǎng)站的不同是：__________________
參考答案：
可以信賴(lài)，信息最快，交流方便，
8.瀏覽者和你交流合作的感受是：______________________
參考答案：
師生，同事，朋友，長(cháng)幼。
你可以自己先填寫(xiě)一份答案，然后讓其他網(wǎng)友填寫(xiě)。比較后的結果會(huì )告訴你：你網(wǎng)站現在的差距，弱點(diǎn)及需要改進(jìn)的地方。
第三，在明確自己的網(wǎng)站印象后，開(kāi)始努力建立和加強這種印象。經(jīng)過(guò)第二步印象的的"量化"后，你需要進(jìn)一步找出其中最有特色特點(diǎn)的東西，就是最能體現網(wǎng)站風(fēng)格的東西。并以它作為網(wǎng)站的特色加以重點(diǎn)強化，宣傳。例如：再次審查網(wǎng)站名稱(chēng)，域名，欄目名稱(chēng)是否符合這種個(gè)性，是否易記。審查網(wǎng)站標準色彩是否容易聯(lián)想到這種特色，是否能體現網(wǎng)站的性格等等。具體的做法，沒(méi)有定式。我這里提供一些參考：
1.將你的標志logo,盡可能的出現在每個(gè)頁(yè)面上?；蛘唔?yè)眉，或者頁(yè)腳，或則背景。
2.突出你的標準色彩。文字的鏈接色彩，圖片的主色彩，背景色，邊框等色彩盡量使用
與標準色彩一致的色彩。
3.突出你的標準字體。在關(guān)鍵的標題，菜單，圖片里使用統一的標準字體。
4.想一條朗朗上口宣傳標語(yǔ)。把它做在你的banner里，或者放在醒目的位置，告訴大家
你的網(wǎng)站的特色是...
5.使用統一的語(yǔ)氣和人稱(chēng)。即使是多個(gè)人合作維護，也要讓讀者覺(jué)得是同一個(gè)人寫(xiě)的。
6.使用統一的圖片處理效果。比如，陰影效果的方向，厚度，模糊度都必須一樣。
7.創(chuàng )造一個(gè)你的站點(diǎn)特有的符號或圖標。比如在一句鏈接前的一個(gè)點(diǎn)，可以使用,.。
☆※○◇□△→（區位碼里自己參看）等等。雖然很簡(jiǎn)單的一個(gè)變化，卻給人與眾不
同的感覺(jué)，(為什么我沒(méi)有想到呢？)
8.用自己設計的花邊，線(xiàn)條，點(diǎn)
9.展示你網(wǎng)站的榮譽(yù)和成功作品。
10.告訴網(wǎng)友關(guān)于你的真實(shí)的故事和想法。
風(fēng)格的形成不是一次定位的，你可以在實(shí)踐中不斷強化，調整，修飾，直到有一天，網(wǎng)友們
寫(xiě)信告訴你："我喜歡你的站點(diǎn)，因為它很有風(fēng)格！"
● 創(chuàng )意(idea)是網(wǎng)站生存的關(guān)鍵。
這一點(diǎn)相信大家都已經(jīng)認同。然而作為網(wǎng)頁(yè)設計師，最苦惱的就是沒(méi)有好的創(chuàng )意來(lái)源。
注意，這里說(shuō)的創(chuàng )意是指站點(diǎn)的整體創(chuàng )意，(因為這個(gè)創(chuàng )意而產(chǎn)生這個(gè)站點(diǎn)，或者相同的內容，推出的創(chuàng )意不同),網(wǎng)頁(yè)的平面設計創(chuàng )意我將在后面的版面布局竅門(mén)里介紹。
創(chuàng )意到底是什么，如何產(chǎn)生創(chuàng )意呢？
創(chuàng )意是引人入勝，精彩萬(wàn)分，出奇不意的；
創(chuàng )意是捕捉出來(lái)的點(diǎn)子，是創(chuàng )作出來(lái)的奇招....
這些講法都說(shuō)出了創(chuàng )意的一些特點(diǎn)，實(shí)質(zhì)上，創(chuàng )意是傳達信息的一種特別方式。
比如Webdesigner(網(wǎng)頁(yè)設計師)，我們將其中的E字母大寫(xiě)一下: wEbdEsigEr，感覺(jué)怎么樣，
這其實(shí)就是一種創(chuàng )意！
創(chuàng )意并不是天才者的靈感，而是思考的結果。根據美國廣告學(xué)教授詹姆斯的研究，創(chuàng )意思考
的過(guò)程分五階段：
1.準備期--研究所搜集的資料，根據舊經(jīng)驗，啟發(fā)新創(chuàng )意；
2.孵化期--將資料咀嚼消化，使意識自由發(fā)展，任意結合；
3.啟示期--意識發(fā)展并結合，產(chǎn)生創(chuàng )意；
4.驗證期--將產(chǎn)生的創(chuàng )意討論修正；
5.形成期--設計制作網(wǎng)頁(yè)，將創(chuàng )意具體化。
○創(chuàng )意是將現有的要素重新組合。
比如，網(wǎng)絡(luò )與電話(huà)結合，產(chǎn)生IP電話(huà)。從這一點(diǎn)上出發(fā)，任何人，包括你和我，都可以創(chuàng )造出不同凡響的創(chuàng )意。而且，資料越豐富，越容易產(chǎn)生創(chuàng )意。就好比萬(wàn)花筒，筒內的玻璃片越多，所呈現的圖案越多。你如果有心可以發(fā)現，網(wǎng)絡(luò )上的最多的創(chuàng )意來(lái)自與現實(shí)生活的結合(或者虛擬現實(shí))，例如在線(xiàn)書(shū)店，電子社區，在線(xiàn)拍賣(mài)。你是否想到了一種更好的創(chuàng )意呢？
創(chuàng )意思考的途徑最常用的是聯(lián)想，這里提供了網(wǎng)站創(chuàng )意的25種聯(lián)想線(xiàn)索：
1.把它顛倒 2.把它縮小 3.把顏色換一下 4.使它更長(cháng) 5.使它閃動(dòng) 6.把它放進(jìn)音樂(lè )里 7.結合文字音樂(lè )圖畫(huà) 8.使它成為年輕的 9.使它重復 10.使它變成立體 11.參加競賽 12.參加打賭 13.變更一部分 14.分裂它 15.使它羅曼蒂克 16.使它速度加快 17.增加香味 18.使它看起來(lái)流行 19.使它對稱(chēng) 20.將它向兒童訴求 21.價(jià)格更低 22.給它起個(gè)綽號 23.把它打包 24.免費提供 25.以上各項延伸組合
-------------(轉載自樊志育《廣告制作》)
需要一提的是：創(chuàng )意的目的是更好的宣傳推廣網(wǎng)站。如果創(chuàng )意很好，卻對網(wǎng)站發(fā)展毫無(wú)意義，好比給奶牛穿高跟鞋，那么，我們寧可放棄這個(gè)創(chuàng )意！
關(guān)于風(fēng)格和創(chuàng )意，可以講得還有許多。感興趣的網(wǎng)友可以自己找一些廣告設計方面的書(shū)閱讀。
希望本文能幫助您對網(wǎng)站的設計有一個(gè)更新的認識和提高。
確定網(wǎng)站的目錄結構和鏈接結構
作者：阿捷
ajie@soim.com 1.定位你的網(wǎng)站主題和名稱(chēng)
2.定位你的網(wǎng)站CI形象
3.確定你的欄目和版塊
4.網(wǎng)站的整體風(fēng)格創(chuàng )意設計
5.網(wǎng)站的層次結構和鏈接結構
6.首頁(yè)的設計
7.版面布局的竅門(mén)
8.色彩的搭配
一.網(wǎng)站的目錄結構
網(wǎng)站的目錄是指你建立網(wǎng)站時(shí)創(chuàng )建的目錄。例如：在用frontpage98建立網(wǎng)站時(shí)都默認建立了根目錄和images子目錄。目錄的結構是一個(gè)容易忽略的問(wèn)題，大多數站長(cháng)都是未經(jīng)規劃，隨意創(chuàng )建子目錄。目錄結構的好壞，對瀏覽者來(lái)說(shuō)并沒(méi)有什么太大的感覺(jué)，但是對于站點(diǎn)本身的上傳維護，內容未來(lái)的擴充和移植有著(zhù)重要的影響。下面是建立目錄結構的一些建議：
●不要將所有文件都存放在根目錄下。
有網(wǎng)友為了方便，將所有文件都放在根目錄下。這樣做造成的不利影響在于：
1.文件管理混亂。你常常搞不清哪些文件需要編輯和更新，哪些無(wú)用的文件可以刪除，哪些是相關(guān)聯(lián)的文件，影響工作效率。
2.上傳速度慢。服務(wù)器一般都會(huì )為根目錄建立一個(gè)文件索引。當您將所有文件都放在根目錄下，那么即使你只上傳更新一個(gè)文件，服務(wù)器也需要將所有文件再檢索一遍，建立新的索引文件。很明顯，文件量越大，等待的時(shí)間也將越長(cháng)。所以，給您的建議是：盡可能減少根目錄的文件存放數。
●按欄目?jì)热萁⒆幽夸洝?/div>
子目錄的建立，首先按主菜單欄目建立。例如:網(wǎng)頁(yè)教程類(lèi)站點(diǎn)可以根據技術(shù)類(lèi)別分別建立相應的目錄，象Flash,Dhtml,Javascript等；企業(yè)站點(diǎn)可以按公司簡(jiǎn)介，產(chǎn)品介紹，價(jià)格，在線(xiàn)定單，反饋聯(lián)系等建立相應目錄。
其他的次要欄目，類(lèi)似what‘s new，友情連接內容較多，需要經(jīng)常更新的可以建立獨立的子目錄。而一些相關(guān)性強，不需要經(jīng)常更新的欄目，例如：關(guān)于本站，關(guān)于站長(cháng)，站點(diǎn)經(jīng)歷等可以合并放在一個(gè)統一目錄下。
所有程序一般都存放在特定目錄。例如：CGI程序放在cgi-bin目錄。便于維護管理。所有需要下載的內容也最好放在一個(gè)目錄下。
●在每個(gè)主目錄下都建立獨立的images目錄。
默認的，一個(gè)站點(diǎn)根目錄下都有一個(gè)images目錄。剛開(kāi)始學(xué)習主頁(yè)制作時(shí)，阿捷習慣將所有圖片都存放在這個(gè)目錄里?？墒呛髞?lái)發(fā)現很不方便，當我需要將某個(gè)主欄目打包供網(wǎng)友下載，或者將某個(gè)欄目刪除時(shí)，圖片的管理相當麻煩。經(jīng)過(guò)實(shí)踐發(fā)現：為每個(gè)主欄目建立一個(gè)獨立的images目錄是最方便管理的。而根目錄下的images目錄只是用來(lái)放首頁(yè)和一些次要欄目的圖片。
●目錄的層次不要太深。
目錄的層次建議不要超過(guò)3層。原因很簡(jiǎn)單，維護管理方便。
其它需要注意的還有：
1.不要使用中文目錄；網(wǎng)絡(luò )無(wú)國界，使用中文目錄可能對網(wǎng)址的正確顯示造成困難。
2.不要使用過(guò)長(cháng)的目錄；盡管服務(wù)器支持長(cháng)文件名，但是太長(cháng)的目錄名不便于記憶。
3.盡量使用意義明確的目錄；上面的例子中，你可以用Flash,Dhtml,Javascript來(lái)建立目錄，也可以用1，2，3建立目錄，但是哪一個(gè)更明確，更便于記憶和管理呢？顯然是前者！
隨著(zhù)網(wǎng)頁(yè)技術(shù)的不斷發(fā)展，利用數據庫或者其他后臺程序自動(dòng)生成網(wǎng)頁(yè)越來(lái)越普遍，網(wǎng)站的目錄結構也必將飛躍到一個(gè)新的結構層次。
二.網(wǎng)站的鏈接結構
網(wǎng)站的鏈接結構是指頁(yè)面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上，但可以跨越
目錄。形象的說(shuō)：每個(gè)頁(yè)面都是一個(gè)固定點(diǎn)，鏈接則是在兩個(gè)固定點(diǎn)之間的連線(xiàn)。一個(gè)點(diǎn)可以和一
個(gè)點(diǎn)連接，也可以和多個(gè)點(diǎn)連接。更重要的是，這些點(diǎn)并不是分布在一個(gè)平面上，而是存在于一個(gè)
立體的空間中。
●我們研究網(wǎng)站的鏈接結構的目的在于：用最少的鏈接，使得瀏覽最有效率。
一般的，建立網(wǎng)站的鏈接結構有兩種基本方式：
1.樹(shù)狀鏈接結構（一對一）。類(lèi)似DOS的目錄結構，首頁(yè)鏈接指向一級頁(yè)面，一級頁(yè)面鏈
接指向二級頁(yè)面。立體結構看起來(lái)就象蒲公英。這樣的鏈接結構瀏覽時(shí)，一級級進(jìn)入，一級級退出。
優(yōu)點(diǎn)是條理清晰，訪(fǎng)問(wèn)者明確知道自己在什么位置，不會(huì )"迷"路。缺點(diǎn)是瀏覽效率低，一個(gè)欄目
下的子頁(yè)面到另一個(gè)欄目下的子頁(yè)面，必須繞經(jīng)首頁(yè)。
2.星狀鏈接結構（一對多）。類(lèi)似網(wǎng)絡(luò )服務(wù)器的鏈接，每個(gè)頁(yè)面相互之間都建立有鏈接。
立體結構象東方明珠電視塔上的鋼球。這種鏈接結構的優(yōu)點(diǎn)是瀏覽方便，隨時(shí)可以到達自己
喜歡的頁(yè)面。缺點(diǎn)是鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內容。
這兩種基本結構都只是理想方式，在實(shí)際的網(wǎng)站設計中，總是將這兩種結構混合起來(lái)使用。
我們希望瀏覽者既可以方便快速的達到自己需要的頁(yè)面，又可以清晰的知道自己的位置。所以，
最好的辦法是：
●首頁(yè)和一級頁(yè)面之間用星狀鏈接結構，一級和二級頁(yè)面之間用樹(shù)狀鏈接結構。舉個(gè)例子。一個(gè)新聞?wù)军c(diǎn)的頁(yè)面結構如下：
---------------------------------------------------
一級頁(yè)面 二級頁(yè)面
財經(jīng)新聞頁(yè) -- [財經(jīng)新聞1，財經(jīng)新聞2...]
/ |
首頁(yè) -- 娛樂(lè )新聞頁(yè) -- [娛樂(lè )新聞1，娛樂(lè )新聞2...]
\ |
IT新聞頁(yè) -- [IT新聞1，IT新聞2...]
----------------------------------------------------
其中，首頁(yè)，財經(jīng)新聞頁(yè)，娛樂(lè )新聞頁(yè)，IT新聞頁(yè)之間是星狀鏈接，可以互相點(diǎn)擊，直接
到達。而財經(jīng)新聞頁(yè)和它的子頁(yè)面之間是樹(shù)狀連接，瀏覽財經(jīng)新聞1后，你必須回到財經(jīng)新聞頁(yè)，
才能瀏覽IT新聞2。所以,有站點(diǎn)為了免去返回一級頁(yè)面的麻煩，將二級頁(yè)面直接用新開(kāi)窗口
(POP up windows)打開(kāi)，瀏覽結束后關(guān)閉即可。
注意：以上我們都是用的三級頁(yè)面舉例。如果您的站點(diǎn)內容龐大，分類(lèi)明細，需要超過(guò)三級
頁(yè)面，那么建議你在頁(yè)面里顯示導航條，可以幫助瀏覽者明確自己所處的位置。就是您經(jīng)?？吹?br>許多網(wǎng)站頁(yè)面頂部的，類(lèi)似這樣：
“您現在的位置是：首頁(yè)->財經(jīng)新聞->股市信息->深圳股->深發(fā)展”
關(guān)于鏈接結構的設計，在實(shí)際的網(wǎng)頁(yè)制作中是非常重要一環(huán)。采用什么樣的鏈接結構直接
影響到版面的布局。例如你的主菜單放在什么位置，是否每頁(yè)都需要放置，是否需要用分幀框
架，是否需要加入返回首頁(yè)的鏈接。在連接結構確定后，再開(kāi)始考慮鏈接的效果和形式，是采
用下拉表單，還是用DHTML動(dòng)態(tài)菜單等等。
隨著(zhù)電子商務(wù)的推廣，網(wǎng)站競爭的越來(lái)越激烈，對鏈接結構設計的要求已經(jīng)不僅僅局限于
可以方便快速的瀏覽，更加注重個(gè)性化和相關(guān)性。例如，一個(gè)愛(ài)嬰主題網(wǎng)站里，在8個(gè)月嬰兒
的營(yíng)養問(wèn)題頁(yè)面上，你需要加入8個(gè)月嬰兒的健康問(wèn)題鏈接，智力培養鏈接，或者是有關(guān)奶粉
宣傳的鏈接，一本圖書(shū)，一個(gè)玩具的鏈接。因為父母不可能到每個(gè)欄目下去尋找關(guān)于8個(gè)月嬰
兒的信息，他們可能在找到需要的問(wèn)題后就離開(kāi)網(wǎng)站了。如何盡可能留住訪(fǎng)問(wèn)者，是網(wǎng)站設
計者未來(lái)必須考慮的問(wèn)題。
首頁(yè)的設計
作者：阿捷
ajie@soim.com 1.定位你的網(wǎng)站主題和名稱(chēng)
2.定位你的網(wǎng)站CI形象
3.確定你的欄目和版塊
4.網(wǎng)站的整體風(fēng)格創(chuàng )意設計
5.網(wǎng)站的層次結構和鏈接結構
6.首頁(yè)的設計
7.版面布局的竅門(mén)
8.色彩的搭配
在我們全面考慮好網(wǎng)站的欄目，鏈接結構和整體風(fēng)格之后，我們就可以正式制作首頁(yè)了。有這么一句俗語(yǔ)："良好的開(kāi)端是成功的一半"。在網(wǎng)站設計上也是如此，首頁(yè)的設計是一個(gè)網(wǎng)站成功與否的關(guān)鍵。人們往往看到第一頁(yè)就已經(jīng)對你的站點(diǎn)有一個(gè)整體的感覺(jué)。是不是能夠促使瀏覽者繼續點(diǎn)擊進(jìn)入，是否能夠吸引瀏覽者留在站點(diǎn)上，全憑首頁(yè)設計的"功力"了。所以，首頁(yè)的設計和制作是絕對要重視和花心思的。阿捷的經(jīng)驗是：一般首頁(yè)設計和制作占整個(gè)制作時(shí)間的40%。你寧可多花些時(shí)間在早期，以免出現全部做好以后再修改，那將是最浪費精力的事。
這里，先插一個(gè)"封面"的問(wèn)題。封面是指沒(méi)有具體內容，只放一個(gè)logo點(diǎn)擊進(jìn)或者只有簡(jiǎn)單的圖形菜單的首頁(yè)。否需要為站點(diǎn)設計一個(gè)"封面"？阿捷的個(gè)人觀(guān)點(diǎn)是：沒(méi)必要！非你是很藝術(shù)類(lèi)的站點(diǎn)，或者可以確信內容獨特，可以吸引瀏覽者進(jìn)一步點(diǎn)擊進(jìn)入的站點(diǎn)，否則的話(huà)，封面式的首頁(yè)并不會(huì )給你的站點(diǎn)帶來(lái)什么好處。我上網(wǎng)瀏覽需要的是快速，有價(jià)值的信息，如果等待xx分鐘，只顯示出一個(gè)粗劣的"ENTER"圖標，那么相信沒(méi)有人會(huì )再耐心等待進(jìn)入下一頁(yè)。
首頁(yè)，從根本上說(shuō)就是全站內容的目錄，是一個(gè)索引。但只是羅列目錄顯然是夠的，如何設計好一個(gè)首頁(yè)呢？一般的步驟是：
●確定首頁(yè)的功能模塊
●設計首頁(yè)的版面
●處理技術(shù)上的細節
一).確定首頁(yè)的功能模塊
首頁(yè)的內容模塊是指你需要在首頁(yè)上實(shí)現的主要內容和功能。一般的站點(diǎn)都需要這樣一些模塊：
網(wǎng)站名稱(chēng)(logo), 廣告條(banner), 主菜單(menu),
新聞(what‘s new), 搜索(search), 友情鏈接(links),
郵件列表(maillist),計數器(count), 版權(copyright).
選擇哪些模塊，實(shí)現哪些功能，是否需要添加其他模塊都是首頁(yè)設計首先需要確定的。
二).設計首頁(yè)的版面
在功能模塊確定后，開(kāi)始設計首頁(yè)的版面。就象搭積木，每個(gè)模塊是一個(gè)單位積木，如何拼搭出一座漂亮的房子，就看你的創(chuàng )意和想象力了。設計版面的最好方法是：找一張白紙，一支筆，先將你理想中的草圖勾勒出來(lái)，然后再用網(wǎng)頁(yè)制作軟件實(shí)現。
三).處理技術(shù)上的細節
阿捷經(jīng)常收到的來(lái)信問(wèn)題就是：我制作的主頁(yè)如何能在不同分辨率下保持不變形，如何能在IE和NC下看起來(lái)都不至于太丑陋，如何設置字體和鏈接顏色....等等,阿捷將在下面幾篇文章里為大家詳細介紹。
首頁(yè)設計是整個(gè)網(wǎng)站設計的難點(diǎn)和關(guān)鍵，阿捷希望能夠通過(guò)和大家的交流，總結出套較為合理易學(xué)的設計方法，從而舉一反三，使我們能夠更加輕松的完成整個(gè)站點(diǎn)的 設計制作。
版面布局的原理
作者：阿捷
ajie@soim.com 1.定位你的網(wǎng)站主題和名稱(chēng)
2.定位你的網(wǎng)站CI形象
3.確定你的欄目和版塊
4.網(wǎng)站的整體風(fēng)格創(chuàng )意設計
5.網(wǎng)站的層次結構和鏈接結構
6.首頁(yè)的設計
7.版面布局的竅門(mén)
8.色彩的搭配
同位置。 你可能注意到："最適合"是一個(gè)不確定的形容詞，什么才是最適合的呢？抱歉的是阿捷不能也不可能給您一個(gè)完整的正確的答案。就好比有人希望知道成功的秘訣是什么，成功者只能建議您用什么方法，什么途徑才能最容易獲得成功，而不可能有一步成功的"秘訣"告訴您。我們在設計思考系列文章第四篇講過(guò)站點(diǎn)整體的創(chuàng )意，版面布局也是一個(gè)創(chuàng )意的問(wèn)題， 但要比站點(diǎn)整體的創(chuàng )意容易，有規律的多。
讓我們先來(lái)了解一下版面布局的步驟：
一.草案 新建頁(yè)面就象一張白紙，沒(méi)有任何表格，框架和約定俗成的東西，你可以盡可能的發(fā)揮, 你的想象力，將你想到的"景象"畫(huà)上去(我們建議您用一張白紙和一支鉛筆，當然用作圖 軟件photoshop等也可以)。這屬于創(chuàng )造階段，不講究細膩工整，不必考慮細節功能，只以粗陋的線(xiàn)條勾畫(huà)出創(chuàng )意的輪廓即可。盡你的可能多畫(huà)幾張，最后選定一個(gè)滿(mǎn)意的作為繼續創(chuàng )作的腳本。
二.粗略布局 在草案的基礎上，將你確定需要放置的功能模塊安排到頁(yè)面上。(注：功能模塊我們在 "首頁(yè)設計-引子"中提過(guò)，主要包含網(wǎng)站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表, 計數器,版權信息等)。注意，這里我們必須遵循突出重點(diǎn)、平衡諧調的原則，將網(wǎng)站標志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然后在考慮次要模塊的排放。
三.定案 將粗略布局精細化，具體化。（靠你的智慧和經(jīng)驗，旁敲側擊多方聯(lián)想，才能作出具有創(chuàng )意的布局。）
在布局過(guò)程中，我們可以遵循的原則有：
1、正常平衡---亦稱(chēng)"勻稱(chēng)"。多指左右、上下對照形式，主要強調秩序，能達到安定 誠實(shí)、信賴(lài)的效果等。
2、異常平衡---即非對照形式，但也要平衡和韻律，當然都是不均整的，此種布局能達到強調性、不安性、高注目性的效果。
3、對比---所謂對比，不僅利用色彩、色調等技巧來(lái)作表現，在內容上也可涉及古與今、新與舊、貧與富等對比。
4、凝視---所謂凝視是利用頁(yè)面中人物視線(xiàn)，使瀏覽者仿照跟隨的心理，以達到注視頁(yè)面的效果，一般多用明星凝視狀。
5、空白---空白有兩種作用，一方面對其他網(wǎng)站表示突出卓越，另一方面也表示網(wǎng)頁(yè)品位的優(yōu)越感，這種表現方法對體顯網(wǎng)頁(yè)的格調十分有效。
6、盡量用圖片解說(shuō)---此法對不能用語(yǔ)言說(shuō)服、或用語(yǔ)言無(wú)法表達的情感，特別有效。 圖片解說(shuō)的內容，可以傳達給瀏覽者的更多的心理因素。
------------(轉載自廣告大師樊志育《廣告制作》)
以上的設計原則，雖然枯燥，但是我們如果能領(lǐng)會(huì )并活用到頁(yè)面布局里，效果就大不 一樣了。比如，
○網(wǎng)頁(yè)的白色背景太虛，則可以加些色快；
○版面零散，可以用線(xiàn)條和符號串聯(lián)；
○左面文字過(guò)多，右面則可以插一張圖片保持平衡；
○表格太規矩，可以改用導角試試。 經(jīng)過(guò)不斷的嘗試和推敲，你的網(wǎng)頁(yè)一定會(huì )亮麗起來(lái)的哦:)
看看我們經(jīng)常用到的版面布局形式：
1."T"結構布局。所謂"T"結構。就是指頁(yè)面頂部為橫條網(wǎng)站標志+廣告條，下方左面為主菜單， 右面顯示內容的布局，因為菜單條背景教深，整體效果類(lèi)似英文字母"T",所以我們稱(chēng)之為"T"形布局。這是網(wǎng)頁(yè)設計中用的最廣返的一種布局方式。(圖略) 這種布局的優(yōu)點(diǎn)是頁(yè)面結構清晰，主次分明。是初學(xué)者最容易上手的布局方法。缺點(diǎn)是規矩 呆板，如果細節色彩上不注意，很容易讓人"看之無(wú)味"。
2."口"型布局。這是一個(gè)象形的說(shuō)法，就是頁(yè)面一般上下各有一個(gè)廣告條，左面是主菜單， 右面放友情連接等，中間是主要內容。(圖略) 這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大(我的主頁(yè)首頁(yè)即屬于這種布局)。缺點(diǎn)是頁(yè)面擁擠， 不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網(wǎng)易壁紙站。
3."三"型布局。這種布局多用于國外站點(diǎn)，國內用的不多。特點(diǎn)是頁(yè)面上橫向兩條色塊，將 頁(yè)面整體分割為四部分，色塊中大多放廣告條。
4.對稱(chēng)對比布局。顧名思義，采取左右或者上下對稱(chēng)的布局，一半深色，一半淺色，一般用于設計型站點(diǎn)。優(yōu)點(diǎn)是視覺(jué)沖擊力強，缺點(diǎn)是將兩部分有機的結合比較困難。
5.POP布局。POP引自廣告術(shù)語(yǔ)，就是指頁(yè)面布局象一張宣傳海報，以一張精美圖片作為頁(yè)面的設計中心。常用于時(shí)尚類(lèi)站點(diǎn)，比如ELLE.com。優(yōu)點(diǎn)顯而易見(jiàn)：漂亮吸引人。缺點(diǎn)就是速度慢。 作為版面布局還是值得借鑒的。
以上總結了目前網(wǎng)絡(luò )上常見(jiàn)的布局，其實(shí)還有許許多多別具一格的布局，關(guān)鍵在于你的創(chuàng )意和 設計了。
對于版面布局的技巧，這里提供四個(gè)建議，您可以自己推敲：
1.加強視覺(jué)效果
2.加強文案的可視度和可讀性
3.統一感的視覺(jué)
4.新鮮和個(gè)性是布局的最高境界
網(wǎng)頁(yè)色彩的搭配
作者：阿捷
ajie@soim.com 1.定位你的網(wǎng)站主題和名稱(chēng)
2.定位你的網(wǎng)站CI形象
3.確定你的欄目和版塊
4.網(wǎng)站的整體風(fēng)格創(chuàng )意設計
5.網(wǎng)站的層次結構和鏈接結構
6.首頁(yè)的設計
7.版面布局的竅門(mén)
8.色彩的搭配
網(wǎng)頁(yè)的色彩是樹(shù)立網(wǎng)站形象的關(guān)鍵之一，色彩搭配卻是網(wǎng)友們感到頭疼的問(wèn)題。 網(wǎng)頁(yè)的背景，文字，圖標，邊框，超鏈接...，應該采用什么樣的色彩，應該搭配什么色彩才能最好的表達出預想的內涵呢？
首先我們先來(lái)了解一些色彩的基本知識：
1.顏色是因為光的折射而產(chǎn)生的。
2.紅，黃，藍是三原色，其它的色彩都可以用這三種色彩調和而成。 網(wǎng)頁(yè)html語(yǔ)言中的色彩表達即是用這三種顏色的數值表示 例如：紅色是color(255,0,0)十六進(jìn)制的表示方法為(FF0000) 白色為(FFFFFF), 我們經(jīng)?？吹降?bgColor=#FFFFFF"就是指背景色為白色。
3.顏色分非彩色和彩色兩類(lèi)。 非彩色是指黑，白，灰系統色。 彩色是指除了非彩色以外的所有色彩。
4.任何色彩都有飽和度和透明度的屬性，屬性的變化產(chǎn)生不同的色相，所以至少可以制作 幾百萬(wàn)種色彩。 網(wǎng)頁(yè)制作用彩色還是非彩色好呢？根據專(zhuān)業(yè)的研究機構研究表明：彩色的記憶效果是黑白的3.5倍。也就是說(shuō)，在一般情況下，彩色頁(yè)面較完全黑白頁(yè)面更加吸引人。 我們通常的做法是：主要內容文字用非彩色(黑色)，邊框，背景，圖片用彩色。這樣 頁(yè)面整體不單調，看主要內容也不會(huì )眼花。
●非彩色的搭配 黑白是最基本和最簡(jiǎn)單的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是萬(wàn)能色，可以和任何彩色搭配，也可以幫助兩種對立的色彩和諧過(guò)渡。如果你 實(shí)在找不出合適的色彩，那么用灰色試試，效果絕對不會(huì )太差。
●彩色的搭配 色彩千變萬(wàn)化，彩色的搭配是我們研究的重點(diǎn)。
我們依然需要進(jìn)一步學(xué)習一些色彩的知識。
一.色環(huán)。我們將色彩按"紅->黃->綠->藍->紅"依次過(guò)度漸變，就可以得到一個(gè)色彩環(huán)。 色環(huán)的兩端是暖色和寒色，當中是中型色。
二.色彩的心理感覺(jué)。不同的顏色會(huì )給瀏覽者不同的心理感受。
紅色---是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動(dòng)，憤怒，熱情，活力的感覺(jué)。
綠色---介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感覺(jué)。 它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。
橙色---也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時(shí)尚的效果。
黃色---具有快樂(lè )，希望，智慧和輕快的個(gè)性，它的明度最高。
藍色---是最具涼爽，清新，專(zhuān)業(yè)的色彩。 它和白色混合，能體現柔順，淡雅，浪漫的氣氛(象天空的色彩:)
白色---具有潔白，明快，純真，清潔的感受。 黑色---具有深沉，神秘，寂靜，悲哀，壓抑的感受。
灰色---具有中庸，平凡，溫和，謙讓?zhuān)辛⒑透哐诺母杏X(jué)。 每種色彩在飽和度，透明度上略微變化就會(huì )產(chǎn)生不同的感覺(jué)。以綠色為例， 黃綠色有青春，旺盛的視覺(jué)意境，而藍綠色則顯得幽寧，陰深。
○網(wǎng)頁(yè)色彩搭配的原理
1.色彩的鮮明性。網(wǎng)頁(yè)的色彩要鮮艷，容易引人注目。
2.色彩的獨特性。要有與眾不同的色彩，使得大家對你的印象強烈。(參考設計思考第二篇 網(wǎng)站CI的標準色彩一節)
3.色彩的合適性。就是說(shuō)色彩和你表達的內容氣氛相適合。如用粉色體現女性站點(diǎn)的柔性。
4.色彩的聯(lián)想性。不同色彩會(huì )產(chǎn)生不同的聯(lián)想，藍色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁(yè)的內涵相關(guān)聯(lián)。
○網(wǎng)頁(yè)色彩掌握的過(guò)程隨著(zhù)網(wǎng)頁(yè)制作經(jīng)驗的積累，我們用色有這樣的一個(gè)趨勢:單色->五彩繽紛->標準色->單色。 一開(kāi)始因為技術(shù)和知識缺乏，只能制作出簡(jiǎn)單的網(wǎng)頁(yè)，色彩單一；在有一定基礎和材料后， 希望制作一個(gè)漂亮的網(wǎng)頁(yè)，將自己收集的最好的圖片，最滿(mǎn)意色彩堆砌在頁(yè)面上；但是時(shí)間一長(cháng)，卻發(fā)現色彩雜亂，沒(méi)有個(gè)性和風(fēng)格；第三次重新定位自己的網(wǎng)站，選擇好切合自己 的色彩，推出的站點(diǎn)往往比較成功；當最后設計理念和技術(shù)達到頂峰時(shí)，則又返樸歸真，用單一色彩甚至非彩色就可以設計出簡(jiǎn)潔精美的站點(diǎn)。
○網(wǎng)頁(yè)色彩搭配的技巧, 文章寫(xiě)到這里，有心急的網(wǎng)友要問(wèn)了："到底用什么色彩搭配好看呢？你能不能推薦幾種配色方案？"別急，這里有一點(diǎn)技巧，可以幫助你迅速成為調色大師:)
1.用一種色彩。這里是指先選定一種色彩，然后調整透明度或者飽和度，(說(shuō)得通俗些就是將色彩變淡或則加深)，產(chǎn)生新的色彩，用于網(wǎng)頁(yè)。這樣的頁(yè)面看起來(lái)色彩統一，有層次感。
2.用兩種色彩。先選定一種色彩，然后選擇它的對比色(在photoshop里按ctrl+shift+I)。我的主頁(yè)用藍色和黃色就是這樣確定的。整個(gè)頁(yè)面色彩豐富但不花稍。
3.用一個(gè)色系。簡(jiǎn)單的說(shuō)就是用一個(gè)感覺(jué)的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰， 土藍。確定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中 選擇"自定義"，然后在"色庫"中選就可以了:)
4.用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺(jué)很"跳"。
在網(wǎng)頁(yè)配色中，忌諱的是：
1.不要將所有顏色都用到，盡量控制在三種色彩以?xún)取?
2.背景和前文的對比盡量要大，(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內容。
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
