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

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

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

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

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

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

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

解決辦法：個(gè)人興趣

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

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

　 本講座的目的在于：

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

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

我們接下來(lái)將講到：
● 設(shè)計(jì)過(guò)程
● 智能設(shè)計(jì)
● 需要考慮的重要因素
● 慎用Flash
● 注意事項(xiàng)

設(shè)計(jì)過(guò)程

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

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

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

明確目的

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

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

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

確定受眾

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

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

形成設(shè)計(jì)方案

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

反復(fù)斟酌

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

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

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

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

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

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

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

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

技術(shù)的用途

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

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

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

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

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

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

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

慎用Flash

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



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

隱喻

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

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

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

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

個(gè)性

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

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

　 無(wú)論您采用哪種方式，請(qǐng)記住持之以 恒。

風(fēng)格

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

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

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

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

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

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

　 當(dāng)組織網(wǎng)站結(jié)構(gòu)時(shí)，您會(huì)覺得左右為難：一方 面，您希望在頁(yè)面上盡可能多地顯示選項(xiàng)供不同 的瀏覽者選擇，這樣他們就可以輕松地找到想要 的信息；而另一方面，您又希望給瀏覽者一個(gè)總 體的網(wǎng)站向?qū)В嬖V他們?cè)鯓诱业街匾獌?nèi)容。

　 總的來(lái)說(shuō)，每一屏所顯示的主要選項(xiàng)不應(yīng)超過(guò) 六至十個(gè)。

引導(dǎo)瀏覽者

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

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

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

收集內(nèi)容

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

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

　 要做成一個(gè)內(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è)計(jì)過(guò)程中需要始終著重于您希望受 眾從網(wǎng)站獲得什么，并盡量使瀏覽您的網(wǎng) 站成為一次愉快的經(jīng)歷；

　 如果您不確定最新的技術(shù)是否適合您的 網(wǎng)站，請(qǐng)記?。汉?jiǎn)單通常是最好的。

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

打基礎(chǔ)

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

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

　 對(duì)于背景設(shè)計(jì)幾乎沒(méi)有任何限制；

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

不可低估的文字

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

內(nèi)容的目的

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

圖片的來(lái)源

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

圖像處理技術(shù)

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

其它技巧

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

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

導(dǎo)航界面

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

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

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

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

首頁(yè)的作用

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

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

其它提示

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

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

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