App设计体系之切图

262天前发布

原创文章 / UI / 教程
渐渐见减减简 原创,如需商业用途或转载请与渐渐见减减简联系,谢谢配合。

App设计体系之切图

1、切图尺寸

iOS最小点击尺寸为44,增量为4的倍数,Android最小点击尺寸是48px,增量为8的倍数。

为了保证icon的完整性,icon和切图区域的四边要有边距,不要贴边。

iOS只需导出@2x和@3x,Android只需导出xxxhdpi、xxhdpi、xhdpi,需要注意的是,导出Android端切图时会以xxxhdpi、xxhdpi、xhdpi分别生成文件夹,而导出iOS端切图前需要建立好文件夹。当格式为svg和.9.png,只需导出原比例尺寸大小的切图。


2、命名类型


2.1 功能类型


2.2 资源类型


2.3 常见状态


2.4 位置排序


3、命名规则

启动页

启动图片:default.png

启动logo:default_logo.png



登录页

登录背景:login_bg.png 

登录logo:login_logo.png 

登录按钮:login_btn.png

登录按钮选中状态:Login_btn_pre.png


导航栏 

nav_功能描述.png

导航菜单:nav_menu.png

导航菜单选中状态:nav_menu_pre.png


按钮

btn_色彩/功能描述.png

蓝色按钮:btn_blue.png

发布正常:btn_publish_normal.png   

点击:btn_publish_highlight.png

禁用:btn_publish_disable.png

按下:btn_publish_pressed.png

选中:btn_xxx_selected.png


其他

图标:icon_xxx.png

图片:pic_xxx.png/img_xxx.png

照片:pho_xxx.png



4、点九图

左上两条线是限制可拉伸区域,两者的原理是一样的,当没有左边黑线时,纵向拉伸会造成圆角变形。

左边加一条黑线或黑点,相当于把原来的图形分为三个部分,纵向拉伸时,只会拉伸黑线的部分,这样无论拉伸到多高,都不会变形。


右下两条线是控制内容区域的,以右边线为例,如果没有右边那条黑线,相当于没有限制,在切图上输入内容,内容会撑满整个背景图。



加上右边黑线后,相当于把原来的图形分为三个部分,内容只显示在中间区域。


上右两边都加上黑线后



最后导出一张后缀名为“*.9.png”格式的图片,图片上下左右各增加了1px的黑线,其中,左上为1*1的黑线,黑线颜色必须是#000000,透明度100%,并且图像四边不能出现半透明像素,黑线离图形要有1px的间距。


查看点九图的说明

9
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息