切图命名规范
安卓切图规范
安卓切图规范安卓切图规范是为了保证在不同分辨率和尺寸的安卓设备上都能够正常显示和使用设计图，以下是一份包含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. 兼容性测试：在设计完成后，应进行兼容性测试，确保设计图在不同设备上的显示效果符合预期。
网页设计技巧及切图规范
同色深浅配色有着极高的统一性，但有点枯燥。
三、对比配色而形成的配色方式
由于对比色相互对比构成的配色，可以分为互补色或相反色搭配构成的色相对 效果，由白色、黑色等明度差异构成的明度对比效果，以及由纯度差异构成的 纯度对比效果。
清澈色调
清澈调子使页面非常和谐，即使是不 同色相形同色调的配色能让页面保持 较高的协调度。蓝色另页面产生安静 冰冷的气氛，茶色让我们想起大地泥 土的厚实，给页面增加了稳定踏实感 觉，同时暖和蓝色的冰冷。
互补的色相搭配在一起，通过统一色调的手法，可以缓和色彩之间的对比效果
阴暗色调
阴暗的色调渲染场景氛围 ，通过不同 色相的色彩变化丰富信息分类，降低 色彩饱和度使各色块协调并融入场景， 白色和明亮的青绿色作为信息载体呈 现。
一.色相差而形成的配色方式
有主导色彩配色 这是由一种色相构成的统一性配色。即由某一种色相支配、统一画面的配色， 如果不是同一种色相，邻近色也可以形成相近的配色效果。当然，也有一些色 相差距较大的做法，比如撞色的对比，或者有无色彩的对比
同色系配色
同色系配色是指主色和辅色都在统一 色相上，这种配色方法往往会给人页 面很一致化的感受。
网页背景图片制作
分辨率一般有1024*768，1280*960，1280*1024，1440*900,1920*1080
切图过程中的命名
1.禁止使用中文命名 2.无避免使用意义文字符命名 3.尽量使用语义相近的英文或者英文简写命名 4.禁止在图片文件名中间加入数字。如果必须使用数字进行描述，请在文件 名最后加入数字如需符号，请使用_做分割
UI系列干货-切图命名
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。
图片命名规范
默认图片 启动 注册
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 导航栏 按钮 背景图片 分割线 登录 列表
图片命名规范
删除按钮选中状态
common_nav_btn_message_n.png
消息按钮
common_nav_btn_message_s.png
消息按钮选中状态
common_nav_btn_search_n.png
搜索按钮
common_nav_btn_search_s.png
搜索按钮选中状态
hpcollege_list_collect
图片命名规范
切图命名以模块为前缀，如：模块_类别_功能_状态.png
ios
ios切图，按实际项目开发为标准，本公司只切了@2x一套图，以750*1334为基稿 设计，直接输出的切图为@2x图，如需要适配6p尺寸则需要再切一套@3x的图；
android
Android切图，由于尺寸不同，需要切多套图适配不同机器，分别为 mdpi/hdpi/xhdpi/xxhdpi，以720*1280为基稿设计，直接输出的切图为xhdpi;
normal
登陆页面
common
starry 约会星空
ver
消息
happiness college
我
navigation bar
菜单栏
button
图标
background-image
def
默认图片
cut-off rule
启动
login
注册
list
home
browse
like
dislike
首页home 广告banner
全称 selected
pressed default
date the starry sky
message me tab icon default-image default register
文件切图命名规范标准
文件/切图命名规范标准
头部header
底部bottom
菜单menu
输入框textfeild
标题栏titlebar
状态栏statusbar
列表list {1，2，3...} 表格sheet
图片pic
推广图banner
背景bg
按钮btn
指示器indicator 启动器launcher 图标icon
标签tab
内容区域content 线条line 2px
多选checkbox 单选radio
提示tips
进度process
信息info
头像head
返回back
点point
切图命名规范
①禁止使用中文命名
②禁止使用无意义文字符命名
③请尽量使用语义相近的英文或者英文简写命名
④ios以@2x.png和@3x.png作为文件最后名字字符（例如avater_default@2x.png
avater_default@3x.png）
⑤android每个文件夹下的相同功能切图文件名保持一致。
⑥禁止在图片文件名中间加入数字。
如果必须使用数字进行描述，请在文件名最后加入数字（图片的多种状态不受此限制）（例如avater27.png avater30.png）
⑦如需符号，请使用_做分割。
⑧图片多种状态请使用_normal(正常状态) _selected(选中状态) _highlight(高亮状态，按钮点击下状态) _disable(禁用状态) 作为文件名状态标示(例如item_normal.png item_highlight.png,
login_item30_disable.png)。
切图命名规范
切图命名规范切图命名是在进行图片切割时，给切下来的图片文件起一个易于理解和标识的名字。
一个规范的命名能够方便团队协作和管理，提高工作效率。
以下是一些常用的切图命名规范的建议，总结如下：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. 文件夹结构 - 在切图文件的存放位置上，可以使用文件夹的方式来组织和管理切图文件。
手机APP切图命名规则
导航栏
导航栏按钮命名规则：
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 (蓝色按钮)
切图命名规范
切图命名规范切图命名规范是指在设计制作过程中，对所切出的图片进行命名的一种规范要求。
准确的切图命名可以提高设计师和开发者之间的沟通效率，减少错误和冗余，提高工作效率和项目质量。
下面是一个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界面切图命名和文件整理规范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设计切图时遵循的一套标准和规范，旨在保证切图效果的一致性和高质量。
以下是UI切图规范的一些重要内容，共计1000字。
1. 文件类型和分辨率UI切图通常使用PNG或者JPEG格式，对于有透明背景的图像，应使用PNG格式。
切图时要确保分辨率与设计稿一致，不要缩放。
如果设计稿尺寸过大，可以通过缩小比例来适应切图。
2. 图层命名和分组切图前应对设计稿中的图层进行合理的命名和分组，以方便后续的切图工作。
图层命名要简洁明了，能够清晰地表达图层的含义。
图层分组要合理，相同类型的图层要放在一起，方便定位和使用。
3. 图片大小和优化在切图时要根据需求和使用场景来选择合适的图片大小，避免不必要的加载和占用空间。
对于需要显示在高分辨率屏幕上的图像，可以使用矢量图或者高分辨率的位图，以保证图像的清晰度。
同时，对于切图后的图片要进行压缩和优化，减小文件大小，提高加载速度，保证用户体验。
4. 边界和间距在切图时要注意图元素之间的边界和间距，在设计稿中留有足够的空隙，避免图层之间相互重叠或者挤压。
同时，对于需要对齐的图层和元素，要使用对齐工具进行精确对齐，保证切出的图像符合设计要求。
5. 切图工具和技巧在进行UI切图时，可以使用一些专业的切图工具和技巧来提高效率和准确性。
例如，可以使用切图工具中的切片功能来快速切割图层，并设置输出路径和格式。
另外，可以使用取色器工具来获取设计稿中的颜色值，保证切出的图像颜色一致。
6. 图像质量和实际效果切图前应仔细审查设计稿，确保图像质量和实际效果的一致性。
例如，注意字体的平滑性和清晰度，保证切出的文字图像不会出现锯齿现象。
另外，注意对细节部分的处理，避免模糊和失真，特别是在缩小图像大小时要特别注意。
7. 标注和导出切图完成后，应进行标注和导出，方便开发人员的使用。
标注要包括图层尺寸、字体大小、颜色值等信息，并与开发人员进行沟通，确保理解和一致性。
导出时要注意导出格式和文件命名，方便后续的开发和使用。
切图命名规范 [命名规范]
![切图命名规范 [命名规范]](https://img.taocdn.com/s3/m/1fdce5474b35eefdc8d3336a.png)
切图命名规范 [命名规范]命名规范版本：编写： 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. 常量常量的名称应当能够表达出它的用途。
深度剖析Photoshop切图和标注课件
欢迎大家来到本次课程，我们将深入讲解Photoshop切图和标注的核心概念、 工作流程以及最佳实践。让我们开始探索这个令人兴奋的主题！
概述
将介绍课件的基本内容和目标，以及为什么学习Photoshop切图和标注对设 计师非常重要。
切图的基本概念和原则
切图定义
3 交互细节
强调标注中需要特别关注 的交互细节和动效。
切图和标注的工作流程
1
设计准备
讲解如何为切图和标注做好充分的设计准备工作。
2
切图流程
详细描述切图的示标注设计图和交互细节的流程与方法。
常用的切图和标注工具介绍
Adobe Photoshop
介绍Photoshop的切图和标注功 能，以及相应的工具和技巧。
Sketch
探索Sketch作为切图和标注工具 的功能和优势。
InVision Studio
展示InVision Studio如何方便地 进行切图和标注的工作流程。
切图和标注的最佳实践和注意 事项
1 命名规范
介绍良好的图层和标注命名 规范，方便设计和开发团队 打交道。
2 文档管理
讲解如何组织和管理切图和 标注文档，以便团队协作和 版本控制。
3 设计反馈
分享与团队合作的最佳实践，以准确地收集和解析设计反馈。
切图和标注课件的实例和案例说明
移动应用设计
通过一个移动应用设计案例，展 示切图和标注如何应用于实际项 目中。
网页设计
以一个网页设计案例说明切图和 标注在响应式网页开发中的重要 作用。
解释什么是切图，并介绍切 图的基本原则和技巧。
像素完美
详细说明如何确保切图过程 中保持像素完美。
IOS开发切图规范
@6x
Notification@6x.png
工具条导航栏图标
50x50
@2x
Tab1@2x.p、应用图标、log不需要切圆角，系统会自动转换成圆角图标
3、按钮类、背景类图片（以下图为例）：
此按钮中间部分系统可以自动拉伸平铺，所以没必要按实际大小切，只给出可以平铺内容（被框部分）的小部分就可以了：
1、尺寸标准(忽略4s小型机)：
启动页引导页切图标准
机型
尺寸
后缀
例子
iphone55s
750x1334
@2x
name@2x.png
iphone66s plus
1242x2208
@3x
name@3x.png
名称
尺寸
后缀
例子
应用程序图标
180x180
@3x
app@3x.png
120x120
@2x
app@2x.png
结果是去掉中间框部分，只切一个2x的就可以，其它同理。
4、整体像棋牌布局座位不和背景切一张图，因为屏幕大小不一样，程序无法判断背景图上的座位位置，因此要分割开由程序布局。
Appstore图标
1024x1024
应用内搜索图标
80x80
@2x
Spotlight@2x.png
120x120
@3x
Spotlight@3x.png
设置图标
58x58
@2x
Settings@2x.png
87x87
@3x
Settings@3x.png
通知图标
40x40
@2x
Notification@2x.png
APP切图详细规范终极指南
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切图管理规范
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换算表。
ui切图规范
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. 切图的命名要与设计稿一致，以方便后续的开发工作。
移动端空间切图命名规则和中英文对照表-NWE
列表
Background
背景
Scroll
滚动条
Tab
标签
Checkbox
勾选框
Combo
下拉框
Normal
普通
Highlight
点击
FocusedBiblioteka 获取焦点Press
按下
Selected
选中
Disabled
禁用
Hover
悬停
Visited
已访问
Default
默认
Top
顶部
Second
第二
First
日历
Music
音乐
Camera
相机
Photo
照片
News
新闻
Video
视频
Settings
设置
Notes
笔记
Activity
活动
Explore
探索
Watch
手表
Contacts
联系人
Control center
控制中心
Weather
天气
Look screen
锁屏
Status bar
状态栏
Tab bar
Uninstall
卸载
Forward
前进
Install
安装
Pause
暂停
Continue
继续
Select
选择
More
更多
Image
图片
Progress
进度条
Line
线条
Icon
图标
Tree
树
Mask
蒙版
Label
XX公司前端切图排板验收标准
XX公司前端切图排板验收标准----------------------- Page 1-----------------------XX标准：前端切图排（一）初审标准（二）复审标准（三）附件一：网站制作切图规范（四）附件二：常用的模块命名和css文件命名----------------------- Page 2-----------------------（一）初审：存在以下问题任何一项均属不及格。
A1、作品与提供的设计效果图某些地方不一致比如字体大小、颜色、行距、图标及排版等均应严格一致文字不应写错（除非效果图本身是错字），比如效果图上的“无限极”切图后误写成“无极限”A2、在IE6,IE7,IE8及FIREFOX存在兼容问题，比如变形，JavaScript错误或者失效A3、JavaScript编程是前端工程师的工作职责，除了部分需要结合PHP或者MYSQL才能完成的，其它地方如有未完成则作品不及格，比如下拉菜单，图片切图效果，选项卡等A4、页面全部采用DIV+CSS布局代替TABLE布局A5、CSS和JavaScript代码各自成为独立的外部文件，而不是把代码写在HTML页面A6、列表要考虑程序能够写循环，即写好一行DIV，把它复制N 行，否则视为不及格A7、切图时，请主观判断，文字是否有链接，需要链接的文字请加上超级链接，避免开发阶段加上链接后样式错乱，如明显需要链接但无做好链接的----------------------- Page 3-----------------------（二）复审：通过初审的作品，才会进入复审。
复审是优化内容，参考附件一进得优化B1、Class等命名参考附件二B2、样式属性有适当代码缩写B3、样式代码有适当的注释B4、文件夹及文件名称命名规范B5、首行缩进 text-indentB6、背景图优化 background-positionB7、绝对定位 position:absoluteB8、网站页面存在样式相同的栏目，均使用相同的DIV和CLASS 名称B9、能用HTML完成的文字，尽量都不直接写在图片，比如若干相同样式的搜索按钮，只用一张背景图，文字部分由HTML完成，页面90%以上的地方能做到这样C1、Div居中: 有width值，并且左右margin:autoC2、浮动及清理 Float 给高度或者clear:bothC3、能够不用图片的地方就不要用，比如线条、色块等应直接用代码来完成----------------------- Page 4-----------------------（三）附件一：网站制作切图规范为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档,特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面,代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.文件规范1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文,请重命名与html文件同名, 以方便后端添加功能时查找对应页面;3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css,其他页面依实际模块需求命名.;4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.html书写规范1. 文档类型声明及编码: 统一为html5声明类型; 编码统一为utf-8, 书写时利用IDE实现层次分明的缩进;2. 非特殊情况下样式文件必须外链至<header></header>之间;非特殊情况下JavaScript文件必须外链至页面底部;3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:<link rel="stylesheet" href="..." /><style>...</style><script src="..."></script>4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js;引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合, 包括 br (<br />), hr(<hr />)等; 属性值必须用双引号包括;6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等;需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置,如果没有, 可以使用须以"data-"为前缀来添加自定义属性，避免使用"data:"等其他命名方式;----------------------- Page 5-----------------------7. 语义化html, 如标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul,内联元素中不可嵌套块级元素;8. 尽可能减少div嵌套, 如<div class="box"><div class="welcome">欢迎访问XXX, 您的用户名是<div class="name">用户名</div></div></div>完全可以用以下代码替代: <divclass="box"><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;9. 书写链接地址时, 必须避免重定向，例如：href="/",即须在URL地址后面加上“/”；10. 在页面中尽量避免使用style属性,即style="…";11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type="text" id="name" name="name"/></p>须写成:<p><label for="name">姓名: </label><input type="text" id="name" /></p>12. 能以背景形式呈现的图片, 尽量写入css样式中;13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & ?(?) 等等;16. 书写页面过程中, 请考虑向后扩展性;17. class & id 参见 css书写规范.css书写规范1. 编码统一为utf-8;2. 协作开发及分工: 根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件,分配给前端人员实现内部结构&表现&行为; 共用css文件为base.css, 协作开发过程中,每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;3. class与id的使用:样式都用class而不用id，id专门留给JS用，这样才符合表现与行为分离的原则。
网页设计切图命名
组合命名规则:[元素类型]-[元素作用/内容]如:搜索按钮: btn-search登录表单:form-login新闻列表:list-news交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:鼠标悬停:：hover 点击：click 已浏览：visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited页头:header登录条:loginbar标志:logo侧栏:sidebar广告条:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu下拉菜单:dropMenu工具条: toolbar表单:form栏目:column箭头:arrow搜索:search搜索按钮:btn-search 滚动条:scroll内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title链接:links页脚:footer服务:service热点:hot新闻:news下载:download注册:regsiter状态:status按钮:btn投票:vote合作伙伴:partner版权:copyright网站地图: sitemap1. Container“container“就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“,“wrap“,“page“.2. Header“header”是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。
这部分还可以命名为:“pa ge-header”(或pageHeader).3. Navbar“navbar“等同于横向的导航栏，是最典型的网页元素。
这部分还可以命名为:“nav”,“navigation”,“nav-wrapper”.4. Menu“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav“,“links“，“sidebar-main”.5. Main“Main”是网站的主要区域，如果是博客的话它将包含的日志。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
切图命名规范
management_iocn_upadate@2x.png
在哪里类型是什么几倍图
1.所有命名全部为小写英文字母
2.命名格式
通用切片命名格式
组件_类别_功能_状态@2x.png
tabbar_icon_home_defalt@2x.png
标签栏图标主页默认2倍
模块特有切图命名规则：
模块_类别_功能_状态@2x.png
news_icon_search_pressed@2x.png
新闻_图标_搜索_ 默认@2x.png
命名规则——命名也就是需要告诉开发，文件是什么、在哪里、第几页、什么状态。
切图命名英文缩写三个原则：
较短的单词可通过去掉“元音”形成缩写
较长的单词可取单词的头几个字母形成缩写
此外还有一些约定成俗的英文单词缩写.
1、产品模块_类别_功能_状态.png
例：发现_图标_搜索_点击状态
2、场景_模块_状态.png
例：登录_按钮_默认状态
3、产品模块_场景_二级场景_状态.png
按钮_个人_设置_默认状态
【场景和二级场景】：一般指app的一级页面与二级页面。
例如上：个人页-场景，个人页里的设置页-二级场景
【模块】：一般指页面中的部分区块，也有指背景图。
如背景、按钮、icon都是模块。
【功能】：一般指的是，页面或者模块中，需要操作或点击的某个点，如上图，发现页中的搜索icon。
【状态】：一般指当前切图的状态区分，像按钮的话，有默认状态、点击时状态、按下状态、不可点击状态等，网页上按钮还有悬停状态。
注意：所有命名只能为小写英文字母，不要为了好看或者像平时打英语一样，首字母是大写之类的，也不可以为中文，不然对于开发来说，是没有意义的，因为他们还是得自己再改一遍。
注意：ios切图需要在命名后加上@2x、@3x后缀名，安
卓的切图不需要加，不过有些安卓开发需要切图后缀加
上尺寸。
名词命名：
bg（backgrond）：背景
nav（navbar）：导航栏
tab（tabbar）：标签栏
btn（button）：按钮
img（image）：图片
del（delete）：删除
msg（message）：信息
icon：图标
content：内容
left/center/right：左/中/右
logo：标识
login：登录
register：注册
refresh：刷新
banner：广告
link：链接
user：用户
note：注释
bar：进度条
profile：个人资料
ranked：排名
error：错误
操作命名：
edit：编辑
download：下载
collect：收藏
comment：评论
play：播放
pause：暂停
pop：弹出
audio：音频
video：视频
状态命名：
selected：选中
disabled：无法点击
highlight：点击时
default：默认
normal：一般
pressed：按下
slide：滑动
close：关闭
back：返回。