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

最近在重新设计公司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

相关推荐

  • APP切图命名规范:介绍一种通用的命名规则

    今天菜心要分享的内容是关于切图命名的规范,由于最近正在总结这一部分内容,所以拿出来和大家一起分享探讨一下。组件_类别_功能_状态@2x.png模块_类别_功能_状态@2x.png

    2017-05-10
  • UED网站“新视界新体验”运营设计的思考

    2018年3月20号,我们UED网站(ued.z6.gldcg.com)开始首次运营,推送了我们的第一篇文章“新视界新体验——广联达集中采购平台新版设计”,在朋友圈,小火了一把。21号的时候,我对这个事情,又有了新的思考:第一次发文的目的是什么:1、推广我们产品全新界面,新体验;2、推广我们UED的网站;事实上,我们达到了我们的目的,微信群中得到了大家的认可,点赞;朋友圈大家转发和分享;朋友圈留言,要体验我们产品;老客户看到后要求升级产...

    2018-03-22
  • Axure RP 7.0软件安装 激活 教程 百度网盘

    点击上方蓝字关注免费领取百度网盘超级会员等部分软件没有贴详细教程和网盘链接,可以给公众号留言发信息,也可加微信:qihai-77当你需要的软件我们没有发布时,可以给我们留言或者加微信:qihai-77反馈哦链接:https://pan.baidu.com/s/1KZcsl-SaEcjPzwvdYQn1oA密码:ws5m有任何需要安装的软件或问题可咨询微信客服:qihai-77链接失效可在公众号留言某某链接失效 或联系微信客服:qihai...

    2018-03-30
  • 交互设计师的60日计划第十六天

    周五综合症:不想做事...今天把昨天的需求做完善,与产品经理讨论其中的一个问题,然后将细节标注清楚,但是产品最终还没有确认。除此之外,一直在帮要晋级的一个视觉同事想文案,最后得出结论,还是得多读书,书到…

    交互专题 2015-08-20
  • APP设计:那些打动人心的设计点(4)

    你好,这是2017年的第12篇文章。自从写了这个系列,每天除了吃饭睡觉工作,其余的时间都在用各种APP,观察各种产品。在同质化越来越严重的今天,这些产品的微交互,是用户喜欢或讨厌一个产品的重要原因,不容被忽视。

    2017-05-04
  • 从设计指南说起,详解Material Design体系组件

    iOS 或 Material Design的设计指南,都是按照组件的属性来系统介绍。
    一般把Control翻译成控件,把Component翻译成组件。通俗的解释说法就是组件为多个元素组合而成,控件为单一元素。但是Material Design把我所认为的控件和组件都合为一体,统称为组件。摊手。

    2017-04-28
  • 腾讯CDC标叔力作!聊聊我与交互设计的那10年

    编者按:很有幸能看到这篇文章,作者见证了腾讯CDC从寥寥数人变成一个成熟团队的整个过程,成长经历相当有可读性,且值得设计师学习反思的地方太多,无论是哪个领域的同学,都推荐阅读收藏。 前言:今年同时是我工…

    2015-11-29
  • 网页设计中,如何突破栅格的限制又保持协调?

    想要打破栅格又保持网页的协调,是有技巧的,并非任何“破格”的设计都是好的。

    2017-05-09
  • 阅读类产品中的交互设计逻辑分析

    ↑  点击上方蓝字,加个关注吧~ ↑话题:阅读类产品的交互设计该怎么做?本文共1285字25图,预计阅读时间: 4分钟阅读体验阅读类的产品交互核心所有阅读类产品围绕的产品核心是:阅读体验好的阅读体验会让用户感到熟悉性,由于用户习惯长久的累积,对于阅读产品的使用逻辑,在用户脑海中已经有了一个基础的操作定位。在阅读体验中,不同习惯的交互动作设计所带来体验也不同,通过分析阅读产品中的交互方式,来解剖其交互中设计逻辑。阅读方式我们参考了三款阅读...

    2018-02-27
  • 设计切实可靠的UI,为你的用户做决策

    真实可靠的UI是产品可信。“大量的选择并不能让人们选择所有东西,并且人们在选择的时候会不开心。”“每一个额外的选择都会导致做决定所需的时间变长。”“我必须要简化我的生活,因为除了思考如何更好的服务社会之外,我必须尽可能少的做决策。—— 马克·扎克伯格”“这就好比你最好的朋友每周都会为你准备一个个性化的音乐合集一样”“Facebook希望为点击很多链接的人提供更多的链接,为观看很多视频的人提供更多的视频,以此类推”“Facebook并没有显示所有的帖子。展示给你的都是被选择过的信息。可有趣的是,Facebook的算法会倾向于加强你哪方面想要的呢?因为这个必须要在之前就定义好。”“假如说你来到伦敦,你定了一个Hailo的车,而你在上午七点到十点之间进入了一个特定的位置。如果你到下午五点了仍然在那里,那么就可能会出现你想要离开的假设,这个时候Google Now就会提醒你订车。”“亚马逊将疑问从‘我需要这个吗’转移到了‘我还需要什么来填满这个盒子’”

    2017-05-09