定位網站形象,確定網站欄目和版塊
定位您的網站形象
一個傑出的網站,和實體公司一樣,也需要整體的形象包裝和設計。準確的,有創意的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個月嬰兒的資訊,他們可能在找到需要的問題後就離開網站了。如何盡可能留住訪問者,是網站設計者未來必須考慮的問題。
關於此部分的內容,需要平時不斷地積累。特別是瀏覽其他網站時也要細心觀察,仔細推敲別人這麼做的道理,作為一個瀏覽者您對這樣做的看法等等...。
(此篇文章為網路轉載,如有冒犯,請來信告知,當即刻移除!)
-
上層分類: 知識庫文章