大家好啊，抖音最近上线了网页版 www.douyin.com , 为了方便叙述，下文将会简称"网页版"，在试用了一段时间之后，我想可以分享关于这个产品的交互细节，以及我试用后的感受。
细节一：完整的网页交互体验
这一点乍听之下好像很奇怪，但是，抖音是从移动端做起来的产品，体验策略都是基于手机用户来制定的，能够做出一个完整体验的网页版，从制定策略和实施计划，调动内部资源的角度来看，想必也是经过深思熟虑的。我举三个他们网页版功能界面的例子：
｜登录页面
｜首页
｜播放页
以上是抖音网页版核心功能的页面，从弹窗、导航菜单、播放页的操作区域来看，是遵循了网页设计的规范，而非照搬移动端的界面。在肯定了这一点之后，再谈具体的功能细节，能够给予大家一个从全局到单个细节的感受。
细节二：打造极具细节的核心功能「视频播放」
抖音网页版的核心功能是视频播放，我是从导航菜单上几乎全是关于视频的分类这一点，得出的结论；那么，在打造这个核心功能的交互体验上，网页版又做了哪些细节呢？我们不妨来看看：
1. 对于核心场景「切换视频」的操作引导
网页版在用户初次进入播放页时，会提供一个关于「切换视频」功能的带动效的操作引导，这里有个关于功能上的取舍问题：
为什么是引导用户去「切换视频」，而不是引导用户怎么去使用播放功能呢？
我的看法是，对于用户打开网页版后，第一眼会看到的设计，需要做出非常清晰的取舍，也就是要给用户习惯对应上产品的功能，按照优先级排序，取出用户最常用的那个功能。抖音主打短视频的播放场景，用户使用移动端时， 在每个视频上停留的时间并不会太长，我在日常观察地铁上的人们刷抖音时，最常的一个交互习惯是：划。
由于抖音在做视频播放页设计时，将视频画面放大到了极高的比重，也就导致用户在打开一支视频时，首先会看到的是视频内容，而并不会过于关注视频的整体性，所谓"整体性"，就是指一支视频的标题、作者、简介、数据情况（播放量、点赞量、转发量）。基于这样的用户习惯，同时考虑到抖音绝大部分用户都是先使用的移动端然后才使用网页版，也就决定了在网页版上，视频播放的核心场景是「切换视频」，而新手引导也需要围绕这个功能来设计，确保产品能在用户初次使用产品时，能够抓住从移动端过来的老用户习惯，保证体验上的一致性。
2. 全局快捷键交互体系
网页版的快捷键操作除了在空格暂停、方向键控制播放之外，还包含了基于内容维度的快捷操作：按 F 进入作者主页，按 Z 点赞，按 X 评论，按 C 收藏。这里体现出的设计思考是：在设计快捷键交互时，比起从操作主体——视频本身去思考如何设计快捷键，还可以从更为全面的体验流程维度——用户看视频时需要有基于键盘控制的快捷操作，看完视频后也会有相应的快捷操作，这是一种更为全面的设计思考，值得我们在工作过程中去借鉴和反思。
另外，我们可以看到这里面唯一缺少的是转发的快捷操作，我也好奇为什么会缺少，于是，我将鼠标移入转发icon上看，发现了一个细节：
用户需要转发时，是需要扫码或者复制一个视频链接到微信或者QQ上，这个是功能的既定逻辑，快捷键的设计，需要基于功能逻辑来做。假设转发操作提供了一个快捷键，例如是K，按下之后，用户仍然不能使用键盘开始转发操作，还是需要将鼠标移到复制按钮上进行复制操作，甚至扫码。也就是说，用户在这个场景中，并不能像前面的进入主页、收藏、评论一样，仅使用键盘就能开始或完成操作（对于评论场景来说是开始，因为评论场景需要用户进一步使用键盘输入评论内容），既然这样，那就不符合"快捷"的目标了。
或许再提升一点的话，可以将复制按钮也加入快捷操作体系中，但是这样做会有个问题：转发是需要对接外部的，属于离开当前系统，会且需要提醒用户关注的操作，这个时候，继续使用快捷键操作，或许不太合适。
3. 默认不立即播放视频
网页版播放默认设置为打开第一个视频时，不立即开始播放，这一点与移动端不同，考虑到网页版多数情况下都是连接有线网络或者Wi-Fi使用，排除节省流量的可能性，那么有可能是为了给予用户一个反应时间；这一点需要结合播放视频时的音量调节功能来谈，网页版针对音量打开提供了一个选项：默认打开或者默认关闭（触发条件不明，我只尝试了第一次，没法触发第二次，所以没有截图😢），这个设计的出发点，我认为是好的，在电脑上打开一个网页就马上开始播放，有可能用户还没来得及校准音量，造成不好影响。
细节三：不一样的动态封面设计
如图所示，网页版的封面在鼠标移入/未移入两个状态时，提供了截然不同的交互效果：默认状态下，封面不会播放视频内容，因为此时用户还没有决定与视频产生互动，那么，在用户对标题、作者暂时无感时，怎么样做可以引起用户注意呢？网页版封面给出的回答是：展示视频的点赞量和视频时长，展示点赞量是希望用户能够从点赞量这个数据上了解到视频的热门程度，进一步引起用户的从众心理；而展示时长则是给予用户一个对观看视频耗时的心理预期，这是为了回答用户在真正点击视频前，心里的两个问题：我为什么要看这个视频？看这个视频会需要多长时间？
而当用户将鼠标移入封面时，意味着用户可能想开始看这个视频，于是封面处开始播放视频，这是对用户下一步动作的预测，目的是更快地将内容传播到用户眼前，有了以上的设计，如果加上系统级的算法干预，将能够创作吸引人眼球的封面的作者以及作品推到用户眼前，将会让网页版的内容传播更有效率，而要做到这一点，前期对于用户体验的过程思考是必不可少的，也就是在设计阶段，就需要考虑清楚，这个功能怎样设计，才能满意用户在看视频前——看视频时——看视频后过程中的不同预期。关于这一点，我想也能带给各位交互设计师一些反思，在进行产品设计，特别是0-1阶段时，很多时候我们都需要跟产品同事一起去思考产品在功能上更为长期的布局，做出可持续的交互设计。
尾巴
我在体验这个产品时，感受到了久违的清爽，这种感受来自于它极为克制和清晰的功能架构，以及对当下功能对于细节体验上的追求，以至于我的脑海里甚至有个画面：产品经理、交互设计师一起做出了逻辑极为清晰的功能设计，视觉设计师和研发负责将其落地，造就了目前的它。这里面一定有数不清的内部讨论和与外部（指运营、增长部门）的较量，能够在大团队里面，在孵化出一个极为重量级的移动端产品后，还能做出一个这么克制的网页版，从架构层面到落地层面，能够完成一致的信息交换，是一件了不起的事。
OK，关于抖音网页版的交互设计细节大致上就是以上内容，不排除有些是个人过度解读，当作一个参考也未尝不可。如果你对这个产品还有更多想法💡，欢迎评论或者在即刻上找我，我的ID是： 显济Jeffery ，感谢你的阅读。
