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

人人都是产品经理 区推出产品经理培训课程，让BAT产品总监手把手带你学产品吧！

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

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

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

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

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

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

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

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

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

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

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

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

希望黄油做的越来越好。