当前位置: 首页 > 编程日记 > 正文

android切图尺寸_安卓设计尺寸规范

63a3c73c8d1369e50e5c291988c07350.png

画布尺寸:

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

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

1f866766b100884fe16526c456e78cda.jpg

单位和度量 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

05282cb2044a8c5762ea027180d42015.png2bd02cfe398274d58d8067285e9c9d49.pnga321fba87c862dd34b2e508b19bf2ccc.png

a609e739e9ad08337851974d19310390.png

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

颜色

5aadd02895846bdd5b2b8ae86eee62eb.png

9e70ed9264487cfcc6912d284e608b8c.png

单位换算

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

a9c018aa923e21455a6f20cf206fd34e.png

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

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

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

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

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

图标在线下载网址:

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

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

c798066d70ca923e36a117b26fad9055.png

67c3f385583d3da2688546a4f6137087.png

31d87103a0be523576eaf1c9ff9839c5.png

4f905fc4c77b445525a48c9962bab443.png

fb678ec577476442aa384918e951349e.png

ff1fa2e3d19d8dbe189796fcc70f8ec8.png

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

常见一般常用做法:

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

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

最新规范MD的做法:

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

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

82d93bb76d1585a3a8dd8d91a05f1bd4.png

cca2c8e12de127498a2444a4b76a52b1.png

设计标注、切图:

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

其他标注工具:

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

界面的图标切图:

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

51d50a9b92ad5553e5281d50c53d0d0a.png

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

448e3252342bb3a4d28ac92a5416e729.pnga7248b8dba7f4e04be9a12f66e518bac.png

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

启动图标:

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

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

8c819f36bc2fd6f93b66cb95f5baab04.gif

交接给程序:

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

引导页:

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

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

文字流式

控件弹性

图片等比缩放

测试界面:

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

干货资料:

b492ed0839936cc618727e067888197d.png

推荐阅读精选文章:

整理:虎哥

登录收藏

你可能喜欢的:

相关文章:

Vue.js使用前

下载安装 node,npm,git 安装cnpm 淘宝cnpm镜像https://npm.taobao.org/,-g表示进行全局安装 npm install -g cnpm --registryhttps://registry.npm.taobao.org # 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init web…

无法解析 list 中的方法 iterator_Python-list中的append()和extend()方法区别

一、append()和extend()方法都是用来添加数据到list末尾的,两者的区别:append()添加的时候会把添加的数据当成一个整体进行添加,允许添加任意类型的数据extend()添加的时候会把添加的数据迭代进行添加,只允许添加可迭代对象数据&a…

牛客网多校训练第一场 B - Symmetric Matrix(dp)

链接: https://www.nowcoder.com/acm/contest/139/B 题意: 求满足以下条件的n*n矩阵A的数量模m:A(i,j) ∈ {0,1,2}, 1≤i,j≤n.A(i,j) A(j,i), 1≤i,j≤n.A(i,1) A(i,2) ... A(i,n) 2, 1≤i≤n.A(1,1) A(2,2) ... A(n,n) 0.其中1≤n…

接口访问次数_系统运行缓慢,CPU 100%,Full GC次数过多,这一招帮你全搞定

处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题。当然,这些问题的最终导致的直观现象就是系统运行缓慢,并且有大量的报警。本文主要针对系统运行缓慢这一问题,提供该问题的排…

python3-pwntools教程_python的pwntools工具的日常使用

1.安装操作系统:ubuntu16.04环境准备:pythonpiplibssl-devlibffi-devpwntools安装:sudo apt-get install libffi-devsudo apt-get install libssl-devsudo apt-get install pythonsudo apt-get install python-pipsudo pip install pwntoolsp…

Spring MVC 返回json数据 报406错误 问题解决方案

将jackson jar包改为jackson-databind-2.5.0.jar jackson-core-2.5.0.jar jackson-annotations-2.5.0.jar(这个版本的jackson 测试返回json格式的数据百分百没问题,其他版本的不稳定,所以选用这个版本的Jackson)ResponseBody 然…

c# 读hex_c#十六进制到位转换(c# hex to bit conversion)

c#十六进制到位转换(c# hex to bit conversion)我试图将64位数字的十六进制表示(例如字符串"FFFFFFFFF" )转换为二进制表示( "11111..." )。我试过了string result Convert.ToString(Convert.ToUInt64(value, 16), 2);但是这会导致一个令人困惑…

pip install lxml失败原因

python3 是用 VC 14 编译的, python27 是 VC 9 编译的, 安装 python3 的包需要编译的也是要 VC 14 以上支持的. VC 14 (2015)下载地址: https://www.microsoft.com/zh-cn/download/confirmation.aspx?id48145&6B49FDFB-8E5B-4B07-BC31-1…

go语言服务器连接mysql_go语言原生连接数据库

go操作mysqldatabase/sql原生支持连接池,是并发安全的这个标准库没有具体实现,只是列出了一些需要第三方库实现的具体内容下载驱动go get -u github.com/go-sql-driver/mysql连接数据库package mainimport ("database/sql""fmt"_ &q…

2017《面向对象程序设计》寒假作业一

1、你有什么技能比大多人(超过70%以上)更好? 我看电影比一般人多一点点;我听英文歌比一般人多一点点;我有一把尤克里里和一个滑板。我有很多爱好,但都没能发展成我的特长,它们给我的生活增添了情…

gis中的加权求和工具在哪里_ArcGIS教程:加权总和的工作原理

使用加权总和工具可以对多个输入进行加权及组合,以创建整合式分析。它可以轻松地将多个栅格输入(代表多种因素)与组合权重或相对重要性相结合,在这一方面它与加权叠加工具很相似。这两种工具有两个主要区别:加权总和工具不能将重分类值重设为…

flask执行python程序_Flask app后如何执行代码(应用程序运行)开始

但我想使用一种方法,它还可以保存相机中的所有相框(我已经有功能了)。在问题是,一旦我启动了Flask应用程序,我最多只能存储在localhost中打开web页面时捕获的帧。我希望能够在应用程序运行时执行其他代码(保存图片),以便保存所有图…

异常处理与MiniDump详解(3) SEH(Structured Exception Handling)

write by 九天雁翎(JTianLing) -- blog.csdn.net/vagrxie 讨论新闻组及文件 一、 综述 SEH--Structured Exception Handling,是Windows操作系统使用的异常处理方式。 对于SEH,有点需要说明的是,SEH是属于操作系统的特性,不为特定…

电热水器技术性能指标

1、即热式和贮水式的选择 有使用安全、卫生、不受水压限制,随时可供热水,水温易调节等优点,在发达的西方国家已广泛地使用,即热式热水器体积小,不须预热,但功率大,通常在4-6kw以上&#xff0…

java相关网络协议无响应_java网络协议有哪些

上网的途径有很多,java是最普遍的,那么卑java网络协议有哪些?了解网络安全常识,首先就要了解计算机网络安全有哪些基本注意事项,下面佰佰安全网小编就带您认识一下吧。概念协议是指计算机通信网络中两台计算机之间进行通信所必须…

es日期format_elasticsearch存储日期格式字段

elasticsearch创建index之后,可以设置mapping,如果mapping中没有设置date的format,那么默认为两种格式:date_optional_time 此格式为ISO8601标准 示例:2018-08-31T14:56:18.00008:00epoch_millis 也就是时间戳 示例151…

arraylist 后往前遍历_面试官:谈谈常用的Arraylist和Linkedlist的区别

Arraylist:底层是基于动态数组,根据下表随机访问数组元素的效率高,向数组尾部添加元素的效率高;但是,删除数组中的数据以及向数组中间添加数据效率低,因为需要移动数组。例如最坏的情况是删除第一个数组元素…

linux mipi驱动分析_寒武纪社招内推数字IC设计、DSI驱动、软件架构、产品经理、芯片架构、工具链开发、深度学习、FAE工程师...

点击上方蓝字关注我吧!为什么内推更靠谱?内推是基于人脉关系链的推荐,其背后有一定的信用背书,靠谱的人推荐的人相对也会比较靠谱,所以企业一般职位都是从内部开始分享的,相较于自己海投简历,内…

关于鼠标、键盘的几个例子

1 1. 鼠标的哪个按键被点击&#xff1f;2 <html>3 <head>4 <script type"text/javascript">5 function whichButton(event)6 {7 if (event.button2)8 {9 alert("你点击了鼠标右键!")10 }11 else12 {13 alert("你点击了鼠标左键!&qu…

mysql性能优化1

当我们去设计数据库表结构&#xff0c;对操作数据库时&#xff08;尤其是查表时的SQL语句&#xff09;&#xff0c;我们都需要注意数据操作的性能。这里&#xff0c;我们不会讲过多的SQL语句的优化&#xff0c;而只是针对MySQL这一Web应用最多的数据库。希望下面的这些优化技巧…

java获取date的时分秒_Java 之 Date 获取 年月日时分秒

package com.util;import java.text.DateFormat;import java.util.Calendar;import java.util.Date;public class Test {public void getTimeByDate(){Date date new Date();DateFormat df1 DateFormat.getDateInstance();//日期格式&#xff0c;精确到日System.out.println(…

python中字典的value可以为任意对象_Python对象作为字典值

所以我有以下代码,其中字典的值是一个对象,该对象的关键是对象中的一个项目&#xff1a;class MyObject():def getName(self):return self.namedef getValue(self):return self.valuedef __init__(self,name, value):self.name nameself.value valuedict {}object MyObject…

Android Java使用JavaMail API发送和接收邮件的代码示例

JavaMail是Oracle甲骨文开发的Java邮件类API,支持多种邮件协议,这里我们就来看一下Java使用JavaMail API发送和接收邮件的代码示例 使用Javamail发送邮件&#xff0c;必需的jar包&#xff08;请下载javamail的源文件&#xff0c;官方下载页&#xff1a;http://www.oracle.com/t…

python 包用法_Python 基础教程之包和类的用法

Python 基础教程之包和类的用法这篇文章主要介绍了 Python 基础教程之包和类的用法的相关资料, 需要的朋友可以参考下Python 是一种面向对象、解释型计算机程序设计语言&#xff0c;由 Guido van Rossum 于 1989 年底发明&#xff0c;第一个公开发行版发行于 1991 年。Python 语…

[bzoj2259][Oibh]新型计算机_Dijkstra

新型计算机 bzoj-2259 Oibh 题目大意&#xff1a;给定一个n个数的数列&#xff0c;第i个数为a[i]&#xff0c;更改第i个数至x的代价为|x-a[i]|。求最小代价&#xff0c;使得&#xff1a;读入一个数s1后&#xff0c;向后连着读s1个数&#xff0c;然后如s2&#xff0c;再向后读s2…

arcengine 加载地图不显示_地图建筑建模制作与输出

导读阅读完此文&#xff0c;你会了解&#xff1a;1、地图建筑模型通常如何制作的2、地图建筑模型替换策略地图上往往会有一些定制建筑的需求&#xff0c;例如将下面的水立方做成气泡感的。 加入定制模型之前加入定制模型之后这种需求就需要建模师对建筑做定制化建模。模型制作首…

用easyx画电子钟_Canvas入门-利用Canvas绘制好玩的电子时钟

在这之前你需要了解一下方法的使用&#xff1a;beginPath()closePath()moveTo()lineTo()fill()stroke()fillRect()clearRect()这些我在前面的文章介绍过&#xff0c;可以看&#xff1a;画个圆arc()方法arc(x, y, radius, startAngle, endAngle, anticlockwise) > 画一个以(x…

前端开发工程师面试题之综合篇

温馨提示&#xff1a;以下系列的面试题是通过整合网上各位大牛的文章而成&#xff0c;站在巨人的肩膀上&#xff0c;能够让我们更进一步。 1、页面从输入URL到页面加载显示完成&#xff0c;这个过程中都发生了什么&#xff1f; 输入域名地址发送域名地址至DNS服务器并获得对应W…

C语言基础(12)-输入和输出

1. int scanf(const char *format, ...) 说明&#xff1a;scanf用于通过控制台输入字符串。 注意&#xff1a; (1).通过scanf()函数输入的字符串&#xff0c;系统会自动在其后面补一个0,scanf默认回车和空格都是代表输入完成&#xff0c;这样会导致无法输入一个完整的字符串。 …

java static 可见性_Java多线程 synchronized与可见性的关系以及可见性问题总结

作者&#xff1a;七里香的编程之路出自&#xff1a;OSCHINA原文&#xff1a;my.oschina.net/u/4098550/blog/4548274能保证可见性的措施除了volatile 可以让变量保证可见性外.happens-before九大规则. 都是能够保证可见性的. 其中就包含了锁操作(synchronized 和 lock) 和 vola…