從名稱到頁面-網(wǎng)站設(shè)計全攻略(3)

　4.如果網(wǎng)站是一個人，他擁有的個性是：________________

　　參考答案：
　　 思想成熟的中年人，狂野奔放的牛仔，自信憨厚的創(chuàng)業(yè)者

　　5.作為站長，你希望給人的印象是：____________________

　　參考答案：
　　 敬業(yè)，認真投入，有深度，負責，純真，直爽，淑女

　　6.用一種動物來比喻，你的網(wǎng)站最象：__________________

　　參考答案：
　　 貓(神秘高貴)，鷹(目光銳利)，兔子(聰明敏感)，獅子(自信威信)

　　7.瀏覽者覺得你和其他網(wǎng)站的不同是：__________________

　　參考答案：
　　 可以信賴，信息最快，交流方便，

　　8.瀏覽者和你交流合作的感受是：______________________

　　參考答案：
　　 師生，同事，朋友，長幼。

　　你可以自己先填寫一份答案，然后讓其他網(wǎng)友填寫。比較后的結(jié)果會告訴你：你網(wǎng)站現(xiàn)在的差距，弱點及需要改進的地方。

　　第三，在明確自己的網(wǎng)站印象后，開始努力建立和加強這種印象。

　　經(jīng)過第二步印象的的"量化"后，你需要進一步找出其中最有特色特點的東西，就是最能體現(xiàn)網(wǎng)站風格的東西。并以它作為網(wǎng)站的特色加以重點強化，宣傳。例如：再次審查網(wǎng)站名稱，域名，欄目名稱是否符合這種個性，是否易記。審查網(wǎng)站標準色彩是否容易聯(lián)想到這種特色，是否能體現(xiàn)網(wǎng)站的性格等等。具體的做法，沒有定式。我這里提供一些參考：

　　1.將你的標志logo,盡可能的出現(xiàn)在每個頁面上?；蛘唔撁?，或者頁腳，或則背景。

　　2.突出你的標準色彩。文字的鏈接色彩，圖片的主色彩，背景色，邊框等色彩盡量使用與標準色彩一致的色彩。

　　3.突出你的標準字體。在關(guān)鍵的標題，菜單，圖片里使用統(tǒng)一的標準字體。

　　4.想一條朗朗上口宣傳標語。把它做在你的banner里，或者放在醒目的位置，告訴大家你的網(wǎng)站的特色是...

　　5.使用統(tǒng)一的語氣和人稱。即使是多個人合作維護，也要讓讀者覺得是同一個人寫的。

　　6.使用統(tǒng)一的圖片處理效果。比如，陰影效果的方向，厚度，模糊度都必須一樣。

　　7.創(chuàng)造一個你的站點特有的符號或圖標。比如在一句鏈接前的一個點，可以使用,.?！睢稹蟆酢鳌▍^(qū)位碼里自己參看）等等。雖然很簡單的一個變化，卻給人與眾不同的感覺，(為什么我沒有想到呢？)

　　8.用自己設(shè)計的花邊，線條，點

　　9.展示你網(wǎng)站的榮譽和成功作品。

　　10.告訴網(wǎng)友關(guān)于你的真實的故事和想法。

　　風格的形成不是一次定位的，你可以在實踐中不斷強化，調(diào)整，修飾，直到有一天，網(wǎng)友們寫信告訴你："我喜歡你的站點，因為它很有風格！"

　　● 創(chuàng)意(idea)是網(wǎng)站生存的關(guān)鍵。這一點相信大家都已經(jīng)認同。然而作為網(wǎng)頁設(shè)計師，最苦惱的就是沒有好的創(chuàng)意來源。

　　注意，這里說的創(chuàng)意是指站點的整體創(chuàng)意，(因為這個創(chuàng)意而產(chǎn)生這個站點，或者相同的內(nèi)容，推出的創(chuàng)意不同),網(wǎng)頁的平面設(shè)計創(chuàng)意我將在后面的版面布局竅門里介紹。

　　創(chuàng)意到底是什么，如何產(chǎn)生創(chuàng)意呢？

　　創(chuàng)意是引人入勝，精彩萬分，出奇不意的；
　　 創(chuàng)意是捕捉出來的點子，是創(chuàng)作出來的奇招....
　　 這些講法都說出了創(chuàng)意的一些特點，實質(zhì)上，

　　創(chuàng)意是傳達信息的一種特別方式。

　　比如Webdesigner(網(wǎng)頁設(shè)計師)，我們將其中的E字母大寫一下: wEbdEsigEr，感覺怎么樣，這其實就是一種創(chuàng)意！

　　創(chuàng)意并不是天才者的靈感，而是思考的結(jié)果。根據(jù)美國廣告學教授詹姆斯的研究，創(chuàng)意思考的過程分五階段

　　1.準備期--研究所搜集的資料，根據(jù)舊經(jīng)驗，啟發(fā)新創(chuàng)意；
　　 2.孵化期--將資料咀嚼消化，使意識自由發(fā)展，任意結(jié)合；
　　 3.啟示期--意識發(fā)展并結(jié)合，產(chǎn)生創(chuàng)意；
　　 4.驗證期--將產(chǎn)生的創(chuàng)意討論修正；
　　 5.形成期--設(shè)計制作網(wǎng)頁，將創(chuàng)意具體化。

　　創(chuàng)意是將現(xiàn)有的要素重新組合。

　　比如，網(wǎng)絡(luò)與電話結(jié)合，產(chǎn)生IP電話。從這一點上出發(fā)，任何人，包括你和我，都可以創(chuàng)造出不同凡響的創(chuàng)意。而且，資料越豐富，越容易產(chǎn)生創(chuàng)意。就好比萬花筒，筒內(nèi)的玻璃片越多，所呈現(xiàn)的圖案越多。你如果有心可以發(fā)現(xiàn)，網(wǎng)絡(luò)上的最多的創(chuàng)意來自與現(xiàn)實生活的結(jié)合(或者虛擬現(xiàn)實)，例如在線書店，電子社區(qū)，在線拍賣。你是否想到了一種更好的創(chuàng)意呢？

　　創(chuàng)意思考的途徑最常用的是聯(lián)想，這里提供了網(wǎng)站創(chuàng)意的25種聯(lián)想線索：

　　1.把它顛倒 2.把它縮小 3.把顏色換一下 4.使它更長
　　 5.使它閃動 6.把它放進音樂里 7.結(jié)合文字音樂圖畫 8.使它成為年輕的
　　 9.使它重復(fù) 10.使它變成立體 11.參加競賽 12.參加打賭
　　 13.變更一部分 14.分裂它 15.使它羅曼蒂克 16.使它速度加快
　　 17.增加香味 18.使它看起來流行 19.使它對稱 20.將它向兒童訴求
　　 21.價格更低 22.給它起個綽號 23.把它打包 24.免費提供
　　 25.以上各項延伸組合
　　 -------------(轉(zhuǎn)載自樊志育《廣告制作》)

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

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

首頁的設(shè)計

　　在我們?nèi)婵紤]好網(wǎng)站的欄目，鏈接結(jié)構(gòu)和整體風格之后，我們就可以正式動手制作首頁了。

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

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

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

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

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

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

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

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

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

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

　　●確定首頁的功能模塊
　　 ●設(shè)計首頁的版面
　　 ●處理技術(shù)上的細節(jié)　　

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

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

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

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

　　二).設(shè)計首頁的版面

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

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

　　三).處理技術(shù)上的細節(jié)　

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

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

　　版面布局的原理

　　設(shè)計首頁的第一步是設(shè)計版面布局。

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

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

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

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

一.草案

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

二.粗略布局

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

三.定案

　　將粗略布局精細化，具體化。（靠你的智慧和經(jīng)驗，旁敲側(cè)擊多方聯(lián)想，才能作出具有創(chuàng)意的布局。）

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

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

　　以上的設(shè)計原則，雖然枯燥，但是我們?nèi)绻茴I(lǐng)會并活用到頁面布局里，效果就大不一樣了。比如：

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

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

　　看看我們經(jīng)常用到的版面布局形式：

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