图片是一种常见的数据展现形式,近来接触到了好几个关于上传图片的设计,本文围绕“如何在web设计上传图片”进行总结。
在Web网页中常常遇见图片上传,上传图片的应用场景场景在个人信息中(比如:上传个人头像)、信息反馈(比如:淘宝的订单评价)、社交场景(比如:上传图片发朋友圈)。
我们了解图片的基本属性主要包括:图片的文件格式、图片大小、图片宽和高,以及图片数量。那下面就来看看,针对各种场景下的上传图片,该如何根据用户场景进行设计。
一、需求场景
在很多网站中,常常会遇到上传单张图片,最典型的场景就是上传个人头像,这个属于个人信息补充的需求场景,该场景只允许上传一张图片。例如用户在网站注册之后,基本上都会通过个人中心在里面上传个人图片,设置一个用户喜欢的头像。
二、案例分析:微博VSQQ上传个人头像
在很多社交网站中,常常为了促进用户的沟通,会鼓励用户上传个人头像。因为在社交场景中,个人头像比一个昵称更加让人能记住你。
上传个人头像是一个常见功能,但是对于头像的处理确实有很多方式的。常见的方式是上传一张高清的图片,但是显示的是缩略图。其次社交场景的上传图片用户更多趋向处理图片,比如对图片进行滤镜美颜,目的是通过头像吸引别人。还有一种上传头像之后,是用户精心挑选的满意的图片设置为自己的头像,支持再次点击头像,可以全屏显示原图。
我们就来看看微博和QQ中是如何上传用户的个人头像的。
1.上传图片前,告诉用户图片规则
在新浪微博的个人主页,可以看到自己的图像,注册账号之后,都是提供一个默认的图片。后期是引导用户上传头像。
所以在用户没有上传过图像,系统使用默认图片,有一个很醒目的“上传头像”,去引导用户上传自己的头像。
用户点击“上传头像”之后,打开头像设置窗口。
在这个弹框中,首先就告知用户上传图片的规则:图片的格式和大小限制。在上传图片区域用文案提示:只支持JPG、PNG、GIF,大小不超过5M。
微博的头像设置这里,由于上传的图片,需要进行裁剪,所以右侧还提供了一个预览效果。由于微博的头像应用在3个地方:分别是个人页面的大尺寸头像、发表微博的中尺寸头像以及发表评价使用的小尺寸图像,三个地方都是不同的尺寸,所以这里的预览有3个不同尺寸的预览效果。
2.在上传图片中,引导用户行为
(1)图片的格式和大小校验
点击“选择图片”,弹出选择文件的窗口,web端支持自定义文件,可根据支持的图片类型,自定义文件的格式,只能选择符合规则的图片格式。
但是web端可以支持查看所有文件类型,若是上传其他类型的文件,系统会给予引导,告知用户规则。若是选择了支持的图片格式,但是超过文件大小,也是需要校验,告知用户支持上传图片的最大限制,引导用户上传范围内的图片。
校验的优先级:先校验文件类型,再校验文件大小,最后才是图片的高度和宽度。
(2)图片的裁剪
满足校验之后,图片才会回显在图片框中,需要注意:
图片需要居中显示在图片框中,等级压缩占满图片框的宽度或者高度。图片的裁剪工具,在图片框上高亮显示裁剪图片的工具,可以等比例放大这个裁剪工具,支持在屏幕任意位置移动,来裁剪图片。右侧时预览。这个裁剪工具,必须够明显,圆圈之外的需要有遮罩影响,高亮中间的圆圈。
4.还有一种图片裁剪方式,就是QQ上传图像,裁剪框是固定的,不可调整。主要是通过移动上传的图片,放大、缩小、移动图片选择合适的效果进行图片裁剪。
3.上传图片后,展示信息
在用户上传图像之后因为此时用户上传图像之后,比对后续很多会修改,此时这个入口就不需要特别名称,只有鼠标移到图像上面,才会提醒用户:更换头像。
总结
任何一种图片上传的方式,其实都是根据用户的需求、操作场景来设计的,让用户更加方便。看似一个简单的上传照片的功能却有很多种不同的设计方案,每个设计方案其实满足的就是用户的具体需求和场景。
本文由
瓜子原创发布于人人都是产品经理,未经作者许可,禁止转载。题图来自Unsplash,基于CC0协议。