文件切图命名规范标准

安卓切图规范安卓切图规范是为了保证在不同分辨率和尺寸的安卓设备上都能够正常显示和使用设计图，以下是一份包含1000字的安卓切图规范：一、基本概念1. 密度（Density）：安卓设备根据屏幕的物理尺寸和分辨率来确定屏幕的密度，一般以 DPI（每英寸点数）来衡量。

主要分为以下几种密度：ldpi（低密度）、mdpi（中密度）、hdpi （高密度）、xhdpi（超高密度）、xxhdpi（超超高密度）和xxxhdpi（超超超高密度）。

2. 分辨率（Resolution）：设备屏幕的水平和垂直像素数量。

常见的分辨率有：320x480、480x800、720x1280、1080x1920等。

3. 像素（Pixel）：屏幕上的一个点，是显示图像的最小单元。

二、设计规范1. 分辨率选择：设计图应根据目标设备的分辨率进行选择，以确保图像在不同分辨率设备上的正常显示。

2. 密度选择：设计图应根据目标设备的密度选择相应的分辨率进行设计，以确保图像在不同密度设备上的正常显示。

3. 状态栏和导航栏：设计图中应包括状态栏和导航栏的高度，以确保内容在不同设备上的显示布局正常。

4. 图标尺寸：根据图标的功能和使用场景选择适当的尺寸，一般推荐使用 48dp、72dp、96dp 等尺寸。

5. 图片素材选择：选择合适的图片素材，保证图像质量并尽量减小文件大小，减少应用占用空间。

6. 背景图像：在设计背景图像时，应选择能够平铺且无缝连接的图像，以适应不同分辨率的设备。

7. 字体选择：选择适合在不同密度设备上显示的字体大小，确保文字清晰可见。

8. 切勿纯色图像：避免使用纯色图像作为按钮、图标等元素的背景，因为在不同设备上可能会出现颜色差异。

9. 容错设计：针对不同设备可能出现的屏幕旋转、分辨率变化等情况进行容错设计，以确保图像在不同状态下都能正常显示。

10. 兼容性测试：在设计完成后，应进行兼容性测试，确保设计图在不同设备上的显示效果符合预期。

UI系列干货-切图命名我们都知道UI设计切图是最重要的设计输出物，切图输出的命名规范不规范也直接影响到工程师对设计效果的还原度。

网上也有很多这样的教程，大多比较笼统，今天我们就从两个方面0基础教你学会切图和命名的方法。

切 图一、设计切图的原则设计切图输出的目的是跟下游的工程师团队协同工作，那么在团队协作过程中，首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求。

其次，切图输出应该尽可能降低工程师的开发工作量，避免因切图输出而导致不必要的工作量。

所以我们要在程序里放置多套切图，然后让程序判断「主人」的手机是什么型号，显示不同的切图。

这样才能够完美地呈现给用户最好的体验。

最后，输出的切图应当尽可能的压缩大小，以降低APP的总大小，提升用户使用时的加载速度。

所以切图输出应当做到切图精准、便与协同和压缩大小。

1. 切图资源尺寸必须为偶数众所周知，智能手机的屏幕大小都是偶数值，比如iPhone 7的屏幕分辨率是750*1334 px。

切图资源尺寸必须为双数，是为了保证切图资源在工程师开发时是高清显示。

因为1px是智能手机能够识别的最小单位，换句话说就是1像素不能在智能手机上被分为两份各0.5px。

所以如果是单数切图的话，手机系统就会自动拉伸切图，从而导致切图元素边缘模糊，造成开发出来的APP界面效果与原设计效果差距甚远。

图片2. 图标切图输出多个平台尺寸在切图资源输出中，图标切图输出是至关重要的部分。

在开发中由于各机型的屏幕分辨率不同，需要针对一些大屏机型进行适配。

为了适配大分辨率手机（例如iPhone 7plus），图标在切图的时候需要输出@2x和@3x的切图，其中@2x的切图可以满足双平台大部分机型的适配要求，@3x是用来适配iPhone 手机的各种plus版本（后边会有文章专门讲解关于适配的问题）。

@3x是@2x尺寸的1.5倍，例如一个图标切图@2x尺寸是44px，那么@3x尺寸是66px。

background-image
默认图片 启动 注册
cut-off rule login list
home browse like dislike collect comment ranked location tags signup audio viedio system manuscript time address pull-down list Filter countdown number more settings arrow download upload share next release code tool bar new add pdl vd
广告 详情 搜索 内容 编辑 msg 提示信息 左 中 右 pop img 弹出 图片 标题 刷新 用户 ip cbb ddm 输入 下拉框 下拉菜单 按钮文字 rb cb Pbar 单选框 复选框 进度条 边框 男性 女性 签到 举报 前一步 模版 Sbar 状态条 放大 缩小
全部清除 底部 状态 摘要 热点 服务 子导航 pho 照片 鼠标悬停 已浏览 page 个人主页 语音 id 身份认证 家庭风采 内心独白 星币 话题 吃饭 电影 旅游 其他 播放 停止 房 荣誉 离婚 邮箱 开 投稿 友情链
删除按钮
删除按钮选中状态
消息按钮
消息按钮选中状态
搜索按钮
搜索按钮选中状态
列表页收藏按钮
个人中心
星空按钮
星空按钮选中状态
发现按钮
发现按钮选中状态
幸福学院按钮
幸福学院按钮选中状态
我按钮
我按钮选中状态
首页背景
首页广告图
简写 d n
中文 不可点 一般 公共 发现
hpcollege 幸福学院 nav btn bg cor 导航栏 按钮 背景图片 分割线 登录 列表

切图命名规范切图命名是在进行图片切割时，给切下来的图片文件起一个易于理解和标识的名字。

一个规范的命名能够方便团队协作和管理，提高工作效率。

以下是一些常用的切图命名规范的建议，总结如下：1. 统一前缀 - 可以根据项目或模块名称给切图文件添加统一的前缀，比如"home_"表示首页相关、"nav_"表示导航相关等。

这样可以便于查找和识别不同模块的切图。

2. 功能描述 - 使用简短的英文单词或短语来描述切图的功能或用途，比如"logo"表示网站logo、"button"表示按钮、"banner"表示广告横幅等。

注意避免使用含糊或重复的描述词。

3. 元素类型 - 如果切图是某个特定元素的一部分，可以在命名中添加元素的类型，比如"icon_"表示图标、"bg_"表示背景、"pic_"表示图片等。

4. 状态和尺寸 - 如果切图有不同的状态或尺寸，可以在命名中添加相关信息，比如"_hover"表示鼠标悬停状态、"_active"表示激活状态、"_small"表示小尺寸等。

这样可以便于组织和管理不同状态或尺寸的切图。

5. 编号或版本 - 如果同一功能或元素有多个切图，可以使用序号或版本号来区分，比如"btn_01"、"btn_02"等。

这样可以避免命名冲突，并且方便追踪和管理不同版本的切图。

6. 文件格式 - 如果切图需要导出不同的文件格式，可以在命名中添加相关的文件后缀，比如".jpg"表示JPEG格式、".png"表示PNG格式等。

这样可以帮助区分不同的文件格式和用途。

7. 文件夹结构 - 在切图文件的存放位置上，可以使用文件夹的方式来组织和管理切图文件。

arcserver 切片文件命名规则ArcServer切片文件命名规则ArcServer是一种用于构建和管理GIS（地理信息系统）应用程序的软件平台。

它能够将地理数据转化为切片文件，以便在Web地图中进行显示和浏览。

切片文件命名规则是保证切片文件组织结构清晰、易于管理的重要一环。

本文将介绍ArcServer切片文件命名规则，以及如何根据标题来正确命名切片文件。

一、切片文件命名规则概述切片文件命名规则主要包括以下几个方面的内容：图层名称、缩放级别、切片的行列号。

1. 图层名称图层名称是切片文件的基本标识，用于表示切片文件所对应的地理数据。

图层名称应该简洁明了，能够准确描述地理数据的内容。

例如，如果切片文件对应的是某个城市的道路图层，则可以将图层名称命名为“Road”。

2. 缩放级别缩放级别是切片文件的重要属性，用于表示切片的显示比例。

一般来说，缩放级别越小，切片文件对应的地理范围越大。

缩放级别通常采用数字来表示，例如0表示最大的缩放级别，而20表示最小的缩放级别。

在命名切片文件时，应该将缩放级别作为文件名的一部分，以便于快速识别切片文件对应的显示比例。

3. 切片的行列号切片的行列号是切片文件的另一个重要属性，用于表示切片在整个切片网格中的位置。

切片的行列号通常采用数字来表示，例如(0,0)表示第一行第一列的切片，(1,0)表示第二行第一列的切片。

在命名切片文件时，应该将行列号作为文件名的一部分，以便于快速定位和管理切片文件。

二、切片文件命名规则示例下面是一个切片文件命名规则的示例：图层名称_缩放级别_行号_列号例如，如果我们要命名一个道路图层的切片文件，其缩放级别为10，行号为5，列号为3，那么可以将该切片文件命名为“Road_10_5_3”。

三、命名规范和注意事项在命名切片文件时，需要遵循以下规范和注意事项：1. 使用下划线作为分隔符，以提高文件名的可读性。

2. 图层名称、缩放级别、行列号之间不要使用空格或特殊字符，以避免命名冲突或命名错误。

PS:android下 input、btn、list 等图片可用.9.png格式图片
导航栏
导航栏按钮命名规则：
nav_（功能描述）.png
如: nav_menu.png\nav_menu_pre.png (同一按钮选中前后两种状态命名)
PS:同一区域按钮切图大小一致
左侧导航
左侧导航切图名规则：
leftbar_（功能描述）.png
如: leftbar_info.png\leftbar_info_pre.png (个人中心)
选项卡
菜单按钮命名规则：
tab_（功能描述）.png
如: tab_set.png\nav_set_pre.png (设置)
主界面
主页面命名规则：
Home（界面名称）_（功能属性简写+描述）.png
如: home_btn_recommended.png (热门推荐)
如: defoult.png\defoult2x.png\defoult-7202x.png
PHale Waihona Puke :同一区域按钮切图大小一致defoult2x.png\defoult-7202x.png 为IOS命名(-720适配720px宽)
登录界面
启动界面命名规则：
login_bg.png (登录背景) login_logo.png (登录logo) login_input.png (输入框) login_input_pre.png (输入框选中状态) Login_btn.png （登录按钮） Login_btn_pre.png （登录按钮选中状态）
可重复使用按钮命名规则：
btn_（功能属性或色彩均可）.png
如: btn_blue.png /btn_blue.9.png (蓝色按钮)

01 命名规范文件命名的原则：以最少的字母达到最轻易理解的意义。

一般文件及目录命名规范：每一个目录中应该包含一个缺省的html 文件，文件名同一用index.htm文件名称同一用小写的英文字母、数字和下划线的组合尽量按单词的英语翻译为名称。

例如：feedback(信息反馈)，aboutus(关于我们)多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。

例如：news_01.htm。

留意，数字位数与文件个数成正比，不够的用0补齐。

例如共有200条新闻，其中第18条命名为news_018.htm图片的命名规范：名称分为头尾两两部分，用下划线隔开。

头部分表示此图片的大类性质。

例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上某一个位置连续出现，电棍性质相同的链接栏目的图片我们取名：menu ；装饰用的照片我们取名：pic ；不带链接表示标题的图片我们取名：title 依照此原则类推。

尾部分用来表示图片的具体含义，用英文字母表示。

例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.有onmouse效果的图片，两张分别在原有文件名后加"_on"和"_off"命名。

其它文件命名规范js的命名原则以功能的英语单词为名。

例如：广告条的js文件名为:ad.js所有的CGI文件后缀为cgi。

所有CGI程序的配置文件为config.cgi02 目录结构规范目录建立的原则：以最少的层次提供最清楚简便的访问结构。

切图命名规范切图命名规范是指在设计制作过程中，对所切出的图片进行命名的一种规范要求。

准确的切图命名可以提高设计师和开发者之间的沟通效率，减少错误和冗余，提高工作效率和项目质量。

下面是一个1000字的切图命名规范：切图命名规范一、命名长度1. 命名长度尽量控制在20个字符以内。

过长的命名不仅会影响文件名的显示，也会增加命名的复杂度。

二、命名元素1. 命名元素应包含必要的信息，例如：功能、布局、效果等。

2. 命名元素可以使用英文单词、数字和下划线。

不推荐使用中文或特殊字符，避免出现编码问题。

3. 命名元素要尽量简洁明了，不要过度冗长。

例如，按钮可以命名为“button”而不是“the_button_of_login”。

三、命名顺序1. 命名顺序应该从宽到窄，从大到小。

例如，先命名布局，再命名具体的元素。

2. 命名顺序应参考网页结构和使用顺序。

例如，先命名页头、页脚，再命名导航栏、内容区，再命名具体的模块和组件。

四、命名示例1. 命名示例1：a. 页面标题：page_titleb. 标题栏：headerc. 导航栏：navd. 内容区：contente. 侧边栏：sidebarf. 页脚：footer2. 命名示例2：a. 顶部导航栏：top_navb. 主导航栏：main_navc. 子导航栏：sub_navd. 搜索框：search_boxe. 用户头像：user_avatarf. 首页轮播图：home_sliderg. 产品列表：product_list五、特殊情况处理1. 如果需要对同一个元素进行不同的状态切图，可以在命名后面添加状态信息，例如：a. 按钮正常状态：button_normalb. 按钮激活状态：button_activec. 按钮禁用状态：button_disabled2. 如果需要对同一个元素进行不同尺寸的切图，可以在命名后面添加尺寸信息，例如：a. 横幅广告大图：banner_largeb. 横幅广告小图：banner_small六、命名注释1. 如果命名本身无法完全表达切图的含义，可以使用注释来进一步说明。

竭诚为您提供优质文档/双击可除app界面命名规范篇一：app界面切图命名和文件整理规范app界面切图命名和文件整理规范切图命名英文缩写三个原则：1较短的单词可通过去掉“元音”形成缩写2较长的单词可取单词的头几个字母形成缩写3此外还有一些约定成俗的英文单词缩写.第一部分：iosapp界面设计切图命名规范第二部分：手机app切图文件整理和技巧分享篇二：ios和android的app界面设计规范ios和android的app界面设计规范字数876阅读96439评论36喜欢344记录一下ios和andoird的界面设计规范，方便进行标准的产品设计，并与设计师顺畅沟通ios篇界面尺寸设备iphone6plusiphone6iphone5/5s/5ciphone4/4sipad1/2ipa dmini分辨率750×1334px640×1136px640×960px1024×768px1024×768px状态栏高度导航栏高度标签栏高度60px40px40px40px40px20px20px132px88px88px88px88px44px44px147px98px98px98px98px49px49px1242×2208pxipad3/4/air/air2/mini22048×1536pxpaste_image.png图标尺寸设备iphone6plusiphone6iphone5/5s/5ciphone4/4sipad1/2ipadminiappstore程序应用主屏幕spotlight工具栏和标签栏搜索导航栏75*75px44*44px75*75px44*44px75*75px44*44px25*25px22 *22px25*25px22*22px1024*1024px180*180px144×144px87×87px75*75px66*66px1024*1024px120*120px144×144px58*58px1024*1024px120*120px144×144px58*58px1024*1024px120*120px144×144px58*58px1024*1024px90*90px1024*1024px90*90px 72*72px50*50px72*72px50*50pxipad3/4/air/air2/mini21024*1024px180*180px144×144px100*100px50*50px44*44px字体iphone上的字体英文为：helveticaneue至于中文，mac 下用的是黑体-简，win下则为华文黑体，所有字体要用双数字号。

ui切图规范UI切图规范是指在进行UI设计切图时遵循的一套标准和规范，旨在保证切图效果的一致性和高质量。

以下是UI切图规范的一些重要内容，共计1000字。

1. 文件类型和分辨率UI切图通常使用PNG或者JPEG格式，对于有透明背景的图像，应使用PNG格式。

切图时要确保分辨率与设计稿一致，不要缩放。

如果设计稿尺寸过大，可以通过缩小比例来适应切图。

2. 图层命名和分组切图前应对设计稿中的图层进行合理的命名和分组，以方便后续的切图工作。

图层命名要简洁明了，能够清晰地表达图层的含义。

图层分组要合理，相同类型的图层要放在一起，方便定位和使用。

3. 图片大小和优化在切图时要根据需求和使用场景来选择合适的图片大小，避免不必要的加载和占用空间。

对于需要显示在高分辨率屏幕上的图像，可以使用矢量图或者高分辨率的位图，以保证图像的清晰度。

同时，对于切图后的图片要进行压缩和优化，减小文件大小，提高加载速度，保证用户体验。

4. 边界和间距在切图时要注意图元素之间的边界和间距，在设计稿中留有足够的空隙，避免图层之间相互重叠或者挤压。

同时，对于需要对齐的图层和元素，要使用对齐工具进行精确对齐，保证切出的图像符合设计要求。

5. 切图工具和技巧在进行UI切图时，可以使用一些专业的切图工具和技巧来提高效率和准确性。

例如，可以使用切图工具中的切片功能来快速切割图层，并设置输出路径和格式。

另外，可以使用取色器工具来获取设计稿中的颜色值，保证切出的图像颜色一致。

6. 图像质量和实际效果切图前应仔细审查设计稿，确保图像质量和实际效果的一致性。

例如，注意字体的平滑性和清晰度，保证切出的文字图像不会出现锯齿现象。

另外，注意对细节部分的处理，避免模糊和失真，特别是在缩小图像大小时要特别注意。

7. 标注和导出切图完成后，应进行标注和导出，方便开发人员的使用。

标注要包括图层尺寸、字体大小、颜色值等信息，并与开发人员进行沟通，确保理解和一致性。

导出时要注意导出格式和文件命名，方便后续的开发和使用。

切图命名规范 [命名规范]命名规范版本：编写： 1. 通用命名规则 l 在所有命名中，都应使用标准的英文单词或缩写。

不得使用拼音或拼音缩写，除非该名字描述的是中文特有的内容，如半角、全角,声母、韵母等。

l 所有命名都应遵循达意原则，即名称应含义清晰、明确。

l 所有命名都不易过长，常量变量应控制在规定的长度20以内，函数30以内。

l 所有命名都应尽量使用全称。

l 大小写规则 l 类型标识符是保留字，应当全部小写。

l Win32API类型常常全部大写，并且遵循诸如Windows.pas或其他API单元中关于特定类型名的规则。

l 对于其他变量名，第一个字母应大写，其他字母则大小写交错。

(即：如查变量名由多个单词构成每个词首字母大写) 下面是一些例子： var MyString:string; //保留字 WindowsHandle:HWND;//Win32API类型 I:Integer; //在System单元中引入的类型标识ICount:Integer; //在System单元中引入的类型标识 l 如何定义一个元件类型前缀：从元件类型名中移去T前缀。

例如TButton变成Button。

除了第一个元音，删去所有元音字母。

例如，Button变成bttn，Edit变成edt。

压缩双字母。

例如，bttn变成btn。

如发生冲突，则在某一元件前缀中加入一个元音。

例如在TBatton 元件的前缀中加入元音变为batn，以区别TButton的前缀。

不过，上述规则首先得保证前缀名称必须符合习惯，做到见名知意，如:TDDEClientConv控件的前缀就是一个例外。

注意：元件的前缀是为了表示出元件的类型，是按钮，还是标签等等，因此没有必要为每一个特别元件类建立一个元件前缀，如:TMyButton的元件前缀仍为btn。

2. 常量(Constants)和变量(Variable) 2.1. 常量常量的名称应当能够表达出它的用途。

APP切图详细规范终极指南2015-03-11 分类：UI设计围观31698次我们都知道一套完整的App 通常会有很多张切图，不管是iPhone 需要1x、2x、3x 图档，Android 需要至少3 种hdpi、xhdpi、xxhdpi。

在庞大的切图数量下如何让负责套图的RD 快速找到所需图档，档名的命令方式就需要双方统一格式方便大家作业。

所以，制定一套非常有效而方便的APP切图命名规范非常有用的。

下面就跟随小编来详细了解APP切图命名的流程和命名规范。

ios切图尺寸规则目前iPhone有10种型号，5种屏幕尺寸，再加上6plus的“降采样”（Downsampling）（1080-1920），还有iPhone6和6+上的放大模式（1125-2001）和默认模式（1242-2208），是不是感觉好恐怖？但是不用怕，我分享一套超简单的适配方法，看完你都不信有这么简单~美术交付给开发的资料有1、标注图（以640为宽度尺寸为基准标注）2、 2x切图（以640为宽度尺寸为基准切图）3、 3x切图（以1280为宽度尺寸为基准切图）开发看到这份标注图，可以自己用上面的数字，乘以1.5得出3X的数字。

1.为什么3x切图要以1280来为宽度？其实iPhone6+的尺寸1242*2208作为3X，怎么算都又难记又不能整除，我们直接640*2得到1280跟1242相差也没几十个像素，最重要的是不虚边啊，放在真机上看（处女座除外）看不出差别的。

2.为什么只设宽度？为了保持长宽比例。

iPhone的这几个尺寸不是正好的，宽度放大后高度总差那么几个像素，这不要紧，千万别去改高度，手机屏幕是可以上下滑动的嘛。

不可以滑动必须保证一屏显示的除外，手动去调整好了。

3.为什么开发不是乘以2而是乘以1.5来算尺寸和字号？因为大屏手机就是要显示更多内容而存在的。

纯等比放大界面看起来傻大傻大的，实验证明1.5倍是正好的。

Android切图尺寸规则px（像素）是我们UI设计师在PS里使用的（不解释），同时也是手机屏幕上所显示的（也不解释）dp是开发写layout的时候使用的尺寸单位，sp是开发写layout时关于字体的字号单位，且dp与sp总为1：1关系。

UI切图管理规范1切图命名规范UI切图命名格式为：“aaa_bbbb_cccc”。

其中“aaa”为切图类型；“bbbb”为模块名称；“cccc”为具体名称。

其间用“_”分割。

其他情况：当三级仍无法具体标识切图时，可延伸至四级。

例如“aaa_bbbb_cccc_dddd”。

iOS以在切图命名末位加“@2x”或“@3x”等标识来区分不同像素的同一张图片。

例如：“aaa_bbbb_cccc@2x”、“aaa_bbbb_cccc@3x”。

详见3.1。

Android则以drawable-mdpi，drawable-hdpi，drawable-xhdpi，drawable-xxhdpi等文件夹来区分不同像素的同一张图片。

详见3.2。

2切图类型和格式2.1图标切图命名以“ico”开头；后缀为“png”格式。

例如：首页公告图标切图应命名为“ico_home_notice.png”2.2背景切图命名以“bg”开头；后缀为“png”格式。

例如：首页标题栏背景切图应命名为“bg_home_title.png”。

2.3图片切图命名以“img”开头；后缀为“jpg”格式。

例如：广告栏轮播图应命名为“img_adv_name.jpg”2.4按钮切图命名以“btn”开头；后缀为“png”格式。

按钮一般分为两种状态：点击状态和未点击状态。

例如：缴费页面确定按钮点击状态的切图应命名为“btn_pay_confirm_onclick.png”;未点击状态的切图应命名为“btn_pay_confirm_unclick.png”2.5标签切图命名以“tab”开头；后缀为“png”格式。

标签一般分为两种状态：选中状态和未选中状态例如：首页标签选中状态的切图应命名为“tab_home_onselected.png”未选中状态的切图应命名为“tab_home_unselected.png”3切图尺寸规范3.1iOS尺寸规范3.1.1iPhone界面尺寸3.1.2iPhone图标尺寸3.2Android尺寸规范3.2.1Android SDK模拟机尺寸3.2.2Android图标尺寸3.2.3Android系统dp/sp/px换算表。

一名程序员带你了解切图命名规则和标注规范今天我要分享的内容是关于切图命名规则和标注规范，从工作到现在开发过的项目大大小小也有十几二十个了，但每次的设计师可能都不是同一个人，他们每个人都有不同的规范和标注方式，所以想总结这一部分内容，让大家一起分享探讨一下。

关于切图命名的规范，我个人觉得关键是在于团队能够有一个统一的规则，所有成员严格遵守并且和所有开发全盘拉通，不然一切都是空谈。

而一套统一的标注规范不单止在一个项目中使用，也可以在之后的项目或者与别人去分享使用，减少重复的工作是很有帮助的。

在这里就介绍一种通用的命名规则，当然大家也可以根据自己的实际情况去制定，这里只提供一种方法与思路，仅供参考。

一、为什么要制定规范的命名规则和标注1、自身层面对自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷，而且规范的命名也显得设计自身比较专业。

积累规范文档，对后续项目有帮助，能够提高工作效率，避免重复性工作。

2.团队层面如果命名不统一，大家就很难达成共识，任务交接时需要很大的学习成本，所以规范的命名对于团队协作也有极大的推动作用。

3.开发层面这一点是最重要的，可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率，因为只要我们的命名足够规范，并且和开发达成共识，他们完全可以直接使用的我们切片而不需更改切片的名称，后期我们更换切图，只要切片名称不变，开发看都不用看直接替换就可以了。

规范命名规则在修改色值、组件大小的时候，能够统一修改减少重复工作，在同一状态但不同界面的组件设计只需修改指定标注文件即可，不需要每个界面的标注都进行修改。

二、所有命名全部为小写英文字母这一点的理由很简单，设计的目标是让开发直接拿到切图后能够立刻使用，不能够随意修改名称，但是设计要知道，开发的代码里只有小写的英文字母，如果你给出的命名全是中文的，那么开发是一定要修改的。

所以命名全部用小写的英文字母是最基本的规则。

ui切图规范UI切图规范是指在UI设计完成后，切图人员需要按照一定的规范进行切图，以保证设计师的设计效果能够准确地呈现在用户面前。

下面是一个关于UI切图规范的1000字说明，具体内容如下：一、文件格式规范1. 切图使用图片编辑软件，如Photoshop或Sketch等，文件格式统一为PNG格式。

2. 为避免大小写不一致的问题，请使用统一的文件命名规范，如"按钮.png"。

二、图层命名规范1. 图层命名要简洁明了，避免使用无意义的名称或者过长的命名，命名最好使用英文，并以英文单词为主。

2. 图层命名要有层级结构，可以使用"/"符号进行分级。

例如，按钮的图层命名可以为"按钮/背景"、“按钮/文字”等。

三、切图尺寸规范1. 切图尺寸要与设计稿保持一致，不得超出或缩小原来的尺寸。

2. 针对需要适应不同屏幕分辨率的设计，如移动端的自适应设计，切图时需要提供不同的尺寸和倍图，例如1x、2x、3x等。

四、图片拼接规范1. 按照设计稿的要求，将需要拼接的图片进行合并，以减少资源文件数量。

2. 拼接图片时，要保证图片拼接的精细度，避免出现明显的间隙或错位。

五、图片优化规范1. 切图前，要对图片进行压缩和优化处理，以减小图片文件的大小。

2. 避免使用无损压缩的方式，可以采用有损压缩方式，如JPEG格式的图片。

六、切图边缘规范1. 切图时要保证图像的边缘清晰，避免出现模糊、锯齿等问题。

2. 在需要切圆角的图片时，要确保切割出的圆角光滑。

七、切图准确性规范1. 切图时要准确无误地按照设计稿的要求进行切割，不得有遗漏或错位。

2. 切图时要注意对齐线和参考线，确保元素之间的距离、位置和比例都符合设计要求。

八、切图保存规范1. 切图完成后，要将切图保存到指定的文件夹中，并按照设计的层级结构进行分类保存。

2. 保存时要删除不需要的图层，保持文件的整洁。

九、切图命名规范1. 切图的命名要与设计稿一致，以方便后续的开发工作。

文件夹及图纸命名规范
文档状态：实施
文件夹及图纸命名规范
1.文件夹命名格式
公司产品型号+图纸编号+版本号。

比如：靓照易：LZY-628-025N。

（LYZ-628：代表公司产品型号；025N：图纸编号+版本号）图纸编号+版本号，025N，按装配组件FT7.777.025最后3位数字+图纸修改外发版本N
2.图纸命名格式
图号：
FT*.***.***（FT*代表：图纸类型；第一个***：代表设计者；第二个***：图纸流水号）。

文件名：
FT*******-***（FT*******与图号一致，-***为中文名缩写拼音及规格）。

比如FT2.432.007（图号）FT2432007-scdg-18c（图名）三层导轨-18寸（配件名）FT2表示外购件；432表示设计者；007流水号；如果流水超过999，则432+1，变为433。

FT1表示标准件；FT3表示焊接件；FT4表示单个钣金件；FT5表示机加件、弹簧、木板、压铸、CNC件；FT6表示亚克力、玻璃；FT7表示装配组件；FT8表示电气部件；FT9表示PCB电路板；
3．工程图格式
1、钣金零件图
2、焊接图
3、轴类机加件
4、CNC零件
5、亚克力。

这是由同一色相的色调差构成的配色 类型，属于单一色彩配色的一种。 与 主导色调配色中的同色系配色属于同 类技法，在同一色相下的色调不存在 色相差异，而是通过不同的色调阶层 搭配形成，可以理解为色调配色的一 种。
同色深浅配色有着极高的统一性，但有点枯燥。
三、对比配色而形成的配色方式
由于对比色相互对比构成的配色，可以分为互补色或相反色搭配构成的色相对 效果，由白色、黑色等明度差异构成的明度对比效果，以及由纯度差异构成的 纯度对比效果。
清澈色调
清澈调子使页面非常和谐，即使是不 同色相形同色调的配色能让页面保持 较高的协调度。蓝色另页面产生安静 冰冷的气氛，茶色让我们想起大地泥 土的厚实，给页面增加了稳定踏实感 觉，同时暖和蓝色的冰冷。
互补的色相搭配在一起，通过统一色调的手法，可以缓和色彩之间的对比效果
阴暗色调
阴暗的色调渲染场景氛围 ，通过不同 色相的色彩变化丰富信息分类，降低 色彩饱和度使各色块协调并融入场景， 白色和明亮的青绿色作为信息载体呈 现。
一.色相差而形成的配色方式
有主导色彩配色 这是由一种色相构成的统一性配色。即由某一种色相支配、统一画面的配色， 如果不是同一种色相，邻近色也可以形成相近的配色效果。当然，也有一些色 相差距较大的做法，比如撞色的对比，或者有无色彩的对比
同色系配色
同色系配色是指主色和辅色都在统一 色相上，这种配色方法往往会给人页 面很一致化的感受。
网页背景图片制作
分辨率一般有1024*768，1280*960，1280*1024，1440*900,1920*1080
切图过程中的命名
1.禁止使用中文命名 2.无避免使用意义文字符命名 3.尽量使用语义相近的英文或者英文简写命名 4.禁止在图片文件名中间加入数字。如果必须使用数字进行描述，请在文件 名最后加入数字如需符号，请使用_做分割