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

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

1. 《高效流程！幫你快速做出優(yōu)秀電商BANNER 的設(shè)計三部曲》
2. 《超實用！5個幫你快速進階的電商BANNER 設(shè)計技巧（案例多）》
3. 《設(shè)計基礎(chǔ)功！聊聊平面構(gòu)成中的點線面（超多案例）》
4. 《電商好文！超多實戰(zhàn)案例幫你解鎖5種商品擺放姿勢》

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

Banenr 五重奏

1-版面分割
2-版面布局
3-文案排版
4-配色
5-細節(jié)表現(xiàn)

一、版面分割

什么是版式分割

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

在設(shè)計中的作用

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

平時看到或用到哪些版面分割形式

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

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

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

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

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

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

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

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

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

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

 

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

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

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

如果沒有了版面分割

 

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

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

具象的版面分割

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

直線分割案列：

傾斜分割：

三角分割：

圓形分割：

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

1-版面分割使設(shè)計有層次、活躍、節(jié)奏感
2-版面分割不單單只是幾何形式
3-具象的物體分割版面會更具有趣味性和創(chuàng)造力

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

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

二、版面布局

什么是版面布局 ？

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

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

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

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

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

平時看到或用到哪些版面布局方式：

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

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

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

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

中心布局視乎在今年比較流行，可能是因為它比較容易出效果，也比較容易才受到很多設(shè)計師的喜愛。與其它版面布局不同，它以中心開始布局向外擴張。而且大多數(shù)這類布局的中心是模特?？赡軙笾杏也季只煜?，左中右是3個區(qū)域都是各自對應(yīng)的內(nèi)容，而中心布局則都是以版面中心點居中布局。

日常版面布局

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

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

案例欣賞-左右布局：

 

案例欣賞-左中右布局：

案例欣賞-上下布局：

案例欣賞-中心布局：

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

1-常見布局有 左右、左中有、上下和中心
2-不同的布局不用的需求，大家多嘗試不是件壞事
3-版面的布局的有不同，合適才是最好的

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

三、文案排版

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

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

常見問題

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

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

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

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

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

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

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

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

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

案例欣賞-左對齊

案例欣賞-右對齊

案例欣賞-居中對齊

案例欣賞-自由型

文案回顧總結(jié)

1-排版方式要符合畫面的走向
2-文字傾斜角度不要超過45°，否則影響視覺效果
3-排版方式要充分的融入畫面中去

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

四、配色

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

我常用配色工具：

工具路徑：ps——窗口——擴展功能——kuler

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

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

常見配色技巧

常用配色技巧——對比

對比色

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

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

看看對比色案例：

我的對比色案例解析：

 

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

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

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

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

配色回顧總結(jié)

1-色調(diào)有明度和純度的變化更有層次
2-多觀察和采用優(yōu)秀的設(shè)計上面的配色
3-大師不是一日練就，要不斷學(xué)習(xí)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

不管是在圖形上面的層次和顏色上面的層次都做的很好。紅色和藍色是決定的對比色所以層次明顯。

另外要說的就是顏色的冷暖對比，藍色冷而紅色暖，所以顏色對比非常好。

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

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

 

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

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

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

 

熟練的運用光影會對我們的頁面才更高的效果提升。

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

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

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

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

全部回顧總結(jié)

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

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

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

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

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

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

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

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量160萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com