您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 視覺設(shè)計 >> 瀏覽設(shè)計教程

怎么設(shè)計趣味性的登陸頁面

阿里巴巴登錄頁面左側(cè)一直都會有個banner,這個圖片因為位置、環(huán)境的特殊性,跟我們平常做的首頁banner的設(shè)計思路會有所不同。首頁banner更注重的是信息傳達,登錄左側(cè)的這個banner偏重情感化設(shè)計,情感化設(shè)計除了節(jié)日、事件的氛圍之后,還有就是趣味性。

趣味設(shè)計是一個比較大的概念,在這里我狹隘的把趣味設(shè)計分成兩個部分來介紹,1.主體元素的創(chuàng)意;2.背景元素的處理。每次在做這個banner的時候,都非常的糾結(jié),當(dāng)然最糾結(jié)的地方就是創(chuàng)意,雖然創(chuàng)意是給非常主觀的東西,但是我們還是可以通過對一些元素處理找到創(chuàng)意點。

A.線描——來自現(xiàn)實場景,超越現(xiàn)實場景的表現(xiàn)力

線描的方式是我比較常用的形式,這種形式相對簡單,很容易上手,效果也比較有張力。先找一個相對合適的場景,對著現(xiàn)實的場景勾出想要的線條,再對線條進行粗細、顏色的調(diào)整。舉個例子如下:

1.如果我們需要一個倉庫的線描場景,我們先找到一個滿足我們需求的倉庫場景,對場景進行線描繪制。

線描場景

 

2.畫出線描后根據(jù)背景色的主色調(diào)對線條進行粗細及顏色調(diào)整。然后再添加一些實物做一下對比。

線描場景

3.同樣的方法,繪制其他與之相關(guān)的元素,組合到一起,最終效果如下:

線描成功稿

B.夸張——原本是1,表現(xiàn)為3,讓1+1>2

夸張的手法我們見的非常多,以現(xiàn)實實物為藍本,用夸張的手法來表現(xiàn)實物,使之更具表現(xiàn)力。以此來吸引用戶的目光。下面例子為冬季采購的banner設(shè)計。

1.跟線描一樣,找一個類似我們可以用的場景圖片,用卡通的形式繪制貨車,對局部細節(jié)進行適當(dāng)?shù)目鋸?,貼近自己想要的感覺。

夸張1

2.有了這個基本元素之后,把貨車的層高加至3層,夸張我們平常印象中的貨車,增加貨車表現(xiàn)力。

夸張手法2

3.一層的貨車被夸張繪制成三層之后,增加了貨車的表現(xiàn)力,同時增加了貨車的趣味性。后面只需要添加一些輔助性的元素,加強主題所需的氛圍即可,最終效果如下。

夸張效果圖

C.重構(gòu)——對現(xiàn)實的實物進行重組,再設(shè)計

重構(gòu)在工業(yè)設(shè)計中用的比較多,這種設(shè)計方法尤其能體現(xiàn)趣味性,本來不相干的幾個事物,通過重構(gòu)再設(shè)計,組合在一起的時候,會給人眼前一亮的感覺。

1.燈泡和建筑都是我們生活中比較常見的事物,二者組合到一起的畫面不是很常見,當(dāng)我們想到這兩個元素的時候,通過重構(gòu)、正負形等設(shè)計手法,讓他們聯(lián)系到一起。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/ui1288.html
淺談banner設(shè)計
視覺設(shè)計所傳達的四種信息
圖趣網(wǎng)微信
建議反饋
×