图片比率进化史:3:2、4:3、16:9 有何区别?哪个…
2019-04-10 09:01:45来源: 设计圈 阅读 ()
常用比率
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 靠拢,图文混排页面采用黄金矩形既平衡了图片和文字两者的主次关系,同时也具形式美感。
图片的补偿处理
Youtube
非1: 1 比率的处理,一类是用card layout进行比率补偿,比如youtube;
Farfetch
另一类,图片比率为纵向4: 3 的如farfetch,没有采用底色填充(如etsy)的做法,将上下图片的轮播(carousel)直接展示出来。
小结
被显示物和显示设备互为因果。Flickr的一组数据显示,随着iPhone很大程度上替代单反成为主流拍照设备,4: 3 和16: 9 的图片数量占比追上了传统摄影的3:2,半分天下。
跨平台的互联网产品一直试图在pc和无线间一碗水端平,但现实很残酷,成熟产品的两个平台必然是此消彼长,用户时间资源有限。Mobile First的逻辑是,保证移动端展示操作最优化的基础上再考虑如何移植并延展到更大屏幕上。在先有pc再有移动端和反向行之的产品间,可以看到有趣的对比。
就和生物一样,有着利益关系的不同物种倾向于趋同进化。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 百度联盟推出一站式媒体服务平台“百青藤” 2019-07-15
- 百度移动搜索落地页检测工具常见问题解答 2019-06-13
- 天下苦流量久矣! 2019-06-13
- 小程序赚钱之2B参考:核心是你能找到多少个场景 2019-05-08
- 腾讯百度交战产业互联网,小程序或是「中途岛」 2019-04-18
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash