切图iOS和android区别,iOS和Android的界面标注图的区别是什么

关于APP标注的知识和文章,网上有大把大把的!而且,老谭继续跟大家总结一下iOS的界面标注和Android界面标注的区别和相应的规范。也是回答某一些童鞋的想要知道iOS端和android的标注有什么区别。

到底需要我们标注哪些内容呢?

所有的APP界面标注总结起来就是:标文字,标图片,标间距,标区域;

1、iOS端的界面标注规范:

ab6c6fc921edbddc31e5d7022e1e1681.png

需要注意的:

A:我们标注的尺寸是像素px,如果技术那边的实际运用到技术中的是像素的一半,即像素的一半=技术的尺寸(比如  2px  =  1pt);例如:“分类”2个字,我标准的是36px,技术那边的尺寸就是18pt;

B:所有文字,行间距的标注的尺寸都是偶数;因为技术那边都是根据我们的尺寸除以2;

C:颜色的标注有的技术要求16进制,有的技术要求RGB,由于页面的限制所以我只标注了16进制的,按16进制和RGB都标注的是最好的~

颜色的16进制例子:#66cc66     就是我们常用的颜色值。

颜色的RGB例子:RGB(102,204, 100) 我们H5前端会用到的

平台不一样,标注的方法和相对应的标注元素也会不同。如下图所示:

ef6d55a0008f53225511f71b49f00ced.png

2、Android端的界面标注规范:

8f1e4f0dc10ce98196967ddbaddb6db0.png

安卓需要标注的如上图案例所示,比如图片需要标注宽高。

图片距离上下左右的距离,文字大小颜色,这里的文字其实算两个控件,标题文字以及说明文字,需要单独标出等。

3、iOS和Android的界面标注图的区别汇总。

安卓标注

1、设计时,用1280*720的设计稿进行设计

2、切图时, 切hdpi,xhdpi,xxhdpi三套分辨率的图标和引导页

3、标注时,距离用DP,字号用sp

ios标注

1、设计时,用1334*750的设计稿进行设计

2、切图时, 切的@2x,@3x图标和引导页

3、标注时,距离和字号用pt或者px

4、APP界面标注的目的

为了保证视觉设计稿的高品质呈现,同时也是给程序员更好的做界面适配。

一个好的设计标注是APP设计还原的有效保证,也是提高开发效率的保障!

e6b879122d8ae3dabedaa0aaffff7b24.png

5、当然,说到了APP界面标注,也要跟大家推荐3个不错的标注工具。

(1)pxcook像素大厨

UI设计师效率提升利器,让你专注于设计本质,不再为标注切图而烦恼,从设计到实现一气呵成。

(2)parker

Parker是一款运行在photoshop中的标注插件,它能够自动计算图层的尺寸、位置、距离等元素,自动为你生成标注。它操作简单,数据精确,能够识别文字图层各种属性,自动为你标注。从此告别手工标注界面的时代!属于Cutterman旗下的产品。

(3)标你妹 啊

一款UI设计师必备的UI自动标注工具。一款在线的标注的工具。

另外更多详细的标注知识都在这里!点击了解APP标注知识

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值