导航:首页 > 文件教程 > ui切图文件命名

ui切图文件命名

发布时间:2024-11-09 17:37:46

⑴ UI设计中常见的命名规则有哪些

一、所有命名全部为小写英文字母
这一点的理由很简单,我们的目标是让专开发直接拿我们的切图进属行使用,不能够随意修改名称,但是我们要知道,开发哥哥的代码里只有小写的英文字母,如果你给出的命名全是中文的,那么他们是一定会更改的。所以命名全部用小写的英文字母是最基本的规则。
二、命名格式
众所周知,一个大型项目会分很多模块,每个模块由不同的设计师来独立完成,还有人会专门管理公共的组件,如tabbar、navbar等等,这种情况下就会分为两种切图,一种是通用类型的切图,还有一种就是各个模块特有的切图。
通用切片命名格式:
组件_类别_功能_状态@2x.png
举例:[email protected]
模块特有切图命名规则:
模块_类别_功能_状态@2x.png
举例:[email protected]

⑵ UI设计中的切图规范是怎么样的

设计师在交付设计稿时,往往需要根据网页和移动端不同的界面开发需求,独立制作各个参数的切割图(也就是切图),标注大小和间距,然后以html+css布局交付到静态页面。通俗意义上说,“切图”是指将设计切割成易于制作成页面的图像。适当而准确的切割可以最大限度地还原设计图纸,达到事半功倍的效果。本教程将教你iOS和Android的通用规则和命名约定,并将帮助你轻松浏览UI设计图。接下来我们就为大家分享UI设计切图规范规则,希望帮助到大家更好的进行UI设计!

UI设计中的切图规范:

iOS切图尺寸规则:设计图:1242x2208

三倍图:按1242x2208来切

二倍图:按750x1334来切

一倍图:在二倍图的基础上压缩成50%

iOS启动图:图标按照最大1024x1024来设计,之后按照比例缩小到每个尺寸。提交没有高光和阴影的直角方形图即可。

Android切图尺寸规则

切图命名规则规范的切图命名会让开发更容易找到其所需要的文件,让设计师与开发之间的交付流程更顺畅,可以说,规范的切图命名是一个设计师的基本修养。一般来说切图命名可以遵循以下规则:

MasterGo切图MasterGo提供了多种设备预设,在切图时能大大节省你的时间,让交付更轻松。

MasterGo「切图」功能支持预设切图参数,支持Android、iOS、Flutter设备的尺寸、倍率、前后缀、格式等不同类型的切图导出。

设计师无需单独制作不同参数类型的切图,在MasterGo上,一图满足多设备、多尺寸使用需求,实现高效交付。

iOS预设

Flutter预设

综上所述就是关于“UI设计中的切图规范是怎么样的?”内容的精彩讲述了,不知道大家是否学到了呢?不管怎么样,小编都希望大家能够好好学习起来,为自己的UI设计做好基础~

⑶ ui点9切图怎么切

点九图,是来Android开发中用到的一种源特殊格式的图片,文件名以”.9.png“命名。这种图片能告诉开发,图像哪一部分可以被拉伸,哪一部分不能被拉伸需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应。点九图常用于对话框和聊天气泡背景图片中。
有很多种方式可以输出.9.png,比如说用draw9patch.bat这个工具,或者用cutterman插件,再或者简单一点,用photoshop直接输出。

第一步,先输出普通的png资源,用选区工具选取尽可能多的拉升部分加以删除。
第二步,然后将这些内容拼接成一个完整的整体。
第三步,然后扩大画布大小,上下左右各空出一个像素
第四步,再用一个像素的铅笔工具(颜色选择纯黑色),上下左右分别画点就可以了,保存的时候注意把后缀修改为.9.png。
这里需要特别注意以下2点:
1.最外边的1px线段必须是纯黑色,一点点的半透明的像素都不可以有,比如说99%的黑色或者是1%的投影都不可以有。(这1PX像素在程序最终输出的效果中不会被显示)

2.文件的后缀名必须是.9.png,不能是.png或者是.9.png.png,这样的命名都会导致编译失败。

⑷ UI设计中的命名规范,你知道吗

很多UI设计师对于“命名”是没什么概念的,他们都是随随便便地用一些没有特定意思的字母去给页面命名,其实这样并不好,因为统一的、规范的命名对我们自己的文件整理有很大的帮助,后期修改文件、图层的时候更加方便快捷,而且规范的命名也显得我们自身比较专业。



而且,如果如果命名不统一,团队之间的成员很难达成共识,任务交接时需要很大的学习成本。而更重要的是,有规范的命名可以极大的节省程序开发的时间成本,减少很多不必要的沟通与重复切图的概率。程序员完全可以直接使用的我们切片而不更改切片的名称,后期我们更换切图,只要切片名称不变,开发看都不用看直接替换就可以了。


1.所有命名全部为小写英文字母


在程序员的代码里只有小写的英文字母,如果你给出的命名全是中文的,那么他们是一定会更改的,所以命名全部用小写的英文字母是最基本的规则。


有些人会觉得写这么多英文太麻烦,但其实为了自己专业能力的提高,这种规范的命名方式是必须要经历的过程,当你习惯了这样的命名方式后,你的成就感会油然而生。


2.命名格式


一个大型项目会分很多模块,每个模块由不同的设计师来独立完成,还有人会专门管理公共的组件,如tabbar、navbar等等,这种情况下就会分为两种切图,一种是通用类型的切图,还有一种就是各个模块特有的切图。


通用切片命名格式:组件_类别_功能_状态@2x.png


模块特有切图命名规则:模块_类别_功能_状态@2x.png


3.常用英文单词表


如果所有命名都写为全称,名字就会特别长,所以我们可以将一些常用的英文单词进行缩写,减少工作成本与开发代码资源。


以上就是小编关于UI设计中的命名规范的分享,希望对大家有所帮助,想要了解更多UI设计规范相关内容,请关注本平台,小编会做及时的整理并发布的,大家注意查看哦!

⑸ UI设计中的切图是怎么切

一键标记切图,操作更快捷安装蓝湖插件之后,即可一键标记切图,方便版快捷。
一键权上传蓝湖,自动共享给同事
将标记好切图的设计图一键上传到蓝湖,即可将设计图跟切图共享给你的同事,管理更科学。
无须逐一发送,你的同事就能在线查看、在线评审设计图,还能自动标注和下载切图。
一键下载切图,支持多种设备
设计图上传到蓝湖后,可以一键下载多页面切图,也可以下载单张设计图内的切图文件;
而且蓝湖的切图下载支持多种设备,
开发常用的 PNG、SVG、JPG、PDF、WebP 格式都有哦~
一键压缩切图,告别二次加工
蓝湖支持一键压缩切图,能有效地缩小应用和网站的图像大小,从而让网站加载更快,用户体验更佳!
设计师和开发工程师从此告别切图文件二次加工,再也不用一张张地压缩切图文件了。

阅读全文

与ui切图文件命名相关的资料

热点内容
javagetyear 浏览:825
苹果后台app刷新点不开是怎么回事 浏览:322
jdk7u51linuxx64 浏览:343
搜狗浏览器文件管理在哪里 浏览:716
文件能发送发微信吗 浏览:39
happy萝莉破解 浏览:636
win10英雄联盟打字崩溃 浏览:836
win8guest设置密码 浏览:182
怎么让腾讯网络变好 浏览:750
英雄无敌4字体文件 浏览:892
oppo手机微信文件在哪里可以找到 浏览:766
ai存储为十几m的文件在哪里改 浏览:655
什么是网络口碑营销 浏览:236
惠州品牌网站设计多少钱 浏览:26
如何编程打开一个程序 浏览:10
pythonexceltxt文件 浏览:950
数据分析属于企业哪个部门 浏览:556
如何在文件夹中给视频排序 浏览:161
网络运营优势 浏览:973
cad的绘图文件扩展名为 浏览:865

友情链接