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

小提示：您能找到这篇{黄油相机（Buttercam）的三个交互改进}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的黄油相机（Buttercam）的三个交互改进内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

希望黄油做的越来越好。

作者：

来源：