《iOSApp界面设计规范课件》由会员分享，可在线阅读，更多相关《iOSApp界面设计规范课件（25页珍藏版）》请在金锄头文库上搜索。
1、iOS App界面设计规范方便进行标准的产品设计界面尺寸iPhone系列界面尺寸设备设备分辨率分辨率状态栏高度状态栏高度导航栏高度导航栏高度标签栏高度标签栏高度缩放因子缩放因子主屏尺寸主屏尺寸ppi开发尺寸开发尺寸iPhoneX1125x2436px132px44pt132px44pt应该没变3x5.8458375x812pt6+/6S+/7+/8+1242x2208px60px132px147px3x5.5401414x736pt6/6S/7/8750x1334px40px88px98px2x4.7326375x667ptiPhoneSE640x1136px40px88px98px2x432
2、6320x568ptiPhone5/5s/5c640x1136px40px88px98px2x4326320x568ptiPhone4/4s640x960px40px20pt88px44pt98px2x3.5326320x480pt一.标准单位Pixels(像素)：Pixels是数字显示屏上我们可控制的最小物理元素，在一个特定屏幕尺寸中可以有多个像素。Points(点)：Points用以衡量分辨率。根据屏幕的像素密度，一个point可以包含多个像素（比如在常规的Retina屏上，1pt包含2 x 2的像素）。英寸：1英寸 =2.54厘米一.标准单位PPI(PixelPerInchbydiago
3、nal):表示沿着对角线，每英寸所拥有的像素（Pixel）数目。PPI数值越高，代表显示屏能够以越高的密度显示图像，即通常所说的分辨率越高、颗粒感越弱。缩放因子:scalefactorbetweenlogicpointanddevicepixel点和像素iPhone倍图 iPhone X 屏幕iPhoneX全屏的安全区为734pt=812pt34pt屏幕底部虚拟去home键-44pt(状态栏)iPhone X 安全区界面常见控件举例界面基本组成元素（建议高度）界面基本组成元素包括：状态栏（Status Bar）+导航栏（NavigationBar）+标签栏（Tab Bar）/工具栏（Tool
4、Tabs）+内容区域布局展示布局展示App Icon：App图标AppIconAttributes：App图标属性AppIconSizes：App图标 大小Spotlight,Settings,andNotificationIcon：搜索，设置和通知图标App Icon AttributesAttributeValueFormatPNGColorspacesRGBorP3SeeColorManagementLayersFlattenewithnotransparencyResolutionVariesSeeImageSizeandResolutionShapeSquarewithnoround
5、cornersApp Icon SizesDeviceorcontextIconsizeiPhone180pxx180px(60ptx60pt3x)120pxx120px(60ptx60pt2x)iPadPro167pxx167px(83.5ptx83.5pt2x)iPad,iPadmini152pxx152px(76ptx76pt2x)AppStore1024pxx1024px(1024ptx1024pt1x)Everyappmustsupplysmalliconsforuseonthehomescreenandthroughoutthesystemonceyourappisinstalle
6、d,aswellaslargericonfordisplayintheAppStoreSpotlight, Settings, and Notification IconDeviceNotificationiconsizeiPhone60pxx60px(20ptx20pt3x)40pxx40px(20ptx20pt2x)iPadPro,iPad,iPadmini40pxx40px(20ptx20pt2x)DeviceSpotlighticonsizeiPhone120pxx120px(40ptx40pt3x)80pxx80px(40ptx40pt2x)iPadPro,iPad,iPadmini
7、80pxx80px(40ptx40pt2x)DeviceSettingsiconsizeiPhone87pxx87px(29ptx29pt3x)58pxx58px(29ptx29pt2x)iPadPro,iPad,iPadmini58pxx58px(29ptx29pt2x)Navigation Bar and Toolbar Icon SizeUsethefollowingsizeforguidancewhenpreparingcustomnavigationbarandtoolbaricons,butadjustasneededtocreatebalance.TargetSizesMaxim
8、umsizes75pxx75px(25ptx25pt3x)83pxx83px(27.67ptx27.67pt3x)50pxx50px(25ptx25pt2x)56pxx56px(28ptx28pt2x)定制图标设计单色模板图标图标scalefactor设置为2x图标保持一致图标要清晰易读，实心或者线条要一致用颜色来表述选中或未选中两种状态Tab Bar Icon Size字体方便进行标准的产品设计字体的选择iOS版本中默认字体都是Helvetica NeueHelvetica Neue。建议中文字体Mac下用的是Heiti SC(Heiti SC(黑体黑体- -简简) )。Windows下则为华文细黑华文细黑。设计以iPhone6的尺寸进行设计，所以所有的字号都要使用双号数字。字体大小(以iPhone6及以下尺寸为例)文本永远都不应该小于22px，内容样式使用34px的字号作为最大尺寸的默认文本尺寸设置。（个别情况：文字最小使用20px的，如标签栏图标的文字为20px;文字最大使用34px及以上的，如弹窗按钮文字为36px）为了区分标题与内容样式，标题样式使用更重的值，可以是颜色或字体大小区导航栏的文本使用相同的字号，值为34px。命名方便进行标准的产品设计命名格式
