網頁設計 ? 視覺設計 ? 如何處理元素太多太亂的畫面?

手机版热血传奇客户端下载官网:如何處理元素太多太亂的畫面?

發表于: 視覺設計. 評論
贊助商鏈接

腾讯热血传奇开服表 www.cjwjs.icu 每次說到自己喜歡的設計風格,很多設計師脫口而出的都是極簡風,這種風格元素少、文字少、顏色少,真的是設計中的一股清流。但大部分人在設計工作中接觸到的都是比較豐富的設計,即元素和顏色都相對比較多,由于這類設計更接地氣、更易被廣大消費者接受,所以也更受客戶爸爸的青睞。但豐富型設計也不容易做,最容易出現的問題就是把豐富做成雜亂,而如果設計一旦變得雜亂,就會造成視覺感受上的不適,還會干擾信息的傳達,那么我們要怎么做才能達到豐富但不雜亂的效果呢?蔥爺總結了6個小技巧。

1.各元素之間要有鮮明的對比關系

主要為大小對比、疏密對比、空間對比,如果各元素都差不多大,畫面會缺少變化;如果沒有疏密對比,版面會顯得很分散;如果沒有空間的區別,版面就會缺乏層次、不透氣。以上這些問題都會導致畫面雜亂。

▲刻意放大與縮小某些巧克力,使之形成大小對比。

▲中間重疊交叉的元素與四周零星點綴的小元素形成疏密對比。

▲前面的氣球與后面的氣球形成空間對比。

2.把元素組合成一個整體

避免因元素多而造成雜亂的一個有效做法就是,把所有元素組合成一個整體,當然,不是把這些元素做隨意的堆砌,而是要根據各元素的造型、屬性來進行巧妙的結合,常用的組合方法有三種:

A.把元素拼合成某一特定的形狀。相連元素的輪廓最好有一點互補關系,這樣結合起來更自然。

B.用一個平臺把所有元素整合到一起。這個平臺可以是水平的也可以是垂直的,元素之間最好有互動。

C.用一個元素把其他元素都貫穿起來。這個貫穿整體的元素一般是線型的,比如下圖的絲帶。

3.元素不宜過多

想要達到豐富的效果,很多設計師都會往畫面里加一大堆元素,元素多自然能達到豐富的效果,但元素太多的話處理起來也會十分麻煩,得花很多時間去處理細節,如果把握不好就會造成雜亂的局面。其實,想要豐富的效果不一定需要非常多的元素,除了客戶強調必須要上的元素不能刪減外,一些可有可無的東西要盡量少一點,能渲染出氣氛就好。

例如上圖的元素就非常多,特別是左邊,水果、人物、動物、瓷器、樹木等等什么都有,非常亂,真的需要放這么多元素才能表現產品豐富、利潤多嗎?不一定吧,我們來看看刪減后的效果。

元素減少后,視覺上更統一了,也沒之前那么亂了,但依然有“豐富”的效果是不是。

4.控制顏色數量

如果元素已經非常多了,再加上很多的顏色,那么不亂才怪。比如下圖,產品、場景、裝飾元素都非常多,而且顏色幾乎涵蓋了所有色系,所以產品和文字都淹沒在了裝飾元素里。

其實豐富的效果不一定需要很多的顏色才能體現出來,比如下圖,雖然所有元素只用了一個顏色,但看起來還是很豐富。

當然,上圖是特例,更多時候顏色也要豐富一點,氣氛才會更足,不過通常來說把顏色控制在三到四種就足夠了,然后在這些顏色上做深淺的變化,這么做既能達到豐富的效果,又能在一定程度上避免雜亂。

5.使用簡單的背景

如果畫面中的元素比較多,那就最好使用簡單的背景,即背景的顏色不能太多,背景的處理方式也不能太復雜,變化不能太多,否則的話背景就會與畫面中的元素“打架”,當背景與畫面的主要元素都很突出或者都不突出時,混亂就產生了,比如下圖。

▲該圖的背景細節太多,有宣兵奪主的感覺。

▲上圖的元素很多,而且顏色比較鮮艷,為了突顯這些元素,背景的顏色比元素的顏色要淡一些。

▲上圖的背景雖然顏色比較深,但是效果很簡單,且通過顏色對比的方式把主要元素凸顯了出來,所以不會有雜亂的感覺。

6.采用發散式構圖

有很多設計需要在畫面中體現產品多、獎品多、功能多、營養豐富等需求,這時版面中就避免不了要出現很多元素,而且為了渲染氣氛,通?;夠峒尤胍恍┳笆臥?,所以版面就很容易變得混亂。如下圖:

這時我們可以嘗試使用發散式構圖,讓主要的元素按照一定的規律從中心往四周發散,或者呈扇形發散,當元素的排列有一定的規律時就會變得有序很多。除此之外發散構圖還有視覺沖擊力強、聚焦等優點。

下面我們就來用發散構圖將前面的方案重新調整布局:

第一步:排列元素。由于我們的需求是展示畫面中的顯示屏具有豐富的功能,且版面尺寸為橫版,所以采用中心發散構圖更合適,這個中心即為屏幕的幾何中心。我們就是要圍繞這個中心來排列元素:

在排列元素時需要注意以下兩點:

A.各元素之間要有鮮明大小對比、疏密對比、空間對比(第一個技巧)。

B.元素的排列要平衡但不要完全對稱,因為太過對稱會導致版面很死板。

第二步:創建發散效果。由于畫面中的元素也不是特別多,所以不適合用元素堆出發散的效果,而是要用線或面使各元素與屏幕中心聯系起來。為了體現科技感,鏈接Icon和中心的色塊要有一定的透明度和發光效果。

第三步:增加裝飾元素。因為目前來看豐富的效果還不是很明顯,所以我們可以在上圖基礎上增加一些發散的光線。增加的光線要有長度對比、粗細對比和虛實對比。

到這里,發散效果的處理就完成了,當然,在排版時,圖形部分應該要與左邊的文字保持一些對齊關系,這樣效果會更精致。

調整前后對比效果:

▲調整前

▲調整后

作者:蔥爺(公眾號 ID:congyenanian)

推薦:查看最受歡迎的 301 個設計網站 → //hao.www.cjwjs.icu
交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。