兩個(gè)層面分析:抖音的交互設(shè)計(jì)

17 評論 22753 瀏覽 95 收藏 7 分鐘
🔗 产品经理专业技能指的是:需求分析、数据分析、竞品分析、商业分析、行业分析、产品设计、版本管理、用户调研等。

啤酒小龍蝦,抖友是一家!作為一名資深抖友,今天就把咱抖音的交互折騰折騰!

首先我們羅列出抖音的大部分主體功能:

從產(chǎn)品層面來看,大家去抖音的一般有兩個(gè)操作:

  1. 看視頻,刷抖音;
  2. 自主拍視頻或者挑戰(zhàn)榜單。

第一個(gè)層面

抖音首頁有【推薦】、【附近】兩個(gè)Tab,推薦的算法據(jù)說是采用【今日頭條】算法,在播放率和播放時(shí)長上進(jìn)行權(quán)重分析。如果在附近被看的次數(shù)多播放時(shí)間長,就會(huì)推薦給更多的類似用戶,通過這樣的數(shù)據(jù)分析。若推薦出去之后播放次數(shù)和播放時(shí)長是增加的,那就會(huì)不斷良性循環(huán);若播放次數(shù)和時(shí)長是減少的,則惡心循環(huán)至冷藏!

回到話題,基于展示以及內(nèi)容上傳的兩個(gè)因素,對首頁交互進(jìn)行分析:

Tab改善

  • 原本:首頁、關(guān)注、拍照、信息、我的;
  • 現(xiàn)在:首頁、挑戰(zhàn)、信息、我的。

原型稿如下:

首頁變化:

  1. 隱藏本身首頁的搜索/拍照等按鈕,將關(guān)注、附近、推薦整合到首頁,方便瀏覽,對內(nèi)容的入口進(jìn)行統(tǒng)一;
  2. 簡化原有的底部菜單欄(現(xiàn)在底部菜單欄很不明顯),突出顯示【挑戰(zhàn)】激勵(lì)用戶進(jìn)行視頻拍攝上傳,點(diǎn)擊【挑戰(zhàn)】直接進(jìn)入這個(gè)模板的拍攝界面;
  3. 增加菜單收納,將【我的】、【挑戰(zhàn)】、【信息】收納起來,簡化頁面的按鈕操作,盡可能的減少對視頻界面的干擾;
  4. 左滑進(jìn)入【挑戰(zhàn)】、【新作品】的入口,方便快速進(jìn)行視頻上傳,目前版本點(diǎn)擊中間版本會(huì)不知道如何選擇,上傳作品的入口明顯化;
  5. 右滑進(jìn)入視頻的音樂介紹頁,這里可以關(guān)注用戶并了解更多視頻,隱藏掉部分用戶的名稱等隱私信息,主要突出視頻以及音樂,這里可以為以后的音樂交流留下伏筆。

總結(jié):首頁信息盡可能的將界面留給視頻展示,將視頻瀏覽入口統(tǒng)一,盡可能明顯提示視頻上傳入口,信息明確化。

附近/關(guān)注

介于附近和關(guān)注與首頁在同一個(gè)Tab下,因此借用首頁的模式進(jìn)行優(yōu)化。

  1. 附近的list進(jìn)行播放的時(shí)候,當(dāng)前播放的音樂以及用戶名同樣是可以在底部進(jìn)行展示,與首頁具有統(tǒng)一性;
  2. 關(guān)注用戶的list在頂部增加關(guān)注用戶端頭像,進(jìn)行關(guān)注用戶的展示;
  3. 保留現(xiàn)有的附近以及關(guān)注的展示形式不變,避免太大改動(dòng),讓用戶不適。

第二個(gè)層面

上傳界面

目前抖音的上傳有三個(gè)地方:

  1. 右滑進(jìn)入拍攝狀態(tài);
  2. 底部【+】號彈框右上角【開拍】;
  3. 頂部左上角的相機(jī)。

三個(gè)拍照機(jī)制不統(tǒng)一,且內(nèi)容混亂,拍照以及榜單等等雜糅在一起,因此對此進(jìn)行改進(jìn)。

根據(jù)信息羅列,我們可以看到主要操作為上傳拍照以及音樂選擇,那么問題簡單了,更改過后的界面如下圖所示:

  1. 刪掉原有界面右上角的開拍按鈕,并在首頁進(jìn)行【拍攝】前置,進(jìn)入此界面后,主要是希望用戶能夠產(chǎn)生更多的新內(nèi)容,因此榜單等內(nèi)容展示就是重點(diǎn),同時(shí)調(diào)整【上傳】入口,方便用戶上傳舊視頻;
  2. 調(diào)整原有的導(dǎo)航分類,讓界面更多的去展示音樂列表,引導(dǎo)用戶選擇音樂,并進(jìn)行視頻拍攝;
  3. 在列表中增加【拍攝】按鈕,直接點(diǎn)擊拍攝;
  4. 在上傳時(shí)增加標(biāo)簽分類,便于后續(xù)的視頻內(nèi)容整理和管理,同標(biāo)簽的內(nèi)容可以做成合集,增加內(nèi)容的豐富度。

小結(jié)

關(guān)于交互:抖音拍攝環(huán)節(jié)設(shè)置的比較好,只是在流程中的入口以及內(nèi)容展示上存在混亂的情況,通過梳理內(nèi)容及操作,可以擁有更好的體驗(yàn)。

但從另一個(gè)緯度去理解,抖音的混亂,有自己的風(fēng)格,并且被用戶所接受,如果利用條條框框進(jìn)行約束,又會(huì)讓人覺得同質(zhì)化現(xiàn)象。

 

本文由 @kyd0311 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自網(wǎng)絡(luò)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 18年4月24號的稿子 ,為啥跟現(xiàn)在抖音界面不一樣,首頁右上角有收縮按鈕,底部也不一樣 ,真的是擼的飛機(jī)稿嗎 ??

    來自廣東 回復(fù)
    1. 是擼的啊。。。反正不是現(xiàn)在的版本。。。。哈哈

      來自廣東 回復(fù)
    2. 賤的想給你一個(gè)??

      來自廣東 回復(fù)
  2. 調(diào)研的是最新版的??

    來自北京 回復(fù)
    1. 不是,是用的不爽,擼的飛機(jī)稿

      來自廣東 回復(fù)
  3. 滴 滴滴滴

    回復(fù)
  4. 請教下:最后的APP界面交互圖怎么做的?

    回復(fù)
    1. axure可以直接畫 有連線功能

      回復(fù)
  5. 把上傳放在挑戰(zhàn)和新作品的那個(gè)界面會(huì)感覺更方便

    回復(fù)
    1. 有道理~~~

      來自廣東 回復(fù)
    2. ?? ??

      來自廣東 回復(fù)
  6. 我安裝了一個(gè)假的抖音嗎?為什么和你展示的交互不一樣呢? :mrgreen:

    來自北京 回復(fù)
    1. 哈哈,這個(gè)交互式不存在的

      來自廣東 回復(fù)
  7. 嘀 嘀嘀

    來自北京 回復(fù)
  8. 兄弟,你比我還懂得多啊

    來自廣東 回復(fù)
    1. 滴,滴滴!
      春風(fēng)吹楊柳。。

      回復(fù)
    2. 滴,滴滴~~

      來自廣東 回復(fù)
专题
12426人已学习14篇文章
近年来,盲盒大量出现在公众视野,引起了一波又一波消费热潮。本专题的文章分享了解读盲盒营销。
专题
14729人已学习15篇文章
智能硬件产品经理需要做什么工作内容呢?与互联网产品经理有什么区别呢?本专题为刚入行的智能硬件产品经理分享了入门指南。
专题
18414人已学习13篇文章
AI产品经理的核心目的是通过AI技术创造和优化产品服务,丰富技术知识可以让自己在工作中拥有更多话语权。本专题的文章分享了AI产品经理需要掌握的AI技术。
专题
34860人已学习13篇文章
有多少用户痛点,你是听回来的,而不是经过深思过后找出来的。
专题
19655人已学习13篇文章
什么是中台?为什么要建中台?中台建设的切入点在哪?本专题的文章将提供这些问题的解答。
专题
19820人已学习18篇文章
物流仓储系统是实现物流高效运转的基础。本专题的文章提供了物流仓储系统设计指南。