2. 程式人生 > >iPhone/iPad/Android UI尺寸規範

iPhone/iPad/Android UI尺寸規範

阿新 • • 發佈：2019-01-16

iPhone介面尺寸

裝置 解析度 PPI 狀態列高度 導航欄高度 標籤欄高度

iPhone6 plus設計版

 1242×2208 px 401PPI 60px 132px 146px

iPhone6 plus放大版

 1125×2001 px 401PPI 54px 132px 146px

iPhone6 plus物理版

 1080×1920 px 401PPI 54px 132px 146px

iPhone6

 750×1334 px 326PPI 40px 88px 98px

iPhone5 - 5C - 5S

 640×1136 px
 326PPI 40px 88px 98px

iPhone4 - 4S

 640×960 px 326PPI 40px 88px 98px

iPhone & iPod Touch第一代、第二代、第三代

 320×480 px 163PPI 20px 44px 49px

iPhone圖示尺寸：

裝置 App Store 程式應用 主螢幕 Spotlight搜尋 標籤欄 工具欄和導航欄

iPhone6 Plus (@3×)

 1024×1024 px 180×180 px 114×114 px 87×87 px 75×75 px 66×66 px

iPhone6 (@2×)

 1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px

iPhone5 - 5C - 5S (@2×)

 1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px

iPhone4 - 4S (@2×)

 1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px

iPhone & iPod Touch第一代、第二代、第三代

 1024×1024 px
 120×120 px 57×57 px 29×29 px 38×38 px 30×30 px


iPad的設計尺寸

裝置 尺寸 解析度 狀態列高度 導航欄高度 標籤欄高度

iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2

 2048×1536 px 264PPI 40px 88px 98px

iPad 1 - 2

 1024×768 px 132PPI 20px 44px 49px

iPad Mini

 1024×768 px 163PPI 20px 44px 49px

iPad圖示尺寸：

裝置 App Store 程式應用 主螢幕 Spotlight搜尋 標籤欄 工具欄和導航欄

iPad 3 - 4 - 5 - 6 - Air - Air2 - mini2

 1024×1024 px 180×180 px 144×144 px 100×100 px 50×50 px 44×44 px

iPad 1 - 2

 1024×1024 px 90×90 px 72×72 px 50×50 px 25×25 px 22×22 px

iPad Mini

 1024×1024 px 90×90 px 72×72 px 50×50 px 25×25 px 22×22 px

324234sdfsdfasdf撒打發士大夫撒打發士大夫

Android SDK模擬機的尺寸

螢幕大小 低密度（120） 中等密度（160） 高密度（240） 超高密度（320）

小螢幕

   QVGA（240×320）      480×640

普通螢幕

 WQVGA400（240×400） WQVGA432（240×432）   HVGA（320×480） WVGA800（480×800） WVGA854（480×854） 600×1024   640×960

大螢幕

 WVGA800 *（480×800） WVGA854 *（480×854） WVGA800 *（480×800） WVGA854 *（480×854） 600x1024

超大螢幕

    1024×600 1024×768 1280×768WXGA（1280×800） 1536×1152 1920×1152 1920×1200 2048×1536 2560×1600

Android的圖示尺寸

螢幕大小 啟動圖示 操作欄圖示 上下文圖示 系統通知圖示(白色) 最細筆畫

320×480 px

 48×48 px 32×32 px 16×16 px 24×24 px 不小於2 px

480×800px 480×854px 540×960px

 72×72 px 48×48 px 24×24 px 36×36 px 不小於3 px

720×1280 px

 48×48 dp 32×32 dp 16×16 dp 24×24 dp 不小於2 dp

1080×1920 px

 144×144 px 96×96 px 48×48 px 72×72 px 不小於6 px

Android安卓系統dp/sp/px換算表

名稱 解析度 比率 rate (針對320px) 比率 rate (針對640px) 比率 rate (針對750px)

idpi

 240×320 0.75 0.375 0.32

mdpi

 320×480 1 0.5 0.4267

hdpi

 480×800 1.5 0.75 0.64

xhdpi

 720×1280 2.25 1.125 1.042

xxhdpi

 1080×1920 3.375 1.6875 1.5

主流Android手機解析度和尺寸

裝置 解析度 尺寸 裝置 解析度 尺寸

魅族MX2

 4.4英寸 800×1280 px

魅族MX3

 5.1英寸 1080×1280 px

魅族MX4

 5.36英寸 1152×1920 px

魅族MX4 Pro未上市

 5.5英寸 1536×2560 px

三星GALAXY Note 4

 5.7英寸 1440×2560 px

三星GALAXY Note 3

 5.7英寸 1080×1920 px

三星GALAXY S5

 5.1英寸 1080×1920 px

三星GALAXY Note II

 5.5英寸 720×1280 px

索尼Xperia Z3

 5.2英寸 1080×1920 px

索尼XL39h

 6.44英寸 1080×1920 px

HTC Desire 820

 5.5英寸 720×1280 px

HTC One M8

 4.7英寸 1080×1920 px

OPPO Find 7

 5.5英寸 1440×2560 px

OPPO N1

 5.9英寸 1080×1920 px

OPPO R3

 5英寸 720×1280 px

OPPO N1 Mini

 5英寸 720×1280 px

小米M4

 5英寸 1080×1920 px

小米紅米Note

 5.5英寸 720×1280 px

小米M3

 5英寸 1080×1920 px

小米紅米1S

 4.7英寸 720×1280 px

小米M3S未上市

 5英寸 1080×1920 px

小米M2S

 4.3英寸 720×1280 px

華為榮耀6

 5英寸 1080×1920 px

錘子T1

 4.95英寸 1080×1920 px

LG G3

 5.5英寸 1440×2560 px

OnePlus One

 5.5英寸 1080×1920 px

主流瀏覽器的介面引數與份額

瀏覽器 狀態列 選單欄 滾動條 市場份額(國內)

Chrome 瀏覽器

 22 px（浮動出現） 60 px 15 px 8%

火狐瀏覽器

 20 px 132 px 15 px 1%

IE瀏覽器

 24 px 120 px 15 px 35%

360 瀏覽器

 24 px 140 px 15 px 28%

遨遊瀏覽器

 24 px 147 px 15 px 1%

搜狗瀏覽器

 25 px 163 px 15 px 5%

系統解析度統計

解析度 佔有率 解析度 佔有率

1366×768

 15%

1440×900

 13%

1920×1080

 11%

1600×900

 5%

1280×800

 4%

1280×1024

 3%

1680×1050

 2.8%

320×480

 2.4%

480×800

 2%

1280×768

 1%

連結：http://tool.lanrentuku.com/guifan/ui.html

相關推薦

iPhone/iPad/Android UI尺寸規範

iPhone介面尺寸 裝置 解析度 PPI 狀態列高度 導航欄高度 標籤欄高度 iPhone6 plus設計版 1242×2208 px 401PPI 60px 132px 146px iPhone6 plus放大版 1125×200

移動端app開發-02-iPhone/iPad/Android UI尺寸規範

移動端app開發-iPhone/iPad/Android UI尺寸規範 本筆記拋去無用的前期分析什麼的，全是乾貨，簡潔幹練 本筆記不單獨針對 ios 或者 Android，兩種都介紹，當然我們實際開發過程中，也往往是 Android一套，ios一套 ##

iOS開發之獲取iPhone/iPad/Android 介面和icon尺寸規範

注意：iOS所有圖示的圓角效果由系統生成，給到的圖示本身不能是圓角的。1. 桌面圖示 (app icon)for iPhone6 plus(@3x) : 180 x 180for iPhone 6/5s

最新最全移動端介面設計UI尺寸規範-2018年初版

一、UI尺寸基礎知識 1、畫素密度-PPI 畫素密度是指顯示螢幕每英寸的長度上排列的畫素點數量，PPI（Pixels per inch）越高代表螢幕顯示效果越精細，Retina屏比普通屏清晰很多，就是因為它的畫素密度翻了一倍。 2、計量單位 iOS和Android

UI尺寸規範

一、電商頁面基本原則 1、介面尺寸：1920-2000px帶有底圖必須那麼大（無底圖的1366-2000px） 2、版心：980-1220px 3、Banner高度建議870px； 4、解析度72px 5、色彩模式RGB 6、按鈕高度為文字字高的的2-2.5倍

iOS. iphone/iPad中的尺寸、安全區，導航高度、機型判斷

參考：http://www.25xt.com/appsize iphone：=========== *************APP圖示：20px，29px，40px，60px／（@2x,@3x） tablviewcell的預設高度------44p'x； s

android UI設計圖片和文字尺寸px對應dp、sp值換算

螢幕尺寸：指螢幕的對角線長度，單位是英寸，1英寸等於2.54釐米，常見尺寸有2.4，2.8，3.5，3.7，4.2，5.0，5.5，6.0等。 螢幕解析度：指在縱橫向上的畫素點數，單位是px，1px為一個畫素點，一般格式為縱向畫素*橫向畫素，如1960*1080。 螢幕畫素密度：相同尺寸

Android必知App 常用圖示尺寸規範彙總

1. 程式啟動圖示（icon launcher）   放在mipmap-*dpi下，檔名為ic_launcher.png LDPI (Low Density Screen，120 DPI)，其圖示大小為 36 x 36 px。 MDPI (Medium Densit

JS判斷裝置終端（PC，iPad，iPhone，android，winPhone）和瀏覽器

var ua = navigator.userAgent; var browser = {}, weixin = ua.match(/MicroMessenger\/([^\s]+)/i), we

Android 介面設計尺寸規範

這裡取用640*960的尺寸設計，那我們就說說在這個尺寸下這些元素的尺寸。 狀態列：就是我們經常說的訊號、運營商、電量等顯示手機狀態的區域，其高度為：40px導航欄：顯示當前介面的名稱，包含相應的功能或者頁面間的跳轉按鈕，其高度為：88px主選單欄：類似於頁面的主選單，提

Android/IOS APP介面設計之尺寸規範

1.尺寸以及解析度 　　iPhone的介面尺寸不用多說，640*960是基本OK的，也可以是適應5S的640*1136，馬上iPhone 6也快來了（隨便吐槽一下網上曝的真機諜照，真是醜到離譜...），只要寬度不變都好說。至於畫素問題，網頁和移動的UI用72px就可以了

Android,App 常用圖示尺寸規範

1. 程式啟動圖示： LDPI (Low Density Screen，120 DPI)，其圖示大小為 36 x 36 px。 MDPI (Medium Density Screen, 160 DPI)，其圖示大小為 48 x 48 px。 HDPI (High D

Android上的APP圖示常見尺寸規範

1. 程式啟動圖示： LDPI (Low Density Screen，120 DPI)，其圖示大小為 36 x 36 px。 MDPI (Medium Density Screen, 160 DPI)，其圖示大小為 48 x 48 px。 HDPI (High Densi

巧用Drawable 實現Android UI 元素間距效果

purple 固定 展示 .com otto 技巧 log contain dev 源文地址： 巧用Drawable 實現Android UI 元素間距效果 在大部分的移動UI或者Web UI都是基於網格概念而設計的。這種網格一般都是有一些對其的方塊組成，然後

Android UI布局之TableLayout

you column true xmlns art parent 名稱 str demo 從字面上了解TableLayout是一種表格式的布局。這樣的布局會把包括的元素以行和列的形式進行排列。表格的列數為每一行的最大列數。當然表格裏邊的單元格是能夠為空的。 實例：La

Android UI開發神兵利器之Icon

mod ng- 介紹 water rac icons mark .com des 好的設計離不開Icon話不多。介紹2個國外的站點，一個用來找Icon，一個用來搞頁面設計http://dryicons.com/free-icons/http://www.webdesig

iPhone X的UI設計技巧

以下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。 果粉們翹首以待的iPhone X終於開始預售了！同樣滿懷期待的還有設計師和開發人員，他們將在iPhone X上看到他們的App了。蘋

UI設計規範整理一iOS字體和切圖及規範

icon 頁面設計 nologin 例如 必須 協作 設計規範 ogr 喜歡 UI設計規範一iOS字體和切圖及規範 說明： 1.對象為程序員等開發人員。 2.方法有千種，僅供參考。 3.文檔的本質是備份與查看，對外方便協作與對內提升效率。 4.文檔不是萬能的，如果文檔查看

移動端UI設計規範模板參考以及設計規範的好處

2018也快要過完了（-_-），我們的移動端的UI設計規範也層出不窮。很多APP設計師也要在年底給公司或者是團隊做一個總結。那麽一個像樣的APP ui設計規範也是很有必要的作品回顧。 在創業公司做著一位獨立設計師，說好聽點是獨立設計師，難聽點，就是唯一的設計師。創業型公司，UI

在越獄的iPhone/iPad上安裝自開發環境

swd 每次 娛樂 社區 桌面 搜索下載 文件管理 launch 自己的 自開發跟自編譯意思一樣，後者表示一個開發語言的開發能力成熟度；前者則表示一個開發平臺的開發能力成熟度。 iPhone跟iPad面世這麽多年，一直無法擺脫“娛樂”工具的宿命。Apple曾經希望通過iP