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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

希望黄油做的越来越好。

作者：镇雷

来源：简书