UI切图与适配

1、选择一种尺寸作为设计和开发基准

定义一套适配规则，自动适配剩下两种尺寸

特殊适配效果给出设计效果

iphone5/5s/6/6plus的长宽比均为9:16

750/1080≈1334/1920≈0.68≈2/3

      750x1.5=1125    1134x1.5=2001

iphone6p有两种显示模式，标准模式分辨率为1242x2208，放大模式分辨率为1125x2001(iphone6的1.5倍)

2、750px(iphone6)做设计稿，除图片外所有设计元素用矢量路径来做

750px的设计稿标注，同比放大1.5倍，生成1125px再切图 @3x切图

完成完成iphone6的开发，开发使用自动布局（auto layout）

向上调整制作iphone6plus  向下调整制作iphone5

文字流式（一行行排  大屏的话行数变少）

控件弹性（高度不变，宽度变大时调整元素间距或者元素右对齐实现自适应，这样屏幕大时垂直方向可以显示更多内容，发挥大屏幕的优势）

图片等比例缩放

3、ios切图的一些注意事项

图标：1024x1024px  圆角180px（上传直角）

所有图形部件尺寸必须为偶数，样式中阴影、发光、描边的数值也必须为偶数

所有可点击的部件必须大于88x88px

建议尽量使用可平铺图案设计界面(如：切为2px的一个竖直渐变竖条)

若切圆角半径为a的按钮 则切为宽度为2a+2px的

意思是能重复的都切为2px  不能重复的就都保留 如圆角

中文字体为Heiti SC 所有字体使用偶数字号进行设计

所有切图必须为偶数

所有按钮需有两种状态——正常状态和按下状态

一般情况下切图格式为png24(也可以用jpg)

4、命名

图性质_功能相关描述_图片描述（可无）_状态说明（可无）@2x.png

bg_booksnum_pressed@2x.png

ico_arrow_blue@2x.png

btn_blue_pressed@3x.png

pic_books_blue@3x.png

bg_main-568h.png

5、屏幕尺寸

1英寸=2.54厘米

6、屏幕分辨率

横纵方向上的像素点数 1px=1个像素点 常纵x横  如：1920x1080

7、屏幕像素密度

每英寸上的像素点数 dpi   分辨率越高 

安卓

Android界面尺寸：480x854   720x1280(建议设计尺寸)  1080x1920

一些公式       720p(720x1080)                 px=dp*2

1080p(1080x1920)           px=dp*3

注意事项  图标必须为正方形  必须为偶数 若占不满  留的空隙必须为偶数 

xx.9.png

安卓最小空间48dp

2、按钮命名

按钮常态：normal                                   刷新：refresh

按钮选中状态：selected                        背景：bg

按钮按下状态：down                              用户：user

按钮不可用状态：dis                              删除：del

导航条：nav                                             按钮：btn

搜索：search     图标：icon

返回：back       弹出窗口：popup

主菜单栏：tab                                          编辑：edit

个人资料：profile     添加：add

只有安卓才有.9