對于許多設計新手來說，如何規范的完成app ui設計是相對比較棘手的一個問題，因為很多人對他的設計規范沒有一個全面的了解，下面我們跟著小編一起來了解一下app ui設計規范的相關資料吧。

app ui設計規范

一、關于設計稿尺寸選擇問題

　　iphoneX出現以后，許多渲染圖都以IphoneX作為展示模板，效果很具沉浸性，app界面展現更具魅力，但由于比例發生變化，那設計稿肯定也要相應調整。

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

　　關于倍率、分辨率問題，估計還是有很多設計師是了解的云里霧里的，那又應該以什么設計尺寸來適配熱門的iphoneX呢。

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

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

（圖片來自網絡）

二、邊距和間距

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

　　1. 全局邊距

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

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

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

　　2. 卡片間距

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

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

（圖片來自網絡）

　　3. 內容間距

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

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

　　在 UI設計中內容布局時，一定要重視鄰近性原則的運用，如果應用名稱與上下圖標距離相同，就分不出它是屬于上面還是下面，從而讓用戶產生錯亂的感覺。

　　三、內容布局

　　在 APP 的設計中內容的布局形式多種多樣，這里介紹最常用的兩種布局形式，列表式布局和卡片式布局。

　　1. 列表式布局

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

　　2. 卡片式布局

　　形式非常靈活。其特點在于，每張卡片的內容和形式都可以相互獨立，互不干擾，所以可以在同一個頁面中出現不同的卡片承載不同的內容。而由于每張卡片都是獨立存在的，其信息量可以相對列表更加豐富。

　　在使用卡片式布局的時候要注意卡片本身一般是白色的，而卡片之間的間距顏色一般是淺灰色，當然不同產品風格顏色可能不一樣，有些是淺灰色偏藍等。

（圖片來自網絡）

　　四、界面圖片設計比例

　　在 UI設計中，對于圖片的尺寸和比例沒有嚴格的規范，ui設計師往往憑借經驗和感覺設置一個看起來不錯的尺寸，但事實上我們是有章可循的。運用科學的手段設置圖片的尺寸，可以獲得最優的方案，常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618(黃金比例)等。

　　這些比例不無根據，它們都和圖片尺寸有關。16:9 是根據人體工程學的研究，發現人的兩只眼睛的視野范圍是一個長寬比例為16:9的長方形，4:3 是勾三股四弦五，在攝影中非常常見……

　　五、建立統一風格的圖標

　　在應用界面的設計中，功能圖標不是單獨的個體，通常是由許多不同的圖標構成整個系列，它們貫穿于整個產品應用的所有頁面并向用戶傳遞信息。

　　一套 APP圖標應該具有相同的風格，包括造型規則、圓角大小，線框粗細，圖形樣式和個性細節等元素都應該具有統一的規范。

　　以上就是小編為你整理的超級詳細的app ui設計規范內容，相信有了這篇設計規范大全之后，一定可以幫助你更好地完成app ui設計哦!