画布尺寸：

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

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

单位和度量 Units and measurements

dpi =屏幕宽度(或高度)像素 / 屏幕宽度(或高度)英寸

dp =(宽度像素 x 160)/ dpi

名称

分辨率 px

dpi

像素比

示例 dp

对应像素

xxxhdpi

2160 x 3840

640

4.0

48dp

192px

xxhdpi

1080 x 1920

480

3.0

48dp

144px

xhdpi

720 x 1280

320

2.0

48dp

96px

hdpi

480 x 800

240

1.5

48dp

72px

mdpi

320 x 480

160

1.0

48dp

48px

字体 Typography

中文字体：思源黑体Source Han Sans / Noto(是一个字体，叫法不同而已)

英文字体：Roboto

注意：安卓的字号单位是SP

720×1280常见的字体大小：

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

元素

字重

字号

行距

字间距

App bar

Medium

20sp

–

–

Buttons

Medium

15sp

–

10

Headline

Regular

24sp

34dp

0

Title

Medium

21sp

–

5

Subheading

Regular

17sp

30dp

10

Body 1

Regular

15sp

23dp

10

Body 2

Bold

15sp

26dp

10

Caption

Regular

13sp

–

20

图标 icons

图标用途

mdpi (160dpi)

hdpi (240dpi)

xhdpi (320dpi)

xxhdpi (480dpi)

xxxhdpi (640dpi)

应用图标

48 x 48 px

72 x 72 px

96 x 96 px

144 x 144 px

192 x 192 px

系统图标

24 x 24 px

36 x 36 px

48 x 48 px

72 x 72 px

196 x 196 px

颜色

单位换算

距离单位是DP，文字单位是SP

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

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

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

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

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

图标在线下载网址：

图标网格是所有图标的基准网格并且具有特定的组成和比例。图标由一些对齐图标网格的平面几何形状组成。基本的平面几何形状有四种，具有特定尺寸以保证所有图标有一致的视觉感和比例。

两种形状相同尺寸不同的图标集供您在应用程序中使用：状态栏、上下文图标集和操作栏、桌面图标集。

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

常见一般常用做法：

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

720 x 1280 设计稿尺寸，按照传统老办法做的话，状态栏高度：48 px，导航栏高度：96 px，标签栏高度：96 px

最新规范MD的做法：

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

如果按照最新的Material Design规范设计的话，可以按照下面官方的规范。(文后有干货大礼包下载)

设计标注、切图：

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

其他标注工具：

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

界面的图标切图：

用Cutterman选中下面所示，根据需要选择不同分辨率的导出。输出支持Android平台的各种分辨率大小图片，什么XXHPDI，XHDPI，HDPI啊之类的，通通自动化输出，为你节省出更多的时间陪小伙伴好好玩耍。

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

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

启动图标：

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

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

交接给程序：

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

引导页：

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

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

文字流式

控件弹性

图片等比缩放

测试界面：

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

干货资料：

推荐阅读精选文章：

整理：虎哥

登录收藏

你可能喜欢的：