iOS_App界面设计规范ppt课件.ppt

iOSApp界面设计规范 方便进行标准的产品设计 2020 4 8 1 界面尺寸 2020 4 8 2 iPhone系列界面尺寸 3 一 标准单位 Pixels 像素 Pixels是数字显示屏上我们可控制的最小物理元素 在一个特定屏幕尺寸中可以有多个像素 Points 点 Points用以衡量分辨率 根据屏幕的像素密度 一个point可以包含多个像素 比如在常规的Retina屏上 1pt包含2x2的像素 英寸 1英寸 2 54厘米 4 一 标准单位 PPI PixelPerInchbydiagonal 表示沿着对角线 每英寸所拥有的像素 Pixel 数目 PPI数值越高 代表显示屏能够以越高的密度显示图像 即通常所说的分辨率越高 颗粒感越弱 缩放因子 scalefactorbetweenlogicpointanddevicepixel 5 点和像素 6 iPhone倍图 7 iPhoneX屏幕 iPhoneX全屏的安全区为734pt 812pt 34pt 屏幕底部虚拟去home键 44pt 状态栏 8 iPhoneX安全区 9 界面常见控件举例 10 界面基本组成元素 建议高度 界面基本组成元素包括 状态栏 StatusBar 导航栏 NavigationBar 标签栏 TabBar 工具栏 ToolTabs 内容区域 11 布局展示 12 布局展示 13 AppIcon App图标 AppIconAttributes App图标属性AppIconSizes App图标大小Spotlight Settings andNotificationIcon 搜索 设置和通知图标 14 AppIconAttributes 15 AppIconSizes Everyappmustsupplysmalliconsforuseonthehomescreenandthroughoutthesystemonceyourappisinstalled aswellaslargericonfordisplayintheAppStore 16 Spotlight Settings andNotificationIcon 17 NavigationBarandToolbarIconSize Usethefollowingsizeforguidancewhenpreparingcustomnavigationbarandtoolbaricons butadjustasneededtocreatebalance 18 定制图标 设计单色模板图标图标scalefactor设置为 2x图标保持一致图标要清晰易读 实心或者线条要一致用颜色来表述选中或未选中两种状态 19 TabBarIconSize 20 字体 方便进行标准的产品设计 2020 4 8 21 字体的选择 iOS版本中默认字体都是HelveticaNeue 建议中文字体Mac下用的是HeitiSC 黑体 简 Windows下则为华文细黑 设计以iPhone6的尺寸进行设计 所以所有的字号都要使用双号数字 22 字体大小 以iPhone6及以下尺寸为例 文本永远都不应该小于22px 内容样式使用34px的字号作为最大尺寸的默认文本尺寸设置 个别情况 文字最小使用20px的 如标签栏图标的文字为20px 文字最大使用34px及以上的 如弹窗按钮文字为36px 为了区分标题与内容样式 标题样式使