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

最近在重新设计公司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-07
  • 网易资深高手:交互设计师必备的9种能力(上篇)

    网易UEDC – 杨杰 : 有好多交互新人或尚未跨进交互设计大门的同学,会经常问的一个问题:交互设计师需要具备怎样的技能和能力?

    2017-12-03
  • 百度三端搜索首页之美:精确、精准、精细

    持之以恒的学习是设计的来源,责任感是设计的原则,而灵感是设计的升华。

    2017-05-12
  • 【交互设计】【装置艺术】传统昆曲与数字视觉的结合

    ▼数字与戏曲在数字时代大势所趋的背景下,传统戏曲也进行了一些试探性的尝试。交互性能和身临其境成为了戏曲的一种新的模式。演员通过光影达到像素化的效果,圆滑光影与演员的冲突,减少真实与虚拟的隔阂。打造沉浸式的戏曲艺术。▼沉浸与交互数字技术润滑了装置与观众的联系,发挥更大的互动作用。利用空间互动装置设计,以评估演出、空间和观众之间的联系,从而为观众提供一种身临其境的体验。▼古典与未来昆曲是一种东方古典戏剧艺术形式。数字技术的使用可以带来一种新...

    2018-04-17
  • 一招教你让交互方案更靠谱!超好用的目标导向设计法

    对于一枚交互设计 师,设计水平的重要判断标准之一,是看设计师能否产出足够靠谱的方案。对内,方案要能帮助产品不断向前发展,提升产品的数据,为公司带来收益;对外,方案要能满足用户的使用需要,方便用户的操作,提供良好的用户体验。对于交互的同学来说,这些是我们的天职,要想尽一切办法去做好。那么问题来了,如何才能做好这些天职呢?下面我将分三个阶段介绍一个很好用的设计方法 :目标导向设计法。掌握了这个设计方法 ,可以帮你设计出团队内部认可、用户也喜欢的方案。

    2017-05-28
  • 交互说明标注工具合集

    最近很多同学在问交互原型里里的标注怎么做的? 其实很多原型工具可以做到例如Axure、justinmind,但是做起来比较慢且不美观。有没有专业的工具呢?这不我们介绍几款常见的产品。   Specctr 首先是由 Onpixel …

    2016-04-06
  • 5个关键词看小程序和App的UI设计异同

    微信总喜欢在深夜推出一个大新闻,昨晚10点,小程序开放公测的消息一出,我公号的文章都推不出去了,一直显示系统繁忙,那得是多大的流量啊,心里暗想,能分我一点零头就好了,估计是我想多了!

    2017-05-16
  • 什么样的文字聊天,才是一种好的阅读体验?

    本文不是要讨论IM产品的体验设计,而是聊天内容本身的阅读体验。××(我的姓名)

    手机号:186××××××××

    身份证:360103××××××××××××××(我的姓名)

    手机号:186 ×××× ××××

    身份证:360 103 ×××× ×××× ××××姓名:××手机号:186××××××××身份证:360103××××××××××××在UI需要手绘?不会手绘不行吗投简历没有回应 是不是 经验不够ui规范有那些啊 ios andriod都要看啊在吗在吗、没有作品怎么办啊?“滚滚长江东逝水……”“说人话!”“大河向东流哇!”

    2017-05-13
  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11
  • 习惯养成APP的交互设计&视觉设计

    本文通过展示UI设计稿、需求分析报告和交互设计文档,全面详解养成APP的交互体验与视觉设计。

    2017-05-13