UI設計作品師寬高比指南

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

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

　　在UX設計中，長寬比有些過時，因為它們不靈活且良好的數(shù)字設計具有響應能力。例如，請查看InVision的主頁：您可以看到標題視頻看起來是16：9的比例，但是它有響應。因此，如果將瀏覽器拖入以縮小寬度，則視頻會更改其大小-隨您所愿。
 

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

　　什么是長寬比?
 

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

　　長寬比公式
 

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

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

　　常見長寬比
 

　　以下是最常見的寬高比：
 

　　1：1比例
 

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

　　3：2比例
 

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

　　4：3比例
 

　　4：3的比例會形成矩形形狀，這在某些計算機顯示器和電視顯示器上很常見。老式電視機通常在這個尺寸上成型。
 

　　16：9比例
 

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

　　設計中的長寬比
 

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

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

　　長寬比計算器
 

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