iOS_App界面设计规范ppt课件
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Notification icon size 60px x 60px (20pt x 20pt @3x) 40px x 40px (20pt x 20pt @2x) 40px x 40px (20pt x 20pt @2x)
17
Target Sizes 75px x 75px(25pt x 25pt @3x) 50px x 50px(25pt x 25pt @2x)
高度
寸
132px [44pt]
132px
应该没变
@3x
[44pt]
5.8 458 375 x 812pt
60px
132px
147px
@3x
5.5 401 414 x 736pt
750 x 1334 px 40px
88px
640 x 1136 px 40px
88px
98px
@2x
4.7 326 375 x 667pt
iOS App界面设计规 范
方便进行标准的产品设计
2020/3/28
1
界面尺寸
2ቤተ መጻሕፍቲ ባይዱ20/3/28
2
iPhone系列界面尺寸
设备
iPhone X
6+/6S +/7+/8+ 6/6S/7/8 iPhone SE
分辨率 1125 x 2436 px 1242 x 2208 px
状态栏 导航栏高度 标签栏高度 缩放因子 主屏尺 ppi 开发尺寸
Maximum sizes 83px x 83px(27.67pt x 27.67pt @3x) 56px x 56px(28pt x 28pt @2x)
18
• 设计单色模板图标 • 图标scale factor设置为@2x • 图标保持一致 • 图标要清晰易读，实心或者线条要一致
• 用颜色来表述选中或未选中两种状态
19
20
字体
方便进行标准的产品设计
2020/3/28
21
22
• 文本永远都不应该小于22px，内容样式使用34px 的字号作为最大尺寸的默认文本尺寸设置。（个 别情况：文字最小使用20px的，如标签栏图标的 文字为20px;文字最大使用34px及以上的，如弹窗 按钮文字为36px）
Store App Store
1024px x 1024px (1024pt x 1024pt @1x)
16
Spotlight, Settings, and Notification Icon
Device iPhone
iPad Pro, iPad, iPad mini
Spotlight icon size 120px x 120px (40pt x 40pt @3x) 80px x 80px (40pt x 40pt @2x) 80px x 80px (40pt x 40pt @2x)
98px
@2x
4 326 320 x 568pt
iPhone5/5s /5c
640 x 1136 px
40px
88px
98px
iPhone4/4s
640 x 960 px
40px[20p t]
88px[44pt]
98px
@2x
4 326 320 x 568pt
@2x
3.5 326 320 x 480pt
5
6
7
iPhone X 全屏的安全区为734pt = 812 pt – 8
9
10
• 界面基本组成元素包括：状态栏（Status Bar）+导航栏 （NavigationBar）+标签栏（Tab Bar）/工具栏（Tool Tabs）+内 容区域
11
布局展示
12
13
• App Icon Attributes：App图标属性 • App Icon Sizes：App图标 大小 • Spotlight, Settings, and Notification Icon：搜索，设置和通知图标
your app is installed, as well as 120px x 120px (60pt x 60pt @2x)
larger icon for display in the App iPad Pro
iPad, iPad mini
167px x 167px (83.5pt x 83.5pt @2x) 152px x 152px (76pt x 76pt @2x)
15
Every app must supply small
icons for use on the home screen
and throughout the system once Device or context
iPhone
Icon size 180px x 180px (60pt x 60pt @3x)
14
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
3
• Pixels(像素)： Pixels是数字显示屏上我们可控制的最小物理元素， 在一个特定屏幕尺寸中可以有多个像素。
• Points(点)：Points用以衡量分辨率。根据屏幕的像素密度，一个 point可以包含多个像素（比如在常规的Retina屏上，1pt包含2 x 2 的像素）。
• 英寸：1英寸 = 2.54厘米
Device iPhone
iPad Pro, iPad, iPad mini
Device iPhone
iPad Pro, iPad, iPad mini
Settings icon size 87px x 87px (29pt x 29pt @3x) 58px x 58px (29pt x 29pt @2x) 58px x 58px (29pt x 29pt @2x)
4
• PPI(Pixel Per Inch by diagonal):表示沿着对角线，每英寸所拥有的 像素（Pixel）数目。PPI数值越高，代表显示屏能够以越高的密 度显示图像，即通常所说的分辨率越高、颗粒感越弱。
• 缩放因子:scale factor between logic point and device pixel
17
Target Sizes 75px x 75px(25pt x 25pt @3x) 50px x 50px(25pt x 25pt @2x)
高度
寸
132px [44pt]
132px
应该没变
@3x
[44pt]
5.8 458 375 x 812pt
60px
132px
147px
@3x
5.5 401 414 x 736pt
750 x 1334 px 40px
88px
640 x 1136 px 40px
88px
98px
@2x
4.7 326 375 x 667pt
iOS App界面设计规 范
方便进行标准的产品设计
2020/3/28
1
界面尺寸
2ቤተ መጻሕፍቲ ባይዱ20/3/28
2
iPhone系列界面尺寸
设备
iPhone X
6+/6S +/7+/8+ 6/6S/7/8 iPhone SE
分辨率 1125 x 2436 px 1242 x 2208 px
状态栏 导航栏高度 标签栏高度 缩放因子 主屏尺 ppi 开发尺寸
Maximum sizes 83px x 83px(27.67pt x 27.67pt @3x) 56px x 56px(28pt x 28pt @2x)
18
• 设计单色模板图标 • 图标scale factor设置为@2x • 图标保持一致 • 图标要清晰易读，实心或者线条要一致
• 用颜色来表述选中或未选中两种状态
19
20
字体
方便进行标准的产品设计
2020/3/28
21
22
• 文本永远都不应该小于22px，内容样式使用34px 的字号作为最大尺寸的默认文本尺寸设置。（个 别情况：文字最小使用20px的，如标签栏图标的 文字为20px;文字最大使用34px及以上的，如弹窗 按钮文字为36px）
Store App Store
1024px x 1024px (1024pt x 1024pt @1x)
16
Spotlight, Settings, and Notification Icon
Device iPhone
iPad Pro, iPad, iPad mini
Spotlight icon size 120px x 120px (40pt x 40pt @3x) 80px x 80px (40pt x 40pt @2x) 80px x 80px (40pt x 40pt @2x)
98px
@2x
4 326 320 x 568pt
iPhone5/5s /5c
640 x 1136 px
40px
88px
98px
iPhone4/4s
640 x 960 px
40px[20p t]
88px[44pt]
98px
@2x
4 326 320 x 568pt
@2x
3.5 326 320 x 480pt
5
6
7
iPhone X 全屏的安全区为734pt = 812 pt – 8
9
10
• 界面基本组成元素包括：状态栏（Status Bar）+导航栏 （NavigationBar）+标签栏（Tab Bar）/工具栏（Tool Tabs）+内 容区域
11
布局展示
12
13
• App Icon Attributes：App图标属性 • App Icon Sizes：App图标 大小 • Spotlight, Settings, and Notification Icon：搜索，设置和通知图标
your app is installed, as well as 120px x 120px (60pt x 60pt @2x)
larger icon for display in the App iPad Pro
iPad, iPad mini
167px x 167px (83.5pt x 83.5pt @2x) 152px x 152px (76pt x 76pt @2x)
15
Every app must supply small
icons for use on the home screen
and throughout the system once Device or context
iPhone
Icon size 180px x 180px (60pt x 60pt @3x)
14
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
3
• Pixels(像素)： Pixels是数字显示屏上我们可控制的最小物理元素， 在一个特定屏幕尺寸中可以有多个像素。
• Points(点)：Points用以衡量分辨率。根据屏幕的像素密度，一个 point可以包含多个像素（比如在常规的Retina屏上，1pt包含2 x 2 的像素）。
• 英寸：1英寸 = 2.54厘米
Device iPhone
iPad Pro, iPad, iPad mini
Device iPhone
iPad Pro, iPad, iPad mini
Settings icon size 87px x 87px (29pt x 29pt @3x) 58px x 58px (29pt x 29pt @2x) 58px x 58px (29pt x 29pt @2x)
4
• PPI(Pixel Per Inch by diagonal):表示沿着对角线，每英寸所拥有的 像素（Pixel）数目。PPI数值越高，代表显示屏能够以越高的密 度显示图像，即通常所说的分辨率越高、颗粒感越弱。
• 缩放因子:scale factor between logic point and device pixel