Swaag|Swaag 照片上传交互流程优化

Swaag|Swaag 照片上传交互流程优化
文章图片
Swaag 照片上传交互流程优化 Swaag 是一款老牌的照片分享应用,它主打为照片加标签和对比 PK 的功能,为照片增加了品牌、文字属性。国内也很快出现了类似产品(如 Nice、Pinco),可谓在 Instagram 风靡后又引起一小波热潮。Instagram 的风靡与它优秀的用户体验不无关系,它流畅的照片编辑和预上传使得整个照片上传的过程轻松流畅。Swaag 作为标签类照片分享应用的鼻祖,其用户量不少、产品形态更完善。但 Swaag 在照片上传编辑的过程却非常繁琐,在用户体验方面有不少地方值得优化。
Swaag|Swaag 照片上传交互流程优化
文章图片
照片分享应用 Swaag,由左到右依次为 Feed、Discover、Battle 页面 iTunes App Store 中的「Swaag」
功能模型 由于 Swaag 主打为照片加标签的功能,在照片编辑时只保留了滤镜、添加标签两个功能。这是很明智的决定。试想如果像 Instagram 一样加入亮度、对比度、色温等更高级的处理功能,标签将显得不再重要,同时也提高了照片分享的门槛,使得照片分享变得复杂。
目前的 Swaag 有两种照片分享的途径:

  1. 打开相机界面 > 拍照/选择滤镜 > 添加标签 > 发布
  2. 打开相机界面 > 打开相册/选择照片 > 裁切 > 选择滤镜 > 添加标签 > 发布
Swaag|Swaag 照片上传交互流程优化
文章图片
改进前 Swaag 的照片上传编辑流程 在我们对照片进行处理的时候,往往需要经过多个功能步骤。正如电路中的串并联结构,功能模型大致可分为一种迭代结构和一种并列结构。
迭代是重复反馈的过程,每一次迭代都更接近目标结果,每一次迭代的结果会被用作下一次迭代的初始状态。目前的 Swaag 采用的正是迭代结构,从裁切到选择滤镜到添加标签,每个步骤只负责一个功能,且必须严格遵守顺序。而 Instagram 则是并列结构的典型例子,在拍照/选择照片后,可以在同一界面中同时对照片的滤镜、对比度、亮度等参数进行调整,等调节到满意结果再进行发布。
Swaag|Swaag 照片上传交互流程优化
文章图片
迭代结构和并列结构的功能模型 Swaag 的照片调整功能并不丰富,而且滤镜是对照片本身进行修改,添加标签则是在照片上增加另一个维度的信息,两者属于不同的维度。而在用户界面中,添加标签需要对照片区域进行交互,而选择滤镜却不需要对照片区域进行控制。
因此,我认为 Swaag 更适合选择并列结构的功能模型,这不仅减少了照片分享的操作流程,也让用户体验更流畅。
Swaag|Swaag 照片上传交互流程优化
文章图片
改进后的 Swaag 照片上传界面,左为拍照界面,右为添加标签/滤镜界面 全新的添加标签的交互方式 为照片加标签是 Swaag 的主打功能之一,但添加标签的体验相当糟糕。点击照片任意空白处,首先会出现品牌类别供用户选择,选择其一后可以进入该类目的目录进行寻找,如果找不到,可以手动输入文字,或选择最近添加过的标签。这里面主要存在两点问题:
  • 品牌类别仅聊胜于无:选择品牌类别后进入目录列表按名称进行排序,排在前面的品牌自然先是数字开头的品牌,再按英文字母排列,从目录中检索品牌的耗时太长,不如手动输入。其次,品牌类别除了在添加标签时助于精确归类之外,没有任何作用,它徒增了一个交互步骤。
Swaag|Swaag 照片上传交互流程优化
文章图片
改进前 Swaag 的添加标签的流程
  • 通过点击的方式确定标签位置,本身便不够精确,也无法预览最终标签加上去后的效果。如果在添加标签后发现标签的位置或文字需要修改,则需要把原有的标签删除,再重新添加新标签。虽然添加成功后修改的频率很低,以点击的交互方式添加标签也并不妙。
Swaag|Swaag 照片上传交互流程优化
文章图片
如果需要修改标签的位置或文字,则需要把原有标签删除,再重新添加新标签 在重设计中,我改变这一交互方式——将点击添加标签的形式改为拖拽:
1.当拍照/在相册中选择照片后,预设的标签放在原先快门按钮的位置
2.通过拖拽,用户将标签放在他们喜欢的位置
3.手指离开屏幕,键盘和搜索页面出现,为标签添加品牌文字
Swaag|Swaag 照片上传交互流程优化
文章图片
添加标签交互重设计,左:拖拽标签,右:输入品牌文字 如此一来,添加标签的操作不仅简单,用户也可以直接预览标签的效果。如果需要改变已有标签的位置或删除,只要拖拽标签或把标签拖到删除区就好;如果需要修改标签内容,点击(tap)标签,键盘又将重新弹出。
为方便理解,我制作了一个小动画进行演示(图片体积稍大):
demo 如果用户希望分享相册中的照片,照片列表则在拍照按钮的下方,用户可以直接看到最新的几张照片,往上滑也能继续浏览照片列表。同时,正方形的照片区域也融入了裁切功能,在进入下一步前便可以把照片裁切成所需要的方形,而不需要进入单独的界面进行裁切。
Swaag|Swaag 照片上传交互流程优化
文章图片
改进后的添加标签的流程 本文系 Weekly Design Challenge 系列,第五周
【Swaag|Swaag 照片上传交互流程优化】Click here to see the English version

    推荐阅读