不沉的骨頭：本篇幫你解析Banner中的構(gòu)成元素,，包括版面分割、版面布局,、文案排版,、配色和細(xì)節(jié)表現(xiàn)。每個(gè)方面都有豐富的案例和實(shí)戰(zhàn)操作方法,，特別實(shí)用的電商設(shè)計(jì)好文,，一起來收！

往期電商設(shè)計(jì)好文回顧：

《高效流程,！幫你快速做出優(yōu)秀電商BANNER 的設(shè)計(jì)三部曲》

《超實(shí)用,！5個(gè)幫你快速進(jìn)階的電商BANNER 設(shè)計(jì)技巧（案例多）》

《設(shè)計(jì)基礎(chǔ)功！聊聊平面構(gòu)成中的點(diǎn)線面（超多案例）》

《電商好文,！超多實(shí)戰(zhàn)案例幫你解鎖5種商品擺放姿勢》

案例來源于網(wǎng)絡(luò),。

Banenr 五重奏

1-版面分割

2-版面布局

3-文案排版

4-配色

5-細(xì)節(jié)表現(xiàn)

一、版面分割

什么是版式分割

版式分割是指在有限的版面空間里用圖形或圖片把整個(gè)版面分割為2個(gè)或者多個(gè)部分（列如上下或左右）并分別在左或右配置人物或標(biāo)題等,，把構(gòu)思與計(jì)劃以視覺形式表達(dá)出來,，這樣會(huì)讓你的設(shè)計(jì)更有創(chuàng)造性,。

在設(shè)計(jì)中的作用

將呆板單獨(dú)的一個(gè)版面分割為多個(gè)版面，在視覺上面有了一定的引導(dǎo)性,，同時(shí)通過各個(gè)版面的面積大小也可以明確當(dāng)前設(shè)計(jì)的主次,，更具有對(duì)比性，并且使得畫面感性而有活力,。

平時(shí)看到或用到哪些版面分割形式

以下幾種類型的分割都是由一個(gè)形狀通過面積和位置的變化使分割版面的,。

分割形式都是由直線構(gòu)成、它讓設(shè)計(jì)嚴(yán)肅,、理性起來,，但有時(shí)也顯得呆板生硬。

不知道大家有沒有注意2015年京東的雙11設(shè)計(jì)就是直線分割形式,，讓人非常的理性,。

下面都是傾斜的分割，傾斜的角度和位置變化都會(huì)給視覺不同的感受：

傾斜分割讓版面更具速度和動(dòng)感 在運(yùn)動(dòng)/促銷/游戲設(shè)計(jì)中常使用,，傾斜的方向不同也會(huì)給人有下滑或上升的感受,。

由三角形的面積、位置,、數(shù)量的變化分割成不同版面：

三角形是一個(gè)具有穩(wěn)定性的形狀,，同時(shí)也具有一定的視覺引導(dǎo)。通常會(huì)給人時(shí)尚的,、尖銳的,、暴力刺激等感受

由圓形來分割版面，圓形使版面Q版,、歡樂：

不同于尖銳三角形的圓形它外形光滑飽滿會(huì)讓人感覺可愛,、靈動(dòng)，讓畫面更有親和力,。通常在母嬰,、歡樂這種主題較為常見。

分割在設(shè)計(jì)中的應(yīng)用

通過對(duì)版面的分割并且采用了傾斜性的分割形式,，然版面立刻活躍起來,、更加有節(jié)奏感。另外通過2快幾乎相等的面積的對(duì)比色配色更大的加大了畫面對(duì)視覺的沖擊,。

上面的設(shè)計(jì)通過圓的外形來分割頁面,，文案和畫面信息我們能知道這是有關(guān)于寶寶的促銷設(shè)計(jì)。圓的外形更容易給人親和力,，使人更容易接納,。它的細(xì)節(jié)更在于在于圓本身的細(xì)節(jié)把圓形更生動(dòng)和具有層次感，而不單單只是一個(gè)簡單的形狀,。

不規(guī)則的形狀分割版面比單純的幾何形狀分割更有創(chuàng)造力,，它營造的氛圍十足,。所以大家常常會(huì)看到優(yōu)秀的設(shè)計(jì)中會(huì)出現(xiàn)書本、盒子等,。

如果沒有了版面分割

通過對(duì)圖片版面分割的還原,，我們不難發(fā)現(xiàn)沒有版面分割的圖片失去了對(duì)比、節(jié)奏感,、氛圍這些方面的視覺感受,。即使它在標(biāo)題排版上很優(yōu)秀，但版面分割能讓它表達(dá)的更好,。

采用三角形的分割形式讓版面更具有刺激和對(duì)立的感覺，在失去了版面分割之后變成了普通的一個(gè)設(shè)計(jì),，所以這就是版面分割帶來的作用和價(jià)值,。

具象的版面分割

案例中的盤子、黑板讓版面產(chǎn)生了分割,，只是不像幾何那樣更加純粹的分割版面,。但是我們也不能忽視它在設(shè)計(jì)種分割版面的作用。即使設(shè)計(jì)師但是沒有這個(gè)考慮,，我們也要記住每個(gè)元素在畫面中都會(huì)有它的作用,。而不單單只是表面上面的盤子、黑板,。

直線分割案列：

傾斜分割：

三角分割：

圓形分割：

版面分割回顧總結(jié)

1-版面分割使設(shè)計(jì)有層次,、活躍、節(jié)奏感

2-版面分割不單單只是幾何形式

3-具象的物體分割版面會(huì)更具有趣味性和創(chuàng)造力

優(yōu)秀的設(shè)計(jì)案例還有很多這個(gè)需要大家平時(shí)的采集和觀察,，更多的思考你會(huì)發(fā)現(xiàn)更多的空間

下面我們來看下日常設(shè)計(jì)中的版面布局

二,、版面布局

什么是版面布局 ？

將你確定需要放置的文案,、人物,、產(chǎn)品安排到版面上的某一塊區(qū)域。另外可視化信息元素在版面布局上調(diào)整位置,、大小,，使版面達(dá)到美觀的視覺效果。在布局過程中,，我們可以遵循的常見原則,，正常平衡—亦稱”勻稱”，多指左右,、上下對(duì)照形式,。

注意，這里我們必須遵循突出重點(diǎn),、平衡諧調(diào)的原則

布局我們需要注意哪些事情,？

歸納——將內(nèi)容分成幾個(gè)區(qū)域,，相關(guān)內(nèi)容都聚在一個(gè)區(qū)域中。之后就按照你布局去尋找符合版面布局的方向,、空間,，比如人物的姿勢、產(chǎn)品的的角度,。

留白——不要把Banenr 排得密密麻麻,，留出一定的空間。減少壓迫感,，畢竟Banenr 圖片本身就不大,。

平時(shí)看到或用到哪些版面布局方式：

設(shè)計(jì)萬千，變化的只是它的色調(diào),、品質(zhì),、紋理、細(xì)節(jié),、角度等,。

左右結(jié)構(gòu)的布局，文字在左或右,。它是在Banenr 版面布局中經(jīng)常出現(xiàn)的,，其主要的特點(diǎn)是視覺上面比較清晰容易分辨、清爽直白,。

左中右的版面布局相比左右布局來說是豐富了許多,、層次感也從2到3，不過左右是文字還是人物和產(chǎn)品要注意的是一定要保證信息的可正常閱讀,，不要影響信息的傳達(dá),。

上下結(jié)構(gòu)從案例中大家能看的出來，模特不怎么符合這種版面布局,。相對(duì)于商品而言就顯的合適多了,。上下布局通常也是比較少見，因?yàn)楸容^難掌控,。

中心布局視乎在今年比較流行,，可能是因?yàn)樗容^容易出效果，也比較容易才受到很多設(shè)計(jì)師的喜愛,。與其它版面布局不同,，它以中心開始布局向外擴(kuò)張。而且大多數(shù)這類布局的中心是模特,?？赡軙?huì)跟左中右布局混淆，左中右是3個(gè)區(qū)域都是各自對(duì)應(yīng)的內(nèi)容，而中心布局則都是以版面中心點(diǎn)居中布局,。

日常版面布局

我們可以看出案例采用了左中右的版面布局,，而且模特的大小對(duì)比很大，人物的局部放大沖擊力也很大,。這樣更容易創(chuàng)造出空間感,，而且人物、文字,、背景分割之間都有一個(gè)前后的關(guān)系哦,。

大家第一眼容易認(rèn)為這是左中右布局，其實(shí)它跟左中右的布局還是有很大差別的,。它的大標(biāo)題都是中間加模特或者產(chǎn)品,，有點(diǎn)像一些logo中圖片當(dāng)字母的手法。會(huì)比單獨(dú)使用文字的效果更好些,。

案例欣賞-左右布局：

案例欣賞-左中右布局：

案例欣賞-上下布局：

案例欣賞-中心布局：

版面布局回顧總結(jié)

1-常見布局有 左右,、左中有、上下和中心

2-不同的布局不用的需求,，大家多嘗試不是件壞事

3-版面的布局的有不同,，合適才是最好的

下面我們來看下日常設(shè)計(jì)中的文案排版

三,、文案排版

文案排版要遵循的規(guī)律

我們視覺閱讀的習(xí)慣是從上至下,、從左至右的順序，除了根據(jù)特別板式需要的傾斜,、透視等排版方式,。大部分情況下還是使用左對(duì)齊、居中,、對(duì)齊排版方式,。不管什么排版方式，只要適合你版面走向的就可以嘗試,。

常見問題

很多設(shè)計(jì)師習(xí)慣是邊加內(nèi)容嘗試找到合適的排版,，這樣很容易導(dǎo)致一個(gè)問題，就是我們需要用大量的時(shí)間來調(diào)試各種各樣的排版方式,。這點(diǎn)大家應(yīng)該深有體會(huì),，我們的時(shí)間很多時(shí)候都花在元素位置的擺放、大小調(diào)整,、顏色調(diào)配上了,。

我經(jīng)常是根據(jù)先前思考的版式分割和版面布局來決定排版方式的。

平時(shí)看到或用到標(biāo)題排版方式

以下幾種常見的標(biāo)題文案排版方式：

排版在Banenr 的應(yīng)用

通過畫的線來看,，案例用到了右對(duì)齊排版,，使得畫面左邊的視覺整齊一致，由于畫面右邊的內(nèi)容隨意性,，所以在文案的大小和長短根據(jù)右邊視覺配合圖像走勢,，充分的融入版面設(shè)計(jì)中去,。

為了讓大家看的更清楚，我把排版還原到未傾斜時(shí),。我們可以容易的看成它是居中排版,，所以不管是向左上角傾斜還是右上角都是為了讓設(shè)計(jì)更有創(chuàng)造力，但排版的本質(zhì)不變,。

傾斜角度不要超過45°,，否則影響視覺效果。

自由型的排版方式會(huì)更容易有效果和趣味性,，不走平凡路,。但是會(huì)容易制造出“空”。大家看那幾個(gè)黃色圓,，用來填補(bǔ)制作出來的“空”,。所以每一種方式都不是完美的，需要我們設(shè)計(jì)師去完善它,。

案例欣賞-左對(duì)齊

案例欣賞-右對(duì)齊

案例欣賞-居中對(duì)齊

案例欣賞-自由型

文案回顧總結(jié)

1-排版方式要符合畫面的走向

2-文字傾斜角度不要超過45°,，否則影響視覺效果

3-排版方式要充分的融入畫面中去

下面我們來看下日常設(shè)計(jì)中的配色。

四,、配色

在這里只是大概的說下我平時(shí)的配色方法和案例解析,，大家真的想要學(xué)好色彩搭配，建議大家去買本色彩相關(guān)的書看,。會(huì)更加的詳細(xì),，有些東西不是幾個(gè)案例幾句話就能明白的，更重要的是大家平時(shí)工作的嘗試,。

我常用配色工具：

工具路徑：ps——窗口——擴(kuò)展功能——kuler

ps自帶的配色工具,，有時(shí)候?qū)嵲谙氩怀鲈趺从檬裁瓷钆淞硗庖粋€(gè)顏色的時(shí)候，可以試試,。

當(dāng)然工具是我糾結(jié)和搭配不好另外一個(gè)顏色的時(shí)候用的,，效果還不錯(cuò)哦。主要還是參考優(yōu)秀的作品配色

常見配色技巧

常用配色技巧——對(duì)比

對(duì)比色

在12色相環(huán)上面,，一種色相與其補(bǔ)色左邊或右邊的色相構(gòu)成對(duì)比色關(guān)系,。如黃色與藍(lán)色和紅色，這樣的配色比補(bǔ)色搭配的排斥感要弱一些,，顯得較為和諧,。

其它的色系分類就不細(xì)說了，還是建議大家通過書籍了解會(huì)更加詳細(xì),。

看看對(duì)比色案例：

我的對(duì)比色案例解析：

1. 分割版面,，左邊的設(shè)定藍(lán)色以及相關(guān)素材

2. 加入對(duì)比色紅色以及相關(guān)素材，記得要有顏色不同明度和純度的層次哦

3. 加入文案和人物，也同為對(duì)比色素材

4.加上頭部頂光提高亮度和相關(guān)點(diǎn)綴,，左邊的是藍(lán)色右邊色紅色

配色回顧總結(jié)

1-色調(diào)有明度和純度的變化更有層次

2-多觀察和采用優(yōu)秀的設(shè)計(jì)上面的配色

3-大師不是一日練就,，要不斷學(xué)習(xí)

下面我們來看下日常設(shè)計(jì)中的細(xì)節(jié)

五、細(xì)節(jié)表現(xiàn)

我們?nèi)粘Ｔ跒g覽頁面時(shí),，經(jīng)常會(huì)為一些優(yōu)秀作品的細(xì)節(jié)所驚嘆,。這些細(xì)節(jié)表現(xiàn)有的看似非常不起眼，但是設(shè)計(jì)作品之間的差距,，有時(shí)往往就是這些不起眼的細(xì)節(jié)決定的,。

“細(xì)節(jié)決定成敗”這句名言所有人都聽過不論是任何行業(yè)，設(shè)計(jì)工作當(dāng)中更是不變的真理,，需求方的眼睛和感覺總是非常敏銳的,，一個(gè)頁面沒有得到需求方的認(rèn)可，但他們又說不出什么理由,，這個(gè)時(shí)候就是細(xì)節(jié)問題了,。

那么什么是細(xì)節(jié)呢？

我們平時(shí)口中或者他人口中念叨的細(xì)節(jié)：

細(xì)節(jié)表現(xiàn)01-字的領(lǐng)域

在前面我們已經(jīng)講過了文案的對(duì)齊方式,，所以在設(shè)計(jì)當(dāng)中我們一定要嚴(yán)謹(jǐn),。通過看藍(lán)色條文案另外一行與一行的間距要把握的得當(dāng)，它們的間距是幾乎相等的,。要留有呼吸的節(jié)奏,。這就是我們細(xì)節(jié)的表現(xiàn)。

標(biāo)題的顏色與文字統(tǒng)陰影

1.標(biāo)題黃色與背景粉紅色是明顯的一個(gè)對(duì)比色的搭配,，只是顏色的純度稍弱一些,。所以在工作中標(biāo)題顏色的搭配我們不妨嘗試用主色調(diào)的對(duì)比色,、互補(bǔ)色,、近似色調(diào)配試試。

2.陰影讓文字更加的立體有層次感了,，處理文字在頁面設(shè)計(jì)的時(shí)候任何元素都是需要加陰影讓它們更加的生動(dòng)又生命力,，即使在小的元素。

細(xì)節(jié)表現(xiàn)02-層次

頁面設(shè)計(jì)需要有層次感,，如果設(shè)計(jì)中缺乏層次感的時(shí)候就會(huì)顯的單調(diào)或無力,。層次感有很多，例如模特一大一小,、遠(yuǎn)景近景,、色彩的層次等。

中心正面的人物與背面的人物形成了鮮明的層次對(duì)比關(guān)系,，另外飄絮這些也有大有小拉開了層次關(guān)系,。

模糊的東西總會(huì)給人一種很遠(yuǎn)的感覺，所以案例的背景稍作模糊處理，與標(biāo)題人物都拉開了很大的層次,。

不管是在圖形上面的層次和顏色上面的層次都做的很好,。紅色和藍(lán)色是決定的對(duì)比色所以層次明顯。

另外要說的就是顏色的冷暖對(duì)比,，藍(lán)色冷而紅色暖,，所以顏色對(duì)比非常好。

細(xì)節(jié)表現(xiàn)03-質(zhì)感

有時(shí)候我們會(huì)形容一個(gè)優(yōu)秀的設(shè)計(jì)它很有質(zhì)感,，大家有沒有想過這些質(zhì)感是表現(xiàn)在哪里,？質(zhì)感難道就只是說是雜色么？

通過上面的4個(gè)案例來看,，無論是文字上面的木紋,、像素格疊加還是背景上面圖案疊加它們都是質(zhì)感細(xì)節(jié)的一種表現(xiàn)手法。如果去掉了這些紋理,、圖案,，那它不就只是一個(gè)純色了么那還談什么質(zhì)感呢。頂多是一個(gè)漸變,。

細(xì)節(jié)表現(xiàn)04-光影

光影可能很多人都掌握的不熟練,，有光的地方就有影。有逆光,、環(huán)境光這些都讓我們的設(shè)計(jì)更加的自然和真實(shí),。正確的理解和使用光影就很重要了。

熟練的運(yùn)用光影會(huì)對(duì)我們的頁面才更高的效果提升,。

注意的是光影的顏色一定要與頁面的顏色來選取不然就會(huì)很花哨,。

細(xì)節(jié)表現(xiàn)05-留白

關(guān)于留白大家都很清楚，做設(shè)計(jì)千萬不要把頁面上面都填的滿滿的否則會(huì)一點(diǎn)呼吸空間都沒有,。

你可以把用元素的大小對(duì)比來豐富空間,，但是絕不是越多越好。

全部回顧總結(jié)

1-什么樣的版面分割來搭配什么樣的畫面布局和排版都需要,，大家多在工作中碰撞和嘗試,，世上沒有一個(gè)絕對(duì)做設(shè)計(jì)的公式和流程。

2-不管是什么文章和教程都只是溫習(xí)或提示你,，真正的學(xué)習(xí)是通過書籍和自身的經(jīng)歷來提高自己,。

3-內(nèi)容我們一時(shí)無法消化和運(yùn)用，但是可以多嘗試,。我也在不斷的嘗試著,、思考著如何有突破，不管是在版面,、排版,、細(xì)節(jié)等方面,。謝謝大家！

歡迎關(guān)注我的個(gè)人公眾號(hào)“三根設(shè)計(jì)骨”

「超實(shí)用的UI設(shè)計(jì)自學(xué)指南」

UI配色：《幫你從零開始全面掌握UI設(shè)計(jì)的配色方法》

UI版式：《一份詳盡全面的UI設(shè)計(jì)字體與排版指南》

自學(xué)姿勢：《別著急學(xué)軟件,！先掌握科學(xué)有效的UI設(shè)計(jì)自學(xué)姿勢（超全面）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：[email protected]】

================關(guān)于優(yōu)設(shè)網(wǎng)================

“優(yōu)設(shè)網(wǎng)uisdc.com“是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái),，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程,。

【特色推薦】

設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/,。

設(shè)計(jì)微博：擁有粉絲量160萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì)，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源,、下載頂尖設(shè)計(jì)素材,。

設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com