網站首頁 > 相關文章彙整 > 定位網站形象，確定網站欄目和版塊
定位網站形象，確定網站欄目和版塊
定位您的網站形象
一個傑出的網站，和實體公司一樣，也需要整體的形象包裝和設計。準確的，有創意的CIS形象設計，對網站的宣傳推廣有事半功倍的效果。
第一，設計網站的標誌(logo)
首先您需要設計製作一個網站的標誌(logo)。就如同商標一樣，logo是您網站特色和內涵的集中體現，看見logo就讓大家聯想起您的網站。注意：這裡的logo不是指88X31的小圖示banner，而是網站的標誌。
標誌可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。比如：soim是用soim的英文作為標誌，新浪用字母sina+眼睛作為標誌。標誌的設計創意來自您網站的名稱和內容。
- 網站有代表性的人物，動物，花草，可以用它們作為設計的藍本，加以卡通化和藝術化，例如迪士尼的米老鼠，搜狐的卡通狐狸，鯊威體壇的籃球鯊魚。
- 網站有專業性的，可以以本專業有代表的物品作為標誌。比如中國銀行的銅板標誌，賓士汽車的方向盤標誌。
- 最常用和最簡單的方式是用自己網站的英文名稱作標誌。採用不同的字體， 字母的變形，字母的組合可以很容易製作好自己的標誌。
第二，設計網站的標準色彩
網站給人的第一印象來自視覺衝擊，確定網站的標準色彩是相當重要的一步。不同的色彩搭配產生不同的效果，並可能影響到訪問者的情緒。
『標準色彩』是指能體現網站型象和延伸內涵的色彩。舉個實際的例子就明白了：IBM的深藍色，肯得基的紅色條型，微軟視窗標誌上的紅藍黃綠色塊，都使我們覺得很貼切很和諧。如果將IBM改用綠色或金黃色，我們會有什麼感覺？
一般來說，一個網站的標準色彩不超過3種，太多則讓人眼花繚亂。標準色彩要用於網站的標誌，標題，主功能表和主色塊。給人以整體統一的感覺。至於其它色彩也可以使用，只是作為點綴和襯托，絕不能喧賓奪主。
一般來說，適合於網頁標準色的顏色有：藍色、黃/橙色、黑/灰/白色三大系列色。
第三，設計網站的標準字體
和標準色彩一樣，標準字體是指用於標誌，標題，主功能表的特有字體。一般我們中文網頁預設的字體是細明體（採用英文字體，只會讓英文字體發生改變，中文字體預設顯示的是和windows裡設置的一樣，如果更改windows預設為其他中文字體，那網頁中文字體就會發生改變）。為了體現網站的「與眾不同」和特有風格，我們可以根據需要選擇一些特別字體。例如，為了展現專業可以使用微軟正黑體，展現設計精美可以用廣告體，展現親切隨意可以用手寫體等等。當然這些都是作者的個人看法，您可以根據自己網站所表達的內涵，選擇更貼切的字體。目前常見的中文字體有二三十種，常見的英文字體有近百種，網路上還有許多專用英文藝術字體下載，要尋找一款滿意的字體並不算困難。需要說明的是：使用非預設字體只能用圖片的形式，因為很可能瀏覽者的PC裡沒有安裝您的特別字體，那麼您的辛苦設計製作便付之東瀏啦！
第四，設計網站的宣傳標語
也可以說是網站的精神，網站的目標。用一句話甚至一個詞來高度概括。類似實際生活中的廣告金句。例如：雀巢的“味道好極了”；麥斯威爾的“好東西和好朋友一起分享”；Intel的“給您一個奔騰的心”。
以上四方面：標誌、色彩、字體、標語，是一個網站樹立CIS形象的關鍵，確切的說是網站的表面文章，設計並完成這幾步，您的網站將脫胎換骨，整體形象有一個提高。形象地說：您從一個土氣的農民轉變為一位西裝革履的白領人士。(注意：我們只是以平面靜態來設計CIS，還沒有引入聲音，3D立體等因素。)
確定網站的欄目和版塊
我們在上篇文章裡學習了定位網站主題和確立網站的CIS形象。下面是否該進入實質性的設計製作階段呢？答案是：不能。初學者最容易犯的錯誤就是：確定題材後立刻開始製作。當您一頁一頁製作完畢後才發現：網站結構不清晰，目錄龐雜，內容東一塊西一塊。結果不但瀏覽者看得糊塗，自己擴充和維護網站也相當困難，您的網站或許就此半途而廢，更糟糕的是：您因此失去了製作主頁的信心和興趣！（其實更糟糕的不是自己的信心，而是用戶對您的信心。別人把您的站定義為爛站，想挽回都難了）
所以我們在動手製作網頁前，一定要考慮好以下三方面：（這點非常重要，往往好站和爛站的主要差距都在這裡，千萬別認為把外觀設計好了就叫好站了，沒內涵沒實質意義內部結構混亂的站都是垃圾）
1. 確定欄目和版塊；
2. 確定網站的目錄結構和連結結構
3. 確定網站的整體風格創意設計
首先來討論「確定欄目和版塊」。網站的題材確定後，相信您已經收集和組織了許多相關的資料內容。您一定認為這些都是最好的，肯定能吸引網友們來瀏覽網站。但是您有沒有將最好的，最吸引人的內容放在最突出的位置呢？有沒有讓好東西在版面分佈上占絕對優勢呢？
我看見許多個人主頁的欄目(主選單)並不是這樣的。舉個例子：有一個以提供動畫素材為主題的網站，它的主欄目是：關於站長，本站導航，動畫寶庫，本站論壇，本站留言本，聯繫站長。首頁上寫著本站網址和版權申明(居然還有將本站設為首頁字樣)。最主要的，最吸引人的動畫素材在主欄目裡占1/6，在首頁上一字沒提。我想即使這個網站的確有大量的，精美的動畫素材，也很難吸引瀏覽者繼續挖掘。
欄目的實質是一個網站的大綱索引，索引應該將網站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。一般的網站欄目安排要注意以下幾方面：
第一，一定記住要緊扣您的主題！
一般的做法是：將您的主題按一定的方法分類並將它們作為網站的主欄目。例如上面的例子，可以將欄目分為動物動畫、標誌動畫、3D動畫、卡通動畫等，在首頁上標明最近更新的動畫。記住：主題欄目個數在總欄目中要占絕對優勢，這樣的網站顯的專業，主題突出，容易給人留下深刻印象。（做網站的時候一定要牢牢記住，您是要向瀏覽的人展示些什麼。盡您最大的可能讓瀏覽者很容易地就能找到他們想要去的地方，這就是您設計功能表的最終目的。）
第二，設一個最近更新或網站指南欄目
如果您的首頁沒有安排版面放置最近更新內容資訊，就有必要設立一個「最近更新」的欄目。這樣做是為了照顧常來的訪客，讓您的主頁更有人性化。如果您的主頁內容龐大(超過15MB)，層次較多，而又沒有站內的搜尋引擎，建議您設置「本站指南」欄目。可以幫助初訪者快速找到他們想要的內容。
第三，設定一個可以雙向交瀏的欄目
不需要很多，但一定要有。比如論壇，留言本，郵寄清單等，可以讓瀏覽者留下他們的資訊。有調查表明，提供雙向交瀏的網站比簡單的留一個「Email」的網站更具有親和力。
第四，設一個下載或常見問題回答欄目
網路的特點是資訊共用。如果您看到一個網站有大量的優秀的有價值的資料，您肯定希望能一次性下載，而不是一頁一頁瀏覽存檔。將心比心在您自己的主頁上設置一個資料下載欄目，會得到大家的喜歡。有些網站為了廣告顯示量，一篇文章還要分幾頁顯示，我覺得遲早會因訪問量下降而淘汰(個人意見:)。另外，如果您的網站經常收到網友關於某方面的問題來信，您最好設立一個常見問題回答的欄目，既方便了網友，也可以節約自己更多時間用以學習。
至於其他的輔助內容，如關於本站，版權資訊等可以不放在主欄目裡，以免沖淡主題。總結以上幾點，我們得出劃分欄目需要注意的是：
• 盡可能刪除與主題無關的欄目
• 盡可能將網站最有價值的內容列在欄目上
• 盡可能方便訪問者的瀏覽和查詢
上面說的是欄目，我們再看看版塊設置。版塊比欄目的概念要大一些，每個版塊都有自己的欄目。舉個例子：網易的網站分新聞、體育、財經、娛樂、教育等版塊，每個版塊下面有各有自己的主欄目。一般的個人網站內容少，只有主欄目(主選單)就夠了，不需要設置版塊。如果您覺得的確有必要設置版塊的，應該注意
1. 各版塊要有相對獨立性。
2. 各版塊要有相互關聯。
3. 版塊的內容要圍繞網站主題。
關於版塊方面，主要是門戶網站等較大ICP需要考慮的問題，作者在此不再作展開討論。
確定網站的目錄結構和連結結構
第一，網站的目錄結構
網站的目錄是指您建立網站時創建的目錄。例如：在用frontpage建立網站時都預設建立了根目錄和images子目錄。目錄的結構是一個容易忽略的問題，大多數站長都是未經規劃，隨意創建子目錄。目錄結構的好壞，對瀏覽者來說並沒有什麼太大的感覺，但是對於網站本身的上傳維護，內容未來的擴充和移植有著重要的影響。下面是建立目錄結構的一些建議：
• 不要將所有檔都存放在根目錄下
有網友為了方便，將所有檔都放在根目錄下。這樣做造成的不利影響在於：
1. 文件管理混亂。您常常搞不清哪些檔需要編輯和更新，哪些無用的檔可以刪除，哪些是相關聯的檔，影響工作效率。
2. 上傳速度慢。伺服器一般都會為根目錄建立一個檔索引。當您將所有檔都放在根目錄下，那麼即使您只上傳更新一個檔，伺服器也需要將所有檔再檢索一遍，建立新的索引檔。很明顯，檔量越大，等待的時間也將越長。所以，給您的建議是：盡可能減少根目錄的檔存放數。（現在的FTP軟體已經非常不錯了，這第二點幾乎可以不用考慮，不過盡可能別把檔都放在根目錄是個好習慣）
• 按欄目內容建立子目錄
子目錄的建立，首先按主功能表列目建立。例如:網頁教程類網站可以根據技術類別分別建立相應的目錄，象Flash, Dhtml, Javascript 等；企業網站可以按公司簡介、產品介紹、價格、線上定單、回饋聯繫等建立相應目錄。其他的次要欄目，類似what's new，友情連接內容較多，需要經常更新的可以建立獨立的子目錄。而一些相關性強，不需要經常更新的欄目，例如：關於本站、關於站長、網站經歷等可以合併放在一個統一目錄下。所有程式一般都存放在特定目錄。例如：CGI程式放在cgi-bin目錄。便於維護管理。所有需要下載的內容也最好放在一個目錄下。
• 在每個主目錄下都建立獨立的images目錄
預設的，一個網站根目錄下都有一個images目錄。剛開始學習主頁製作時，作者習慣將所有圖片都存放在這個目錄裡。可是後來發現很不方便，當我需要將某個主欄目打包供網友下載，或者將某個欄目刪除時，圖片的管理相當麻煩。經過實踐發現：為每個主欄目建立一個獨立的images目錄是最方便管理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目的圖片，最好養成清晰的便於記憶的圖片檔的命名習慣才是關鍵。
• 目錄的層次不要太深
目錄的層次建議不要超過3層。原因很簡單，維護管理方便。其它需要注意的還有：
1. 不要使用中文目錄；網路無國界，使用中文目錄可能對網址的正確顯示造成困難。
2. 不要使用過長的目錄；儘管伺服器支持長檔名，但是太長的目錄名不便於記憶。
3. 儘量使用意義明確的目錄；上面的例子中，您可以用Flash,Dhtml,Javascript來建立目錄，也可以用1，2，3建立目錄，但是哪一個更明確，更便於記憶和管理呢？顯然是前者！
隨著網頁技術的不斷發展，利用資料庫或者其他幕後程式自動生成網頁越來越普遍，網站的目錄結構也必將飛躍到一個新的結構層次。
第二，網站的連結結構
網站的連結結構是指頁面之間相互連結的拓撲結構。它建立在目錄結構基礎之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，連結則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點並不是分佈在一個平面上，而是存在於一個立體的空間中。（這點說的抽象了點。其實說的就是網站的連接結構，一般給企業做網站做策劃的時候，都要給網站結構圖的，其實就是這個意思。）
• 我們研究網站的連結結構的目的在於：用最少的連結，使得瀏覽最有效率。
一般的，建立網站的連結結構有兩種基本方式：
- 樹狀連結結構（一對一）。類似DOS的目錄結構，首頁連結指向一級頁面，一級頁面連結指向二級頁面。立體結構看起來就象蒲公英。這樣的連結結構瀏覽時，一級級進入，一級級退出。優點是條理清晰，訪問者明確知道自己在什麼位置，不會『迷』路。缺點是瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須繞經首頁。（此類，就是基本上都以一視窗方式瀏覽，很少有快顯視窗的站。您在網站的哪個位置都非常清楚明瞭）
- 星狀連結結構（一對多）。類似網路服務器的連結，每個頁面相互之間都建立有連結。這種連結結構的優點是瀏覽方便，隨時可以到達自己喜歡的頁面。缺點是連結太多，容易使瀏覽者迷路，搞不清自己在什麼位置，看了多少內容。（基本上都是快顯視窗的站，您可以同時看幾篇文章。但想知道自己瀏覽的東西在站內的位置卻不容易。）
這兩種基本結構都只是理想方式，在實際的網站設計中，總是將這兩種結構混合起來使用。我們希望瀏覽者既可以方便快速的達到自己需要的頁面，又可以清晰的知道自己的位置。所以，最好的辦法是：
• 首頁和一級頁面之間用星狀連結結構，一級和二級頁面之間用樹狀連結結構。
舉個例子。一個新聞網站的頁面結構如下：
---------------------------------------------------
一級頁面 二級頁面
/ |
首頁 -- 娛樂新聞頁 -- [娛樂新聞1，娛樂新聞2...]
|
IT新聞頁 -- [IT新聞1，IT新聞2...]
---------------------------------------------------
其中，首頁，財經新聞頁，娛樂新聞頁，IT新聞頁之間是星狀連結，可以互相點擊，直接到達。而財經新聞頁和它的子頁面之間是樹狀連接，瀏覽財經新聞1後，您必須回到財經新聞頁，才能瀏覽IT新聞2。所以,有網站為了免去返回一級頁面的麻煩，將二級頁面直接用新開視窗(POP up windows)打開，瀏覽結束後關閉即可。
注意：以上我們都是用的三級頁面舉例。如果您的網站內容龐大，分類明細，需要超過三級頁面，那麼建議您在頁面裡顯示導航條，可以説明瀏覽者明確自己所處的位置。就是您經常看到許多網站頁面頂部的，類似這樣：
「您現您的位置是：首頁->財經新聞->股市資訊->電子股->電腦產業」
關於連結結構的設計，在實際的網頁製作中是非常重要一環。採用什麼樣的連結結構直接影響到版面的佈局。例如您的主功能表放在什麼位置，是否每頁都需要放置，是否需要用分幀框架，是否需要加入返回首頁的連結。在連接結構確定後，再開始考慮連結的效果和形式，是採用下拉表單，還是用DHTML動態功能表等等。
隨著電子商務的推廣，網站競爭的越來越激烈，對連結結構設計的要求已經不僅僅局限於可以方便快速的瀏覽，更加注重個性化和相關性。例如，一個愛嬰主題網站裡，在8個月嬰兒的營養問題頁面上，您需要加入8個月嬰兒的健康問題連結，智力培養連結，或者是有關奶粉宣傳的連結，一本圖書，一個玩具的連結。因為父母不可能到每個欄目下去尋找關於8個月嬰兒的資訊，他們可能在找到需要的問題後就離開網站了。如何盡可能留住訪問者，是網站設計者未來必須考慮的問題。
關於此部分的內容，需要平時不斷地積累。特別是瀏覽其他網站時也要細心觀察，仔細推敲別人這麼做的道理，作為一個瀏覽者您對這樣做的看法等等...。
（此篇文章為網路轉載，如有冒犯，請來信告知，當即刻移除！）
