图片比率进化史:3:2、4:3、16:9有什么区别?

   常用比率

  195x年开始的信息时代,最显著的特征是模拟技术转向数字技术,平面设计也从以纸为媒介逐渐由电子设备主导,颗粒度单位同样发生变化,但这对设计师而言影响并不那么大,问题在于比率。

  Aspect ratio即宽高比,这里只讨论最常见的三大类:摄影、视频和显示设备。

  摄影常用比率有:1:1、5:4、4:3、3:2,其中135胶卷的比率为3:2。近年来因为消费型相机的普及16:9也变得常见。

  视频常用比率有:4:3、16:9、21:9;传统电视屏幕比率为4:3,高清电视则为16:9,2009年后出现的21:9超宽频电视比率与影院宽屏比率2.39:1最为接近。

  显示器常用比率有:5:4、4:3、16:10、16:9,高于4:3的皆被称为宽屏。2008年之后,显示器逐渐从4:3和16:10转向16:9。以下为显示器常见分辨率:1024x768(4:3)、1280x1024(5:4)、1280x800(16:10)、1680x1050(16:10)、1920x1080(16:9)。

  从小到大合并同类项后则有:1:1、5:4、4:3、3:2、16:10、16:9、21:9,对比如下:


  不同比率比较

  他们怎么展示图片

  综合看互联网流量大户,使用1:1是一个较明显的趋势,不管是社交媒体还是线上购物。诚然,1:1的处理在跨多平台的今天是相对简易且一致的。


  不同网站比率对比

  值得注意的是,纵向比例(portrait)相对少见,但由于fashion类天生的特性,即服装多由模特穿着在身进行展示,越来越多的电子商务类产品青睐于使用瀑布流(Pinterest style waterfall)结构,使得纵向的图片显示也多了起来。

  而在视频类产品中,16:9处于王者地位,一是HD的普及,二是易于兼容21:9甚至更大的超宽屏比率。

  又见黄金分割

  题图的费波那契黄金矩形(Fibonacci Blocks)揭示了个人对1:1在移动平台上成为主流的另一个主观论点。随着智能手机显示屏往16:9靠拢,图文混排页面采用黄金矩形既平衡了图片和文字两者的主次关系,同时也具形式美感。

  图片的补偿处理

  非1:1比率的处理,一类是用card layout进行比率补偿,比如youtube:


  另一类,图片比率为纵向4:3的如farfetch,没有采用底色填充(如etsy)的做法,将上下图片的轮播(carousel)直接展示出来。


  小结

  被显示物和显示设备互为因果。Flickr的一组数据显示,随着iPhone很大程度上替代单反成为主流拍照设备,4:3和16:9的图片数量占比追上了传统摄影的3:2,半分天下。跨平台的互联网产品一直试图在pc和无线间一碗水端平,但现实很残酷,成熟产品的两个平台必然是此消彼长,用户时间资源有限。Mobile First的逻辑是,保证移动端展示操作最优化的基础上再考虑如何移植并延展到更大屏幕上。在先有pc再有移动端和反向行之的产品间,可以看到有趣的对比。就和生物一样,有着利益关系的不同物种倾向于趋同进化。

时间: 2024-09-22 04:21:30

图片比率进化史:3:2、4:3、16:9有什么区别?的相关文章

Fastdfs与nginx进行压缩图片比率_nginx

在此先把前面自己做的那个功能在此分享下,是一个模仿淘宝的,希望大神们有什么想法可以不吝赐教: 自己是通过前面的参考配置lua与nginx的结合使用,利用脚本语言lua的强大特性和nginx的特性来实现这个功能,在nginx.conf的配置文件中加入如下代码: server { listen 22222; server_name localhost; # server_name somename alias another.alias; location /images/{ alias /root

显示器16:9和16:10有什么区别?

  现在大多数片源都是采用16:9格式输出的,在以前,用16:10的LCD播放这类片源的时候,要不就是影片填充整个屏幕而造成失真和不能实现"点对点"的现象;要不就是保持影片的原始宽高比,虽然能做到"点对点",但屏幕上下会各留下一条黑边,不仅影响观看影片的感受,也造成显示器屏幕面积利用率的下降.因此,假如用24英寸的16:9 LCD显示器来播放Full HD 1080P格式的影片的话,能够比16:10的24英寸LCD获得更加好的视觉效果和更高的屏幕面积利用率. 除了在

bmp格式是否可以构建16位无压缩灰阶图片?

问题描述 bmp格式是否可以构建16位无压缩灰阶图片? bmp格式是否可以构建16位无压缩灰阶图片? 也就是说2个字节表示一个像素的灰度值,其范围为0~65535. 查阅资料发现bmp无压缩时,需采用BIRGB,但系统随后会默认分解2字节的像素值, 从而按RGB555格式构成彩色图,即使添加一个灰阶颜色板也不行. 这是生物方面图像需求,不太清楚是否可以构成16位灰阶bmp文件. 解决方案 标准的 BMP 16 位时肯定是有处理的,数据有一定的丢失,只有 24 位时是真实还原的. 这也不叫压缩,因

Photoshop打造霞光中的树林人物图片

素材图片并没有霞光,处理的时候先降低主色饱和度;然后用曲线给整体及暗部增加蓝色;再在人物背后区域渲染高光,模拟出霞光效果;后期根据光源加强局部明暗即可. 原图 最终效果 1.打开原图素材大图,创建色相/饱和度调整图层,对全图.红.黄.绿进行调整,参数设置如图1 - 4,效果如图5.这一步快速降低主色饱和度,得到中性图片. <图1> <图2> <图3> <图4> <图5> 2.创建曲线调整图层,对RGB.绿.蓝通道进行调整,参数设置如图6 - 8,

Photoshop打造甜美柔和的暖褐色草地美女图片

  素材图片的暖色比较少,转为暖色的时候需要把高光及中间调部分的黄绿色都转为黄褐色,暗部的颜色转为红褐色,然后在合适的位置增加高光即可. 原图     最终效果     1.打开素材图片,创建色相/饱和度调整图层,对黄.绿.青进行调整,参数设置如图1 - 3,确定后把不透明度改为:70%,效果如图4.这一步把图片中的黄绿色转为黄褐色.     <图1>     <图2>     <图3>     <图4> 2.创建可选颜色调整图层,对红.黄.白进行调整,参数

Photoshop打造唯美的橙色树景人物图片

  素材图片主色比较单一,转橙色非常快,不过转了颜色以后还需要给暗部多增加一点褐色,高光部分增加一点淡绿色来丰富图片层次感. 原图 最终效果 1.打开素材图片,创建可选颜色调整图层,对绿色,青色进行调整,参数及效果如下图.这一步给图片增加黄绿色. <图1> <图2> <图3> 2.创建色相/饱和度调整图层,对黄色进行调整,参数及效果如下图.这一步快速把图片中的黄色转为橙红色. <图4> <图5> 3.创建曲线调整图层,对RGB.红,蓝通道进行调整

曝光的谷歌Gmail新界面图片

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp; 曝光的谷歌Gmail新界面图片 [科技讯]5月16日消息,近日,有媒体爆出了重新设计的桌面版Gmail界面图片,在新版的界面中Gmail已经变成一个两栏结构,左侧是可滑出的目录,右侧是非常简洁的邮件界面,而Hangouts则可以从最右侧滑出,一般情况是看不到的. 新界面不再使用传统的加星来标记重要邮件,而是引入了pin的概念,将重要的邮件置顶在最上方.从曝光的图片来

Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js_javascript技巧

在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本是固定的,所以展示的时候图片出现了变形.在网上找了很多中方式也没有解决(过程曲折,不再赘述),直到找到了这款Jquery的缩放插件--jqthumb.js.下面来看看如何使用它以及如何利用它来控制轮播控件中图片的大小,而且能够做到不变形,可以显示图片的主要部分(类似于微信朋友圈的图片混排效果--不知

Flash图片批量本地预览与上传实例

一直以来都梦想着做一个flash的东西出来,一直都没敢去尝试. 以前一段时间由于项目的需要,曾经对百度ueditor里的flash图片上传非常痴迷. 现在的情况可能很少遇到要使用flash的机会,但这依然打消不了我追求flash的热情. 这次这个效果一切以简单为主,一是因为没什么时间,而是as3技术水平决定了. 这次主要实现了以下几个功能: 1.本地批量预览 本地预览是flash9及as3开始提供的新功能,这也成为了它的一大特色,通过将读取的本地图片二进制话,从而实现了在flash上的图片预览效