iOS-App界面设计规范课件.ppt

1、iOS App界面设计规范方便进行标准的产品设计2023-5-191界面尺寸2023-5-192iPhone系列界面尺寸设备设备分辨率分辨率状态栏状态栏高度高度导航栏高度导航栏高度标签栏高度标签栏高度缩放因子缩放因子主屏尺主屏尺寸寸ppi开发尺寸开发尺寸iPhone X1125 x 2436 px132px44pt132px44pt应该没变3x5.8458375 x 812pt6+/6S+/7+/8+1242 x 2208 px60px132px147px3x5.5401414 x 736pt6/6S/7/8750 x 1334 px40px88px98px2x4.7326375 x 667p

2、tiPhone SE640 x 1136 px40px88px98px2x4326320 x 568ptiPhone5/5s/5c640 x 1136 px40px88px98px2x4326320 x 568ptiPhone4/4s640 x 960 px40px20pt88px44pt98px2x3.5326320 x 480pt3一.标准单位 Pixels(像素)：Pixels是数字显示屏上我们可控制的最小物理元素，在一个特定屏幕尺寸中可以有多个像素。Points(点)：Points用以衡量分辨率。根据屏幕的像素密度，一个point可以包含多个像素（比如在常规的Retina屏上，1pt包

3、含2 x 2的像素）。英寸：1英寸=2.54厘米4一.标准单位 PPI(Pixel Per Inch by diagonal):表示沿着对角线，每英寸所拥有的像素（Pixel）数目。PPI数值越高，代表显示屏能够以越高的密度显示图像，即通常所说的分辨率越高、颗粒感越弱。缩放因子:scale factorbetween logic point and device pixel5点和像素6iPhone倍图 7iPhone X 屏幕iPhone X 全屏的安全区为734pt=812 pt 34pt屏幕底部虚拟去home键-44pt(状态栏)8iPhone X 安全区9界面常见控件举例10界面基本组成

4、元素（建议高度）界面基本组成元素包括：状态栏（Status Bar）+导航栏（NavigationBar）+标签栏（Tab Bar）/工具栏（Tool Tabs）+内容区域11布局展示12布局展示13App Icon：App图标 App Icon Attributes：App图标属性 App Icon Sizes：App图标 大小 Spotlight,Settings,and Notification Icon：搜索，设置和通知图标14App Icon AttributesAttributeValueFormatPNGColor spacesRGB or P3See Color Managem

5、entLayers Flattene with no transparencyResolutionVariesSee Image Size and ResolutionShapeSquare with no round corners15App Icon SizesDevice or contextIcon sizeiPhone180px x 180px(60pt x 60pt 3x)120px x 120px(60pt x 60pt 2x)iPad Pro167px x 167px(83.5pt x 83.5pt 2x)iPad,iPad mini152px x 152px(76pt x 7

6、6pt 2x)App Store1024px x 1024px(1024pt x 1024pt 1x)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 Store16Spotlight,Settings,and Notification IconDeviceNotification icon sizeiPhone60px x 6

7、0px(20pt x 20pt 3x)40px x 40px(20pt x 20pt 2x)iPad Pro,iPad,iPad mini40px x 40px(20pt x 20pt 2x)DeviceSpotlight icon sizeiPhone120px x 120px(40pt x 40pt 3x)80px x 80px(40pt x 40pt 2x)iPad Pro,iPad,iPad mini80px x 80px(40pt x 40pt 2x)DeviceSettings icon sizeiPhone87px x 87px(29pt x 29pt 3x)58px x 58p

8、x(29pt x 29pt 2x)iPad Pro,iPad,iPad mini58px x 58px(29pt x 29pt 2x)17Navigation 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.Target SizesMaximum sizes75px x 75px(25pt x 25pt 3x)83px x 83px(

9、27.67pt x 27.67pt 3x)50px x 50px(25pt x 25pt 2x)56px x 56px(28pt x 28pt 2x)18定制图标 设计单色模板图标 图标scale factor设置为2x 图标保持一致 图标要清晰易读，实心或者线条要一致 用颜色来表述选中或未选中两种状态19Tab Bar Icon Size20字体方便进行标准的产品设计2023-5-1921字体的选择 iOS版本中默认字体都是H He el lv ve et ti ic ca a N Ne eu ue e。建议中文字体Mac下用的是H He ei it ti i S SC C(黑黑体体-简简)。Windows下则为华华文文细细黑黑。设计以iPhone6的尺寸进行设计，所以所有的字号都要使用双号数字。22字体大小(以iPhone6及以下尺寸为例)文本永远都不应该小于22px，内容样式使用34px的字号作为最大尺寸的默认文本尺寸设置。（个别情况：文字最小使用20px的，如标签栏图标的文字为20px;文字最大使用34px及以上的，如弹窗按钮文字为36px）为了区分标题与内容样式，标题样式使用更重的值，可以是颜色或字体大小区 导航栏的文本使用相同的字号，值为34px。23命名方便进行标准的产品设计2023-5-1924命名格式25