前言

最近正在负责一款安全聊天软件的产品设计工作，在功能模块的需求设计上颇有感触。事实上现在这个时间点，新技术应用逐渐进入冷却期，一款新产品想要快速被市场接受，最稳妥的方式就是模仿其他已经被广泛使用的同类App功能，市场上大类的产品在功能设计上已经开始趋同。标新立异的创新交互方式，虽然能吸引一部分用户的眼球，但考虑到操作的学习成本，终究只能成为一款小而美的产品。那么作为一名产品设计师，我们能做的是什么？我认为锱铢必较地剖析产品的每一个功能细节，可以帮助我们体会目前通用交互的设计初衷，虽然技术会不断进步，但满足人性的初衷是不会改变的。往往越是那些平时在使用中不曾花时间关注的功能，越是值得每个产品人反复玩味推敲。

IM产品就是一个很典型的类型，沟通作为人类生存最基本的需求，是不会随着时代变化而消失的。目前网上提供的相关内容不多，因此將尝试针对聊天产品在缩略图、预览、压缩，这三个容易被忽略的功能进行简单地分析，首先让我们来考虑一下缩略图的产品策略。

P.S. 感谢我的好友Derrick在技术上的帮助，也感谢团队内iOS和android端的同事给予我的帮助。

---

需求

在一款聊天软件中，缩略图的功能不言而喻。

Facebook认为在mobile时代，人类在信息传递上將经历：文字-图片-视频-VR/AR 的发展过程。

这其中我认为，从图片-视频-VR/AR更像是横向的体验提升，而文字-图片则是纵向的体验质变。

“一图胜千言”是设计上的金句，同样在产品设计尤其是IM产品中更是如此，在一个最常见的聊天使用场景中，相比使用手机敲出几行字，人们往往更愿意选择发一张图（表情包更是一种这类选择的升级）。在有限的屏幕尺寸内，缩略图可以帮助用户快速获悉对方想要传达的信息，是一种效率的提升。

---

问题

那么设计缩略图功能的时候，我们会遇到哪些困难？可以预见到是图片的一些基本属性如：尺寸，文件大小，文件格式等，其中最重要的就是尺寸。

由于生产力工具的不断升级，越来越多特殊尺寸的图片将更为频繁地流通在我们的线上环境里。这些图片在聊天产品中带来的问题很明显：

1、不同尺寸的图片，如果展示上不做统一处理，将会造成界面上显示不统一，呈现一种杂乱无序的糟糕体验；

2、由于缩略图功能的设计初衷，是帮助用户快速了解图片传递的信息，而一些极端尺寸比例的图片（如长图），如果处理不当，很难让用户一眼掌握其传达的信息，多少违背了功能的设计思路。

---

场景

首先让我们看下常见的图片尺寸比例：

4:3  16:9  21:9

其中4:3为最常见的图片尺寸，  16:9是大部分手机拍摄的图片 ，21:9可作为长图文的类型样式

大部分情况下，我们只要处理这三种比例的图片，就能满足用户大部分场景的图片发送需求。

---

方案

市场上大部分的产品，对于缩略图的处理逻辑大致有如下几类：

1、固定尺寸的缩略图显示

这种方案的好处是简单粗暴，把缩略图的长宽定死（如400pt*300pt），所有图片都按照这个尺寸进行缩放并居中裁切显示。但问题也显而易见，首先市场上显示设备的尺寸参差不齐，以一个固定的尺寸在各类设备上展示图片，很难保证一个泛用得良好体验结果。再加上图片本身的尺寸规格多种多样，所以现在使用这类策略的产品越来越少。

2、设置两边长的取值范围，以单边进行缩放

这是最常见的缩略图方案，微信使用的正是这类的策略，以iPhone7为例（375*667），微信的长宽取值范围约为150-50pt。在处理的过程中，先取原图较长的边缩放到150，若另一条边在50-150范围之外的话，再进行一次缩放，最后取中间位置进行裁切显示。

这类方案的优势是最大限度的满足了多种图片的展示需求，缺点和上面一样，在多种尺寸屏幕的显示上会存在体验不可控的情况。

3、按屏幕比例设置范围值显示

这个方案其实是方案2的延伸，为了适配多种屏幕的显示尺寸，长宽取值的范围从固定值调整为屏幕显示的比例（如1/3-1/9），这样能确保产品在多台设备上都能有稳定的显示效果。

4、按固定间距显示

固定缩略图距离屏幕两边的距离，相减即可得到缩略图的最大边长值，效果请看下图。

iPhone7的效果 iPhone7 Plus的效果

这个方案可以让产品以最好的方式还原UI的效果，但是确认高度的取值范围比较难，一般需要结合上文提到的三种图片比例进行支持。

四种方案各有千秋，具体还要视产品的类型和调性来做决定。

---

案例

下面我们以方案3作为案例，详细的描述一下原图在该逻辑下处理的过程

*取值范围：屏幕宽度的1/3-1/9，此处我们以150-50pt为例

缩略图处理过程 App端最终的展示效果

可以看到处理后的缩略图，显示的范围内只有直线没有虚线部分，因为居中裁切了原图的一部分，没有全部显示出来。

---

结语

管中窥豹，可见一斑。像缩略图这样的产品细节，往往是展现一个PM对产品把控程度的体现。作为PM这类的功能不但能帮助你锻炼产品的基本功，更能在团队中体现专业性，让团队间的合作更顺畅。今后我们还会针对IM类产品在图片的预览和压缩上做进一步地探讨。