移动端界面-Android设计尺寸

长沙/UI设计师/7年前/934浏览
移动端界面-Android设计尺寸

Android

PS工具设计Android界面


画布尺寸:

如果想一稿适配ios,那就新建720×1280  分辨率72,像素/英寸。

如果单独设计安卓MD新规范的,那就新建1080×1920  分辨率72,像素/英寸。


720×1280常见的字体大小:

24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。


字体:

中文用Noto/思源黑体(是一个字体,叫法不同而已),英文用Roboto。



单位换算:

距离单位是DP

文字单位是SP


720×1280尺寸的换算关系 1dp=2px,文字1sp=2px。也就是说程序员拿到我们的px单位的标注稿,自己除以2就是dp和sp了。

1080×1920尺寸就是1dp=3px,文字1sp=3px


界面里的小图标常见的尺寸:

24px、32px,48px等,记住4的倍数比较好。

注意图标的尺寸要统一尺寸,以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大,需要调整下。

Image title

Image title


界面上的间距和元素尺寸:

最新规范MD的做法:

8dp原则   栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。

 

常见一般常用做法:

直接把ios的设计稿照搬过来,只不过状态栏,导航栏,标签栏按照安卓的来。

720 x 1280 设计稿尺寸:

状态栏高度:50 px
导航栏高度:96 px
标签栏高度:96 px

 

设计稿实时预览:

安装一个Ps Mirror可以在安卓手机上实时观看效果。

 

标注工具:

1.马克鳗

2.PxCook 像素大厨

3.Parker标

4.一键标注神器-zeplin

标注的时候,如果是720×1280尺寸设计的,就选对应的xhdpi,如果是1080×1920尺寸设计的,就选对应的xxhdpi。


界面的图标切图:

用Cutterman选中下面所示,根据需要选择不同分辨率的导出。


 

界面中重复利用的资源切图需要做成点9图片:

 Image title Image title

主要是一些按钮,单色或半透明的背景块。图标不用做点9。

 

启动图标:

做1024×1024尺寸,安卓对图标的样式没有要求,你可以做各种形状都行,一般做方形无圆角的,各家手机厂商的定制系统会自己加圆角。

然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。


交接给程序:

最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。

 

引导页:

值得注意的是引导页切图需要单独设计多套(480×800、720×1280、1080×1920)这个可别傻乎乎的用Cutterman切几套图,这就尴尬了。

 

适配方法3个原则:(不清楚的在网站搜索适配2字)

文字流式 控件弹性 图片等比缩放

 

测试界面:

程序实现DEMO版本以后,咱们要在测试机上好好检查下界面问题,及时跟程序沟通并更改。


干货资料:



可以看看下面这几篇文章:

1.安卓1080P界面设计规范解读

2.6个技巧帮你把IOS的UI转换成安卓!

3.Material Design 安卓5.1L (UI kit包下载!)

4.天天喊着学UI,知道安卓和iOS的区别吗?

5.UI设计师不可不知的安卓屏幕知识


最后说句:“对界面上的字号,间距不清楚的,多动手去截图,量一量优秀APP界面,多分析找规律。”


7
阅读原文
|
Report
|
27
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
大家都在看
Log in