移動端UI設(shè)計尺寸規(guī)范整理

時間：2023-09-24 07:42:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-24 07:42:01 來源：網(wǎng)站運(yùn)營

移動端UI設(shè)計尺寸規(guī)范整理： 很多新人在開始做移動端UI設(shè)計的時候，往往對界面的一些尺寸規(guī)范不是十分清楚，很多時候都是憑借自己的感覺和經(jīng)驗去繪制界面，心里并沒有一個清晰的概念，導(dǎo)致做出來的頁面總是不那么盡如人意。優(yōu)漫教育小編整理匯總了一些界面設(shè)計（iOS系統(tǒng)）中常用的一些尺寸規(guī)范和方法，如控件間距、適配、標(biāo)注、切圖等，設(shè)計師在設(shè)計時并不一定要嚴(yán)格遵守，但對這些規(guī)范應(yīng)有所了解，并融會貫通。

一、界面設(shè)計尺寸及欄高度

目前主流的iOS設(shè)備主要有iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸），它們都采用了Retina視網(wǎng)膜屏幕，其中iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，無論是欄高度還是應(yīng)用圖標(biāo)，設(shè)計師提供給開發(fā)人員的切片大小，前者始終是后者的1.5倍，并分別以 3x和 2x在文件名結(jié)尾命名，程序再根據(jù)不同分辨率自動加載 3x或者 2x的切片。

通過上面的講解和圖示我們了解了iPhone不同設(shè)備的物理尺寸，那么他們的像素分辨率又是多少呢？也就是說我們用Photoshop做設(shè)計新建畫布應(yīng)該設(shè)置多大呢？另外，iOS應(yīng)用中的欄，包括狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄等，它們的高度又分別是多少呢？

注意：在進(jìn)行iphone x設(shè)計的時候我們依然可以采用熟悉的iphone 7的設(shè)計尺寸作為模板，只是高度增加了290px，設(shè)計尺寸為750*1624（ 2x）。注意狀態(tài)欄的高度由原來的40px變成了88px，另外底部要預(yù)留68px的主頁指示器的位置。

二、邊距和間距

在移動端頁面的設(shè)計中，頁面中元素的邊距和間距的設(shè)計規(guī)范是非常重要的，一個頁面是否美觀、簡潔、是否通透和邊距間距的設(shè)計規(guī)范緊密相連，所以說我們有必要對它們進(jìn)行了解。

1.全局邊距

全局邊距是指頁面內(nèi)容到屏幕邊緣的距離，整個應(yīng)用的界面都應(yīng)該以此來進(jìn)行規(guī)范，以達(dá)到頁面整體視覺效果的統(tǒng)一。全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀。

在實(shí)際應(yīng)用中應(yīng)該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距，讓邊距成為界面的一種設(shè)計語言，常用的全局邊距有32px、30px、24px、20px等等，當(dāng)然除了這些還有更大或者更小的邊距，但上面說到的這些是最常用的，而且有一個特點(diǎn)就是數(shù)值全是偶數(shù)。

以iOS原生態(tài)頁面為例，「設(shè)置」頁面和「通用」頁面都是使用的30px的邊距。

再以微信和支付寶為例，他們的邊距分別是20px和24px。

通常左右邊距最小為20px，這樣的距離可以展示更多的內(nèi)容，不建議比20還小，否則就會使界面內(nèi)容過于擁擠，給用戶的瀏覽帶來視覺負(fù)擔(dān)。30px是非常舒服的距離，是絕大多數(shù)應(yīng)用的首選邊距。

還有一種是不留邊距，通常被應(yīng)用在卡片式布局中圖片通欄顯示，比如站酷APP（當(dāng)然站酷APP也進(jìn)行了改版，首頁已經(jīng)采用了不通欄的卡片式設(shè)計）。這種圖片通欄顯示的設(shè)置方式，更容易讓用戶將注意力集中到每個圖文的內(nèi)容本身，其視覺流在向下瀏覽時因為沒有留白的引導(dǎo)被圖片直接割裂，造成在圖片上停留更長時間。

2.卡片間距

在移動端頁面設(shè)計中卡片式布局是非常常見的布局方式，至于卡片和卡片之間的距離的設(shè)置需要根據(jù)界面的風(fēng)格以及卡片承載信息的多少來界定，通常最小不低于16px，過小的間距會造成用戶的緊張情緒，使用最多的間距是20px、24px、30px、40px，當(dāng)然間距也不宜過大，過大的間距會使界面變得松散，間距的顏色設(shè)置可以與分割線一致，也可以更淺一些。

以iOS（750*1334px）為例，設(shè)置頁面不需要承載太多的信息，因此采用了較大的70px作為卡片間距，有利于減輕用戶的閱讀負(fù)擔(dān)，而通知中心承載了大量的信息，過大的間距會讓瀏覽變得不連貫和界面視覺松散，因此采用了較小的16px作為卡片的間距。

下面來看一下微信的卡片間距設(shè)置的是多少，以及顏色值。

繼續(xù)舉例，下面的兩張截圖分別是巨劃算（卡片間距20px）和拼多多（卡片間距16px）的首頁截圖，這種電商類的APP因為需要承載大量的信息，所以一般間距設(shè)置的都比較小。

總結(jié)：卡片間距的設(shè)置是靈活多變的，一定要根據(jù)產(chǎn)品的氣質(zhì)和實(shí)際需求去設(shè)置，平時也可以多截圖測量一下各類APP的卡片間距都是怎么設(shè)置的，看的多了并融會貫通，卡片間距設(shè)置自然會更加合理，更加得心應(yīng)手。

3.內(nèi)容間距

一款A(yù)PP除了各種欄（狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄）和控件icon就是內(nèi)容了，內(nèi)容的布局形式多種多樣，這里不去探討內(nèi)容具體應(yīng)該如何去布局，我們來說一說內(nèi)容的間距設(shè)置問題。

先來介紹一下格式塔原則中的一個重要的原則就是鄰近性，格式塔鄰近性原則認(rèn)為：單個元素之間的相對距離會影響我們感知它是否以及如何組織在一起，，互相靠近的元素看起來屬于一組，而那些距離較遠(yuǎn)的則自動劃分組外，距離近的關(guān)系緊密。

在UI設(shè)計中內(nèi)容布局時，一定要重視鄰近性原則的運(yùn)用，比如在下面這款輕芒閱讀APP的主界面中，每一個應(yīng)用名稱都遠(yuǎn)離其他圖標(biāo)，與對應(yīng)的圖標(biāo)距離較近，保持親密的關(guān)系，也讓用戶的瀏覽變得更直觀，如果應(yīng)用名稱與上下圖標(biāo)距離相同，就分不出它是屬于上面還是下面，從而讓用戶產(chǎn)生錯亂的感覺。

文章來自：http://www.umanedu.com/