WE DO 嘉怡實業有限公司
網頁製作 網站架設 網站維護 網站代管
網路開店 程式設計 網站推廣 網址註冊

知識庫相關文章彙整

網站首頁的設計
有這麼一句俗語:『好的開始是成功的一半』。
在網站設計上也是如此,首頁的設計是一個網站成功與否的關鍵。人們往往看到第一頁就已經對您的網站有一個整體的感覺。是不是能夠促使瀏覽者繼續點擊進入,是否能夠吸引瀏覽者留在網站上,全憑首頁設計的「功力」了。

所以,首頁的設計和製作是絕對要重視和花心思的。一般首頁設計和製作占整個製作時間的40%,您寧可多花些時間在早期,以免出現全部做好以後再修改,那將是最浪費精力的事。

這裡,先插一個「封面」的問題。封面是指沒有具體內容,只放一個logo點擊進入或者只有簡單的圖形功能表的首頁。
是否需要為網站設計一個「封面」?作者的個人觀點是:沒必要!
除非您是很藝術類的網站,或者可以確信內容獨特,可以吸引瀏覽者進一步點擊進入的網站,否則的話,封面式的首頁並不會給您的網站帶來什麼好處。我們上網瀏覽需要的是快速,有價值的資訊,如果等待xx分鐘,只顯示出一個粗劣的“ENTER”圖示,那麼相信沒有人會再耐心等待進入下一頁。

首頁,從根本上說就是全站內容的目錄,是一個索引。但只是羅列目錄顯然是不夠的,如何設計好一個首頁呢?
一般的步驟是:
○ 確定首頁的功能模組
○ 設計首頁的版面
○ 處理技術上的細節

一、確定首頁的功能模組
首頁的內容模組是指您需要在首頁上實現的主要內容和功能。一般的網站都需要這樣一些模組:
網站名稱(logo)、廣告看板(banner) 、主選單(menu) 、新聞(what's new) 、搜索(search) 、友情連結(links) 、郵寄清單(maillist) 、計數器(count) 、版權(copyright)等...
選擇哪些模組,實現哪些功能,是否需要增加其他模組都是首頁設計首先需要確定的。

二、設計首頁的版面
在功能模組確定後,開始設計首頁的版面。就象搭積木,每個模組是一個單位積木,如何拼搭出一座漂亮的房子,就看您的創意和想像力了。
設計版面的最好方法是:找一張白紙,一支筆,先將您理想中的草圖勾勒出來,然後再用網頁製作軟體實現。

三、處理技術上的細節
我製作的主頁如何能在不同解析度下保持不變形,如何能在IE和NC下看起來都不至於太醜陋,如何設置字體和連結顏色....等等。
首頁設計是整個網站設計的難點和關鍵,希望能夠通過和大家的交瀏,總結出一套較為合理易學的設計方法,從而舉一反三,使我們能夠更加輕鬆的完成整個網站的設計製作。

設計首頁的第一步是設計版面佈局

就象傳統的報刊雜誌編輯一樣,我們將網頁看作一張報紙,一本雜誌來進行排版佈局。雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇,但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的,您可以領會要點,舉一反三。

版面指的是瀏覽器看到的完整的一個頁面(可以包含框架和層)。因為每個人的顯示器解析度不同,所以同一個頁面的大小可能出現640*480圖元,800*600圖元,1024*768圖元等不同尺寸。

佈局,就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。您可能注意到:『最適合』是一個不確定的形容詞,什麼才是最適合的呢?抱歉的是作者不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什麼,成功者只能建議您用什麼方法,什麼途徑才能最容易獲得成功,而不可能有一步成功的『秘訣』告訴您。

版面佈局也是一個創意的問題,但要比網站整體的創意容易,有規律的多。讓我們先來瞭解一下版面佈局的步驟:

一、草案
新建頁面就象一張白紙,沒有任何表格,框架和約定俗成的東西,您可以盡可能的發揮您的想像力,將您想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆,當然用作圖軟體photoshop等也可以)。這屬於創造階段,不講究細膩工整,不必考慮細節功能,只以粗陋的線條勾畫出創意的輪廓即可。盡您的可能多畫幾張,最後選定一個滿意的作為繼續創作的腳本。

二、粗略佈局
在草案的基礎上,將您確定需要放置的功能模組安排到頁面上。(註:功能模組我們在首頁設計-引子中提過,主要包含網站標誌、主功能表、新聞、搜索、友情連結、廣告看板、郵寄清單、計數器、版權資訊等)。注意,這裡我們必須遵循突出重點、平衡諧調的原則,將網站標誌,主功能表等最重要的模組放在最顯眼,最突出的位置,然後在考慮次要模組的排放。

三、定案
將粗略佈局精細化,具體化。(靠您的智慧和經驗,旁敲側擊多方聯想,才能作出具有創意的佈局。)
在佈局過程中,我們可以遵循的原則有:

  1. 正常平衡---亦稱"勻稱"。多指左右、上下對照形式,主要強調秩序,能達到安定誠實、信賴的效果。
  2. 異常平衡---即非對照形式,但也要平衡和韻律,當然都是不均整的,此種佈局能達到強調性、不安性、高注目性的效果。
  3. 對比---所謂對比,不僅利用色彩、色調等技巧來作表現,在內容上也可涉及古與今、新與舊、貧與富等對比。
  4. 凝視---所謂凝視是利用頁面中人物視線,使瀏覽者仿照跟隨的心理,以達到注視頁面的效果,一般多用明星凝視狀。
  5. 空白---空白有兩種作用,一方面對其他網站表示突出卓越,另一方面也表示網頁品位的優越感,這種表現方法對體顯網頁的格調十分有效。
  6. 儘量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感,特別有效。圖片解說的內容,可以傳達給瀏覽者的更多的心理因素。

以上的設計原則,雖然枯燥,但是我們如果能領會並活用到頁面配置裡,效果就大不一樣了。

(此篇文章為網路轉載,如有冒犯,請來信告知,當即刻移除!)