智能網(wǎng)站設計

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

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

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

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

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

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

解決辦法：個人興趣

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

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

　 本講座的目的在于：

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

網(wǎng)站設計

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

設計過程

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

關于時間的考慮

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

明確目的

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

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

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

確定受眾

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

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

形成設計方案

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

反復斟酌

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

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

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

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

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

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

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

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

技術的用途

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

　 如果得當，網(wǎng)絡技術可以增強網(wǎng)站 的說服力，或使網(wǎng)站變得更加有趣。

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

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

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

其它關于技術的考慮

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

慎用Flash

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



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

隱喻

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

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

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

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

個性

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

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

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

風格

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

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

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

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

網(wǎng)站的組織結構

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

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

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

引導瀏覽者

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

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

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

收集內(nèi)容

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

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

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

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

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

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

　 如果您不確定最新的技術是否適合您的 網(wǎng)站，請記?。汉唵瓮ǔＪ亲詈玫摹?br />
創(chuàng)新的過程和圖象設計技術

打基礎

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

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

　 對于背景設計幾乎沒有任何限制；

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

不可低估的文字

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

內(nèi)容的目的

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

圖片的來源

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

圖像處理技術

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

其它技巧

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

其它設計技巧提示

導航界面

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

　 導航界面應盡量“透明”，即：不能阻礙用戶 查找信息；

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

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

首頁的作用

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

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

其它提示

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

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

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