聊天产品的设计策略-缩略图

最近，我负责安全聊天软件的产品设计工作，并且对功能模块的设计感到很满意. 实际上，在这个时间点上，新技术的应用正逐渐进入冷却期. 一种新产品希望被市场迅速接受. 最安全的方法是模仿已被广泛使用的其他类似应用程序的功能. 设计已经开始融合. 创新性和创新性的交互方法虽然可以吸引一些用户的注意力，但是考虑到操作的学习成本，它只能成为一种小巧美观的产品. 那么作为产品设计师，我们能做什么？我认为，对产品的每个功能细节的分析将有助于我们了解通用交互设计的初衷. 尽管技术将继续改进，但满足人性的初衷不会改变. 通常，使用时间中通常不使用的功能越多，每个产品人员重复考虑的价值就越高.

IM产品是非常典型的类型. 作为人类生存的最基本需求，交流不会随着时代的变化而消失. 当前，Internet上相关内容很少，因此我们将尝试分析缩略图，预览和压缩中聊天产品的三个容易被忽略的功能. 让我们首先考虑缩略图的产品策略.

P.S. 感谢我的朋友Derrick的技术帮助，以及团队iOS和android方面的同事的帮助.

在聊天软件中，缩略图功能是不言而喻的.

Facebook相信，在移动时代，人类将在信息传输中体验文本，图片，视频，VR / AR的发展.

在这种情况下，我认为从视频-视频-VR / AR来看，它更像是一种水平体验的改进，而文本-图像是一种垂直体验的质变.

“一幅图片值得一千个单词”是设计中的黄金句. 产品设计上也是如此，尤其是IM产品. 在最常见的聊天使用情况之一中，与在手机上键入几行单词相比，人们通常更喜欢发送图片（表情符号包是这种选择的升级）. 在有限的屏幕尺寸内，缩略图可以帮助用户快速了解对方要传达的信息，从而提高了效率.

那么在设计缩略图功能时产品策略图，我们会遇到什么困难？可以预见，图片的一些基本属性是: 大小，文件大小，文件格式等. 最重要的属性是大小.

由于生产力工具的不断升级，越来越多的特殊尺寸图片将在我们的环境中更频繁地发行. 这些图片在聊天产品中引起的问题很明显:

1. 如果不同尺寸的图片在显示器上处理不统一，将导致界面显示不一致，带来混乱，混乱的不良体验；

2. 由于缩略图功能的原始设计，它是为了帮助用户快速了解图片所传输的信息，以及一些极限尺寸比很大的图片（如长图片），如果处理不当，用户将很难掌握. 他们一目了然地传达的信息，或多或少违反了功能设计思想.

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

4: 3 16: 9 21: 9

4: 3是最常见的图片尺寸产品策略图，16: 9是大多数手机拍摄的图片，并且21: 9可以用作长图和文本的字体样式

在大多数情况下，只要处理这三个比例的图片，就可以满足用户在大多数场景中发送图片的需求.

市场上大多数产品的缩略图处理逻辑大致如下:

此方案的优点在于它简单粗鲁. 缩略图的长度和宽度是固定的（例如400pt * 300pt）. 所有图片均根据此尺寸缩放并裁剪在中间. 但是问题也很明显. 首先，市场上显示设备的尺寸不均匀. 在具有固定尺寸的各种设备上显示图片很难确保良好的通用体验. 此外，图片本身的大小是多种多样的，因此使用这种策略的产品越来越少.

这是最常见的缩略图方案. 微信正是使用这种策略. 以iPhone 7为例（375 * 667），微信的长度和宽度约为150-50pt. 在处理过程中，首先将原始图像的较长边缩放到150，如果另一边不在50-150范围内，则再次缩放，最后取中间位置进行作物显示.

这种解决方案的优点是最大程度地满足多张图片的显示需求. 缺点与上面相同. 在多个屏幕尺寸的显示器上都会有无法控制的体验.

此解决方案实际上是解决方案2的扩展. 为了适应多个屏幕的显示尺寸，将长度和宽度值的范围从固定值调整为屏幕显示的比​​例（例如为1 / 3-1 / 9），以确保产品在多个设备上都具有稳定的显示效果.

固定缩略图与屏幕两侧之间的距离，然后减去它们即可获得缩略图的最大边长. 效果见下图.

iPhone7的效果

iPhone7 Plus的效果

此解决方案允许产品以最佳方式恢复UI效果，但是很难确定高度的值范围. 通常，需要结合上述三个图像比率来支持它.

这四种方案各有优缺点，具体取决于产品的类型和色调.

这里我们以方案3为例，详细描述在这种逻辑下处理原始图像的过程

*值范围: 屏幕宽度的1 / 3-1 / 9，这里我们以150-50pt为例

缩略图处理过程

App端的最终显示效果

您可以看到已处理的缩略图，并且在显示范围内只有直线，而没有虚线，这是因为原始图像的一部分被裁剪在中间，而并非全部显示.

您可以在管子中看到豹子. 产品详细信息（如缩略图）通常显示对产品的PM控制程度. 作为PM等功能，它不仅可以帮助您锻炼产品的基本技能，还可以反映团队中的精神，使团队之间的合作更加顺畅. 将来，我们将进一步讨论IM产品图片的预览和压缩.

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-250108-1.html