1*Xw4VL-LS90dwgtlACxds_A.jpeg

VSCO 幾乎是我每天都會打開來的 app,可以說我真正用 iPhone 攝影也是從 VSCO Cam 開始的。

1*NsQ80UeEWXljduoz6_us7Q.jpeg

圖中左邊四個 app 是我常用的攝影類應用

通常情況下,我拍照會用到這四個 app:Camera+、Hydra、VSCO 和 Snapseed。今天也如往常一樣,拍完照打開 VSCO 開始添加濾鏡、微調,而我意外的發現,VSCO 的 UI 已經與往日大不相同。

新的啟動畫面、導航按鈕,沒有了抽屜,四個子界面被簡化為了兩個。於是我跟小麥(年輕氣盛的產品經理,93 年,上海,正在尋找下一份工作)分享了這個消息,發現原來我是在「灰度測試」之中,把玩了一會兒,覺得 VSCO 這次整個新的界面與交互設計挺有意思的,總結小麥的三個觀點來說就是:

  • 沒有設計規範的設計
  • 似乎易用性提升了不少
  • 又是一個從工具往社區發展的產品

於是我想趁 VSCO 正式全面推送新版本之前,如不讓感興趣的朋友先睹為快,先看一下重新設計之後的 VSCO 在界面與交互上有什麼變化。

終於有了啟動畫面

1*pA42lz8UAS2_RDmDmwfSgQ.gif

之前的 VSCO 幾乎是沒有什麼啟動畫面,而新版中有一個將圖標旋轉拆解、如靈光般向四周發散的動效,我想這裡有一部分是 branding 的考慮,這讓我想到了 Uber 最新的啟動畫面,我個人非常喜歡那個如「心臟脈動」的動效,特別是與最後展開成「打車按鈕」,整個動畫非常和諧。

全新的界面與導航按鈕

一進入 VSCO 的界面就立馬感覺與之前截然不同,總的來說就是在原來已經相對簡潔的結構上更加簡化,底部中間的形似「地球」的按鈕讓你無法忽略。

整個界面的設計變成了左右切換的兩欄,左欄為「社區」,右欄為「圖庫」。

原來的「個人頁面」被直接拿出來置於「圖庫」上方,還會將最近分享的一張照片作為 banner 邊框背景,挺有設計感。「商店」入口置於右上角,與「導入照片」的入口對稱,原來頂部「篩選」、「導入」以及「收藏」的三按鈕設計被拿掉了。

總的來說,新的佈局我可以在操作的辨識成本上是減少了不少,也就是更加易用了。

1*noMBVsDRxDUzcs7V_kggWg.png

左圖為新版首頁樣式,右兩圖為舊版首頁及抽屜

對比前後兩個版本的佈局,新版減小了照片展示的尺寸,間隙更大,展示形式可以被設計得更多樣化,例如「被收藏的圖像」就會以「堆棧」的形式呈現。

整個產品的交互操作被寄託在底部這個按鈕上,它會始終在主界面上,除了當你向下滑動界面時,它會消失,當你停下三秒左右出現。通過拖拽這個按鈕完成不同的手勢,來實現幾個主要的交互操作:

1*LbtzY_ELadIvDFkYV7FipQ.gif

  • 向上滑動:啟動相機
  • 向下滑動:顯示篩選條件 — 圖庫,顯示搜索 — 社區,以及退出相機界面
  • 向右滑動:切換至「社區」
  • 向左滑動:切換至「圖庫」

The Verge 的報道中這樣描述到:

It’s a quick and intuitive way to jump around the app, and it’s fun to flick up to launch the camera and pull back down to quickly get back.

怎麼說呢,這個所謂的「導航按鈕」,實際上也就是把觸發操作的交互範圍縮小到了那一個圓圈內,總給我一種拘束感,雖然這樣可以避免一些誤操作,其實這也是一種「擬物設計」。

樣式微調,流程不變

作為一款工具型(至少之前是)的產品,不少用戶可能更關心處理照片的部分,VSCO 新的設計倒是總體上沒有增加用戶的學習成本。

用戶依舊可以通過長按來快速瀏覽圖片,雙擊展開,這裡增加了一些照片信息。編輯界面中,對工具類圖標圈閉進行了重繪,部分工具的 icon 可能要多看兩眼才能認出來了,不過我發現在「步驟」中仍然是舊版的圖標。

1*KGwTy0Ewloo_TnUHtYOrzw.png

左圖為新版長按預覽樣式,右兩圖為編輯工具圖標的變化

導入照片的界面也與之前不太一樣,把「相簿」直接置於頂部,點擊切換下方照片,倒是讓我想起了 Storehouse 的導入界面,當年覺得設計非常不錯,而這兩款產品在某些地方也有幾分相似。

1*hvxJehEZzuPvfjkLKdON8A.png

左圖為 VSCO 的導入界面,右圖為 Storehouse

這一切都是為了社區化

Create, discover and connect.

在 VSCO 的官網上,他們是這樣介紹自己的 app,顯然社區化並不是新版本才開始關注的東西,是一直持續在推進的轉型。

追根溯源,在一開始 VSCO Grid 的推出,VSCO 就像打造一個介於專業(Flickr)和大眾(Instagram)之間的產品。沒有點讚評論,在 VSCO 的內容社區里照片是最重要的,用戶只能關注作者,或者分享,現在也如此。

到後面換了主 logo 大概也有這方面的因素,新版更是強調了社區在於產品中的重要性 ── 與工具性同等重要。

1*ewsVavjLpkIthnnfj38a3w.png

關於 VSCO 新 logo 的核心要素以及圖形變換:

Solar System → World → Community → Person → Genetic Code

這是一個重塑品牌(Rebranding)的過程,很多產品都經歷過這樣的轉型過程,VSCO 也正在經歷著,這個有著 3000 萬用戶的產品似乎把主要競爭矛頭指向了 Instagram,從近期兩款產品的調整來看,甚至他們各自都有一套附屬產品矩陣。

這裡有兩個小插曲:

  • 我才意識到原來 VSCO Cam 早已更名為了 VSCO,這也證明了它不想止於作為工具
  • 新版中的「導航按鈕」,是不是感覺與上圖中代表 Community 的形狀很像,當然它也也像「地球」,總之與社區有著一定聯繫

而 VSCO 還有一個 Instagram 沒有的維度,就是「雜誌」── 又想到了 Storehouse。這一點的設計上,與之前也有些許變化,但我覺得之前的設計,從封面上看起來似乎更像「雜誌」,現在就更像是點開一篇閱讀文章。

1*eRcCtmHeP36GONwwiHlkWg.png

左圖為新版 VSCO 雜誌樣式,右圖為舊版

1*l0O7yrpWu6TfXLwRF-ue3g.png

左圖為新版 VSCO 雜誌樣式,右圖為舊版

還有一些細節,例如確定按鈕換成了圓形 icon,一時間看到還沒反應過來,以及隨處可見的「彩虹」讀條,咦,为什么感觉突然涌上一股吐槽之力。

Rainbow Progress bar.gif

總的來說,我很喜歡 VSCO 的新設計,也很欣賞其團隊有這種大膽從簡的勇氣,整個產品的各方面性能上來說都得到了優化,無論是做為工具,還是分享內容的社區,我相信都讓新用戶有興趣進行嘗試,當然,運營也得跟上才行。