很榮幸，能在這里和大家一起探討關(guān)于網(wǎng)站設(shè)計(jì)的問(wèn)題。目前，網(wǎng)絡(luò)上有關(guān)網(wǎng)頁(yè)制作的各種教程已經(jīng)相當(dāng)多，可以方便地學(xué)習(xí)到最新的技術(shù)和技巧?？墒?，有關(guān)網(wǎng)頁(yè)的設(shè)計(jì),比如設(shè)計(jì)靈感的實(shí)現(xiàn)，風(fēng)格的確定，發(fā)展策略，技術(shù)的篩選等的文章卻比較少，許多網(wǎng)友往往有好的材料，卻苦惱沒(méi)有好的具有表現(xiàn)力的設(shè)計(jì)。受到索易主持人的鼓勵(lì)，阿捷整理了一些網(wǎng)頁(yè)的設(shè)計(jì)心得，在這里和大家交流一下，也算拋磚引玉了，希望得到您的指正，如果您有好的建議和心得，也請(qǐng)發(fā)稿給我ajie@soim.com,在此先道一聲謝謝！

　　網(wǎng)站設(shè)計(jì)，包含的內(nèi)容非常多。大體分兩個(gè)方面：
　　一方面是純網(wǎng)站本身的設(shè)計(jì)比如文字排版，圖片制作，平面設(shè)計(jì)，三維立體設(shè)計(jì)，靜態(tài)無(wú)聲圖文，動(dòng)態(tài)有聲影像等；

　　另一方面是網(wǎng)站的延伸設(shè)計(jì)，包括網(wǎng)站的主題定位和瀏覽群的定位，智能交互，制作策劃，形象包裝，宣傳營(yíng)銷等等。

　　這兩方面相輔相成（感覺(jué)有點(diǎn)象寫(xiě)辨證論文：），加之網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，要提出一個(gè)絕對(duì)正確和權(quán)威的設(shè)計(jì)思路是不可能的，要想在一篇文章中概括出來(lái)也很難，所以阿捷根據(jù)建設(shè)一個(gè)網(wǎng)站的思路，將自己幾年來(lái)網(wǎng)站設(shè)計(jì)制作的心得整理成一個(gè)系列“講座”，告訴給大家（注意：我并不會(huì)非常具體地講某一個(gè)技術(shù)或制作技巧，重點(diǎn)在于思路）希望能給您一些幫助。下面是大致的提綱：

　　1.定位你的網(wǎng)站主題和名稱；
　　 2.定位你的網(wǎng)站CI形象；
　　 3.確定你的欄目和版塊；
　　 4.網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計(jì)
　　 5.網(wǎng)站的層次結(jié)構(gòu)和鏈接結(jié)構(gòu)
　　 6.首頁(yè)的設(shè)計(jì)
　　 7.版面布局的竅門
　　 8.色彩的搭配
　　 9.效果與速度
　　 10.替瀏覽者考慮
　　 11.細(xì)微之處見(jiàn)功力
　　 12.建設(shè)完成度與推出時(shí)間
　　 13.交互性與親和度
　　 14.考慮不同的瀏覽器和分辨率
　　 15.字體的設(shè)置和表格的嵌套
　　 16.新技術(shù)的運(yùn)用取舍
　　 17.設(shè)計(jì)好你的banner和位置
　　 18.語(yǔ)句文字–融入感情
　　 19.對(duì)網(wǎng)站設(shè)計(jì)初學(xué)者的建議

　　以上是本“系列”文章的提綱，會(huì)根據(jù)實(shí)際撰寫(xiě)情況作些變動(dòng)。每星期一篇。我們開(kāi)始之前，首先明確幾個(gè)前提：

　　一．網(wǎng)站設(shè)計(jì)與網(wǎng)站制作。我們說(shuō)網(wǎng)站“設(shè)計(jì)”而不是網(wǎng)站“制作”，它們的區(qū)別在于設(shè)計(jì)是一個(gè)思考的過(guò)程，而制作只是將思考的結(jié)果表現(xiàn)出來(lái)。一個(gè)成功的網(wǎng)站首先需要一個(gè)優(yōu)秀的設(shè)計(jì)，然后輔之優(yōu)秀的制作。設(shè)計(jì)是網(wǎng)站的核心和靈魂，一個(gè)相同的設(shè)計(jì)可以有多種制作表現(xiàn)的方式。

　　二．我們說(shuō)的“網(wǎng)站”是指有確定主題和明確目的的實(shí)用性站點(diǎn)，不包括純表現(xiàn)類或者純文字類網(wǎng)站。

　　三．在文章中，可能舉例說(shuō)明或點(diǎn)評(píng)到某些具體站點(diǎn)。首先申明，阿捷不存在為任何站點(diǎn)作廣告的“嫌疑“。

　　好了，廢話少說(shuō)，我們進(jìn)入正題：

定位你的網(wǎng)站主題和名稱
　　設(shè)計(jì)一個(gè)站點(diǎn)，首先遇到的問(wèn)題就是定位網(wǎng)站主題。

　　所謂主題也就是你的網(wǎng)站的題材。網(wǎng)絡(luò)上的網(wǎng)站題材千奇百怪,琳瑯滿目。只要你想的到，就可以把它制作出來(lái)。下面是美國(guó)《個(gè)人電腦》雜志(PC Magazine)評(píng)出的99年度排名前100位的全美知名網(wǎng)站的十類題材，對(duì)我們有一些參考價(jià)值。

　　第1類：網(wǎng)上求職
　　 第2類：網(wǎng)上聊天／即時(shí)信息/ ICQ
　　 第3類：網(wǎng)上社區(qū)／討論 / 郵件列表
　　 第4類：計(jì)算機(jī)技術(shù)
　　 第5類：網(wǎng)頁(yè)/ 網(wǎng)站開(kāi)發(fā)
　　 第6類：娛樂(lè)網(wǎng)站
　　 第7類：旅行
　　 第8類：參考 /資訊
　　 第9類：家庭/教育
　　 第10類：生活/時(shí)尚

　　每個(gè)大類都可以繼續(xù)細(xì)分，比如娛樂(lè)類再分為體育 /電影/ 音樂(lè)大類，音樂(lè)又可以按格式分為MP3，VQF，Ra，按表現(xiàn)形式分古典，現(xiàn)代，搖滾等。以上都只是最常見(jiàn)的題材，還有許多專業(yè)的，另類的，獨(dú)特的題材可以選擇，比如中醫(yī)，熱帶魚(yú)，天氣預(yù)報(bào)等等，同時(shí)，各個(gè)題材相聯(lián)系和交叉結(jié)合可以產(chǎn)生新得題材，例如旅游論壇（旅游+討論），經(jīng)典入球播放（足球+影視）按這樣分下去，題材可以有成千上萬(wàn)個(gè)，你不會(huì)再為題材重復(fù)，難以選擇而煩惱了吧:)
對(duì)于題材的選擇，我的建議是：

　　1.主題要小而精。定位要小，內(nèi)容要精。如果你想制作一個(gè)包羅萬(wàn)象的站點(diǎn)，把所有您認(rèn)為精彩的東西都放在上面，那么往往會(huì)事與愿違，給人的感覺(jué)是沒(méi)有主題，沒(méi)有特色，樣樣有卻樣樣都很膚淺，因?yàn)槟豢赡苡心敲炊嗟木θゾS護(hù)它。網(wǎng)絡(luò)的最大特點(diǎn)就是新和快，目前最熱門的個(gè)人主頁(yè)都是天天更新甚至幾小時(shí)更新一次。最新的調(diào)查結(jié)果也顯示，網(wǎng)絡(luò)上的“主題站”比“萬(wàn)全站”更受人們喜愛(ài)，就好比專賣店和百貨商店，如果我需要買某方面的東西，肯定會(huì)選擇專買店。再舉個(gè)例子，我的一位網(wǎng)友KK希望制作文學(xué)方面的題材，但是文學(xué)也包括許多許多內(nèi)容，有小說(shuō)，詩(shī)歌，散文；有科幻，武俠，推理；阿捷仔細(xì)了解了他的擅長(zhǎng)和想要提供的主要內(nèi)容，最后將題材定位在網(wǎng)絡(luò)文學(xué)上，刪除了原有的一些無(wú)關(guān)的文學(xué)作品，集中擴(kuò)大和整理網(wǎng)絡(luò)文學(xué)作品。網(wǎng)站推出后，很快受到大家的喜愛(ài)。

　　2.題材最好是你自己擅長(zhǎng)或者喜愛(ài)的內(nèi)容。比如：您對(duì)擅長(zhǎng)編程，就可以建立一個(gè)編程愛(ài)好者網(wǎng)站；對(duì)足球感興趣，可以報(bào)道最新的戰(zhàn)況，球星動(dòng)態(tài)等。這樣在制作時(shí)，才不會(huì)覺(jué)得無(wú)聊或者力不從心。興趣是制作網(wǎng)站的動(dòng)力，沒(méi)有熱情，很難設(shè)計(jì)制作出杰出的作品。

　　3.題材不要太濫或者目標(biāo)太高?！疤珵E”是指到處可見(jiàn)，人人都有的題材；比如軟件下載，免費(fèi)信息。“目標(biāo)太高”是指在這一題材上已經(jīng)有非常優(yōu)秀，知名度很高的站點(diǎn)，你要超過(guò)它是很困難的。除非你下決心和有實(shí)力競(jìng)爭(zhēng)并超過(guò)它，記住，在互聯(lián)網(wǎng)上只有第一，人們往往只記得最好的網(wǎng)站，第二第三名的印象則會(huì)淺得多。

　　OK，如果你已經(jīng)有一個(gè)絕妙的主意了，那我們開(kāi)始為網(wǎng)站起名字。（哎呀，別踢我！）您可能認(rèn)為起名字與網(wǎng)站設(shè)計(jì)無(wú)關(guān)，阿捷在這里浪費(fèi)時(shí)間。其實(shí)網(wǎng)站名稱也是網(wǎng)站設(shè)計(jì)的一部分，而且是很關(guān)鍵的一個(gè)要素。你來(lái)看，“電腦學(xué)習(xí)室”和“電腦之家”顯然是后者簡(jiǎn)練；“迷笛樂(lè)園”和“MIDI樂(lè)園”顯然是后者明晰；“兒童天地”和“中國(guó)幼兒園”顯然是后者大氣。我們都知道PIIICUP的中文名稱“奔騰”，如果改為“奔跑”，可能就沒(méi)有今天這么“火”了:)。和現(xiàn)實(shí)生活中一樣，網(wǎng)站名稱是否正氣，響亮，易記，對(duì)網(wǎng)站的形象和宣傳推廣也有很大影響。一般的建議是：

　　1. 名稱要正。這個(gè)“正”是阿捷自己的說(shuō)法，其實(shí)就是要合法，和理，和情。不能用反動(dòng)的，色情的，迷信的，危害社會(huì)安全的名詞語(yǔ)句。

　　2. 名稱要易記。根據(jù)中文網(wǎng)站瀏覽者的特點(diǎn)，除非特定需要，網(wǎng)站名稱最好用中文名稱，不要使用英文或者中英文混合型名稱。例如：beyond studio和超越工作室，后者更親切好記。另外，網(wǎng)站名稱的字?jǐn)?shù)應(yīng)該控制在六個(gè)字（最好四個(gè)字）以內(nèi)，比如“XX閣”“XX設(shè)計(jì)室”，四個(gè)字的可以用成語(yǔ)，如“一網(wǎng)打進(jìn)”。字?jǐn)?shù)少還有個(gè)好處，一般友情鏈接的小logo尺寸是88X31，而六個(gè)字的寬度是78左右，適合于其他站點(diǎn)的鏈接排版。

　　3. 名稱要有特色。名稱平實(shí)就可以接受，如果能體現(xiàn)一定的內(nèi)涵，給瀏覽者更多的視覺(jué)沖擊和空間想象力，則為上品。這里舉幾個(gè)阿捷認(rèn)為很好的名稱：音樂(lè)前衛(wèi)，網(wǎng)頁(yè)陶吧，天籟絕音。在體現(xiàn)出網(wǎng)站主題的同時(shí)，能點(diǎn)出特色之處。

　　總之，定位題材和名稱是設(shè)計(jì)一個(gè)網(wǎng)站的第一步，也是很重要的一部分。如果能找到一個(gè)滿意的名稱，花一天時(shí)間翻字典也是值得的:)

定位你的網(wǎng)站CI形象
　　所謂CI，是借用的廣告術(shù)語(yǔ)。(CI是英文corporate identity的縮寫(xiě))，意思是通過(guò)視覺(jué)來(lái)統(tǒng)一企業(yè)的形象?，F(xiàn)實(shí)生活中的CI策劃比比皆是，杰出的例子如：可口可樂(lè)公 司，全球統(tǒng)一的標(biāo)志，色彩和產(chǎn)品包裝，給我們的印象極為深刻。更多的例子如SONY,三菱，麥當(dāng)勞等等。

　　一個(gè)杰出的網(wǎng)站，和實(shí)體公司一樣，也需要整體的形象包裝和設(shè)計(jì)。準(zhǔn)確的，有創(chuàng)意的CI 設(shè)計(jì)，對(duì)網(wǎng)站的宣傳推廣有事半功倍的效果。在您的網(wǎng)站主題和名稱定下來(lái)之后，需要思考的就是網(wǎng)站的CI形象。

　　有網(wǎng)友要問(wèn)了：我不是學(xué)廣告專業(yè)的，CI對(duì)我來(lái)說(shuō)可能太難了吧:( 不用擔(dān)心，阿捷自己也沒(méi)有學(xué)過(guò)設(shè)計(jì)專業(yè)哦。大家只要參考我的一些具體做法和經(jīng)驗(yàn)，很容易將自己網(wǎng)站的CI搞定:)

　　1.設(shè)計(jì)網(wǎng)站的標(biāo)志(logo).首先你需要設(shè)計(jì)制作一個(gè)網(wǎng)站的標(biāo)志(logo)。就如同商標(biāo)一樣，logo是你站點(diǎn)特色和內(nèi)涵的集中體現(xiàn)，看見(jiàn)logo就讓大家聯(lián)想起你的站點(diǎn)。注意：這里的logo不是指88X31的小圖標(biāo)banner,而是網(wǎng)站的標(biāo)志。

　　標(biāo)志可以是中文，英文字母，可以是符號(hào)，圖案，可以是動(dòng)物或者人物等等。比如：soim是用soim的英文作為標(biāo)志，新浪用字母sina+眼睛作為標(biāo)志。標(biāo)志的設(shè)計(jì)創(chuàng)意來(lái)自你網(wǎng)站的名稱和內(nèi)容。

　　(1).網(wǎng)站有代表性的人物，動(dòng)物，花草，可以用它們作為設(shè)計(jì)的藍(lán)本，加以卡通化和藝術(shù)化，例如迪斯尼的米老鼠，搜狐的卡通狐貍，鯊?fù)w壇的籃球鯊魚(yú)。

　　(2).網(wǎng)站有專業(yè)性的，可以以本專業(yè)有代表的物品作為標(biāo)志。比如中國(guó)銀行的銅板標(biāo)志，奔馳汽車的方向盤標(biāo)志。

　　(3).最常用和最簡(jiǎn)單的方式是用自己網(wǎng)站的英文名稱作標(biāo)志。采用不同的字體， 字母的變形，字母的組合可以很容易制作好自己的標(biāo)志。

　　2.設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩。網(wǎng)站給人的第一印象來(lái)自視覺(jué)沖擊，確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步。不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問(wèn)者的情緒。

　　“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站型象和延伸內(nèi)涵的色彩。舉個(gè)實(shí)際的例子就明白了：IBM的深藍(lán)色，肯得基的紅色條型，windows視窗標(biāo)志上的紅藍(lán)黃綠色塊，都使我們覺(jué)得很貼切，很和諧。如果將IBM改用綠色或金黃色，我們會(huì)有什么感覺(jué)？

　　一般來(lái)說(shuō)，一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩不超過(guò)3種，太多則讓人眼花繚亂。標(biāo)準(zhǔn)色彩要用于網(wǎng)站的標(biāo)志，標(biāo)題，主菜單和主色塊。給人以整體統(tǒng)一的感覺(jué)。至于其它色彩也可以使用，只是作為點(diǎn)綴和襯托，絕不能喧賓奪主。

　　一般來(lái)說(shuō)，適合于網(wǎng)頁(yè)標(biāo)準(zhǔn)色的顏色有：藍(lán)色，黃/橙色，黑/灰/白色三大系列色。(注：關(guān)于色彩搭配的具體方法，我們會(huì)在本系列文章的第八篇介紹)。

　　3.設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體。和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志，標(biāo)題，主菜單的特有字體。一般我們網(wǎng)頁(yè)默認(rèn)的字體是宋體。為了體現(xiàn)站點(diǎn)的“與眾不同”和特有風(fēng)格，我們可以根據(jù)需要選擇一些特別字體。例如，為了體現(xiàn)專業(yè)可以使用粗仿宋體，體現(xiàn)設(shè)計(jì)精美可以用廣告體，體現(xiàn)親切隨意可以用手寫(xiě)體等等。當(dāng)然這些都是阿捷的個(gè)人看法，你可以根據(jù)自己網(wǎng)站所表達(dá)的內(nèi)涵，選擇更貼切的字體。目前常見(jiàn)的中文字體有二三十種，常見(jiàn)的英文字體有近百種，網(wǎng)絡(luò)上還有許多專用英文藝術(shù)字體下載，要尋找一款滿意的字體并不算困難:)

　　需要說(shuō)明的是：使用非默認(rèn)字體只能用圖片的形式，因?yàn)楹芸赡転g覽者的PC里沒(méi)有安裝你的特別字體，那么您的辛苦設(shè)計(jì)制作便付之東流啦！

　　4.設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語(yǔ)。也可以說(shuō)是網(wǎng)站的精神，網(wǎng)站的目標(biāo)。用一句話甚至一個(gè)詞來(lái)高度概括。類似實(shí)際生活中的廣告金句。例如：鵲巢的“味道好極了”；麥斯威爾的“好東西和好朋友一起分享”；Intel的“給你一個(gè)奔騰的心”。

　　以上四方面：標(biāo)志，色彩，字體，標(biāo)語(yǔ)，是一個(gè)網(wǎng)站樹(shù)立CI形象的關(guān)鍵，確切的說(shuō)是網(wǎng)站的表面文章，設(shè)計(jì)并完成這幾步，你的網(wǎng)站將脫胎換骨，整體形象有一個(gè)提高。形象地說(shuō)：你從一個(gè)土氣的農(nóng)民轉(zhuǎn)變?yōu)橐晃晃餮b革履的白領(lǐng)人士。(注意：我們只是以平面靜態(tài)來(lái)設(shè)計(jì)CI,還沒(méi)有引入聲音，三維立體等因素。)

　　好了，看了以上的介紹，你應(yīng)該對(duì)網(wǎng)站CI有了一個(gè)初步的概念。也許不是很明白，因?yàn)槟切┑览硖橄罅?，你可能需要一些?shí)際的，更生動(dòng)的例子。阿捷會(huì)在自己的主頁(yè)上同時(shí)修改補(bǔ)充一些實(shí)例。下一節(jié)，我們來(lái)討論“確定網(wǎng)站的欄目版塊”，歡迎您參與，謝謝！

確定網(wǎng)站的欄目和版塊

　　《設(shè)計(jì)的思考》系列文章，今天開(kāi)始寫(xiě)第三篇。阿捷不是專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)師，但阿捷將盡自己所能把這個(gè)系列文章寫(xiě)好，盡可能將自己實(shí)踐過(guò)程中總結(jié)的經(jīng)驗(yàn)和心得告訴給大家，希望能給您一點(diǎn)收獲，一點(diǎn)啟發(fā)。文章中所列觀點(diǎn)如有不同意見(jiàn)，歡迎您來(lái)信討論，來(lái)信寄ajie@soim.com，謝謝。

　　我們?cè)谇岸恼吕飳W(xué)習(xí)了定位網(wǎng)站主題和確立網(wǎng)站的CI形象。下面是否該進(jìn)入實(shí)質(zhì)性的設(shè)計(jì)制作階段呢？答案是：不能。經(jīng)驗(yàn)告訴我們，建立一個(gè)網(wǎng)站好比寫(xiě)一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰；也好比造一座高樓，首先要設(shè)計(jì)好框架圖紙，才能使樓房結(jié)構(gòu)合理。

　　初學(xué)者(包括我自己:-)，最容易犯的錯(cuò)誤就是：確定題材后立刻開(kāi)始制作。當(dāng)你一頁(yè)一頁(yè)制作完畢后才發(fā)現(xiàn)：網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜，內(nèi)容東一塊西一塊。結(jié)果不但瀏覽者看得糊涂，自己擴(kuò)充和維護(hù)網(wǎng)站也相當(dāng)困難，您的網(wǎng)站或許就此半途而廢，更糟糕的是：你因此失去了制作主頁(yè)的信心和興趣！

　　所以，我們?cè)趧?dòng)手制作網(wǎng)頁(yè)前，一定要考慮好以下三方面：

　　1.確定欄目和版塊；
　　 2.確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)
　　 3.確定網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計(jì)

　　今天我們首先來(lái)討論“確定網(wǎng)站的欄目和版塊”。

　　網(wǎng)站的題材確定后，相信你已經(jīng)收集和組織了許多相關(guān)的資料內(nèi)容。你一定認(rèn)為這些都是最好的，肯定能吸引網(wǎng)友們來(lái)瀏覽網(wǎng)站。但是你有沒(méi)有將最好的，最吸引人的內(nèi)容放在最突出的位置呢？有沒(méi)有讓好東西在版面分布上占絕對(duì)優(yōu)勢(shì)呢？

　　我看見(jiàn)許多個(gè)人主頁(yè)的欄目(主菜單)并不是這樣的。舉個(gè)例子：有一個(gè)以提供動(dòng)畫(huà)素材為主題的站點(diǎn)，它的主欄目是：關(guān)于站長(zhǎng)，本站導(dǎo)航，動(dòng)畫(huà)寶庫(kù)，本站論壇，本站留言本，聯(lián)系站長(zhǎng)。首頁(yè)上寫(xiě)著本站網(wǎng)址和版權(quán)申明(居然還有將本站設(shè)為首頁(yè)字樣)。最主要的，最吸引人的動(dòng)畫(huà)素材在主欄目里占1/6，在首頁(yè)上一字沒(méi)提。我想即使這個(gè)站點(diǎn)的確有大量的，精美的動(dòng)畫(huà)素材，也很難吸引瀏覽者繼續(xù)挖掘。