数极客首页

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

黄油相机(下面简称黄油)原名《食日谈》,是一款能够

添加丰厚
字体的摄影类 App,而这两个名字都是由于
作者斯日先生不只
是个代码高手,更是一个厨房喜好

者。我第一次在 UI 中国上看到黄油设计稿的时分
就深深爱上了这个 app,当时它只支持 iPhone 5及以上机型,而我手里只需

一个 4S,因而

直到一个月后才在朋友的 iPhone6 上体验到了这款一见钟情的 App。最开端
的界面交互设计和往常

的样式

有不少的区别,当时的设计固然
吸收
人,但是理论

运用
起来却有很多不合理的中央
(不常规的导航结构

,很多操作的可见性较差等),因而

我在 UI 中国上试着给斯日先生留言扼要
阐明

了一些问题,后来也没有再关注。直到最近自己

也更新了设备,作为一个历来
没有玩过相机 App 的用户,才在新版的黄油上开端
了我的手机摄影之旅。

此版本的黄油相比其他摄影类 App 是要来得复杂的,主要缘由
在于其不只
提供了添加多个文字、图形的功用
,还允许对它们做丰厚
的编辑——这对图层管理、操作提出了很高的央求

。目前黄油为了解

决这些复杂的操作,同时又希望保证界面的简约
,采用了大量的手势操作。众所周知,手势操作的可见性较差,除去主流的手势以外,其他手势学习本钱
较高,误操作概率大,因而

在体验上有许多能够

改进

之处。我作为一个还没出道的新人,就针对黄油的几个交互问题尝试中止

一些设计和改进

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

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

假定

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

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

如图,其中『选择滤镜』的环节还有改动
图片横宽比(1:1,4:3)、部分

虚化等功用
,同时提供了9种滤镜供选择;模板选择部分

提供了7种默许
模板,并且允许创建

新模板和运用
珍藏

的模板;预编辑功用
下只允许修正
文字内容和调整元素的大小、位置,编辑模板功用
中才允许添加元素、修正
字体等复杂调整。最终
,红色标志
的节点是本文着重中止

的几个改进

之处。

改进

一:『切换滤镜』操作与『部分

虚化圈移动

』操作手势抵触

在相机拍摄过程中和相册取图完成后,都能够

对画面中止

滤镜选择和背景虚化的处置
,添加背景虚化会在界面中呈现
如下图所示的虚化圈,并且在大约2秒不操作后自动消逝
。同时,调整虚化圈的位置需求
用手指点击看不见的虚化圈并且中止

拖动。此时,假定

中止

的是左右方向的拖动,即会有可能与左右滑动切换滤镜的操作抵触
,引发误操作。同时,当前版本的虚化圈是不能调整大小的。

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

改进

办法

:当虚化圈所在区域被点击(无论能否
可见)后,锁定滤镜切换功用
;点击非虚化圈区域后,虚化圈转为不可见,滤镜切换功用
重新开放;增加经过
手指缩放的虚化圈大小调整功用
。(有朋友反响

说是能够

把虚化圈放大减少
的,但是我还特意去试了好几次都没有胜利

,假定

是有此功用
的,可能操作方式也需求
中止

改动
和提升。)

如下图所示,只需

单击虚化圈所在区域才干
激活虚化圈的编辑,在区域内左右轻扫是不会激活的。同时,在虚化圈的激活状态下,取消了原本

的2秒自动消逝
设置,只需

在点击区域外的部分

时,才会使圈消逝
,并且重新激活滤镜切换功用
(下部的白色圆点存在与否表示滤镜切换功用
能否
开启)。

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

目前,在预编辑功用
下,固然

底部的几个圆圈会消逝
,但是默许
模板选择的功用
依然

是开放的。也就是说,当我左右移动

元素的时分
,极易引发模板切换,招致
当前所做的操作丧失
。同时,返回『被消逝
』的模板后,前面所做的调整也都不复存在,模板又回到初始状态。

改进

办法

:取消预编辑功用
,默许
模板选择界面内点击任何元素即进入『编辑模板』方式

,同时取消原本

默许
模板顶部的『编辑模板』按钮。在『编辑模板』方式

下点击无元素区域,则返回默许
模板选择页面。先看下面一张图:

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

这样做能够

避免

上述所提到的误操作,但是引入了一个新的问题,即在编辑方式

下点击空白区域后,当前的模板放到什么中央
?为此,我在默许
模板选择界面上增加了一个位置寄存

新的模板,如下图所示:

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

新增加的『寄存

位』用矩形来表示,区别于默许
模板的圆形。此处能够

设置矩形寄存

位的个数,比如

一个、三个等,最终
编辑的模板存入最终
一个位子,缺乏
的则不显现
,超出的则删除最早的一个模板。新增寄存

位的个数我不想直接拍脑袋决议
,最好依据

用户反响

和用户研讨
测试再设置精确

个数比较

妥当。另外,原本

的编辑方式

下才有的『返回提示
』则放置到了如上图所示的位置,分开
此界面后,只需

重新从默许
模板开端
编辑。

最终
,我取消了原本

默许
模板选择最终
一个选项『新建模板』,由于当前提供的几个默许
模板都比较

简单,新建模板后立刻

生成一个文本,和直接修正
前面简单模板并没有实质

区别,不如减少用户的选择本钱

改进

三:元素旋转时难以坚持
水平

或垂直方向。

这个功用
其实很常见,在大多数的软件中都提供了,我挺奇特

为什么黄油这个版本没有。简而言之,当我们对元素中止

旋转后,其即脱离了原本

的水平

垂直位置,而我们希望它进入一个新的水平

垂直位置时,常常
难以经过
目测判定

能否
真的水平

或垂直。因而

我在旋转角度的判定

上参与

了一个小的规则改动,即可处置

这个问题——增加角度附着,如下图所示。

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

这个改进

很简单,但是提供的体验提升却很大。

十分

重要但是依然

没有想到好办法

的第四点:

黄油在编辑界面提供了比较

复杂的功用
,而为了坚持
界面的简约
,大多经过
手势来完成。

  • 连续点击两下:图层次第
    调整与堆叠
    图层的选择;
  • 双指旋转:元素旋转,并且此操作能够

    在非元素所在区域执行;

  • 双指缩放:元素缩放,并且此操作能够

    在非元素所在区域执行;

在同时提供了元素右下角旋转按钮的同时又提供双指旋转的功用
,会使得用户被可视的前者所吸收
而疏忽

后者。很多用户在很长的时分
时间后依然

不分明

上面这些功用
的用法,而埋怨

某些需求无法完成。其实,这些功用
在第一次进入 App 后都会有一个小的阐明

和提示
,但我就和大部分

用户一样,只想快点开端
运用
黄油,关于
这些暂时还没有遇到的问题提示
置之不理。

接下来几天我会着重再写一篇文章,讨论这些『不可见操作的可见性提升』问题,也思索

一下这类操作怎样
提升他们的可见性,降低用户学习本钱

黄油相机的设计真的十分

棒,我在视觉层面没有资历
对它提出什么有价值的意见,思索
到小团队出品,有这些交互上的小纰漏也是在所难免,斯日先生和团队也正在抓紧迭代。我的这些小改进

、小计划

都是从身边用户中很浅地调研出来,仅供开发者简单参考,最主要还是自己

学习、思索

的一个过程。

希望黄油做的越来越好。

作者:镇雷

来源:简书

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章