如何在Web端设计上传图片(1):上传单张图片

2020-07-18 19:56| 发布者:

图片是一种常见的数据展现形式,近来接触到了好几个关于上传图片的设计,本文围绕“如何在web设计上传图片”进行总结。

在Web网页中常常遇见图片上传,上传图片的应用场景场景在个人信息中(比如:上传个人头像)、信息反馈(比如:淘宝的订单评价)、社交场景(比如:上传图片发朋友圈)。

我们了解图片的基本属性主要包括:图片的文件格式、图片大小、图片宽和高,以及图片数量。那下面就来看看,针对各种场景下的上传图片,该如何根据用户场景进行设计。

在很多网站中,常常会遇到上传单张图片,最典型的场景就是上传个人头像,这个属于个人信息补充的需求场景,该场景只允许上传一张图片。例如用户在网站注册之后,基本上都会通过个人中心在里面上传个人图片,设置一个用户喜欢的头像。

在很多社交网站中,常常为了促进用户的沟通,会鼓励用户上传个人头像。因为在社交场景中,个人头像比一个昵称更加让人能记住你。

上传个人头像是一个常见功能,但是对于头像的处理确实有很多方式的。常见的方式是上传一张高清的图片,但是显示的是缩略图。其次社交场景的上传图片用户更多趋向处理图片,比如对图片进行滤镜美颜,目的是通过头像吸引别人。还有一种上传头像之后,是用户精心挑选的满意的图片设置为自己的头像,支持再次点击头像,可以全屏显示原图。

在新浪微博的个人主页,可以看到自己的图像,注册账号之后,都是提供一个默认的图片。后期是引导用户上传头像。

所以在用户没有上传过图像,系统使用默认图片,有一个很醒目的“上传头像”,去引导用户上传自己的头像。

在这个弹框中,首先就告知用户上传图片的规则:图片的格式和大小限制。在上传图片区域用文案提示:只支持JPG、PNG、GIF,大小不超过5M。

微博的头像设置这里,由于上传的图片,需要进行裁剪,所以右侧还提供了一个预览效果。由于微博的头像应用在3个地方:分别是个人页面的大尺寸头像、发表微博的中尺寸头像以及发表评价使用的小尺寸图像,三个地方都是不同的尺寸,所以这里的预览有3个不同尺寸的预览效果。

点击“选择图片”,弹出选择文件的窗口,web端支持自定义文件,可根据支持的图片类型,自定义文件的格式,只能选择符合规则的图片格式。

但是web端可以支持查看所有文件类型,若是上传其他类型的文件,系统会给予引导,告知用户规则。若是选择了支持的图片格式,但是超过文件大小,也是需要校验,告知用户支持上传图片的最大限制,引导用户上传范围内的图片。

图片需要居中显示在图片框中,等级压缩占满图片框的宽度或者高度。 图片的裁剪工具,在图片框上高亮显示裁剪图片的工具,可以等比例放大这个裁剪工具,支持在屏幕任意位置移动,来裁剪图片。右侧时预览。这个裁剪工具,必须够明显,圆圈之外的需要有遮罩影响,高亮中间的圆圈。

4.还有一种图片裁剪方式,就是QQ上传图像,裁剪框是固定的,不可调整。主要是通过移动上传的图片,放大、缩小、移动图片选择合适的效果进行图片裁剪。

在用户上传图像之后因为此时用户上传图像之后,比对后续很多会修改,此时这个入口就不需要特别名称,只有鼠标移到图像上面,才会提醒用户:更换头像。

任何一种图片上传的方式,其实都是根据用户的需求、操作场景来设计的,让用户更加方便。看似一个简单的上传照片的功能却有很多种不同的设计方案,每个设计方案其实满足的就是用户的具体需求和场景。

<
>
昆明腾瑞网络有限公司积极引导客户理解互联网对企业的品牌价值,并充分把握中小型企业信息化管理的个性化需求,提供真正有价值的信息化服务产品,让企业在全球一体化的经济体系下的竞争中处于不败之地,不仅深谙互联网核心技术的开发,而且对全球互联网市场和IT行业的大势均有精确的把控。

联系我们

昆明龙泉路实力壹方城6栋1702号

0871-65125379(服务时间:9:00-18:00)

3568089682@qq.com

在线咨询 官方微信官方微信

网站建设 微信开发 售后服务 咨询电话0871-65125379 返回顶部
返回顶部