移动UI设计规范1.0

《移动UI设计规范1.0》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、公司移动UI设计规范说明书移动UI设计规范说明书修改记录制定日期生效日期制定/修订内容摘要版本拟稿审查2015.092015.09初稿0.12015.082015.08修订1.01、前言本文档主要为UI设计师和前端工程师提供设计参考和最佳实践，避免相互之间出现技术衔接脱节的问题。文档将由设计尺寸、界面元素、设计细节、切图细节四个部分组成，分别说明如下。2、设计尺寸本节主要阐明目前主流浏览设备和软件中的界面尺寸，相关设备和软件分别为iPhone、iPad、Android、Web。详细说明如下2.1iPhon

2、eiPhone界面尺寸设备分辨率状态栏高度导航栏高度工具栏高度6Plus1080x192054px132px146px6750x113440px88px98px5S640x113640px88px98px5C640x113640px88px98px5640x113640px88px98px4S640x96040px88px98px4640x96040px88px98px2/14移动UI设计规范说明书iPhone图标尺寸设备分辨率圆角大小IOS6-90px-1024px图标宽度x0.175IOS790px-

3、1024px图标宽度x0.225图标类型6Plus@36&5@24S@2iPad@2iPad2@1AppIcon180x180120x120120x120156x15676x76AppStoreIcon1024x10241024x10241024x10241024x10241024x1024Spotlight搜索Icon120x12080x8080x8080x8040x403/14移动UI设计规范说明书图标类型6Plus@36&5@24S@2iPad@2iPad2@1工具和导航栏图标66x6644x444

4、4x4444x4422x22标签栏图标75x7550x5050x5050x5025x252.2iPadiPad界面尺寸设备分辨率状态栏高度导航栏高度工具栏高度6&Air22048x153640px88px98px5&Air&mini22048x153640px88px98px4&mini2048x153640px88px98px32048x153640px88px98px21024x76820px44px49px11024x76820px44px49px4/14移动UI设计规范说明书iPad图标尺寸设备分

5、辨率圆角大小IOS6-90px-1024px图标宽度x0.175IOS790px-1024px图标宽度x0.225图标类型iPad@2iPad2@1AppIcon156x15676x76AppStoreIcon1024x10241024x1024Spotlight搜索Icon80x8040x40工具和导航栏图标44x4422x22标签栏图标50x5025x252.3Android屏幕尺寸指实际的屏幕物理尺寸，以屏幕对角线来测量。为方便起见，Android把屏幕大小分为广义的四类：小、正常、大、特大。像素代

6、表屏幕上一个物理的像素点。5/14移动UI设计规范说明书屏幕密度为解决Android设备中屏幕的碎片化，Android厂商引入了DP的概念。即一定尺寸屏幕显示像素的数量，因此有了四类屏幕密度：低（120dpi）,中（160dpi）,高（240dpi），超高（320dpi），而像素=DP*(dpi/160)。例如一个240dpi的屏幕里，1DP=（240/160）=1.5px。因此，设计尺寸确认后，以图标为例，需向上或向下做小、正常、大、特大，以及低、中、高、超高的图标尺寸与密度来适配不同的机型。典型的设计

7、尺寸320dp：一个普通的手机屏幕（240x320,320x480,480x800）480dp：一个普通的平板（480x800）600dp：7寸平板（600x1024）720dp：10寸平板（720x1280,800x1280）Android模拟机尺寸屏幕大小低密度中密度高密度超高密度小屏幕240x320480x640240x400480x800正常屏幕320x480640x960240x432600x1024480x800大屏幕480x800600x1024768x10241920x11202048x1

8、536特大屏幕600x1024768x12801920x12002560x1600720x1280安卓设计尺寸建议为720x1280或是480x8006/14移动UI设计规范说明书Android图标尺寸屏幕大小启动图标标签栏图标列表图标320x48048x4832x3216x16480x80072x7248x4824x24640x960600x1024768x102496x9664x6432x32720x12801080x19