IOS和安卓ui設(shè)計常用尺寸及基本知識

iOSapp圖標的圓角半徑是多少朽寞?

(注:現(xiàn)在IOS圖標是不需要再畫圓角了锨推,直接方形就OK)

括弧里面是對應(yīng)的半徑大小

App store(Retina屏)?─────────────1024px(160px)

iTunes Artworkicon─────────────512px (90px)

Appicon(iPhone4s) ──────────────────114px (20px)

Appicon(iPhone5s)?──────────────────120px(22px)

App icon(iPad) ────────────────────72px (12px)

App icon(iPhone 3G/3GS) ───────────────57px(10px)

Spotlight/Settings icon icon(iPhone4) ──────────58px (10px)

Spotlight/Settings icon icon(iPhone 3G/3GS/iPad) ──── 29px (9px)

iPhone浮驳、iPad搜囱、AndroidUI常用設(shè)計尺寸

iPhone:

—————————————————————–

APPLE APP STORE ICON:512 x 512 PX ?(圓角弧度80px)

iPhone 5?App Icon:120 x 120?PX ? (圓角弧度22px)

iPhone 4 App Icon:114 x 114 PX ?(圓角弧度20px)

iPhone 3GS App Icon:57 x 57 PX ?(圓角弧度22px)

iPhone 5 326ppi 4英寸1136*640PX

iPhone 4 AppUI:960 x 640PX (設(shè)計時,高度還需要減去狀態(tài)欄40PX)

iPhone 3GS AppUI:480x 320PX

iPhone的設(shè)計尺寸(ios尺寸)

iPhone界面尺寸:

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

iPhone6 plus設(shè)計版1242 × 220860px132px146px

iOS APP設(shè)計一稿支持iPhone5/iPhone6/Plus設(shè)計流程

iPhone6 plus物理版1080 × 192054px132px146px

iOS APP設(shè)計一稿支持iPhone5/iPhone6/Plus設(shè)計流程

iPhone6750 × 133440px88px98px(88px)

iPhone5s640 × 113640px88px98px(88px)

iPhone5c640 × 113640px88px98px(88px)

iPhone5640 × 113640px88px98px(88px)

iPhone4s640 × 96040px88px98px(88px)

iPhone4640 × 96040px88px98px(88px)

iPhone圖標尺寸:

系統(tǒng)分辨率圓角大小

iOS 6-90px – 1024px約為圖標寬度 × 0.175

iOS 7+90px – 1024px約為圖標寬度 × 0.225

AssetiPhone 6 Plus (@3x)iPhone 6 and iPhone 5 (@2x)iPhone 4s (@2x)iPad and iPad mini (@2x)iPad 2 and iPad mini (@1x)

App icon

(required for allapps)180 × 180120 × 120120 × 120152 × 15276 × 76

App icon for the App Store

(required for allapps)1024 × 10241024 × 10241024 × 10241024 × 10241024 × 1024

Launch file or image

(required for all apps)Use a launch file

(see Launch Images)For iPhone 6, use a launch file

(see Launch Images)

For iPhone 5, 640 × 1136640 × 9601536 × 2048 (portrait)

2048 × 1536 (landscape)768 × 1024 (portrait)

1024 × 768 (landscape)

Spotlight search results icon

(recommended)120 × 12080 × 8080 × 8080 × 8040 × 40

Settings icon

(recommended)87 × 8758 × 5858 × 5858 × 5829 × 29

Toolbar and navigation bar icon

(optional)About 66 × 66About 44 × 44About 44 × 44About 44 × 44About 22 × 22

Tab bar icon

(optional)About 75 × 75

(maximum: 144 × 96)About 50 × 50

(maximum: 96 × 64)About 50 × 50

(maximum: 96 × 64)About 50 × 50

(maximum: 96 × 64)About 25 × 25

(maximum: 48 × 32)

Default Newsstand cover icon for the App Store

(required for Newsstand apps)At least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 512 pixels on the longest edge

Web clip icon

(recommended for web apps and websites)180 × 180120 × 120120 × 120152 × 15276 × 76

iPad的設(shè)計尺寸

iPad界面尺寸:

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

iPad6/iPad Air22048 × 153640px88px98px

iPad5/iPad Air/ipad mini 22048 × 153640px88px98px

iPad4/ipad mini2048 × 153640px88px98px

iPad3/the new iPad2048 × 153640px88px98px

iPad21024 × 76820px44px49px

iPad11024 × 76820px44px49px

iPad Mini1024 × 76820px44px49px

iPad圖標尺寸:

系統(tǒng)分辨率圓角大小

iOS 6-90px – 1024px約為圖標寬度 × 0.175

iOS 7+90px – 1024px約為圖標寬度 × 0.225

AssetiPhone 6 Plus (@3x)iPhone 6 and iPhone 5 (@2x)iPhone 4s (@2x)iPad and iPad mini (@2x)iPad 2 and iPad mini (@1x)

App icon

(required for all apps)180 × 180120 × 120120 × 120152 × 15276 × 76

App icon for the App Store

(required for all apps)1024 × 10241024 × 10241024 × 10241024 × 10241024 × 1024

Launch file or image

(required for all apps)Use a launch file

(see Launch Images)For iPhone 6, use a launch file

(see Launch Images)

For iPhone 5, 640 × 1136640 × 9601536 × 2048 (portrait)

2048 × 1536 (landscape)768 × 1024 (portrait)

1024 × 768 (landscape)

Spotlight search results icon

(recommended)120 × 12080 × 8080 × 8080 × 8040 × 40

Settings icon

(recommended)87 × 8758 × 5858 × 5858 × 5829 × 29

Toolbar and navigation bar icon

(optional)About 66 × 66About 44 × 44About 44 × 44About 44 × 44About 22 × 22

Tab bar icon

(optional)About 75 × 75

(maximum: 144 × 96)About 50 × 50

(maximum: 96 × 64)About 50 × 50

(maximum: 96 × 64)About 50 × 50

(maximum: 96 × 64)About 25 × 25

(maximum: 48 × 32)

Default Newsstand cover icon for the App Store

(required for Newsstand apps)At least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 1024 pixels on the longest edgeAt least 512 pixels on the longest edge

Web clip icon

(recommended for web apps and websites)180 × 180120 × 120120 × 120152 × 15276 × 76

Android的設(shè)計尺寸:

屏幕尺寸

指實際的物理尺寸绍赛,為屏幕對角線的測量。

為了簡單起見钾菊,Android把實際屏幕尺寸分為四個廣義的大小:小侠畔,正常结缚,大,特大软棺。

像素(PX)

代表屏幕上一個物理的像素點代表屏幕上一個物理的像素點红竭。

屏幕密度

為解決Android設(shè)備碎片化,引入一個概念DP喘落,也就是密度茵宪。指在一定尺寸的物理屏幕上顯示像素的數(shù)量,通常指分辨率瘦棋。 為了簡單起見稀火,Android把屏幕密度分為了四個廣義的大小:低(120dpi)赌朋、中(160dpi)凰狞、高(240dpi)和超高(320dpi) 像素= DP * ( DPI / 160 ) 例如,在一個240dpi的屏幕里沛慢,1DP等于1.5PX赡若。

于設(shè)計來說,選取一個合適的尺寸作為正常大小和中等屏幕密度(尺寸的選取依據(jù)打算適配的硬件团甲,建議參考現(xiàn)主流硬件分辨率)逾冬,然后向下和向上 做小、大躺苦、特大和低身腻、高、超高的尺寸與密度匹厘。

典型的設(shè)計尺寸

? 320dp:一個普通的手機屏幕(240X320嘀趟,320×480,480X800)

? 480dp:一個中間平板電腦像(480×800)

? 600dp:7寸平板電腦(600×1024)

? 720dp:10寸平板電腦(720×1280愈诚,800×1280)

對于分辨率繁多的android設(shè)備去件,為了方便原生應(yīng)用的界面適配,Google按照dpi大小將它們分成了4中模式(MDPI扰路、HDPI、XHDPI和XXHDPI倔叼,現(xiàn)在?Android 4.3 已經(jīng)有了XXXHDPI):

屏幕DIP類型: ? ? ?xxhdpi ? ? ? ? xhdpi ? ? ? ?hdpi ? ? ? ? ?mdpi ? ? ? ? ? ldpi

ICON尺寸: ? ? 144*144 ? ? ? ? 96*96 ? ? ? ? 72*72 ? ? ?48*48 ? ? ? 36*36

隨便說一下現(xiàn)在安卓設(shè)計稿尺寸設(shè)定:

一般PS新建 1080 x 1920的尺寸汗唱,也就是對應(yīng)該安卓的xxhdpi ,所以切圖也是放入程序中的xxhdpi文件夾 下。所以基本上一套圖就可以了丈攒,如果時間充足哩罪,做多套尺寸的圖自然沒什么壞處授霸。雖然只出大尺寸的圖,但設(shè)計時一定好考慮好小屏幕適配問題际插,還要對部分切圖進行調(diào)整重切碘耳,因為有些圖等比縮小時會出現(xiàn)糊,或不好看的現(xiàn)象框弛。

安卓的點九圖 點9切法 查看這篇文章:http://www.miued.com/2074/

Android安卓系統(tǒng)dp/sp/px換算表

名稱分辨率比率 rate (針對320px)比率 rate (針對640px)比率 rate (針對750px)

idpi240 × 3200.750.3750.32

mdpi320 × 48010.50.4267

hdpi480 × 8001.50.750.64

xhdpi720 × 12802.251.1251.042

xxhdpi1080 × 19203.3751.68751.5

主流Android手機分辨率和尺寸

設(shè)備分辨率尺寸設(shè)備分辨率尺寸

三星Galaxy S34.8英寸720 × 1280三星Galaxy S45英寸1080 × 1920

三星Galaxy S55.1英寸1080 × 1920三星Galaxy S64.5英寸1200 × 1920

小米14英寸480 × 854小米1s4英寸480 × 854

小米24.3英寸720 × 1280小米2s4.3英寸720 × 1280

小米35英寸1080 × 1920小米3s(概念)5英寸1080 × 1920

小米45英寸1080 × 1920紅米4.7英寸720 × 1280

紅米Note5.5英寸720 × 1280

OPPO Find 75.5英寸1440 × 2560OPPO Find 7 輕裝版5.5英寸1080 × 1920

OPPO N1 mini5英寸720 × 1280OPPO R35英寸720 × 1280

OPPO R1S5英寸720 × 1280

錘子 Smartisan T14.95英寸1080 × 1920

華為 Ascend P75英寸1080 × 1920華為 Ascend Mate76英寸1080 × 1920

華為 榮耀65英寸1080 × 1920華為 Ascend Mate26.1英寸720 × 1280

華為 C1995.5英寸720 × 1280

HTC One (M8)5英寸1080 × 1920HTC Desire 8205.5英寸720 × 1280

魅族 MEIZU MX45.36英寸1152 × 1920魅族 MEIZU MX35.1英寸1080 × 1800


【聲明:本文為圖片資源來源與網(wǎng)絡(luò)辛辨,如有侵權(quán),請聯(lián)系小編及時處理】

微信:xuedesigning

微博:Z丶J先生

一起學(xué)設(shè)計與前端知識

關(guān)注訂閱瑟枫;有免費全面前端和UI設(shè)計視頻資源

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末斗搞,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子慷妙,更是在濱河造成了極大的恐慌僻焚,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件膝擂,死亡現(xiàn)場離奇詭異虑啤,居然都是意外死亡,警方通過查閱死者的電腦和手機架馋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進店門狞山,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人绩蜻,你說我怎么就攤上這事铣墨。” “怎么了办绝?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵伊约,是天一觀的道長。 經(jīng)常有香客問我孕蝉,道長屡律,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任降淮,我火速辦了婚禮超埋,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘佳鳖。我一直安慰自己霍殴,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布系吩。 她就那樣靜靜地躺著来庭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪穿挨。 梳的紋絲不亂的頭發(fā)上月弛,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天肴盏,我揣著相機與錄音,去河邊找鬼帽衙。 笑死菜皂,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的厉萝。 我是一名探鬼主播恍飘,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼冀泻!你這毒婦竟也來了常侣?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤弹渔,失蹤者是張志新(化名)和其女友劉穎胳施,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肢专,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡舞肆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了博杖。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片椿胯。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖剃根,靈堂內(nèi)的尸體忽然破棺而出哩盲,到底是詐尸還是另有隱情,我是刑警寧澤狈醉,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布廉油,位于F島的核電站,受9級特大地震影響苗傅,放射性物質(zhì)發(fā)生泄漏抒线。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一渣慕、第九天 我趴在偏房一處隱蔽的房頂上張望嘶炭。 院中可真熱鬧,春花似錦逊桦、人聲如沸眨猎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽宵呛。三九已至,卻和暖如春夕凝,著一層夾襖步出監(jiān)牢的瞬間宝穗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工码秉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留逮矛,地道東北人。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓转砖,卻偏偏與公主長得像须鼎,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子府蔗,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,611評論 2 353

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