两个层面分析:抖音的交互设计

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

啤酒小龙虾,抖友是一家!作为一名资深抖友,今天就把咱抖音的交互折腾折腾!

首先我们罗列出抖音的大部分主体功能:

从产品层面来看,大家去抖音的一般有两个操作:

  1. 看视频,刷抖音;
  2. 自主拍视频或者挑战榜单。

第一个层面

抖音首页有【推荐】、【附近】两个Tab,推荐的算法据说是采用【今日头条】算法,在播放率和播放时长上进行权重分析。如果在附近被看的次数多播放时间长,就会推荐给更多的类似用户,通过这样的数据分析。若推荐出去之后播放次数和播放时长是增加的,那就会不断良性循环;若播放次数和时长是减少的,则恶心循环至冷藏!

回到话题,基于展示以及内容上传的两个因素,对首页交互进行分析:

Tab改善

  • 原本:首页、关注、拍照、信息、我的;
  • 现在:首页、挑战、信息、我的。

原型稿如下:

首页变化:

  1. 隐藏本身首页的搜索/拍照等按钮,将关注、附近、推荐整合到首页,方便浏览,对内容的入口进行统一;
  2. 简化原有的底部菜单栏(现在底部菜单栏很不明显),突出显示【挑战】激励用户进行视频拍摄上传,点击【挑战】直接进入这个模板的拍摄界面;
  3. 增加菜单收纳,将【我的】、【挑战】、【信息】收纳起来,简化页面的按钮操作,尽可能的减少对视频界面的干扰;
  4. 左滑进入【挑战】、【新作品】的入口,方便快速进行视频上传,目前版本点击中间版本会不知道如何选择,上传作品的入口明显化;
  5. 右滑进入视频的音乐介绍页,这里可以关注用户并了解更多视频,隐藏掉部分用户的名称等隐私信息,主要突出视频以及音乐,这里可以为以后的音乐交流留下伏笔。

总结:首页信息尽可能的将界面留给视频展示,将视频浏览入口统一,尽可能明显提示视频上传入口,信息明确化。

附近/关注

介于附近和关注与首页在同一个Tab下,因此借用首页的模式进行优化。

  1. 附近的list进行播放的时候,当前播放的音乐以及用户名同样是可以在底部进行展示,与首页具有统一性;
  2. 关注用户的list在顶部增加关注用户端头像,进行关注用户的展示;
  3. 保留现有的附近以及关注的展示形式不变,避免太大改动,让用户不适。

第二个层面

上传界面

目前抖音的上传有三个地方:

  1. 右滑进入拍摄状态;
  2. 底部【+】号弹框右上角【开拍】;
  3. 顶部左上角的相机。

三个拍照机制不统一,且内容混乱,拍照以及榜单等等杂糅在一起,因此对此进行改进。

根据信息罗列,我们可以看到主要操作为上传拍照以及音乐选择,那么问题简单了,更改过后的界面如下图所示:

  1. 删掉原有界面右上角的开拍按钮,并在首页进行【拍摄】前置,进入此界面后,主要是希望用户能够产生更多的新内容,因此榜单等内容展示就是重点,同时调整【上传】入口,方便用户上传旧视频;
  2. 调整原有的导航分类,让界面更多的去展示音乐列表,引导用户选择音乐,并进行视频拍摄;
  3. 在列表中增加【拍摄】按钮,直接点击拍摄;
  4. 在上传时增加标签分类,便于后续的视频内容整理和管理,同标签的内容可以做成合集,增加内容的丰富度。

小结

关于交互:抖音拍摄环节设置的比较好,只是在流程中的入口以及内容展示上存在混乱的情况,通过梳理内容及操作,可以拥有更好的体验。

但从另一个纬度去理解,抖音的混乱,有自己的风格,并且被用户所接受,如果利用条条框框进行约束,又会让人觉得同质化现象。

 

本文由 @kyd0311 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自网络

赞赏是对原创者的最大认可
6人打赏
评论
欢迎留言交流
  1. 18年4月24号的稿子 ,为啥跟现在抖音界面不一样,首页右上角有收缩按钮,底部也不一样 ,真的是撸的飞机稿吗 :x

    回复
    1. 是撸的啊。。。反正不是现在的版本。。。。哈哈

      回复
    2. 贱的想给你一个👍

      回复
  2. 调研的是最新版的??

    回复
    1. 不是,是用的不爽,撸的飞机稿

      回复
  3. 滴 滴滴滴

    回复
  4. 请教下:最后的APP界面交互图怎么做的?

    回复
    1. axure可以直接画 有连线功能

      回复
  5. 把上传放在挑战和新作品的那个界面会感觉更方便

    回复
    1. 有道理~~~

      回复
    2. ;-) ;-)

      回复
  6. 我安装了一个假的抖音吗?为什么和你展示的交互不一样呢? :mrgreen:

    回复
    1. 哈哈,这个交互式不存在的

      回复
  7. 嘀 嘀嘀

    回复
  8. 兄弟,你比我还懂得多啊

    回复
    1. 滴,滴滴!
      春风吹杨柳。。

      回复
    2. 滴,滴滴~~

      回复