码迷,mamicode.com
首页 > 移动开发 > 详细

APP,webapp 设计相关资料汇集区

时间:2015-09-12 19:01:35      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:

(1)、@2x

iPhone3GS时代,我们为一个应用提供图标(或按钮提供贴图),只需要icon.png。针对现在的iPhone4~6 Retina显示屏,需要制作额外的@2x高分辨率版本。

    例如在iPhone3GS中,scale=1,用的图标是50x50pixel(logicalimage.size=50x50point);在iPhone4~6中,scale=2,则需要100×100pixel(logical image.size=50x50point,乘以image.scale=dimensions in pixels),并且命名为icon@2x.png。

    如果APP要同时兼容iPhone3GS~iPhone6,则需要提供icon.png/icon@2x.png两种分辨率的图片。

(2)@3x

    @3x means a new “triple” retina resolution, where eachuser interface point is represented by three display pixels. A single @2x pointis a 2 × 2 square of 4 pixels; an @3x point is a 3 × 3 square of 9 pixels.”

    iPhone6+在实际渲染时,downsampling/1.15(1242×2208->1080×1920),准确的讲,应该是@2.46x。苹果为方便开发者用的是@3x的素材,然后再缩放到@2.46x上。

1、iPhone 6/6Plus UI界面设计和适配尺寸规范

2、iPhone 6/6Plus APPui界面设计规范以及界面适配

3、最新WebAPP设计指南规范:适配iphone6技巧

    如果APP要同时兼容iPhone3GS~iPhone6+,则需要提供icon.png/icon@2x.png/icon@3x.png三种分辨率的图片。

    需要注意的是,iOS APP图标的尺寸切图命名规范都需要遵守相关规范

(3)高倍图文件命名

    对于iPhone3、4/5/6、6+三类机型,需要按分辨率提供相应的高倍图并且文件名添加相应后缀,否则会拉伸(stretchable/resizable)失真(模糊或边角出现锯齿)。

 比如:bg-xxx@2x.png、btn-xxx@2x.png 、icon-xxx@2x.png

如bg-xxx@3x.png、btn-xxx@3x.png 、icon-xxx@3x.png

切图宽和高 必须的偶数。

 

 

 

http://www.szui.net/news/company/net/3506.html

http://www.25xt.com/appdesign

APP,webapp 设计相关资料汇集区

标签:

原文地址:http://www.cnblogs.com/porter/p/4803404.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!