從名稱到頁面-網站設計全攻略(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.以上各項延伸組合
　　 -------------(轉載自樊志育《廣告制作》)

　　需要一提的是：創意的目的是更好的宣傳推廣網站。如果創意很好，卻對網站發展毫無意義，好比給奶牛穿高跟鞋，那么，我們寧可放棄這個創意！

　　關于風格和創意，可以講得還有許多。感興趣的網友可以自己找一些廣告設計方面的書閱讀。希望本文能幫助您對網站的設計有一個更新的認識和提高。謝謝！

首頁的設計

　　在我們全面考慮好網站的欄目，鏈接結構和整體風格之后，我們就可以正式動手制作首頁了。

　　有這么一句俗語："良好的開端是成功的一半"。

　　在網站設計上也是如此，首頁的設計是一個網站成功與否的關鍵。人們往往看到第一頁就已經對你的站點有一個整體的感覺。是不是能夠促使瀏覽者繼續點擊進入，是否能夠吸引瀏覽者留在站點上，全憑首頁設計的"功力"了。

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

　　這里，先插一個“封面”的問題。封面是指沒有具體內容，只放一個logo點擊進入或者只有簡單的圖形菜單的首頁。

　　是否需要為站點設計一個“封面”？阿捷的個人觀點是：沒必要！

　　除非你是很藝術類的站點，或者可以確信內容獨特，可以吸引瀏覽者進一步點擊進入的站點，否則的話，封面式的首頁并不會給你的站點帶來什么好處。我們上網瀏覽需要的是快速，有價值的信息，如果等待xx分鐘，只顯示出一個粗劣的“ENTER”圖標，那么相信沒有人會再耐心等待進入下一頁。

　　因為首頁的重要性，阿捷將著重用８篇文章來仔細討論有關首頁設計的方方面面，大致提綱如下：

　　○版面布局的竅門
　　 ○色彩的搭配
　　 ○字體的設置和表格的嵌套
　　 ○細微之處見功力
　　 ○考慮不同的瀏覽器和分辨率
　　 ○設計好你的banner和位置
　　 ○meta標簽的重要性
　　 ○首頁設計的小建議

　　今天，只是關于首頁設計的一個引子。讓我們來大致了解一下首頁設計的步驟。

　　首頁，從根本上說就是全站內容的目錄，是一個索引。但只是羅列目錄顯然是不夠的，如何設計好一個首頁呢？一般的步驟是：

　　●確定首頁的功能模塊
　　 ●設計首頁的版面
　　 ●處理技術上的細節　　

　　一).確定首頁的功能模塊。

　　首頁的內容模塊是指你需要在首頁上實現的主要內容和功能。一般的站點都需要這樣一些模塊：

　　網站名稱(logo), 廣告條(banner), 主菜單(menu),
　　 新聞(what's new), 搜索(search), 友情鏈接(links),
　　 郵件列表(maillist),計數器(count), 版權(copyright).

　　選擇哪些模塊，實現哪些功能，是否需要添加其他模塊都是首頁設計首先需要確定的。

　　二).設計首頁的版面

　　在功能模塊確定后，開始設計首頁的版面。就象搭積木，每個模塊是一個單位積木，如何拼搭出一座漂亮的房子，就看你的創意和想象力了。

　　設計版面的最好方法是：找一張白紙，一支筆，先將你理想中的草圖勾勒出來，然后再用網頁制作軟件實現。

　　三).處理技術上的細節　

　　阿捷經常收到的來信問題就是：我制作的主頁如何能在不同分辨率下保持不變形，如何能在IE和NC下看起來都不至于太丑陋，如何設置字體和鏈接顏色....等等,阿捷將在下面幾篇文章里為大家詳細介紹。

　　首頁設計是整個網站設計的難點和關鍵，阿捷希望能夠通過和大家的交流，總結出一套較為合理易學的設計方法，從而舉一反三，使我們能夠更加輕松的完成整個站點的設計制作。如果你愿意將你的心得體會和大家分享，請來信ajie@soim.com,謝謝！

　　版面布局的原理

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

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

　　版面指的是瀏覽器看到的完整的一個頁面（可以包含框架和層）。因為每個人的顯示器分辨率不同，所以同一個頁面的大小可能出現640*480像素,800*600像素,1024*768像素等不同尺寸。

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

　　我們在設計思考系列文章第四篇講過站點整體的創意，版面布局也是一個創意的問題，但要比站點整體的創意容易，有規律的多。讓我們先來了解一下版面布局的步驟：

一.草案

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

二.粗略布局

　　在草案的基礎上，將你確定需要放置的功能模塊安排到頁面上。(注：功能模塊我們在"首頁設計-引子"中提過，主要包含網站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數器,版權信息等)。注意，這里我們必須遵循突出重點、平衡諧調的原則，將網站標志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然后在考慮次要模塊的排放。

三.定案

　　將粗略布局精細化，具體化。（靠你的智慧和經驗，旁敲側擊多方聯想，才能作出具有創意的布局。）

　　在布局過程中，我們可以遵循的原則有：

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

　　以上的設計原則，雖然枯燥，但是我們如果能領會并活用到頁面布局里，效果就大不一樣了。比如：

　　○網頁的白色背景太虛，則可以加些色快；
　　 ○版面零散，可以用線條和符號串聯；
　　 ○左面文字過多，右面則可以插一張圖片保持平衡；
　　 ○表格太規矩，可以改用導角試試。

　　經過不斷的嘗試和推敲，你的網頁一定會亮麗起來的哦:)

　　看看我們經常用到的版面布局形式：

　　1."T"結構布局。所謂"T"結構。就是指頁面頂部為橫條網站標志+廣告條，下方左面為主菜單，右面顯示內容的布局，因為菜單條背景教深，整體效果類似英文字母"T",所以我們稱之為"T"形布局。這是網頁設計中用的最廣返的一種布局方式。(圖略)