iOS_App界面设计规范

命名
方便进行标准的产品设计
命名格式
字体大小(以iPhone6及以下尺寸为例)
• 文本永远都不应该小于22px，内容样式使用34px的字号作为最大 尺寸的默认文本尺寸设置。（个别情况：文字最小使用20px的， 如标签栏图标的文字为20px;文字最大使用34px及以上的，如弹窗 按钮文字为36px） • 为了区分标题与内容样式，标题样式使用更重的值，可以是颜色 或字体大小区 • 导航栏的文本使用相同的字号，值为34px。
App Icon Sizes
Every app must supply small icons for use on the home screen and throughout the system once your app is installed, as well as larger icon for display in the App Store Device or context iPhone Icon size 180px x 180px (60pt x 60pPhone5/5s/5c iPhone4/4s
750 x 1334 px
640 x 1136 px 640 x 1136 px 640 x 960 px
40px
40px 40px 40px[20pt]
88px
88px 88px 88px[44pt]
98px
98px 98px 98px
点和像素
iPhone倍图
iPhone X 屏幕
iPhone X 全屏的安全区为734pt = 812 pt – 34pt[屏幕底部虚拟去home键]-44pt(状态栏)
iPhone X 安全区
界面常见控件举例
界面基本组成元素（建议高度）
• 界面基本组成元素包括：状态栏（Status Bar）+导航栏 （NavigationBar）+标签栏（Tab Bar）/工具栏（Tool Tabs）+内容 区域
• 设计单色模板图标 • 图标scale factor设置为@2x • 图标保持一致
• 图标要清晰易读，实心或者线条要一致
• 用颜色来表述选中或未选中两种状态
Tab Bar Icon Size
字体
方便进行标准的产品设计
字体的选择
• iOS版本中默认字体都是Helvetica Neue。建议中文字体Mac下用的 是Heiti SC(黑体-简)。Windows下则为华文细黑。设计以iPhone6的 尺寸进行设计，所以所有的字号都要使用双号数字。
一.标准单位
• PPI(Pixel Per Inch by diagonal):表示沿着对角线，每英寸所拥有的 像素（Pixel）数目。PPI数值越高，代表显示屏能够以越高的密度 显示图像，即通常所说的分辨率越高、颗粒感越弱。
• 缩放因子:scale factor between logic point and device pixel
iPad Pro, iPad, iPad mini
Device
58px x 58px (29pt x 29pt @2x)
Notification icon size
iPhone
iPad Pro, iPad, iPad mini
60px x 60px (20pt x 20pt @3x) 40px x 40px (20pt x 20pt @2x)
Target Sizes 75px x 75px(25pt x 25pt @3x) 50px x 50px(25pt x 25pt @2x) Maximum sizes 83px x 83px(27.67pt x 27.67pt @3x) 56px x 56px(28pt x 28pt @2x)
定制图标
@2x
@2x @2x @2x
4.7
4 4 3.5
326
326 326 326
375 x 667pt
320 x 568pt 320 x 568pt 320 x 480pt
一.标准单位
• Pixels(像素)： Pixels是数字显示屏上我们可控制的最小物理元素， 在一个特定屏幕尺寸中可以有多个像素。 • Points(点)：Points用以衡量分辨率。根据屏幕的像素密度，一个 point可以包含多个像素（比如在常规的Retina屏上，1pt包含2 x 2 的像素）。 • 英寸：1英寸 = 2.54厘米
布局展示
布局展示
App Icon：App图标
• App Icon Attributes：App图标属性 • App Icon Sizes：App图标 大小 • Spotlight, Settings, and Notification Icon：搜索，设置和通知图标
App Icon Attributes
iOS App界面设计规范
方便进行标准的产品设计
界面尺寸
iPhone系列界面尺寸
设备 iPhone X 6+/6S +/7+/8+ 分辨率 1125 x 2436 px 1242 x 2208 px 状态栏高度 132px [44pt] 60px 导航栏高度 132px [44pt] 132px 标签栏高度 应该没变 147px 缩放因子 @3x @3x 主屏尺寸 5.8 5.5 ppi 458 401 开发尺寸 375 x 812pt 414 x 736pt
120px x 120px (60pt x 60pt @2x) iPad Pro
iPad, iPad mini App Store
167px x 167px (83.5pt x 83.5pt @2x)
152px x 152px (76pt x 76pt @2x) 1024px x 1024px (1024pt x 1024pt @1x)
40px x 40px (20pt x 20pt @2x)
Navigation Bar and Toolbar Icon Size
• Use the following size for guidance when preparing custom navigation bar and toolbar icons, but adjust as needed to create balance.
Spotlight, Settings, and Notification Icon
Device iPhone iPad Pro, iPad, iPad mini Device iPhone Spotlight icon size 120px x 120px (40pt x 40pt @3x) 80px x 80px (40pt x 40pt @2x) 80px x 80px (40pt x 40pt @2x) Settings icon size 87px x 87px (29pt x 29pt @3x) 58px x 58px (29pt x 29pt @2x)
Attribute Format Color space Layers Resolution Shape Value PNG sRGB or P3[See Color Management] Flattene with no transparency Varies[See Image Size and Resolution] Square with no round corners