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