您好,歡迎來到一站式眾包服務平臺-威客牛網(wǎng)
當前位置:威客牛首頁 > 知識百科 > IT軟件 > App開發(fā) > app界面設計風格設計規(guī)范

app界面設計風格設計規(guī)范

2022-12-04作者:網(wǎng)友投稿
剛開始接觸UI的時候,碰到的最多的就是尺寸問題,什么畫布要建多大,文字該用多大才合適,我要做幾套界面才可以?什么七七八八的也著實讓人有些頭疼。以下是贏在威客網(wǎng)小編整理的app界面設計風格設計規(guī)范。

廢話不多說,希望大家耐心看完后,不要再糾結(jié)于尺寸相關(guān)的東西了。

IOS一、尺寸及分辨率


iPhone界面尺寸:320*480、640*960、640*1136

iPad界面尺寸:1024*768、2048*1536

單位:像素72dpi,在設計的時候并不是每個尺寸都要做一套,尺寸按自己的手機來設計,比較方便預覽效果,一般用640*960或者640*1136的尺寸來設計。

Ps:作圖的時候確保都是用形狀工具(快捷鍵:U)畫的,這樣更方便后期的切圖或者尺寸變更。

IOS二、界面基本組成元素

iPhone的app界面一般由四個元素組成,分別是:狀態(tài)欄、導航欄、主菜單欄、內(nèi)容區(qū)域。

這里取用640*960的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸。

狀態(tài)欄:就是我們經(jīng)常說的信號、運營商、電量等顯示手機狀態(tài)的區(qū)域,其高度為:40px

導航欄:顯示當前界面的名稱,包含相應的功能或者頁面間的跳轉(zhuǎn)按鈕,其高度為:88px

主菜單欄:類似于頁面的主菜單,提供整個應用的分類內(nèi)容的快速跳轉(zhuǎn),其高度為:98px

內(nèi)容區(qū)域:展示應用提供的相應內(nèi)容,整個應用中布局變更最為頻繁,其高度為:734px

至于我們經(jīng)常說的iPhone5/5s的640*1136的尺寸,其實就是中間的內(nèi)容區(qū)域高度增加到910px。

PS:在最新的iOS7的風格中,蘋果已經(jīng)開始慢慢弱化狀態(tài)欄的存在,將狀態(tài)欄和導航欄合在了一起,但是再怎么變,尺寸高度也還是沒有變的,只不過大家在設計iOS7風格的界面的時候多多注意下~

IOS三、字體大小

Phone上的字體英文為:HelveticaNeue 。至于中文Mac下用的是黑體,Win下則為華文黑體。

其實還有個更簡單的方法就是找你覺得好的app應用,手機截圖后放進PS自己比對調(diào)節(jié)字體大小咯。

總之,方法是自己找到的,想辦法解決問題,自己實踐,比別人告訴你印象更深刻不是么?

Android一、尺寸及分辨率

Android界面尺寸:480*800、720*1280、1080*1920。[單位:像素]

Android比iPhone的寸尺多了很多套,建議取用720*1280這個尺寸,這個尺寸720*1280中顯示完美,在1080*1920中看起來比較清晰,切圖后的圖片文件大小也適中,應用的內(nèi)存消耗也不會過高。

Android二、界面基本組成元素


Android的app界面和iPhone的基本相同:狀態(tài)欄、導航欄、主菜單、內(nèi)容區(qū)域。

Android中我們?nèi)∮玫?20*1280的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸。

狀態(tài)欄高度為:50px

導航欄高度為:96px

主菜單欄高度為:96px


內(nèi)容區(qū)域高度為:1038px(1280-50-96-96=1038)

Android最近出的手機都幾乎去掉了實體鍵,把功能鍵移到了屏幕中,當然高度也是和菜單欄一樣的:96px

Ps:寫之前我翻了好多關(guān)于Android的界面尺寸教程,都沒找到像iOS一樣具體的規(guī)范,或許因為在安卓中這些控件的高度都能用程序自定義,都沒有提到具體的尺寸數(shù)值,所以就自己找了Android的設計規(guī)范,尺寸都是自己在PS中量的。

Android為了在界面上區(qū)別于iOS,Android4.0開始提出的一套HOLO的UI風格一些app的最新版本都采用了這一風格,這一風格最明顯的變化就是將下方的主菜單移到了導航欄下面,這樣的方式解決了現(xiàn)在很多手機去除實體鍵后再屏幕中顯示而出現(xiàn)的雙底欄的尷尬情景。

Android三、字體大小

Android 上的字體為:Droid sans fallback,是谷歌自己的字體,與微軟雅黑很像。

同樣,百度用戶體驗的調(diào)查中,可以看出用戶可接受的文字相應問題。

具體大小,還是那句話,找自己喜歡的app界面,手機截圖后放進PS自己比對調(diào)節(jié)字體大小,切記,一定是高清截圖。
免費查詢商標注冊