2015-12-14 周周
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
每到一年一度的大促季，會(huì)場、頁面、互動(dòng)游戲，都在緊張?jiān)O(shè)計(jì)之中，這些精美的頁面和互動(dòng)游戲，如何與用戶產(chǎn)生聯(lián)系？必然需要一條與用戶連接的紐帶 —— 它就是BANNER。有些人可能認(rèn)為資源位的設(shè)計(jì)相對(duì)簡單，但其實(shí)不然，小小的資源位承載著重大的使命，設(shè)計(jì)上自然也是下了一番功夫，那這一次的雙11我們是怎么做的？請(qǐng)聽我細(xì)細(xì)道來…..
曦村：在設(shè)計(jì)前期，做大致規(guī)劃，是很有必要的，在大促中雖然會(huì)有很多變化，但，做規(guī)劃會(huì)幫助我們?cè)诖蠓较蛏喜怀鲥e(cuò)，這次，從了解業(yè)務(wù)背景及節(jié)奏 – 前期風(fēng)格創(chuàng)意設(shè)定 – 突出品牌增強(qiáng)識(shí)別度 – 制定規(guī)范提升效率等幾個(gè)方面去做，有了這個(gè)框架，這一次的設(shè)計(jì)過程還是相當(dāng)絲滑滴！那具體是怎么做的呢？
今年雙11以“全球化”為主題，從主題來看，說明整體方向走國際路線，設(shè)計(jì)必然要高端大氣上檔次。不但如此，今年還要突出品牌化！品牌核心元素必須貫穿始終，讓用戶有明顯的感知，設(shè)計(jì)與設(shè)計(jì)之間保持統(tǒng)一，傳遞相同的心智。
三個(gè)關(guān)鍵詞說明了我們這次品牌的大致方向：
品牌核心元素給了我們比較明確的圖形參考。
了解整體設(shè)計(jì)節(jié)奏：
為何要制定風(fēng)格及創(chuàng)意？
因?yàn)?span id="35h9thwtz" class="wp_keywordlink_affiliate">Banner是為會(huì)場引流的，須配合會(huì)場給用戶傳遞相同的心智，前期的風(fēng)格及創(chuàng)意的思考，為后期的設(shè)計(jì)助力不少。
根據(jù)每個(gè)時(shí)期主題的變化，我們需要準(zhǔn)備多個(gè)創(chuàng)意，這樣才能緊跟主題的變化，有多種方案可選。
會(huì)場設(shè)計(jì)：
會(huì)場根據(jù)整體節(jié)奏分為三個(gè)時(shí)間段，造勢(shì)期間－主要運(yùn)用了貫穿品牌的線條及貓頭元素，各國國旗烘托了全球化的主題 ／ 預(yù)熱期間－主要突出了貨品與貓頭 ／ 正式期間－以金色渲染出狂歡的氣氛。
根據(jù)以上主題變化做了風(fēng)格方向及創(chuàng)意探討，以下是腦爆方案：
在前期探討時(shí)，腦爆了多種方案，然后根據(jù)每個(gè)時(shí)段的主題變化，選擇合適的創(chuàng)意及風(fēng)格。
接下來舉幾個(gè)例子，造勢(shì)期間以全球化為主題，我們思考了全球化，有匯聚各國好貨的概念，創(chuàng)意如下：
商品拼接組成圖形的創(chuàng)意，正好符合各國好貨匯聚的概念，貨品與品牌核心元素的完美結(jié)合，用國旗彩條作為輔助元素，突出了天貓與全球化概念的融合，并且讓商品組成或者溶于貓頭，也體現(xiàn)了這一點(diǎn)！
創(chuàng)意參考：
隨著時(shí)間臨近雙11，需營造緊張，緊迫，激動(dòng)期盼的氛圍，以狂歡為主題，創(chuàng)意如下：
商品與毛筆字結(jié)合，營造出最后關(guān)頭的瘋狂以及緊張，增強(qiáng)了狂歡的氛圍。以手勢(shì)為創(chuàng)意點(diǎn)，一是今年大部分用戶都用手機(jī)購物，手的元素具有親和力，二為手勢(shì)作為倒計(jì)時(shí)數(shù)字的表現(xiàn)形式較為新穎，手勢(shì)也有其他含義，比如豎起大拇指為點(diǎn)贊等。色彩上也與會(huì)場相呼應(yīng)，看起來較為統(tǒng)一。
創(chuàng)意參考：
當(dāng)然還有很多創(chuàng)意及風(fēng)格運(yùn)用，這里就不一一講解了，從這個(gè)思路，大概也可以看出一二，這次我們是做了充分的準(zhǔn)備，一個(gè)創(chuàng)意庫，讓我們整個(gè)設(shè)計(jì)過程井然有序，且能在緊急突發(fā)的狀況時(shí)，及時(shí)更換創(chuàng)意，保證較好的活動(dòng)效果。
為何要增強(qiáng)識(shí)別度，差異性？
原因其實(shí)很簡單，雙11期間，各大電商平臺(tái)幾乎都做活動(dòng)，用戶又怎么能在茫茫圖海中認(rèn)出我們？抄襲，模仿更讓用戶視覺疲勞，怎么能脫穎而出呢？
案例：
在大促這個(gè)時(shí)間緊迫又設(shè)計(jì)資源缺乏的時(shí)期，很容易讓人感到疲軟，設(shè)計(jì)大同小異，沒有太多的特色與區(qū)別，所以，打破這種局面，是接下來的重點(diǎn)。
在茫茫圖海里，能夠讓人眼前一亮是我們追求的效果，與其他平臺(tái)設(shè)計(jì)形成差異，也是我們的使命。其實(shí)在設(shè)計(jì)之前，我們就希望這次的設(shè)計(jì)能夠區(qū)別于以往，有特色，有記憶點(diǎn)。那怎樣才能讓用戶認(rèn)準(zhǔn)我們的雙11？你猜得沒錯(cuò)，那就是我們品牌的核心元素－貓頭！！為了讓用戶能夠強(qiáng)烈感受到品牌，我們就要重復(fù)重復(fù)再重復(fù)的強(qiáng)調(diào)！就像腦白金的廣告，一日三次，定能給人留下深刻印象，重復(fù)的感覺著實(shí)也是魔性的！對(duì)，是魔性的步伐!
解析魔性關(guān)鍵詞：
從這些關(guān)鍵詞中，也可以尋找出一些設(shè)計(jì)元素及方向了！再結(jié)合品牌核心元素貓頭，一張與眾不同的banner就此誕生了。
案例：
這次雙11大促的設(shè)計(jì)，有幾個(gè)點(diǎn)，是與以往不同的，空間感，刻畫貓型元素，輕質(zhì)感。
字體上我們運(yùn)用了投影，營造空間感，使其看起來有層次，貓型的元素也顯而易見，在商品的處理上，沒有運(yùn)用厚重的投影，而是運(yùn)用了商品本身的質(zhì)感，未加太多的，質(zhì)感輕薄，看起來清新脫俗！
重復(fù)的連續(xù)紋樣，讓人產(chǎn)生暈眩的效果，抓人眼球，同時(shí)也使品牌元素更加突出，并且在色彩上也使用了較為鮮亮的顏色，增強(qiáng)了視覺效果。新的嘗試當(dāng)之無愧成為了點(diǎn)擊之王，模版中的戰(zhàn)斗機(jī)。從數(shù)據(jù)上看，此套BANNER成為當(dāng)日焦1中點(diǎn)擊最高的，確實(shí)提升了活動(dòng)效果！
從空間感，圖形元素，及背景這幾方面，做了形式上的創(chuàng)新，并且識(shí)別性極高，讓人難以模仿，又能很快抓住用戶眼球，是一次很不錯(cuò)的嘗試！
在大促期間，資源位數(shù)量多如牛毛，如此大工作量，光憑幾個(gè)人的力量是完不成，借助外部力量是必然的，那如何讓溝通更，成本更低，這是我們需要思考的。
還有類目運(yùn)營需要推廣活動(dòng)會(huì)場，日日都有焦點(diǎn)，設(shè)計(jì)素材的審核工作量也不??！面對(duì)這些問題，我們確實(shí)思考了一番，日常的規(guī)范是必然要做的，標(biāo)注清楚，減少溝通成本，其次是，產(chǎn)出的模版，如何讓外部設(shè)計(jì)師易于延展？經(jīng)過思考，我們?cè)谧煮w上沒有去做不必要的變形，這并非偷懶，而是正真考慮到模版的實(shí)用性及延展。
當(dāng)然，字體是非常重要的，不做任何設(shè)計(jì)，也不合適，所以我們使用了輕質(zhì)感，增加一些空間感，這樣既便于延展及修改，又有設(shè)計(jì)感，一舉兩得。
本次負(fù)責(zé)資源位的經(jīng)歷，讓我對(duì)品牌有了更深的了解，如何體系化的設(shè)計(jì)及如何在品牌的基礎(chǔ)上創(chuàng)新。從節(jié)奏的把控，適應(yīng)主題的變化，設(shè)計(jì)創(chuàng)意探討風(fēng)格制定，如何配合雙11其他相關(guān)設(shè)計(jì)，保持設(shè)計(jì)的統(tǒng)一性。以及規(guī)范制定的重要性等，什么才是優(yōu)質(zhì)模版，如何提升工作效率及提升活動(dòng)效果，都積累了不少經(jīng)驗(yàn)。希望能給大家一些啟發(fā)。
最后一起來回顧一下雙11期間的banner：
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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://www.wnxcall.com