关于上传图片功能的案例与思考
发布:用户投稿
最近在重新设计公司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想让用户做的一件事。
案例三:如下图是印象笔记拍摄照片的流程,个人非常喜欢这样的一个设计,它有几个非常亮眼的地方:
- 只需对准内容不移动便可以进行拍摄,这样用户可以专心地去对准内容,不用担心拍摄时因为手抖而出现照片内容额偏差
- 印象笔记可以自动识别背景(绿色部分),在拍摄时去除背景只留内容部分,这对于拍摄文件是一个很方便很实用的功能
- 可以进行连续拍摄,拍摄的照片被临时存到了一个空间中,在拍摄完后用户可以对照片进行选择和编辑
分析:印象笔记的连续拍摄很好地满足了用户的需求,用户在记录图片笔记时很多时候都是需要拍摄多张图片的,如果用案例一的解决方案,用户会一直不停的进行循环操作。
3.更换目录
目录是为了给照片进行分类,目前最常见的做法是在调用系统相册时默认进入相机胶卷这个相册,如果用户不是想在这个相册中选择时便可切换相册目录,常见的切换方式有一下两种:
方式一:如下图是微信切换目录的方式,点击左上角的“返回”按钮进入相册文件夹的列表,选择文件夹后再进入相册页面
分析:这种方式有两个的体验上不好的地方:
- 左上角的文案会带给用户疑惑,并不知道这个返回是什么意思
- 切换相册文件夹时需要跳转页面,这点的感受不是很好
方式二:如下图是LOFTER切换目录的方式,他将这一操作放在了相册列表中,用户通过这样的方式快速切换相册目录,个人比较喜欢这样的方式。
总结
任何一种交互方式都是紧跟用户需求场景和操作习惯的,看似一个简单的上传照片的功能却有很多种不同的设计方案,而且任何一种方案都有着自己的优点和缺点。作为设计师需要明白的是不同的解决方案所适用的场景,在面对不同的需求场景时应该设计怎么的方式才更加适合。
在设计用户行为流以及界面布局时我们必须要想清楚以下几点:
- 用户的需求场景是什么?
- 不同需求场景的各自的占比是多少?
- 我们应该首先满足哪一类用户的需求场景?
- 我们的用户希望进行怎样的操作?
- 我们希望用户进行怎样的操作(产品想培养用户一种什么样的习惯)?
版权声明:本文来自用户投稿,不代表【繁花网】立场,本平台所发表的文章、图片属于原权利人所有,因客观原因,或会存在不当使用的情况,非恶意侵犯原权利人相关权益,敬请相关权利人谅解并与我们联系(邮箱:faedoony@foxmail.com)我们将及时处理,共同维护良好的网络创作环境。
大家都在看
-
苹果备忘录内容误删了怎么恢复上一步
数码科技备忘录对于苹果用户来说是一个很好用的软件,平时用来紧急记一下东西的同时还可以加密,这就避免了数据的泄露了,但是无可避免的事情是不小心删除了某些备忘录,苹果备忘录怎么恢复数据?一篇干货为你详细解答。方法一:电脑端上恢复经过iCloud备份的备忘录苹果备忘录怎么恢复数据?对于习惯备份
-
英雄联盟有什么皮肤现在买不到,英雄联盟现在还有绝版皮肤吗
数码科技从2011年开始接触英雄联盟这个游戏,到现在已经过去了八年。这八年是我的人生中最宝贵的时间,相信不少的老玩家也和我感同身受。八年前最开心的事情是什么呢?网吧、五黑,和最要好的兄弟一起开黑玩通宵,那时候没有段位,打排位还要有30个英雄,不少人为了能打排位赛天天泡在网吧打金币买英雄
-
魅蓝note5和红米note4
数码科技近两年手机的新品可以说是层出不穷,做工、配置、功能也是越来越牛逼,不少之前只用于高端机上才有的功能、材质都逐渐降临到了千元机身上,千元机的在各方面的功能也越来越强大,面对红米note4X与魅蓝note5,作为消费者又该如何选择呢?今天笔者从三方面来分析这两款产品,让你购机不纠结。
-
现代社会为什么会离不开手机(现代人离不开手机的原因)
数码科技手机大家并不陌生,甚至从某个角度来说,有的人可以不吃饭不喝水不赚钱,但是绝对离不开手机。这已经成为了社会的一个常有的现象。手机不离手已经成为了司空见惯的行为,智能手机已经普及,不管男女老少,基本人手一部手机。手机相比于之前的电话机比起来,很方便,之前的电话机需要在固定的插座上边充
-
苹果短信为什么激活不了imess
数码科技短信中心号码设置异常可能会导致 iPhone 无法发送短信,甚至无法激活 iMessage,我们来了解一下如何查询、修改或删除 iPhone 的短信中心号码吧。可能造成短信发送失败的原因:● 当前短信服务中心号码设置错误或被修改,短信将无法发送,如果多次出现发送失败的情况,请检查
-
小米手机你不知道的功能,小米不得不知的三个功能
数码科技如今智能手机对于用户而言已经非常重要了,我们的数据、银行卡等信息都会存在手机中,如果手机丢失了,可想而知对于我们的隐私将是多大的损害,于是很多手机厂商便在系统中加入了云挂失服务,比如备受好评的MIUI系统就有这个功能。4月18日,小米王川转发了一位用户的微博,并表示:找回就好,大
-
微信占用内存越来越大怎么清理,怎样释放微信占用的手机内存空间
数码科技网上清理微信的方法可以说是非常的多,当然好多朋友使用了以后,感觉效果不是特别的明显,今天给大家分享一个非常实用而且详细的一个方法,教大家如何正确以及深度的清理不了微信,然后的话使手机变得非常流畅。当然该怎么操作?我们一起来看一下。如何深度以及正确的清理微信?在这里我以安卓手机给大
-
刷过的如何清理缓存(清理过的微信如何恢复)
数码科技如何清理你在抖音测览过的视频?你知道每天在抖音刷过的视频都藏在哪里了吗?如果不及时清理也会导致手机卡顿,严重的时候什么功能都打不开。原来只要是你看过的视频它都会在这里,同时也会占用你手机很大的内存,手机就会越来的越卡顿。今天我就给大家分享一个如何把它们清理干净,让你的手机变得更加
-
ipad删除的怎么恢复(ipad里被删除的怎么恢复)
数码科技最近遇到很多人咨询,问ipad的视频删除了该怎么恢复,虽然现在各种软件已经普及了,数据恢复软件已经非常成熟了,但是大家对于数据恢复这个行业了解的还是比较少,以至于很多人删除了文件后都不知道怎么恢复文件,又或者不知道文件还能不能恢复。实际上现在删除了文件是有办法恢复的,而且恢复的方
-
ios14.3怎样清除越狱环境
数码科技可能苹果自己都没想到,上周二刚发布的iOS 13.5正式版当天,就被知名越狱工具unc0ver的开发团队破解了,该团队还发推特称很快将发布支持iOS 13.5越狱的的越狱工具。前两天,Pwn20wnd正式发布了支持iOS 13.5正式版越狱的unc0ver越狱工具5.0.0版本,
-
好用便签怎么把手机内容秒传电脑上
数码科技最近为了高效记录生活和工作中的点滴,我开始使用备忘录软件。让我觉得惊喜的是它提供的多设备同步功能,只需要在手机、电脑上登录同一账号,就可以实现手机内容秒传电脑,一端操作多端共享,实在是一款好用的便签!有一次我临时出差,需要记录会议讨论内容和客户信息,但是没带笔记本电脑,这个时候我
-
手机不开机了,怎么把里面的资料搞出来呢
数码科技我写的文章,比较实用,主要就是帮人解决问题的,这一点很重要。没有那么多华丽的词语,没有那么多废话,没有那么多假话空话。大多数文字,简单直接,基本上都是口语化。今天文章的主题,就是手机坏了,怎么把手机里的资料搞出来?有点老生常谈,之前写过很多这方面的文章。手机坏了,有人说无非就是钱