爱新觉罗米

UX设计师,工作过的地方:阿里淘宝UED / 腾讯ISUX设计中心 / 猎豹CMUX设计中心/美团点评UED
邮箱:houwenpei@gmail.com

VSCO Redesign Project

最近业余时间做了一个滤镜APP应用的redesign project,为了锻炼下自己设计思考能力。平时工作中做的内容需要综合考虑到商业目标、成本、各方的观点,大部分时间是一个平衡的结果,然而很多时候,一些设计的想法就会逐渐被消磨掉。而自己做redesign的好处,就是可以没有过多限制,聚焦在设计本身。所以决定每隔一两周,无论如何都要抽出一些时间,做一些redesign的练习,回归设计本身。

首先,想到的就是先找一个工具应用来做,因为工具通常不会有特别复杂的不确定性,而又需要使用上最大程度的效用,比较适合入手。我自己喜欢拍照,也用过很多照片处理应用,VSCO是常常会被爱好者们提及的,滤镜效果很好,不过觉得在操作便捷性、内容的展现、商业化方面还有可以提升的空间,当然redesign只是一个按自己的想法去改善的过程,完全没有任何批判的成分。

一、VSCO的核心定位

在redesign之前,首先需要确定一个产品提供的核心服务、期望给用户留下的品牌意向和基调。按照我自己的理解、认知和周围用它的人的评价。可以总结出它最核心的部分:

1.依托滤镜的工具属性

VSCO应用主打的、口碑传播的亮点毫无疑问是它的高逼格滤镜。相信绝大多数用户也是为了它的滤镜效果而下载、使用并留存的。同时目前VSCO也提供滤镜商店,寄托了商业化的目标。所以设计的一个核心目标之一是让用户能够快捷方便的使用滤镜处理照片。

除了工具属性的体验以外,滤镜的商业化也是设计的另一个目标:吸引用户愿意了解、购买滤镜,提升推荐滤镜的点击率与购买率。

2.培养用户浏览内容习惯,并引入社交元素

VSCO中与很多展览、品牌、活动合作,有一些优质的照片、文章内容资源,并且也在APP中作为一个独立的tab分页向用户推荐,同时鼓励用户收藏和分享。这些形态已经表明内容也是VSCO比较重视的一部分,而且从产品的发展角度也是可以理解的。单纯的工具属性无法让用户长时间停留在应用中,而内容可以提供用户的使用时长,对产品是有利的。

用户可以在VSCO中建立个人账号,收藏展示个人的照片,浏览照片时也可以链接到作者查看主页,但社交元素目前在VSCO还是比较弱的。虽然存在人与人之间建立关系的可能,但仍然是以内容为连接节点的。所以对社交元素的利用,也应该是以更好的推荐内容为目标。

在这篇VSCO的CEO专访中,也可以看出类似的定位方向:http://sspai.com/31909#comments

二、存在的问题

围绕上述分析的设计目标,反观产品的体验,可以发现存在几个问题:

1.主导航的结构与操作传达不清晰

APP首页下方提供一个圆形控制杆,可以按住向上下左右四个方向拖动,分别进入不同的页面。有点像曾经的诺基亚手机中间的操纵按钮。


这个操作存在几个弊端:

1)教育成本较高,按住—拖动,并不是手机中用户常见、习惯的操作方式。此外还需要用户记忆四个方向的去向。

2)表意不清:原型按钮通常更像是可点击的,尤其是在照片相关的应用中,更容易使人误解。

3)认知重叠:拖住操纵杆可以去到四个不同的页面,而直接在页面左右滑动也可以完成其中两个页面的切换,同一操作,两种路径,容易造成使用上的困惑。

这个设计是挺有新意的,然而这个创新点并没有提升操作的快捷程度,并不能说是一个smart的设计。

此外一个设计的小细节:两个主tab页,一个是黑色背景,一个是白色背景,场景切换比较跳脱。而且切换过程是直接推入推出,衔接比较生硬。

2.处理照片路径不够快捷

处理照片是用户使用VSCO最频繁的功能,也是整个产品最核心的体验,作为工具属性的功能,尤其应该聚焦在使用效率上。然而在其中处理照片的路径比较长:

点击左上角加号——进入相册选择照片——二次确认——点击选择滤镜进行处理


不仅跳转步骤多,而且几个步骤的点击区域都在上下跳跃。

3.照片编辑界面的层级结构表现不清晰

照片下方的编辑区,分割为几层。最下面的取消和保存应该属于最上层。其次是大的美化功能,再次是每个功能中的小编辑入口。而界面上没有通过合适的设计语言将这三层关系传达到位。层级之间的遮盖式设计无法让用户快速理解。

三、问题解决方案

1.横滑三个主tab页。

首页导航改为了三个并列横滑的页面,分别是发现优质内容、相册、个人作品。去掉了操纵杆,上方用圆点定位符告知用户可以直接横滑。


三个主tab页中默认首页是相册,可以减少用户挑选照片的一部路径。打开app直接可以快速选择一张照片处理。往左滑动仍然是优质内容的瀑布流,往右滑动,可以查看自己处理好的美美的照片作品列表,也可以帮助培养用户在这里沉淀内容的习惯。

2.相册列表中通过双指缩放快捷切换大中小模式,便于找图。

找到一张合适的照片进行处理是最为频繁的操作,有时候会用系统相机连拍几张类似的,选取一张最好来处理,这种场景下如果只展示小图列表就会非常不方便。所以提供一种双指缩放手势来快捷切换。

3.点击一张照片直接进入编辑页,编辑页面中对界面层级进行梳理,更清晰的展示。

点击照片不再需要二次确认,直接进入编辑页加滤镜,进一步缩短处理路径,将原来的处理照片路径由四步点击变为一步。同时通过编辑页的按钮布局、视觉层级的处理,让展现更加扁平、清晰。


原功能按钮栏有四个,将其中的后两个撤销相关的入口合为一个,放在照片区域右下角。与下方的滤镜、编辑两大核心入口拉开层级。


四、进一步优化

除了以上针对可用性问题的改动以外,还考虑了如何进一步强化滤镜的概念与商业化。

1.浏览照片时可以直接一键复用滤镜,或推荐让用户购买滤镜。

在发现内容页,看到一张好的照片,可以直接点击滤镜入口,查看这张照片的美化记录列表,同时一键复用到自己的照片上,让用户欣赏照片、感受滤镜的过程更有乐趣。


这个入口也可以作为很好的商业化承载,如果滤镜是要收费的,可以借此做推荐。以好的内容吸引用户比单纯的在滤镜商店里做广告的效果应该会更好。


2.发现内容页面中提供针对滤镜的广告类型文章。

目前在有新滤镜时,产品首页的商店入口会出现红点提示,然而这并不是很自然的体验。理想的方式是让用户在浏览内容的过程中不知不觉的点击浏览广告。所以在内容流中可以插入滤镜的宣传卡片。点进去的滤镜详情页中,除了官方的介绍以外,还可以展示其他用户使用概率排出来的效果照片,更容易带动用户去购买。


发现页的布局保留了原本参差不齐的图片瀑布流,很喜欢这样的布局,很像美术馆的展览,一幅幅优美的画摆在白色干净的背景墙上,中间有足够留白。不像是很多图片社区一样,每张照片都左右撑满,密不透气。

五、关于风格

视觉风格不是我聚焦的重点,但整体展现仍然考虑了它的logo和品牌的感觉,采用白底为主,轻盈、细的字体和图标,界面尽量层级扁平处理。不过没有拿任何主题色、也没有对页面标题做细致的字体考虑,所以调性还是素了。

整个方案的完整动效video:http://v.qq.com/x/page/e0343kwcxvu.html


评论 ( 2 )
热度 ( 4 )

© 爱新觉罗米 | Powered by LOFTER