設(shè)計中的橫縱比例：縱橫比工具

圖像豐富的內(nèi)容推動網(wǎng)站參與度，使訪問者可以細讀它們的樂趣。但是，即使只是首頁上的圖像，也要確保將所有面向視覺的內(nèi)容質(zhì)量最大化。因為無論您是處理照片、插圖還是視頻，拉伸、擠壓或裁剪不當?shù)膱D像，都會給訪問者留下不好的印象，并影響他們在網(wǎng)站上的整體體驗。

確保這些圖像正確顯示是設(shè)計的關(guān)鍵部分。確定寬、高、比，在各種設(shè)備上獲得最佳觀看效果對設(shè)計師來說既是一件苦差事，也是一項挑戰(zhàn)。但今天的響應式設(shè)計工具和一系列免費的寬高比計算器，可以確保圖像和視頻文件在任何地方都以最佳視覺顯示。

什么是縱橫比?

在最基本的方式中，縱橫比是圖像的寬度和高度之間的關(guān)系。因為縱橫比反映的是圖像的比例，而不是它的大小，所以縱橫比無論大小都保持不變。

例如，正方形圖像的縱橫比為 1:1，因為其高度和寬度相同。無論圖像有多大，該比率都將保持不變。320x320px 的圖像與 1080x1080px – 1:1 的圖像具有相同的縱橫比。

對于非正方形的圖像，即各種尺寸的水平或垂直矩形，縱橫比可能會有所不同。攝影、視頻和其他，基于圖像的設(shè)計工作中使用的常見縱橫比包括 4:3、3:2 或 16:9，這是許多寬屏設(shè)備，如電視和臺式計算機的基本比例。

雖然圖像的縱橫比來自其高度和寬度的關(guān)系，但該比例的多個子集也有助于定義圖像比例。

像素縱橫比

像素縱橫比 (PAR) 是指構(gòu)成圖像的單個像素的比例。像素通常是方形的，這導致像素長寬比為 1:1。但是針對某些類型的顯示器優(yōu)化的圖像也可以具有長寬比為 4:3 或類似的矩形像素。

顯示縱橫比

顯示縱橫比 (DAR) 是與設(shè)計師最相關(guān)的一種縱橫比，也是最常與通用術(shù)語相關(guān)聯(lián)的一種。顧名思義，顯示縱橫比是指圖像在各種屏幕上顯示的比例。

某些設(shè)備(例如相機和電視)具有固定的 DAR，因此為了使圖像在這些設(shè)備上顯示良好，它們需要針對特定的縱橫比進行優(yōu)化。例如，要在監(jiān)視器或電視屏幕上顯示的寬屏視頻的典型顯示縱橫比是 16:9。

當在這些設(shè)備上顯示具有不同縱橫比的圖像時，它們看起來會失真。數(shù)碼單反相機傳感器還具有固定的顯示縱橫比，用于控制相機拍攝圖像的保存和顯示方式。

存儲縱橫比

存儲縱橫比 (SAR) 是一個縱橫比公式，專門適用于編碼的數(shù)字視頻文件。SAR 是指視頻幀大小的寬度和高度關(guān)系，它需要在所有單個幀之間保持一致，才能正確顯示完整的視頻。在常用的公式中，對于大多數(shù)寬屏視頻，SAR x PAR = DAR。

縱橫比影響UI/UX設(shè)計

縱橫比在任何涉及以正確方式捕獲和顯示照片、視頻或其他類型的基于圖像的文件項目中都發(fā)揮著重要作用。

對于攝影師來說，相機的固定縱橫比會對照片的構(gòu)圖以及稍后在其他設(shè)備上的顯示產(chǎn)生相當大影響。對于攝像師和任何處理幻燈片、動畫和其他運動項目的人來說，縱橫比是在寬屏和移動設(shè)備上正確顯示的關(guān)鍵因素。

轉(zhuǎn)向響應式網(wǎng)頁設(shè)計，確保內(nèi)容在所有設(shè)備上正確顯示，有助于解決為單個圖像設(shè)置縱橫比的許多問題。

但即使在這些環(huán)境中，也可能出現(xiàn)問題，例如無法在不影響其內(nèi)容或質(zhì)量的情況下調(diào)整圖像以進行顯示。一個簡單的例子是當一個長寬比為 1:1 的方形圖像需要適合網(wǎng)站頁面上的矩形框時。為了適應不同的圖像尺寸要求，可能需要調(diào)整比例和尺寸。

在日益由圖像驅(qū)動的數(shù)字世界中，即使看起來稍微不成比例的視頻和圖像也會導致訪問者對網(wǎng)站產(chǎn)生負面印象——而那些明顯被迫采用錯誤配置的視頻和圖像甚至會干擾網(wǎng)站的可用性。

比例不當?shù)漠a(chǎn)品圖片或用戶指南視頻太長而看不清會影響訪問者的意愿和他們使用網(wǎng)站的能力。設(shè)計師、開發(fā)人員和任何處理圖像的人都需要知道縱橫比的工作原理以及如何操縱它們獲得最佳視覺效果。為了簡化這個過程，網(wǎng)絡上出現(xiàn)了許多免費和付費的縱橫比計算器。

解決方案：縱橫比計算器

借助一些簡單的數(shù)學運算，當然可以計算圖像的縱橫比并手動調(diào)整其大小。但是在處理來自多個來源的許多圖像時，這變得效率低下。

在眾多在線縱橫比計算器之一的幫助下，您可以為多種不同格式的任何圖像確定最佳縱橫比，從而使設(shè)計人員能夠充分優(yōu)化每張圖像以獲得最佳觀看效果。

這里推薦一個在線的網(wǎng)址：https://www.omnicalculator.com/other/aspect-ratio#how-to-calculate-aspect-ratio

要使用該平臺，您需要知道以像素為單位的圖像分辨率并選擇圖像出現(xiàn)的環(huán)境類型。然后計算器將結(jié)果作為最佳縱橫比返回。這不單對于圖像處理、對于視頻編輯也特別有用。

圖像編輯器具有縱橫比工具

其他圖像管理工具也可以幫助獲得正確的縱橫比。Photoshop等圖像編輯器提供的模板設(shè)計時考慮了最佳縱橫比，適用于典型情況，例如設(shè)計網(wǎng)站橫幅、標題或社交媒體配置文件。大多數(shù)標準視頻編輯軟件還允許用戶確定和調(diào)整要作為視頻中單獨幀包含的圖像的縱橫比。

比例正確、顯示良好且性能良好的圖像是各種企業(yè)的強大工具。獲得正確的縱橫比可以使圖像無論在何處顯示都看起來不錯。無論您是網(wǎng)頁設(shè)計、APP設(shè)計、處理照片、插圖或視頻都可以吸引訪問者并保持他們的活躍度與留存率。

通過這種方式可以輕松確保圖像的大小和比例正確。

使用圖像填充，您可以從多種設(shè)置中進行選擇，這些設(shè)置允許您調(diào)整圖像大小或裁剪圖像，同時保留其縱橫比以實現(xiàn)完美定位。