实例分析:关于上传照片交互逻辑的思考

最近在重新设计公司APP上传照片的组件,研究了很多移动端上传照片的组件,下面来简单单谈谈自己的总结。


最近在重新设计公司APP上传照片的组件,研究了很多移动端上传照片的组件,下面来简单单谈谈自己的总结。

实例分析:关于上传照片交互逻辑的思考

照片选择通常分为四个步骤“查找图片、选择图片、编辑图片、上传图片”,下图是最常见的照片选择的操作流程,接下来会依据用户需求场景和操作场景对整个流程进行分析。

实例分析:关于上传照片交互逻辑的思考

查找/拍摄照片

通常情况下在用户点击了拍摄按钮时这里存在着两种需求场景,一种是从相册中选择,一种是从现在拍摄,但是在这里不同的APP出现了很多种不同的设计方案。

案例一:如下图是微信选择上传照片的方式,当点击相机按钮后弹出Actionsheet选择选取照片的方式

实例分析:关于上传照片交互逻辑的思考

分析:这种方式是目前最常见的设计方案,所有的用户在这里都得到了公平的对待,他们根据不同的需求和目的进行分流,行为逻辑和界面设计都非常的合理。但是这样的方式存在着一个明显的缺点,在这里所有的用户都必须执行一次选择操作,假如说大部分的需求场景都是采取从相册中进行选择,那么这样的方式就不够友好了,因为它会让这一大部分人多操作一步。

可微信为什么采用这样的方式呢?我是这么猜想的,一是可能因为这两类需求概率相差不大,二是可能因为微信本身想去培养一种即拍即发的行为习惯。

案例二:如下图是QQ选择上传照片的方式,当点击头像后弹出Actionsheet选择上传头像的方式

实例分析:关于上传照片交互逻辑的思考

分析:QQ的方式和微信一样,只不过多出了“拍摄动态形象、查看大图”这两个操作选择。这里的选择不仅限于“拍照”和“从相册中选择”,它会根据用户的实际需求场景进行改变,QQ将所有可能的需求场景都放在了Actionsheet里,个人认为不是一个很好的做法,对于想查看大图的场景来说,点击头像后用户的心理预期应该是头像立即被放大,但是这里是需要再进行一次操作的。

案例三:如下图是Lofter选择上传照片的方式,当点击拍照按钮后直接弹出了相册列表页

实例分析:关于上传照片交互逻辑的思考

分析:Lofter这种直接弹出相册列表并且将拍照上传的入口放到了相册列表的右下角,我是这么理解的,因为在大部分的场景下用户在Lofter上发博文都是从相册中选取照片而并非直接拍摄,所以Lofter直接进入相册列表是为了方便用户快速在相册中选择照片。

案例四:如下图是IOS9.0发短信时添加照片的方式,它将最近的照片通过如图的方式列举了出来,这样方便用户直接进行照片的选择。

实例分析:关于上传照片交互逻辑的思考

分析:当我们在向好友发送图片时,图片大部分情况下都是刚刚拍摄或者最近拍摄的,IOS抓住了用户这样的行为习惯,直接将最近的照片按照时间以缩略图的形式展示出来,这样极大方便了用户的选择,同时它又没有彻底改变原来的选择方式,用户如果想拍摄或者选择很早之前的照片也可以通过actionsheet进行选择

案例五:如下图是IOS10发短信是选择照片的方式,点击拍摄按钮后直接在手机的下半屏出现一个微型拍摄界面以及最近照片的缩略图,将界面向右拖动是才出现“拍摄照片”和“相片图库”的入口,IOS这样既方便用户了用户进行快速选择也能使用户能够快速拍摄。

实例分析:关于上传照片交互逻辑的思考

分析:这种方式是将之前的方式进行了彻底的改变,它将拍摄和选择完全融到了一起,IOS10这样做既方便了用户进行快速选择也能使用户能够快速拍摄,但是这个微型拍摄界面的拍摄体验实在是有点不好。

选择照片/拍摄照片/更换目录

1.选择照片

方式一:选择照片分为单选和多选,现在大部分的做法都是将这两种方式进行结合,如下图是微信发朋友圈时选照片的方式,缩略图的右上角有一个复选框,通过勾选复选框进行选择,勾选多个就是多选,点击图片区域进行预览图片

实例分析:关于上传照片交互逻辑的思考

优点:通过复选框将单选和多选结合在了一起,这样的方式对两种需求场景的用户都能很好地兼容。

缺点:选择区域有点小,容易引起误操作(点到图片内容区了),再则就是会遮挡图片内容影响界面美观。

方式二:如下图是Lofter选择照片的方式,Lofter在这里做了一个新的尝试,它的相册列表优先是满足单选,用户点击图片后就直接进入图片的编辑页面。通过长按照片进入多选模式,多选时在缩略图中央出现所选照片的计数。

实例分析:关于上传照片交互逻辑的思考

分析:显然这种方式对于多选是不友好的,多选用户不仅要多操作一步而且这一步的学习成本也较高。但是LOFTER之所以这样做是有他自己的原因的:

猜想一,在LOFTER中大多数用户本身就是以发单图为主,这样的设计优先满足了发单图的这样的场景,让用户可以快速地选择单图

猜想二:这也可能是LOFTER自己想设计一种用户行为,让用户尽可能地选择单图。LOFTER的内容是以大图配文字的卡片进行展示,图片作为主要内容,文字作为辅助。Lofter之所以想让用户选择单图是因为它想把最好最精的内容展示给用户,这样也可以让用户尽可能浏览更多用户的内容。

2.拍摄照片

案例一:如下图所示,拍摄照片最常见的方式就是调用原生系统的相机进行拍摄,拍摄一张后进行照片的预览,用户可以选择重拍或者使用照片,当用户想添加多张时往复执行这样的操作即可。

实例分析:关于上传照片交互逻辑的思考

分析:这种方式对想添加多图的用户来说是不够友好的,因为用户需要往复执行重复的操作

案例二:如下图是LOFTER拍照的流程,用户在拍摄后直接进入了照片编辑的页面,通过点击返回按钮重新拍摄

实例分析:关于上传照片交互逻辑的思考

分析:LOFTER在拍摄后直接进入了照片的编辑页面,这是用户的需求同样也是LOFTER想让用户做的一件事。

案例三:如下图是印象笔记拍摄照片的流程,个人非常喜欢这样的一个设计,它有几个非常亮眼的地方:

实例分析:关于上传照片交互逻辑的思考

  1. 只需对准内容不移动便可以进行拍摄,这样用户可以专心地去对准内容,不用担心拍摄时因为手抖而出现照片内容额偏差
  2. 印象笔记可以自动识别背景(绿色部分),在拍摄时去除背景只留内容部分,这对于拍摄文件是一个很方便很实用的功能
  3. 可以进行连续拍摄,拍摄的照片被临时存到了一个空间中,在拍摄完后用户可以对照片进行选择和编辑

分析:印象笔记的连续拍摄很好地满足了用户的需求,用户在记录图片笔记时很多时候都是需要拍摄多张图片的,如果用案例一的解决方案,用户会一直不停的进行循环操作。

3.更换目录

目录是为了给照片进行分类,目前最常见的做法是在调用系统相册时默认进入相机胶卷这个相册,如果用户不是想在这个相册中选择时便可切换相册目录,常见的切换方式有一下两种:

方式一:如下图是微信切换目录的方式,点击左上角的“返回”按钮进入相册文件夹的列表,选择文件夹后再进入相册页面

实例分析:关于上传照片交互逻辑的思考

分析:这种方式有两个的体验上不好的地方:

  1. 左上角的文案会带给用户疑惑,并不知道这个返回是什么意思
  2. 切换相册文件夹时需要跳转页面,这点的感受不是很好

方式二:如下图是LOFTER切换目录的方式,他将这一操作放在了相册列表中,用户通过这样的方式快速切换相册目录,个人比较喜欢这样的方式。

实例分析:关于上传照片交互逻辑的思考

总结

任何一种交互方式都是紧跟用户需求场景和操作习惯的,看似一个简单的上传照片的功能却有很多种不同的设计方案,而且任何一种方案都有着自己的优点和缺点。作为设计师需要明白的是不同的解决方案所适用的场景,在面对不同的需求场景时应该设计怎么的方式才更加适合。

在设计用户行为流以及界面布局时我们必须要想清楚以下几点:

  • 用户的需求场景是什么?
  • 不同需求场景的各自的占比是多少?
  • 我们应该首先满足哪一类用户的需求场景?
  • 我们的用户希望进行怎样的操作?
  • 我们希望用户进行怎样的操作(产品想培养用户一种什么样的习惯)?

 

本文由 @不知名设计师 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25817/

(0)
CatherineCatherine
上一篇 2017-05-12 11:05
下一篇 2017-05-12 13:16

相关推荐

  • 2017年视觉设计的六大趋势

    我们在去年的趋势基础上进行筛选提炼,在历时两周的最终定义阶段之后,整合出一份2017年的设计趋势分析报告,希望能给各位从事并热爱设计的同学们带来一些启发和帮助。

    2017-05-09
  • IxD案例作品分享:我来也”APP概念设计及动效设计

    本作品作者是来自站酷的设计师羊羊羊8571,本文经过作者本人许可。 转载请与作者联系!取得授权。 “我来也”是一款基于手机LBS属性的移动点名签到应用,利用手机应用解决了老师课堂点名,活动签到,会议签到!在工作…

    2015-07-29
  • 无限滚动翻页的优点和缺点

    一张图告诉你无限滚动翻页的优点和缺点 什么是无限滚动翻页?你一定不会陌生。实在不清楚,刷一下微博就知道了。想不想知道你的网站适不适合使用无限滚动翻页,看看这篇文章应该会很有帮助! 无限滚动翻页是现在讨…

    2015-01-21
  • 如何以正确的姿势完成虚拟世界的互动?

    如果你还是个VR交互的小白;如果你已经意识到三维世界交互的不同,却还没有突破的方法;这篇文章,值得收藏、细读

    2017-05-15
  • APP界面设计规范编写指南

    在创作阶段设计页面时,如果没有规范来指导,设计过程中很容易产生细微的出入,导致出现控件不一致,增加返工率,这时候我们需要界面制定设计规范。

    2017-05-05
  • 交互新人眼中的交互设计

    从一开始选择做交互设计这个岗位,我就一直在思考:“交互设计究竟是什么东西”。近段时间以来参加了一些面试,每次面试都会让我去重新思考一下这个问题。加上最近又做了一些工作,看了一些资料,对这个问题又有了一…

    2015-12-25
  • 儿童键盘输入交互方式探讨:为熊孩子设计的输入法

    想必针对婴幼儿用户所设计的产品出发点与普通的产品设计出发点一定有所不同,那么在设计幼儿产品时,应该考虑哪些交互细节点呢?文章以一款儿童输入法为例,为我们解读了在儿童产品设计过程中该注意的一些交互细节点。

    2017-04-27
  • 带给你视觉 2015 Web 设计色彩流行趋势

    前几天分享的2015年春夏流行色人气很高,今天直接放干货,@AnyForWeb_UDC 的同学根据2015年的色彩大致趋势走向,结合相关的设计经验,作出了以下网页配色 预测分析,来看看有哪些亮点吧。

    2014-12-28
  • 文娱寄卖 | 京东用户体验部喊你来填调研问卷啦!

    全文字数:  1800阅读时间:   6分钟嗨,收藏大咖们你们好!我是来自京东集团电子文娱技术研发部的一名用户体验师。刚接触京东文娱寄卖业务的时候,我并不太熟悉邮币卡、书画等市场,只是经常听朋友和亲戚讨论文玩藏品。当与很多邮币卡商、书画商沟通之后,我看到的是20多年的坚守、30年不变的初衷以及因线下市场低迷导致的生活压力。顷刻间我明白了,京东文娱寄卖商城的人文情怀,这其中是对行业的挚爱以及解决用户需求痛点的执着。用户体验部钱币溯源,追忆...

    2018-04-25
  • 移动APP中各种类型的导航设计

    即使是移动应用界面的原型设计,导航的形式也可以多种多样。尽管尺寸小,又必须紧凑排列大量数据,它们似乎受到了紧密的约束,但依然有着形形色色的选择。 人们曾经一度只会考虑一种形式——流行且广泛使用的垂直导航…

    2014-11-06