如何規(guī)范UI設(shè)計(jì)界面尺寸，常見的ui界面布局分類

對于數(shù)字化產(chǎn)品而言，UI設(shè)計(jì)非常重要，今天帶大家一起看看如何規(guī)范UI設(shè)計(jì)界面尺寸，常見的ui界面布局分類。

常見的UI界面布局分類：

1.列表布局

列表布局是在界面中以列表的形式顯示各種信息的布局形式。常見的列表布局包括通信、電子商務(wù)、新聞和我們媒體。應(yīng)用程序下載等應(yīng)用程序軟件，一般優(yōu)先考慮多種選擇，通過滑動列表瀏覽各種信息。其顯示效果水平清晰，瀏覽方便。

2.展示布局

顯示界面UI設(shè)計(jì)中常用的圖標(biāo)或圖片的形式。常見的顯示應(yīng)用程序包括電子商務(wù)、金融和其他應(yīng)用程序。以電子商務(wù)為例。在商品搜索過程中，通過列出商品圖片和基本信息，過多的商品通過顯示更方便用戶操作和查看信息。

3.九宮格布局

九宮格布局通常以三個(gè)垂直和多個(gè)水平的形式顯示圖標(biāo)或圖片，通常顯示應(yīng)用程序功能或分類。整體數(shù)量趨于固定，水平三方便瀏覽，垂直多方便擴(kuò)展和滑動。通過簡單的界面顯示常用的功能和常用的導(dǎo)航選擇。

4.彈出式布局

彈出式布局通常用于界面中的廣告或類別選擇。彈出式廣告介紹不多。類別選擇的彈出通常在電子商務(wù)應(yīng)用程序中通過彈出選項(xiàng)卡選擇商品類型。常用的彈出界面主要是輔助功能，方便用戶操作。

5.選項(xiàng)卡布局

選項(xiàng)卡布局一般通過圖片進(jìn)行選項(xiàng)內(nèi)容，然后選項(xiàng)卡下方有固定的圖片信息。常見的有電影票應(yīng)用程序。電子商務(wù)應(yīng)用程序很常見。通過圖片顯示內(nèi)容，并在下面注明具體細(xì)節(jié)等?；蛘呤褂眠x項(xiàng)卡圖片進(jìn)行產(chǎn)品顯示，并在下面用文字描述細(xì)節(jié)。

6.多界面布局

一些功能豐富的應(yīng)用程序界面布局也相對豐富。通過功能導(dǎo)航，可分為多個(gè)界面進(jìn)行布局。每個(gè)界面也可以結(jié)合多種形式，根據(jù)每個(gè)界面的功能或顯示內(nèi)容選擇不同的布局形式。

如何規(guī)范UI設(shè)計(jì)界面尺寸：

1.像素密度-PPI

像素密度是指顯示屏每英寸長度排列的像素點(diǎn)數(shù)。PPI越高，屏幕顯示效果越好。由于像素密度翻了一番，Retina屏幕比普通屏幕清晰得多。

2.計(jì)量單位

IOS和Android平臺都定義了自己的像素計(jì)量單位。IOS的尺寸單位為pt，Android的尺寸單位為dp。說實(shí)話，兩者其實(shí)是一回事。

單位之間的轉(zhuǎn)換關(guān)系隨倍率而變化：

1倍:1pt=1dp=1px(mdpi.iPhone3gs)；

1.5倍:1pt=1dp=1.5px(hdpi)；

2倍:1pt=1dp=2px(xhdpi.iPhone4s/5/6)；

3倍:1pt=1dp=3px(xxhdpi.iPhone6)；

4倍:1pt=1dp=4px(xxxhdpi)；

該單位決定了我們的思維方式。在設(shè)計(jì)和開發(fā)過程中，應(yīng)盡量使用邏輯像素尺寸來思考界面。在設(shè)計(jì)安卓應(yīng)用程序時(shí)，一些設(shè)計(jì)師喜歡將畫布設(shè)置為1080×1920，而另一些設(shè)計(jì)師喜歡將畫布設(shè)置為720×1280。給出的界面元素尺寸不統(tǒng)一。安卓的最小點(diǎn)擊區(qū)域尺寸為48x48dp，這意味著在xhdpi設(shè)備上，按鈕尺寸至少為96x96px。在xxhdpi設(shè)備144x144px。

無論畫布有多大，我們都設(shè)計(jì)了基準(zhǔn)倍率的界面風(fēng)格，開發(fā)人員所需的單位都是邏輯像素。因此，為了確保準(zhǔn)確和高效的溝通，雙方都需要描述和理解界面的邏輯像素大小，無論是在標(biāo)記切圖還是日常溝通，不要說底部標(biāo)簽欄的高度是96像素，我是按照xhdpi做的，所以掌握以上知識很重要，和下游的前端后者開發(fā)工程師的溝通更重要，記得最后還要進(jìn)行多輪的UI設(shè)計(jì)走查，才能確保最終成品和設(shè)計(jì)稿的高度還原，從而保證項(xiàng)目質(zhì)量。