移動端ui界面設(shè)計規(guī)范有什么呢？你是不是也非常的想要學(xué)習(xí)呢？就徐濤跟隨著我們一起看看下面的內(nèi)容，相信大家已經(jīng)等不及想要了解了吧，具體如下所示，一起來看看吧。

　　1、界面設(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的切片。

　　（圖片來自網(wǎng)絡(luò)）

　　2、邊距和間距

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

　　1. 全局邊距

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

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

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

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

　　還有一種是不留邊距，通常被應(yīng)用在卡片式布局中圖片通欄顯示，這種圖片通欄顯示的設(shè)置方式，更容易讓用戶將注意力集中到每個圖文的內(nèi)容本身，其視覺流在向下瀏覽時因為沒有留白的引導(dǎo)被圖片直接割裂，造成在圖片上停留更長時間。

　　（圖片來自網(wǎng)絡(luò)）

　　2. 卡片間距

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

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

　　3. 內(nèi)容間距

　　一款 APP 除了各種欄（狀態(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è)計規(guī)范有什么呢？相信很多的朋友們都全面的掌握住了吧，總之，希望大家看完上面的內(nèi)容之后，將會有全面的收獲的。