导航:首页 > 文件教程 > 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切图文件命名相关的资料

热点内容
有线电视升级失败 浏览:560
火绒安全把文件删掉了在哪里找 浏览:503
手机qq网络状态方框 浏览:225
哪里有文件纸袋 浏览:873
复制的东西能不能粘贴到空文件夹 浏览:876
酒店没有网络如何缴费 浏览:380
win10开机滚动很久 浏览:520
可对元数据实例进行的操作有什么 浏览:934
什么后缀的文件kit 浏览:295
word行书字体库下载 浏览:579
iosuc版本历史版本 浏览:14
电影字幕文件制作软件 浏览:723
windows10免密码登录 浏览:762
iphone5s跑步记步 浏览:978
手机网站设计怎么做好 浏览:322
中兴路由器修改密码 浏览:391
小米忘记压缩文件密码 浏览:716
cad哪些字体是形文件 浏览:2
word2007宝典pdf 浏览:46
lg电视如何连接网络 浏览:392

友情链接