iOS、Android、Web设计尺寸规范和切图的命名
iOS设计尺寸规范
iOS Design Guidelines
字体
在Mac或iOS中显示最好的字体必属苹方字体
中文字体:PingFang SC
英文字体:SF UI Text 、SF UI Display
其中SF UI Text适用与小于19pt的文字,SF UI Display适用于大于20pt的文字
元素 | 字重 | 字号(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 |
点和像素( Points and Pixels)
图标(Icon)
应用图标 App Icon
设备名称 | 应用图标 | 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 |
自定义图标 Custom Icons
设备名称 | 导航栏和工具栏图标尺寸 | 标签栏图标尺寸 |
---|---|---|
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 |
以下是所需Launch Image所需的尺寸:(Portrait是竖屏,Landscape是横屏),将制作好的Launch Image根据图片像素大小放入对应的框中~
分辨率和显示规格(Resolutions and Display)
设备名称 | 屏幕尺寸 | PPI | Asset | 竖屏点(point) | 竖屏分辨率(px) |
---|---|---|---|---|---|
iPhone X | 5.8 in | 458 | @3x | 375 x 812 | 1125 x 2436 |
iPhone 8+, 7+, 6s+, 6+ | 5.5 in | 401 | @3x | 414 x 736 | 1242 x 2208 |
iPhone 8, 7, 6s, 6 | 4.7 in | 326 | @2x | 375 x 667 | 750 x 1334 |
iPhone SE, 5, 5S, 5C | 4.0 in | 326 | @2x | 320 x 568 | 640 x 1136 |
iPhone 4, 4S | 3.5 in | 326 | @2x | 320 x 480 | 640 x 960 |
iPhone 1, 3G, 3GS | 3.5 in | 163 | @1x | 320 x 480 | 320 x 480 |
iPad Pro 12.9 | 12.9 in | 264 | @2x | 1024 x 1366 | 2048 x 2732 |
iPad Pro 10.5 | 10.5 in | 264 | @2x | 834 x 1112 | 1668 x 2224 |
iPad Pro, iPad Air 2, Retina iPad | 9.7 in | 264 | @2x | 768 x 1024 | 1536 x 2048 |
iPad Mini 4, iPad Mini 2 | 7.9 in | 326 | @2x | 768 x 1024 | 1536 x 2048 |
iPad 1, 2 | 9.7 in | 132 | @1x | 768 x 1024 | 768 x 1024 |
配色
UI组件布局(UI Element Layout
状态栏 Status Bar
导航栏 Navigation Bar
搜索栏 Search Bar
标签栏 Tab Bar
根据苹果官方人机界面指南(Human Interface Guidelines)可以得知:iOS系统会根据设备和方向显示两种标签栏:常规(Regular)和紧凑(Compact),所以在设置自定义Tab Bar Item的时候也应该包含常规和紧凑两种不同的尺寸~根据图形是圆形、方形、宽形、高形,像素也有不同的要求:如果图标是圆形的,应该提供:25pt@2x、25pt@3x、18pt@2x、18pt@3x如果图标是方形的,应该提供:23pt@2x、23pt@3x、17pt@2x、17pt@3x如果图标是宽形的,应该提供:31pt@2x、31pt@3x、23pt@2x、23pt@3x如果图标是高形的,应该提供:28pt@2x、28pt@3x、20pt@2x、20pt@3x以下是完整表格~
列表视图 Table View
弹出 Modals
提示框 Alerts
切换 Segment Controls
滑动条 Sliders
切换按钮 Switch
Android设计尺寸规范
Android Design Guidelines
字体 Typography
中文字体:Source Han Sans / Noto
英文字体:Roboto
元素 | 字重 | 字号 | 行距 | 字间距 |
---|---|---|---|---|
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 |
图标(icons)
图标用途 | 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 |
应用图标 Product icons
系统图标 System icons
快捷图标 Shortcut icon
单位和度量 Units and measurements
dpi =屏幕宽度(或高度)像素 / 屏幕宽度(或高度)英寸
dp =(宽度像素 x 160)/ dpi
名称 | 分辨率 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 |
UI组件布局 Element Layout
列表 List
详情视图 Detail view
触控区域尺寸 Touch target size
应用栏 App bar
Web设计尺寸规范
Web Design Guidelines
切图命名
Map name
常见界面、控件、功能、状态命名集合
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 | 邮件 | 手表 | 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 |
以iOS为范例(安卓通用)的切片文件命名规范如下:
个人觉得标识符命名原则,尽可能的用最少的字符而又能完整的表达标识符的含义(如:Navigation bar可以缩减成nav)
本文引用:https://www.qijishow.com/
End