每個圖像，每個畫布，每個框架都有一個形狀。通常這個形狀是一個矩形。更常見的是基于介質的特定比例的矩形。

從相機到電視，電影再到電腦屏幕，每種媒體都有著截然不同的形狀。這對設計師來說可能是一個挑戰，特別是當您必須裁剪和轉換內容和信息以適應各種媒體時。由于所有這些不同的形狀，理解縱橫比可以幫助您輕松地將圖像和設計從一種介質移動到另一種介質。

寬高比定義

 

 

簡單地說，縱橫比是矩形的寬度和高度之間的比例關系。在大多數現代設計項目中使用縱橫比時，縱橫比將具有水平方向，因為大多數屏幕都比它們高。（我們在屏幕上設計，通常用于屏幕。）但并非每個寬高比都必須具有比高度更大的寬度。

縱橫比以數學比率定義，兩個數字用冒號分隔。

寬度：高度

因此，4英寸寬，3英寸高是4：3

然而，縱橫比不僅僅是寬度和高度的測量。它被減少到最小的可用比率（使用小學的數學概念）。因此，對于12英寸寬，9英寸高的矩形，縱橫比也是4：3（靜態攝影中的常見縱橫比）。

寬高比和照片

 

 

最容易看到并解釋寬高比的地方之一就是攝影。即使您的iPhone相機也允許您在拍攝照片之前選擇特定的寬高比，然后您可以在裁剪時更改寬高比。

攝影中的寬高比通常與照片的使用方式有關?？v橫比由介質的約束決定。例如，將照片發布到Instagram只允許比例為1：1的圖像（正方形）。

傳統上，照片通常采用3：2的縱橫比拍攝，因為照片的尺寸為3英寸×2英寸，6英寸×4英寸等等。傳統上，這種常見的公式導致照相機傳感器和照片的打印實踐，使普通人可以非常輕松地拍攝和打印圖像。

這些日子有點復雜，有更多的數字操作選項。但這個概念仍然有效，并且仍然有一些最常用的尺寸。在專業攝影師，設計師和藝術家之外，很少有人將照片裁剪成除常見寬高比之外的其他東西。

但為什么要在一個普通比例之外進行收獲呢？創造戲劇性的視覺興趣。考慮一下全景圖像。它具有戲劇性和興奮感，“正常”形狀不具備。使用標準形狀意味著和諧與平衡，而非標準形狀可以是戲劇性和令人興奮的。

寬高比和視頻

 

 

視頻中的寬高比非常像靜態攝影。現代視頻屏幕的形狀完全不同，而歷史靜止和運動圖像基于相似的寬高比。

視頻屏幕在寬高比方面分為兩個截然不同的類別：電影或電影屏幕以及電視或臺式電腦屏幕。這些屏幕的形狀開始接近相同的寬高比，更多的家用屏幕落入寬屏類別，但兩者之間仍然存在顯著差異，這就是為什么在格式之間通常使用信箱的原因。

影院屏幕通常為1.85：1或1.43：1（IMAX）

電視屏幕通常為4：3或1.33：1（較舊的格式）或較新的更常見的寬屏比例為16：9或1.77：1。

就網絡而言，設計用于屏幕尺寸的視頻變化很大，但通常使用16：9格式。除非使用全屏視頻，否則網頁設計師的另一個常見選項是默認使用16：9比例的視頻，因為它是大多數基于網絡的播放器和應用（包括YouTube）使用的標準。

使用通用寬高比可以輕松地將元素從一個地方移動到另一個地方以及項目之間。例如，裁剪為16：9比例的視頻將在電視屏幕，計算機屏幕（桌面或移動設備）和在線視頻播放器中無縫播放。這樣可以節省您的時間，因為您不必為不同的格式或設備重新編輯或裁剪視頻，也不必擔心因屏幕尺寸不同而無法看到的部分圖像區域。

寬高比和響應式設計

在考慮網站的響應式設計時，寬高比也會發揮作用。如果您希望圖像和視頻在多個設備上保持特定形狀，則尤其如此。

在CSS中維護圖像的特定寬高比可確保您的內容的含義不會因裁剪圖像而改變。（想想如果完整的圖像是兩個人彼此摟著并且在裁剪版本中你只看到一個人和另一個人的手臂的一部分，照片會有多么不同。這些照片的含義截然不同。）

在響應式網站上工作時，您需要做出一些關于圖像，寬高比以及您希望在各種屏幕上顯示內容的決定。設計人員可以手動調整每個圖像的大小，也可以使用一些編碼來完成這一操作?？死赘?middot;巴克勒（Craig Buckler）在“ 如何在響應式網頁設計中維護圖像方面比率 ”中提供了一個關于如何做到這一點的精彩教程。

這是額外的數學也可以發揮作用。您可能需要考慮百分比方面的百分比。以下是一些常見的轉化：

4：3 = 75％

3：2 = 66.66％

16：9 = 56.25％

8：5 = 62.5％

讓生活變得輕松

那為什么這一切都很重要？為什么我們不能只拍攝我們喜歡的圖像并繼續我們的生活？你可以，但了解寬高比會讓你的生活更輕松。

想想有多少項目包括多個畫布上的多個設計 - 名片設計，明信片設計，網站設計，海報設計，視頻廣告。如果您使用常規寬高比或使用該比例設計元素，則混合和匹配件很容易，您不必為每個新元素重新設計。

想想你可以節省的時間。

另一個節省時間？試試這個寬高比計算器。如果你對自己的計算感覺不好，那就特別方便了。

常見的方面比率

 

雖然寬高比標準確實會隨著時間的推移而變化 - 只要看看20世紀50年代和今天的電視屏幕截然不同的形狀，你就可以計劃一些更常見的形狀和尺寸。

4：3（1.33：1） - 舊電視和電腦屏幕格式（1024×768像素）

3：2（1.5：1） - 普通照片打印格式，也用于明信片，名片和標準郵件

1：1 - 方形圖像標準（在社交媒體和網站設計中很常見）

16：9（1.77：1） - 高清視頻標準，電腦屏幕標準接近但不精確（1366×768像素）

5：3（1.66：1） - 歐洲寬屏標準

1.618：1 - 黃金比例

結論

了解寬高比可以節省您作為設計師的時間和返工?？紤]知道某件作品或作品或項目與其他作品具有相同比例的所有常見應用。它還可以幫助您了解裁剪的位置以及圖像或項目的哪些部分必須根據介質進行刪除或削減。

雖然一開始可能看起來像很多數學和計算，但你工作的許多項目都可能使用常見的寬高比。使用上面的清單查看您可以混合和匹配的部件和完整設計。

意派Coolsite360交互式線網頁編輯系統

“創意不該受技術束縛，交互可以變得簡單有趣”