4:3
常用比率
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再有移动端和反向行之的产品间,可以看到有趣的对比。
就和生物一样,有着利益关系的不同物种倾向于趋同进化。
相关阅读
相信大家部分的人都会喜欢在天猫商城购物,因为这里的商品种类很丰富,价格方面实惠,重要的是质量方面相对来说是有保障的,大家知道天猫
什么是ANSI流明?目前市场上很多投影仪标注自身产品亮度时,有些产品标注“光源亮度XXX流明”,还有一些是“XXXANSI流
最大回撤率 在选定周期内任一历史时点往后推,产品净值走到最低点时的收益率回撤幅度的最大值。最大回撤用来描述买入产品后可能出
网上有很多淘宝返利网,你通过这些网站购物,还能获得返利,听起来还挺划算的,很多朋友多喜欢在这上面购物。这些购物返利的网站是怎么赚
什么是用户体验地图?什么是服务蓝图,他们有什么不同?文章为你解读。我们生活中的每一件发生的事情都是一种旅程,它也许几秒,几年,甚至一