2017-8-17 用心設(shè)計(jì)
導(dǎo)語
QQ在很多人眼里是聊天的工具，那么在聊天這個(gè)看似簡(jiǎn)單的領(lǐng)域，究竟還能做什么創(chuàng)新功能？在此分享一下QQiPad版v6.7版本的主功能，同時(shí)也是設(shè)計(jì)側(cè)主導(dǎo)的創(chuàng)新功能——“來斗”的設(shè)計(jì)總結(jié)，希望給大家一些靈感和啟發(fā)。
背景
QQiPad版經(jīng)過不斷迭代，功能日趨完善，我們希望在此基礎(chǔ)上繼續(xù)挖掘創(chuàng)新點(diǎn)，給用戶提供更爽更有趣的體驗(yàn)，為此做了一些調(diào)研和探索，得到了一些有用的結(jié)論：
1. QQiPad版的活躍用戶呈年輕化趨勢(shì)，90后00后是主力軍
今年五月份ISUX北京設(shè)計(jì)部針對(duì)QQiPad版用戶做了一次調(diào)研，調(diào)研結(jié)果發(fā)現(xiàn)，QQiPad版的活躍用戶集中在90后00后這兩個(gè)群體，偏年輕化。
2. 90后00后年輕人聊天熱衷斗圖，“斗圖”已經(jīng)成為一種聊天文化
3. 已有App試水表情包制作的功能，但路徑長(zhǎng)，體驗(yàn)差
目前主打斗圖功能的App中，大部分為表情庫，少部分提供簡(jiǎn)單的表情制作功能，以轉(zhuǎn)發(fā)形式發(fā)送。聊天過程中使用這些app獲得表情包時(shí)，需要在兩個(gè)app之間反復(fù)跳轉(zhuǎn)，即時(shí)性低，體驗(yàn)很差。
結(jié)合這三點(diǎn)發(fā)現(xiàn)，我們認(rèn)為在QQ上做斗圖功能是一個(gè)值得切入的角度，因此我們進(jìn)一步做了用戶調(diào)研，進(jìn)一步了解現(xiàn)階段QQ用戶對(duì)聊天里斗圖及制作表情包的看法，得到如下結(jié)論：
1. QQ用戶經(jīng)常在聊天中斗圖
2. 合適的配文、搞笑的臉部表情、熟人素材是表情包獲得共鳴的三大特點(diǎn)
3. 多數(shù)用戶DIY過表情或動(dòng)過DIY的念頭
4. 多數(shù)用戶因?yàn)闆]有合適的工具而放棄了制作表情的念頭
這些結(jié)論說明QQ用戶在聊天時(shí)不僅經(jīng)常斗圖，還希望能自制表情包，但現(xiàn)有的表情包工具體驗(yàn)不佳，無法滿足用戶的需求。因此，如果能夠在QQ上降低制作表情包和發(fā)送表情包的門檻，大量潛在的“表情包用戶”創(chuàng)作欲望將被激活，參與到這場(chǎng)表情包的“戰(zhàn)斗”中來。
目標(biāo)用戶屬性
在開始設(shè)計(jì)功能之前，我們進(jìn)一步分析了斗圖目標(biāo)用戶的屬性，明確他們需求，根據(jù)需求進(jìn)行設(shè)計(jì)。
根據(jù)以往的經(jīng)驗(yàn)，一般用戶產(chǎn)生專業(yè)內(nèi)容的社區(qū)，有10%的用戶產(chǎn)生內(nèi)容，90%的用戶參與，而在10%的用戶中，有1%的人以意見領(lǐng)袖的形式存在。
在表情包領(lǐng)域，也存在著相似的規(guī)律。
處于金字塔頂端的是 “達(dá)人用戶”，擁有強(qiáng)烈的創(chuàng)作欲望和發(fā)起話題欲望，有合適的素材便會(huì)動(dòng)手創(chuàng)作，為了達(dá)到目的甚至?xí)枚鄠€(gè)App進(jìn)行創(chuàng)作，不在乎成本，只在乎結(jié)果是否好玩、能否彰顯自己引領(lǐng)聊天節(jié)奏的地位；
接下來是“活躍用戶”，他們對(duì)表情包有較強(qiáng)的認(rèn)知，雖然較少主動(dòng)發(fā)起斗圖，但是容易被帶動(dòng)起來，成為活躍的參與者和斗圖的主力軍；
剩下的便是90%的“圍觀用戶”，他們創(chuàng)作欲望不高，更多是以轉(zhuǎn)發(fā)表情包的形式參與斗圖，追求簡(jiǎn)單快速低成本。
功能定位&交互設(shè)計(jì)
1. 迎合表情包文化，制作用戶喜歡的表情包
通過用戶調(diào)研結(jié)果了解，合適的配文、搞笑的面部表情、熟人素材是一個(gè)表情包成功的關(guān)鍵因素；縱觀這幾年的表情包文化發(fā)展，從最開始的暴漫，到現(xiàn)在廣為流傳的蘑菇頭、熊貓頭表情包，其模式都是“夸張的肢體簡(jiǎn)筆畫+搞笑的面部表情+恰到好處的文案”，已經(jīng)成為斗圖表情包的主流形態(tài)，通過這種方式來表達(dá)自己的情感和想法，甚至不需要打字就能夠聊上一整天。
因此，我們決定順應(yīng)斗圖文化，為用戶提供能夠快速制作主流表情包（面部表情+身體+文案）的功能。
2. 讓90%的“圍觀用戶”能一鍵斗圖
前文提到，90%的用戶為“圍觀用戶”，他們參與但不主動(dòng)發(fā)起斗圖，追求簡(jiǎn)單快速，為了讓他們參與斗圖，需要設(shè)計(jì)一個(gè)門檻極低的斗圖功能，做到一鍵就能斗圖。
在聊天中，將帶人臉的照片作為觸發(fā)元素，通過規(guī)則約束，匹配出適合惡搞的場(chǎng)景，再利用臉部圖像識(shí)別和摳圖技術(shù)，快速匹配素材和文案，一鍵發(fā)送，激活斗圖氣氛。
3. 為1%的“達(dá)人用戶”提供相對(duì)完善的創(chuàng)作條件
達(dá)人用戶是最熱衷創(chuàng)作表情包的一波人，網(wǎng)絡(luò)上流傳的表情包大部分出自他們之手，相比創(chuàng)作難度，他們更關(guān)注能否產(chǎn)出理想效果的表情包表達(dá)自己的情感和想法，因此，需要為他們?cè)O(shè)計(jì)一個(gè)難度適中的編輯功能，同時(shí)為他們提供基礎(chǔ)素材，滿足他們從無到有創(chuàng)作和表達(dá)的欲望。
視覺設(shè)計(jì)
1. icon設(shè)計(jì)
斗圖功能的icon設(shè)計(jì)充滿挑戰(zhàn)：
（1） 圖形上需要充分表現(xiàn)斗圖這一行為的特點(diǎn)；
（2） 圖形要足夠有吸引力，讓用戶有點(diǎn)擊的欲望；
（3） 斗圖功能入口眾多，分布在不同的界面，這些界面上的圖標(biāo)都有其風(fēng)格，因此設(shè)計(jì)的圖形必須有較強(qiáng)的拓展性。
這些挑戰(zhàn)也是明確的目標(biāo)，基于這三個(gè)目標(biāo)，開始著手斗圖功能的icon設(shè)計(jì)。
開始設(shè)計(jì)之前先梳理一遍icon的使用場(chǎng)景，了解各自特點(diǎn)。（虛線部分為icon位置）
了解應(yīng)用場(chǎng)景后開始進(jìn)行發(fā)散，從斗圖的三個(gè)維度去發(fā)散圖形創(chuàng)意。
根據(jù)這三個(gè)方向搜集相應(yīng)的圖片作為參考：
根據(jù)設(shè)想的維度和參考的元素繪制圖標(biāo)，將他們進(jìn)行不同程度的結(jié)合，繪制了多個(gè)方案。
對(duì)各個(gè)方案進(jìn)行比較之后，選出了這兩個(gè)方案進(jìn)一步做結(jié)合，前者能更直觀地表現(xiàn)斗圖這一行為，而后者的表情給人一種嘲諷的感覺，更符合斗圖的氣質(zhì)。
結(jié)合后以拿著劍的挑釁臉小人形象呈現(xiàn)，并根據(jù)不同使用場(chǎng)景進(jìn)行了延展。
項(xiàng)目組內(nèi)小范圍測(cè)試了一下，得到一些比較積極的反饋：“這個(gè)表情特別賤”、“忍不住就想點(diǎn)”、“可以的”……說明設(shè)計(jì)結(jié)果與目標(biāo)相符。
2. 界面設(shè)計(jì)
聊天觸發(fā)界面
一鍵生成表情包演示(gif)
首次出現(xiàn)引導(dǎo)(gif)
編輯界面
為了獲得更佳沉浸的編輯體驗(yàn)，將主界面定為深色調(diào)；同時(shí)為了強(qiáng)化發(fā)送，采用了更加突出的按鈕樣式設(shè)計(jì)。
3. 素材設(shè)計(jì)
預(yù)設(shè)素材的設(shè)計(jì)重心在于身體素材的繪制。搜集網(wǎng)絡(luò)上比較火的表情包進(jìn)行分析，發(fā)現(xiàn)以下特點(diǎn)：
（1） 風(fēng)格略“糙”，多為簡(jiǎn)筆畫；
（2） 形體夸張，體現(xiàn)在動(dòng)作和身體比例上；
（3） 視覺感受偏“賤”和“萌”。
結(jié)合身邊年輕人對(duì)這些表情包特點(diǎn)的評(píng)價(jià)，還可以了解到他們發(fā)送表情包的的訴求主要是為了有趣地表達(dá)自己的情感，糙、夸張、賤萌的表情包很好地滿足了他們的訴求。基于這三個(gè)特點(diǎn)我們進(jìn)行了大量的嘗試：
繪制完之后又在內(nèi)部進(jìn)行小范圍的評(píng)選，以了解大家對(duì)這些素材的接受程度和反饋。
除此之外我們還對(duì)不同類型的素材數(shù)量進(jìn)行了比例分配。斗圖時(shí)，表情包大致分為三類，使用數(shù)量上有以下特征：
（1） 嘲諷型表情包居多，互相嘲諷是斗圖常態(tài)
（2） 過渡型表情次之，經(jīng)常需要它們來切換話題／挽尊
（3） 懟人型表情最少，只有特別熟的朋友才“械斗”
他們的比例大致為6:3:1。
經(jīng)過多方面的考慮，層層篩選，選出了50多個(gè)素材搭配文案進(jìn)行上線，展示如下。由于用戶喜好和理解的笑點(diǎn)多種多樣、同時(shí)網(wǎng)絡(luò)上的新梗層出不窮、再加上初次繪制素材經(jīng)驗(yàn)有限，上線的素材可能無法完全貼合所有用戶的喜好，但不管怎樣，這只是一個(gè)開始，我們將根據(jù)上線后的使用情況和用戶反饋，進(jìn)一步豐富素材庫，繼續(xù)提高“來斗”功能的可玩性。
4. 官網(wǎng)設(shè)計(jì)
為了配合宣傳，對(duì)官網(wǎng)也做了一次風(fēng)格更新，采用黃黑為主色調(diào)，搭配表情包形象，營(yíng)造一種年輕活力的感覺，貼合本期斗圖的主題。
結(jié)語
“來斗”作為設(shè)計(jì)側(cè)主導(dǎo)的創(chuàng)新項(xiàng)目，從創(chuàng)意發(fā)散、提案、設(shè)計(jì)到項(xiàng)目落地，設(shè)計(jì)側(cè)全程跟進(jìn)，收獲滿滿。作為一個(gè)創(chuàng)新導(dǎo)向的設(shè)計(jì)團(tuán)隊(duì)，我們希望用更多好玩的創(chuàng)新點(diǎn)子，讓QQ聊天更加有趣。而本次項(xiàng)目的順利落地，讓我們堅(jiān)定了創(chuàng)新的方向，同時(shí)對(duì)后續(xù)繼續(xù)創(chuàng)新充滿了期待。
在此感謝項(xiàng)目組成員們的辛勤工作，讓項(xiàng)目能夠順利落地。讓我們繼續(xù)為更好的體驗(yàn) 努
騰訊ISUX北京設(shè)計(jì)中心
藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net