美颜类相机之交互设计分析

首先从市场来看，截止2018年5月14日，在App store摄影与录像免费App榜单中，B612咔叽位居第四名，仅次于美图秀秀，Faceu激萌排列第8名，也在前十之内。由此可见它们在中国市场上的受欢迎程度以及影响度。

其次结合对《用户体验要素》一书的理解，其中结构层主要将功能分解进行信息架构，框架层主要是根据功能设计出界面框架，具体形式为交互文档，而表现层为基于原型界面附加视觉表现，具体形式为视觉设计。

因为faceu和B612这2款贴纸相机从结构层、框架层、表现层的角度来看，有一定重合度，方便做分析对比。

｜结构层－信息架构分析

从以上信息架构图可见，B612属于工具型的产品，核心功能为拍摄和相册美化，而faceu除此之外还有往社交纵深发展的趋势。

另外从功能层面，通过首页我们可以看出2个产品的核心功能很相似，主要集中在拍摄、相册美化等功能；

不同之处是，B612是纯工具属性的，增加了“音乐”“来回”这些趣味功能，而faceu除工具之外社交属性较强，增加了聊天、加朋友的入口。

｜结构层－流程分析对比

选用贴纸拍摄的流程：

作为核心流程，二者的流程相似：首页——选择贴纸——选择滤镜（可选）——拍摄——保存——分享；

B612贴纸拍摄流程：

faceu贴纸拍摄流程：

B612首页默认的图像可视区域占一屏的3/4，1-2-3-4保持了一致性，还可以在上方点击切换图像比例，另外贴纸和滤镜页面底部有实心的圆形拍摄按钮，方便用户操作，不过按钮遮挡了部分贴纸，视觉上美观度不够，同时容易引起误操作；

faceu首页默认采用沉浸式的体验方式，整屏都可以看到拍摄的内容，1-2-3保持了一致性，而4没有统一，当然图像比例可以在更多设置里调整；在3（保存图片）中，右上角有3个icon，分别为：添加文字、选择贴图、画笔，可以对拍摄的图片进行二次美化，符合用户使用场景和心理；在4（分享图片）中，”分享至......”体现了社交属性，因为相比B612多了可以分享到Faceu朋友；

｜框架层&表现层－交互细节对比

一、首页对比：

1.B612首页

分析：

1.底部拍摄功能是默认状态，点击可以拍照，长按可以录制小视频；同时可以点击或左右滑动下方的文案切换到表情包、视频、音乐、来回功能，当具体点击或滑动到某一项功能的时候，拍摄icon或者界面同步变化，相应的文案高亮显示，表示为当前状态，不过总共5项功能切换，文字也较小，尽管滑动和点击都能切换，但还是有一定操作难度，建议文字放大增加操作热区，或者考虑扩展性未来功能更多可以将功能选项调整位置。

2.当滑动下方的功能切换到“音乐”时，新页面覆盖当前页面，需要点击右上角的关闭按钮才可以重新回到上一个功能页面，不符合操作的一致性原则，页面形式不统一容易给用户造成困惑。

3.拍摄按钮左边表示贴纸的icon和右边表示人像美化的icon区别度不高，需要点击之后才知道，无形中增加了用户的学习成本。

4.顶部依次为相册美化、画面比例调整、更多设置、相机前后置切换，其中画面比例调整单独摆放出来，强化了该功能，可以直接操作看到图像比例效果，符合“所见即所得”，体现了工具应用属性。

2.faceu首页

分析：

1.底部拍摄功能为默认状态，可以点击或左右滑动切换到长视频、表情包功能，当滑动切换到某项功能时文案下面加一个点，遇白色背景文案反白，表示为当前状态。点击或左右滑动的选项有3个，相比B612少，减少了一定的操作负担。

2.当底部点击或滑动切换到长视频时，按钮变化，中间加绿色圆圈，点击可以录制长视频；滑动切换到表情包时，按钮变成黄色的圆带黑色描边，点击按钮自动录制表情包；切换过程很清晰，不过按钮的形式（色彩、形状）不够统一。

3.顶部依次为更多设置、相册美化、相机前后置切换、视频聊天入口，相比B612它将画面比例调整放到了更多设置里，弱化了该功能，并且增加了视频聊天入口，体现了社交的属性和战略。

二、相册美化对比：

进入选择图片页面（二级页面），可以看出二者的基本布局类似，不同之处是B612在页面上方的黄金位置增加了广告位，另外在上下滑动页面时，右上角出现一个小icon，长按并且滑动该icon时出现日期，提高了图片筛选效率；而faceu则相对简单一些，建议优化图片的筛选效率。

三、保存对比：

1.B612

底部控件样式不统一，显得凌乱参差不齐，另外“相册编辑保存”页面的保存按钮与底部边界的间距和其它页面不统一，建议调整；

2.faceu

相比B612底部的控件样式统一了很多，不过“表情包保存”页面的下载和分享按钮跟其它页面没有保持统一性。

总结：

1. 从结构层分析，二者的核心功能类似，但B612为工具型产品，信息架构单一；而faceu带工具＋社交属性，拓展性相对明显。此外二者核心流程也相似，不过faceu相比之下增加了保存图片时的二次美化和社交的引导。

2. 从框架层分析，在界面设计和交互细节上，B612首页的贴纸和人像美化icon识别度和区分度不高，而且在切换功能页面形式上不符合操作的一致性，faceu的整体性相对好，不过按钮的统一性也需要注意。在保存方面，B612的底部控件样式没有统一，faceu相对好一点，不过“表情包保存”页面的按钮也建议保持统一。