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

最近在重新设计公司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-05-18
  • 困扰多年的选择困难症,居然让交互设计给我治好了...

    觉得自己患上了选择困难症?也许这并不是你的错,而是对方给予的选项太多。 Hick’s Law(席克法则)中说道:一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。用数学公式表达为反应时间 T=a+b log2(n…

    2015-09-10
  • 由UI/UX设计师向产品设计师演变

    为了创造出伟大的产品,UI/UX设计师应该期待并成为能够生成和处理更多额外信息以获得最佳设计成果的产品设计师。

    2017-05-09
  • 别骂携程了,来看看Booking上如出一辙的“暗黑套路” 【UXRen译#182】

    作者:Roman Cheplyaka   |  翻译:林龙飞,校审:天蛙   近来,有很多网站和应用的设计者会诱导你做他们想做的。以下是来自timewellspent.io的例子: Youtube自动播放更多的视频来把用户留住; Instagram使用无限…

    交互专题 2017-10-25
  • 别让措辞毁了你的设计成果

    本文总结到:措辞在用户体验设计中很重要。注意使用简洁、明了、有力的词语来表达信息。它会彻底改变产品体验和心态。你:“对不起老师,我能去厕所吗?”

    老师:“我不知道……能不能,你说呢?”好友:“嘿,[你的名字]!试试搬起这把椅子。”译者注:这个问题在汉语中应该不存在。原文中的Just一词,如今最常用来表达“刚好”、“恰好”、“差一点”的含义。“你差点就拿下第一名了,继续努力!”“你与第一名已经很接近了,下次反应速度得再快一些。”

    2017-05-07
  • 浅析设计图表色彩的简单方式

    译者按:对色彩的研究通常要么太过随意缺乏逻辑,要不太过理论化难以理解,这篇文章用非常浅显易懂的方式,讲述了一个专门研究数据可视化的团队探寻图标色彩搭配的历程,给出有力的论证,并得出很棒的结论,非常值得一读。对色盲色弱来不够友好*:原文中问题一的标题是“Low Accessibility”,通常用形容来产品对残障人士的友好度不够,这一点在欧美国家经常作为需要重视的产品硬指标(也是由于他们的色盲色弱发病率比亚洲高很多)。因为在中文里没有简短精准的说法,所以我在写的是“对色盲色弱不够友好”。
    逻辑性较强的人*:原文的写法是“left-brained folks”,直译是左脑型的人。通常左脑型的人被认为逻辑严谨,右脑型的人被认为有艺术天赋。因为这种说法在中文里不是很通用,所以我写的是“逻辑性较强的人”。

    2017-05-01
  • 你以为的交互,其实都有所出入

    任何职业的学习都是没有尽头的,只有越学越多,才能提高你的竞争力。多学各种知识才是王道。

    2017-05-21
  • 小白菜们:别再用“好的文案”YY了,该醒醒了!

    不知何时起,文案写的好,竟然成了众多互联网小白追捧的热点,各种文案大师,文案叫兽,传道受业解惑,登台演讲,大讲文案的力量,貌似文案写的好,就练成了盖世神功,天下无敌了。

    2017-05-26
  • AxureUX信息化精美简历模板完整版正式发布

    01作品信息作品名称:AxureUX信息化精美简历模板完整版作品类型:模板类发布日期:2018-03-12最新版本:v1.0主要适用:其它软件版本:Axure 8.0文件大小:5.6MB作品编号:OTH002作品售价:¥69.00详细介绍及演示:http://www.axureux.com/home/ResumeTemplatePro.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品是...

    2018-03-12
  • 设计流程、交互设计进阶、空状态设计

    设计作品源于设计师的自我发现、情感和创造,在日常工作中我们加入字体、颜色、空间准则来让在我们感性的表达设计美学基础上更理性的表达设计思维;以上这些是众所周知的基本法则,是设计具备的基本能力;科学的、合理的、为用户设计才是设计师价值的体现。那么如何让我们的设计更理性?在长期跟一条产品线的工作过程中,我们会发现每天做着很多事情,不知道会不会有以下感觉:1.感觉离用户很远;2.感觉对用户数据的增长好像没有什么明显帮助。那么用户增长和设计有什么...

    2018-03-15