iOS和Android的app界面設(shè)計(jì)規(guī)范

記錄一下iOS和Andoird的界面設(shè)計(jì)規(guī)范,方便進(jìn)行標(biāo)準(zhǔn)的產(chǎn)品設(shè)計(jì)哈垢,并與設(shè)計(jì)師順暢溝通

iOS篇

界面尺寸

設(shè)備分辨率狀態(tài)欄高度導(dǎo)航欄高度標(biāo)簽欄高度

iPhone6 plus1242×2208 px60px132px147px

iPhone6750×1334 px40px88px98px

iPhone5/5s/5c640×1136 px40px88px98px

iPhone4/4s640×960 px40px88px98px

iPad3/4/Air/Air2/mini22048×1536 px40px88px98px

iPad1/21024×768 px20px44px49px

iPad mini1024×768 px20px44px49px

Paste_Image.png

圖標(biāo)尺寸

設(shè)備App Store程序應(yīng)用主屏幕spotlight搜索標(biāo)簽欄工具欄和導(dǎo)航欄

iPhone6 plus1024*1024px180*180px144×144px87×87 px75*75px66*66px

iPhone61024*1024px120*120px144×144px58*58px75*75px44*44px

iPhone5/5s/5c1024*1024px120*120px144×144px58*58px75*75px44*44px

iPhone4/4s1024*1024px120*120px144×144px58*58px75*75px44*44px

iPad3/4/Air/Air2/mini21024*1024px180*180px144×144px100*100px50*50px44*44px

iPad1/21024*1024px90*90px72*72px50*50px25*25px22*22px

iPad mini1024*1024px90*90px72*72px50*50px25*25px22*22px

字體

iPhone 上的字體英文為: HelveticaNeue 至于中文轰传,Mac下用的是黑體-簡柔昼,Win下則為華文黑體递览,所有字體要用雙數(shù)字號拟淮。

百度用戶體驗(yàn)部做過一個小調(diào)查, 對于app字體大小的調(diào)查結(jié)論如下:

Paste_Image.png

顏色值

IOS顏色值取 RGB各顏色的值比如某個色值弹澎,給予IOS開發(fā)的色值為 R:12 G:34 B:56 給出的值就是 12,34,56(有時也要根據(jù)開發(fā)的習(xí)慣朴下,有時也用十六進(jìn)制)

內(nèi)部設(shè)計(jì)

1、所有能點(diǎn)擊的圖片不得小于44px(Retina需要88px)

2苦蒿、單獨(dú)存在的部件必須是雙數(shù)尺寸

3殴胧、兩倍圖以@2x作為命名后綴

4、充分考慮每個控制按鈕在4中狀態(tài)下的樣式佩迟,如圖

Paste_Image.png

Android篇

界面尺寸

android的尺寸眾多团滥,建議使用分辨率為720x1280 的尺寸設(shè)計(jì)。這個尺寸720x1280中顯示完美报强,在1080x1920 中看起來也比較清晰灸姊;切圖后的圖片文件大小也適中,應(yīng)用的內(nèi)存消耗也不會過高秉溉。

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

導(dǎo)航欄高度:96 px

標(biāo)簽欄高度:96 px

Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵力惯,把功能鍵移到了屏幕中,當(dāng)然高度也是和標(biāo)簽欄一樣的:96 px

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

圖表尺寸

屏幕大小啟動圖標(biāo)操作欄圖標(biāo)上下文圖標(biāo)系統(tǒng)通知圖標(biāo)(白色)最細(xì)筆畫

320×480 px48×48 px32×32 px16×16 px24×24 px不小于2 px

480×800px /480×854px /540×960px72×72 px48×48 px24×24 px36×36 px不小于3 px

720×1280 px48×48 dp32×32 dp16×16 dp24×24 dp不小于2 dp

1080×1920 px144×144 px96×96 px48×48 px72×72 px不小于6 px

ps: Android設(shè)計(jì)規(guī)范中坚嗜, 使用的單位是dp夯膀, dp在安卓機(jī)上不同的密度轉(zhuǎn)換后的px 是不一樣的

字體

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

Android的字體大小調(diào)查結(jié)論是:

Paste_Image.png

顏色值

Android顏色值取值為十六進(jìn)制的值 比如一綠色的值蝴蜓, 給開發(fā)的值為 #5bc43e

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末碟绑,一起剝皮案震驚了整個濱河市俺猿,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌格仲,老刑警劉巖押袍,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異凯肋,居然都是意外死亡谊惭,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進(jìn)店門侮东,熙熙樓的掌柜王于貴愁眉苦臉地迎上來圈盔,“玉大人,你說我怎么就攤上這事悄雅∏茫” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵宽闲,是天一觀的道長众眨。 經(jīng)常有香客問我,道長容诬,這世上最難降的妖魔是什么娩梨? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮览徒,結(jié)果婚禮上姚建,老公的妹妹穿的比我還像新娘。我一直安慰自己吱殉,他們只是感情好掸冤,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著友雳,像睡著了一般稿湿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上押赊,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天饺藤,我揣著相機(jī)與錄音,去河邊找鬼流礁。 笑死涕俗,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的神帅。 我是一名探鬼主播再姑,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼找御!你這毒婦竟也來了元镀?” 一聲冷哼從身側(cè)響起绍填,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎栖疑,沒想到半個月后讨永,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡遇革,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年卿闹,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片萝快。...
    茶點(diǎn)故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡比原,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出杠巡,到底是詐尸還是另有隱情量窘,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布氢拥,位于F島的核電站蚌铜,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏嫩海。R本人自食惡果不足惜冬殃,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望叁怪。 院中可真熱鬧审葬,春花似錦、人聲如沸奕谭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽血柳。三九已至官册,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間难捌,已是汗流浹背膝宁。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留根吁,地道東北人员淫。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像击敌,于是被迫代替她去往敵國和親介返。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 記錄一下iOS和Andoird的界面設(shè)計(jì)規(guī)范愚争,方便進(jìn)行標(biāo)準(zhǔn)的產(chǎn)品設(shè)計(jì)映皆,并與設(shè)計(jì)師順暢溝通 iOS篇 界面尺寸 設(shè)備...
    o0_0o閱讀 2,330評論 0 51
  • 記錄一下iOS和Andoird的界面設(shè)計(jì)規(guī)范挤聘,方便進(jìn)行標(biāo)準(zhǔn)的產(chǎn)品設(shè)計(jì)轰枝,并與設(shè)計(jì)師順暢溝通 iOS篇 界面尺寸 設(shè)備...
    彌果閱讀 916評論 0 3
  • 記錄一下iOS和Andoird的界面設(shè)計(jì)規(guī)范捅彻,方便進(jìn)行標(biāo)準(zhǔn)的產(chǎn)品設(shè)計(jì),并與設(shè)計(jì)師順暢溝通 iOS篇 界面尺寸 設(shè)備...
    小麥kaneda閱讀 1,525評論 2 25
  • 記錄一下iOS和Andoird的界面設(shè)計(jì)規(guī)范鞍陨,方便進(jìn)行標(biāo)準(zhǔn)的產(chǎn)品設(shè)計(jì)步淹,并與設(shè)計(jì)師順暢溝通 iOS篇 界面尺寸 | ...
    jasmine_sunny閱讀 506,387評論 71 1,224
  • sina 負(fù)載均衡:將相同的引用部署到多臺機(jī)器上。在集群前增加負(fù)載均衡設(shè)備诚撵,實(shí)現(xiàn)流量分發(fā)缭裆。意思是將負(fù)載(工作任務(wù)、...
    橙小汁閱讀 598評論 1 4