android设计规范,app安卓设计规范

安卓设计规范

在讲安卓设计规范之前我们先来看看一下的问题：

专注于为中小企业提供成都网站制作、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业华宁免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

*规范是什么？

*规范的目的是什么？

*怎样进行规范？

规范是什么

规范：意指明文规定或约定成俗的标准。或是按照标准，规范的要求进行操作，使某一行为或某一活动达到或是超越规定的标准。

也就是说 规范通过制定一些规定与约束 （如字体大小，界面尺寸，图标大小等） 使某一行为 （如项目开发，组件库的组件等） 达到标准 。

制定规范的目的是 确保设计的统一性与合理性 。规范维护的是项目的统一，而不是设计师个人的设计。想一想在公司里，除了设计，前有产品经理，后有程序员，还有用户，你做的东西都是要交给他们的。产品经理看你的设计是否展现了她的需求（设计内容是否包括前期讨论的内容），程序员问你要各种切图（图标、组件、布局、间距、字体大小等），用户看你的设计（颜色，图标使用的大小范围等），如果设计师完全没有规范，全凭自己的“天马行空”设计出来的东西，是会带来很大的麻烦的，举个简单的例子，切图规范，如果你的命名只有自己能看懂，那你就不要发给程序员了吧~因为发给他他也找不到哪个是哪个，这个图标应该放在哪里。你所做的设计是为了公司项目服务的，是为了客户服务的，所以你设计的东西就得满足项目中其他职位（产品经理、程序员）使用的需求，以及符合用户的使用习惯。所以 规范是为了项目利益最大化，高效化而在团队中制定成的约定。

不同的规范虽然内容不同但是包含的内容其实是差不多的，通常包括布局，颜色，图标，组件，字体这几个方面。接下来我们就来看看安卓中常见的设计规范，相信学习了之后，以后项目里的设计规范你都很清楚了，在设计中多加注意就行。一个产品设计完成之后，进行设计规范制作也是对项目总结的一个方法。能注意规范且会制定规范。

在进行app设计的时候，我们都会先建画布大小，当然是根据安卓界面尺寸来建立的。安卓手机那么多，不必每一个都记住。只要记住一两个，懂得之间的换算关系就行了。

目前安卓端主流尺寸主要是@1.5x，@2x以及@3x，记住下面三个就够用了。

@1.5x    480x854 /540x960

@2x      720x1280( 这是我最常用的界面尺寸)

@3x      1080x1920

考考你，那@1x是多少呢？

除了知道界面尺寸外，还得知道状态栏，导航栏，菜单栏的高度是多少，设计时建立好相应的参考线。

建议取用 720 ×1280 这个尺寸，这个尺寸 720×1280中显示完美，切图后的图片文件大小也适中，应用的内存消耗也不会过高。

对于图标其实在规范上面有很多要注意的，比如图标大小，图标设计，图标切图规范，这里就重点讲图标大小，之后会再讲图标设计规范。

安卓系统中，中文使用的是谷歌思源，英文使用的是Roboto。思源字体，是一种非衬线字体，Adobe称思源体为Source Han Sans,Google称思源体为Noto Sans CJK. 思源体包含7个自重，也就是7中不同粗细的字体。

对于字体或许在设计过程中你会选用其他字体，但是需要注意你所用的字体是否利于用户阅读，是否舒服等问题。

对于字体的大小，在界面设计过程中，需要统一，比如所有正文是统一大小，所有标题是统一大小。

不同风格的字体大小，给人的感觉也是不同的，我们要学会灵活应用。安卓文字单位是sp，以下文字是按照@1x倍率来规范的

在安卓中，标注距离一般用dp，标注文字用sp，而知之间的换算关系为：

1dp＝（屏幕ppi／160）px

不清楚单位的，可以去找上一篇文章了解px pt sp dp ppi。

Android开发需要的设计交付物至少要有：高保真UI图，标注，切图

这是最后，也是最重要的一点，因为你所切的图是要交到程序员的手里的，他写的程序达不到你想要的效果可能就是他看不懂你给他的规范~

1.切图尺寸必须为双数

2.单像素的图会出现边缘模糊的情况

3.命名需要规范

基本上 App 的切图可分为下面几大类： 背景、按钮、图示、图片、照片、TabBar icon 等。

一般命名规范可以为：

前缀：位置 组件 用途

后缀：状态

如用btn-xxx.png 来命名 。App 里的按钮拥有 4 种属性，分别为一般normal、点击highlight、不能点击disabled、选中(selected)。

但不追求精致与完整度的话，只出一般属性按钮图档就可以了。如果是点击（hightlight）状态就可以命名为：btn- cancel-hightlight.png  表示取消按钮点击时图标。

就算不是按照很严格的规范来命名，至少能让程序员知道你这个图标是在那种情况下使用的图标，这就需要设计师跟程序员很好的沟通，方便整个团队的开发，提高团队的开发效率

移动端设计必学（Android设计规范）

◆组件最小间隔建议为8dp或10dp。排版/文字最小间隔建议为4dp ;

◆组件尺寸建议能被4整除;

◆组件尺寸建议为偶数(单数容易出现锯齿)。

触摸式UI组件通常使用48dp作为基准单位。

◆48dp转换为物理尺寸大约9mm左右。这是一个用户手指能够准确舒服触摸的最小寸。

◆48dp指组件最小实际尺寸也指最小触摸区域

◆状态栏: 24dp

◆操作栏: 44/48dp

侧边导航: 286 / 304dp

◆悬浮操作按钮: 56dp

◆操作栏+TAB: 36+33dp / 44+ 40dp

◆底栏: 44/48dp

屏幕水平外边距,尺寸建议为: 6dp、8dp、16dp。

操作栏/ App Bar :可放置工具栏,显示应用的LOGO、主标题、导航、菜单以及功能等。

工具栏/Tool Bar : Android5.0推出的Material Design风格导航控件,用于取代Action Bar控件。相比Action Bar , ToolBar在样式、布局、运用上更灵活: Actionbar一定要固定在Activity顶部 ，ToolBar可以放到界面的任意位置;有更多的定制修改属性:

侧边导航/ Side Nav :左侧导航和右侧导航可固定显示,也可通过侧滑显示,覆盖在应用上。左侧导航主要用于导航菜单或重要信息显示,右侧导航主要显示二级扩展内容及相关信息。

底栏/ Bottom Bar :用于展示最核心、最重要的功能、导航,方便用户快速

切换,也是用户单手操作最舒适的区域。

◆Android程序开发统- 使用虚拟尺寸单位: dp/dip. sp

  dp/ dip :用于Android元素尺寸,如按钮、导航尺寸。

◆sp :用于Android字体大小尺寸。

◆按Android开发原则,文字的尺寸一-律用sp单位,非文字的尺寸一律使用dp单位。

  例如textSize= "14sp" 、layout height= "40dp" 。

◆dp= dip= sp

◆px与dp单位的转换与ppi有直接关系

◆ppi指每英寸所拥有的像素数/每英寸像素。

屏幕拥有像素的总数以及屏幕水平(宽)和垂直(高)方向的像素数量。单位为像素。像素/px是组成屏幕图像的最小点, -个相对大小单位,同屏幕里越小越密越清晰。

ppi指每英寸所拥有的像素数/每英寸像素。像素密度越高,代表屏幕图像显示越清晰。

dpi平面设计/印刷计数单位,指每英寸所能印刷出来的网点数。衡量打印机打印精度的主要参数之一，,值越大,表明打印机的打印精度越高。

用户需求、体验研究

信息架构、操作流程、页面交互设计产品原型图输出,推进UI落地

交互说明文档输出,推进前端落地产品可用性测试,优化改进

当你拿的手机距离你约25- 30厘米,如果手机pp达到300以上,你的眼睛将无法分辨出像素点。这就是苹果提出的视网膜屏幕。

显示分辨率:屏幕拥有像素的总数以及屏幕水平(宽)和垂直(高)方向的像素数量。单位为像素。

ppi :屏幕像素密度,每英寸所拥有的像素数/每英寸像素

ppi = dpi

◆逗号不排在最左侧

◆左对齐优先右对齐

标题越重要、级别越大颜色越深、越突出

◆字体设计有层次,有主次

◆正文行宽建议不超过320dp

◆dp/pt与px的装换与乃配

◆Android手机竝用结杓

◆Android基本布局入冂

◆Android文本排版入冂

android app界面设计规范(dpi,dp,px等)

PPI(Pixels per inch)：每英寸所拥有的像素数，即像素密度。

DPI(dots per inch)：即每英寸上，所能印刷的网点数，一般称为像素密度。ppi计算公式：ppi = 屏幕对角线像素数/屏幕对角线英寸数，通过勾股定理计算屏幕对角线像素数。

Screen Size(屏幕尺寸)：手机屏幕尺寸大小，如3英寸、4英寸、4.3英寸、5.7英寸，指的是对角线的长度。

DIP（device independent pixel）：即dip/dp，设备独立像素。 1px = 1dp density(由dpi决定)

Resolution(分辨率)：指手机屏幕垂直和水平方向上的像素个数。eg分辨率480 800，指该设备垂直方向有800个像素点，水平方向有480个像素点。

px(Pixel像素)：相同像素的ui，在不同分辨率的设备上效果不同。在小分辨率设备上会放大导致失真，大分辨率上被缩小。

Android Design里把主流设备的 dpi 归成了四个档次： 120 dpi、160 dpi、240 dpi、320 dpi ，具体见如下表格。

实际开发当中，我们经常需要对这几个尺寸进行相互转换（比如先在某个分辨率下完成设计，然后缩放到其他尺寸微调后输出），一般按照 dpi 之间的比例即 2:1.5:1:0.75 来给界面中的元素来进行尺寸定义。

也就是说如果以 160 dpi 作为基准的话，只要尺寸的 DP 是 4 的公倍数，XHDPI 下乘以 2，HDPI 下乘以 1.5，LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。但假设以 240 dpi 作为标准，那需要 DP 是 3 的公倍数，XHDPI 下乘以 1.333，MDPI 下乘以 0.666 ，LDPI 下除以 2。而以 LDPI 和 XHDPI 为基准就更复杂了。同时第一款Android设备（HTC的T-Mobile G1）是属于160dpi的。鉴于以上各种原因， 标准dpi=160

谷歌官方对dp的解释如下：

A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.

The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

简单来说，以160dpi的设备为准，该设备上1dp = 1px；如果屏幕密度大，1dip代表的px就多，比如在320dpi的屏幕上，1dip=2px(即1dp代表2个像素)。在app开发时，最好用dp来做界面的布局，以保证适配不同屏幕密度的手机。

dp和px的换算公式：

我的理解，该公式表示px的数值等于dp的数值*（设备dpi/160）

注意，px、dp是单位，但density没单位。

applyDimension的源码如下，可参考：

android的尺寸众多，建议使用分辨率为 720x1280 的尺寸设计。这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。

app启动图标为48*48dp，对应各dpi设备，图像资源像素如下：

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|48 48px|72 72px|94 96px|144px 144px|

操作栏图标为32*32dp，对应各dpi设备，图像资源像素如下：其中图形区域尺寸是24*24dp，可参考平时ui切图会有部分留白。

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|32 32px|48 48px|64 64px|96px 96px|

通知栏图标为24*24dp，对应各dpi设备，图标像素如下：

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|24 24px|36 36px|48 48px|72px 72px|

某些场景需要用到小图标，大小应当是16*16dp，其中图形区域尺寸12*12dp。

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|16 16px|24 24px|32 32px|48px 48px|