Instagram 新 app「Hyperlapse」的 13 個設計細節

評論
評論

昨天 Instagram 在全球各地發表了第二個 app「Hyperlapse」,1 這是一款採用極簡設計、無需註冊即可使用的攝影 app,主要功能是拍攝縮時影片,並且結合演算法和 iPhone 內建陀螺儀記錄的資料呈現出穩定、不晃動的畫面。這個 app 推出後迅速登上美國免費 app 排行榜前三名,在台灣 App Store 也取得第二名的好成績。就連美國白宮都迅速地用 Hyperlapse 拍了一段 15 秒的白宮導覽縮時影片。

Hyperlapse 這個 app 的操作方式就是拍攝影片、決定影片的速率(範圍從一倍速到 12 倍速)、分享與否。簡單的三個步驟,卻隱含了不少設計上的細節。

社群經營工具服務 Buffer 的產品經理、設計師 Brian Lovin 寫了一篇文章談自己觀察到這個 app 的一些設計細節,並提出自己的理解,有些細節並非特別突出,也有一些他也坦承自己不太明白為何設計團隊要這麼做。2

1. app 起始畫面

hyperlapse design details 1

Brian Lovin 認為 Hyperlapse 在這部份做得好極了,用四個畫面就交代完 app 的主要功能,同時背景影片還展現出拍攝影片的效果。他還注意到了 Hyperlapse 畫面的圓角,他似乎相當欣賞這樣的設計。Brian Lovin 唯一不滿一的地方就是畫面下方的四個點不夠明顯(要讓使用者知道現在是在哪一頁)。

2. 霧化與物理效果

hyperlapse design details 2
 

在 iOS,任何要使用攝影鏡頭的 app 都必須經過使用者同意,Hyperlapse 在起始畫面的最後一頁的唯一按鈕就是請求使用者允許 app 使用 iPhone 的攝影鏡頭。按下按鈕之後畫面會變得模糊,然後切換到拍攝影片的介面,並且告訴使用者整個畫面唯一的按鈕該如何使用。

3. 攝影按鈕的變化

hyperlapse design details 4-2

Brian Lovin 觀察到,Hyperlapse 的攝影鍵在使用者移到鏡頭、重新對焦後,按鈕周圍的黑色圓形框線會變成彩色的,他希望 Instagram 的設計師能解釋一下他們的用意。(我在自己的 app 上沒看到這種效果,也許跟我已經更新 app 有關,Hyperlapse 在上架隔天就推出新版了。)

4. 光線提示

hyperlapse design details 5

Brian Lovin 在使用 Hyperlapse 時發現 app 會提醒他拍攝現場的光線不足,雖然他覺得這是個錯誤(他在室外,我們從畫面上可以看出光線應該沒有不足的情況)。儘管如此,他仍覺得這是一個相當友善的提醒,有助於 app 的使用。

5. 影片拍攝時間顯示

hyperlapse design details 6

由於這是設計用來拍攝縮時影片的 app,因此 Hyperlapse 在使用者錄影時,除了在畫面下方顯示影片的實際長度,同時也顯示了另一組以 6 倍速計算的時間(比如說實際拍攝的時間計時為 12 秒,那麼另一組的時間會顯示 2 秒),中間以一個小小的、由左指向右的箭頭隔開。

Brian Lovin 說他一開始並未意會過來那組計時代表的意義,後來他才發現是預設 6 倍速的計時(影片拍攝完畢後預設的時間正是六倍速),有助於讓使用者知道後至後縮時影片的長度,只是第一次使用的人可能會感到有些困惑。

6. 改變影片速度的提示

hyperlapse design details 7

拍攝完影片後的下一個步驟是決定縮時的比例,在這個步驟中 Hyperlapse 的介面是一個可以拖移的按鈕,上面顯示影片的倍速,分別是一倍、二倍、四倍、六倍、八倍、10 倍和 12 倍。然而當我們按住按鈕時,是看不見倍速數字的,Hyperlapse 採用一個很不錯的提示方法——直接在攝影畫面上短暫顯示目前的影片倍速。

7. 畫面穩定效果的前後對照

這裡講的是另一個 Hyperlapse 沒有提供說明、在設計上比較不容易被發現的功能:畫面穩定效果的前後對照。當使用者拍攝完影片、進入編輯模式後,可以按住影片畫面,這時就會切換成「未穩定化」的畫面作為對照,算是 Hyperlapse 威力的展示。

8. 刪除

hyperlapse design details 8

當使用者選擇刪除影片後,Hyperlapse 會將該影片「翻出」畫面之外,底下的畫面會由模糊轉為清晰,明確告知使用者影片被刪除,回復到準備拍攝的模式。Brian Lovin 覺得這個效果很好玩,而且運作得很流暢。

9. 後製完畢按鈕效果

影片拍攝完畢後,畫面會出現「分享到 Facebook、Instagram」與「拍攝新的 Hyperlapse」兩個按鍵。同樣的,Brian Lovin 很欣賞 Instagram 設計師設計按鈕被點擊的效果。

10. 焦距鎖定提示

hyperlapse design details 9

使用者如果長按攝影畫面,可以「鎖定」焦距,鎖定完畢後,使用者的手指處上方會出現鎖頭的圖示。

11.「稍後編輯」的動畫

hyperlapse design details 10

如果使用者想要連續拍攝多段影片,可以點左上角的「X」,會出現選單詢問要直接刪除還是保留,如果選擇保留,就會有一個很流暢的動畫告訴使用者這段影片會被「存」在哪裡。

不過,第一次使用的人可能會以為左上角的「X」代表直接刪除影片。

除了 Brian Lovin 的觀察之外,我們也有幾個發現:

IMG_9941

一旦使用者將 iPhone 畫面轉成水平,那麼攝影按鈕那圈彩色的圓形框線也會跟著旋轉(因為是彩色的,所以轉動時可以看得出來),確保使用者知道 iPhone 有跟著轉過來,以免拍出方向錯誤的影片。(大家在使用 iPhone 內建相機 app 時可能遇過這種情況,iOS 的作法是旋轉介面上除了拍攝鍵以外的其他 icon。)

另一點則是編輯模式下的影片播放進度顯示,Hyperlapse 會在畫面下方以一段高度僅 1px 的進度調顯示影片的播放進度。只是這個部分可能設計得太優雅了,沒有仔細看可能不會發現。

各位讀者用過 Hyperlapse 了嗎?喜不喜歡這個 Instagram 團隊設計的 app 呢?歡迎分享您的使用心得。


  1. 事實上這是 Instagram 第三個 app,先前他們推出了一個帶有實驗性質的 app「Bolt」,但是只在南非、新加坡和菲律賓的 App Store 上架。
  2. Design Details: Hyperlapse for iOS

評論