上億人使用的QQ IPAD版「斗圖神器」原來是這么設(shè)計出來的

      作者:
      2017-08-16
      8395

      90后00后年輕人聊天熱衷斗圖,“斗圖”已經(jīng)成為一種聊天文化

      騰訊ISUX – EU:QQ在很多人眼里是聊天的工具,那么在聊天這個看似簡單的領(lǐng)域,究竟還能做什么創(chuàng)新功能?在此分享一下QQiPad版v6.7版本的主功能,同時也是設(shè)計側(cè)主導(dǎo)的創(chuàng)新功能——“來斗”的設(shè)計總結(jié),希望給大家一些靈感和啟發(fā)。

      背景

      QQiPad版經(jīng)過不斷迭代,功能日趨完善,我們希望在此基礎(chǔ)上繼續(xù)挖掘創(chuàng)新點,給用戶提供更爽更有趣的體驗,為此做了一些調(diào)研和探索,得到了一些有用的結(jié)論:

      1. QQiPad版的活躍用戶呈年輕化趨勢,90后00后是主力軍

      今年五月份ISUX北京設(shè)計部針對QQiPad版用戶做了一次調(diào)研,調(diào)研結(jié)果發(fā)現(xiàn),QQiPad版的活躍用戶集中在90后00后這兩個群體,偏年輕化。

      2. 90后00后年輕人聊天熱衷斗圖,“斗圖”已經(jīng)成為一種聊天文化

      3. 已有App試水表情包制作的功能,但路徑長,體驗差

      目前主打斗圖功能的App中,大部分為表情庫,少部分提供簡單的表情制作功能,以轉(zhuǎn)發(fā)形式發(fā)送。聊天過程中使用這些app獲得表情包時,需要在兩個app之間反復(fù)跳轉(zhuǎn),即時性低,體驗很差。

      uisdc-emoji-20170815-1.png


      結(jié)合這三點發(fā)現(xiàn),我們認(rèn)為在QQ上做斗圖功能是一個值得切入的角度,因此我們進(jìn)一步做了用戶調(diào)研,進(jìn)一步了解現(xiàn)階段QQ用戶對聊天里斗圖及制作表情包的看法,得到如下結(jié)論:

      QQ用戶經(jīng)常在聊天中斗圖

      合適的配文、搞笑的臉部表情、熟人素材是表情包獲得共鳴的三大特點

      多數(shù)用戶DIY過表情或動過DIY的念頭

      多數(shù)用戶因為沒有合適的工具而放棄了制作表情的念頭

      這些結(jié)論說明QQ用戶在聊天時不僅經(jīng)常斗圖,還希望能自制表情包,但現(xiàn)有的表情包工具體驗不佳,無法滿足用戶的需求。因此,如果能夠在QQ上降低制作表情包和發(fā)送表情包的門檻,大量潛在的“表情包用戶”創(chuàng)作欲望將被激活,參與到這場表情包的“戰(zhàn)斗”中來。

      目標(biāo)用戶屬性

      在開始設(shè)計功能之前,我們進(jìn)一步分析了斗圖目標(biāo)用戶的屬性,明確他們需求,根據(jù)需求進(jìn)行設(shè)計。

      根據(jù)以往的經(jīng)驗,一般用戶產(chǎn)生專業(yè)內(nèi)容的社區(qū),有10%的用戶產(chǎn)生內(nèi)容,90%的用戶參與,而在10%的用戶中,有1%的人以意見領(lǐng)袖的形式存在。

      01.png


      在表情包領(lǐng)域,也存在著相似的規(guī)律。

      處于金字塔頂端的是 “達(dá)人用戶”,擁有強烈的創(chuàng)作欲望和發(fā)起話題欲望,有合適的素材便會動手創(chuàng)作,為了達(dá)到目的甚至?xí)枚鄠€App進(jìn)行創(chuàng)作,不在乎成本,只在乎結(jié)果是否好玩、能否彰顯自己引領(lǐng)聊天節(jié)奏的地位;

      接下來是“活躍用戶”,他們對表情包有較強的認(rèn)知,雖然較少主動發(fā)起斗圖,但是容易被帶動起來,成為活躍的參與者和斗圖的主力軍;

      剩下的便是90%的“圍觀用戶”,他們創(chuàng)作欲望不高,更多是以轉(zhuǎn)發(fā)表情包的形式參與斗圖,追求簡單快速低成本。

      02.png


      功能定位&交互設(shè)計

      1. 迎合表情包文化,制作用戶喜歡的表情包

      通過用戶調(diào)研結(jié)果了解,合適的配文、搞笑的面部表情、熟人素材是一個表情包成功的關(guān)鍵因素;縱觀這幾年的表情包文化發(fā)展,從最開始的暴漫,到現(xiàn)在廣為流傳的蘑菇頭、熊貓頭表情包,其模式都是“夸張的肢體簡筆畫+搞笑的面部表情+恰到好處的文案”,已經(jīng)成為斗圖表情包的主流形態(tài),通過這種方式來表達(dá)自己的情感和想法,甚至不需要打字就能夠聊上一整天。

      03.png


      因此,我們決定順應(yīng)斗圖文化,為用戶提供能夠快速制作主流表情包(面部表情+身體+文案)的功能。

      順應(yīng)斗圖文化.png


      2. 讓90%的“圍觀用戶”能一鍵斗圖

      前文提到,90%的用戶為“圍觀用戶”,他們參與但不主動發(fā)起斗圖,追求簡單快速,為了讓他們參與斗圖,需要設(shè)計一個門檻極低的斗圖功能,做到一鍵就能斗圖。

      在聊天中,將帶人臉的照片作為觸發(fā)元素,通過規(guī)則約束,匹配出適合惡搞的場景,再利用臉部圖像識別和摳圖技術(shù),快速匹配素材和文案,一鍵發(fā)送,激活斗圖氣氛。

      05.png


      3. 為1%的“達(dá)人用戶”提供相對完善的創(chuàng)作條件

      達(dá)人用戶是最熱衷創(chuàng)作表情包的一波人,網(wǎng)絡(luò)上流傳的表情包大部分出自他們之手,相比創(chuàng)作難度,他們更關(guān)注能否產(chǎn)出理想效果的表情包表達(dá)自己的情感和想法,因此,需要為他們設(shè)計一個難度適中的編輯功能,同時為他們提供基礎(chǔ)素材,滿足他們從無到有創(chuàng)作和表達(dá)的欲望。

      06.png

      07.png


      視覺設(shè)計

      1. icon設(shè)計

      斗圖功能的icon設(shè)計充滿挑戰(zhàn):

      圖形上需要充分表現(xiàn)斗圖這一行為的特點。

      圖形要足夠有吸引力,讓用戶有點擊的欲望。

      斗圖功能入口眾多,分布在不同的界面,這些界面上的圖標(biāo)都有其風(fēng)格,因此設(shè)計的圖形必須有較強的拓展性。

      這些挑戰(zhàn)也是明確的目標(biāo),基于這三個目標(biāo),開始著手斗圖功能的icon設(shè)計。

      開始設(shè)計之前先梳理一遍icon的使用場景,了解各自特點。(虛線部分為icon位置)

      08.png


      了解應(yīng)用場景后開始進(jìn)行發(fā)散,從斗圖的三個維度去發(fā)散圖形創(chuàng)意。

      09.png


      根據(jù)這三個方向搜集相應(yīng)的圖片作為參考:

      向搜集相應(yīng)的圖片.png


      根據(jù)設(shè)想的維度和參考的元素繪制圖標(biāo),將他們進(jìn)行不同程度的結(jié)合,繪制了多個方案。

      10.png


      對各個方案進(jìn)行比較之后,選出了這兩個方案進(jìn)一步做結(jié)合,前者能更直觀地表現(xiàn)斗圖這一行為,而后者的表情給人一種嘲諷的感覺,更符合斗圖的氣質(zhì)。

      11.png


      結(jié)合后以拿著劍的挑釁臉小人形象呈現(xiàn),并根據(jù)不同使用場景進(jìn)行了延展。

      12.png


      項目組內(nèi)小范圍測試了一下,得到一些比較積極的反饋:“這個表情特別賤”、“忍不住就想點”、“可以的”……說明設(shè)計結(jié)果與目標(biāo)相符。

      2. 界面設(shè)計

      聊天觸發(fā)界面:

      13.png


      一鍵生成表情包演示(gif):

      14.gif


      首次出現(xiàn)引導(dǎo)(gif):

      15.gif


      編輯界面:

      為了獲得更佳沉浸的編輯體驗,將主界面定為深色調(diào);同時為了強化發(fā)送,采用了更加突出的按鈕樣式設(shè)計。

      編輯界面.png


      3. 素材設(shè)計

      預(yù)設(shè)素材的設(shè)計重心在于身體素材的繪制。搜集網(wǎng)絡(luò)上比較火的表情包進(jìn)行分析,發(fā)現(xiàn)以下特點:

      風(fēng)格略“糙”,多為簡筆畫。

      形體夸張,體現(xiàn)在動作和身體比例上。

      視覺感受偏“賤”和“萌”。

      視覺感受偏“賤”和“萌”.png


      結(jié)合身邊年輕人對這些表情包特點的評價,還可以了解到他們發(fā)送表情包的的訴求主要是為了有趣地表達(dá)自己的情感,糙、夸張、賤萌的表情包很好地滿足了他們的訴求。基于這三個特點我們進(jìn)行了大量的嘗試:

      16.png


      繪制完之后又在內(nèi)部進(jìn)行小范圍的評選,以了解大家對這些素材的接受程度和反饋。

      了解大家.png


      除此之外我們還對不同類型的素材數(shù)量進(jìn)行了比例分配。斗圖時,表情包大致分為三類,使用數(shù)量上有以下特征:

       嘲諷型表情包居多,互相嘲諷是斗圖常態(tài)。

      過渡型表情次之,經(jīng)常需要它們來切換話題/挽尊。

      懟人型表情最少,只有特別熟的朋友才“械斗”。

      他們的比例大致為6:3:1。

      17.png


      經(jīng)過多方面的考慮,層層篩選,選出了50多個素材搭配文案進(jìn)行上線,展示如下。由于用戶喜好和理解的笑點多種多樣、同時網(wǎng)絡(luò)上的新梗層出不窮、再加上初次繪制素材經(jīng)驗有限,上線的素材可能無法完全貼合所有用戶的喜好,但不管怎樣,這只是一個開始,我們將根據(jù)上線后的使用情況和用戶反饋,進(jìn)一步豐富素材庫,繼續(xù)提高“來斗”功能的可玩性。

      18.png


      4. 官網(wǎng)設(shè)計

      為了配合宣傳,對官網(wǎng)也做了一次風(fēng)格更新,采用黃黑為主色調(diào),搭配表情包形象,營造一種年輕活力的感覺,貼合本期斗圖的主題。

      官網(wǎng)設(shè)計.png


      5. 來斗功能演示Demo(視頻)

      QQiPad版“來斗”趣味斗圖功能演示_騰訊視頻

      結(jié)語

      “來斗”作為設(shè)計側(cè)主導(dǎo)的創(chuàng)新項目,從創(chuàng)意發(fā)散、提案、設(shè)計到項目落地,設(shè)計側(cè)全程跟進(jìn),收獲滿滿。作為一個創(chuàng)新導(dǎo)向的設(shè)計團(tuán)隊,我們希望用更多好玩的創(chuàng)新點子,讓QQ聊天更加有趣。而本次項目的順利落地,讓我們堅定了創(chuàng)新的方向,同時對后續(xù)繼續(xù)創(chuàng)新充滿了期待。


      0
      0
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務(wù)聯(lián)系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯(lián)系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學(xué)科技園東區(qū)9號樓2層

      版權(quán)信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號

      主站蜘蛛池模板: 人妻av无码一区二区三区| 日本欧洲视频一区| 久久久久成人精品一区二区| 亚洲乱码一区av春药高潮| 夜夜精品无码一区二区三区| 无码日韩人妻av一区免费| 亚洲综合无码精品一区二区三区| 成人免费视频一区| 久久精品免费一区二区| 精品福利一区二区三| 亚洲AV无码一区二区三区在线观看| 自拍日韩亚洲一区在线| 久久久无码一区二区三区| 国产一区二区内射最近更新| 久久精品国产一区二区三区不卡| 亚洲熟女乱色一区二区三区| 精品无人区一区二区三区| 久久一区二区三区免费播放| 手机看片福利一区二区三区| 国产福利电影一区二区三区久久久久成人精品综合 | 亚洲AV成人一区二区三区观看 | 国内精品无码一区二区三区| 一区二区三区精品高清视频免费在线播放 | 国产成人综合一区精品| 国产福利一区二区三区在线观看 | 成人H动漫精品一区二区| 国产日本亚洲一区二区三区| 精品无码一区二区三区爱欲九九| 亚洲日本精品一区二区| 精品永久久福利一区二区| 精品国产乱码一区二区三区 | av无码一区二区三区| 亚洲一区二区三区无码影院| 一区二区三区四区国产| 中文乱码精品一区二区三区 | 亚洲AV无码一区二区大桥未久| 男插女高潮一区二区| 国产精品久久无码一区二区三区网 | 亚拍精品一区二区三区| 日本一区二区三区不卡视频| 女人和拘做受全程看视频日本综合a一区二区视频 |