當情感化設計碰上doodle,會發生點什麼樣的碰撞呢,我們今天就來聊一聊這個話題…

情感化設計,設計師都明白是怎麼一回事,但doodle是什麼呢,可能有些設計師童靴不太了解。從字面上解釋,doodle本意為塗鴉,現在多指由谷歌先發起的谷歌塗鴉。主要是在logo基礎上進行一些裝飾設計,來紀念特定的節日和事件,現在已經有越來越多的公司加入到doodle的創作陣營中來,也不單單是一張jpg,現在越來越多的公司開始進行交互上的嘗試,比如嵌入視頻、遊戲等。

下圖是互聯網史上第一個doodle,據現在有接近20年的歷史了,可能現在看起來很粗糙,但是它作為doodle的開山之作,還是很有紀念價值的。

那doodle為什麼會發展起來呢,我簡單總結了一下doodle的5個主要作用:

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

第二,special。它是在節日和一些重大事件的時候推出的,更能提醒用戶去關注當前熱點。

第三,surprise,給用戶製造彩蛋。平時logo都是一成不變的,突然有一天,logo它會動,它還能發出聲音,甚至還能做小遊戲,這對用戶來說,就是意料之外的驚喜。

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

第五,share,分享的功能。這其實是個有趣的問題,究竟什麼樣的doodle才算是個優秀的doodle呢,這個問題仁者見仁智者見智,毫無疑問的是,doodle的設計能夠傳達出品牌的一些價值觀和設計水準的,特別是在各大品牌的doodle的較量中,用戶的感知更加明顯,甚至可能影響到用戶對品牌的口碑。

比如下面,百度和谷歌今年3月8號推出的doodle,大家覺得哪個更有趣呢?

注:谷歌完整版doodle請自備翻牆梯子移步:

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

那我們看一下doodle會在什麼場景下應用:

首先是搜索引擎類的網站,他們首頁比較簡單,有充足空間來進行doodle情感化設計,用戶能看到的不僅僅是一張圖片,還有可能是一段視頻,一個小遊戲。比如百度這張圖片,搜索欄下面其實是個互動類的小遊戲。

電商類將doodle應用得出神入化的當屬阿里系。淘寶和天貓一般都將頂通、logo位和首頁兩側空白區域進行統一的整體設計,這樣更能讓用戶感受到節日和促銷的氛圍。

最後看下我們途牛的情況,我們現在的首頁利用頂部工具欄和導航欄中間空白區域進行doodle的設計來渲染氛圍。

如何做出一個吸引用戶的doodle

那怎樣才能做出一個吸引用戶的doodle呢,我這裏分享幾個小方法。

第一招,主打感情牌

人都是感情動物,以情動人是百試不爽的方法。

比如下面這個logo,是谷歌父親節推出的。從動物的父子關係入手,慢慢演化為人類之間的父子關係,用戶在看到時候不由會想到自己的父親,讓用戶看到后產生強烈情感共鳴。

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

第二招,擬人化

將logo賦予人格,讓品牌更加接地氣,也能讓用戶在看到動畫的時候,將自己帶入情境中。

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

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

第三招,抄現實

將現實投影到doodle創作中。

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

這個是谷歌在女作家奈歐•馬許誕辰紀念日推出的doodle,中間的窗戶是女作家寫作時的場景,兩邊的窗戶是她小說中的橋段。她的書迷在看到這個doodle的時候,一定會覺得很親切。

第四招,出奇

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

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

百度的這個選用了俯視的視角,有別於常見的平視視角,就會讓人印象深刻。

第五招,製造遊戲感

遊戲往往讓人樂在其中,往往製造出遊戲的緊張氛圍就能抓人眼球。

淘寶這個採用了老虎機的樣式,給用戶帶來更強烈的感官刺激。

這個是紀念圖靈的doodle,通過模擬圖靈機運算,讓用戶一步步通過計算,點亮谷歌logo。

這個是谷歌萬聖節的doodle,模擬了鬼屋的遊戲,當用戶打開一扇門的時候,伴隨着嗚嗚的聲音,就會冒出一個幽靈,節日氣氛更加濃厚。

需要注意哪些細節

除了以上的創意招數,在製作中細節也同樣重要,細節決定成敗,那麼都需要注意哪些細節呢?

第一,切忌複雜

如果過於複雜的話,用戶的視覺重心就會集中在logo位,那麼整個網站首屏其他廣告位的點擊和轉化率就會受到一些影響,出現下圖的尷尬癥狀:

第二,避免呆板的勻速運動

下面兩幅圖,那一張顯得更加舒服一點呢?第一張用勻速運動描述了一個彈吉他的青年,但是顯得過於木訥,對比看,第二張就顯得更加動感。

所以適當加入變速運動,會讓動畫效果更耐看。

第三,控制時長和kb數

減少畫面的動作,是最直接控制kb數的方法。並且畫面太長的doodle不僅會讓用戶覺得拖沓,而且文件量容易超標,影響網站加載速度。

第四,開啟無限循環模式

讓畫面循環起來,不僅讓畫面看起來更加流暢,也更能有效縮短動畫時長,控制kb數。看到這個篩子,就是一個無限循環的動畫,不僅看起來很簡潔和諧,更能套用一句前段時間很流行的網絡用語,這畫面有毒啊 ,我能盯着看一整天啊,根本停不下來啊~~

附上幾枚小牛家的doodle,獻醜了:

最後的思考

互聯網能走到今天,是它比現實更能滿足我們內心的需要,讓我們從現實的壓力中解脫出來,感受到輕鬆、愉悅。做為設計師,也需要與時俱進,盡可能多地去感受生活,捕捉瞬間,不斷創造出有情懷的作品,給我們的用戶帶去更多快樂體驗。

關於doodle的設計理論和設計方法肯定非常多,水平所限,這裏只是介紹幾種。歡迎大家隨時拍磚~~

 

本文由 @途牛用戶體驗中心(微信公眾號:途牛用戶體驗中心) 授權發佈於人人都是產品經理。未經許可,禁止轉載。