2017 UI流行趨勢(shì) - 色彩探索

2017-1-24    用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 來源:圖冀網(wǎng)

就在不久之前,馬爸爸又來收割一種名為[手]的[食材],對(duì)面的親,不知今天的你吃土了嗎~

還記得雙12期間打開手機(jī)淘寶,總有這么個(gè)小入口在誠意滿滿向你揮撒紅包優(yōu)惠券嗎,還記得它每天給你帶來多變的小驚喜嗎。對(duì)啦,它就是剁手界的彩蛋,買買買中的精靈:手淘雙12主會(huì)場(chǎng)小入口。


回憶不夠用?

那就來一次大合集吧!


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


這一套精心設(shè)計(jì)的入口圖,得到了無論是朋友圈,還是業(yè)界人士一致好評(píng)!


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


好有創(chuàng)意??!淘寶的設(shè)計(jì)越來越有趣了!小恐龍好呆萌??!很有二次元的感覺!好好...控計(jì)一下情緒~


在這一套可愛的入口圖的背后,是設(shè)計(jì)師小分隊(duì)40多天不分晝夜的支撐。它們是怎么被推導(dǎo)出來的?僅僅只是一套插圖嗎?為什么你看到它就想點(diǎn)(尤其是在某一個(gè)孤枕難眠的夜晚)?今天就讓我們來為大家一一揭秘~


12份驚喜,40天的奮戰(zhàn)


前面4周我們完成了創(chuàng)意討論,建立規(guī)范,表現(xiàn)形式的突破,一直到動(dòng)態(tài)設(shè)計(jì)的產(chǎn)出。

上線之后我們依然奮戰(zhàn)在第一線,在這個(gè)階段中,我們不斷挖掘著利益點(diǎn),在文案和視覺上都不斷進(jìn)行著氣氛上的升級(jí)優(yōu)化。可以說這個(gè)階段才是真正的決戰(zhàn)期。


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


一切從草創(chuàng)開始


拿到親親節(jié)12個(gè)主題之后的我們,天馬行空腦洞大開。

比如說:原產(chǎn)地是一只笑里帶著淚的豬豬切肘子,二次元?jiǎng)t是大叔cos水兵月(lady beard),等等等等~


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


隨后馬上開始草圖繪制。因?yàn)樾c(diǎn)很有共鳴,交互設(shè)計(jì)師也忍不住參與了一把。


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


畫完草圖后,馬上做了一些簡單的demo,包括那個(gè)剁手的豬豬,雖然它最后沒有出現(xiàn)在我們12天的稿子里,但是它一直在我的心中~~~


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


創(chuàng)意只是為了表達(dá)眼前的主題嗎?


Of course not!


我們對(duì)這一套創(chuàng)意所應(yīng)該去承載和表達(dá)的意義做出了一些更深入的思考。

我們也曾試圖通過常規(guī)的視覺規(guī)范,去統(tǒng)一12個(gè)入口樣式。但這僅僅解決了視覺上的統(tǒng)一和親親節(jié)主題的表達(dá)。


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


何不干脆把變化與個(gè)性做到做到升華?這也正是淘寶年輕激情的品牌理念!

于是我們大膽嘗試,用12種視覺風(fēng)格,去展示了12個(gè)完全不同的主題故事。變化中有統(tǒng)一,統(tǒng)一中擁抱著變化~


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


場(chǎng)景化的利益文案


不知有沒有細(xì)心的觀眾發(fā)現(xiàn),在上班途中,或是睡前打開手淘,就會(huì)有入口君向你招手“上班先來抽獎(jiǎng)””睡前再抽一波紅包”~


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


日益強(qiáng)烈的視覺享受


大促之下,光有情懷是不夠的。你我可都是很現(xiàn)實(shí)的人。

為了表達(dá)滿滿的誠意,12天的視覺氛圍越演愈烈,只為12.12那一天,把最大的優(yōu)惠展現(xiàn)給大家,狂歡起來!


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


數(shù)以百計(jì)的動(dòng)圖


為了支撐更細(xì)膩的用戶體驗(yàn),并且時(shí)時(shí)檢測(cè)用戶反饋,迅速做出新的反應(yīng),把最好的氛圍帶給大家。每一天的創(chuàng)意畫面背后,設(shè)計(jì)師付出準(zhǔn)備的其實(shí)是40多張圖。12天共計(jì)398張動(dòng)效圖!


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


極高性價(jià)比的設(shè)計(jì)技巧


1個(gè)入口banner,要在3秒之內(nèi)抓住用戶的眼球,我們總結(jié)了幾個(gè)tips:

1. 主題要鮮明關(guān)系要明確:所以主體元素必須是1-2個(gè);

2. 動(dòng)效要吸引文件要?。核詣?dòng)效鬼畜激烈就好,只要4-5幀;

3. 利益氛圍要隨時(shí)變化:所以文案必須是標(biāo)準(zhǔn)字體可快速替換,紅包元素也可以靈活增加!


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


靈活的團(tuán)隊(duì)協(xié)作


幾百張動(dòng)圖的制作,如果只單純地按數(shù)量分到每個(gè)視覺設(shè)計(jì)師身上,效率必定不甚理想。

我們一起搭了小小組件庫。這些素材使我們4人之間能第一時(shí)間進(jìn)行快速補(bǔ)位~靠著這些,贏得了每天日以千萬計(jì)的用戶點(diǎn)擊~


“淘寶1212親親節(jié)”超級(jí)入口設(shè)計(jì),背后不為人知的故事


40天的戰(zhàn)斗,我們從單純視覺設(shè)計(jì)師的本職角色,轉(zhuǎn)變?yōu)槎喾轿坏膿?dān)當(dāng);從當(dāng)前頁面的設(shè)計(jì)思考,轉(zhuǎn)變?yōu)檎w會(huì)場(chǎng)點(diǎn)擊效率的思考;從情懷主題上的表達(dá),轉(zhuǎn)變?yōu)殡p12整體認(rèn)知,及大淘寶品牌態(tài)度的傳承;從思考我們想給用戶什么,轉(zhuǎn)變?yōu)樗伎加脩粝胍裁础?/span>

40個(gè)不眠不休,不僅是1212首頁入口的設(shè)計(jì)人,更是1212的守夜人!

最后只想對(duì)大家說:你的手,我們收下啦~


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(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ù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔