文件切图命名规范标准
- 格式:docx
- 大小:68.39 KB
- 文档页数:2
安卓切图规范安卓切图规范是为了保证在不同分辨率和尺寸的安卓设备上都能够正常显示和使用设计图,以下是一份包含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。
切图命名规范切图命名是在进行图片切割时,给切下来的图片文件起一个易于理解和标识的名字。
一个规范的命名能够方便团队协作和管理,提高工作效率。
以下是一些常用的切图命名规范的建议,总结如下: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. 图层名称、缩放级别、行列号之间不要使用空格或特殊字符,以避免命名冲突或命名错误。
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. 标注和导出切图完成后,应进行标注和导出,方便开发人员的使用。
标注要包括图层尺寸、字体大小、颜色值等信息,并与开发人员进行沟通,确保理解和一致性。
导出时要注意导出格式和文件命名,方便后续的开发和使用。
文件/切图命名规范标准
头部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)。