|
|
|
|
短视频交互分析之 Twitter 与新浪微博 |
| |
|
作者：孟大伟 来源： 互联网er的早读课 发布于：2015-7-31 |
|
|
|
Twitter 版本：iOS Ver 6.31.7
新浪微博版本：iOS Ver 5.2.8
1.发布流程
发布流程：新浪微博提供了单独的预览页面，而 Twitter 则可在拍摄页面直接进行预览/编辑。
2.短视频入口
入口：
微博提供在发布页面提供『视频』icon（有意强调），但点击进入依然为相机页面，还需点击视频按钮文字或左滑才可进入拍摄页面。
Twitter 在发布页面只有『相机』icon，并未特别强调可录制短视频。
交互点击次数：
从首页至视频拍摄页面，两款产品均需 3 次点击才可进入。
3.拍摄页面
交互：
录制的交互均为【按住】拍摄。
当用户尝试点一下（Tap）拍摄按钮时两者交互有所区别：
微博无任何响应反馈（文字或动效），而 Twitter 会提示用户：长按以录制；同时拍摄按钮上圆圈会有一个弹动反馈，以吸引用户视觉注意力。
时长：
最短时长：微博为 3S(当不足 3 秒点击下一步会提示：视频至少摄 3S)；Twitter 最短时长无限制（1 秒也可以）；
最长时长：微博为 15 秒，Twitter 为 30 秒；
视频段落个数：在总时长时间内，两款产品对一个短视频所包含的段落个数没有限制；
时长信息提示：
微博为进度条提示。
Twitter 为计时数字，最后 10 秒数字会变成红底白字（据该视频功能 PM 所述为什么没有采用进度条：1.进度条会给用户一种焦虑感，或是感觉时间不够；2.在安卓中，需要等一会，摄像头才准备好录制，但是进度条已经开始填充了。这种不合拍会造成不佳的卡顿体验。）
缩略图：
微博未提供缩略图，只用进度条表示整体录制时长及每一段视频的长短；
Twitter 将每一段视频的第一帧画面作为预览并列于视频窗口下方，同时显示长度为几秒。
同时，当还没有获取到正在录制的视频第一帧画面时，会有一个占位符，且占位符中间有红点忽明忽暗，让用户知道正在录制中。
聚集：
开始录制前，两款产品均会自动完成聚集，当录制视频时，微博中点按屏幕可再次进行自动聚集，Twitter 点按也可自动聚集，长按出现 AF/AE 信息提示（微博无 AF/AE 提示）。
横屏拍摄：
微博横屏时，底部删除、拍摄、及下一步按钮会进行旋转，指示当前处于横屏模式，但预览时还是竖屏模式，问题是当你分别用横屏和竖屏录制一段时间时，在预览页面就会出现其中一个画面是呈 90 度翻转的，也就意味着，其实我们是不支持同时采用横、竖两种方式拍摄的。我们可以称之为『伪横屏』。
而横屏下， Twitter 的做法显然要更聪明一些，当第一段时间是在横屏模式（全屏）下录制的，那么你将一直在横屏模式下录制（即使将手机竖过来，屏幕仍是横屏状态，以示提示用户如果坚持竖屏录制，出现 90 度翻转后果自负哦）。
4.编辑/预览
微博：
编辑页面与预览页面为单独两个页面，在录制页面点击左侧删除按钮一次，则进入编辑页面（即删除一段视频需要点击两次删除按钮），但对视频的编辑仅限于倒序删除，且不能调整视频的位置，如果你想单独删除第二段视频，则必须先删除第三段视频（不仅与 Instagram 的交互方式一样，甚至连页面下半部分长的都一样）。
当录制达到 15 秒时自动进入预览页面，且预览页面也无法单独对每一段视频进行编辑。预览页面的作用只是让用户从头至尾看一遍刚才录的视频==!（此页面所承载的内容及功能是否有点鸡肋呢...），且如再点击下一步，进入发布页面，想再次编辑刚才的视频，则只会返回到预览页面，依然无法编辑，要么用，要么删，感觉令人心痛。
Twitter：
编辑页面与预览页面在同一页面，点击缩略图画面，即开始从点击的片段开始预览，当前被预览的视频会用白色线框标识出来，同时蓝色的进度时间线会反映出预览的时间位置及当前片段在整个片段中的长度占比。
删除操作更是采用了一种令人欣喜的交互方式：按住（某段视频）并向上拖动，会出现视觉提示，垃圾桶盖子会打开，录制区域会覆盖上红色，松手即可完成删除。
比新浪微博更加灵活的是：按住并拖动视频片段也能快速的调整每段视频的位置及排列顺序。
不同于微博的，完成就不能编辑，在 Twitter 中即使用户在编辑页面点击了完成，跳转至发布页面，依然可以再次返回到编辑页面，随意编辑视频，就像刚才什么也没发生过一样。
如果说新浪微博的预览页面还有什么令用户不满的话，那就是：15 秒的视频，我还得慢慢的再看 15秒，要是能快进就好了，我想马上发布出去。
当然你可以直接点击完成，而我的意思是，我想看一遍，而又不想慢慢的浏览，想要快速预览一下，以便确定我没有出错，有什么好的办法呢？
来看一下 Twitter 的交互方法：
在编辑/预览页面，通过在视频区域左右滑动来控制全局预览的位置（即在屏幕上左右拖动即可进行快速预览。）
5.导入本地视频
微博：在相册列表中选择要导入的视频，自动进入预览页面（如长度超过 15 秒，无任何提示，也可正常上传），你只能选择用这整段视频或不用，唯一可交互的操作是点击暂停，再次点击播放，如此而已。（如果想截取一段，对不起，没有这个功能。）
Twitter ：同样在相册列表中选择要导入的视频，会自动进入预览页面，不同的是，需要截取小于等于 30 秒的视频，
至于交互方式：拖动两端调整时间长短，拖动中间调整截取位置。
即使裁剪完成，未发布时，随时可以再次进行编辑，且可编辑的视频内容是原内容，而不是截取后的内容。
6.发布
所占区域大小：
微博为小图方式，Twitter 为大图方式。
是否支持同时发布视频与图片：
微博支持短视频与图片（最多 9 张）同时发布。
而 Twitter 不支持，要么短视频，要么图片（最多 4 张）。Twitter 在添加一段视频后，发布页面的相机按钮置为灰并不可点击状态。
7.令人一喜的交互
① 大于 30秒的视频编辑
默认两端拖动条时浮动为每秒递增/递减，长按左右两端拖动条时，画面帧数会变多，使用户可以进行小于 1 秒的画面选择，这种考虑实在是贴心。
② 添加图片/视频
作为对比，先看下微博的交互，当用户尝试添加第 10 张图片或第 2 个视频时，以 Toast 方式告诉用户，只能添加 9 张或 1 个视频，也就是需要用户有一次点击才能知道所进行的操作是不可行的。
这没有什么不妥，毕竟它对用户的操作给予了即时的反馈且没有打断用户的操作，也没有搞一个模态对话框让用户点击确认。
再看看 Twitter 是怎么做的，请看大屏幕：
如果选择第 1 张图片后，所有【视频】自动置灰，不可选状态；如果选择了某个视频，则自动进入视频编辑页面，根本就不给用户尝试选择第二个视频，然后在温馨提示一下：只能选择一个视频的机会。
当添加第 4 张图片后，所有图片/视频置灰；
这一简单的交互，将移动端产品 2 个基本原则：简单、高效，发挥的淋淋尽致，令人称奇；
通过对比我们可以发现，Twitter 在做短视频的功能及交互上理解非常深入，对细节的把控也十分到位，而新浪微博的短视频功能貌似缺少一点对用户的诚意。
我们到底有没有在用心做一款产品时，是很容易被用户发现的。
|
|
|
|
|
