在 IM 产品中,发送图片是产品的一个基本功能,如何生成缩略图以及如何显示缩略图都是该模块的组成部分,本文就如何显示缩略图从产品设计的角度去阐述。

从产品上来确认该功能如何去设计,最稳妥的方式就是模仿其他已经被广泛使用的同类App功能,市面上对应该功能的设计上已经开始雷同,标新立异的创新交互方式,虽然能够吸引一部分用户的眼球,但考虑到用户习惯需要用时间来培养, 最终会被大众所吐槽。

缩略图功能:由于图片消耗内存,通常为了防止内存异常的发生,在聊天面板中会显示一种图片的缩略图略缩图,点击可以看大图。由于用户可以选择发送任何尺寸的图片,因此在设计的过程中就需要考虑对一些尺寸比较大或比较小的图片的显示策略,否则会影响产品的用户体验。下面就介绍一下在产品中显示缩略图的策略,希望可以帮助到大家。

缩略图生成

生成缩略图略缩图,一般 有 2 种方式,一种是配合 OSS 服务,服务端生成缩略图;另一种是客户端生成缩略图。

raw缩览图预览插件_略缩图_p图 缩肚子

两种方式的优缺点对比

两种方案各有千秋,开发者可以根据自身情况选择其中一种方式,两种方式都能达到自己想要的效果。

缩略图生成规则

缩略图生成规则,一般是限定缩略图的宽高范围,然后再指定生成缩略图的字节数。特殊情况下会有长图的效果,按照限定宽高的范围,缩略图生成会出现极小的宽或高的情况,这样展示起来可能效果不好,针对该种情况我们从显示端做处理,固定显示的宽高比来展示缩略图;当然还有一种处理方式是用固定尺寸裁剪得到缩略图。这两种方式一种是从显示端做处理,一种是从图片的源头做处理,两种方式都能满足需求,具体使用那种规则需要结合开发难度以及性能而定。

图片显示模式

raw缩览图预览插件_略缩图_p图 缩肚子

在实际发送图片的时候,有三种图片显示:横图(长 > 宽),竖图(长 < 宽),正方图(长 = 宽),该三种图片显示涵盖了所有的图片样式。图片展示样式的长和宽一般以 IM 聊天窗口的宽做限制:具体格式如下图所示:

p图 缩肚子_略缩图_raw缩览图预览插件

根据上述3中方式进行显示:整个IM产品的图片显示模块宣布告终。

结语

IM 缩略图模块只是IM 中的冰山一角,我们也会持续优化和改进。

raw缩览图预览插件_略缩图_p图 缩肚子

———END———
限 时 特 惠: 本站每日持续更新海量各大内部创业教程,一年会员只需98元,全站资源免费下载 点击网站首页每天更新
站 长 微 信: aiwo51889