聊聊doodle的情感化設計
當情感化設計碰上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的設計理論和設計方法肯定非常多,水平所限,這里只是介紹幾種。歡迎大家隨時拍磚~~
本文由 @途牛用戶體驗中心(微信公眾號:途牛用戶體驗中心) 授權發布于人人都是產品經理。未經許可,禁止轉載。
不錯不錯,學習了
剛才以為標題寫錯了