勤学思培训网LBGNBG
  • 终于明了什么是ui切图_安卓切图命名规范

    1什么是ui切图
    切图严格来说并不是Ui设计师的工作,而是前端工程师的工作,指的是将设计师的设计转化为网页,是一种将设计师的“理想”转化为“现实”的工作,将psd进行切片重组 利用div+css js等等前端开发代码来生成网页的一种技术。

    [图片0]2安卓切图命名规范
    所有命名全部为小写英文字母:这一点的理由很简单,我们的目标是让开发直接拿我们的切图进行使用,不能够随意修改名称,但是我们要知道,开发的代码里只有小写的英文字母,如果你给出的命名全是中文的,那么他们是一定会更改的。所以命名全部用小写的英文字母是基本的规则。

    [图片1]3UI切图怎么切
    不用在意那么多设备,不管iOS和Android手机型号有多少,只要我们了解它的屏幕分辨率之后就好办了。不同分辨率对应不同的倍率,这样的话我们适配的时候就知道怎么切图了,@2x表示两倍图,@3x表示三倍图。现在PhotoshopCC2015已经出了切图就更方便了,但是对于电脑的配置要求比较高,对于电脑配置比较低的可以这样干,作图的时候用CS6,文件在这里面做好之后,只需要启动CC2014或者CC2015进行切图操作就可以了。

    1、调出优选项Command(Ctrl)+k,勾选启用生成器,默认是不够选的。

    2、文件-生成-图像资源,这个是后期的时候用的比较多的一个选项。开始输出,准备工作都已经弄完,下面就需要用到CC2014或CC2015的图像生成器,前面的利其器的部分的增效工具里面的启用生成器一定要打勾,然后就可以直接操作,文件>生成>图像资源,然后你会看到,切图文件的旁边多了一个文件夹,文件夹的名称一般是“文件名-assets”,里面就是你的切图文件了。

    安卓只需要把iOS的@2x的图拷贝一份,然后建个文件夹命名为android,拷贝进去,去掉命名后面的@2x就可以了。

    4安卓切图切几套
    需要了解IPhone各个版本的手机屏幕密度:

    IPhone 4/4s/5/5s/5c/6 ≈320dpi

    你会发现单从屏幕密度来说,IPhone可以算是超高密度了。

    下面来说说这几个密度:

    LDPI        120dpi 低密度 不考虑这个了,消失了

    MDPI      160dpi 中密度 这个目前少见

    HDPI      240dpi 高密度 常见

    xHDPI     320dpi 超高密度 常见

    xxHDPI   480dpi 超超高密度 常见

    xxxHDPI    640dpi 超超高密度 推出了对此密度的支持,也就是平板电视的4K分辨率

    你的切图会根据这几个密度来决定输出多少套。理论状态下,如果你想兼顾到目前还存在的各个机型,应该为不同的密度提供不同尺寸大小的切图。但这无疑提升了巨大的工作量,而且还可能浪费很大的资源空间,实际上,很多机型已经不占有主流市场了,所以具体输出几套需要看公司的产品需求而定。

    选取大尺寸提供一套切片资源,交给工程师处理,适配到各个屏幕密度。这里要注意,这个“大尺寸”,指的并不是目前市面上Android手机出现过的大尺寸,而是指目前流行的主流机型中的大尺寸,这样可节省很大的资源控件。关于大尺寸选取多少,你需要和你们的安卓工程师沟通,每个安卓工程师对这个问题的结论并不同。

    5ui标注工具
    网页设计师比较好能在制作完排版设计后,为图像做清楚的标注,让接手的WEB前端更快的进入制作状况,常见需要标示的状况如下所示:

    1.预备使用HTML语言制作的按钮等互动组件的色彩、尺寸以及细节等;

    2.版面上各组件彼此间的距离等;

    3.其他常见必须标示的环节。

    注意以下几点,会让你的信息传递更明确:

    1.将同种类信息摆放在一起、并整齐排列,让人一目了然;

    2.标注色彩清晰、勿使用会与背景难以分辨的色彩;

    3.标注与图像本身间预留适当间隔,以不扰乱图像本身为原则;

    4.切勿重复标注;有许 多软件开发者开发了许多好用的小工具,节省大家浪费花费的时间与精力。

    首先是由 onpixel 开发的 Specctr ,这是一个 Firework 的外挂套件、具有可沿续原本工作环境流程以及跨平台的优点,该程序提供试用以及 Lite 的免费版可以下载。

    另外一个是 MarkMan(马克鳗),使用 Adobe AIR 所开发,因此也有着跨平台的特性,虽然是简体中文,但是所有的按钮都经过图形可视化,接口也相当精简明确,并不会造成使用上的困扰。