俗話說沒有規(guī)矩不成方圓，這句話用在UI設(shè)計(jì)上也是一樣的，所以做UI設(shè)計(jì)的時(shí)候除了要有創(chuàng)意之外，還要注意規(guī)范，下面我們跟隨小編一起來了解一下移動(dòng)端ui設(shè)計(jì)規(guī)范的相關(guān)資料吧。

移動(dòng)端ui設(shè)計(jì)規(guī)范

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

目前主流的 iOS 設(shè)備無論是欄高度還是應(yīng)用圖標(biāo)，設(shè)計(jì)師提供給開發(fā)人員的切片大小，前者始終是后者的1.5倍，并分別以@3x和@2x在文件名結(jié)尾命名，程序再根據(jù)不同分辨率自動(dòng)加載@3x或者@2x的切片。

二、邊距和間距

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

1. 全局邊距

全局邊距是指頁面內(nèi)容到屏幕邊緣的距離，整個(gè)應(yīng)用的界面都應(yīng)該以此來進(jìn)行規(guī)范，以達(dá)到頁面整體視覺效果的統(tǒng)一。全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀。在實(shí)際應(yīng)用中應(yīng)該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距，讓邊距成為界面的一種設(shè)計(jì)語言，常用的全局邊距有32px、30px、24px、20px等等，當(dāng)然除了這些還有更大或者更小的邊距，但上面說到的這些是最常用的，而且有一個(gè)特點(diǎn)就是數(shù)值全是偶數(shù)。

通常左右邊距最小為20px，這樣的距離可以展示更多的內(nèi)容，不建議比20還小，否則就會(huì)使界面內(nèi)容過于擁擠，給用戶的瀏覽帶來視覺負(fù)擔(dān)。30px是非常舒服的距離，是絕大多數(shù)應(yīng)用的首選邊距。還有一種是不留邊距，通常被應(yīng)用在卡片式布局中圖片通欄顯示。這種圖片通欄顯示的設(shè)置方式，更容易讓用戶將注意力集中到每個(gè)圖文的內(nèi)容本身，其視覺流在向下瀏覽時(shí)因?yàn)闆]有留白的引導(dǎo)被圖片直接割裂，造成在圖片上停留更長(zhǎng)時(shí)間。

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

2. 卡片間距

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

3. 內(nèi)容間距

除了各種欄(狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄)和控件 icon 就是內(nèi)容了，內(nèi)容的布局形式多種多樣，這里不去探討內(nèi)容具體應(yīng)該如何去布局，我們來說一說內(nèi)容的間距設(shè)置問題。格式塔鄰近性原則認(rèn)為：?jiǎn)蝹€(gè)元素之間的相對(duì)距離會(huì)影響我們感知它是否以及如何組織在一起，互相靠近的元素看起來屬于一組，而那些距離較遠(yuǎn)的則自動(dòng)劃分組外，距離近的關(guān)系緊密。在 UI設(shè)計(jì)中內(nèi)容布局時(shí)，一定要重視鄰近性原則的運(yùn)用，如果應(yīng)用名稱與上下圖標(biāo)距離相同，就分不出它是屬于上面還是下面，從而讓用戶產(chǎn)生錯(cuò)亂的感覺。

三、界面圖片設(shè)計(jì)比例

在 UI設(shè)計(jì)中，對(duì)于圖片的尺寸和比例沒有嚴(yán)格的規(guī)范，設(shè)計(jì)師往往憑借經(jīng)驗(yàn)和感覺設(shè)置一個(gè)看起來不錯(cuò)的尺寸，但事實(shí)上我們是有章可循的。運(yùn)用科學(xué)的手段設(shè)置圖片的尺寸，可以獲得最優(yōu)的方案，常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618(黃金比例)等。

這些比例不無根據(jù)，它們都和圖片尺寸有關(guān)。16:9 是根據(jù)人體工程學(xué)的研究，發(fā)現(xiàn)人的兩只眼睛的視野范圍是一個(gè)長(zhǎng)寬比例為16:9的長(zhǎng)方形，4:3 是勾三股四弦五，在攝影中非常常見。

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

四、建立統(tǒng)一風(fēng)格的圖標(biāo)

在應(yīng)用界面設(shè)計(jì)中，功能圖標(biāo)不是單獨(dú)的個(gè)體，通常是由許多不同的圖標(biāo)構(gòu)成整個(gè)系列，它們貫穿于整個(gè)產(chǎn)品應(yīng)用的所有頁面并向用戶傳遞信息。

五、切圖規(guī)范

當(dāng)界面設(shè)計(jì)定稿之后，設(shè)計(jì)師需要對(duì)圖標(biāo)進(jìn)行切片提供給開發(fā)工程師，通常我們只需要對(duì) icon 進(jìn)行切圖即可，文字、線條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的，例如搜索框只需要在標(biāo)注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開發(fā)工程師可以用代碼實(shí)現(xiàn)這種效果。

六、設(shè)計(jì)稿標(biāo)注

當(dāng)界面設(shè)計(jì)定稿之后，設(shè)計(jì)師需要對(duì)界面進(jìn)行標(biāo)注給開發(fā)工程師在還原界面時(shí)進(jìn)行參考。借助一些專業(yè)的標(biāo)注工具有利于我們提高工作效率，常用的標(biāo)注工具有 Mark Man 或 PX Cook。

在一份設(shè)計(jì)稿中需要標(biāo)注的內(nèi)容是文字的字號(hào)大小、粗細(xì)、顏色、不透明度;界面的背景顏色、不透明度;各個(gè)圖標(biāo)、列表、文字之間的間距。

相信有了小編為你整理的這一份超級(jí)詳細(xì)的移動(dòng)端ui設(shè)計(jì)規(guī)范大全之后，一定可以幫助你在做移動(dòng)端的UI設(shè)計(jì)界面時(shí)更規(guī)范話的處理細(xì)節(jié)哦!