黄油相机(Buttercam)的三个交互改进

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

黄油相机(下面简称黄油)原名《食日谈》,是一款可以添加丰富字体的摄影类 App,而这两个名字都是因为作者斯日先生不仅是个代码高手,更是一个厨房爱好者。我第一次在 UI 中国上看到黄油设计稿的时候就深深爱上了这个 app,当时它只支持 iPhone 5及以上机型,而我手里只有一个 4S,因此直到一个月后才在朋友的 iPhone6 上体验到了这款一见钟情的 App。最开始的界面交互设计和现在的样式有不少的区别,当时的设计虽然吸引人,但是实际使用起来却有很多不合理的地方(不常规的导航结构,很多操作的可见性较差等),因此我在 UI 中国上试着给斯日先生留言简要说明了一些问题,后来也没有再关注。直到最近自己也更新了设备,作为一个从来没有玩过相机 App 的用户,才在新版的黄油上开始了我的手机摄影之旅。

此版本的黄油相比其他摄影类 App 是要来得复杂的,主要原因在于其不仅提供了添加多个文字、图形的功能,还允许对它们做丰富的编辑——这对图层管理、操作提出了很高的要求。目前黄油为了解决这些复杂的操作,同时又希望保证界面的简洁,采用了大量的手势操作。众所周知,手势操作的可见性较差,除去主流的手势以外,其他手势学习成本较高,误操作概率大,因此在体验上有许多可以改良之处。我作为一个还没出道的新人,就针对黄油的几个交互问题尝试进行一些设计和改良。

让我们先来看一下目前黄油关于取图编辑功能的流程:

141198-386eac8c65445409

如果没有用过产品的话看界面图可能不太明晰,那么再来看一个流程图:

2

如图,其中『选择滤镜』的环节还有改变图片横宽比(1:1,4:3)、局部虚化等功能,同时提供了9种滤镜供选择;模板选择部分提供了7种默认模板,并且允许创建新模板和使用收藏的模板;预编辑功能下只允许修改文字内容和调整元素的大小、位置,编辑模板功能中才允许添加元素、修改字体等复杂调整。最后,红色标记的节点是本文着重进行的几个改进之处。

改进一:『切换滤镜』操作与『局部虚化圈移动』操作手势冲突。

在相机拍摄过程中和相册取图完成后,都能够对画面进行滤镜选择和背景虚化的处理,添加背景虚化会在界面中出现如下图所示的虚化圈,并且在大约2秒不操作后自动消失。同时,调整虚化圈的位置需要用手指点击看不见的虚化圈并且进行拖动。此时,如果进行的是左右方向的拖动,即会有可能与左右滑动切换滤镜的操作冲突,引发误操作。同时,当前版本的虚化圈是不能调整大小的。

3

改进方法:当虚化圈所在区域被点击(无论是否可见)后,锁定滤镜切换功能;点击非虚化圈区域后,虚化圈转为不可见,滤镜切换功能重新开放;增加通过手指缩放的虚化圈大小调整功能。(有朋友反馈说是可以把虚化圈放大缩小的,但是我还特意去试了好几次都没有成功,如果是有此功能的,可能操作方式也需要进行改变和提升。)

如下图所示,只有单击虚化圈所在区域才能激活虚化圈的编辑,在区域内左右轻扫是不会激活的。同时,在虚化圈的激活状态下,取消了原本的2秒自动消失设置,只有在点击区域外的部分时,才会使圈消失,并且重新激活滤镜切换功能(下部的白色圆点存在与否表示滤镜切换功能是否开启)。

4改进二:默认模板选择界面与模板预编辑功能的手势冲突,并对此处逻辑进行改良。

完成滤镜的选择后,进入默认模板选择界面,此时点击默认模板内的元素是允许进行简要编辑的,主要包括文字内容编辑(双击),元素位置、角度与尺寸调整,不包含字体调整、添加元素和图层顺序调整,我把这个环节称为预编辑功能。

目前,在预编辑功能下,尽管底部的几个圆圈会消失,但是默认模板选择的功能依然是开放的。也就是说,当我左右移动元素的时候,极易引发模板切换,导致当前所做的操作丢失。同时,返回『被消失』的模板后,前面所做的调整也都不复存在,模板又回到初始状态。

改进方法:取消预编辑功能,默认模板选择界面内点击任何元素即进入『编辑模板』模式,同时取消原本默认模板顶部的『编辑模板』按钮。在『编辑模板』模式下点击无元素区域,则返回默认模板选择页面。先看下面一张图:

5

这样做可以避免上述所提到的误操作,但是引入了一个新的问题,即在编辑模式下点击空白区域后,当前的模板放到什么地方?为此,我在默认模板选择界面上增加了一个位置存放新的模板,如下图所示:

6

新增加的『存放位』用矩形来表示,区别于默认模板的圆形。此处可以设置矩形存放位的个数,比如一个、三个等,最后编辑的模板存入最后一个位子,不足的则不显示,超出的则删除最早的一个模板。新增存放位的个数我不想直接拍脑袋决定,最好根据用户反馈和用户研究测试再设置精确个数比较妥当。另外,原本的编辑模式下才有的『返回提醒』则放置到了如上图所示的位置,离开此界面后,只有重新从默认模板开始编辑。

最后,我取消了原本默认模板选择最后一个选项『新建模板』,由于当前提供的几个默认模板都比较简单,新建模板后立即生成一个文本,和直接修改前面简单模板并没有本质区别,不如减少用户的选择成本。

改进三:元素旋转时难以保持水平或垂直方向。

这个功能其实很常见,在大多数的软件中都提供了,我挺奇怪为什么黄油这个版本没有。简而言之,当我们对元素进行旋转后,其即脱离了原本的水平垂直位置,而我们希望它进入一个新的水平垂直位置时,往往难以通过目测判定是否真的水平或垂直。因此我在旋转角度的判定上加入了一个小的规则改动,即可解决这个问题——增加角度附着,如下图所示。

7

这个改进很简单,但是提供的体验提升却很大。

非常重要但是依然没有想到好办法的第四点:

黄油在编辑界面提供了比较复杂的功能,而为了保持界面的简洁,大多通过手势来完成。

  • 连续点击两下:图层顺序调整与重叠图层的选择;
  • 双指旋转:元素旋转,并且此操作可以在非元素所在区域执行;
  • 双指缩放:元素缩放,并且此操作可以在非元素所在区域执行;

在同时提供了元素右下角旋转按钮的同时又提供双指旋转的功能,会使得用户被可视的前者所吸引而忽略后者。很多用户在很长的时候时间后依然不清楚上面这些功能的用法,而抱怨某些需求无法完成。其实,这些功能在第一次进入 App 后都会有一个小的说明和提醒,但我就和大部分用户一样,只想快点开始使用黄油,对于这些暂时还没有遇到的问题提醒置之不理。

接下来几天我会着重再写一篇文章,讨论这些『不可见操作的可见性提升』问题,也思考一下这类操作如何提升他们的可见性,降低用户学习成本。

黄油相机的设计真的非常棒,我在视觉层面没有资格对它提出什么有价值的意见,考虑到小团队出品,有这些交互上的小纰漏也是在所难免,斯日先生和团队也正在抓紧迭代。我的这些小改进、小方案都是从身边用户中很浅地调研出来,仅供开发者简单参考,最主要还是自己学习、思考的一个过程。

希望黄油做的越来越好。

作者:镇雷

来源:简书

您的赞赏,是对我创作的最大鼓励。

评论( 2

登录后参与评论
  1. 你不觉得横平竖直只是部分人的强迫症想法吗?

    回复
  2. 虚化圈自动消失,是为了能更好的观察图片虚化效果,如果不能消失,会一定程度影响使用。

    回复
加载中