移动UI设计规范.docxVIP

移动UI设计规范 移动UI设计规范 移动UI设计规范 企业挪动 UI 设计规范 说明书 挪动 UI 设计规范说明书 改正记录 拟订日期 奏效日期 拟订 / 订正 内容纲要 版本 拟稿 审察 2015.09 2015.09 草稿 0.1 2015.08 2015.08 订正 1.0 1、序言 本文档主要为 UI 设计师和前端工程师供给设计参照和最正确实践，防止互相 之间出现技术连接脱节的问题。文档将由设计尺寸、界面元素、设计细节、切图 细节四个部分构成，分别说明以下。 2、设计尺寸 本节主要说明当前主流阅读设施和软件中的界面尺寸， 有关设施和软件分别 为 iPhone 、iPad 、Android 、Web 。详尽说明以下 2.1 iPhone iPhone 界面尺寸 设施 分辨率 状态栏高度 导航栏高度 工具栏高度 6Plus 1080x1920 54px 132px 146px 6 750x1134 40px 88px 98px 5S 640x1136 40px 88px 98px 5C 640x1136 40px 88px 98px 5 640x1136 40px 88px 98px 4S 640x960 40px 88px 98px 4 640x960 40px 88px 98px 2/14 挪动 UI 设计规范说明书 iPhone 图标尺寸 设施 分辨率 圆角大小 IOS6- 90px-1024px 图标宽度 x0.175 IOS7 90px-1024px 图标宽度 x0.225 图标种类 6Plus@3 65@2 4S@2 iPad@2 iPad2@1 App Icon 180x180 120x120 120x120 156x156 76x76 App Store Icon 1024x1024 1024x1024 1024x1024 1024x1024 1024x1024 Spotlight 搜寻 Icon 120x120 80x80 80x80 80x80 40x40 3/14 挪动 UI 设计规范说明书 图标种类 6Plus@3 65@2 4S@2 iPad@2 iPad2@1 工具和导航栏图标 66x66 44x44 44x44 44x44 22x22 标签栏图标 75x75 50x50 50x50 50x50 25x25 2.2 iPad iPad 界面尺寸 设施 分辨率 状态栏高度 导航栏高度 工具栏高度 6Air2 2048x1536 40px 88px 98px 5Airmini2 2048x1536 40px 88px 98px 4mini 2048x1536 40px 88px 98px 3 2048x1536 40px 88px 98px 2 1024x768 20px 44px 49px 1 1024x768 20px 44px 49px 4/14 挪动 UI 设计规范说明书 iPad 图标尺寸 设施 分辨率 圆角大小 IOS6- 90px-1024px 图标宽度 x0.175 IOS7 90px-1024px 图标宽度 x0.225 图标种类 iPad@2 iPad2@1 App Icon 156x156 76x76 App Store Icon 1024x1024 1024x1024 Spotlight 搜寻 Icon 80x80 40x40 工具和导航栏图标 44x44 22x22 标签栏图标 50x50 25x25 2.3 Android 屏幕尺寸 指实质的屏幕物理尺寸，以屏幕对角线来丈量。为方便起见， Android 把屏幕大 小分为广义的四类：小、正常、大、特大。 像素 代表屏幕上一个物理的像素点。 5/14 挪动 UI 设计规范说明书 屏幕密度 为解决 Android 设施中屏幕的碎片化， Android 厂商引入了 DP 的观点。即必定尺寸屏幕显示像素的数目， 所以有了四类屏幕密度： 低（120dpi ）,中（160dpi ）,高（ 240dpi ），超高（ 320dpi ），而像素 = DP*(dpi/160) 。 比如一个 240dpi 的屏幕里， 1DP = （240/160 ）=1.5px 。 所以，设计尺寸确认后，以图标为例，需向上或向下做小、正常、大、特大，以及低、中、高、超高的图标尺寸与密度来适配不一样的机型。 典型的设计尺寸 320dp ：一个一般的手机屏幕（ 240x320,320x480,480x800 ） 480dp ：一个一般的平板（ 480x800 ） 600dp ：7 寸平板（ 600x1024 ） 720dp ：10 寸平板（ 720x1280,800x1280 ） Android 模拟机尺寸 屏幕大小 低密度 中密度 高