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

25学堂  •  扫码分享
我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

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

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

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

切图标注与命名规范

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

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

app标注三要素

 

APP标注三要素之 标注颜色

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

APP标注三要素之 标注内容

				文字需要提供:字体大小(px),字体颜色;顶部标题栏的背景色值,透明度;标题栏下方以及Tab bar上方其实有一条分割线,需要提供色值;内容显示区域的背景色;底部Tab bar的背景色值
			

APP标注三要素之 标注位置

所有元素统一距离屏幕最左24px。

				1、标题栏:背景色,标题栏文字大小,文字颜色;2、Banner:所有撑满横屏的大图,不需要横向尺寸,把高度标出了就可以了;3、菜单图标:图标的大小和图标的可点击区域不一定一致。也就是说,图标可以做的很小,但是为了保证点击的准确性和流畅性,工程师可以把可点击区域设置的很大,这样标注和切图的时候就要注意,标注的是可点击区域的大小,切图切的也是可点击区域的大小,也就是用透明区域去补上,否则图片会模糊。4、模块间隔:这个位置其实不是太重要,我习惯标注上这里,麻烦能少则少。5、图片+文字:这个应该比较常见,只标注一个单位(图+文)就可以了。图片需要标注宽高。图片距离上下左右的距离,文字大小颜色,这里的文字其实算两个控件,标题文字以及说明文字,需要单独标出。6、Tab Bar:这个位置其实比较特殊,你可以单独标注图标大小+文字大小;还可以图标+文字算作一个控件,整个切出来;我们工程师的习惯是用整个的,也就是图标+文字算作一个ICON。所有的页面标注总结起来就是:标文字,标图片,标间距,标区域;切图的时候记得输出个偶数尺寸的切片。
			

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

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

随意打赏

提交建议
微信扫一扫,分享给好友吧。