當(dāng)情感化設(shè)計(jì)碰上doodle，會(huì)發(fā)生點(diǎn)什么樣的碰撞呢，我們今天就來聊一聊這個(gè)話題…

情感化設(shè)計(jì)，設(shè)計(jì)師都明白是怎么一回事，但doodle是什么呢，可能有些設(shè)計(jì)師童靴不太了解。從字面上解釋，doodle本意為涂鴉，現(xiàn)在多指由谷歌先發(fā)起的谷歌涂鴉。主要是在logo基礎(chǔ)上進(jìn)行一些裝飾設(shè)計(jì)，來紀(jì)念特定的節(jié)日和事件，現(xiàn)在已經(jīng)有越來越多的公司加入到doodle的創(chuàng)作陣營中來，也不單單是一張jpg，現(xiàn)在越來越多的公司開始進(jìn)行交互上的嘗試，比如嵌入視頻、游戲等。

下圖是互聯(lián)網(wǎng)史上第一個(gè)doodle，據(jù)現(xiàn)在有接近20年的歷史了，可能現(xiàn)在看起來很粗糙，但是它作為doodle的開山之作，還是很有紀(jì)念價(jià)值的。

那doodle為什么會(huì)發(fā)展起來呢，我簡單總結(jié)了一下doodle的5個(gè)主要作用：

第一，slogan。它其實(shí)是品牌的一種情感化輸出。有了它，用戶更能感覺到這個(gè)品牌的活力，幫助品牌拉近與用戶之間的距離。

第二，special。它是在節(jié)日和一些重大事件的時(shí)候推出的，更能提醒用戶去關(guān)注當(dāng)前熱點(diǎn)。

第三，surprise，給用戶制造彩蛋。平時(shí)logo都是一成不變的，突然有一天，logo它會(huì)動(dòng)，它還能發(fā)出聲音，甚至還能做小游戲，這對用戶來說，就是意料之外的驚喜。

第四，sale，達(dá)到促銷目的。對電商而言，doodle的位置是首頁重要廣告位，除了渲染氣氛，刺激用戶買買買的心理，也能帶來一定的流量和轉(zhuǎn)化。

第五，share，分享的功能。這其實(shí)是個(gè)有趣的問題，究竟什么樣的doodle才算是個(gè)優(yōu)秀的doodle呢，這個(gè)問題仁者見仁智者見智，毫無疑問的是，doodle的設(shè)計(jì)能夠傳達(dá)出品牌的一些價(jià)值觀和設(shè)計(jì)水準(zhǔn)的，特別是在各大品牌的doodle的較量中，用戶的感知更加明顯，甚至可能影響到用戶對品牌的口碑。

比如下面，百度和谷歌今年3月8號推出的doodle，大家覺得哪個(gè)更有趣呢？

注：谷歌完整版doodle請移步：

http://www.google.com/doodles/international-womens-day-2016

那我們看一下doodle會(huì)在什么場景下應(yīng)用：

首先是搜索引擎類的網(wǎng)站，他們首頁比較簡單，有充足空間來進(jìn)行doodle情感化設(shè)計(jì)，用戶能看到的不僅僅是一張圖片，還有可能是一段視頻，一個(gè)小游戲。比如百度這張圖片，搜索欄下面其實(shí)是個(gè)互動(dòng)類的小游戲。

電商類將doodle應(yīng)用得出神入化的當(dāng)屬阿里系。淘寶和天貓一般都將頂通、logo位和首頁兩側(cè)空白區(qū)域進(jìn)行統(tǒng)一的整體設(shè)計(jì)，這樣更能讓用戶感受到節(jié)日和促銷的氛圍。

最后看下我們途牛的情況，我們現(xiàn)在的首頁利用頂部工具欄和導(dǎo)航欄中間空白區(qū)域進(jìn)行doodle的設(shè)計(jì)來渲染氛圍。

如何做出一個(gè)吸引用戶的doodle

那怎樣才能做出一個(gè)吸引用戶的doodle呢，我這里分享幾個(gè)小方法。

第一招，主打感情牌

人都是感情動(dòng)物，以情動(dòng)人是百試不爽的方法。

比如下面這個(gè)logo，是谷歌父親節(jié)推出的。從動(dòng)物的父子關(guān)系入手，慢慢演化為人類之間的父子關(guān)系，用戶在看到時(shí)候不由會(huì)想到自己的父親，讓用戶看到后產(chǎn)生強(qiáng)烈情感共鳴。

第二張圖是夏至推出的，幾個(gè)小孩在水中納涼玩耍，是不是會(huì)讓你想起你的童年呢，并且，這個(gè)doodle的巧妙之處是在于它沒有強(qiáng)行將品牌logo插入其中，而是將品牌色和谷歌英文字母融入到小孩的泳帽里，使得畫面更加美觀和諧。

第二招，擬人化

將logo賦予人格，讓品牌更加接地氣，也能讓用戶在看到動(dòng)畫的時(shí)候，將自己帶入情境中。

這個(gè)是谷歌在世界杯期間推出的，將幾個(gè)字母做成辦公室職員的形象，在boss來之前他們興高采烈的看球賽，當(dāng)boss走來的時(shí)候，立刻切入到會(huì)議模式，面對如此熟悉的場景，是不是會(huì)讓你會(huì)心一笑呢?

淘寶這個(gè)就是將我們購物常接觸到的鞋子、購物袋擬人化，增加了趣味性。

第三招，抄現(xiàn)實(shí)

將現(xiàn)實(shí)投影到doodle創(chuàng)作中。

下圖看到的是YouTube的一個(gè)doodle，它展示的是幾秒鐘內(nèi)女性妝容的變化，與人氣視頻《百年之美》遙相呼應(yīng)，很能激發(fā)用戶在YouTube搜索觀看這個(gè)視頻的興趣。

這個(gè)是谷歌在女作家奈歐?馬許誕辰紀(jì)念日推出的doodle，中間的窗戶是女作家寫作時(shí)的場景，兩邊的窗戶是她小說中的橋段。她的書迷在看到這個(gè)doodle的時(shí)候，一定會(huì)覺得很親切。

第四招，出奇

使用一些天馬行空的視角，出奇招，往往能收到意想不到的效果。

下面看到的是淘寶可勁造的doodle，它是個(gè)火鍋俠模樣，腦袋不停往外面迸發(fā)出各種各樣的好貨，這樣新奇的腦洞，大大刺激了用戶的好奇心。

百度的這個(gè)選用了俯視的視角，有別于常見的平視視角，就會(huì)讓人印象深刻。

第五招，制造游戲感

游戲往往讓人樂在其中，往往制造出游戲的緊張氛圍就能抓人眼球。

淘寶這個(gè)采用了老虎機(jī)的樣式，給用戶帶來更強(qiáng)烈的感官刺激。

這個(gè)是紀(jì)念圖靈的doodle，通過模擬圖靈機(jī)運(yùn)算，讓用戶一步步通過計(jì)算，點(diǎn)亮谷歌logo。

這個(gè)是谷歌萬圣節(jié)的doodle，模擬了鬼屋的游戲，當(dāng)用戶打開一扇門的時(shí)候，伴隨著嗚嗚的聲音，就會(huì)冒出一個(gè)幽靈，節(jié)日氣氛更加濃厚。

需要注意哪些細(xì)節(jié)

除了以上的創(chuàng)意招數(shù)，在制作中細(xì)節(jié)也同樣重要，細(xì)節(jié)決定成敗，那么都需要注意哪些細(xì)節(jié)呢？

第一，切忌復(fù)雜

如果過于復(fù)雜的話，用戶的視覺重心就會(huì)集中在logo位，那么整個(gè)網(wǎng)站首屏其他廣告位的點(diǎn)擊和轉(zhuǎn)化率就會(huì)受到一些影響，出現(xiàn)下圖的尷尬癥狀：

第二，避免呆板的勻速運(yùn)動(dòng)

下面兩幅圖，那一張顯得更加舒服一點(diǎn)呢？第一張用勻速運(yùn)動(dòng)描述了一個(gè)彈吉他的青年，但是顯得過于木訥，對比看，第二張就顯得更加動(dòng)感。

所以適當(dāng)加入變速運(yùn)動(dòng)，會(huì)讓動(dòng)畫效果更耐看。

第三，控制時(shí)長和kb數(shù)

減少畫面的動(dòng)作，是最直接控制kb數(shù)的方法。并且畫面太長的doodle不僅會(huì)讓用戶覺得拖沓，而且文件量容易超標(biāo)，影響網(wǎng)站加載速度。

第四，開啟無限循環(huán)模式

讓畫面循環(huán)起來，不僅讓畫面看起來更加流暢，也更能有效縮短動(dòng)畫時(shí)長，控制kb數(shù)?？吹竭@個(gè)篩子，就是一個(gè)無限循環(huán)的動(dòng)畫，不僅看起來很簡潔和諧，更能套用一句前段時(shí)間很流行的網(wǎng)絡(luò)用語，這畫面有毒啊 ，我能盯著看一整天啊，根本停不下來啊~~

附上幾枚小牛家的doodle，獻(xiàn)丑了：

最后的思考

互聯(lián)網(wǎng)能走到今天，是它比現(xiàn)實(shí)更能滿足我們內(nèi)心的需要，讓我們從現(xiàn)實(shí)的壓力中解脫出來，感受到輕松、愉悅。做為設(shè)計(jì)師，也需要與時(shí)俱進(jìn)，盡可能多地去感受生活，捕捉瞬間，不斷創(chuàng)造出有情懷的作品，給我們的用戶帶去更多快樂體驗(yàn)。

關(guān)于doodle的設(shè)計(jì)理論和設(shè)計(jì)方法肯定非常多，水平所限，這里只是介紹幾種。歡迎大家隨時(shí)拍磚~~

本文由 @途牛用戶體驗(yàn)中心（微信公眾號：途牛用戶體驗(yàn)中心） 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。