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

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

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

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

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

　　什么是長寬比?
 

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

　　長寬比公式
 

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

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

　　常見長寬比
 

　　以下是最常見的寬高比：
 

　　1：1比例
 

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

　　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ī)顯示器和電視顯示器上很常見。老式電視機(jī)通常在這個(gè)尺寸上成型。
 

　　16：9比例
 

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

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

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

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

　　長寬比計(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教育~