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

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

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

什么是縱橫比?

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

例如，正方形圖像的縱橫比為 1:1，因?yàn)槠涓叨群蛯挾认嗤o(wú)論圖像有多大，該比率都將保持不變。320x320px 的圖像與 1080x1080px – 1:1 的圖像具有相同的縱橫比。

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

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

像素縱橫比

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

顯示縱橫比

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

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

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

存儲(chǔ)縱橫比

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

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

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

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

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

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

在日益由圖像驅(qū)動(dòng)的數(shù)字世界中，即使看起來(lái)稍微不成比例的視頻和圖像也會(huì)導(dǎo)致訪問(wèn)者對(duì)網(wǎng)站產(chǎn)生負(fù)面印象——而那些明顯被迫采用錯(cuò)誤配置的視頻和圖像甚至?xí)蓴_網(wǎng)站的可用性。

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

解決方案：縱橫比計(jì)算器

借助一些簡(jiǎn)單的數(shù)學(xué)運(yùn)算，當(dāng)然可以計(jì)算圖像的縱橫比并手動(dòng)調(diào)整其大小。但是在處理來(lái)自多個(gè)來(lái)源的許多圖像時(shí)，這變得效率低下。

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

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

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

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

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

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

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

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