電商banner圖設(shè)計(jì)方法和技巧【ui設(shè)計(jì)面試寶典】

引言

什么是真正好的排版，我覺(jué)得起碼要做到清晰易讀、信息突出并且觀感上舒服好看在這個(gè)基礎(chǔ)上有突出的設(shè)計(jì)感、形式感，就是正真好的排版怎么做?電商banner圖該如何設(shè)計(jì)？

空間變化形式

3個(gè)部分決定排版的步驟和方法，咱們分步來(lái)說(shuō)

第1招-空間

空間是文字之間、圖文之間的排列關(guān)系，是排版的第一步和基礎(chǔ)一張圖的空間關(guān)系即構(gòu)圖自一開(kāi)始就影響到整體的走向和最終的成型，所以在設(shè)計(jì)之初，一定得經(jīng)過(guò)深思熟慮，深入了解文字的多少、圖形的類型和設(shè)計(jì)要求和感覺(jué)選擇對(duì)應(yīng)的構(gòu)圖和圖文結(jié)構(gòu)關(guān)系。溝通大致包括但不限于以下幾類：

上面說(shuō)的沒(méi)有必要刻意記住，大體思路理解即可有個(gè)最簡(jiǎn)單的方法：在作圖之初有一個(gè)簡(jiǎn)單的草圖，標(biāo)明文字、圖形大體的位置關(guān)系形成初步的構(gòu)圖感覺(jué)和排版感覺(jué)，不至于做不下去后推倒重來(lái)影響時(shí)間。

第2招變化

我們可以通過(guò)變化對(duì)齊方式、大小、粗細(xì)、角度、字體、顏色、錯(cuò)落方式等來(lái)說(shuō)明各種排版變化方式帶來(lái)的不同結(jié)果和感覺(jué)。

導(dǎo)入測(cè)試題：

文案：

潮品新貨煥新大賞

女裝夏季8折嗨促

僅4天5.26-5.29

尺寸要求：700x330px

圖片：

對(duì)齊、大小、粗細(xì)對(duì)比是排版最基本的三大要素，是之后所有排版方式的基礎(chǔ)

①起碼有一邊對(duì)齊，才會(huì)使版式整潔易讀，層次清晰

②大小和粗細(xì)的對(duì)比做到了主次分明。BANNER設(shè)計(jì)的目的，其實(shí)就是最大化的呈現(xiàn)給用戶活動(dòng)的信息，要讓最重要的，最有利的信息一瞬間就傳遞給他們，通過(guò)對(duì)比即可使信息的傳遞層次清晰。

角度不限于示例這種。對(duì)排版進(jìn)行角度變化，會(huì)增加失衡和速度感。是促銷類的BANNER常用的方式往往對(duì)應(yīng)斜構(gòu)圖的背景，增加整體氣氛。也有增加透視類的角度變化。

第一個(gè)：清秀的方正書意宋，第二了：霸氣的蒙納超剛黑(只為示意請(qǐng)勿轉(zhuǎn)載用于商用)，稍微變換板式，出來(lái)了兩種不同的感覺(jué)，雖然都是買買買，但是第一個(gè)明顯是清新委婉的，第二種擺明了就是要放折扣大招的樣子。字體對(duì)排版的重要性不言而喻。

還是上面的示意，顏色的變化一是根據(jù)整個(gè)設(shè)計(jì)選擇顏色，二是類似上圖對(duì)需要突出的信息進(jìn)行顏色的突出，是最常用易用的方式。

一般萌系、食品類和扁平化等等的BANNER上，都需要這類隨意輕快、錯(cuò)落有序的排版。設(shè)計(jì)過(guò)程中，適當(dāng)對(duì)字進(jìn)行大小變化和旋轉(zhuǎn)，并且選擇一些卡通化、手寫體的字體，會(huì)有不錯(cuò)的效果。

還有另一類錯(cuò)落的板式也比較常見(jiàn)，如下圖所示，宋體字、毛筆字排版非常易用。

第3招-形式

形式簡(jiǎn)單可理解為對(duì)排版的輔助，他們不搶眼，但是加入后又能使版式不單板，善用可以使整個(gè)排版高大上，也能使邏輯結(jié)構(gòu)更加清晰。

圖形輔助一般用基礎(chǔ)的方圓三角等或者有特殊含義的圖形(天貓、阿里旺旺剪影)為依托進(jìn)行文字排版，可起到突出文本、增強(qiáng)對(duì)比、增加結(jié)構(gòu)感設(shè)計(jì)感的作用。

以線條分割進(jìn)行區(qū)塊劃分增加對(duì)比，也可用線條和圖形進(jìn)行串聯(lián)，亦或聚焦視線，簡(jiǎn)潔有力，近期大量用于時(shí)尚簡(jiǎn)潔類的設(shè)計(jì)中。

用圖形結(jié)合文字和視覺(jué)，達(dá)到整體統(tǒng)一。

總結(jié)：

排版的重要性不言而喻，通過(guò)上面的3大步介紹，應(yīng)該能對(duì)電商BANNER的排版有個(gè)初步直觀的認(rèn)識(shí)，相信通過(guò)學(xué)習(xí)和大量練習(xí)，每個(gè)人都能掌握其中的奧妙。方法遠(yuǎn)不止此，而創(chuàng)意應(yīng)更遠(yuǎn)。

猜你喜歡：

UI設(shè)計(jì)是什么?UI設(shè)計(jì)師有哪些職能?

色彩心理學(xué)：常見(jiàn)色彩的象征意義

色彩構(gòu)成概述

賽博朋克照片處理技法

傳智教育全鏈路UI/UE設(shè)計(jì)課程