手机APP小程序UI界面设计尺寸规范标准

文章目录[隐藏]

IOS手机设计规范【更新到2022年】
- IOS手机屏幕尺寸参考
- IOS字体使用
- IOS图标规范
- IOS自定义图标
安卓手机设计规范【更新到2022年】
- Android手机屏幕尺寸参考
- 安卓设计分辨率
- 安卓字体使用
- 安卓图标规范
APP及网页切图及UI命名规范参考
- 界面命名
- 系统控件库
- 功能命名
- 资源类型
- 常见状态
- 位置排序
- 手表Watch屏幕设计尺寸参考

温馨提示

有不少初级UI设计师对UI设计尺寸很困惑，现在我就讲一下UI设计中APP常用的尺寸规范，曾遇到一个设计师说APP的设计尺寸为1倍原型，2倍UI视觉，3倍开发，我认为不对，Adobe XD和Sketch这两个UI专业设计工具的APP界面设计默认规格就是1倍标准，所以我们在设计APP时，如果是用PS做设计最好的一倍图，如iPhoneX用750*1334px的尺寸，如果是用SKetch或者XD来设计，常见是用1倍尺寸来说，也就是375*812（iPhoneX）或者390*844（iPhone12/13），最后导出时可以导出2倍或者3倍即可。

IOS手机设计规范【更新到2022年】

IOS手机屏幕尺寸参考

设备名称	屏幕尺寸in	PPI	比例	1倍宽高px	设计宽高px	密度dpi
iPhone 14 Pro Max	6.7	460	19.5 : 9	430 x 932	1290 x 2796	3.0 xxhdpi
iPhone 14 Pro	6.1	460	19.5 : 9	393 x 852	1179 x 2556	3.0 xxhdpi
iPhone 14 Plus	6.7	460	19.5 : 9	428 x 926	1284 x 2778	3.0 xxhdpi
iPhone 14	6.1	460	19.5 : 9	390 x 844	1170 x 2532	3.0 xxhdpi
iPhone 12/13 Pro Max	6.7	458	19.5 : 9	428 x 926	1284 x 2778	3.0 xxhdpi
iPhone 12/13（Pro）	6.1	460	19.5 : 9	390 x 844	1170 x 2532	3.0 xxhdpi
iPhone 12/13 mini	5.4	476	19.5 : 9	360 x 780	1080 x 2340	3.0 xxhdpi
iPhone Xs（Max,Pro Max）	6.5	458	19.5 : 9	414 x 896	1242 x 2688	3.0 xxhdpi
iPhone XR（11）	6.1	326	19.5 : 9	414 x 896	828 x 1792	2.0 xxhdpi
iPhone X（Xs,Pro）	5.8	458	19.5 : 9	375 x 812	1125 x 2436	3.0 xxhdpi
iPhone 8+ (8+, 7+, 6S+, 6+)	5.5	401	16 : 9	414 x 736	1242 x 2208	3.0xxhdpi
iPhone 8 (7, 7, 6S, 6)	4.7	326	16 : 9	375 x 667	750 x 1334	2.0xhdpi
iPhone SE（SE, 5S, 5C）	4.0	326	16 : 9	320 x 568	640 x 1136	2.0xhdpi

IOS字体使用

中文字体【苹方】：PingFang SC，英文字体：SF UI Text 、SF UI Display。(其中SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字)，常见的字体大小:24px、26px、28px、30px、32px、34px，36px等等。记住是偶数的。最小字号20px。以下列表供参考！

元素	字重	字号(pt)	行距	字间距
Title 1	Light	28pt	34pt	13pt
Title 2	Regular	22pt	28pt	16pt
Title 3	Regular	20pt	24pt	19pt
Headline	Semi-Bold	17pt	22pt	-24pt
Body	Regular	17pt	22pt	-24pt
Callout	Regular	16pt	21pt	-20pt
Subhead	Regular	15pt	20pt	-16pt
Footnote	Regular	13pt	18pt	-6pt
Caption 1	Regular	12pt	16pt	0pt
Caption 2	Regular	11pt	13pt	6pt

元素	字号（pt）	字重	字距（pt）	类型
Nav Bar Title	17	Medium	0.5	Display
Nav Bar Button	17	Regular	0.5	Display
Search Bar	13.5	Regular	0	Text
Tab Bar Button	10	Regular	0.1	Text
Table Header	12.5	Regular	0.25	Text
Table Row	16.5	Regular	0	Text
Table Row Subline	12	Regular	0	Text
Table Footer	12.5	Regular	0.2	Text
Action Sheets	20	Regular / Medium	0.5	Display

IOS图标规范

设备名称	应用图标	App Store图标	Spotlight图标	设置图标
iPhone X, 8+, 7+, 6s+, 6s	180 x 180 px	1024 x 1024 px	120 x 120 px	87 x 87 px
iPhone X, 8, 7, 6s, 6, SE，5s, 5c, 5, 4s, 4	120 x 120 px	1024 x 1024 px	80 x 80 px	58 x 58 px
iPhone 1, 3G, 3GS	57 x 57 px	1024 x 1024 px	29 x 29 px	29 x 29 px
iPad Pro 12.9, 10.5	167 x 167 px	1024 x 1024 px	80 x 80 px	58 x 58 px
iPad Air 1 & 2, Mini 2 & 4, 3 & 4	152 x 152 px	1024 x 1024 px	80 x 80 px	58 x 58 px
iPad 1, 2, Mini 1	76 x 76 px px	1024 x 1024 px	40 x 40 px	29 x 29 px

IOS自定义图标

设备名称	导航栏和工具栏图标尺寸	标签栏图标尺寸
iPhone 8+, 7+, 6+, 6s+	66 x 66 px	75 x 75 px / 最大144 x 96 px
iPhone 8, 7, 6s, 6, SE	44 x 44 px	50 x 50 px / 最大96 x 64 px
iPad Pro, iPad, iPad mini	44 x 44 px	50 x 50 px / 最大96 x 64 px

苹果官方设计规范

安卓手机设计规范【更新到2022年】

dpi =屏幕宽度（或高度）像素 / 屏幕宽度（或高度）英寸，dp =(宽度像素 x 160)/ dpi

Android手机屏幕尺寸参考

设备名称	屏幕尺寸in	PPI	比例	1倍宽高px	设计宽高px	密度 dpi
Android One	4.5	218	16 : 9	320 x 569	480 x 854	1.5hdpi
Google Pixel	5.0	441	16 : 9	411 x 731	1080 x 1920	2.6xxhdpi
Google Pixel XL	5.5	534	16 : 9	411 x 731	1440 x 2560	3.5xxxhdpi
Moto X	4.7	312	16 : 9	360 x 640	720 x 1280	2.0xhdpi
Moto X 二代	5.2	424	16 : 9	360 x 640	1080 x 1920	3.0xxhdpi
Nexus 5	5.0	445	16 : 9	360 x 640	1080 x 1920	3.0xxhdpi
Nexus 5X	5.2	565	16 : 9	411 x 731	1080 x 1920	2.6xxhdpi
Nexus 6	6.0	493	16 : 9	411 x 731	1440 x 2560	3.5xxxhdpi
Nexus 6P	5.7	518	16 : 9	411 x 731	1440 x 2560	3.5xxxhdpi
Samsung Galaxy S8	5.8	570	18.5 : 9	360 x 740	1440 x 2960	4.0xxxhdpi
Samsung Galaxy S8+	6.2	529	18.5 : 9	360 x 740	1440 x 2960	4.0xxxhdpi
Samsung Galaxy Note 4	5.7	515	16 : 9	480 x 853	1440 x 2560	3.0xxhdpi
Samsung Galaxy Note 5	5.7	518	16 : 9	480 x 853	1440 x 2560	3.0xxhdpi
Samsung Galaxy S5	5.1	432	16 : 9	360 x 640	1080 x 1920	3.0xxhdpi
Samsung Galaxy S7 (S7, S6, S6 Edge)	5.1	576	16 : 9	360 x 640	1440 x 2560	4.0xxxhdpi
Samsung Galaxy S7 Edge	5.5	534	16 : 9	360 x 640	1440 x 2560	4.0 xxxhdpi
Smartisan T2	4.95	445	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
Smartisan M1	5.15	428	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
Smartisan M1L	5.7	515	16 : 9	480 x 853	1440 x 2560	3.0 xxhdpi
坚果 Pro	5.5	403	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
OnePlus 5	5.5	401	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
OnePlus 3T	5.5	401	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
Oppo R9s (R9s, R11)	5.5	401	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
Oppo R9s Plus (R9s Plus, R11 Plus)	6.0	368	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
Oppo A57	5.2	282	16 : 9	360 x 640	720 x 1280	2.0 xhdpi
Oppo A59s	5.5	267	16 : 9	360 x 640	720 x 1280	2.0 xhdpi
Oppo A37	5.0	293	16 : 9	360 x 640	720 x 1280	2.0 xhdpi
小米MIX	6.4	362	17 : 9	360 x 680	1080 x 2040	3.0 xxhdpi
小米Note 2	5.7	386	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
小米6	5.15	428	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
小米5s	5.15	428	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
小米5s Plus	5.7	386	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
小米Max	6.44	342	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
红米Note 4 (4, Note 4X)	5.5	403	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
红米 4 (4, 4X)	5.0	296	16 : 9	360 x 640	720 x 1280	2.0 xhdpi
Vivo X9 (X9, X9s)	5.5	401	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
Vivo X9 Plus (X9 Plus, X9s Plus)	5.88	375	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
HUAWEI P10	5.1	432	16 : 9	360 x 640	1080 x 1920	3.0 xxhdpi
HUAWEI P10 Plus	5.5	540	16 : 9	360 x 640	1440 x 2560	4.0 xxxhdpi

安卓设计分辨率

名称	分辨率 px	dpi	像素比	示例 dp	对应像素
xxxhdpi	2160 x 3840	640	4.0	48dp	192px
xxhdpi	1080 x 1920	480	3.0	48dp	144px
xhdpi	720 x 1280	320	2.0	48dp	96px
hdpi	480 x 800	240	1.5	48dp	72px
mdpi	320 x 480	160	1.0	48dp	48px

安卓字体使用

元素	字重	字号	行距	字间距
App bar	Medium	20sp	-	-
Buttons	Medium	15sp	-	10
Headline	Regular	24sp	34dp	0
Title	Medium	21sp	-	5
Subheading	Regular	17sp	30dp	10
Body 1	Regular	15sp	23dp	10
Body 2	Bold	15sp	26dp	10
Caption	Regular	13sp	-	20

安卓图标规范

图标用途	mdpi (160dpi)	hdpi (240dpi)	xhdpi (320dpi)	xxhdpi (480dpi)	xxxhdpi (640dpi)
应用图标	48 x 48 px	72 x 72 px	96 x 96 px	144 x 144 px	192 x 192 px
系统图标	24 x 24 px	36 x 36 px	48 x 48 px	72 x 72 px	196 x 196 px

谷歌官方设计规范

谷歌中文设计规范

APP及网页切图及UI命名规范参考

界面命名

常见界面、控件、功能、状态命名集合，APP产品经理、APP设计师、APP开发工程师，包括H5前端开发人员都可以记住的文件命名规范。

整个主程序	App	搜索结果	Search results	活动	Activity	信息	Messages
首页	Home	应用详情	App detail	探索	Explore	音乐	Music
软件	Software	日历	Calendar	联系人	Contacts	新闻	News
游戏	Game	相机	Camera	控制中心	Control center	笔记	Notes
管理	Management	照片	Photo	健康	Health	天气	Weather
发现	Find	视频	Video	邮件	Mail	手表	Watch
个人中心	Personal center	设置	Settings	地图	Maps	锁屏	Lock screen

系统控件库

状态栏	Status bar	搜索栏	Search bar	提醒视图	Alert view	弹出视图	Popovers
导航栏	Navigation bar	表格视图	Table view	编辑菜单	Edit menu	开关	Switch
标签栏	Tab bar	分段控制	Segmented	选择器	Pickers	弹窗	Popup
工具栏	Tool bar	活动视图	Activity view	滑杆	Sliders	扫描	Scanning

功能命名

确定	Ok	添加	Add	卸载	Uninstall	选择	Select
默认	Default	查看	View	搜索	Search	更多	More
取消	Cancel	删除	Delete	暂停	Pause	刷新	Refresh
关闭	Close	下载	Download	继续	Continue	发送	Send
最小化	Min	等待	Waiting	导入	Import	前进	Forward
最大化	Max	加载	Loading	导出	Export	重新开始	Restart
菜单	Menu	安装	Install	后退	Back	更新	Update

资源类型

图片	Image	滚动条	Scroll	进度条	Progress	线条	Line
图标	Icon	标签	Tab	树	Tree	蒙版	Mask
静态文本框	Label	勾选框	Checkbox	动画	Animation	标记	Sign
编辑框	Edit	下拉框	Combo	按钮	Button	动画	Animation
列表	List	单选框	Radio	背景	Backgroud	播放	Play

常见状态

普通	Normal	获取焦点	Focused	已访问	Visited	默认	Default
按下	Press	点击	Highlight	禁用	Disabled	选中	Selected
悬停	Hover	错误	Error	完成	Complete	空白	Blank

位置排序

顶部	Top	底部	Bottom	第二	Second	页关	Header
中间	Middle	第一	First	最后	Last	页脚	Footer

手表Watch屏幕设计尺寸参考

设备名称	操作系统	尺寸 in	PPI	比例	宽x高 dp	宽x高 px	密度 dpi
Apple Watch 38mm	watch OS	1.5	326	5 : 4	136 x 170	272 x 340	2.0 xhdpi
Apple Watch 42mm	watch OS	1.7	326	5 : 4	156 x 195	312 x 390	2.0 xhdpi
Moto 360	Android	1.6	205	32 : 29	241 x 218	320 x 290	1.3 tvdpi
Moto 360 v2 42mm	Android	1.4	263	65 : 64	241 x 244	320 x 325	1.3 tvdpi
Moto 360 v2 46mm	Android	1.6	263	33 : 32	241 x 248	320 x 330	1.3 tvdpi

本文作者为思叔，转载请注明。