2021-05-09 分类: 网站建设
直接标注气泡框的具体尺寸是较为常见的问题,其结果就会导致小屏手机展示不完全,大屏手机展示又太空的问题,如下图所示。
以我之前做的医生问诊界面来说,在标注时,我直接将气泡框标注为固定尺寸520px,最后验收时才发现iPhone5的气泡框已经超出屏幕;而iPhone8 Plus上留白又太多,导致各机型展示效果不统一。在发送图片时会涉及到不同比例的图片,如果都采用方形展示多余的部分都会被隐藏掉,如下图所示。
还是以咨询医生这个界面来说,我分别上传了横图和竖图,从图可以看到最终的缩略图效果都是方图,其缺点是不能将图片信息大化展现,占用屏幕空间。计算方式:气泡框的大宽度 / 屏幕宽度=70%。根据该公式,我们也能够根据屏幕宽度得到较为适合的气泡框的设计尺寸,如下图所示。
采用百分比标注后,适配到iPhone5 640x1136和iPhone8 Plus 1242x2208都不会出现显示不完全或者留白太多的问题了。这是目前体验较好的方案,可满足各比例图片信息大化的展示。因此,大家在设计时首先需要确定缩略图尺寸范围。以问医生的项目为例,在2倍图下我将其设置为300px(该数值在保证展示效果下,一屏可展示更多的图片),最后方图、横图、竖图的适配效果如下图所示。
设置好缩略图的尺寸后,图片如何适配呢?简单来说就是图片最长边适配到缩略图中,在将图片等比缩放即可。在实际场景中,往往会遇到特殊比例图片(如超长图),将其适配之后就会发现图片所占面积极小,不仅展示效果不佳,同时识别性也极低,如下图所示。
因此在适配时我们还需要设置阈值,什么是阈值呢?阈的意思是界限,故阈值又叫临界值,也就是当图片当比例超过阈值时,其缩略图展示效果和阈值一致。考虑到图片的展示效果和识别性,我们将3:1作为阈值较为合适。当图片比例小于等于3:1时,将图片等比缩放,最长边为缩略图的大尺寸300px,如下图所示。
当图片比例大于3:1时,仍采用3:1缩略图的展示尺寸,多余部分进行隐藏,从而让图片更有阅读性。
以上就是利于阈值,设置缩略图大尺寸,以单边进行缩放的方法,需要注意的是以上说的所有数值均是在2倍图下。
网页名称:网站建设中聊天界面、气泡框设计细节
文章位置:https://www.cdcxhl.com/news/112922.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有网站建设等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容