优漫动游：带你了解UI图片比例技巧

优漫带你了解UI图片比例技巧

在UI设计中图片比例的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计，具有设计感的图片比例不仅是吸引用户的重要元素，能比原本平淡无奇的文字界面更让人产生点击欲望，还能体现出设计师的品味、以及相关方面的专业性。

二、图片的使用及处理方法

图片的使用比例

在移动端UI设计中，我归纳了最常用的几个图片比例，分别是1:1、3:2、4:3、16:9四种，首先需清楚的了解界面图片的应用场景、来源用户以及图片比例背后的缘由，否则将很难把控。

常用的图片格式

图片有多种格式，如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP...等，在UI设计中，最常用的无非JPG、GIF、PNG三种。JPG：目前为止使用最多的图片格式，兼容各大操作系统浏览器及编辑软件，非常方便被打开和处理，但不能显示透明底，压缩后会失去一部分原始信息。PNG：如需编辑，PNG应该算是所有图片格式中的最佳选择，支持无损压缩及透明底，但针对需要高保真的复杂图片，压缩后的文件较大，且有少数的浏览器不支持。GIF：动效图片，支持透明底及无损压缩，通常由视频格式的内容转换而来，但对色彩有非常严格的要求，数量最多不超过256种，相比前面两种，GIF格式的文件更大。

1）1:1 比例 因为相机结构的原因，早期最传统的120胶片画幅就是正方形（6*6cm），即1：1的比例，此比例更容易的将构图规整，使其最大程度的突出照片主体。在如今的电商APP中，商品图片绝大多数都遵循了1：1的比例，不管横向还是纵向都能将信息进行完整化的展示，且方便多场景、页面的适配。另外，用户头像也都使用了这一比例。

2）3:2比例起初135胶卷的比例就是3：2，主要是因相机取景框的大小而决定。在移动端，这一比例使用也比较广泛，例如新闻、旅游类型产品，在拍照之后无需裁剪等处理，直接上传使用，非常方便。

3）4:3比例随着摄影的发展，小/微型相机出现而诞生4：3比例，且移动设备发展迅速，在非专业摄影的情况下，手机能很大程度上代替单反并成为主流拍照设备，目前市场上主流手机的拍摄尺寸基本都为4：3比例。相比3：2的图片，4：3图片占比更大，能最大化显示图片以突出重点信息。

4）16:9比例根据人体工程学的研究，人眼视野范围的比例约为16：9的长方形，所以电视、显示器及投影范围的设计都是基于这个黄金比例。线上产品不用多说，影视类型的产品均采用16：9的尺寸，例如爱奇艺、优酷、腾讯视频等，到目前为止，这个比例在设定上还没出现过问题。