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

　　1、界面設計尺寸及欄高度

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

　　（圖片來自網絡）

　　2、邊距和間距

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

　　1. 全局邊距

　　全局邊距是指頁面內容到屏幕邊緣的距離，整個應用的界面都應該以此來進行規范，以達到頁面整體視覺效果的統一。全局邊距的設置可以更好的引導用戶豎向向下閱讀。

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

　　以 iOS 原生態頁面為例，「設置」頁面和「通用」頁面都是使用的30px的邊距。

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

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

　　（圖片來自網絡）

　　2. 卡片間距

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

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

　　3. 內容間距

　　一款 APP 除了各種欄（狀態欄、導航欄、標簽欄、工具欄）和控件 icon 就是內容了，內容的布局形式多種多樣，這里不去探討內容具體應該如何去布局，我們來說一說內容的間距設置問題。

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

　　移動端ui界面設計規范有什么呢？相信很多的朋友們都全面的掌握住了吧，總之，希望大家看完上面的內容之后，將會有全面的收獲的。