App上传图片交互设计（对比path，微信，instahram）
上传图片,一般应用于社交App,或是微信类的聊天过程中,操作过程一般都比较繁杂,以及在多张图片的情况下,需要一个流畅的体验过程,本篇主要选取了微信,path,以及Instagram三个App,只做了传图的对比
一般照片来源,有两个路径:
拍照
手机相册选择
在微信及很多App中,选择照片上传,一般会让用户选择路径,然后到相应的界面;在path和instagram中,把这两个功能放到一个页面中
从微信中可以看的出来,为了方便用户传图,在聊天过程中,会自动默认出相册最新的一张图
如果这次没有选,而且相册也没有新增图片,则不会有此提示
不得不说,微信的这个小设计,很能方便用户的
再说path和instagram上传照片,拍照和相册选择,是做到一个页面中,如下:
左边,instagram,在拍照旁边放了一个相册最近照片的缩略图
右边path,同样在拍摄位置,放了一个相册的图标
两个相册图标的识别度都比较高:
instagram是利用的记忆,毕竟作为经常拍照的人,看到最新照片的缩略图,对于是否上传这一张是很好的提示,此外引导进入相册也是不错的选择
Path是利用的一个风景图标,这个图标在各种类型相机,以及常见数码和应用中,所以辨识度也算比较高的
拍照or上传后处理
微信发送图片:先预览再处理
拍照后有个预览页面,如果觉得拍的不好,可以回去重新拍
点击使用后,进入滤镜美化页面
滤镜的提示,点击可以收回
大大的勾,提供用户确认
微信拍照上传至朋友圈:(跟发送给朋友交互不一致,很奇怪)
很神奇的,拍摄上传和发送给好友的界面,竟然完全是两种风格的,可能跟不同的产品开发线有关
这里看到,上传朋友圈,跟path类似,用风景图标表示相册
拍摄完之后,当前页面显示滤镜,并进行美化
关闭以及返回图标的设计,蛮直接的
path:拍摄时可选滤镜,拍摄完成后可以进一步美化
因为拍摄时可以选择滤镜,拍摄完成后,停留在当前页面,连续性较好
可以返回重拍
额为提供的功能有剪裁,模糊,以及亮化处理
PS:在一个页面完成这些操作,真的把设计做到了极致
instagram:拍摄后自动跳转至美化页面
拍摄后自动跳转至美化页面,流程还是比较流畅的
支持返回和下一步,下一步并不能明确告知用户,下一步是做神马,实际就是补充关于此图片的描述
相比path,额外增加的功能有旋转
上传图片补充信息,以及上传效果:
微信:
这一刻的想法,这个文案个人很喜欢,同样是对图片描述,但是这个说法显得很贴切
微信是支持多张图片的,所以这里可以选择+号,继续上传或者拍照
微信上传的动画我很喜欢,缩略图停留在页面上,背景跳转至朋友圈,感觉就是把照片挂到了那边,标志上传成功
path
path是发表下评论,因为是社交,所以会有@别人功能,以及可以选择地点
path只允许一次上传一张,或者是可以多张,暂时没发现
发表一下评论,文案无功无过
上传动画很形象很暴力,,直接缩略图弹出,背景改为首页,第一次用会突兀,但是感觉还是不错的,明确告诉你,已经放到首页了,觉得比微信更直接,但是细节处理,好像没有微信柔和
instagram
instagram,在此键入您的题注,可能因为中文开发者不够吧,这个文案感觉是最弱的
同样一次只允许一张图,不知道是中西方使用习惯差距还是其他原因
instagram的设计,比较直接,跳转至首页,正在完成->完成,然后显示图片(跟微信比起来,要弱很多)
三种主流App的上传照片交互,主流程基本无差别,但是细节还是很多区别
微信支持多图上传,是因为国人比较喜欢传很多么,而path和Instagram同时只有一张图片
微信的发送图片给好友,以及上传图片至朋友圈,流程和视觉都不一样,确实不影响使用,若不是抱着玩这么久,也不会注意到,难道真的是因为不同产品线开发的?
本篇只是从交互角度,做了个简单的分析,其实就这一个小功能,还有很多可以挖的点
一般照片来源,有两个路径:
 |
 |
拍照
手机相册选择
在微信及很多App中,选择照片上传,一般会让用户选择路径,然后到相应的界面;在path和instagram中,把这两个功能放到一个页面中
从微信中可以看的出来,为了方便用户传图,在聊天过程中,会自动默认出相册最新的一张图
如果这次没有选,而且相册也没有新增图片,则不会有此提示
不得不说,微信的这个小设计,很能方便用户的
再说path和instagram上传照片,拍照和相册选择,是做到一个页面中,如下:
 |
 |
左边,instagram,在拍照旁边放了一个相册最近照片的缩略图
右边path,同样在拍摄位置,放了一个相册的图标
两个相册图标的识别度都比较高:
instagram是利用的记忆,毕竟作为经常拍照的人,看到最新照片的缩略图,对于是否上传这一张是很好的提示,此外引导进入相册也是不错的选择
Path是利用的一个风景图标,这个图标在各种类型相机,以及常见数码和应用中,所以辨识度也算比较高的
拍照or上传后处理
微信发送图片:先预览再处理
拍照后有个预览页面,如果觉得拍的不好,可以回去重新拍
点击使用后,进入滤镜美化页面
滤镜的提示,点击可以收回
大大的勾,提供用户确认
微信拍照上传至朋友圈:(跟发送给朋友交互不一致,很奇怪)
很神奇的,拍摄上传和发送给好友的界面,竟然完全是两种风格的,可能跟不同的产品开发线有关
这里看到,上传朋友圈,跟path类似,用风景图标表示相册
拍摄完之后,当前页面显示滤镜,并进行美化
关闭以及返回图标的设计,蛮直接的
path:拍摄时可选滤镜,拍摄完成后可以进一步美化
因为拍摄时可以选择滤镜,拍摄完成后,停留在当前页面,连续性较好
可以返回重拍
额为提供的功能有剪裁,模糊,以及亮化处理
PS:在一个页面完成这些操作,真的把设计做到了极致
instagram:拍摄后自动跳转至美化页面
拍摄后自动跳转至美化页面,流程还是比较流畅的
支持返回和下一步,下一步并不能明确告知用户,下一步是做神马,实际就是补充关于此图片的描述
相比path,额外增加的功能有旋转
上传图片补充信息,以及上传效果:
微信:
这一刻的想法,这个文案个人很喜欢,同样是对图片描述,但是这个说法显得很贴切
微信是支持多张图片的,所以这里可以选择+号,继续上传或者拍照
微信上传的动画我很喜欢,缩略图停留在页面上,背景跳转至朋友圈,感觉就是把照片挂到了那边,标志上传成功
path
path是发表下评论,因为是社交,所以会有@别人功能,以及可以选择地点
path只允许一次上传一张,或者是可以多张,暂时没发现
发表一下评论,文案无功无过
上传动画很形象很暴力,,直接缩略图弹出,背景改为首页,第一次用会突兀,但是感觉还是不错的,明确告诉你,已经放到首页了,觉得比微信更直接,但是细节处理,好像没有微信柔和
instagram,在此键入您的题注,可能因为中文开发者不够吧,这个文案感觉是最弱的
同样一次只允许一张图,不知道是中西方使用习惯差距还是其他原因
instagram的设计,比较直接,跳转至首页,正在完成->完成,然后显示图片(跟微信比起来,要弱很多)
三种主流App的上传照片交互,主流程基本无差别,但是细节还是很多区别
微信支持多图上传,是因为国人比较喜欢传很多么,而path和Instagram同时只有一张图片
微信的发送图片给好友,以及上传图片至朋友圈,流程和视觉都不一样,确实不影响使用,若不是抱着玩这么久,也不会注意到,难道真的是因为不同产品线开发的?
本篇只是从交互角度,做了个简单的分析,其实就这一个小功能,还有很多可以挖的点
