兩個層面分析:抖音的交互設計

17 評論 22488 瀏覽 95 收藏 7 分鐘

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

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

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

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

第一個層面

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

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

Tab改善

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

原型稿如下:

首頁變化:

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

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

附近/關注

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

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

第二個層面

上傳界面

目前抖音的上傳有三個地方:

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

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

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

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

小結(jié)

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

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

 

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

題圖來自網(wǎng)絡

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

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

      來自廣東 回復
    2. 賤的想給你一個??

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

    來自北京 回復
    1. 不是,是用的不爽,擼的飛機稿

      來自廣東 回復
  3. 滴 滴滴滴

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

    回復
    1. axure可以直接畫 有連線功能

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

    回復
    1. 有道理~~~

      來自廣東 回復
    2. ?? ??

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

    來自北京 回復
    1. 哈哈,這個交互式不存在的

      來自廣東 回復
  7. 嘀 嘀嘀

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

    來自廣東 回復
    1. 滴,滴滴!
      春風吹楊柳。。

      回復
    2. 滴,滴滴~~

      來自廣東 回復