close

網站中視覺元素的設計 - 網頁設計

http://webdesign.zoapcon.com

這篇文章所說的視覺元素是指:在一個網站中除去內容(文本、圖片、視頻、音頻等)之外的一些元素。比如圖標,背景色,以及背景圖案。

視覺元素的設計是配合產品的架構意圖并且引導用戶交互
前文在聊到文字設計的時候,內容本身的應該是簡潔、直接了當。其實視覺元素同樣如此,好設計不會拖泥帶水,在版式設計中,我說到很多時候可以利用留白來劃分位置感,比如我的博客主題,區塊直接的劃分完全使用留白+對齊。但是,對于大多數的網站來說,頁面空間寸土寸金,不可能有那么多“白”讓設計師揮霍,這時,我們就會利用圖標,背景圖案、顏色來給予用戶位置感,傳遞產品架構的邏輯關系。

 


圖中是華南理工大學的學生網站,整個網站的視覺可謂一馬平川,雖然在布局的劃分中,也用到了一些視覺元素,比如區塊中的小方塊圖標,右側的綠色背景,但是效果非常不明顯。假設將綠色背景放在標題文字下面,標題文字反白并且加粗顯示,相信效果會好一些。多參看一下一些成熟的門戶網站在這方面設計的方法和手段。

視覺元素的一致性
很多設計師有個習慣,在做視覺的時候,會參看大量的“漂亮”網站或者該領域成功的網站,并且借鑒其中的一些視覺元素,但是往往這樣東拼西湊的設計往往會影響細節體驗。

 


中華玻璃網在視覺設計中大量借鑒了淘寶的設計風格,向好的網站借鑒本身沒有錯,但要把細節借鑒到位了,并且融合自己網站的定位。來看玻璃網中的圖標,各種顏色、形狀非常地豐富。再看看淘寶是怎么做的:小圓角是整個網站的設計風格,不僅僅在頁面的模塊中用了圓角的設計,在圖標的設計上,也都是圓形的設計,顏色也只用了主色調的橙色和灰色。借鑒本身不是壞事,但是要注意保持自己頁面風格,品牌風格的一致性。

那些多余的視覺元素
很多網站單純地為了“漂亮”而設計,比如在每個標題前面都要帶個小圖標,或者在按鈕里面加小圖標。給每個模塊都加上一樣的背景顏色等等。
再比如麥田老師的螞蟻網,首頁中的那個背景圖案讓我就很費解,更像是一個個人空間的模板而不是一個“平臺性”的網站。在頁面的布局上面,也讓人感覺不夠清晰,沒有層次感。

PS:漸漸地有些朋友發郵件讓我給貴站提建議,而且數量越來越多,不能一一作答,望見諒,而且有些網站連一些基本的視覺概念都沒有,問題確實太多,不太好作答,希望這幾篇視覺設計的文章對大家有所幫助。還有的用table布局,建議改用div。
這系列文章也僅僅代表我個人的一些觀點和經驗,希望能和設計師朋友一起討論。


arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜
    創作者介紹
    創作者 imarketin 的頭像
    imarketin

    imarketin的部落格

    imarketin 發表在 痞客邦 留言(0) 人氣()