UI設(shè)計(jì)作品師寬高比指南

　　您會(huì)發(fā)現(xiàn)網(wǎng)格上的照片整齊均勻地以1：1正方形排列。拉起YouTube，它是16：9的寬屏矩形。本文AAA教育的武老師對(duì)UI設(shè)計(jì)作品師寬高比指南詳細(xì)的分解。
 

　　屏幕，圖像和框架都具有可識(shí)別的形狀，長(zhǎng)寬比是用來(lái)描述這些形狀的固定比例的術(shù)語(yǔ)。簡(jiǎn)而言之，圖像的長(zhǎng)寬比是其寬度和高度之間的關(guān)系。長(zhǎng)寬比通常以兩個(gè)數(shù)字表示，并用冒號(hào)(如X：Y或4：3)分隔。通常，它們用于描述電影。
 

　　在UX設(shè)計(jì)中，長(zhǎng)寬比有些過(guò)時(shí)，因?yàn)樗鼈儾混`活且良好的數(shù)字設(shè)計(jì)具有響應(yīng)能力。例如，請(qǐng)查看InVision的主頁(yè)：您可以看到標(biāo)題視頻看起來(lái)是16：9的比例，但是它有響應(yīng)。因此，如果將瀏覽器拖入以縮小寬度，則視頻會(huì)更改其大小-隨您所愿。
 

　　但是，隨著設(shè)計(jì)人員進(jìn)行更多的跨協(xié)作工作并在網(wǎng)站或應(yīng)用程序中設(shè)計(jì)資產(chǎn)時(shí)，他們很可能會(huì)經(jīng)常碰到這個(gè)術(shù)語(yǔ)，或者使用它來(lái)傳達(dá)需要鎖定的組件比率。因此，這是設(shè)計(jì)師需要了解的縱橫比和用戶體驗(yàn)的內(nèi)容。
 

　　什么是長(zhǎng)寬比?
 

　　首先讓我們介紹一下基礎(chǔ)知識(shí)：長(zhǎng)寬比是圖像的寬度與高度相比的大小，不附加任何像素或單位。圖像的長(zhǎng)寬比可以幫助您了解其形狀，但不能確定圖像的實(shí)際大小。對(duì)于X：Y的寬高比，x是圖像的寬度，y是圖像的高度。
 

　　長(zhǎng)寬比公式
 

　　長(zhǎng)寬比寫為寬高比的公式，例如3：2。重要的是要記住，盡管兩個(gè)圖像可以具有相同的寬高比，但是它們可以具有不同的圖像大小。
 

　　因此，例如，正方形比例為1：1將意味著圖像的寬度和高度相同。無(wú)論圖像的尺寸是320 X 320像素還是1080 X 1080像素，縱橫比都將保持1：1。再舉一個(gè)例子，圖像可以是1920 X 1080像素或1280 X 720像素，但是兩者都具有寬屏16：9寬高比。
 

　　常見(jiàn)長(zhǎng)寬比
 

　　以下是最常見(jiàn)的寬高比：
 

　　1：1比例
 

　　縱橫比為1：1的圖像具有相同的寬度和高度，并且是正方形。此長(zhǎng)寬比通常用于智能手表，您可能會(huì)在社交媒體網(wǎng)站(如Instagram照片)上注意到1：1的長(zhǎng)寬比。
 

　　3：2比例
 

　　3：2的寬高比在35mm膠片中得到了普及，并且在當(dāng)今的靜態(tài)照相機(jī)攝影中仍然很流行。UI設(shè)計(jì)潮流色彩也是。3：2的比例還用于某些早期型號(hào)的iPhone。
 

　　4：3比例
 

　　4：3的比例會(huì)形成矩形形狀，這在某些計(jì)算機(jī)顯示器和電視顯示器上很常見(jiàn)。老式電視機(jī)通常在這個(gè)尺寸上成型。
 

　　16：9比例
 

　　矩形更細(xì)長(zhǎng)，在演示幻燈片，寬屏電視，計(jì)算機(jī)顯示器上會(huì)發(fā)現(xiàn)16：9的寬高比。這是視頻的標(biāo)準(zhǔn)寬屏寬高比。大多數(shù)智能手機(jī)和數(shù)碼單反相機(jī)以1920 x 1080像素(長(zhǎng)寬比為16：9)錄制視頻。

　　設(shè)計(jì)中的長(zhǎng)寬比
 

　　如前所述，長(zhǎng)寬比最常用于膠片中。但是，設(shè)計(jì)師可能偶爾會(huì)遇到這個(gè)詞。例如，如果您正在與同事或客戶一起進(jìn)行項(xiàng)目，而他們正在談?wù)摽v橫比，則他們可能是指可以從中訪問(wèn)產(chǎn)品的不同屏幕尺寸：計(jì)算機(jī)，平板電腦，移動(dòng)電話，響應(yīng)式設(shè)計(jì)可以說(shuō)明如何在不同的屏幕尺寸上顯示組件，但有時(shí)響應(yīng)式設(shè)計(jì)會(huì)截?cái)囔o態(tài)圖像(尤其是帶有文本的圖像)。因此，重要的是要注意具有特定長(zhǎng)寬比的圖像將如何裁剪并在不同的屏幕尺寸上顯示-并詢問(wèn)您的合作者響應(yīng)式設(shè)計(jì)會(huì)對(duì)預(yù)期用途產(chǎn)生怎樣的影響。UI設(shè)計(jì)思維。
 

　　即使許多常見(jiàn)的設(shè)備具有不同的尺寸，它們的縱橫比也相似。為了幫助您，Materialdesign.io包含了常見(jiàn)設(shè)備的長(zhǎng)寬比，包括筆記本電腦，智能手表，平板電腦和電話。例如，取決于版本，Apple Watch的縱橫比為5：4，而iPad的縱橫比為4：3，而MacBook Pro的縱橫比為16：9和16:10。
 

　　長(zhǎng)寬比計(jì)算器
 

　　隨著設(shè)計(jì)人員對(duì)內(nèi)容進(jìn)行裁剪和轉(zhuǎn)換以適合各種媒體，手邊有一個(gè)易于使用的寬高比計(jì)算器非常重要。這些計(jì)算器可以幫助您在移交給開發(fā)人員時(shí)計(jì)算縱橫比和像素尺寸。這篇文章的內(nèi)容你學(xué)到了嗎，更多資訊請(qǐng)持續(xù)關(guān)注AAA教育~