首页 > 网页教程 > 设计分享 > UI设计:APP的图片比例该如何设定?

UI设计:APP的图片比例该如何设定?

时间:2018-04-02    来源:人人都是产品经理

大家在做UI设计时,是否遇到过图片不知道如何设定比例的情况?我在做的时候就遇到过这个问题。

我在网上找了很多资料,同时通过体验一些主流的APP,我归纳了一些常见的图片比例,主要有:3 : 2、4 : 3、1 : 1、16 : 9这四种。

那么在设计时图片比例又是如何设定的呢?

下面针对这四种比例具体为大家分析下:

一、3:2

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

在早期徕卡镜头的成像圈大约为44mm,而胶卷的宽是24mm,因此如果在44mm的圆上截取一块宽为24mm的长方形,那么边长正好为36mm,也就是 3 比 2 的比例,。

同时由于徕卡几乎是行业内一家独大的公司,因此其他品牌相机也纷纷效仿这一比例。

但是随着移动设备的发展,手机很大程度上替代单反成为主流拍照设备,4 :3 和16 :9 的图片数量占比追上了传统摄影的3 : 2,半分天下,不过目前国外很多的APP还是用这一比例。

爱彼迎的热门目的地和出游去处模块,典型采用了3 :2 的比例。

大家可能想问:为什么图片尺寸有单数?

其实这里是根据屏幕的(宽度-间距)/图片数=图片宽度,因此这个图片不是固定的,而是等比例缩放的。高度根据比例在进行计算,有时候计算出来的数可能并不是一个整数,因此需要我们自己去选择一个整数来运用,其他的尺寸比例也是一样的。

二、4:3

4 比 3 是随着摄影的发展,小型相机(例如微单)的出现而诞生的。

这是由于小型化低成本镜头上,大家最大的问题是像场不够用了。而且由于当时传感器技术有限,无法把CCD的长度做到很长,因此人们需要尽可能得在小体积上实现更高像素。

相关推荐
CSS酷站网页水平条经典设计欣赏
欧美CSS酷站网页背景设计之光影特效赏析
酷站欣赏之欧美棕色调网站设计案例赏析
如何基于心理学设计的目的来制作受用户欢迎的网页
二十款网页图文混排设计样式欣赏
黑色的艺术:三十款暗黑色调的欧美CSS酷站欣赏
35套精美绚丽的创意酷站设计欣赏
网页设计的文字色彩与可读性分析
如何掌握网页广告字体设计的技巧
分析网页设计中的默认字体样式
40款超个性粗糙纸张纹理风格的CSS酷站欣赏
十五个用户体验设计(UI/UX)案例剖析
设计独特的多个创意404错误页面赏析
15款富有创意的的html电子名片设计欣赏
多款创意搞笑的404错误页面欣赏
国外49款创意型404错误网页欣赏(附演示网址)
手绘风格的15款超级漂亮网站欣赏
网站的旗帜(Banner)广告条字体设计简析
网易频道页面的改版过程分享
网页设计师必备的13款国外CSS酷站参考画廊
30款富有表现力的网页图表设计欣赏
网易UED分享banner广告条设计的定位与思考
19楼UED分享专题第一屏的设计经验
全球65个设计出众的设计师个人博客欣赏
多款韩国绚丽风格的游戏网站界面设计欣赏
网页UI之Banner广告条设计案例赏析
网页UI之Logo设计案例赏析
10款设计超精美的WordPress网站主题欣赏
创意型404错误页案例与用户体验的赏析
15个用WIX在线服务创建的超酷FLASH网站
国外颇具特色的电子商务网站设计欣赏(上)
网页设计中的构图技巧分享
国外颇具特色的电子商务网站设计欣赏(下)
创意十足的设计工作室网站欣赏
国外33个拥有丰富资源和教程的设计博客
BANNER设计的几个实用性策略

精彩推荐

热门教程