图片比例,你还不知道如何设定?

在设计时,我们会注意界面的排版、文字的对比、图标图片的美观,但是图片比例却很容易被大家忽略。一些设计师会通过测量参考优秀APP的尺寸来设定,一些设计师直接凭感觉取个数值即可,并无规范可言。其实图片在设计时需要遵循一定的比例,这样会更符合产品定位以及方便后期维护,通过整理我总结了五种UI中常见的图片比例。

自动草稿

3 : 2

3 : 2这个尺寸其实源于135胶卷的比例,采用它并不是因为黄金比例的缘故,而是由相机的像场大小决定的。

在早期徕卡镜头的成像圈大约为44mm,而胶卷的宽是24mm,因此如果在44mm的圆上截取一块宽为24mm的长方形,那么边长正好为36mm,也就是3 : 2的比例,同时由于徕卡相机的用户群巨大,因此其他相机厂商也逐渐将尺寸统一为3 : 2。

自动草稿

因此在早期图片大多使用3 : 2的尺寸,但是随着移动设备的发展,手机很大程度上替代单反成为主流拍照设备,4 : 3和16 : 9的图片数量占比追上了传统摄影的3 : 2半分天下,目前我们看到一些租房、旅游类APP仍然采用该比例,比如爱彼迎和携程。

自动草稿

爱彼迎和携程的图片大多采用专业设备3 : 2的比例进行拍摄,因此采用该比例还可以最大化的展示图片信息,便于后期的维护。

4 : 3

4 : 3是随着小型相机(例如微单)的出现而诞生的。在追求小型化低成本镜头上,大家遇到最大的问题就是像场不够用了,同时由于当时传感器技术有限,无法把CCD的长度做到很长,因此人们需要尽可能的在小体积上实现更高像素,怎么办?最好的办法就是把比例做的更方,大家知道,所有几何图形中,对角线距离相同,图形越接近圆形,图片占比面积也就越大。

自动草稿

相比于3 : 2的图像来说可展示的信息更多,目前一些美食和图片类APP多采用该4 : 3的比例,比例厨房故事、in。

自动草稿

在图片比例的设定时,大家可能会纠结是选择4 : 3还是3 : 2呢?这里我有一个简单的方法,那就是看产品目标是以内容为主还是以图片主,比如Nice和厨房故事。

自动草稿

由于Nice的产品目标是以展示内容为主,因此它的图片采用3 : 2的方式,其优势就在同样的横屏大小中,可露出更多的图片信息。而厨房故事产品目标是以美食类的图片为主,因此它的图片采用4 : 3的比例,其优势是图片面积占比大,可展示更多的信息。

1 : 1

1 : 1是传统的120胶片画幅,也叫中画幅,因为相机结构和其他一些原因,导致了胶片是方形的,一般为6×6厘米,利用该比例可以将构图归整得简单,突出主被摄体的存在感。

自动草稿

因此该比例多用于需要突出主体的图片,比如电商类以图片促进销售的APP,以及推荐类的图片列表中,比如严选、网易云音乐。

自动草稿

严选等电商类的APP由于图片直接决定类用户的点击量,因此往往回采用1 : 1的比例突出商品主体从而促进销售。网易云音乐的首页推荐也是采用该比例,其优势是采用三列九宫格的布局可以展示更多的产品。

16 : 9

16 : 9根据人体工程学的研究,发现人两只眼睛的视野范围是16 : 9的长方形,所以电视、显示器行业都根据该比例来设计产品,iPhone5是首款屏幕比例为16 : 9的手机。

自动草稿

在设计时,图片的尺寸设定和这些拍摄器材有很大的关系,因此在视频类的 APP 中大多用16 : 9的比例,比如App Store、腾讯视频。

自动草稿

App Store的快照页在4.7英寸的手机(iPhone6、7、8)上均是采用16 : 9的比例,这是由于它们的分辨率是750x1334刚好是16 : 9;腾讯视频的列表图片也是采用该比例,这主要是因为电影、电视都是采用该比例。

3 : 1

3 : 1是聊天气泡框中图片适配的阈值比例,也就是当你发送的图片大于3 : 1时,其缩略图的展示范围仍然是3 : 1的展示范围,多余部分进行隐藏,从而让图片更有识别性。

自动草稿

上图我分别上传了4 : 1的横图和竖图,它们的缩略图展示范围均和3 : 1一致,像聊天界面图片比例往往比较多用,采用该阈值比例可以保证超长图适配之后具有好的识别性,比如微信。

自动草稿

微信在适配时就是采用这一比例,上图是我分别发送3 : 2、2 : 1、3 : 1、4 : 1、8 : 1几个尺寸,可以看到从第三张图开始,后面的几个比例展示效果均是3 : 1,这样可以避免直接适配出现一条极细图片的尴尬。

画重点

大家在设计时需要记住,图片比例在使用时最好有所规律,不要随意的设置尺寸,同时一个APP中图片的比例不易过多,最好不要超过3种,类似功能的图片采用同一比例。

另外在确定采用哪种图片比例时,先确定产品类型和产品目的。比如你的项目是电商类产品、主要目的是为了卖货,那么我们就选择1 : 1的比例可以突出商品主体;或者你是做视频类的APP,那么你的产品展示列表就可以采用16 :9 的比例。总之在选择时需要做到符合产品定位、考虑维护成本,做到有理有据。

更多内容,请关注我们公众号:不丧指南

不丧指南

设计中的18个优化用户体验法则(上)

0条评论

发表评论

Your email address will not be published. Required fields are marked *