本文第一部分用一個個人主頁的新年版視覺設計為例,詳細剖析如何用一些小技巧輕松方便地設計出漂亮的網頁視覺效果。
第二部分用一個設計得不太成功的的情人節頁面視覺設計為例,經過簡單修改,畫龍點睛、變腐朽為神奇,為大家的頁面視覺設計提供一些幫助。
一、個人主頁新年版視覺設計剖析
如上圖是Relen的個人主頁Relen.com,2004版的首頁發布信息,尤其是過年前后,利用雪花來點綴頁面是非常合適的。注意這里面的雪花的擺設位置是有些技巧的,你可以考慮用黃金分割來支配你的設計思路,以達到合理、舒適的效果。
先排列文字,運用兩到三種不同的字體,絕大多數文字對齊左側,而其中一行突出,形成錯落有致的感覺。文字的大小需要調整,主要信息文字大寫,字體突出。而其他根據信息主次和平面設計的要求等多種因素進行排列。個別地方使用斜體加強,或用加粗的形式明示。
字體位置可以放在對角線的中部位置。如上三張圖,效果都會不錯。
注意,當文字的位置已經確定時,插圖背景中的雪花要對照著文字放入。先做對稱比例,注意雪花的大小。太大,會搶奪文字在畫面中的重要性,也會影響到其他雪花的排入。尋找合適的位置與大小,感覺畫面中各個物體之間的關系。
在文字上方放入的雪花及文字旁邊放入的雪花,最下方的雪花,基本上成為斜直線,如此會形成一種飄落的感覺。上方的雪花顯示出一般,處理時靈活些,與右上方的點呼應。
注意到這幾個點的位置都相當重要,可以形成獨立的垂直三角形。平面設計中也有力的關系,每個物體之間均有影響和推動作用,不要生硬的搭配它們,而是摸索它們之間的作用關系和相互的對比。
幾個點把握好后,再加入一些雪花是畫面更加豐富。注意下部又加了一個點這個點使雪花的飄動減慢了,部分雪花可以近似垂直的飄落下來。左下角的部分多些雪花,這個地方的雪花堆積,起到畫面平衡重心的作用。
加入多少雪花,主要看畫面的左右兩邊是否平衡。
因字體區域大,文字信息也是畫面中最為重要的部分,對比來說,雪花是陪襯,是附帶信息,美化信息。雪花在傳遞信息上就要略微弱一些。雪花面積小,但數量多,重復使它提升了重要性,也加強了左右的對比關系,最重要的是,豐富畫面內容,使畫面完美統一,效果好。
再次強調:均衡與對稱是不同的。對稱是在某一個軸線的兩邊或周圍的形象對應、等同造成的一種美感樣式,如中國古代建筑或人的雙眼、雙耳等,它是最早出現以及對人類美的認識產生影響的形式之一。由于對稱過于單調,才逐漸形成了均衡這一形式美學的概念,它是對比對稱而產生的。是支點兩邊的形狀相異而量感等同的意思,均衡變化多樣,只要使畫面協調就可以了。
二、畫龍點睛,變腐朽為神奇——情人節頁面視覺設計修改
新年過后正好是情人節,把上述的圖形稍做變化來適應情人節的節日氣氛,其實是十分容易的。某位朋友參照Relen上述的設計作品,設計了一下這副作品。這副作品效果不假,它出現了嚴重的概念錯誤。
分析上圖:
1、色彩。情人節是浪漫的象征,而他使用了偏暗的紅色,給人一種非快樂的陰郁感覺,相當不好。
2、文字裝飾。字體選擇是很重要的,若選擇的字體富有了一定的表情情感,如2004中的心型,那么設計就需要考慮這些細節的不同,并加以調整。可這副作品雖然選擇了可愛的字體,其他兩種字體就沒有與之配合,而是孤立的擺放。字體的疏散及缺乏細節,使畫面感覺松散缺乏統一的美感及細致的環節。
3、圖形。圖形的問題最大。表現浪漫的圖形,常用的有心型、氣球、彩棒(開Party用的小飾物)等等都可以使用。而他運用了十分理智的圖形,這種理智的圖形象征的是化學、科學,嚴謹而莊重的事情,沒有快樂、溫馨的感覺。使畫面看起來相當不搭配,十分怪異。
看似簡單的一個小的平面設計,居然會出現這么多問題。為了給了他一個小小的建議,Relen制作了下圖:
花了不到2分鐘,把色彩進行了調整,但只有色彩的變化是不夠的,情人節很容易讓人聯想到禮盒的包裝,僅僅使用表現浪漫的斜線,就完全表達出了溫馨、幸福、快樂的這一概念。
在上面加上文字,即使不做其他裝飾,現在的圖像,意義已經可以表達完整了。還可以稍微對色彩做些改變,如果你習慣淺的色彩,或是更浪漫的紫紅色都可以。注意,不論你選擇怎樣的色彩組合,畫面背景深、斜線色彩淺等方式,圖片最終都要和網頁背景相互搭配和諧。
斜線的用法是平面設計中相當常見的。如淘寶網的女性商品頁面,用到了表示浪漫的粉白斜線,效果不錯。
斜線的交叉、錯位,也會達到較好的效果。如上圖,只需幾分鐘就更改了效果。
關于平面設計的小技巧和形式美學的一些概念,我們會在以后的文章中加以介紹,希望有喜好此類文章的朋友關注天極設計在線及Relen.com。