網站首頁 > 相關文章彙整 > 網站首頁的設計
網站首頁的設計
有這麼一句俗語：『好的開始是成功的一半』。
在網站設計上也是如此，首頁的設計是一個網站成功與否的關鍵。人們往往看到第一頁就已經對您的網站有一個整體的感覺。是不是能夠促使瀏覽者繼續點擊進入，是否能夠吸引瀏覽者留在網站上，全憑首頁設計的「功力」了。
所以，首頁的設計和製作是絕對要重視和花心思的。一般首頁設計和製作占整個製作時間的40%，您寧可多花些時間在早期，以免出現全部做好以後再修改，那將是最浪費精力的事。
這裡，先插一個「封面」的問題。封面是指沒有具體內容，只放一個logo點擊進入或者只有簡單的圖形功能表的首頁。
是否需要為網站設計一個「封面」？作者的個人觀點是：沒必要！
除非您是很藝術類的網站，或者可以確信內容獨特，可以吸引瀏覽者進一步點擊進入的網站，否則的話，封面式的首頁並不會給您的網站帶來什麼好處。我們上網瀏覽需要的是快速，有價值的資訊，如果等待xx分鐘，只顯示出一個粗劣的“ENTER”圖示，那麼相信沒有人會再耐心等待進入下一頁。
首頁，從根本上說就是全站內容的目錄，是一個索引。但只是羅列目錄顯然是不夠的，如何設計好一個首頁呢？
一般的步驟是：
○ 確定首頁的功能模組
○ 設計首頁的版面
○ 處理技術上的細節
一、確定首頁的功能模組
首頁的內容模組是指您需要在首頁上實現的主要內容和功能。一般的網站都需要這樣一些模組：
網站名稱(logo)、廣告看板(banner) 、主選單(menu) 、新聞(what's new) 、搜索(search) 、友情連結(links) 、郵寄清單(maillist) 、計數器(count) 、版權(copyright)等...
選擇哪些模組，實現哪些功能，是否需要增加其他模組都是首頁設計首先需要確定的。
二、設計首頁的版面
在功能模組確定後，開始設計首頁的版面。就象搭積木，每個模組是一個單位積木，如何拼搭出一座漂亮的房子，就看您的創意和想像力了。
設計版面的最好方法是：找一張白紙，一支筆，先將您理想中的草圖勾勒出來，然後再用網頁製作軟體實現。
三、處理技術上的細節
我製作的主頁如何能在不同解析度下保持不變形，如何能在IE和NC下看起來都不至於太醜陋，如何設置字體和連結顏色....等等。
首頁設計是整個網站設計的難點和關鍵，希望能夠通過和大家的交瀏，總結出一套較為合理易學的設計方法，從而舉一反三，使我們能夠更加輕鬆的完成整個網站的設計製作。
設計首頁的第一步是設計版面佈局
就象傳統的報刊雜誌編輯一樣，我們將網頁看作一張報紙，一本雜誌來進行排版佈局。雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，您可以領會要點，舉一反三。
版面指的是瀏覽器看到的完整的一個頁面（可以包含框架和層）。因為每個人的顯示器解析度不同，所以同一個頁面的大小可能出現640*480圖元,800*600圖元,1024*768圖元等不同尺寸。
佈局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。您可能注意到：『最適合』是一個不確定的形容詞，什麼才是最適合的呢？抱歉的是作者不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什麼，成功者只能建議您用什麼方法，什麼途徑才能最容易獲得成功，而不可能有一步成功的『秘訣』告訴您。
版面佈局也是一個創意的問題，但要比網站整體的創意容易，有規律的多。讓我們先來瞭解一下版面佈局的步驟：
一、草案
新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，您可以盡可能的發揮您的想像力，將您想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆，當然用作圖軟體photoshop等也可以)。這屬於創造階段，不講究細膩工整，不必考慮細節功能，只以粗陋的線條勾畫出創意的輪廓即可。盡您的可能多畫幾張，最後選定一個滿意的作為繼續創作的腳本。
二、粗略佈局
在草案的基礎上，將您確定需要放置的功能模組安排到頁面上。(註：功能模組我們在首頁設計-引子中提過，主要包含網站標誌、主功能表、新聞、搜索、友情連結、廣告看板、郵寄清單、計數器、版權資訊等)。注意，這裡我們必須遵循突出重點、平衡諧調的原則，將網站標誌，主功能表等最重要的模組放在最顯眼，最突出的位置，然後在考慮次要模組的排放。
三、定案
將粗略佈局精細化，具體化。（靠您的智慧和經驗，旁敲側擊多方聯想，才能作出具有創意的佈局。）
在佈局過程中，我們可以遵循的原則有：
- 正常平衡---亦稱"勻稱"。多指左右、上下對照形式，主要強調秩序，能達到安定誠實、信賴的效果。
- 異常平衡---即非對照形式，但也要平衡和韻律，當然都是不均整的，此種佈局能達到強調性、不安性、高注目性的效果。
- 對比---所謂對比，不僅利用色彩、色調等技巧來作表現，在內容上也可涉及古與今、新與舊、貧與富等對比。
- 凝視---所謂凝視是利用頁面中人物視線，使瀏覽者仿照跟隨的心理，以達到注視頁面的效果，一般多用明星凝視狀。
- 空白---空白有兩種作用，一方面對其他網站表示突出卓越，另一方面也表示網頁品位的優越感，這種表現方法對體顯網頁的格調十分有效。
- 儘量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感，特別有效。圖片解說的內容，可以傳達給瀏覽者的更多的心理因素。
以上的設計原則，雖然枯燥，但是我們如果能領會並活用到頁面配置裡，效果就大不一樣了。
（此篇文章為網路轉載，如有冒犯，請來信告知，當即刻移除！）
