教你如果撰寫標準的網站設計方案

發布:貓眼工作室 發布時間:2010/3/12 9:38:11 點擊:3808

 

前 言

  目前,網絡上有關網頁制作的各種教程已經相當多,可以方便地學習到最新的技術和技巧?墒,有關網頁的設計,比如設計靈感的實現,風格的確定,發展策略,技術的篩選等的文章卻比較少,許多網友往往有好的材料,卻苦惱沒有好的具有表現力的設計。
  網站設計,包含的內容非常多。大體分兩個方面:
  一方面是純網站本身的設計比如文字排版,圖片制作,平面設計,三維立體設計,靜態無聲圖文,動態有聲影像等;
  
  另一方面是網站的延伸設計,包括網站的主題定位和瀏覽群的定位,智能交互,制作策劃,形象包裝,宣傳營銷等等。
  
  這兩方面相輔相成(感覺有點象寫辨證論文:),加之網絡技術的飛速發展,要提出一個絕對正確和權威的設計思路是不可能的,要想在一篇文章中概括出來也很難,所以阿捷根據建設一個網站的思路,將自己幾年來網站設計制作的心得整理成一個系列“講座”,告訴給大家(注意:我并不會非常具體地講某一個技術或制作技巧,重點在于思路)希望能給您一些幫助。下面是大致的提綱:
  1.定位你的網站主題和名稱
  2.定位你的網站CI形象
  3.確定你的欄目和版塊
  4.網站的整體風格創意設計
  5.網站的層次結構和鏈接結構
  6.首頁的設計
  7.版面布局的竅門
  8.色彩的搭配
 
  我們開始之前,首先明確幾個前提:
  一.網站設計與網站制作。我們說網站“設計”而不是網站“制作”,它們的區別在于設計是一個思考的過程,而制作只是將思考的結果表現出來。一個成功的網站首先需要一個優秀的設計,然后輔之優秀的制作。設計是網站的核心和靈魂,一個相同的設計可以有多種制作表現的方式。
  
  二.我們說的“網站”是指有確定主題和明確目的的實用性站點,不包括純表現類或者純文字類等網站。
  
  三.在文章中,可能舉例說明或點評到某些具體站點。首先申明,阿捷不存在為任何站點作廣告的 “嫌疑”。
 

定位你的網站主題和名稱
作者:阿捷
ajie@soim.com 1.定位你的網站主題和名稱
2.定位你的網站CI形象
3.確定你的欄目和版塊
4.網站的整體風格創意設計
5.網站的層次結構和鏈接結構
6.首頁的設計
7.版面布局的竅門
8.色彩的搭配

  設計一個站點,首先遇到的問題就是定位網站主題。
  所謂主題也就是你的網站的題材。網絡上的網站題材千奇百怪,琳瑯滿目。只要你想的到,就可以把它制作出來。下面是美國《個人電腦》雜志(PC Magazine)評出的99年度排名前100位的全美知名網站的十類題材,對我們有一些參考價值。
  第1類:網上求職
  第2類:網上聊天/即時信息/ ICQ
  第3類:網上社區/討論 / 郵件列表
  第4類:計算機技術
  第5類:網頁/ 網站開發
  第6類:娛樂網站
  第7類:旅行
  第8類:參考 /資訊
  第9類:家庭/教育
  第10類:生活/時尚

  每個大類都可以繼續細分,比如娛樂類再分為體育 /電影/ 音樂大類,音樂又可以按格式分為MP3,VQF,Ra,按表現形式分古典,現代,搖滾等。以上都只是最常見的題材,還有許多專業的,另類的,獨特的題材可以選擇,比如中醫,熱帶魚,天氣預報等等,同時,各個題材相聯系和交叉結合可以產生新得題材,例如旅游論壇(旅游+討論),經典入球播放(足球+影視)按這樣分下去,題材可以有成千上萬個,你不會再為題材重復,難以選擇而煩惱了吧:)
  對于題材的選擇,我的建議是:
  1.主題要小而精。定位要小,內容要精。如果你想制作一個包羅萬象的站點,把所有您認為精彩的東西都放在上面,那么往往會事與愿違,給人的感覺是沒有主題,沒有特色,樣樣有卻樣樣都很膚淺,因為您不可能有那么多的精力去維護它。網絡的最大特點就是新和快,目前最熱門的個人主頁都是天天更新甚至幾小時更新一次。最新的調查結果也顯示,網絡上的“主題站”比“萬全站”更受人們喜愛,就好比專賣店和百貨商店,如果我需要買某方面的東西,肯定會選擇專買店。再舉個例子,我的一位網友KK希望制作文學方面的題材,但是文學也包括許多許多內容,有小說,詩歌,散文;有科幻,武俠,推理;阿捷仔細了解了他的擅長和想要提供的主要內容,最后將題材定位在網絡文學上,刪除了原有的一些無關的文學作品,集中擴大和整理網絡文學作品。網站推出后,很快受到大家的喜愛。
  2.題材最好是你自己擅長或者喜愛的內容。比如:您對擅長編程,就可以建立一個編程愛好者網站;對足球感興趣,可以報道最新的戰況,球星動態等。這樣在制作時,才不會覺得無聊或者力不從心。興趣是制作網站的動力,沒有熱情,很難設計制作出杰出的作品。
  3.題材不要太濫或者目標太高。“太濫”是指到處可見,人人都有的題材;比如軟件下載,免費信息。“目標太高”是指在這一題材上已經有非常優秀,知名度很高的站點,你要超過它是很困難的。除非你下決心和有實力競爭并超過它,記住,在互聯網上只有第一,人們往往只記得最好的網站,第二第三名的印象則會淺得多。OK,如果你已經有一個絕妙的主意了,那我們開始為網站起名字。(哎呀,別踢我。┠赡苷J為起名字與網站設計無關,阿捷在這里浪費時間。其實網站名稱也是網站設計的一部分,而且是很關鍵的一個要素。你來看,“電腦學習室”和“電腦之家”顯然是后者簡練;“迷笛樂園”和“MIDI樂園”顯然是后者明晰;“兒童天地”和“中國幼兒園”顯然是后者大氣。我們都知道PIIICUP的中文名稱“奔騰”,如果改為“奔跑”,可能就沒有今天這么“火”了:)。和現實生活中一樣,網站名稱是否正氣,響亮,易記,對網站的形象和宣傳推廣也有很大影響。一般的建議是:
  1). 名稱要正。這個“正”是阿捷自己的說法,其實就是要合法,和理,和情。不能用反動的,色情的,迷信的,危害社會安全的名詞語句。
  2). 名稱要易記。根據中文網站瀏覽者的特點,除非特定需要,網站名稱最好用中文名稱,不要使用英文或者中英文混合型名稱。例如:beyond studio和超越工作室,后者更親切好記。另外,網站名稱的字數應該控制在六個字(最好四個字)以內,比如“XX閣”“XX設計室”,四個字的可以用成語,如“一網打進”。字數少還有個好處,一般友情鏈接的小logo尺寸是88X31,而六個字的寬度是78左右,適合于其他站點的鏈接排版。
  3). 名稱要有特色。名稱平實就可以接受,如果能體現一定的內涵,給瀏覽者更多的視覺沖擊和空間想象力,則為上品。這里舉幾個阿捷認為很好的名稱:音樂前衛,網頁陶吧,天籟絕音。在體現出網站主題的同時,能點出特色之處。
  總之,定位題材和名稱是設計一個網站的第一步,也是很重要的一部分。如果能找到一個滿意的名稱,花一天時間翻字典也是值得的:)
 
 定位你的網站CI形象
作者:阿捷
ajie@soim.com  1.定位你的網站主題和名稱
2.定位你的網站CI形象
3.確定你的欄目和版塊
4.網站的整體風格創意設計
5.網站的層次結構和鏈接結構
6.首頁的設計
7.版面布局的竅門
8.色彩的搭配

  所謂CI,是借用的廣告術語。(CI是英文corporate identity的縮寫),意思是通過視覺來統一企業的形象,F實生活中的CI策劃比比皆是,杰出的例子如:可口可樂公司,全球統一的標志,色彩和產品包裝,給我們的印象極為深刻。更多的例子如SONY,三菱,麥當勞等等。
  一個杰出的網站,和實體公司一樣,也需要整體的形象包裝和設計。準確的,有創意的CI設計,對網站的宣傳推廣有事半功倍的效果。在您的網站主題和名稱定下來之后,需要思考的就是網站的CI形象。
  有網友要問了:我不是學廣告專業的,CI對我來說可能太難了吧:( 不用擔心,阿捷自己也沒有學過設計專業哦。大家只要參考我的一些具體做法和經驗,很容易將自己網站的CI搞定:)
  1.設計網站的標志(logo).首先你需要設計制作一個網站的標志(logo)。就如同商標一樣,logo是你站點特色和內涵的集中體現,看見logo就讓大家聯想起你的站點。注意:這里的logo不是指88X31的小圖標banner,而是網站的標志。
  標志可以是中文,英文字母,可以是符號,圖案,可以是動物或者人物等等。比如:soim是用soim的英文作為標志,新浪用字母sina+眼睛作為標志。標志的設計創意來自你網站的名稱和內容。
  (1).網站有代表性的人物,動物,花草,可以用它們作為設計的藍本,加以卡通化和藝術化,例如迪斯尼的米老鼠,搜狐的卡通狐貍,鯊威體壇的籃球鯊魚。
  (2).網站有專業性的,可以以本專業有代表的物品作為標志。比如中國銀行的銅板標志,奔馳汽車的方向盤標志。
  (3).最常用和最簡單的方式是用自己網站的英文名稱作標志。采用不同的字體,字母的變形,字母的組合可以很容易制作好自己的標志。
  2.設計網站的標準色彩。網站給人的第一印象來自視覺沖擊,確定網站的標準色彩是相當重要的一步。不同的色彩搭配產生不同的效果,并可能影響到訪問者的情緒。
  “標準色彩”是指能體現網站型象和延伸內涵的色彩。舉個實際的例子就明白了:IBM的深藍色,肯得基的紅色條型,windows視窗標志上的紅藍黃綠色塊,都使我們覺得很貼切,很和諧。如果將IBM改用綠色或金黃色,我們會有什么感覺?
  一般來說,一個網站的標準色彩不超過3種,太多則讓人眼花繚亂。標準色彩要用于網站的標志,標題,主菜單和主色塊。給人以整體統一的感覺。至于其它色彩也可以使用,只是作為點綴和襯托,絕不能喧賓奪主。
  一般來說,適合于網頁標準色的顏色有:藍色,黃/橙色,黑/灰/白色三大系列色。
  3.設計網站的標準字體。和標準色彩一樣,標準字體是指用于標志,標題,主菜單的特有字體。一般我們網頁默認的字體是宋體。為了體現站點的“與眾不同”和特有風格,我門可以根據需要選擇一些特別字體。例如,為了體現專業可以使用粗仿宋體,體現設計精美可以用廣告體,體現親切隨意可以用手寫體等等。當然這些都是阿捷的個人看法,你可以根據自己網站所表達的內涵,選擇更貼切的字體。目前常見的中文字體有二三十種,常見的英文字體有近百種,網絡上還有許多專用英文藝術字體下載,要尋找一款滿意的字體并不算困難:) 需要說明的是:使用非默認字體只能用圖片的形式,因為很可能瀏覽者的PC里沒有安裝你的特別字體,那么您的辛苦設計制作便付之東流啦!
  4.設計網站的宣傳標語。也可以說是網站的精神,網站的目標。用一句話甚至一個詞來高度概括。類似實際生活中的廣告金句。例如:鵲巢的“味道好極了”;麥斯威爾的“好東西和好朋友一起分享”;Intel的“給你一個奔騰的心”。
  以上四方面:標志,色彩,字體,標語,是一個網站樹立CI形象的關鍵,確切的說是網站的表面文章,設計并完成這幾步,你的網站將脫胎換骨,整體形象有一個提高。形象地說:你從一個土氣的農民轉變為一位西裝革履的白領人士。(注意:我們只是以平面靜態來設計CI,還沒有引入聲音,三維立體等因素。)
 
 確定網站的欄目和版塊
作者:阿捷
ajie@soim.com 1.定位你的網站主題和名稱
2.定位你的網站CI形象
3.確定你的欄目和版塊
4.網站的整體風格創意設計
5.網站的層次結構和鏈接結構
6.首頁的設計
7.版面布局的竅門
8.色彩的搭配

  我們在前二篇文章里學習了定位網站主題和確立網站的CI形象。下面是否該進入實質性的設計制作階段呢?答案是:不能。經驗告訴我們,建立一個網站好比寫一篇文章,首先要擬好提綱,文章才能主題明確,層次清晰;也好比造一座高樓,首先要設計好框架圖紙,才能使樓房結構合理。
  初學者(包括我自己:-),最容易犯的錯誤就是:確定題材后立刻開始制作。當你一頁一頁制作完畢后才發現:網站結構不清晰,目錄龐雜,內容東一塊西一塊。結果不但瀏覽者看得糊涂,自己擴充和維護網站也相當困難,您的網站或許就此半途而廢,更糟糕的是:你因此失去了制作主頁的信心和興趣!
  所以,我們在動手制作網頁前,一定要考慮好以下三方面:
  1.確定欄目和版塊;
  2.確定網站的目錄結構和鏈接結構
  3.確定網站的整體風格創意設計
  今天我們首先來討論“確定網站的欄目和版塊”。網站的題材確定后,相信你已經收集和組織了許多相關的資料內容。你一定認為這些都是最好的,肯定能吸引網友們來瀏覽網站。但是你有沒有將最好的,最吸引人的內容放在最突出的位置呢?有沒有讓好東西在版面分布上占絕對優勢呢?
  我看見許多個人主頁的欄目(主菜單)并不是這樣的。舉個例子:有一個以提供動畫素材為主題的站點,它的主欄目是:關于站長,本站導航,動畫寶庫,本站論壇,本站留言本,聯系站長。首頁上寫著本站網址和版權申明(居然還有將本站設為首頁字樣)。最主要的,最吸引人的動畫素材在主欄目里占1/6,在首頁上一字沒提。我想即使這個站點的確有大量的,精美的動畫素材,也很難吸引瀏覽者繼續挖掘。
  欄目的實質是一個網站的大綱索引,索引應該將網站的主體明確顯示出來。在制定欄目的時候,要仔細考慮,合理安排。一般的網站欄目安排要注意以下幾方面:
  1.一定記住要緊扣你的主題!
一般的做法是:將你的主題按一定的方法分類并將它們作為網站的主欄目。例如上面的例子,可以將欄目分為動物動畫,標志動畫,三維動畫,卡通動畫等,在首頁上標明最近更新的動畫。記。褐黝}欄目個數在總欄目中要占絕對優勢,這樣的網站顯的專業,主題突出,容易給人留下深刻印象。
  2.設一個最近更新或網站指南欄目
  如果你的首頁沒有安排版面放置最近更新內容信息,就有必要設立一個“最近更新”的欄目。這樣做是為了照顧常來的訪客,讓你的主頁更有人性化。
  如果你的主頁內容龐大(超過15MB),層次較多,而又沒有站內的搜索引擎,建議您設置“本站指南”欄目?梢詭椭踉L者快速找到他們想要的內容。
  3.設定一個可以雙向交流的欄目
  不需要很多,但一定要有。比如論壇,留言本,郵件列表等,可以讓瀏覽者留下他們的信息。有調查表明,提供雙向交流的站點比簡單的留一個"Email me"的站點更具有親和力。
  4.設一個下載或常見問題回答欄目
  網絡的特點是信息共享。如果你看到一個站點有大量的優秀的有價值的資料,你肯定希望能一次性下載,而不是一頁一頁瀏覽存盤。“將心比心”在你自己的主頁上設置一個資料下載欄目,會得到大家的喜歡。有些站點為了廣告顯示量,一篇文章還要分幾頁顯示,我覺得遲早會因訪問量下降而淘汰(個人意見:)。另外,如果您的站點經常收到網友關于某方面的問題來信,你最好設立一個常見問題回答的欄目,既方便了網友,也可以節約自己更多時間用以學習。
  至于其他的輔助內容,如關于本站,版權信息等可以不放在主欄目里,以免沖淡主題?
結以上幾點,我們得出劃分欄目需要注意的是:
  ●盡可能刪除與主題無關的欄目
  ●盡可能將網站最有價值的內容列在欄目上
  ●盡可能方便訪問者的瀏覽和查詢
  
  上面說的是欄目,我們再看看版塊設置。版塊比欄目的概念要大一些,每個版塊都有自己的欄目。舉個例子:網易的站點分新聞,體育,財經,娛樂,教育等版塊,每個版塊下面有各有自己的主欄目。一般的個人站點內容少,只有主欄目(主菜單)就夠了,不需要設置版塊。如果你覺得的確有必要設置版塊的,應該注意1.各版塊要有相對獨立性。2.各版塊要有相互關聯。3.版塊的內容要圍繞站點主題。關于版塊方面,主要是門戶站點等較大ICP需要考慮的問題,阿捷在此不再作展開討論。
 
確定網站的整體風格和創意設計
作者:阿捷
ajie@soim.com 1.定位你的網站主題和名稱
2.定位你的網站CI形象
3.確定你的欄目和版塊
4.網站的整體風格創意設計
5.網站的層次結構和鏈接結構
6.首頁的設計
7.版面布局的竅門
8.色彩的搭配

  網站的整體風格及其創意設計是站長們最希望掌握,也是最難以學習的。難就難在沒有一個固定的程式可以參照和模仿。給你一個主題,任何兩人都不可能設計出完全一樣的網站。當我們說:"這個站點很cool,很有個性!"那么,是什么讓你覺得很cool呢?它到底和一般的網站有什么區別呢?本文試圖用最簡明的語言來說明:
  1.風格是什么,如何樹立網站風格?
  2.創意是什么,如何產生創意?
  ●風格(style)是抽象的。是指站點的整體形象給瀏覽者的綜合感受。
  這個“整體形象”包括站點的CI(標志,色彩,字體,標語),版面布局,瀏覽方式,交互性,文字,語氣,內容價值,存在意義,站點榮譽等等諸多因素。舉個例子:
  我們覺得網易是平易近人的,迪斯尼是生動活潑的,IBM是專業嚴肅的。這些都是網站給人們留下的不同感受。
  風格是獨特的,是站點不同與其他網站的地方;蛘呱,或者技術,或者是交互方式,能讓瀏覽者明確分辨出這是你的網站獨有的。例如新世紀網絡(www.century.2000c.net)的黑白色,網易壁紙站的特有框架,即使你只看到其中一頁,也可以分辨出是哪個網站的。
  風格是有人性的。通過網站的外表,內容,文字,交流可以概括出一個站點的個性,情緒。是溫文儒雅,是執著熱情,是活潑易變,是放任不羈。象詩詞中的“豪放派”和“婉約派”,你可以用人的性格來比喻站點。
  有風格的網站與普通網站的區別在于:普通網站你看到的只是堆砌在一起的信息,你只能用理性的感受來描述,比如信息量大小,瀏覽速度快慢。但你瀏覽過有風格的網站后你能有更深一層的感性認識,比如站點有品位,和藹可親,是老師,是朋友。
  看了以上描述,你可能對風格是什么可能依然模糊。其實風格就是一句話:與眾不同!
  如何樹立網站風格呢?我們可以分這樣幾個步驟:
  第一,確信風格是建立在有價值內容之上的。一個網站有風格而沒有內容,就好比繡花枕頭一包草,好比一個性格傲慢但卻目不識丁的人。你首先必須保證內容的質量和價值性。這是最基本的,無須置疑。
  第二,你需要徹底搞清楚自己希望站點給人的印象是什么?梢詮倪@幾方面來理清思路:
  1.如果只用一句話來描述你的站點,應該是:_____________
  參考答案:
  有創意,專業,有(技術)實力,有美感,有沖擊力
  2.想到你的站點,可以聯想到的色彩是:________________
  參考答案:
  熱情的紅色,幻想的天蘭色,聰明的金黃色
  3.想到你的站點,可以聯想到的畫面是:________________
  參考答案:
  一份早報,一輛法拉利跑車,人群擁擠的廣場,雜貨店
  4.如果網站是一個人,他擁有的個性是:________________
  參考答案:
  思想成熟的中年人,狂野奔放的牛仔,自信憨厚的創業者
  5.作為站長,你希望給人的印象是:____________________
  參考答案:
  敬業,認真投入,有深度,負責,純真,直爽,淑女
  6.用一種動物來比喻,你的網站最象:__________________
  參考答案:
  貓(神秘高貴),鷹(目光銳利),兔子(聰明敏感),獅子(自信威信)
  7.瀏覽者覺得你和其他網站的不同是:__________________
  參考答案:
  可以信賴,信息最快,交流方便,
  8.瀏覽者和你交流合作的感受是:______________________
  參考答案:
  師生,同事,朋友,長幼。
  你可以自己先填寫一份答案,然后讓其他網友填寫。比較后的結果會告訴你:你網站現在的差距,弱點及需要改進的地方。
  第三,在明確自己的網站印象后,開始努力建立和加強這種印象。經過第二步印象的的"量化"后,你需要進一步找出其中最有特色特點的東西,就是最能體現網站風格的東西。并以它作為網站的特色加以重點強化,宣傳。例如:再次審查網站名稱,域名,欄目名稱是否符合這種個性,是否易記。審查網站標準色彩是否容易聯想到這種特色,是否能體現網站的性格等等。具體的做法,沒有定式。我這里提供一些參考:
  1.將你的標志logo,盡可能的出現在每個頁面上;蛘唔撁,或者頁腳,或則背景。
  2.突出你的標準色彩。文字的鏈接色彩,圖片的主色彩,背景色,邊框等色彩盡量使用
與標準色彩一致的色彩。
  3.突出你的標準字體。在關鍵的標題,菜單,圖片里使用統一的標準字體。
  4.想一條朗朗上口宣傳標語。把它做在你的banner里,或者放在醒目的位置,告訴大家
你的網站的特色是...
  5.使用統一的語氣和人稱。即使是多個人合作維護,也要讓讀者覺得是同一個人寫的。
  6.使用統一的圖片處理效果。比如,陰影效果的方向,厚度,模糊度都必須一樣。
  7.創造一個你的站點特有的符號或圖標。比如在一句鏈接前的一個點,可以使用,.。
☆※○◇□△→(區位碼里自己參看)等等。雖然很簡單的一個變化,卻給人與眾不
同的感覺,(為什么我沒有想到呢?)
  8.用自己設計的花邊,線條,點
  9.展示你網站的榮譽和成功作品。
  10.告訴網友關于你的真實的故事和想法。
  風格的形成不是一次定位的,你可以在實踐中不斷強化,調整,修飾,直到有一天,網友們
寫信告訴你:"我喜歡你的站點,因為它很有風格!"

  ● 創意(idea)是網站生存的關鍵。
  這一點相信大家都已經認同。然而作為網頁設計師,最苦惱的就是沒有好的創意來源。
  注意,這里說的創意是指站點的整體創意,(因為這個創意而產生這個站點,或者相同的內容,推出的創意不同),網頁的平面設計創意我將在后面的版面布局竅門里介紹。
  創意到底是什么,如何產生創意呢?
  創意是引人入勝,精彩萬分,出奇不意的;
  創意是捕捉出來的點子,是創作出來的奇招....
  這些講法都說出了創意的一些特點,實質上,創意是傳達信息的一種特別方式。
  比如Webdesigner(網頁設計師),我們將其中的E字母大寫一下: wEbdEsigEr,感覺怎么樣,
這其實就是一種創意!
  創意并不是天才者的靈感,而是思考的結果。根據美國廣告學教授詹姆斯的研究,創意思考
的過程分五階段:
  1.準備期--研究所搜集的資料,根據舊經驗,啟發新創意;
  2.孵化期--將資料咀嚼消化,使意識自由發展,任意結合;
  3.啟示期--意識發展并結合,產生創意;
  4.驗證期--將產生的創意討論修正;
  5.形成期--設計制作網頁,將創意具體化。
  ○創意是將現有的要素重新組合。
  比如,網絡與電話結合,產生IP電話。從這一點上出發,任何人,包括你和我,都可以創造出不同凡響的創意。而且,資料越豐富,越容易產生創意。就好比萬花筒,筒內的玻璃片越多,所呈現的圖案越多。你如果有心可以發現,網絡上的最多的創意來自與現實生活的結合(或者虛擬現實),例如在線書店,電子社區,在線拍賣。你是否想到了一種更好的創意呢?
  創意思考的途徑最常用的是聯想,這里提供了網站創意的25種聯想線索:
  1.把它顛倒 2.把它縮小 3.把顏色換一下 4.使它更長 5.使它閃動 6.把它放進音樂里 7.結合文字音樂圖畫 8.使它成為年輕的 9.使它重復 10.使它變成立體 11.參加競賽 12.參加打賭 13.變更一部分 14.分裂它 15.使它羅曼蒂克 16.使它速度加快 17.增加香味 18.使它看起來流行 19.使它對稱 20.將它向兒童訴求 21.價格更低 22.給它起個綽號 23.把它打包 24.免費提供 25.以上各項延伸組合
  -------------(轉載自樊志育《廣告制作》)
  需要一提的是:創意的目的是更好的宣傳推廣網站。如果創意很好,卻對網站發展毫無意義,好比給奶牛穿高跟鞋,那么,我們寧可放棄這個創意!
  關于風格和創意,可以講得還有許多。感興趣的網友可以自己找一些廣告設計方面的書閱讀。
希望本文能幫助您對網站的設計有一個更新的認識和提高。
 確定網站的目錄結構和鏈接結構
作者:阿捷
ajie@soim.com 1.定位你的網站主題和名稱
2.定位你的網站CI形象
3.確定你的欄目和版塊
4.網站的整體風格創意設計
5.網站的層次結構和鏈接結構
6.首頁的設計
7.版面布局的竅門
8.色彩的搭配

   一.網站的目錄結構
  網站的目錄是指你建立網站時創建的目錄。例如:在用frontpage98建立網站時都默認建立了根目錄和images子目錄。目錄的結構是一個容易忽略的問題,大多數站長都是未經規劃,隨意創建子目錄。目錄結構的好壞,對瀏覽者來說并沒有什么太大的感覺,但是對于站點本身的上傳維護,內容未來的擴充和移植有著重要的影響。下面是建立目錄結構的一些建議:
  ●不要將所有文件都存放在根目錄下。
  有網友為了方便,將所有文件都放在根目錄下。這樣做造成的不利影響在于:
  1.文件管理混亂。你常常搞不清哪些文件需要編輯和更新,哪些無用的文件可以刪除,哪些是相關聯的文件,影響工作效率。
  2.上傳速度慢。服務器一般都會為根目錄建立一個文件索引。當您將所有文件都放在根目錄下,那么即使你只上傳更新一個文件,服務器也需要將所有文件再檢索一遍,建立新的索引文件。很明顯,文件量越大,等待的時間也將越長。所以,給您的建議是:盡可能減少根目錄的文件存放數。
  ●按欄目內容建立子目錄。
  子目錄的建立,首先按主菜單欄目建立。例如:網頁教程類站點可以根據技術類別分別建立相應的目錄,象Flash,Dhtml,Javascript等;企業站點可以按公司簡介,產品介紹,價格,在線定單,反饋聯系等建立相應目錄。
  其他的次要欄目,類似what's new,友情連接內容較多,需要經常更新的可以建立獨立的子目錄。而一些相關性強,不需要經常更新的欄目,例如:關于本站,關于站長,站點經歷等可以合并放在一個統一目錄下。
  所有程序一般都存放在特定目錄。例如:CGI程序放在cgi-bin目錄。便于維護管理。所有需要下載的內容也最好放在一個目錄下。
  ●在每個主目錄下都建立獨立的images目錄。
  默認的,一個站點根目錄下都有一個images目錄。剛開始學習主頁制作時,阿捷習慣將所有圖片都存放在這個目錄里?墒呛髞戆l現很不方便,當我需要將某個主欄目打包供網友下載,或者將某個欄目刪除時,圖片的管理相當麻煩。經過實踐發現:為每個主欄目建立一個獨立的images目錄是最方便管理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目的圖片。
  ●目錄的層次不要太深。
  目錄的層次建議不要超過3層。原因很簡單,維護管理方便。
  其它需要注意的還有:
  1.不要使用中文目錄;網絡無國界,使用中文目錄可能對網址的正確顯示造成困難。
  2.不要使用過長的目錄;盡管服務器支持長文件名,但是太長的目錄名不便于記憶。
  3.盡量使用意義明確的目錄;上面的例子中,你可以用Flash,Dhtml,Javascript來建立目錄,也可以用1,2,3建立目錄,但是哪一個更明確,更便于記憶和管理呢?顯然是前者!
  隨著網頁技術的不斷發展,利用數據庫或者其他后臺程序自動生成網頁越來越普遍,網站的目錄結構也必將飛躍到一個新的結構層次。
  二.網站的鏈接結構
  網站的鏈接結構是指頁面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上,但可以跨越
目錄。形象的說:每個頁面都是一個固定點,鏈接則是在兩個固定點之間的連線。一個點可以和一
個點連接,也可以和多個點連接。更重要的是,這些點并不是分布在一個平面上,而是存在于一個
立體的空間中。
  ●我們研究網站的鏈接結構的目的在于:用最少的鏈接,使得瀏覽最有效率。
  一般的,建立網站的鏈接結構有兩種基本方式:
  1.樹狀鏈接結構(一對一)。類似DOS的目錄結構,首頁鏈接指向一級頁面,一級頁面鏈
接指向二級頁面。立體結構看起來就象蒲公英。這樣的鏈接結構瀏覽時,一級級進入,一級級退出。
優點是條理清晰,訪問者明確知道自己在什么位置,不會"迷"路。缺點是瀏覽效率低,一個欄目
下的子頁面到另一個欄目下的子頁面,必須繞經首頁。
  2.星狀鏈接結構(一對多)。類似網絡服務器的鏈接,每個頁面相互之間都建立有鏈接。
立體結構象東方明珠電視塔上的鋼球。這種鏈接結構的優點是瀏覽方便,隨時可以到達自己
喜歡的頁面。缺點是鏈接太多,容易使瀏覽者迷路,搞不清自己在什么位置,看了多少內容。
  這兩種基本結構都只是理想方式,在實際的網站設計中,總是將這兩種結構混合起來使用。
我們希望瀏覽者既可以方便快速的達到自己需要的頁面,又可以清晰的知道自己的位置。所以,
最好的辦法是:
  ●首頁和一級頁面之間用星狀鏈接結構,一級和二級頁面之間用樹狀鏈接結構。舉個例子。一個新聞站點的頁面結構如下:
---------------------------------------------------
一級頁面 二級頁面
財經新聞頁 -- [財經新聞1,財經新聞2...]
/ |
首頁 -- 娛樂新聞頁 -- [娛樂新聞1,娛樂新聞2...]
\ |
IT新聞頁 -- [IT新聞1,IT新聞2...]
----------------------------------------------------
  其中,首頁,財經新聞頁,娛樂新聞頁,IT新聞頁之間是星狀鏈接,可以互相點擊,直接
到達。而財經新聞頁和它的子頁面之間是樹狀連接,瀏覽財經新聞1后,你必須回到財經新聞頁,
才能瀏覽IT新聞2。所以,有站點為了免去返回一級頁面的麻煩,將二級頁面直接用新開窗口
(POP up windows)打開,瀏覽結束后關閉即可。
  注意:以上我們都是用的三級頁面舉例。如果您的站點內容龐大,分類明細,需要超過三級
頁面,那么建議你在頁面里顯示導航條,可以幫助瀏覽者明確自己所處的位置。就是您經?吹
許多網站頁面頂部的,類似這樣:
“您現在的位置是:首頁->財經新聞->股市信息->深圳股->深發展”
  關于鏈接結構的設計,在實際的網頁制作中是非常重要一環。采用什么樣的鏈接結構直接
影響到版面的布局。例如你的主菜單放在什么位置,是否每頁都需要放置,是否需要用分幀框
架,是否需要加入返回首頁的鏈接。在連接結構確定后,再開始考慮鏈接的效果和形式,是采
用下拉表單,還是用DHTML動態菜單等等。
  隨著電子商務的推廣,網站競爭的越來越激烈,對鏈接結構設計的要求已經不僅僅局限于
可以方便快速的瀏覽,更加注重個性化和相關性。例如,一個愛嬰主題網站里,在8個月嬰兒
的營養問題頁面上,你需要加入8個月嬰兒的健康問題鏈接,智力培養鏈接,或者是有關奶粉
宣傳的鏈接,一本圖書,一個玩具的鏈接。因為父母不可能到每個欄目下去尋找關于8個月嬰
兒的信息,他們可能在找到需要的問題后就離開網站了。如何盡可能留住訪問者,是網站設
計者未來必須考慮的問題。
 
首頁的設計
作者:阿捷
ajie@soim.com 1.定位你的網站主題和名稱
2.定位你的網站CI形象
3.確定你的欄目和版塊
4.網站的整體風格創意設計
5.網站的層次結構和鏈接結構
6.首頁的設計
7.版面布局的竅門
8.色彩的搭配

  在我們全面考慮好網站的欄目,鏈接結構和整體風格之后,我們就可以正式制作首頁了。有這么一句俗語:"良好的開端是成功的一半"。在網站設計上也是如此,首頁的設計是一個網站成功與否的關鍵。人們往往看到第一頁就已經對你的站點有一個整體的感覺。是不是能夠促使瀏覽者繼續點擊進入,是否能夠吸引瀏覽者留在站點上,全憑首頁設計的"功力"了。所以,首頁的設計和制作是絕對要重視和花心思的。阿捷的經驗是:一般首頁設計和制作占整個制作時間的40%。你寧可多花些時間在早期,以免出現全部做好以后再修改,那將是最浪費精力的事。
  這里,先插一個"封面"的問題。封面是指沒有具體內容,只放一個logo點擊進或者只有簡單的圖形菜單的首頁。否需要為站點設計一個"封面"?阿捷的個人觀點是:沒必要!非你是很藝術類的站點,或者可以確信內容獨特,可以吸引瀏覽者進一步點擊進入的站點,否則的話,封面式的首頁并不會給你的站點帶來什么好處。我上網瀏覽需要的是快速,有價值的信息,如果等待xx分鐘,只顯示出一個粗劣的"ENTER"圖標,那么相信沒有人會再耐心等待進入下一頁。
  首頁,從根本上說就是全站內容的目錄,是一個索引。但只是羅列目錄顯然是夠的,如何設計好一個首頁呢?一般的步驟是:
●確定首頁的功能模塊
●設計首頁的版面
●處理技術上的細節
  
  一).確定首頁的功能模塊
  首頁的內容模塊是指你需要在首頁上實現的主要內容和功能。一般的站點都需要這樣一些模塊:
網站名稱(logo), 廣告條(banner), 主菜單(menu),
新聞(what's new), 搜索(search), 友情鏈接(links),
郵件列表(maillist),計數器(count), 版權(copyright).
  選擇哪些模塊,實現哪些功能,是否需要添加其他模塊都是首頁設計首先需要確定的。
   
  二).設計首頁的版面
  在功能模塊確定后,開始設計首頁的版面。就象搭積木,每個模塊是一個單位積木,如何拼搭出一座漂亮的房子,就看你的創意和想象力了。設計版面的最好方法是:找一張白紙,一支筆,先將你理想中的草圖勾勒出來,然后再用網頁制作軟件實現。
  三).處理技術上的細節   
  阿捷經常收到的來信問題就是:我制作的主頁如何能在不同分辨率下保持不變形,如何能在IE和NC下看起來都不至于太丑陋,如何設置字體和鏈接顏色....等等,阿捷將在下面幾篇文章里為大家詳細介紹。
  首頁設計是整個網站設計的難點和關鍵,阿捷希望能夠通過和大家的交流,總結出套較為合理易學的設計方法,從而舉一反三,使我們能夠更加輕松的完成整個站點的 設計制作。
 版面布局的原理
作者:阿捷
ajie@soim.com 1.定位你的網站主題和名稱
2.定位你的網站CI形象
3.確定你的欄目和版塊
4.網站的整體風格創意設計
5.網站的層次結構和鏈接結構
6.首頁的設計
7.版面布局的竅門
8.色彩的搭配

  同位置。 你可能注意到:"最適合"是一個不確定的形容詞,什么才是最適合的呢?抱歉的是阿捷不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什么,成功者只能建議您用什么方法,什么途徑才能最容易獲得成功,而不可能有一步成功的"秘訣"告訴您。我們在設計思考系列文章第四篇講過站點整體的創意,版面布局也是一個創意的問題, 但要比站點整體的創意容易,有規律的多。
  讓我們先來了解一下版面布局的步驟:
  一.草案 新建頁面就象一張白紙,沒有任何表格,框架和約定俗成的東西,你可以盡可能的發揮, 你的想象力,將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆,當然用作圖 軟件photoshop等也可以)。這屬于創造階段,不講究細膩工整,不必考慮細節功能,只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張,最后選定一個滿意的作為繼續創作的腳本。
  二.粗略布局 在草案的基礎上,將你確定需要放置的功能模塊安排到頁面上。(注:功能模塊我們在 "首頁設計-引子"中提過,主要包含網站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表, 計數器,版權信息等)。注意,這里我們必須遵循突出重點、平衡諧調的原則,將網站標志,主菜單等最重要的模塊放在最顯眼,最突出的位置,然后在考慮次要模塊的排放。
  三.定案 將粗略布局精細化,具體化。(靠你的智慧和經驗,旁敲側擊多方聯想,才能作出具有創意的布局。)
  在布局過程中,我們可以遵循的原則有:
  1、正常平衡---亦稱"勻稱"。多指左右、上下對照形式,主要強調秩序,能達到安定 誠實、信賴的效果等。
  2、異常平衡---即非對照形式,但也要平衡和韻律,當然都是不均整的,此種布局能達到強調性、不安性、高注目性的效果。
  3、對比---所謂對比,不僅利用色彩、色調等技巧來作表現,在內容上也可涉及古與今、新與舊、貧與富等對比。
  4、凝視---所謂凝視是利用頁面中人物視線,使瀏覽者仿照跟隨的心理,以達到注視頁面的效果,一般多用明星凝視狀。
  5、空白---空白有兩種作用,一方面對其他網站表示突出卓越,另一方面也表示網頁品位的優越感,這種表現方法對體顯網頁的格調十分有效。
  6、盡量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感,特別有效。 圖片解說的內容,可以傳達給瀏覽者的更多的心理因素。
  ------------(轉載自廣告大師樊志育《廣告制作》)
  以上的設計原則,雖然枯燥,但是我們如果能領會并活用到頁面布局里,效果就大不 一樣了。比如,
  ○網頁的白色背景太虛,則可以加些色快;
  ○版面零散,可以用線條和符號串聯;
  ○左面文字過多,右面則可以插一張圖片保持平衡;
  ○表格太規矩,可以改用導角試試。 經過不斷的嘗試和推敲,你的網頁一定會亮麗起來的哦:)
  看看我們經常用到的版面布局形式:
  1."T"結構布局。所謂"T"結構。就是指頁面頂部為橫條網站標志+廣告條,下方左面為主菜單, 右面顯示內容的布局,因為菜單條背景教深,整體效果類似英文字母"T",所以我們稱之為"T"形布局。這是網頁設計中用的最廣返的一種布局方式。(圖略) 這種布局的優點是頁面結構清晰,主次分明。是初學者最容易上手的布局方法。缺點是規矩 呆板,如果細節色彩上不注意,很容易讓人"看之無味"。
  2."口"型布局。這是一個象形的說法,就是頁面一般上下各有一個廣告條,左面是主菜單, 右面放友情連接等,中間是主要內容。(圖略) 這種布局的優點是充分利用版面,信息量大(我的主頁首頁即屬于這種布局)。缺點是頁面擁擠, 不夠靈活。也有將四邊空出,只用中間的窗口型設計,例如網易壁紙站。
  3."三"型布局。這種布局多用于國外站點,國內用的不多。特點是頁面上橫向兩條色塊,將 頁面整體分割為四部分,色塊中大多放廣告條。
  4.對稱對比布局。顧名思義,采取左右或者上下對稱的布局,一半深色,一半淺色,一般用于設計型站點。優點是視覺沖擊力強,缺點是將兩部分有機的結合比較困難。
  5.POP布局。POP引自廣告術語,就是指頁面布局象一張宣傳海報,以一張精美圖片作為頁面的設計中心。常用于時尚類站點,比如ELLE.com。優點顯而易見:漂亮吸引人。缺點就是速度慢。 作為版面布局還是值得借鑒的。
  以上總結了目前網絡上常見的布局,其實還有許許多多別具一格的布局,關鍵在于你的創意和 設計了。
對于版面布局的技巧,這里提供四個建議,您可以自己推敲:
  1.加強視覺效果
  2.加強文案的可視度和可讀性
  3.統一感的視覺
  4.新鮮和個性是布局的最高境界
 網頁色彩的搭配
作者:阿捷
ajie@soim.com 1.定位你的網站主題和名稱
2.定位你的網站CI形象
3.確定你的欄目和版塊
4.網站的整體風格創意設計
5.網站的層次結構和鏈接結構
6.首頁的設計
7.版面布局的竅門
8.色彩的搭配

  網頁的色彩是樹立網站形象的關鍵之一,色彩搭配卻是網友們感到頭疼的問題。 網頁的背景,文字,圖標,邊框,超鏈接...,應該采用什么樣的色彩,應該搭配什么色彩才能最好的表達出預想的內涵呢?
  首先我們先來了解一些色彩的基本知識:
  1.顏色是因為光的折射而產生的。
  2.紅,黃,藍是三原色,其它的色彩都可以用這三種色彩調和而成。 網頁html語言中的色彩表達即是用這三種顏色的數值表示 例如:紅色是color(255,0,0)十六進制的表示方法為(FF0000) 白色為(FFFFFF), 我們經?吹降"bgColor=#FFFFFF"就是指背景色為白色。
  3.顏色分非彩色和彩色兩類。 非彩色是指黑,白,灰系統色。 彩色是指除了非彩色以外的所有色彩。
  4.任何色彩都有飽和度和透明度的屬性,屬性的變化產生不同的色相,所以至少可以制作 幾百萬種色彩。 網頁制作用彩色還是非彩色好呢?根據專業的研究機構研究表明:彩色的記憶效果是黑白的3.5倍。也就是說,在一般情況下,彩色頁面較完全黑白頁面更加吸引人。 我們通常的做法是:主要內容文字用非彩色(黑色),邊框,背景,圖片用彩色。這樣 頁面整體不單調,看主要內容也不會眼花。
  ●非彩色的搭配 黑白是最基本和最簡單的搭配,白字黑底,黑底白字都非常清晰明了。 灰色是萬能色,可以和任何彩色搭配,也可以幫助兩種對立的色彩和諧過渡。如果你 實在找不出合適的色彩,那么用灰色試試,效果絕對不會太差。
  ●彩色的搭配 色彩千變萬化,彩色的搭配是我們研究的重點。
  我們依然需要進一步學習一些色彩的知識。
  一.色環。我們將色彩按"紅->黃->綠->藍->紅"依次過度漸變,就可以得到一個色彩環。 色環的兩端是暖色和寒色,當中是中型色。
  二.色彩的心理感覺。不同的顏色會給瀏覽者不同的心理感受。
  紅色---是一種激奮的色彩。刺激效果,能使人產生沖動,憤怒,熱情,活力的感覺。
  綠色---介于冷暖兩中色彩的中間,顯得和睦,寧靜,健康,安全的感覺。 它和金黃,淡白搭配,可以產生優雅,舒適的氣氛。
  橙色---也是一種激奮的色彩,具有輕快,歡欣,熱烈,溫馨,時尚的效果。
  黃色---具有快樂,希望,智慧和輕快的個性,它的明度最高。
  藍色---是最具涼爽,清新,專業的色彩。 它和白色混合,能體現柔順,淡雅,浪漫的氣氛(象天空的色彩:)
  白色---具有潔白,明快,純真,清潔的感受。 黑色---具有深沉,神秘,寂靜,悲哀,壓抑的感受。
   灰色---具有中庸,平凡,溫和,謙讓,中立和高雅的感覺。 每種色彩在飽和度,透明度上略微變化就會產生不同的感覺。以綠色為例, 黃綠色有青春,旺盛的視覺意境,而藍綠色則顯得幽寧,陰深。
  ○網頁色彩搭配的原理
  1.色彩的鮮明性。網頁的色彩要鮮艷,容易引人注目。
  2.色彩的獨特性。要有與眾不同的色彩,使得大家對你的印象強烈。(參考設計思考第二篇 網站CI的標準色彩一節)
  3.色彩的合適性。就是說色彩和你表達的內容氣氛相適合。如用粉色體現女性站點的柔性。
  4.色彩的聯想性。不同色彩會產生不同的聯想,藍色想到天空,黑色想到黑夜,紅色想到喜事等,選擇色彩要和你網頁的內涵相關聯。
  ○網頁色彩掌握的過程隨著網頁制作經驗的積累,我們用色有這樣的一個趨勢:單色->五彩繽紛->標準色->單色。 一開始因為技術和知識缺乏,只能制作出簡單的網頁,色彩單一;在有一定基礎和材料后, 希望制作一個漂亮的網頁,將自己收集的最好的圖片,最滿意色彩堆砌在頁面上;但是時間一長,卻發現色彩雜亂,沒有個性和風格;第三次重新定位自己的網站,選擇好切合自己 的色彩,推出的站點往往比較成功;當最后設計理念和技術達到頂峰時,則又返樸歸真,用單一色彩甚至非彩色就可以設計出簡潔精美的站點。
  ○網頁色彩搭配的技巧, 文章寫到這里,有心急的網友要問了:"到底用什么色彩搭配好看呢?你能不能推薦幾種配色方案?"別急,這里有一點技巧,可以幫助你迅速成為調色大師:)
   1.用一種色彩。這里是指先選定一種色彩,然后調整透明度或者飽和度,(說得通俗些就是將色彩變淡或則加深),產生新的色彩,用于網頁。這樣的頁面看起來色彩統一,有層次感。
  2.用兩種色彩。先選定一種色彩,然后選擇它的對比色(在photoshop里按ctrl+shift+I)。我的主頁用藍色和黃色就是這樣確定的。整個頁面色彩豐富但不花稍。
  3.用一個色系。簡單的說就是用一個感覺的色彩,例如淡藍,淡黃,淡綠;或者土黃,土灰, 土藍。確定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中 選擇"自定義",然后在"色庫"中選就可以了:)
  4.用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺很"跳"。
  在網頁配色中,忌諱的是:
  1.不要將所有顏色都用到,盡量控制在三種色彩以內。
  2.背景和前文的對比盡量要大,(絕對不要用花紋繁復的圖案作背景),以便突出主要文字內容。
在線微信
15858213871
在线看片免费人成视频_无线资源-国产好片-第2页_韩国和日本免费不卡在线免费观看