赞助商
立即赞助

今年超火的短视频,我为你整理了一份拍摄流程交互指南(二)

交互设计3年前 (2021)发布 流光
2.6K 0 0

一、 拍摄准备页

拍摄准备页,是用户点击拍摄功能按钮进的页面,也是进拍摄流程之的页面,故「准备页」。详细的页面架构如下图,与一篇文章中的内差异,了升级调整。

今年超火的短视频,我为你整理了一份拍摄流程交互指南(二)

△ 拍摄准备页架构

几个功能除拍摄按钮固定在页面底部中央位置外,其他功能口在页面上没有一个固定的局样式,根据主要的拍摄功能或者运营等因素影响,每个按钮的局位置随之整,但是无论何变化整,功能口出现的区域是不变的。

在页用布局样区域如下:

今年超火的短视频,我为你整理了一份拍摄流程交互指南(二)

△ 摄准备页功能区域

橙色的倒 L 区域为要的功区,承载了大分的功容;拍摄按钮两侧的绿色区域为入口区域,会放置相的拍摄、上传等功,或者将产策略上突的入口放置于此,例如:贴纸、道具入口;辅助或者次要的入口会放在页面蓝色区域,有些页面蓝色区域是隐藏的;左侧的深灰色区域论上几乎会现功入口,因为这个位置属于右手单手操作的非热区位置,当然,这是绝对的。

1. 入口区域(拍摄按钮、绿色区域、蓝色区域)

拍摄准备页面承载着开启拍摄流程的作,页面的核心容是开启制作视频的入口,要包括拍摄和上传两种,中还有一些特殊玩法会强露,如:制作影集、拍摄固定模视频等功。玩法较多的时候,通过横滑切换 tab 方式切换同功入口,点击后进入对应的玩法流程。

拍摄按钮

拍摄按钮的样式与相机的系统样式基本无异,几乎都是圆形按钮;操作方式是规的点击和长按。拍摄按钮的设计要来源于户长久来养成的拍摄习惯,在样式和布上各大应几乎无差异。在拍摄按钮的设计上可创性较小,在这里过强调差异和特立独行并是一个好的思路。

本地上传

除了户手拍摄的容,支持户上传手机中已保存的视频容。在一整的拍摄流程中,上传流程与拍摄流程互斥,择上传功后,调起相册页面,中目标视频后进入编辑页,会再进入拍摄页。

这有一个异的情况,就是 VUE,能够同支持本地上传和拍摄混排。但是其实这种混排支持的前提是在拍摄流程开始前就已经对预期视频进行了段,每一个段落中其实就是一段完整独立的视频,在每一段落的视频拍摄中,同只支持一种视频生产方式。

模板

即用户可选择固定玩法模板进行有选择的拍摄。模板内容会在当前页面直以 card 式显示,一会伴随着炫酷的 gif图展示,充煽动性的文字,同以美预览效果为主来刺激用户去参。用户可直点击 card 进入拍摄流程,新的拍摄页面直呈现预好的滤镜、道的拍摄效果。

使用拍摄模板通过良好的运营,产品会产一些爆款的效果,但也很易失去新鲜感,被模仿的本较低。

今年超火的短视频,我为你整理了一份拍摄流程交互指南(二)

△ 模板

其他

其他玩法入口模板基本一致,切换后会入固的预设拍摄流程,功能操作差异不,主于用户产内的区别。

2. 系统功能(橙色区域、绿色区域)

系统功能主指闪光灯摄功能,这两功能紧密联系的,二者置往往也相邻的。曾一细节交互比较死磕的,就关于闪光灯的状态问题。直观看,闪光灯主启关闭状态,这两种状态针对后置摄启时出的。但实际还一置灰无效状态,针对置摄言的,所以实际闪光灯三种状态。

但是当前随着拍摄功能和玩法的增加,页面上的口越来越,在空间不的情况下,闪光灯的优先级就变得极低,在一应用中甚至不出现闪光灯和摄像头翻转的选项。

在保留闪灯应用里,闪灯也极少作为常驻入口存在,是在切换至后摄像头时出现在不影响常驻入口位,毕竟很多摄流程默认进入时开启是前摄像头,相比于在品策略上更加要其他入口,闪灯选项存在必要性太弱。

今年超火的短视频,我为你整理了一份拍摄流程交互指南(二)

△ 摄像头VS闪灯状态

3. 美化功能(橙色区域、绿色区域)

美化功能括滤镜及美体功能,括瘦脸、瘦腰、长腿等各能够想到美化功能。美化功能般都是批量出现,需要用户不断选择和尝试,时要支持实时预览,此页主要以浮层样展示,便于用户选择时可以实时预览效,时于「」效和选项需要在页常驻显示。

今年超火的短视频,我为你整理了一份拍摄流程交互指南(二)

△ 美化浮层

滤镜

滤镜效般很少涉及微调,都是选即可,所以浮层样较为简单,支持滑,击切换效。不过在页上往往存在接手势滑切换滤镜快捷操作,与浮层选状态应。

美体

美体操作涉及到功能较多,选择主要括阶梯型击选择,以及滑块选择样,然者样能够结合使用。由于美体效涉及微调,调节很多选项是仍然不满意时,用户不可能再新打开个选项去原数值,这个时候页出现「」按钮于体验是个不提升。

4. 道具功能(绿色区域)

具功能主要是指贴纸和挂件等增加页特殊效功能,摄具使用能够增加摄内容趣味性,为用户提供更多多样性玩法,创造更多有意思内容,这也是品能够留住用户个比较关键节。

道具的使本质上是低成本的户创更多容丰富和足够吸引人的视频容,从而升产的使率,于更多渠道传播。在设计上道具功的入口要在拍摄按钮周围现,使突的 icon 或者图形展示入口,刺激户点击。

所有的道都是依赖拍摄内容来呈现的,所以在使用流程上同美化功能相似,点击后调起浮层,用户可以实道的使用效果,但是还存在个别。

区别一道具的加载流程,除了常规的道具效果,很多道具内具时效性或者紧点的属性,产品后端会不时推送新的道具线,以保证对用户的持续性刺激。所以道具入口端不会写死,每次点时都会向后台请求一次数据获取新的内。

所以对存在请求数据的产品而言,道具浮打开时存在一个 loading 加载的程,尽管大部分时间个程几乎肉眼不见,但是在网络境差情况下还是需要的。

区在于具使用时有个下载过程,于应用而言,存在个具效都是程序空占用,所以具很多时,大部分品都是默认下载几个热具便于用户接使用,更多其他具使用时需要请求服务下载,下载完成后才可以使用。

这时道具上会现载按钮角标,户点击后开始载,载成后会自默认中当前道具(这是体验升的一个小触点)。

今年超火的短视频,我为你整理了一份拍摄流程交互指南(二)

△ 道具载流程

5. 时间功能(橙色区域)

倒计时

倒计时功能与系统功能相似,主要是开启和关闭操作,没有更多扩展性功能,icon 需要出开启和关闭两状态。

变速

支持开启和关闭,开启后括变快和变慢两功能。变速功能不影响摄过程,影响生出视频效,在速度选择上是简单档位选择,移动设备性能限制,法做到精细化速度调。

今年超火的短视频,我为你整理了一份拍摄流程交互指南(二)

△ 变速选项

分段

分段摄是指在摄前优先设好摄段落,个段落是独立摄。分段摄类似简易定制化模板,需要用户去「填充」段内容。

定时止

定时止是指在段摄内容,摄前预先设止位,与摄击止效相。设定时止能够更加准确控制时长度,是作为前操作,于用户实摄能力是个考验。

6. 影音功能(橙色区域、绿色区域)

目前主要为添加背景音乐功能。添加音乐与实时摄效关联度不高,而音乐内容选择流程本身相复杂,需要用户沉浸操作,所以音乐选择页主要以全屏浮层为主,涉及热荐、多主题选择,以及搜索等扩展功能,页布局大小异。

今年超火的短视频,我为你整理了一份拍摄流程交互指南(二)

△ 音乐选择页

7. 其他功能(蓝色区域)

其他功能可能涉及画幅、页设等些小众功能,不做过多讲述。其他主流功能类似,其他小众功能在页设计上主要以浮层为主,选择功能不宜过于复杂。

二、暂停页面

前市场上主流短视频拍摄应用中,为满用户拍摄能够更样化的场和内容,低门槛创更高质量的视频内容,在拍摄流程中基上支持暂停和续拍,便让用户转换场拍摄下一段内容。

论是单击摄是击摄,般用户都很难做到「镜到底」地不断摄,即便是院线电影摄亦是如此。暂页出现说明了该应用支持断续功能,用户能够将段内容分割成数小片段来完成制作,这也是满足用户操作和认知习惯个要功能。

言归正传,继续来看暂停页面的涉及布。

暂停页面是一个承上启下的页面,一方面需要让用户能够对上一段内容进行重新编辑,但是由于还没有进入后续的效、滤镜等编辑环节,所以这的编辑操作只是简粗暴的「删除」或者「完成」进入编辑流程等。

另一方面需让用户能够启新的录制内,因此整体的页面布局拍摄准备页面拍摄功能基本差异,入口区域会相应去掉功能互斥的入口,如:隐藏传入口、拍摄操作方式、模板选择。

需要补充一点的是,因为大数应用是需要暂停页面重新录新的内容,所以暂停页面需要始终摄像头功能,方便用户取。特殊情况下,以是对上一段内容的重复轮播,例:身流程为上传内容页面。

今年超火的短视频,我为你整理了一份拍摄流程交互指南(二)

△ 拍摄准备页与暂停页对比

暂页与摄准备页异不大,功能复用地很多,所以关于暂页部分也到此为止。

容持续更中,留言讨论。

欢迎关注作者的公众号:「胖喵交互设计

今年超火的短视频,我为你整理了一份拍摄流程交互指南(二)

图片素材作者:Ramotion

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

二次确认的主要作用是防止误操作,以及警示操作带来的后果,避免用户无意之间执行了本不想做的操作。从用户流程图中我们不难...
二次确认
网络成本的降低促使承担推广作用的 H5 越来越多的使用视频呈现的形式,但迈过初期朋友圈视频给用户带来巨大新鲜感的时代之后...
H5
很多 UI 设计师和我交流,想学交互设计,也有一部分也想转交互。 如何从入门到精通,这里我以自己的亲身经历说说交互从入门...
交互设计
怎么样的原型图才算是专业的原型图呢?文章总结了一些经验,希望对你有所帮助。 本篇文章(原型上篇)重点内容: 清晰的...
交互设计
前言 当我在网上搜寻交互文档规范时,可以搜到很多关于交互文档的结构搭建的文章,但始终没有一份较为完整的案例 Demo 展示,...
交互文档
很多 UI 设计师和我交流,想学交互设计,也有一部分也想转交互。 如何从入门到精通,这里我以自己的亲身经历说说交互从入门...
交互设计
大家好,今天我们来聊一聊苹果和谷歌的设计语言。自从移动互联网开始兴起,我们的日常生活开始充斥着大量的移动设备,手机,P...
交互设计
想一个问题吧,如果有人给你发了一条微信,你没有回复 ta,原因是什么? 可能是给你发消息的人对你来说不重要?或者消息内...
交互设计