智能網(wǎng)站設(shè)計

問題所在商業(yè)網(wǎng)站設(shè)計大都枯燥乏 味，沒有活力，不夠吸引人。
為什么？
　 可用性專家們最常用的口頭禪就是： 一個網(wǎng)站要取得成功光靠前端界面是不 夠的；

　 他們聯(lián)合起來，基本上完全拋棄創(chuàng)新 性網(wǎng)頁設(shè)計的重要思想；

　 這些專家宣稱一套嚴(yán)格的創(chuàng)建網(wǎng)站所 必須遵守的“法規(guī)”，而不是他們聲稱 要提供的“指導(dǎo)方針”；

　 公司對可用性較差的網(wǎng)站設(shè)計變得非 常警惕；

　 認(rèn)為網(wǎng)絡(luò)只為一小類網(wǎng)站存在的觀點 已根生蒂固。畢竟，既然輪子早已存 在，再去發(fā)明豈不是多此一舉？

　 否定前端界面的重要性將危害到任何 網(wǎng)站的成功。

解決辦法：個人興趣

　 為了使您的網(wǎng)站不再顯得保守或模仿 別人的風(fēng)格，您必須將眼光從商業(yè)網(wǎng)站 轉(zhuǎn)移到當(dāng)今網(wǎng)站設(shè)計領(lǐng)軍人物的個人網(wǎng) 站上；

　 訪問者應(yīng)該能“感覺”到您的網(wǎng)站。 它不是一個數(shù)據(jù)庫，而是交流的媒介。

　 本講座的目的在于：

* 討論設(shè)計過程，幫助您設(shè)計一個有 價值的網(wǎng)站/界面/服務(wù)功能；
* 列舉設(shè)計中需要注意的事項；
* 討論圖象設(shè)計理念，提高網(wǎng)站的視
覺效果；
* 告訴您哪里能夠找到更多幫助；
* 幫助您以挑剔的眼光分析網(wǎng)站和互
動服務(wù)。

網(wǎng)站設(shè)計

我們接下來將講到：
● 設(shè)計過程
● 智能設(shè)計
● 需要考慮的重要因素
● 慎用Flash
● 注意事項

設(shè)計過程

　 階段：
* 形成設(shè)計思想：在項目開發(fā)的初期階段您需要解決一些非常關(guān)鍵的問題；
* 設(shè)計階段：為您的項目選擇合適的
網(wǎng)絡(luò)技術(shù)，收集網(wǎng)站內(nèi)容；
* 制作階段：將所收集的內(nèi)容在一個
綜合的網(wǎng)站界面上充分地體現(xiàn)出來；
* 測試和重復(fù)設(shè)計過程……

關(guān)于時間的考慮

在設(shè)計和制作互動項目的過程中，任 何事情都需要時間。您需要時間去：
* 了解什么適合于網(wǎng)絡(luò)；
* 了解什么工具可用來制作網(wǎng)站；
* 完善網(wǎng)站。
　 設(shè)計出優(yōu)秀的網(wǎng)站很不容易！對于大多數(shù)人來說不會一次成功，需要付出很大的努力。

明確目的

　 始終考慮到您的網(wǎng)站/互動服務(wù)想要 解決的問題；

　 認(rèn)清問題。您對網(wǎng)站的目的理解越深，越有助于您找到解決問題的方法；

　 選擇正確的途徑。為什么選擇網(wǎng)絡(luò)？

確定受眾

　 您需要確定網(wǎng)站的受眾群，并盡可能 地根據(jù)他們的喜好決定設(shè)計方案；

　 同時您需要了解受眾通過什么設(shè)備或 工具連接到互聯(lián)網(wǎng)。

形成設(shè)計方案

　 如果您的客戶需要突出品牌知名度，那么設(shè)計 的目標(biāo)應(yīng)該是增強(qiáng)訪問者對品牌的印象，使他們 在離開網(wǎng)站時認(rèn)為客戶的品牌要比同類品牌好
（至少和同類相當(dāng)）；
　 如果您的客戶是一個非營利機(jī)構(gòu)，或即使是某商業(yè)公司的客戶支持部，設(shè)計目標(biāo)應(yīng)有所不同，即為：保證瀏覽者能輕松地找到所需要的信息和資源；
　 在設(shè)計過程中始終將目標(biāo)牢記在心，不要過于追求網(wǎng)站的視覺效果。

反復(fù)斟酌

　 您不能設(shè)計好網(wǎng)站以后交給客戶就一走了之；
　 在網(wǎng)站完成以后，您應(yīng)有辦法確定其所吸引的訪問者是不是您的目標(biāo)受眾以及他們是否能從網(wǎng)站獲得有用的信息；從設(shè)計初期開始保持靈活的工作思想；做一個簡單的網(wǎng)站原型，在您的工作小組里測試并試用。

網(wǎng)站的另一種內(nèi)容

客戶希望放在網(wǎng)站上的信息并不是唯一 重要的網(wǎng)站內(nèi)容。訪問者不是被控制的觀 眾，您的網(wǎng)站必須足以吸引他們；

　 他們在花時間瀏覽網(wǎng)站的同時，希望能 夠找到實用的信息或工具，或是漂亮的設(shè) 計，或是好玩的游戲，或是能下載的免費 券，或其它一些有趣的網(wǎng)站的鏈接。

技術(shù)不屬于網(wǎng)站內(nèi)容

　 人們總喜歡為網(wǎng)站添加一些不重要的功 能來炫耀自己掌握的最新網(wǎng)絡(luò)技術(shù)；

　 太多不重要的功能會導(dǎo)致訪問者很難找 到真正的內(nèi)容；

　 您所使用的任何一種網(wǎng)絡(luò)技術(shù)都不能偏 離網(wǎng)站的目的。

技術(shù)的用途

　 動畫、聲音、互動性、精心設(shè)計的標(biāo)準(zhǔn) 靜態(tài)圖像，這些都能夠吸引訪問者，并使 您的網(wǎng)站給他們留下深刻印象；

　 如果得當(dāng)，網(wǎng)絡(luò)技術(shù)可以增強(qiáng)網(wǎng)站 的說服力，或使網(wǎng)站變得更加有趣。

根據(jù)受眾選擇恰當(dāng)?shù)募夹g(shù)

如果您的受眾是技術(shù)人員，那么您可以 盡情地運用最新技術(shù)和各種插件；

　 如果您的網(wǎng)站面向大眾，那么需要使用 比較常見和通用的技術(shù)。太前端的技術(shù)有 可能使不太熟悉網(wǎng)絡(luò)的受眾產(chǎn)生距離感。

其它關(guān)于技術(shù)的考慮

　 網(wǎng)速和處理器速度
　 屏幕大小
　 瀏覽器版本
　 HTML標(biāo)簽方面的問題

慎用Flash

　 如果使用恰當(dāng)，Macromedia Flash將會是增強(qiáng) 網(wǎng)站吸引力的優(yōu)秀工具；
　 但不幸的是，它是目前最被濫用的網(wǎng)絡(luò)技術(shù)之一（我們稍候會看到一些例子）。



我最喜歡的網(wǎng)站設(shè)計師Curt Cloninger一針見血 地指出： “自Flash產(chǎn)生以來，那些年輕的網(wǎng)站設(shè)計師們 就拋棄了友好的用戶界面設(shè)計，而一頭扎入布滿 莫名漩渦的沼澤地里。”

隱喻

　 為您的網(wǎng)站或開發(fā)項目設(shè)定一個總的隱喻；

　 當(dāng)隱喻漸漸形成以后，您就可以開始設(shè)計網(wǎng)站 界面，通過它將信息和內(nèi)容傳遞給受眾；

　 在設(shè)計過程中，隱喻的運用將使受眾在瀏覽網(wǎng) 站時聯(lián)想到現(xiàn)實世界，給他們親切感；

　 除了考慮所設(shè)定的隱喻能不能最大程度地幫助 受眾理解網(wǎng)站內(nèi)容，還需要注意它是否一直能適 合您的網(wǎng)站。

個性

　 您所提供的服務(wù)必須具有自己的身份和 個性才能脫穎而出；

　 您將用哪種方式展現(xiàn)信息或內(nèi)容？有趣 的、技術(shù)型的、時髦的、隨意的、還是正 式的？

　 無論您采用哪種方式，請記住持之以 恒。

風(fēng)格

　 為網(wǎng)站增加味道的最重要的貢獻(xiàn)者之一就是網(wǎng)站 的風(fēng)格，包括頁面布局、圖片的使用、字體、顏色 等；

　 頁面的布局應(yīng)足夠靈活，以便支持網(wǎng)站內(nèi)容的變 化和不同的媒體類型；

　 利用三維空間的概念：現(xiàn)實世界并不是一個平面；

　 盡量使網(wǎng)站風(fēng)格和設(shè)定的隱喻保持一致。

網(wǎng)站的組織結(jié)構(gòu)

　 大多數(shù)人在發(fā)現(xiàn)新網(wǎng)站時通常有兩個問題：我 能在這個網(wǎng)站找到什么？通過什么途徑找到？

　 當(dāng)組織網(wǎng)站結(jié)構(gòu)時，您會覺得左右為難：一方 面，您希望在頁面上盡可能多地顯示選項供不同 的瀏覽者選擇，這樣他們就可以輕松地找到想要 的信息；而另一方面，您又希望給瀏覽者一個總 體的網(wǎng)站向?qū)?，告訴他們怎樣找到重要內(nèi)容。

　 總的來說，每一屏所顯示的主要選項不應(yīng)超過 六至十個。

引導(dǎo)瀏覽者

　 為瀏覽者鋪建一條“暢通無阻的道 路”。沒有人比設(shè)計者更清楚怎樣充分地 使用網(wǎng)站；

　 將這條“黃金道路”而不是流水賬似的 內(nèi)容清楚地展現(xiàn)給瀏覽者；

做一個網(wǎng)站結(jié)構(gòu)樹狀圖，看一看結(jié)構(gòu)是否能夠再簡潔點，內(nèi)容是否可以更直觀有 力。

收集內(nèi)容

　 網(wǎng)站制作的下一步就是確定內(nèi)容的來源。這里的內(nèi) 容包括文字、圖片、視頻和聲音；

　 當(dāng)您已收集到一些內(nèi)容并打算制作或購買更多時， 很重要的一步是要為內(nèi)容的呈現(xiàn)方式建立一系列標(biāo)準(zhǔn)，包括內(nèi)容的獲得、發(fā)布和備份標(biāo)準(zhǔn)。

　 要做成一個內(nèi)容和風(fēng)格統(tǒng)一的網(wǎng)站，建立這樣的標(biāo) 準(zhǔn)非常重要。應(yīng)該讓所有的工作人員都清楚了解并按 照標(biāo)準(zhǔn)執(zhí)行；

　 收集內(nèi)容應(yīng)該成為工作小組共同的工作。

牢記網(wǎng)站的目標(biāo)

　 在設(shè)計過程中需要始終著重于您希望受 眾從網(wǎng)站獲得什么，并盡量使瀏覽您的網(wǎng) 站成為一次愉快的經(jīng)歷；

　 如果您不確定最新的技術(shù)是否適合您的 網(wǎng)站，請記住：簡單通常是最好的。

創(chuàng)新的過程和圖象設(shè)計技術(shù)

打基礎(chǔ)

　 一旦網(wǎng)站的總體隱喻或風(fēng)格確定以后，頁面的 背景就成為其它圖片的視覺基礎(chǔ)；

　 網(wǎng)站給訪問者的感覺是界面友好、高技術(shù)、還 是超現(xiàn)實，在很大程度上取決于背景圖案；

　 對于背景設(shè)計幾乎沒有任何限制；

　 無損壓縮技術(shù)可通過如GIF和PNG等圖片格式運 用的游程長度編碼(run-length-encoding)很好地 壓縮有著大片重復(fù)顏色或圖案的簡單圖片。

不可低估的文字

　 文字及各種字體是建立網(wǎng)站的強(qiáng)大工具；不要先入為主地認(rèn)為網(wǎng)站必須基于圖片的大量
運用；文字可以被做出很多效果。您可以利用圖像工具做特殊字體，實現(xiàn)三維效果，改變文本顏色等等；運用能概括網(wǎng)站內(nèi)容的關(guān)鍵字，它能吸引訪問者的注意；如果您能嫻熟地利用文字這一強(qiáng)大的工具，那么最終設(shè)計好的網(wǎng)站將非常具有吸引力。

內(nèi)容的目的

　 對于設(shè)計過程中運用的每一張圖片或每一個特 殊效果，問問自己：“它能表達(dá)什么意思？用它 的目的何在？”如果你發(fā)現(xiàn)自己胡亂放置了大量的剪貼畫、未標(biāo) 記或沒用的圖片，那么停下來，打自己一耳光；頁面上的所有內(nèi)容必須有的放矢，并與網(wǎng)站的 風(fēng)格保持一致；避免使用無用的裝飾性圖片，它們除了降低訪 問速度以外別無它用。

圖片的來源

      制作大型互動網(wǎng)站最大的挑戰(zhàn)在于怎樣制作能 表達(dá)設(shè)計者思想的優(yōu)秀圖片；將已有圖片和數(shù)字插畫有機(jī)地結(jié)合起來可以起 到很好的效果；對網(wǎng)上找到的圖片進(jìn)行再加工用于您的網(wǎng)站；如果有能力，您可以通過Photoshop， Fireworks和數(shù)碼相機(jī)等工具自己制作圖片。

圖像處理技術(shù)

　 如果您打算自己制作圖片用于網(wǎng)站，可考慮以 下的圖片處理技術(shù)來增強(qiáng)網(wǎng)站的視覺效果：
* 陰影
* 斜面和浮雕
* 顏色漸變和光影效果
* 濾鏡
* 運動軌跡
* 模糊
* 描邊
* 圖像翻轉(zhuǎn)

其它技巧

　 用路徑創(chuàng)建文本
　 圖片上的文字采用遮罩文本
　 利用已有圖片進(jìn)行扣圖處理
　 處理線條時使用紋理效果
　 將相似的內(nèi)容分類
　 運用對比鮮明的顏色形成反差
　 將黑白色和亮色結(jié)合可產(chǎn)生意想不到的
效果
　 采用圖文并茂的形式

其它設(shè)計技巧提示

導(dǎo)航界面

　 導(dǎo)航界面應(yīng)與已確定的網(wǎng)站隱喻相符；

　 導(dǎo)航界面應(yīng)盡量“透明”，即：不能阻礙用戶 查找信息；

　 它應(yīng)清楚地顯示用戶所處的位置，并使用戶能 輕松地回到以前訪問過的頁面；

　 導(dǎo)航界面的文本鏈接應(yīng)使用描述性文字；而圖 標(biāo)鏈接的圖片應(yīng)與目的頁面的內(nèi)容相符。

首頁的作用

　 表明網(wǎng)站的目的和主要內(nèi)容
　 顯示主要內(nèi)容分類
　 說明網(wǎng)站的整體風(fēng)格
　 使訪問者對網(wǎng)站的隱喻有初步印象
　 注意：避免使用不必要的形象頁面（splash page，即僅包含圖片或flash的頁面）。大多數(shù)情況下這種首頁對訪問者了解您的網(wǎng)站不起任何作用。

　 盡量使內(nèi)容清楚明了；含糊不清的風(fēng)格 會使您失去許多讀者；
　 使用受眾熟悉的語言和符號；
　 保持內(nèi)容和設(shè)計風(fēng)格一致；
　 利用反差；
　 盡量采用整潔的設(shè)計風(fēng)格；
　 記住：互聯(lián)網(wǎng)是一個動態(tài)媒介，同一信息可有多種表現(xiàn)方式；
　 強(qiáng)烈的感官感受可以吸引訪問者。

其它提示

　 每周組織兩小時的小組會議，討論項目進(jìn)展情 況、最近任務(wù)、設(shè)計和技術(shù)問題等等。小組成員 互相討論問題交流點子；

　 如果有多種設(shè)計方案，采用原型評估選擇最佳 方案，并聽取各小組成員的意見和建議；

　 在為項目編寫程序時，采用并發(fā)版本控制系統(tǒng) (Concurrent Versioning System, CVS)解決不 同版本間兼容問題，簡化備份工作和模塊輸出。
本文發(fā)布于北京網(wǎng)站建設(shè)公司尚品中國http://xjjufeng.cn/