如本文对您有帮助,就请我喝杯奶茶吧!
- 支付宝打赏
微信打赏
扫描用手机阅读此文
支持Android/iPhone
如果想一稿适配ios,那就新建720×1280 分辨率72,像素/英寸。
如果单独设计安卓MD新规范的,那就新建1080×1920 分辨率72,像素/英寸。
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 |
中文字体:思源黑体Source Han Sans / Noto(是一个字体,叫法不同而已)
英文字体:Roboto
注意:安卓的字号单位是SP
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 |
图标用途 | 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的倍数比较好。
注意图标的尺寸要统一尺寸,以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大,需要调整下。
图标在线下载网址:
图标网格是所有图标的基准网格并且具有特定的组成和比例。图标由一些对齐图标网格的平面几何形状组成。基本的平面几何形状有四种,具有特定尺寸以保证所有图标有一致的视觉感和比例。
两种形状相同尺寸不同的图标集供您在应用程序中使用:状态栏、上下文图标集和操作栏、桌面图标集。
链接: https://pan.baidu.com/s/1rd21rxLyZugm03ggcUf2zw 密码: 3ge5
常见一般常用做法:
直接把ios的设计稿照搬过来,只不过状态栏,导航栏,标签栏按照安卓的来。
720 x 1280 设计稿尺寸,按照传统老办法做的话,状态栏高度:48 px,导航栏高度:96 px,标签栏高度:96 px
最新规范MD的做法:
8dp原则 栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。
如果按照最新的Material Design规范设计的话,可以按照下面官方的规范。(文后有干货大礼包下载)
安装一个Ps Mirror可以在安卓手机上实时观看效果。
其他标注工具:
Parker标
标注的时候,如果是720×1280尺寸设计的,就选对应的xhdpi,如果是1080×1920尺寸设计的,就选对应的xxhdpi。
用Cutterman选中下面所示,根据需要选择不同分辨率的导出。输出支持Android平台的各种分辨率大小图片,什么XXHPDI,XHDPI,HDPI啊之类的,通通自动化输出,为你节省出更多的时间陪小伙伴好好玩耍。
主要是一些按钮,单色或半透明的背景块。图标不用做点9。
做1024×1024尺寸,安卓对图标的样式没有要求,你可以做各种形状都行,一般做方形无圆角的,各家手机厂商的定制系统会自己加圆角。
然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。
最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。
值得注意的是引导页切图需要单独设计多套(480×800、720×1280、1080×1920)这个可别傻乎乎的用Cutterman切几套图,这就尴尬了。
文字流式
控件弹性
图片等比缩放
程序实现DEMO版本以后,咱们要在测试机上好好检查下界面问题,及时跟程序沟通并更改。
链接: https://pan.baidu.com/s/13ztkqca6wsCYblWTGbxZiQ 密码: t34b
本文到此就要告一段落了,如果对你有帮助,能否打赏请我喝杯奶茶呢~ 感谢你的阅读。
关注微信公众号「木小夭设计」,回复关键字“666”,免费领取一线大厂(BAT)产品的设计规范大礼包等,