用「黄油相机」蛮久了,今天来重设计它。
现今移动端照片类应用大致分为这么两种:
1、以snapseed、vsco为代表的较专业的修图工具,提供了从裁剪、去污、滤镜等完备的功能。
2、以Instagram、nice、lofter为代表的图片社区,修图在这里是为了更快传播,修图步更加流程化简洁化。
对于「黄油相机」,它总给我一种「我们才不像无脑的一键P图应用呢,我们可是有B格有创意的,在我们修的图放到朋友圈一定�是点赞最多的!』
为了释放创意,当然只不能弄几个模板、贴纸,�于是不可避免地增加了许许多多的功能,滤镜、文字、图形每一方面都要照顾到,细至透明度、阴影的软硬、行距边距等也不厌其烦一并加上。下图很好的反映了其功能的复杂。
修图流程是这样的
第四步难以理解地出现了「仅对自己可见」的选项,而分享到其他平台的选项在「照片」条目下隐藏地扭扭捏捏,个人认为也反映了其照片社区与工具定位的纠结。
修图流程重设计
Step 1
合并「选择照片」与「裁剪」
这里我将原设计中「选择照片」和「裁剪」图片两个页面合并成了一个,主要还是因为其功能与交互较其他页面都更简单,合并也不会过于繁琐,且为后续功能的拆分腾出了页面。
优化反馈
原设计中,当我点击「画布比」,图片被裁剪成4:3或1:1,视觉上除了图片被切割外,按钮也发生相应变化。
我认为这一视觉反馈�指示性不够强,故尝试了一种新的方式。
Step 2
step2没什么好说的,滤镜、锐化、模糊这类更「图片」的功能被我拆分开来,分列为底部三个tab。
Step 3
现有修图流程的主要问题是层级复杂,结构混乱
tab栏与侧边栏齐上阵,视觉上如此混乱的结构,终究是塞进太多功能,条目维度过多导致的。
修图时用户的使用习惯
修图时,如添加文字,「文字」-「打字」-「字体」,最底层即「字体」的使用频率是最高的,因为用户需要不断切换各类字体,对照前后效果。那么在交互这一环节就应当尽量减少��在「字体」间切换的成本。
此外作为面向大众的修图产品,清楚的结构才是第一要义,故不应当抗拒三层菜单的使用。
最后,动效和视觉对比来区分父层级和子层级也是必不可少的。
Step 4
原设计中为选择「�仅对自己可见」,因为我并不了解黄油自己的想法,所以我的重设计到此为止。
相关阅读:
后记:这次重设计多是一时兴起,自己是个UXER,上文的评价和重设计很多时候都只是局外人的看法。创造一款产品,从来都是自上而下的顺序,战略-功能-交互-界面。慢慢觉得各方优秀的协调整合远比一个人意淫好得多。