文章详情

　　您会发现网格上的照片整齐均匀地以1：1正方形排列。拉起YouTube，它是16：9的宽屏矩形。本文AAA教育的武老师对UI设计作品师宽高比指南详细的分解。
 

 

　　屏幕，图像和框架都具有可识别的形状，长宽比是用来描述这些形状的固定比例的术语。简而言之，图像的长宽比是其宽度和高度之间的关系。长宽比通常以两个数字表示，并用冒号(如X：Y或4：3)分隔。通常，它们用于描述电影。
 

　　在UX设计中，长宽比有些过时，因为它们不灵活且良好的数字设计具有响应能力。例如，请查看InVision的主页：您可以看到标题视频看起来是16：9的比例，但是它有响应。因此，如果将浏览器拖入以缩小宽度，则视频会更改其大小-随您所愿。
 

　　但是，随着设计人员进行更多的跨协作工作并在网站或应用程序中设计资产时，他们很可能会经常碰到这个术语，或者使用它来传达需要锁定的组件比率。因此，这是设计师需要了解的纵横比和用户体验的内容。
 

　　什么是长宽比?
 

　　首先让我们介绍一下基础知识：长宽比是图像的宽度与高度相比的大小，不附加任何像素或单位。图像的长宽比可以帮助您了解其形状，但不能确定图像的实际大小。对于X：Y的宽高比，x是图像的宽度，y是图像的高度。
 

　　长宽比公式
 

　　长宽比写为宽高比的公式，例如3：2。重要的是要记住，尽管两个图像可以具有相同的宽高比，但是它们可以具有不同的图像大小。
 

　　因此，例如，正方形比例为1：1将意味着图像的宽度和高度相同。无论图像的尺寸是320 X 320像素还是1080 X 1080像素，纵横比都将保持1：1。再举一个例子，图像可以是1920 X 1080像素或1280 X 720像素，但是两者都具有宽屏16：9宽高比。
 

　　常见长宽比
 

　　以下是最常见的宽高比：
 

　　1：1比例
 

　　纵横比为1：1的图像具有相同的宽度和高度，并且是正方形。此长宽比通常用于智能手表，您可能会在社交媒体网站(如Instagram照片)上注意到1：1的长宽比。
 

　　3：2比例
 

　　3：2的宽高比在35mm胶片中得到了普及，并且在当今的静态照相机摄影中仍然很流行。UI设计潮流色彩也是。3：2的比例还用于某些早期型号的iPhone。
 

　　4：3比例
 

　　4：3的比例会形成矩形形状，这在某些计算机显示器和电视显示器上很常见。老式电视机通常在这个尺寸上成型。
 

　　16：9比例
 

 

　　矩形更细长，在演示幻灯片，宽屏电视，计算机显示器上会发现16：9的宽高比。这是视频的标准宽屏宽高比。大多数智能手机和数码单反相机以1920 x 1080像素(长宽比为16：9)录制视频。

　　设计中的长宽比
 

　　如前所述，长宽比最常用于胶片中。但是，设计师可能偶尔会遇到这个词。例如，如果您正在与同事或客户一起进行项目，而他们正在谈论纵横比，则他们可能是指可以从中访问产品的不同屏幕尺寸：计算机，平板电脑，移动电话，响应式设计可以说明如何在不同的屏幕尺寸上显示组件，但有时响应式设计会截断静态图像(尤其是带有文本的图像)。因此，重要的是要注意具有特定长宽比的图像将如何裁剪并在不同的屏幕尺寸上显示-并询问您的合作者响应式设计会对预期用途产生怎样的影响。UI设计思维。
 

　　即使许多常见的设备具有不同的尺寸，它们的纵横比也相似。为了帮助您，Materialdesign.io包含了常见设备的长宽比，包括笔记本电脑，智能手表，平板电脑和电话。例如，取决于版本，Apple Watch的纵横比为5：4，而iPad的纵横比为4：3，而MacBook Pro的纵横比为16：9和16:10。
 

　　长宽比计算器
 

　　随着设计人员对内容进行裁剪和转换以适合各种媒体，手边有一个易于使用的宽高比计算器非常重要。这些计算器可以帮助您在移交给开发人员时计算纵横比和像素尺寸。这篇文章的内容你学到了吗，更多资讯请持续关注AAA教育~