對(duì)于許多設(shè)計(jì)新手來說，如何規(guī)范的完成app ui設(shè)計(jì)是相對(duì)比較棘手的一個(gè)問題，因?yàn)楹芏嗳藢?duì)他的設(shè)計(jì)規(guī)范沒有一個(gè)全面的了解，下面我們跟著小編一起來了解一下app ui設(shè)計(jì)規(guī)范的相關(guān)資料吧。

app ui設(shè)計(jì)規(guī)范

一、關(guān)于設(shè)計(jì)稿尺寸選擇問題

　　iphoneX出現(xiàn)以后，許多渲染圖都以IphoneX作為展示模板，效果很具沉浸性，app界面展現(xiàn)更具魅力，但由于比例發(fā)生變化，那設(shè)計(jì)稿肯定也要相應(yīng)調(diào)整。

　　很多ui設(shè)計(jì)師都是習(xí)慣用750*1334作為設(shè)計(jì)尺寸。這個(gè)中間尺寸向下可以適配640x1136px，向上可以適配1242x2208px和750x1624px/1125x2436px。

　　關(guān)于倍率、分辨率問題，估計(jì)還是有很多設(shè)計(jì)師是了解的云里霧里的，那又應(yīng)該以什么設(shè)計(jì)尺寸來適配熱門的iphoneX呢。

　　對(duì)于習(xí)慣使用750*1334的設(shè)計(jì)師來說，iphoneX設(shè)計(jì)的時(shí)候我們依然可以采用熟悉的尺寸作為模板，只是高度增加了290px，設(shè)計(jì)尺寸為750*1624(@2x)。

　　但要特別注意：狀態(tài)欄的高度要由原來的40px變成了88px，另外底部要預(yù)留68px的主頁(yè)指示器的位置。

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

二、邊距和間距

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

　　1. 全局邊距

　　全局邊距是指頁(yè)面內(nèi)容到屏幕邊緣的距離，整個(gè)應(yīng)用的界面都應(yīng)該以此來進(jìn)行規(guī)范，以達(dá)到頁(yè)面整體視覺效果的統(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í)間。

　　2. 卡片間距

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

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

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

　　3. 內(nèi)容間距

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

　　先來介紹一下格式塔原則中的一個(gè)重要的原則就是鄰近性，格式塔鄰近性原則認(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ò)亂的感覺。

　　三、內(nèi)容布局

　　在 APP 的設(shè)計(jì)中內(nèi)容的布局形式多種多樣，這里介紹最常用的兩種布局形式，列表式布局和卡片式布局。

　　1. 列表式布局

　　列表式布局方式非常普遍，隨便打開一個(gè) APP，基本都存在這種布局方式，其布局形式的特點(diǎn)在于能夠在較小的屏幕中顯示多條信息，用戶通過上下滑動(dòng)的手勢(shì)能獲得大量的信息反饋。而列表也是一種非常容易理解的展示形式。

　　2. 卡片式布局

　　形式非常靈活。其特點(diǎn)在于，每張卡片的內(nèi)容和形式都可以相互獨(dú)立，互不干擾，所以可以在同一個(gè)頁(yè)面中出現(xiàn)不同的卡片承載不同的內(nèi)容。而由于每張卡片都是獨(dú)立存在的，其信息量可以相對(duì)列表更加豐富。

　　在使用卡片式布局的時(shí)候要注意卡片本身一般是白色的，而卡片之間的間距顏色一般是淺灰色，當(dāng)然不同產(chǎn)品風(fēng)格顏色可能不一樣，有些是淺灰色偏藍(lán)等。

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

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

　　在 UI設(shè)計(jì)中，對(duì)于圖片的尺寸和比例沒有嚴(yán)格的規(guī)范，ui設(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 是勾三股四弦五，在攝影中非常常見……

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

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

　　一套 APP圖標(biāo)應(yīng)該具有相同的風(fēng)格，包括造型規(guī)則、圓角大小，線框粗細(xì)，圖形樣式和個(gè)性細(xì)節(jié)等元素都應(yīng)該具有統(tǒng)一的規(guī)范。

　　以上就是小編為你整理的超級(jí)詳細(xì)的app ui設(shè)計(jì)規(guī)范內(nèi)容，相信有了這篇設(shè)計(jì)規(guī)范大全之后，一定可以幫助你更好地完成app ui設(shè)計(jì)哦!