体验版本：V 1.8.7（一不小心更新了一个版本，好在没有特别大的改变）
体验机型：iPhone8 （IOS 11.4）
体验环境：wifi
这次要开始逐步分析主题内容了，从骨架开始梳理四肢，本篇将着重分析一级导航的首页部分，由首页延伸的部分更深层级结构图没有涉及，文中会提到。
二级导航使用混合导航，中间是文字的Tab标签导航，两边是层级更深的功能操作icon，第一次进入默认推荐Tab。
我理解这是一个混合导航吧，中间是一个对庞大视频流起筛选作用的Tab标签导航，用于内容筛选，梳理页面逻辑。第一次打开抖音默认进入推荐tab的内容，理由我觉得应该是推荐的内容质量更高，更容易让人沉迷。这里并没有采用左右滑动切换tab大概是因为这两个tab切换的频率不会太高，附近的优先级也不会比互动（关注作者）更高。
头部的最左边是一个拍摄故事的icon，点击后可以看到别人拍摄的故事，同时也有自己拍摄的入口，这是一个使用频率比较低的功能，但相比较正式的拍摄视频，仅展示24小时的视频会更加轻松，是不可或缺的一部分功能（毕竟ins，snap，微博都有这个功能，属于短视频的另一种玩法），头部右边是搜索的icon，操作后会出现全屏弹框，这两个功能频率不会太高所以不会很突出。
在我关手机的一瞬间发现多了一个热门直播的入口，和故事放在一起，不知道要搞什么大事情。
再来看看首页整体：
视频全屏页面一共四种手势交互：滑动，双击，单击，长按：
左滑进入拍摄我的故事；右滑进入作者主页；上下滑切换视频；双击点赞；单击暂停/开始；长按出现不感兴趣btn
对于寸土寸金的移动端，善用手势交互可以带来信息的最大化展示，减少各种操作入口的占地位置。我就不截图了，大家可以都试试，如果发现新的也可以留言告诉我。
视频全屏页面的文字和Icon设计
为了最大化展示主要内容：视频，抖音在icon和文字的设计上除了要突出的内容都用了白色带透明度，icon还用了镂空的设计，
而作者名和视频介绍为了在不做突出的情况下区分，抖音设计用了很讨巧的方法：在名字前加了一个 " @ " 的符号，" @ " 的功能大家已经都很熟悉了，自然在这里也不会和其他文字混淆在一起，而下面的音乐则用了加icon和滚动的方式区分，旁边还有旋转CD的样式入口。
视觉上看整个首页推荐里，最吸引注意力的除了视频本身之外就是话题，音乐，未关注作者的“➕”了，前两个之所以做成这样的样式应该也是因为要鼓励用户去参与不同的玩法输出内容以形成一个闭环，至于关注的ICON做的显眼，从用户角度来说就是好找，从产品角度就是可以形成互动。
有时候分享的ICON会变成一个朋友圈的动态ICON，也是很好的吸引了注意，快速吸引用户注意的方式：动态和色彩，这一点在整个页面都可以体现。
附近页面的布局
附近相比推荐的内容质量不会太高，所以采用了瀑布流式布局，每一页展示的视频更多，用户筛选的效率更高，为了内容更加突出且不显得死板，虽然小尺寸的视频无法直接播放，但是抖音选用了gif形式来做视频的封面。
弹出控件使用底部动作栏
操作后的弹出控件（也就是模态，但是我觉得叫弹出控件比较好理解）对评论和转发进行操作后会弹出底部动作栏，这样可以展示更多内容，形式也可以多变，（说起来分享里面真的是紧紧抱住腾讯爸爸的大腿啊……）
其实我不太明白合拍和不感兴趣的层级为什么这么深……而且放在分享里面……让我有些费解。
最后说说万恶之源-刷新
抖音的推荐相当于筛选过节目的调频电视，让你看的停不下来，更可怕的他还有基本不会重播的电视节目。
上滑刷新，断网后的首页我试着刷了一下，发现会缓存十个左右的视频，全部都会提前加载出来文字内容，只是前三个左右的视频会只有第一帧，音频也会停止动画，不能播放，剩下的视频都会用占位图代替，也就是说，你在刷n个视频的时候，后面n+10个视频的部分内容都会提前加载好，你刷视屏的正常速度是绝对不会超过都因为你加载视频的速度
下拉刷新（反正你怎么操作我都有办法刷新）如果太懒了不想一直上滑看新的视频，你也可以选择不断下拉刷新，这算是最传统的刷新方式了吧，正常的情况下，也都是可以刷到新内容的。
这好比两头都有卷，永远也扯不完的卫生纸……
这一次是分析了一些层级较高的内容，下一次会说一些深层级的，比如搜索点击后的全屏弹框，作者页面等。
有问题欢迎共同讨论。
网友评论