Instagram新appHyperlapse的13个设计细

Instagram新appHyperlapse的13个设计细

昨天 Instagram 在全球各地发表了第二个 app「Hyperlapse」,1 这是一款採用极简设计、无需注册即可使用的摄影 app,主要功能是拍摄缩时影片,并且结合演算法和 iPhone 内建陀螺仪记录的资料呈现出稳定、不晃动的画面。这个 app 推出后迅速登上美国免费 app 排行榜前三名,在台湾 App Store 也取得第二名的好成绩。就连美国白宫都迅速地用 Hyperlapse 拍了一段 15 秒的白宫导览缩时影片。

Hyperlapse 这个 app 的操作方式就是拍摄影片、决定影片的速率、分享与否。简单的三个步骤,却隐含了不少设计上的细节。

社群经营工具服务 Buffer 的产品经理、设计师 Brian Lovin 写了一篇文章谈自己观察到这个 app 的一些设计细节,并提出自己的理解,有些细节并非特别突出,也有一些他也坦承自己不太明白为何设计团队要这幺做。2

1. app 起始画面
Instagram新appHyperlapse的13个设计细

Brian Lovin 认为 Hyperlapse 在这部份做得好极了,用四个画面就交代完 app 的主要功能,同时背景影片还展现出拍摄影片的效果。他还注意到了 Hyperlapse 画面的圆角,他似乎相当欣赏这样的设计。Brian Lovin 唯一不满一的地方就是画面下方的四个点不够明显。

2. 雾化与物理效果
Instagram新appHyperlapse的13个设计细
 

在 iOS,任何要使用摄影镜头的 app 都必须经过使用者同意,Hyperlapse 在起始画面的最后一页的唯一按钮就是请求使用者允许 app 使用 iPhone 的摄影镜头。按下按钮之后画面会变得模糊,然后切换到拍摄影片的介面,并且告诉使用者整个画面唯一的按钮该如何使用。

3. 摄影按钮的变化
Instagram新appHyperlapse的13个设计细

Brian Lovin 观察到,Hyperlapse 的摄影键在使用者移到镜头、重新对焦后,按钮周围的黑色圆形框线会变成彩色的,他希望 Instagram 的设计师能解释一下他们的用意。

4. 光线提示
Instagram新appHyperlapse的13个设计细

Brian Lovin 在使用 Hyperlapse 时发现 app 会提醒他拍摄现场的光线不足,虽然他觉得这是个错误。儘管如此,他仍觉得这是一个相当友善的提醒,有助于 app 的使用。

5. 影片拍摄时间显示
Instagram新appHyperlapse的13个设计细

由于这是设计用来拍摄缩时影片的 app,因此 Hyperlapse 在使用者录影时,除了在画面下方显示影片的实际长度,同时也显示了另一组以 6 倍速计算的时间,中间以一个小小的、由左指向右的箭头隔开。

Brian Lovin 说他一开始并未意会过来那组计时代表的意义,后来他才发现是预设 6 倍速的计时,有助于让使用者知道后至后缩时影片的长度,只是第一次使用的人可能会感到有些困惑。

6. 改变影片速度的提示
Instagram新appHyperlapse的13个设计细

拍摄完影片后的下一个步骤是决定缩时的比例,在这个步骤中 Hyperlapse 的介面是一个可以拖移的按钮,上面显示影片的倍速,分别是一倍、二倍、四倍、六倍、八倍、10 倍和 12 倍。然而当我们按住按钮时,是看不见倍速数字的,Hyperlapse 採用一个很不错的提示方法——直接在摄影画面上短暂显示目前的影片倍速。

7. 画面稳定效果的前后对照

这里讲的是另一个 Hyperlapse 没有提供说明、在设计上比较不容易被发现的功能:画面稳定效果的前后对照。当使用者拍摄完影片、进入编辑模式后,可以按住影片画面,这时就会切换成「未稳定化」的画面作为对照,算是 Hyperlapse 威力的展示。

8. 删除
Instagram新appHyperlapse的13个设计细

当使用者选择删除影片后,Hyperlapse 会将该影片「翻出」画面之外,底下的画面会由模糊转为清晰,明确告知使用者影片被删除,回复到準备拍摄的模式。Brian Lovin 觉得这个效果很好玩,而且运作得很流畅。

9. 后製完毕按钮效果

影片拍摄完毕后,画面会出现「分享到 Facebook、Instagram」与「拍摄新的 Hyperlapse」两个按键。同样的,Brian Lovin 很欣赏 Instagram 设计师设计按钮被点击的效果。

10. 焦距锁定提示
Instagram新appHyperlapse的13个设计细

使用者如果长按摄影画面,可以「锁定」焦距,锁定完毕后,使用者的手指处上方会出现锁头的图示。

11.「稍后编辑」的动画
Instagram新appHyperlapse的13个设计细

如果使用者想要连续拍摄多段影片,可以点左上角的「X」,会出现选单询问要直接删除还是保留,如果选择保留,就会有一个很流畅的动画告诉使用者这段影片会被「存」在哪里。

不过,第一次使用的人可能会以为左上角的「X」代表直接删除影片。

除了 Brian Lovin 的观察之外,我们也有几个发现:

Instagram新appHyperlapse的13个设计细

一旦使用者将 iPhone 画面转成水平,那幺摄影按钮那圈彩色的圆形框线也会跟着旋转,确保使用者知道 iPhone 有跟着转过来,以免拍出方向错误的影片。

另一点则是编辑模式下的影片播放进度显示,Hyperlapse 会在画面下方以一段高度仅 1px 的进度调显示影片的播放进度。只是这个部分可能设计得太优雅了,没有仔细看可能不会发现。

各位读者用过 Hyperlapse 了吗?喜不喜欢这个 Instagram 团队设计的 app 呢?欢迎分享您的使用心得。

  1. 事实上这是 Instagram 第三个 app,先前他们推出了一个带有实验性质的 app「Bolt」,但是只在南非、新加坡和菲律宾的 App Store 上架。↩
  2. Design Details: Hyperlapse for iOS↩

相关推荐