文档介绍：公司移动UI设计规范说明书移动UI设计规范说明书 2/ 14 修改记录制定日期生效日期制定/ 修订内容摘要版本拟稿审查 初稿 修订 1、前言本文档主要为UI设计师和前端工程师提供设计参考和最佳实践,避免相互之间出现技术衔接脱节的问题。文档将由设计尺寸、界面元素、设计细节、切图细节四个部分组成,分别说明如下。 2、设计尺寸本节主要阐明目前主流浏览设备和软件中的界面尺寸,相关设备和软件分别为iPhone、iPad、Android、Web。详细说明如下 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 移动UI设计规范说明书 3/ 14 iPhone图标尺寸设备分辨率圆角大小 IOS6- 90px-1024px IOS7 90px-1024px 图标类型 ******@3 6&******@2 ******@2 ******@2 ******@1 App Icon 180x180 120x120 120x120 156x156 76x76 AppStore Icon 1024x1024 1024x1024 1024x1024 1024x1024 1024x1024 Spotlight 搜索Icon 120x120 80x80 80x80 80x80 40x40 移动UI设计规范说明书 4/ 14 图标类型 ******@3 6&******@2 ******@2 ******@2 ******@1 工具和导航栏图标 66x66 44x44 44x44 44x44 22x22 标签栏图标 75x75 50x50 50x50 50x50 25x25 iPad iPad界面尺寸设备分辨率状态栏高度导航栏高度工具栏高度 6&Air2 2048x1536 40px 88px 98px 5&Air&mini2 2048x1536 40px 88px 98px 4&mini 2048x1536 40px 88px 98px 3 2048x1536 40px 88px 98px 2 1024x768 20px 44px 49px 1 1024x768 20px 44px 49px 移动UI设计规范说明书 5/ 14 iPad图标尺寸设备分辨率圆角大小 IOS6- 90px-1024px IOS7 90px-1024px 图标类型 ******@2 ******@1 App Icon 156x156 76x76 AppStore Icon 1024x1024 1024x1024 Spotlight 搜索Icon 80x80 40x40 工具和导航栏图标 44x44 22x22 标签栏图标 50x50 25x25 Android 屏幕尺寸指实际的屏幕物理尺寸,以屏幕对角线来测量。为方便起见,Android把屏幕大小分为广义的四类:小、正常、大、特大。像素代表屏幕上一个物理的像素点。移动UI设计规范说明书 6/ 14 屏幕密度为解决Android设备中屏幕的碎片化,Android厂商引入了DP的概念。即一定尺寸屏幕显示像素的数量,因此有了四类屏幕密度:低(120dpi),中(160dpi), 高(240dpi),超高(320dpi),而像素= DP*(dpi/160)。例如一个240dpi的屏幕里,1DP = (240/160)=。因此,设计尺寸确认后,以图标为例,需向上或向下做小、正常、大、特大,以及低、中、高、超高的图标尺寸与密度来适配不同的机型。典型的设计尺寸 320dp:一个普通的手机屏幕(240x320,320x480,480x800) 480dp:一个普通的平板(480x800) 600dp:7寸平板(600x1024) 720dp:10寸平板(720x1280,800x1280) Android模拟机尺寸屏幕大小低密度中密度高密度超高密度小屏幕 240x320 480x640 正常屏幕 240x400 240x432 320x480 480x800 600x1024 640x960 大屏幕 480x800 480x800 600x1024 特大屏幕 600x1024 768x1024 768x1280