智能手機(jī)的廣泛運(yùn)用，導(dǎo)致大量的app被設(shè)計(jì)出來(lái)。但是有的app用戶體驗(yàn)非常好，但是有的app卻遭到用戶的討厭。今天就讓faceui為大家介紹app ui界面設(shè)計(jì)規(guī)范，APP UI界面設(shè)計(jì)中經(jīng)典的設(shè)計(jì)模式。

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

　　1、尺寸

　　iOS：建議用750x1334px來(lái)做設(shè)計(jì)稿。

　　安卓：就目前的市場(chǎng)來(lái)看，XXHDPI屬于主流機(jī)型；所以推薦使用1080x1920px來(lái)做設(shè)計(jì)稿尺寸，這樣即使你標(biāo)注的是px，程序員也可以很方便的進(jìn)行換算。

　　移動(dòng)端的尺寸比PC端復(fù)雜，關(guān)鍵就在倍率。但也正因?yàn)楸堵实拇嬖?，把大大小小的屏幕拉回到同一水平線，得以保證一套設(shè)計(jì)適應(yīng)各種屏幕。站在這條水平線的角度看，會(huì)發(fā)現(xiàn)它很好理解。

　　2、字體

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

　　顏色值：正文部分黑色灰色字體可根據(jù)自己需要來(lái)取色，通常取三個(gè)不同深度的黑色、深灰、淺灰色字體顏色來(lái)區(qū)分次重點(diǎn)，#333333；#666666；#999999依次由深到淺。

　　大小：長(zhǎng)文本26px，短文本28px，注釋24px。字體大小沒(méi)有嚴(yán)格標(biāo)準(zhǔn)，根據(jù)自己的實(shí)際情況適當(dāng)?shù)娜フ{(diào)節(jié)大小即可。

　　圖片來(lái)源于網(wǎng)絡(luò)

　　3、邊距和間距

　　全局邊距：全局邊距是指頁(yè)面內(nèi)容到屏幕邊緣的距離，整個(gè)應(yīng)用的界面都應(yīng)該以此來(lái)進(jìn)行規(guī)范，以達(dá)到頁(yè)面整體視覺效果的統(tǒng)一。全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀。常用的全局邊距有32px、30px、24px、20px等等，當(dāng)然除了這些還有更大或者更小的邊距。

　　不留邊距：通常被應(yīng)用在卡片式布局中圖片通欄顯示。這種圖片通欄顯示的設(shè)置方式，更容易讓用戶將注意力集中到每個(gè)圖文的內(nèi)容本身，其視覺流在向下瀏覽時(shí)因?yàn)闆](méi)有留白的引導(dǎo)被圖片直接割裂，造成在圖片上停留更長(zhǎng)時(shí)間。

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

　　4、內(nèi)容布局

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

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

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

　　圖片來(lái)源于網(wǎng)絡(luò)

　　APP UI界面設(shè)計(jì)中經(jīng)典的設(shè)計(jì)模式

　　1、導(dǎo)航模式：主要導(dǎo)航模式和次要導(dǎo)航模式。

　　2、表單設(shè)計(jì)模式：登陸表單、注冊(cè)表單、核對(duì)表單、計(jì)算表單、搜索表單、多步驟表單、長(zhǎng)表單。

　　3、表格和列表設(shè)計(jì)模式：只顯示最重要的信息。

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

　　5、APP上的常見工具模塊設(shè)計(jì)模式：采用直接、輕量化的設(shè)計(jì)。

　　6、APP上的圖表化設(shè)計(jì)：借鑒基本圖表的經(jīng)典設(shè)計(jì)理念。

　　7、視覺模態(tài)設(shè)計(jì)：吸引用戶并促使其發(fā)現(xiàn)產(chǎn)品功能。

　　8、反饋與功能可見性功能設(shè)計(jì)：向用戶提供適當(dāng)、清晰且及時(shí)的反饋。

　　9、APP上的幫助與引導(dǎo)類界面設(shè)計(jì)：應(yīng)該易于用戶學(xué)習(xí)，讓用戶快速掌握應(yīng)用使用方法。

　　10、反模式設(shè)計(jì)：標(biāo)新立異、隱喻錯(cuò)位、愚蠢的對(duì)話框、圖表垃圾、按鈕海。

　　以上就是faceui為大家介紹的關(guān)于app ui界面設(shè)計(jì)的相關(guān)內(nèi)容。其實(shí)要想做好一款app，ui界面設(shè)計(jì)是非常關(guān)鍵的，直接關(guān)系到用戶對(duì)app的使用感受。