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

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

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


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

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,上文的评价和重设计很多时候都只是局外人的看法。创造一款产品,从来都是自上而下的顺序,战略-功能-交互-界面。慢慢觉得各方优秀的协调整合远比一个人意淫好得多。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1 体验环境 体验机型:iPhone 6 体验系统:iOS 9.1 版本号:version 4.3.1 体验人:G...
    Glimsing玮阅读 10,907评论 1 12
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,486评论 25 709
  • 前言:黄油相机是为数不多的,能让人一见顷心的应用,最初喜欢它是沉迷于它的界面及交互,再次喜欢是因为黄油可以制作白底...
    小木头大马尾阅读 10,542评论 4 2
  • Week 1 主要记住的知识点: 1.Regression & Classification 1.回归问题的应用...
    盟丫头萌檬懵阅读 7,616评论 0 2
  • 是谁说“陪伴是最长情的告白”?哈罗德和莫琳终于牵着彼此的手,在笑声中摇晃了。 哈罗德对莫琳说:“嗨,你。”莫琳...
    依way阅读 2,823评论 0 0

友情链接更多精彩内容