安卓设计尺寸规范

画布尺寸:

如果想一稿适配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

颜色

material design colors在线工具>>

单位换算

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

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

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

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

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

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

图标在线下载网址:

  1. http://www.iconfont.cn/  阿里图标库
  2. https://www.materialpalette.com/icons  

图标网格是所有图标的基准网格并且具有特定的组成和比例。图标由一些对齐图标网格的平面几何形状组成。基本的平面几何形状有四种,具有特定尺寸以保证所有图标有一致的视觉感和比例。
两种形状相同尺寸不同的图标集供您在应用程序中使用:状态栏、上下文图标集和操作栏、桌面图标集。

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

常见一般常用做法:

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

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

最新规范MD的做法:

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

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

设计标注、切图:

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

其他标注工具:

  1. 马克鳗
  2. PxCook 像素大厨
  3. Parker标

标注的时候,如果是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字)

  1. 文字流式
  2. 控件弹性
  3. 图片等比缩放

测试界面:

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

暂无评论

相关推荐

小米推出可免费商用全新MiSans字体

小米推出了全新的小米 12 系列产品以及 MIUI 13 等新品 同时还带来了一款全新系统字体 MiSans MIUI 13 便是采用了这种全新的系统字体 MiSans 官方介绍,MiSans 笔型平直有力,设计更加简约,减少视觉负担,更有利于 ...

UI设计师经常会遇到的一些问题

今天和大家分享几个每个ui设计师都会遇到的知识点,内容如下: 01  底部导航和内容的区分方式 大部分app产品页面都是带有底部导航的,正常来说,底部导航是需要和内容部分做一点区分的,如果底部导航是纯白色,内容 ...

【控件】Picker-选择器/拾取器

Picker(选择器/拾取器/选取器)是指提供多个选项集合供用户选择其中一项的控件。在不同平台Picker的具体控件表现形式不同。在iOS端Picker一般称之为滚轮选择器,而在Android端,Picker的主要表现形式是Dialog(对话 ...

B端设计素材整理(持续更新ing)

文末下载链接为全部整理后打包的文件分享↓↓↓ 11月11日 【组件】滴滴移动端组件库 mand-mobile-design.sketch  提取码:tnzy   【素材】GT 架构图工具包.fig GT 架构图工具包-轴侧风格 .fig  提取码:f0a3 &nbsp ...

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

安卓设计尺寸规范
嘿!有什么能帮到您的吗?