产品需求，需要一个私信发图功能，快速实现，简单高效，起初经验匮乏，简单的以为只要将整个发图流程控制周密便不会有什么问题。产品出来之后却发现，并没有那么简单。往往使用高效简单的东西，对于设计和开发可能确相当复杂，这或许就是精简设计和简单设计的区别所在，简单的是用户实用体验而不是设计者的设计过程。
设计初期，只考虑到设计交互流程，没有想到各类边界问题所产生的异常效果或是不好的体验是经常出现的问题。简单的私信发图功能，从使用体验上没能够想到图片过大，图片过小，长宽比例过于大（细长图）等情况，从视觉效果上，又可能会出现各个图片大小不一而造成页面混乱的情况。种种流程之外的边界情况都可能是造成用户体验下降的罪魁祸首。
意识到问题之后，便开始深挖发图中所要考虑的流程外可能遇到的边界性设计问题，首先对微信发图进行了研究：
微信首先对聊天区域图片聊天框设置了两个尺寸阈，分别是宽度为x和y的两个正方形基准。
图片发出后假设该图片尺寸为a*b 的矩形，有以下几种情况：
发出的图片
1.a>b并且a:b<3:1，则发出的图片按照长边平铺（缩放或拉伸），显示尺寸为：Y*b的矩形
2.a>b并且a:b>3:1，则发出的图片按照短边拉伸（短边长度小与x）或缩放（短边长度大于x），显示尺寸为：Y*X的矩形；长边居中截取部分显示
3.b>a并且b:a<3:1，则发出的图片按照长边平铺（缩放或拉伸），显示尺寸为：a*Y的矩形
4.b>a并且b:a>3:1，则发出的图片按照短边拉伸（短边长度小与x或缩放（短边长度大于x），显示尺寸为：X*Y的矩形；长边居中截取部分显示
（约3:1的比例，仔细测量后大概是2.6:1的尺寸，并且图片尺寸不同比例细微不同，不太了解后台算法的逻辑）
对话框尺寸阈
不仅如此，当图片长度和宽度超出一定的长度之后，便不采取平铺的预览方式，而是截取图片中间的部分供预览显示
示例
以上对于图片尺寸的边界及尺寸比例调整可以保证小图通过拉伸大图通过缩放不让界面显得乱而无章以及避免图片过小不易点击，图片过大容易误触的问题。通过对显示图片尺寸的统一，保证了使用的视觉及交互体验。
网友评论