APP标注的三要素：标注颜色、标注内容和标注位置

今天算是25学堂的一篇关于APP标注最初级的入门教程。到底APP标注是标注哪些东西。

有什么注意事项。很高兴你来到了25学堂，一个专门介绍和分享APP设计知识和APP设计工具的网络课堂。

今天老谭老师跟大家来聊聊APP标注的三要素：标注颜色、标注内容和标注位置。

上图是非常简单的一份关于APP切图和标注的入门规范。值得大家好好的细看。

看完不明白，就来听老谭老师的唠叨。 什么是APP标注的三要素？

APP标注三要素之标注颜色

颜色用16进制和RGB表示都可能用得到，建议标注颜色时，两种色值表达都标上（16进制&RGB）。

----------------------------------------------------------------------------------------------------------

APP标注三要素之标注内容

文字需要提供：字体大小（px），字体颜色；

顶部标题栏的背景色值，透明度；

标题栏下方以及Tab bar上方其实有一条分割线，需要提供色值；

内容显示区域的背景色；

底部Tab bar的背景色值

----------------------------------------------------------------------------------------------------------

APP标注三要素之标注位置

所有元素统一距离屏幕最左24px。（这里的24px是全局性的数据。APP设计师可以直接和工程师沟通，也可以标注，推荐标注出来）

1、标题栏：背景色，标题栏文字大小，文字颜色；

2、Banner：所有撑满横屏的大图，不需要横向尺寸，把高度标出了就可以了；

3、菜单图标：

图标的大小和图标的可点击区域不一定一致。

也就是说，图标可以做的很小，但是为了保证点击的准确性和流畅性，工程师可以把可点击区域设置的很大，这样标注和切图的时候就要注意，标注的是可点击区域的大小，切图切的也是可点击区域的大小，也就是用透明区域去补上，否则图片会模糊。

4、模块间隔：这个位置其实不是太重要，我习惯标注上这里，麻烦能少则少。

5、图片+文字：这个应该比较常见，只标注一个单位（图+文）就可以了。

图片需要标注宽高。

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

6、Tab Bar：这个位置其实比较特殊，你可以单独标注图标大小+文字大小；还可以图标+文字算作一个控件，整个切出来；我们工程师的习惯是用整个的，也就是图标+文字算作一个ICON。

所有的页面标注总结起来就是：标文字，标图片，标间距，标区域；

切图的时候记得输出个偶数尺寸的切片。

如果各位还有不明白的地方，可以加入25学堂官网的QQ群来咨询或者学习。