当前位置: 首页 >> APP界面设计_APPUI设计_APP设计素材 >> 阅读正文

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

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

有什么注意事项。很高兴你来到了25学堂,一个专门介绍和分享APP设计知识和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群来咨询或者学习。



无觅相关文章插件,快速提升流量

本文标题:APP标注的三要素:标注颜色、标注内容和标注位置

本文地址:http://www.25xt.com/appdesign/9960.html

本文关键词: , ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。