【威海站】Flash和RIA技術--網站建設設計理念

Flash的大名四海皆知，似乎沒有在這裡刻意強調的必要。有關Flash我只想說兩點：其一，Flash動畫是手段而不是目的，如果單純為了炫耀而在網頁中不加限制地使用Flash動畫，以至於衝浪者一進網站就頭暈目眩，那可就得不償失了；其二，有許多網頁動畫效果既可以用CSS+ JavaScript實現，也可以用Flash實現，二者各有利弊——網頁設計師在選擇時應多考慮效率、標準、易用性等與衝浪者關係最為密切的問題。
除了純客戶端的Flash應用之外，網頁設計師們也該對客戶端與服務端結合的RIA（Rich Internet Applications）技術給予足夠的關注。在Macromedia倡導的RIA架構中，網頁設計師可以和程式設計師一起利用Macromedia Flex編寫執行在Web伺服器上、可以動態產生Flash應用的服務端程式碼。與以往那些輸出HTML或XHTML的服務端程式碼相比，RIA可以讓互動式的Web頁面（比如購物類網頁）像Flash動畫一樣動感、靚麗。
Blog和Wiki的啟示
Blog和Wiki是這幾年才流行開來的Web應用模式（千萬不要告訴我你不知道Blog和Wiki是什麼）。儘管今天大多數Blog和Wiki站點在設計方面都沒有任何亮點可言，網頁設計師還是應該花些時間研究一下Blog和Wiki的應用理念。
我的意思是說，Blog和Wiki為網友們提供了兩種全新的展示自我價值、實現“人”、“網”互動的平臺。這兩種全新的資訊釋出與傳播模式其實也為新一代的網頁設計提出了嚴峻的挑戰。例如，設計師該如何組織一個可能有多人蔘與、可能隨時有資訊變更的頁面，才能保證該頁面中每個視覺元素都完美、和諧？設計師該如何處理一個可以由使用者自行定義的頁面，才能保證該頁面的設計風格總是與站點的整體風格協調一致？更進一步地說，在一個賦予使用者最大自由的網頁中，設計師的職責是增加了還是減少了？像Blog和Wiki這樣的站點，它們一定無法在視覺效果上達到完美嗎？
選擇最適合自己的軟體工具
每個網頁設計師都有自己最得心應手的軟體工具。在選擇軟體工具這個方面，人云亦云的盲從態度是最不可取的。
我自己在設計網頁時用得最多的工具其實是UltraEdit（Windows環境）和BBEdit（Mac OS X環境），但我絕不會因此而否定FrontPage或Dreamweaver在視覺化領域的巨大優勢；我最喜歡的圖形影像工具是Photoshop、 Painter與Illustrator的組合，但我從不認為使用Windows畫板來描繪點陣圖或使用PowerPoint來勾勒向量圖就是水平低下的表現；在製作動畫時，Flash對我而言只是一個最後的合成工具，此前還會有Illustrator、Swift 3D等許多軟體發揮它們各自的價值——大家一定猜不到，我還經常在微軟的OneNote軟體中繪製Flash動畫的分鏡頭草稿呢；此外，懂得程式設計的網頁設計師還可以在開發工具和指令碼語言的幫助下，讓設計過程更加輕鬆——不知道大家是否嘗試過，用JavaScript或AppleScript來操控 Photoshop，就可以根據某個資料庫中預先儲存的資料批量生成網站中的所有按鈕圖片，這可是一種十分愜意的使用體驗啊！
認識和使用色環
色環就是將常用色彩按照某種規律排列成圓環之後的結果。千萬不要以為色環只有一種。例如，以計算機顯示器使用的紅、綠、藍三原色為基礎，經兩兩混合得到間色，再進一步得到下一級間色，最終得到的12色、24色或更多顏色的色環通常被稱為RGB色環或光源色色環；而從美術顏料中的紅、黃、藍三原色出發得到的色環也被稱為美術色環；還有一些設計師會根據自己的需要，僅僅用某個色調區域的色彩組合成專用的色環。
經常觀察和分析色環中隱藏的色彩規律是網頁設計師的必修課之一。在RGB色環中，我們可以很容易找到那些最適於在顯示器中表現的色彩。但RGB色環隱藏了較多暖色系的細節，我們最好用美術色環來探索顏色與顏色之間的相互關係。
在美術色環中，相距180°的兩種顏色是反差最強烈的補色，間距在60°以內的色彩是關係最為協調的近似色，兩兩相距60°的三種顏色則可以構成一個視覺效果非常強烈的色彩組合……如果我們自己建立出了一個由不同深淺的藍色組成的色環，那麼，只要簡單地將色環中心區域填充為某種色彩，就能很快找到與該顏色最為相配的藍色了。
色彩的心理效應
每種色彩都會引起人們特定的心理感覺。我們常說的冷色和暖色就是心理感覺的體現。一些設計師喜歡為自己熟悉的每種色彩配上兩三個特定的形容詞，比如為深紫色配上“憂鬱－陶醉－哀婉”，然後根據這些形容詞，將不同的色彩分門別類，以便在需要時選用。韓國 I.R.I色彩研究所用類似的方法將標有形容詞的常用色彩及色彩組合置於“生硬－柔和/動態－靜態”的座標系（印象空間）中，這樣，設計師只要在座標系中圈出與網站主題吻合的印象區域，就可以很容易地找到自己需要的色彩組合了（參見電子工業出版社2002年9月出版的《Web Color Design——設計師談網頁配色》一書）。
色彩的心理效應不是固定不變的。特定色彩在與其他不同色彩搭配時，往往會表現出不同的心理效應。比如，當我們把紫色放在藍色和綠色中間時，紫色看起來是典型的暖色，而當我們把同樣的紫色放在紅色和橙色之間時，它看起來就是典型的冷色了。再比如，單獨看起來明亮、純淨的黃色一旦被置於淺棕色的背景中，似乎一下子就變得模糊和晦澀了。
不同的色彩模型
在電腦中，網頁設計師可以使用不同的色彩模型來表示特定的色彩。開啟Photoshop軟體的調色盤，我們可以看到最常用的四種色彩模型——RGB、CMYK、HSB和Lab。
RGB是設計師在網頁中指定色彩的基本模型。作為一名網頁設計師，我們應當對RGB色彩模型有足夠的瞭解，至少，我們應能快速說出大多數典型色彩的RGB近似值，或是在看到某一組RGB值後馬上知道那大致是一種什麼樣的色彩。
CMYK 是印表機等印刷裝置使用的色彩模型。大多數網頁設計師無須考慮CMYK模型。但在設計那些專用於列印的彩色網頁時，我們就必須解決某種色彩轉換到CMYK 模型後可能存在的失真問題，因為許多明亮的RGB色彩都無法準確對映到CMYK空間。使用Photoshop提供的“Proof Colors”功能可以看到色彩在列印輸出時的實際效果——如果某種色彩失真較大，那麼最好提前換掉它。
HSB色彩模型可以反應出某種色彩的色調（Hue，也譯作“色相”，但中文Windows和Mac OS X系統的調色盤均使用“色調”的譯法）、飽和度、亮度這三個基本屬性。HSB模型最接近人們對色彩的感知方式，因此，在選擇特定色彩或色彩組合的時候，我們可以先從HSB模型出發定位色彩，然後再將其轉換為網頁中使用的RGB值。
Lab模型是一種非常出色的技術模型，非常適於精確地表達、儲存、壓縮或轉換色彩資訊。儘管也可以用較直觀的方式理解Lab模型，但目前使用Lab模型尋找或定位特定色彩的設計師還寥寥無幾。
色調變化
在色調（Hue，也譯作“色相”）的基礎上尋求變化是最常用的色彩搭配方式之一。
從RGB 色環或美術色環出發，我們可以很容易地找到相距180°左右的補色組合以及相距60°以內的近似色組合。使用補色可以在網頁中製造出強烈的視覺對比效果，這適於表達那些鮮明、突出的主題；使用近似色則可以讓網頁的整體視覺效果更加和諧，這適於表現那些含蓄、內斂的主題。
還有一種值得注意的色調組合方式：選出一種特定色彩後，在色環上找到其補色所在的位置，然後從補色兩邊同時選出兩種或多種補色的近似色，並將它們與原色彩搭配起來。這樣的色彩組合一方面包含視覺上的對比因素，另一方面也包含統一、和諧的效果。如果變換每種色彩在網頁上的分佈位置和分佈面積，還可以得到許多意想不到的結果。
飽和度變化
飽和度是反應色彩純淨或灰濁程度的指標。將飽和度相近的色彩搭配在一起，可以在統一的視覺效果中引入節奏上的變化；將飽和度差異較大的色彩搭配在一起，可以讓飽和度高的色彩更加突出，也可以讓網頁中的視覺衝突更加明顯。
飽和度為0時，色彩就變成了白色、灰色或黑色。因此，有些設計師也把特定色彩與白色、灰色、黑色的搭配歸入到飽和度對比的範疇中。從這個意義上說，白色、灰色、黑色等中性色在突出其他色彩的“彩色屬性”方面有著非常重要的價值。
亮度變化
保持色調和飽和度一定的情況下，單純改變某種色彩的亮度，也可以得到許多漂亮的色彩組合。
在許多現代企業的網頁中，亮度不同的藍色既可以讓整個網頁保持統一的商務風格，也可以讓不同的網頁區域形成一定的對比和變化關係。有時候，前景資訊和背景資訊分別使用亮度不同的色彩（比如暗綠色背景上的淺綠色文字）也會收到奇效——這些網頁看上去似乎沉浸在某種獨特而強烈的感情色彩中；同時，前景顏色和背景顏色既保持了一定的相似性，又存在較明顯的對比關係，不會妨礙我們閱讀文字資訊。
Web安全色和其他調色盤
選擇顏色時，可以直接利用一些現成的調色版。
網頁設計師比較熟悉的216種網頁安全顏色在前幾年一度成了配色領域裡的首選調色盤。據說這216種安全顏色在所有作業系統和所有顯示裝置上的顯示效果都完全一致——這種說法當然不夠準確，這216種色彩只是相對而言不那麼容易受到裝置影響罷了。今天，在絕大多數顯示卡和顯示器都已經使用24位真彩色的情況下，216種安全顏色的重要程度已經大不如前。但是，如果設計師希望網頁能在PC以外的裝置（如PDA和手機）上保持足夠出色的顯示品質，我們還是應該堅持從這216種顏色組成的調色盤中尋找配色方案。
在Photoshop或Illustrator軟體的“Swatches”窗格中，我們還可以載入許多經典的調色盤。比如，PANTONE系列的調色盤就非常受設計師們的歡迎。直接從這些經典的調色盤中選取顏色可以省去尋找或嘗試色彩組合時的許多麻煩。
使用配色工具
網頁設計師應善於利用軟體工具幫助自己選擇色彩和色彩組合。比如，我自己就經常在Illustrator中用矩形拼湊出基本的網頁佈局，然後不斷改變每個矩形的填充色，以尋找最佳的配色方案。
有一些非常專業的配色軟體可以幫我們解決很多問題，比如ColorImpact軟體可以讓我們在RGB色環或美術色環中自由選取特定的色彩，可以根據我們選擇的主色調和配色思路（比如以補色為主或以近似色為主）自動給出示例網頁的顯示效果，還可以讓我們在螢幕範圍內自由點選顏色並完成RGB、HSB等色彩模型間的轉換。另一種名為ColorWheel Pro的小軟體在網頁配色模擬方面的功能比ColorImpact還要強大一些。
網頁設計中的人機介面問題
很多網頁設計師只注重佈局、文字、色彩等基本設計要素，而從不考慮自己設計的網頁是否能給使用者帶來最舒適的使用體驗。結果，有許多看上去絢麗無比的頁面使用起來卻極為繁瑣：為了填寫一個簡單的表格，使用者可能要用滑鼠點上好幾十次；為了通過一個最基本的身份認證，使用者可能要在兩三個頁面之間跳來跳去；為了進入最有價值的下載頁面，使用者可能要坐等螢幕上的Flash短片嘰嘰喳喳地唱上好幾分鐘……
這些問題其實都與人機介面的設計相關。
人機介面設計是一門相當深奧的學問。限於篇幅，我在這裡不可能展開討論視覺隱喻、最短互動路徑、資訊傳遞效率、典型操作模式等細節問題。我只是想提醒大家，一名合格的網頁設計師同時也應該是一名合格的人機介面設計師，因為無論從哪個意義上來說，Web頁面都是一種最典型也最流行的人機互動平臺，而網頁設計在本質上就是一種以Web為載體的人機介面設計。