3招輕松搞定電商BANNER排版

2016-09-08    分類: 網(wǎng)站建設(shè)

什么是真正好的排版,我覺得起碼要做到清晰易讀、信息突出并且觀感上舒服好看,在這個(gè)基礎(chǔ)上有突出的設(shè)計(jì)感、形式感,就是正真好的排版。怎么做?3個(gè)部分決定排版的步驟和方法,咱們分步來說。

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

垂直水平構(gòu)圖

排版左中右對(duì)齊方式都有,比較隨意直觀,可靈活操作。

垂直水平構(gòu)圖_3招輕松搞定電商BANNER排版

斜線構(gòu)圖

常用于促銷類、居中排布、大多數(shù)會(huì)有圖形輔助以和底部斜線構(gòu)圖明確區(qū)分并突出文本,或者部分也有跟隨式斜著排版。

三角構(gòu)圖

一般居中排版,文字排布大小分明,結(jié)構(gòu)感強(qiáng),常以圖形線條輔助排版。

對(duì)角線構(gòu)圖

常用于服裝食品等類型、一般左或右對(duì)齊,文字選擇簡單直觀粗細(xì)分明,常有線條或小圖形輔助。

輻射式構(gòu)圖

和斜線構(gòu)圖很像,促銷類、居中排布、大多會(huì)有圖形輔助以和底部斜線構(gòu)圖明確區(qū)分并突出文本。

框架式構(gòu)圖

框架構(gòu)圖包括圖形被框,文本被框或者圖文都被框,文本被框是圖形輔助排版的一種方式,之后詳解。

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

fq2016060122

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

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

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

這是倆反例:

角度

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

字體

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

顏色

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

錯(cuò)落

一般萌系、食品類和扁平化等等的banner上,都需要這類隨意輕快、錯(cuò)落有序的排版。設(shè)計(jì)過程中,適當(dāng)對(duì)字進(jìn)行大小變化和旋轉(zhuǎn),并且選擇一些卡通化、手寫體的字體,會(huì)有不錯(cuò)的效果。還有另一類錯(cuò)落的板式也比較常見,如下圖所示,宋體字、毛筆字排版非常易用。

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

 圖形輔助

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

線條輔助

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

圖文結(jié)合

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

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

網(wǎng)站題目:3招輕松搞定電商BANNER排版
本文網(wǎng)址:http://www.bm7419.com/news/46222.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃自適應(yīng)網(wǎng)站、企業(yè)建站、企業(yè)網(wǎng)站制作手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計(jì)公司