【威海站】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為載體的人機界面設計。
來自 “ ITPUB博客 ” ,鏈接:http://blog.itpub.net/12639172/viewspace-332683/,如需轉載,請注明出處,否則將追究法律責任。
轉載于:http://blog.itpub.net/12639172/viewspace-332683/
總結
以上是生活随笔為你收集整理的【威海站】Flash和RIA技术--网站建设设计理念的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: WebIM 网页聊天工具
- 下一篇: Russia Proposes Firs