Matrix 是少数派的全新产品,一个纯净、小众的写作平台,我们主张分享真实的产品体验,有实用价值的互联网领域经验、思考。欢迎忠于写作,喜好分享的朋友参与内测。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。

作为 iOS 最知名的摄影后期应用之一,VSCO 正在面向部分用户测试全新版本。本文来自一位有幸获得测试资格的用户分享的一篇针对 VSCO 新版改动的文章,读者可以一睹为快。

文章内容仅代表作者本人观点,少数派对文章语句排版有作修改,原文链接


VSCO 几乎是我每天都会打开来的 app,可以说我真正用 iPhone 摄影也是从 VSCO Cam 开始的。

图中左边四个 app 是我常用的摄影类应用

通常情况下,我拍照会用到这四个 app:Camera+HydraVSCOSnapseed。今天也如往常一样,拍完照打开 VSCO 开始添加滤镜、微调,而我意外的发现,VSCO 的 UI 已经与往日大不相同。

新的启动画面、导航按钮,没有了抽屉,四个子界面被简化为了两个,于是与朋友分享了這個消息,发现原来我是在「灰度测试」之中,把玩了一会儿,觉得 VSCO 这次整个新的界面与交互设计挺有意思的,总结来说就是:

  • 没有设计规范的设计
  • 似乎易用性提升了不少
  • 又是一个从工具往社区发展的产品

于是我想趁 VSCO 正式全面推送新版本之前,如不让感兴趣的朋友先睹为快,先看一下重新设计之后的 VSCO 在界面与交互上有什么变化。

终于有了启动画面

之前的 VSCO 几乎是没有什么启动画面,而新版中有一个将图标旋转拆解、如灵光般向四周发散的动效,我想这里有一部分是 branding 的考虑,这让我想到了 Uber 最新的启动画面,我个人非常喜欢那个如「心脏脉动」的动效,特别是与最后展开成「打车按钮」,整个动画非常和谐。

全新的界面与导航按钮

一进入 VSCO 的界面就立马感觉与之前截然不同,总的来说就是在原来已经相对简洁的结构上更加简化,底部中间的形似「地球」的按钮让你无法忽略。

整个界面的设计变成了左右切换的两栏,左栏为「社区」,右栏为「图库」。

原来的「个人页面」被直接拿出来置于「图库」上方,还会将最近分享的一张照片作为 banner 边框背景,挺有设计感。「商店」入口置于右上角,与「导入照片」的入口对称,原来顶部「筛选」「导入」以及「收藏」的三按钮设计被拿掉了。

总的来说,新的布局我可以在操作的辨识成本上是减少了不少,也就是更加易用了。

左图为新版首页样式,右两图为旧版首页及抽屉

对比前后两个版本的布局,新版减小了照片展示的尺寸,间隙更大,展示形式可以被设计得更多样化,例如「被收藏的图像」就会以「堆栈」的形式呈现。

整个产品的交互操作被寄托在底部这个按钮上,它会始终在主界面上,除了当你向下滑动界面时,它会消失,当你停下三秒左右出现。通过拖拽这个按钮完成不同的手势,来实现几个主要的交互操作:

  • 向上滑动:启动相机
  • 向下滑动:显示筛选条件 — 图库,显示搜索 — 社区,以及退出相机界面
  • 向右滑动:切换至「社区」
  • 向左滑动:切换至「图库」

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 可能要多看两眼才能认出来了,不过我发现在「步骤」中仍然是旧版的图标。

左图为新版长按预览样式,右两图为编辑工具图标的变化

导入照片的界面也与之前不太一样,把「相簿」直接置于顶部,点击切换下方照片,倒是让我想起了 Storehouse 的导入界面,当年觉得设计非常不错,而这两款产品在某些地方也有几分相似。

左图为 VSCO 的导入界面,右图为 Storehouse

这一切都是为了社区化

Create, discover and connect.

在 VSCO 的官网上,他们是这样介绍自己的 app,显然社区化并不是新版本才开始关注的东西,是一直持续在推进的转型。

追根溯源,在一开始 VSCO Grid 的推出,VSCO 就像打造一个介于专业(Flickr)和大众(Instagram)之间的产品。没有点赞评论,在 VSCO 的内容社区里照片是最重要的,用户只能关注作者,或者分享,现在也如此。

到后面换了主 logo 大概也有这方面的因素,新版更是强调了社区在于产品中的重要性 ── 与工具性同等重要。

关于 VSCO 新 logo 的核心要素以及图形变换: Solar System → World → Community → Person → Genetic Code

这是一个重塑品牌(Rebranding)的过程,很多产品都经历过这样的转型过程,VSCO 也正在经历着,这个有着 3000 万用户的产品似乎把主要竞争矛头指向了 Instagram,从近期两款产品的调整来看,甚至他们各自都有一套附属产品矩阵。

这里有两个小插曲:

  • 我才意识到原来 VSCO Cam 早已更名为了 VSCO,这也证明了它不想止于作为工具
  • 新版中的「导航按钮」,是不是感觉与上图中代表 Community 的形状很像,当然它也也像「地球」,总之与社区有着一定联系

而 VSCO 还有一个 Instagram 没有的维度,就是「杂志」── 又想到了 Storehouse。这一点的设计上,与之前也有些许变化,但我觉得之前的设计,从封面上看起来似乎更像「杂志」,现在就更像是点开一篇阅读文章。

左图为新版 VSCO 杂志样式,右图为旧版

还有一些细节,例如确定按钮换成了圆形 icon,一时间看到还没反应过来,以及随处可见的「彩虹」读条,咦,为什么感觉突然涌上一股吐槽之力。

Rainbow Progress bar.gif

总的来说,我很喜欢 VSCO 的新设计,也很欣赏其团队有这种大胆从简的勇气,整个产品的各方面性能上来说都得到了优化,无论是做为工具,还是分享内容的社区,我相信都让新用户有兴趣进行尝试,当然,运营也得跟上才行。

【跳转播放视频】


继续阅读更多关于 VSCO 的技巧文章 >