从iOS、Instagram、美拍分析视频拍摄功能

前三篇文章《从零开始做社交功能》《从Instagram与Facebook研究Feed的基本功能》《浅析Feed内容定位与趋势》,从宏观过渡到微观,今天开始落实到具体的页面设计,主要说说视频拍摄页面应该怎样设计。

基本的思路是:拍视频->查看视频

同样的,在前文中有提到,我们在了解一件事情的时候最先做的,应该是了解它的准确的定义。
那么什么是视频呢?

time2.jpg

百度百科的理解:
视频泛指将一系列静态影像的方式加以捕捉、纪录、处理、储存、传送与重现的各种技术。连续的图像变化每秒超过24帧(frame)画面以上时,根据视觉暂留原理,人眼无法辨别单幅的静态画面;看上去是平滑连续的视觉效果,这样连续的画面叫做视频。

由以上定义我们可以知道视频最大的特征是有一个时间跨度

针对这样的特征,拍摄视频界面的设计,主要需要注意以下几点:
1.概念的理解:起始时间、终止时间、视频的长度
2.查看方式:保存地点的提示,相册的缩略图显示(精彩点在哪就显示哪、)
3.设备方面考虑:横竖屏切换、前后置摄像头的调换、闪光灯、画面的放大缩小
4.UI与动效的协助
(这一点综合在以上三点中进行分析)

time.jpg

1.概念的理解:起始时间、终止时间、视频的长度

视频的时间跨度意味着有起始时间点和终止时间点,以及拥有一个时间长短的属性。这些因素共同决定了,我们拍摄出来的视频会以怎样的形态呈现在用户面前。绝大多数视频是拍摄未来的一段视频,但市面上也出现一些回溯式的拍摄手法,也就是说拍摄的是操作动作之前的视频。

iOS系统自带的视频拍摄功能是最具代表性的拍摄界面。点击一下红色button开始录制,接着button变成停止的标志,再次点击则停止录制。录制的过程中在顶部会有闪动的小红点表示录制的状态,以及录制的时长显示。

可以看出它整个录制的过程中分为录制前、录制中、录制后三个状态,并且时间段表述得非常清晰。

ios.jpg

再来看看Instagram和美拍的拍摄方式。两者的拍摄方式类似,但Instagram的操作方式更加简洁。美拍除了涉及到对视频画面的处理,还涉及到背景音乐、视频长短等等的编辑功能,从这些点出发,相比于Instagram,美拍更侧重于视频的编辑功能。当然这也是很重要的一部分,楼主会在以后的文章中专门去讲这一块的内容,今天就用Instagram去主要分析一下视频的拍摄页面的设计。

可以看得出,两者界面侧重点的不同是来源于产品的定位,Instagram偏向于支持用户产生出优质的内容,美拍更偏向于用特效去编辑视频产生更大的娱乐作用。

再来看看Instagram页面设计的出发点,相对于iOS拍摄,它支持镜头的转移,即多段短视频的衔接功能。相对于iOS沉闷的记录功能,该功能的改变的添加,使用户有更大的发挥空间。所以它抛弃掉iOS点击两下录制一段视频的操作,采用长按的方式进行录制,松开手停止录制的操作方式。

Instagram2.jpg

因为是短视频,有可能用户在频繁点击中可能混淆了录制中与未录制的状态,或者说让用户觉得比较混乱,也是因为时间短,长按的方式用户比较容易接受,对于录制的状态更加明了。反之,如果让用户去录制一个5分钟的视频,那就适合点击的方式去做,因为用户很有可能因为长时间的按屏幕产生手滑而误结束了视频的录制过程,这也是为什么美拍在选择录制5分钟视频时恢复成iOS的点击的方式进行操作了。

另外一个时间点,为什么Instagram在短视频中设置一个最短时间是3s?Facebook做过一个调查,当视频长度设置到3s的时候,90%的用户会将它当做一个Gif去看完,当设置为30s时,只有20%的人能看完了,而且在3s内可以讲完一个简短小的画面故事,于是Instagram将视频的最短时间设置为3s。当然也可能还有另外的原因。

2.查看方式:保存地点的提示

iOS录制完毕之后,在左下角的相册会有动效提示更新。画面由小到大表示有新的内容更新。它从拍摄的三个状态到查看视频,整体流程是按用户所熟悉的时间顺序进行操作的,用起来会觉得特别顺畅。

相对于视频,iOS的目的是让用户的注意力集中在拍摄界面,场景侧重于用户作为一个工具去记录一段时间维持较长连续发生的事情,而Instagram的拍摄功能是融合于发Feed过程中的一个环节,它更支持用户拍完就去分享,丰富Feed的内容,而查看也直接跳转到Feed。


Instagram.jpg

有个小细节需要关注的是,在视频产生后的小动效,除了像iOS的表现之外,还有的在相册最上层覆盖一个转圈的小圆,比如改版前的VSCO,它比较适合在拍摄完之后,视频还有一个处理的等待时长的表达。还有的处理方式是将最后一帧画面缩到相册,这样表达更明显,缺点就是动效有点繁复,不适合连续拍摄短视频的场景。

相册的缩略图有可能是第一帧,有可能是最后一帧,也有可能是通过算法得出的视频中比较精彩的一帧,出发点就是能在这一帧上让用户马上想起来这个视频主要内容是什么,节约用户查看的时间。

3.设备方面考虑:横竖屏切换、前后置摄像头的调换、闪光灯、画面的放大缩小

在视频拍摄页面,比较特殊的一点就是,手机有横竖屏切换的情况,而且切换的频率还比较高。在这里除了要UI上尽量保持一致之外,还有一点需要考虑的是如果横竖屏都支持切换,那么产出物的最终形状和显示也要考虑进去。比方说如果短视频在拍摄过程中切换了镜头,第一个是比较高的长方形,第二个是比较宽的长方形,那么产出物应该怎样处理。在这个情况的处理方式上,Instagram和美拍是一致的,就是统一采用正方形进行取景,那么规整了产出的视频形状。

社交.jpg

前后置摄像头的调换、闪光灯、画面的放大缩小这三项功能,并不一定都需要,还是根据PM对产品的定位来进行取舍。比如说iOS是基础的视频录制,并且使用人群跨度比较广,那么它功能齐全,UI简洁是最不会出错的一种选择。Instagram则只有前后置摄像头的调换功能,美拍则采用前后置摄像头的调换、闪光灯,出发点其实是都想支持自拍,毕竟社交需要自己面孔同朋友进行互动。

从这篇文章对具体单个页面的分析可以看出,所有的功能的出发点都是来自于产品的使用人群、使用场景,以及功能涉及到的特性和属性所来决定。比如上文中操作是点击还是长按,相册的动效表现形式,甚至是视频属性的长短等等,都是在综合各项因素的前提下进行决定了。

所以作为一个交互设计师,去主动了解并参与到项目前前后后的讨论、会议,是非常重要的,需要做到的是“窥一斑而知全豹”,当给予设计师一个功能时,能根据这一功能想周全到关于整个项目的相关事宜和定位。

下期更新内容,暂定方向为:Feed发送页面的设计~
敬请期待~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,133评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,682评论 3 390
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,784评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,508评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,603评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,607评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,604评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,359评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,805评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,959评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,588评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2 352

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,088评论 4 62
  • Mysql 命令行 Alter使用 主键 增加一个新列 删除列 重命名列 改变列的类型 重命名表 加索引 加主关键...
    小晨主阅读 284评论 0 0
  • 边伯贤喜欢朴灿烈,全校皆知。 朴灿烈对这个爱慕者有着很深印象,毕竟这么疯狂,比少女更甚疯狂的追求。 “边伯贤,又去...
    稚齿阅读 716评论 0 9
  • “起风了。” 他手上的筷子停在半空,喃喃自语道。 “何曾有风?”她惊讶道,在这温暖的食堂里,只有升腾的热气。 “山...
    TZXJ阅读 450评论 0 0
  • 在这个世俗不堪的世界里,能遇见让自己不讨厌的人,实在太少了 能遇见一个自己喜欢的,更少了 而能遇见一个能深夜请你喝...
    漠上女子阅读 348评论 0 1