資源描述:
《北京天健醫(yī)院iOS和Android的app界面設(shè)計規(guī)范》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、記錄一下iOS和Andoird的界面設(shè)計規(guī)范,方便進(jìn)行標(biāo)準(zhǔn)的產(chǎn)品設(shè)計,并與設(shè)計師順暢溝通iOS篇界面尺寸設(shè)備分辨率狀態(tài)欄高度導(dǎo)航欄高度標(biāo)簽欄高度iPhone6plus1242×2208px60px132px147pxiPhone6750×1334px40px88px98pxiPhone5/5s/5c640×1136px40px88px98pxiPhone4/4s640×960px40px88px98pxiPad3/4/Air/Air2/mini22048×1536px40px88px98pxiPad1/21024×768px20px44px49pxiPadmini1024
2、×768px20px44px49pxPaste_Image.png圖標(biāo)尺寸設(shè)備AppStore程序應(yīng)用主屏幕spotlight搜索標(biāo)簽欄工具欄和導(dǎo)航欄iPhone6plus1024*1024px180*180px144×144px87×87px75*75px66*66pxiPhone61024*1024px120*120px144×144px58*58px75*75px44*44pxiPhone5/5s/5c1024*1024px120*120px144×144px58*58px75*75px44*44pxiPhone4/4s1024*1024px120*120px144
3、×144px58*58px75*75px44*44pxiPad3/4/Air/Air2/mini21024*1024px180*180px144×144px100*100px50*50px44*44pxiPad1/21024*1024px90*90px72*72px50*50px25*25px22*22pxiPadmini1024*1024px90*90px72*72px50*50px25*25px22*22px字體iPhone上的字體英文為:HelveticaNeue至于中文,Mac下用的是黑體-簡,Win下則為華文黑體,所有字體要用雙數(shù)字號。百度用戶體驗部做過一個小調(diào)
4、查,對于app字體大小的調(diào)查結(jié)論如下:Paste_Image.png顏色值IOS顏色值取RGB各顏色的值比如某個色值,給予IOS開發(fā)的色值為R:12G:34B:56給出的值就是12,34,56(有時也要根據(jù)開發(fā)的習(xí)慣,有時也用十六進(jìn)制)內(nèi)部設(shè)計1、所有能點擊的圖片不得小于44px(Retina需要88px)2、單獨存在的部件必須是雙數(shù)尺寸3、兩倍圖以@2x作為命名后綴4、充分考慮每個控制按鈕在4中狀態(tài)下的樣式,如圖Paste_Image.pngAndroid篇界面尺寸android的尺寸眾多,建議使用分辨率為720x1280的尺寸設(shè)計。這個尺寸720x1280中顯示完美,
5、在1080x1920中看起來也比較清晰;切圖后的圖片文件大小也適中,應(yīng)用的內(nèi)存消耗也不會過高。狀態(tài)欄高度:50px導(dǎo)航欄高度:96px標(biāo)簽欄高度:96pxAndroid最近出的手機(jī)都幾乎去掉了實體鍵,把功能鍵移到了屏幕中,當(dāng)然高度也是和標(biāo)簽欄一樣的:96px內(nèi)容區(qū)域高度為:1038px(1280-50-96-96=1038)圖表尺寸屏幕大小啟動圖標(biāo)操作欄圖標(biāo)上下文圖標(biāo)系統(tǒng)通知圖標(biāo)(白色)最細(xì)筆畫320×480px48×48px32×32px16×16px24×24px不小于2px480×800px/480×854px/540×960px72×72px48×48px24×2
6、4px36×36px不小于3px720×1280px48×48dp32×32dp16×16dp24×24dp不小于2dp1080×1920px144×144px96×96px48×48px72×72px不小于6pxps:Android設(shè)計規(guī)范中,使用的單位是dp,dp在安卓機(jī)上不同的密度轉(zhuǎn)換后的px是不一樣的字體Android上的字體為:Droidsansfallback,是谷歌自己的字體,與微軟雅黑很像。Android的字體大小調(diào)查結(jié)論是:Paste_Image.png顏色值A(chǔ)ndroid顏色值取值為十六進(jìn)制的值比如一綠色的值,給開發(fā)的值為#5bc43e