智能手機的廣泛運用，導致大量的app被設計出來。但是有的app用戶體驗非常好，但是有的app卻遭到用戶的討厭。今天就讓faceui為大家介紹app ui界面設計規范，APP UI界面設計中經典的設計模式。

　　app ui界面設計規范

　　1、尺寸

　　iOS：建議用750x1334px來做設計稿。

　　安卓：就目前的市場來看，XXHDPI屬于主流機型；所以推薦使用1080x1920px來做設計稿尺寸，這樣即使你標注的是px，程序員也可以很方便的進行換算。

　　移動端的尺寸比PC端復雜，關鍵就在倍率。但也正因為倍率的存在，把大大小小的屏幕拉回到同一水平線，得以保證一套設計適應各種屏幕。站在這條水平線的角度看，會發現它很好理解。

　　2、字體

　　字體：iPhone上的字體英文為：HelveticaNeue，中文Mac下用的是黑體，Win下通常用蘋方，也可以用華文黑體。所有字體要用雙數字號。

　　顏色值：正文部分黑色灰色字體可根據自己需要來取色，通常取三個不同深度的黑色、深灰、淺灰色字體顏色來區分次重點，#333333；#666666；#999999依次由深到淺。

　　大小：長文本26px，短文本28px，注釋24px。字體大小沒有嚴格標準，根據自己的實際情況適當的去調節大小即可。

　　圖片來源于網絡

　　3、邊距和間距

　　全局邊距：全局邊距是指頁面內容到屏幕邊緣的距離，整個應用的界面都應該以此來進行規范，以達到頁面整體視覺效果的統一。全局邊距的設置可以更好的引導用戶豎向向下閱讀。常用的全局邊距有32px、30px、24px、20px等等，當然除了這些還有更大或者更小的邊距。

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

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

　　4、內容布局

　　在app的設計中內容的布局形式多種多樣，最常用的兩種布局形式就是列表式布局和卡片式布局。

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

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

　　圖片來源于網絡

　　APP UI界面設計中經典的設計模式

　　1、導航模式：主要導航模式和次要導航模式。

　　2、表單設計模式：登陸表單、注冊表單、核對表單、計算表單、搜索表單、多步驟表單、長表單。

　　3、表格和列表設計模式：只顯示最重要的信息。

　　4、搜索、分類和過濾：讓這些功能易于使用。

　　5、APP上的常見工具模塊設計模式：采用直接、輕量化的設計。

　　6、APP上的圖表化設計：借鑒基本圖表的經典設計理念。

　　7、視覺模態設計：吸引用戶并促使其發現產品功能。

　　8、反饋與功能可見性功能設計：向用戶提供適當、清晰且及時的反饋。

　　9、APP上的幫助與引導類界面設計：應該易于用戶學習，讓用戶快速掌握應用使用方法。

　　10、反模式設計：標新立異、隱喻錯位、愚蠢的對話框、圖表垃圾、按鈕海。

　　以上就是faceui為大家介紹的關于app ui界面設計的相關內容。其實要想做好一款app，ui界面設計是非常關鍵的，直接關系到用戶對app的使用感受。