問(wèn)題所在商業(yè)網(wǎng)站設(shè)計(jì)大都枯燥乏 味，沒有活力，不夠吸引人。為什么？　 可用性專家們最常用的口頭禪就是： 一個(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ū)?，告訴他們?cè)鯓诱业街匾獌?nèi)容?！?總的來(lái)說(shuō)，每一屏所顯示的主要選項(xiàng)不應(yīng)超過(guò) 六至十個(gè)。引導(dǎo)瀏覽者　 為瀏覽者鋪建一條“暢通無(wú)阻的道 路”。沒有人比設(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ì)幾乎沒有任何限制；　 無(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) 記或沒用的圖片，那么停下來(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è)公司云裂變http://www.1558.cn/