總結(jié)好的banner設(shè)計(jì)絕招

2018-05-24 2062 0
banner設(shè)計(jì)難度真的是有點(diǎn)大到無從下手嗎?一起去學(xué)習(xí)下UI大課堂總結(jié)的做banner時(shí)的參考方法,說不定你的靈感就這么有了吶~

 

眾所周知,一般網(wǎng)站每年都會(huì)有幾次大促銷,作為門面首頁的在2014年改版后正好趕上了1212大促,于是迎來了新版第一次投放大促banner的機(jī)會(huì)。

經(jīng)典banner UI設(shè)計(jì)方法

這次大促的banner投放,點(diǎn)擊率感人

于是這個(gè)位置自然而然的變成了大促時(shí)必用的banner位,而且每次投放效果都異常的好,尤其是最近三次:16年9月開學(xué)季,16年12月,17年3月開學(xué)季的大促點(diǎn)擊率比往常都要高出很多。

經(jīng)典banner UI設(shè)計(jì)方法

公司每次大促的背后離不開各部門的通力合作,其中包括我們大友誼帝團(tuán)隊(duì)。

作為此banner位的視覺設(shè)計(jì)獅之一,很榮幸能在這里分享一些這幾次大促中領(lǐng)悟到的一些東西。

視覺設(shè)計(jì)師接到banner需求后的思路:

前面那些了解需求啊,溝通啊我們就不提了,我們主要從決定動(dòng)手開始。

行動(dòng)起來大致分為兩類:

一類,拿到需求腦子里就已經(jīng)有圖了,拿起草稿紙開始畫草圖,構(gòu)思,然后根據(jù)自己的草圖去實(shí)現(xiàn)效果圖。這類大神我們今天先不討論(因?yàn)槲也皇谴笊?,沒法就此方法展開討論,羞?。?。

另一類,到花瓣等設(shè)計(jì)網(wǎng)站去找靈感,瀏覽大量的設(shè)計(jì)圖,找一些大廠或大神設(shè)計(jì)的契合本次需求的風(fēng)格,然后做一個(gè)差不多的,拿去交差。

大部分時(shí)間我是屬于第二類,因此,以下這些風(fēng)格,都被我借鑒過,在我們的頁面上出現(xiàn)過。

經(jīng)典banner UI設(shè)計(jì)方法

可是我沒有想過,這些風(fēng)格我可以用,別人也可以用,我們甚至?xí)吹皆S許多多廠家的banner都長得差不多。

我之前從沒有想過,借鑒也是有道道的~

以下這三家也是借鑒的標(biāo)兵啊,可是效果不太一樣呢

經(jīng)典banner UI設(shè)計(jì)方法

雙十一,淘寶的設(shè)計(jì)團(tuán)隊(duì)推出了借鑒歐普風(fēng)格所產(chǎn)出的淘寶大促風(fēng)格在業(yè)內(nèi)掀起了一段風(fēng)起云涌的討論和效仿。

經(jīng)典banner UI設(shè)計(jì)方法

MUJI制造商“制造”的嚴(yán)選,大促永遠(yuǎn)都是那么的美,坐等大促看美圖,也成了嚴(yán)選用戶的習(xí)慣。

經(jīng)典banner UI設(shè)計(jì)方法

去年,融合了20世紀(jì)所有時(shí)尚元素的Gucci甚至引發(fā)了時(shí)尚圈的一股巨浪。

以上,我們不難看出,這三家在大促或新品發(fā)布上所采用的辦法雖是借鑒,但都是:借鑒經(jīng)典設(shè)計(jì),并結(jié)合自身的產(chǎn)品特點(diǎn),形成屬于自己的風(fēng)格和氣質(zhì)。

很多人說,說什么借鑒,就是抄襲,你們?cè)O(shè)計(jì)界不是盛行一句話:天下設(shè)計(jì)一大抄?

說這句話的人一定不是設(shè)計(jì)師,或者說根本不了解設(shè)計(jì)。

畢加索說過:庸人抄作品,天才借方法。

笑話!設(shè)計(jì)獅是怎么可能是庸人?

舉個(gè)栗子,喬布斯時(shí)期Apple的產(chǎn)品設(shè)計(jì)所用的方法其實(shí)是迪特·拉姆斯提出的。

經(jīng)典banner UI設(shè)計(jì)方法

經(jīng)典banner UI設(shè)計(jì)方法

大家感受一下,想要滿足受眾對(duì)品質(zhì)的追求,對(duì)美的追求,對(duì)易用的追求。這兩位大師所用的方法是類似的,迪特·拉姆斯在前期的設(shè)計(jì)中已經(jīng)驗(yàn)證了這個(gè)設(shè)計(jì)方向是正確的,這一驗(yàn)證對(duì)喬布斯后來的發(fā)展方向是有所啟發(fā)的,于是我們用上了iMac,用上了iPhone等等,并且還真的是很喜歡,甚至有人說喬布斯時(shí)期的產(chǎn)品設(shè)計(jì)也已經(jīng)成為了一種經(jīng)典。

Dieter Rams 迪特·拉姆斯現(xiàn)代設(shè)計(jì)原則

由此可見,當(dāng)我們?cè)诮梃b經(jīng)典設(shè)計(jì)的時(shí)候,不是浮于表面的,是借鑒的其方法,用視覺傳達(dá)某種信息的時(shí)候,好用的方法卻往往都是類似的,是雷同的。

終于說到今天的重點(diǎn),舉栗說明如何借鑒經(jīng)典:

三個(gè)點(diǎn)擊率不錯(cuò)的banner中有兩個(gè)是借鑒的孟菲斯風(fēng)格,并且取得了非常不錯(cuò)的成績(jī)

經(jīng)典banner UI設(shè)計(jì)方法

在領(lǐng)悟了借鑒的精髓之后,我拿到banner需求開始思考
  1. 我不能再做“差不多”先生了。
  2. 能否通過某經(jīng)典設(shè)計(jì)來幫我提供一些靈感,去詮釋這次活動(dòng)的主題呢?
我想到了孟菲斯設(shè)計(jì)為什么呢?且看以下分析: 孟菲斯風(fēng)格形成的背景:

社會(huì)大環(huán)境:上世紀(jì)初,在包豪斯的思想率領(lǐng)下,現(xiàn)代美學(xué)進(jìn)入了一個(gè)新時(shí)代,理性的,規(guī)矩的設(shè)計(jì)理念已經(jīng)影響了幾十年,到80年代的時(shí)候,世界上的產(chǎn)品設(shè)計(jì)慢慢發(fā)展到了一種冰冷的,無感情的時(shí)代。

經(jīng)典banner UI設(shè)計(jì)方法

有些設(shè)計(jì)師認(rèn)為產(chǎn)品的設(shè)計(jì)不應(yīng)該是這樣的,應(yīng)該是讓人用起來感覺輕松的,愉悅的,富有熱情的。因此,他們開始試圖打破這些規(guī)矩,balabala經(jīng)過一系列改革,最后形成了孟菲斯風(fēng)格。此風(fēng)格最早是用于建筑設(shè)計(jì),室內(nèi)設(shè)計(jì)和家具設(shè)計(jì)。

經(jīng)典banner UI設(shè)計(jì)方法

孟菲斯風(fēng)格的特點(diǎn):
  1. 在色彩上常常故意打破配色規(guī)律,喜歡用一些明快,風(fēng)趣,彩度高的明亮色調(diào),特別是粉紅、粉綠等艷俗的色彩。
  2. 強(qiáng)調(diào)手工藝方法之作,并積極從波普藝術(shù)、東方藝術(shù)、非洲拉美的傳統(tǒng)藝術(shù)中尋求靈感。
  3. 在構(gòu)圖上往往打破橫平豎直的線條,采用波形曲線,曲面和直線、平面的組合,來取得室內(nèi)意外效果。
  4. 超越構(gòu)件、界面的圖案,色彩涂飾。
帶來的社會(huì)反響:

立刻引起了許許多多年輕人的關(guān)注,得到了一大票簇?fù)碚?,有太多人想要恢?fù)活潑,想要跳出性冷淡去擁抱熱情,因此在社會(huì)上傳播非???,名聲大噪。

再來看我們現(xiàn)在所處的環(huán)境:

一種,扁平化,簡(jiǎn)約風(fēng),配色最好不要多于3個(gè)顏色,形狀最好圓是圓,方是方,橫平豎直的構(gòu)圖等等,這些“規(guī)則”已經(jīng)盛行在互聯(lián)網(wǎng)行業(yè)很多年了呢。

我們的審美似乎又被卷回到了歷史的漩渦中很久了。

我們的受眾:有學(xué)習(xí)需求的那些人??!

我朝學(xué)校的教育風(fēng)格… 難道我們到了互聯(lián)網(wǎng)上,還要帶來差不多的感覺?

我們當(dāng)然希望傳達(dá)給他們一種輕松,活潑,愉悅的感覺,讓大家懷著一種愉快的心情去學(xué)習(xí)知識(shí),自然而然的接受知識(shí)。

我們的產(chǎn)品:教育

我們不像很多商家有漂亮的實(shí)體產(chǎn)品圖,我們能做到的就是利用虛擬的視覺語言去傳達(dá)這些情感,從圖形,從色彩,從構(gòu)圖這些方面著手。

這似乎和當(dāng)年孟菲斯風(fēng)格的形成有一些相似之處,于是我大膽的借用了他們的一些視覺傳達(dá)方法:形狀,色彩。

但是我們和孟菲斯風(fēng)格又有一點(diǎn)不一樣,畢竟我們還是一個(gè)嚴(yán)肅的產(chǎn)業(yè),我們不需要過多的怪誕和非主流。

在此之前,團(tuán)隊(duì)已經(jīng)做了一些關(guān)于情感化設(shè)計(jì)的嘗試,從配色,材質(zhì)等特點(diǎn)上已經(jīng)有一些屬于滬江自己的東西(參閱之前公眾號(hào)推出的節(jié)日氛圍圖)

經(jīng)典banner UI設(shè)計(jì)方法

于是,把團(tuán)隊(duì)已沉淀來的配色方式加上一部分孟菲斯設(shè)計(jì)的傳達(dá)方式。

最后產(chǎn)出的banner具備以下特點(diǎn):
  1. 運(yùn)用幾何圖形做裝飾元素,既是具象的,又是抽象的。
  2. 配色雖是明亮的,同時(shí)又是溫和的,是多彩的,又是協(xié)調(diào)的。
  3. 會(huì)利用一些漸變來增加層次感,會(huì)加一些肌理來豐富細(xì)節(jié)。

整個(gè)風(fēng)格給人的感受就是輕松愉悅的,符合我們之前的預(yù)期,投放后的效果也大大的超出了我們的預(yù)期,說明這次的方向是正確的。

除了配色進(jìn)行了調(diào)整,字體和排版,也選擇了比較嚴(yán)謹(jǐn)?shù)姆绞椒椒ā?/strong>

字體,幾乎沒有做變形,保持了字體的易讀性,畢竟氛圍已經(jīng)夠輕松,那么字體和排版就不宜再松了,應(yīng)該適當(dāng)?shù)膰?yán)謹(jǐn)。畢竟我們的目的是希望用戶能在一個(gè)輕松的氛圍種聚焦到活動(dòng)主題的。

由于嘮叨太多了,我們千萬別把重點(diǎn)中的重點(diǎn)弄丟了,以上講的是做活動(dòng)時(shí)從經(jīng)典設(shè)計(jì)中汲取靈感的方法。

不同的活動(dòng),不同的目的,不同的受眾我們可以找到不同的經(jīng)典設(shè)計(jì)思路,難道我們的風(fēng)格就要隨著這些風(fēng)格一直在變化嗎?這不又成了差不多先生嘛?


25
評(píng)論區(qū)(0)
正在加載評(píng)論...