无聊的重设计——「黄油相机」

用「黄油相机」蛮久了，今天来重设计它。

文艺青年的心头好——黄油相机

现今移动端照片类应用大致分为这么两种：

1、以snapseed、vsco为代表的较专业的修图工具，提供了从裁剪、去污、滤镜等完备的功能。

左vsco 右snapseed

2、以Instagram、nice、lofter为代表的图片社区，修图在这里是为了更快传播，修图步更加流程化简洁化。

lofter

对于「黄油相机」，它总给我一种「我们才不像无脑的一键P图应用呢，我们可是有B格有创意的，在我们修的图放到朋友圈一定�是点赞最多的！』

为了释放创意，当然只不能弄几个模板、贴纸，�于是不可避免地增加了许许多多的功能，滤镜、文字、图形每一方面都要照顾到，细至透明度、阴影的软硬、行距边距等也不厌其烦一并加上。下图很好的反映了其功能的复杂。

黄油相机脑图

修图流程是这样的

修图流程

第四步难以理解地出现了「仅对自己可见」的选项，而分享到其他平台的选项在「照片」条目下隐藏地扭扭捏捏，个人认为也反映了其照片社区与工具定位的纠结。

难寻的分享

修图流程重设计

前后流程对比

Step 1

合并「选择照片」与「裁剪」

Step 1 前后对比

这里我将原设计中「选择照片」和「裁剪」图片两个页面合并成了一个，主要还是因为其功能与交互较其他页面都更简单，合并也不会过于繁琐，且为后续功能的拆分腾出了页面。

优化反馈

原设计中，当我点击「画布比」，图片被裁剪成4：3或1：1，视觉上除了图片被切割外，按钮也发生相应变化。

画布比

我认为这一视觉反馈�指示性不够强，故尝试了一种新的方式。

nav bar 反馈

Step 2

滤镜、锐化、模糊

step2没什么好说的，滤镜、锐化、模糊这类更「图片」的功能被我拆分开来，分列为底部三个tab。

Step 3

现有修图流程的主要问题是层级复杂，结构混乱

混乱的层级

tab栏与侧边栏齐上阵，视觉上如此混乱的结构，终究是塞进太多功能，条目维度过多导致的。

修图时用户的使用习惯

修图时，如添加文字，「文字」-「打字」-「字体」，最底层即「字体」的使用频率是最高的，因为用户需要不断切换各类字体，对照前后效果。那么在交互这一环节就应当尽量减少��在「字体」间切换的成本。

此外作为面向大众的修图产品，清楚的结构才是第一要义，故不应当抗拒三层菜单的使用。

最后，动效和视觉对比来区分父层级和子层级也是必不可少的。

脑图前后对比 Step 3

Step 4

原设计中为选择「�仅对自己可见」，因为我并不了解黄油自己的想法，所以我的重设计到此为止。

相关阅读：

移动场景下的图像处理应用设计

Swaag 照片上传交互流程优化

黄油相机官网

黄油相机下载（IOS)

后记：这次重设计多是一时兴起，自己是个UXER，上文的评价和重设计很多时候都只是局外人的看法。创造一款产品，从来都是自上而下的顺序，战略-功能-交互-界面。慢慢觉得各方优秀的协调整合远比一个人意淫好得多。