2017-4-4 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
寫在前面
我以前就反復(fù)提到過，一個(gè)最常規(guī)的最完整的Banner，一般有這五個(gè)組成部分：文案／模特商品／背景／點(diǎn)綴元素／LOGO，我給大家簡(jiǎn)單做了一個(gè)示例：
這5個(gè)部分里的文案／模特商品／背景／logo我都有專門寫過對(duì)應(yīng)的文章，唯獨(dú)點(diǎn)綴元素我還沒有講過，所以今天我要給大家講的是點(diǎn)綴元素的在Banner設(shè)計(jì)里的運(yùn)用和玩法，它也是大家經(jīng)常需要用卻又經(jīng)常忽略了或用不好的一個(gè)知識(shí)點(diǎn)。
為了便于大家理解，我將把這次的內(nèi)容拆分為以下6個(gè)方面為大家講解：
一、點(diǎn)綴元素所起到的作用
二、點(diǎn)綴元素的存在形式
三、不用定位氣質(zhì)banne中點(diǎn)綴元素的用法
四、點(diǎn)綴元素的排版形式
五、點(diǎn)綴元素的獲取方法
六、點(diǎn)綴元素的色彩運(yùn)用注意事項(xiàng)
以下是正文部分咯：
一、點(diǎn)綴元素所起到的作用
我們先來(lái)看幾張案例，大家對(duì)比一下就知道了：
前后對(duì)比圖，看出來(lái)差異了嘛？所以點(diǎn)綴元素主要就有這么些作用：
1、從視覺上來(lái)說，是為了豐富畫面，使畫面不再單調(diào)或看起來(lái)更加協(xié)調(diào)。
2、從營(yíng)銷的角度來(lái)說，是為了增加畫面的熱鬧活躍氛圍，給人愉悅或刺激感，增加消費(fèi)者的購(gòu)買欲望。
二、點(diǎn)綴元素的存在形式
一般來(lái)說，點(diǎn)綴元素的存在形式其實(shí)是多種多樣的，比如光束／光斑／水花等等各種大自然的事物還有各種形式的圖案都可以作為點(diǎn)綴元素出現(xiàn)，而世間所有的物體其實(shí)都可以想象成是點(diǎn)／線／面，簡(jiǎn)而言之，所有的點(diǎn)綴元素的運(yùn)用都可以視作平面構(gòu)成里的點(diǎn)或線或面的運(yùn)用。
下面我給大家舉例說明一下點(diǎn)綴元素的存在形式：
（1）商品本身既是主體也是點(diǎn)綴元素
（2）手繪圖形作為點(diǎn)綴元素
（3）光斑作為點(diǎn)綴元素
（4）色塊作為點(diǎn)綴元素
（5）各種液體粉末等作為點(diǎn)綴元素（噴濺的墨／奶／水／啤酒等等）
（6）煙霧作為點(diǎn)綴元素（圖片來(lái)自站酷設(shè)計(jì)師灰晝）
（7）各種紋理圖案作為點(diǎn)綴元素
（8）人作為點(diǎn)綴元素（攝影里常用到，路人甲乙丙丁作為主角的陪襯）
（9）logo或文字作為點(diǎn)綴元素
三、不同定位氣質(zhì)banne中點(diǎn)綴元素的用法
我一直堅(jiān)持的理念就是，既然人與人之間是有差異的，那么跟人相關(guān)的各種營(yíng)銷活動(dòng)和設(shè)計(jì)形式也便同樣的會(huì)存在差異，所以我將點(diǎn)綴元素的用法也按照不同的定位氣質(zhì)來(lái)區(qū)分。
一般來(lái)說，點(diǎn)綴元素?cái)?shù)量越多／形式越多樣／越動(dòng)感／色彩越多／明度越高／純度越高／飽和度越高／越不規(guī)則，則畫面越活潑熱鬧，反之越高冷大牌。
以下我們來(lái)看一些示例：
高冷性冷淡到極點(diǎn)的時(shí)候，往往畫面多留白（留白是指畫面很空曠很干凈，不是指畫面就必須是白色的），你可以理解為點(diǎn)綴元素?cái)?shù)量為0:
假如在一幅高質(zhì)感多留白的banner里稍微加入一些相關(guān)的點(diǎn)綴元素（這里的花瓣）后，畫面會(huì)變得稍微靈動(dòng)一點(diǎn)，但因?yàn)槟Ｌ馗叨藘?yōu)雅畫面清晰干凈的緣故，這個(gè)Banner依然會(huì)感覺很高端：
小清新卡哇伊類型的banner，一般會(huì)選擇相同氣質(zhì)的模特，點(diǎn)綴元素自然而然也會(huì)往這個(gè)氣質(zhì)走，而簡(jiǎn)筆畫手繪圖形類的點(diǎn)綴元素就非常符合這個(gè)氣質(zhì)啦。
像這種就是帶一點(diǎn)派對(duì)性質(zhì)的banner，而派對(duì)就是要有慶祝的感覺，所以點(diǎn)綴元素可以從派對(duì)相關(guān)的物件去聯(lián)想，比如說彩帶啊／金粉啊／萬(wàn)花筒啊之類的等等。
而這種走熱鬧低價(jià)促銷風(fēng)格的banner，畫面就是要給人感覺非常鬧非常刺激眼球的感覺，所以她的點(diǎn)綴元素往往是多彩的／動(dòng)感的／不規(guī)則的，就像一群喋喋不休的推銷員一樣吆喝著：來(lái)看看咯來(lái)瞧一瞧咯！～你買了不會(huì)吃虧你買了不會(huì)上當(dāng)！～
借用我以前寫的一段話：假想以上同樣是賣女裝的話，不同類型定位的banner傳達(dá)給人的感受也是不一樣的，有的特別冷淡，有的特別熱情，而點(diǎn)綴元素就像是在一旁給畫面里的主體添油加醋用的，如果主體是花，那么點(diǎn)綴元素就是綠葉，至于畫面里有沒有“油鹽醬醋茶”以及“綠葉”都是可以的，主要看你的banner設(shè)計(jì)是什么樣一個(gè)定位方向。
四、點(diǎn)綴元素的排版形式
那么看到這里，道理大家應(yīng)該差不多都懂了吧，那么大家最頭疼的問題來(lái)了，點(diǎn)綴元素該以怎么樣一種姿態(tài)出現(xiàn)，又該怎么排版呢？別急，我下面給大家總結(jié)出了一些方向，大家可以參考下：
看完上圖是不是一目了然了？其實(shí)點(diǎn)綴元素的排列運(yùn)用無(wú)非也是平面構(gòu)成的運(yùn)用啦，以上我只是總結(jié)了一小部分，其他的我們以后再說。
五、點(diǎn)綴元素的獲取方法
以上講了這么多點(diǎn)綴元素的玩法運(yùn)用，那么點(diǎn)綴元素是憑空捏造出來(lái)的嗎？當(dāng)然不是，我這里總結(jié)了2個(gè)非常好用的獲取點(diǎn)綴元素的方法可以分享給大家：
（1）元素提取法
舉例：模特本身頭頂戴的花環(huán)，與背景那些花花點(diǎn)綴是相互呼應(yīng)的，在一個(gè)和服的顏色跟背景那些花花的顏色也相互呼應(yīng)。
舉例：產(chǎn)品本身事編織棉麻制品，所以可以提取這些跟產(chǎn)品的材質(zhì)相關(guān)的元素作為點(diǎn)綴元素運(yùn)用在畫面。
（2）聯(lián)想發(fā)散法（從標(biāo)題／意境／風(fēng)格／產(chǎn)品等方面去聯(lián)想發(fā)揮）
舉例：從標(biāo)題的字面含義或者深層含義去聯(lián)想，比如下面的彩色顏料還是油漆點(diǎn)綴是跟標(biāo)題的“炫動(dòng)色彩”文案相呼應(yīng)的。
舉例：從風(fēng)格統(tǒng)一性去聯(lián)想，比如下面這個(gè)banner是剪紙風(fēng)格的形式，所以背景那些點(diǎn)綴花花也是剪紙的，而不是其他樣式的花花。
舉例：從意境方面去聯(lián)想，比如下面這種可愛的banner常常會(huì)運(yùn)用到手繪簡(jiǎn)筆畫等點(diǎn)綴元素，至于畫什么內(nèi)容，就完全憑自己的想象力啦
舉例：從產(chǎn)品方面去聯(lián)想，比如下面的賣雨具的banner，自然而然會(huì)聯(lián)想到跟產(chǎn)品相關(guān)的雨滴對(duì)不對(duì)？所以剛好可以把雨滴作為點(diǎn)綴元素。
再比如我們常看到一些果汁飲料／護(hù)膚品／化妝品／香水等這些跟人的嗅覺味覺相關(guān)的產(chǎn)品，最最喜歡運(yùn)用的就是依據(jù)產(chǎn)品的特點(diǎn)和功能去聯(lián)想發(fā)揮了，比如把產(chǎn)品的原材料或者產(chǎn)品本身作為點(diǎn)綴元素來(lái)渲染氛圍，因?yàn)槲队X嗅覺都是比較虛的東西，但是轉(zhuǎn)化到視覺層面就可以給消費(fèi)者很直觀的感受啦，給人一種身臨其境的感覺。
這個(gè)一看就是水果味的香水對(duì)不對(duì)？能想象出這換香水的香味了嘛？
這款指甲油有這么多漂亮顏色，愛美的妹子一看就感覺想涂在指甲上試一試對(duì)不對(duì)？
六、運(yùn)用點(diǎn)綴元素的注意事項(xiàng)
既然是點(diǎn)綴元素，那當(dāng)然就是只能做點(diǎn)綴配角啦，所以既要襯托主體又不能搶了主體的風(fēng)頭，那么我們這次就簡(jiǎn)單從色彩／數(shù)量多少／大小比例3個(gè)角度來(lái)說這個(gè)知識(shí)點(diǎn)好了。
為了方便大家理解，我簡(jiǎn)單給大家畫了幾個(gè)示意圖，接下來(lái)我將分別給大家解說下，主要有以下幾條重點(diǎn)：
（1）點(diǎn)綴元素的數(shù)量要適中
圖1相當(dāng)于是一張沒有點(diǎn)綴元素或者點(diǎn)綴元素跟背景相似的banner。圖2相當(dāng)于是加了跟主體相近或相關(guān)聯(lián)的適量的點(diǎn)綴元素，對(duì)比發(fā)現(xiàn)，圖1比較單調(diào)，圖2更加飽滿。
（2）同量同色的點(diǎn)綴元素利用不同的處理手法帶來(lái)的視覺感受是不一樣的
圖2/圖3/圖4的點(diǎn)綴元素?cái)?shù)量是一樣的，但是在對(duì)點(diǎn)綴元素運(yùn)用了高斯模糊或者動(dòng)感模糊等處理手法后，畫面開始變得有空間層次感，也更加靈動(dòng)了。
（3）某一點(diǎn)綴元素的占比很小但顏色卻不同，那么它也會(huì)非常搶鏡
圖5和圖6的對(duì)比，看到那萬(wàn)紅中的一點(diǎn)綠了嗎？是不是很耀眼？它很小但卻已經(jīng)蓋過了主體的風(fēng)頭。
（4）點(diǎn)綴元素和主體之間要么相互陪襯要么形成對(duì)比關(guān)系
觀察下圖我們會(huì)發(fā)現(xiàn)，雖然點(diǎn)綴元素跟主體相差很大會(huì)對(duì)主體造成一定的視覺干擾，但當(dāng)這種差異數(shù)量達(dá)到一定程度以后，主體又會(huì)變?yōu)橥耆闹鹘恰?/span>
因?yàn)椋瑘D7的點(diǎn)綴元素雖然會(huì)對(duì)主體信息造成一定的干擾，但是看起來(lái)還算和諧，至少不會(huì)那么單調(diào)了，但是如果變成圖8的話，點(diǎn)綴元素雖然跟主體有很大差異，但是卻使得主體更加突出了。
總之，我上面總結(jié)的這幾點(diǎn)無(wú)論是對(duì)于專題頁(yè)設(shè)計(jì)／banner設(shè)計(jì)還是海報(bào)設(shè)計(jì)都會(huì)有很大的啟發(fā)，因?yàn)檫@些就是我們平時(shí)做的商業(yè)設(shè)計(jì)的基本原理所在。
藍(lán)藍(lán)設(shè)計(jì)( 91whvog3.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://91whvog3.cn