Photoshop移动UI设计教程案列-移动UI设计规范课件

第2章移动UI设计规范本章介绍：设计规范在移动UI设计的工作中有着保证视觉统一性、提升项目工作效率、提升设计细节等诸多好处。本章对iOS系统以及Android系统的基础设计规范进行讲解。通过本章的学习，读者可以对移动UI设计的基础规范有一个基本的认识，有助于高效便利地进行移动UI设计工作。第2章移动UI设计规范本章介绍：掌握iOS系统设计规范掌握Android系统设计规范学习目标掌握iOS系统设计规范学习目标iOS设计尺寸及单位iOS界面结构iOS基本布局iOS图标规范iOS文字规范2.1

iOS系统设计规范iOS设计尺寸及单位2.1iOS系统设计规范iOS系统基础规范可以通过设计尺寸、界面结构、基本布局、图标规范及字体规范5个方面进行详尽的剖析。2.1

iOS系统设计规范iOS系统基础规范可以通过设计尺寸、界面结构、基本布局、图标1.相关单位•PPI:像素密度，英文全称“PixelsPerinch”，简称“PPI”，是屏幕分辨率单位，表示的是每英寸所拥有的像素数量，如图2-1所示。屏幕密度越大，画面越细腻。因此，iPhone4比iPhone3GS屏幕尺寸虽然相同，但实际像素大了一倍，清晰度自然变高。2.1.1

iOS设计尺寸及单位PPI的计算公式（X、Y分别为横向、纵向的像素数）1.相关单位2.1.1iOS设计尺寸及单位PPI的计算公•Asset:比例因子，英文全称“Asset”。标准分辨率显示器具有1：1像素密度（或@1x），其中一个像素等于一个点。高分辨率显示器具有更高的像素密度，比例因子为2.0或3.0（称为@2x和@3x）。因此，高分辨率显示器需要具有更多像素的图像。一个10px×10px的标准分辨率（@1x）图像，该图像的@2x版本为20px×20px，@3x版本为30px×30px2.1.1

iOS设计尺寸及单位•Asset:比例因子，英文全称“Asset”。标准分辨率显•逻辑像素和物理像素：逻辑像素，英文全称“LogicPoint”，单位“点”，即“pt”，是根据内容尺寸计算的单位。如iPhone4逻辑像素是480x320pt，但由于每个逻辑的点因为视网膜屏密度增加了1倍，所以一个点等于两个像素，因此iPhone4的物理像素是960x640px。iOS开发工程师和使用Sketch软件设计界面的UI设计师使用的单位都是pt。逻辑像素与物理像素的转换2.1.1

iOS设计尺寸及单位•逻辑像素和物理像素：逻辑像素与物理像素的转换2.1.12.设计尺寸iOS常见的设备尺寸。在进行界面设计稿时，为了一稿适配，都是以iPhone6/6s/7/8为基准。使用Photoshop就建750x1334px尺寸的画布，如果是使用Sketch就建立375x667pt。iOS常见设备的尺寸iOS设计标准尺寸2.1.1

iOS设计尺寸及单位2.设计尺寸iOS常见设备的尺寸iOS界面主要由状态栏、导航栏、标签栏组成。2.1.2

iOS界面结构iOS手机端界面结构图iOS界面主要由状态栏、导航栏、标签栏组成。2.1.2iiOS界面主要由状态栏、导航栏、标签栏组成。iOS手机端界面结构图2.1.2

iOS界面结构iOS界面主要由状态栏、导航栏、标签栏组成。iOS手机端界面iOS界面主要由状态栏、导航栏、标签栏组成。iOSiPad界面结构图2.1.2

iOS界面结构iOS界面主要由状态栏、导航栏、标签栏组成。iOSiPad1.网格系统网格系统（GridSystems），又称为栅格系统，是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面布局设计的方式，能使布局规范、简洁、有秩序。2.1.3

iOS基本布局网格系统1.网格系统2.1.3iOS基本布局网格系统2.组成元素网格系统由列、水槽以及边距3个元素组成。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。组成元素（①列、②水槽、③边距）2.1.3

iOS基本布局2.组成元素组成元素（①列、②水槽、③边距）2.1.3i3.网格运用•单元格：iOS的最小点击区域是44pt，即88px（@2x）。因此，在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。其中4px容易将页面切割细碎，所以比较推荐使用8px。单元格2.1.3

iOS基本布局3.网格运用单元格2.1.3iOS基本布局•列：列的数量有4、6、8、10、12、24这几种情况。其中4列通常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况，然而24列将页面切割太碎，因此实际使用还是以12列和6列为主。

列的使用2.1.3

iOS基本布局•列：列的数量有4、6、8、10、12、24这几种情况。其中•水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如24、32、40。其中32px（16pt@2x）最为常用。

水槽2.1.3

iOS基本布局•水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px•边距：边距的宽度也可以与水槽有所区别。在iOS中以@2x为基准,常见的边距有20px、24px、30px、32px、40px以及50px。边距的选择应结合产品本身的气质，其中30px是最为舒适的边距，也是绝大多数APP首选的边距。

iOS中的设置及通用页面都采用了30px的边距2.1.4

iOS图标规范•边距：边距的宽度也可以与水槽有所区别。在iOS中以@2x为在iOS中，图标规范可以从应用图标和系统图标两个方面进行详尽的剖析。1.应用图标•应用图标的概念：应用图标是应用程序的图标。应用图标主要应用于主屏幕、APPStore、Spotlight以及设置中。

iOS系统中各类应用图标2.1.4

iOS图标规范在iOS中，图标规范可以从应用图标和系统图标两个方面进行详尽•应用图标的设计：应用图标在设计时尺寸可以采用1024px，并根据iOS官方模版进行规范。正确的图标设计稿应是直角矩形不带圆角，iOS会自动应用一个圆角折罩将图标的4个角遮住。

iOS官方模版2.1.4

iOS图标规范•应用图标的设计：应用图标在设计时尺寸可以采用1024px，•应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、AppStore、Spotlight以及设置场景中，尺寸也应根据不同设备的分辨率进行适配。

iOS系统中不同设备应用图标的尺寸2.1.4

iOS图标规范•应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、Ap2.系统图标•系统图标的概念：系统图标即界面中的功能图标，系统图标主要应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标，UI设计师可以设计自定义图标。

澳大利亚Prospa产品设计负责人AndrewMcKay创作2.1.4

iOS图标规范2.系统图标澳大利亚Prospa产品设计负责人Andre•系统图标的设计：在导航栏和工具栏上的图标一般是44px(22pt@2x),在标签栏上的图标一般是50px（25pt@2x）。苹果官方提供了四种不同形状的标签栏图标尺寸供UI设计师参考。其意义是让不同外形的图标在同一个标签栏时，保证视觉平衡。

标签栏图标尺寸2.1.4

iOS图标规范•系统图标的设计：在导航栏和工具栏上的图标一般是44px(2•系统图标的适配：自定义图标会以不同的分辨率出现在导航栏、工具栏以及标签栏场景中，尺寸也应根据不同设备的分辨率进行适配。

iOS系统中不同设备系统图标的尺寸2.1.4

iOS图标规范•系统图标的适配：自定义图标会以不同的分辨率出现在导航栏、工1.系统字体：iOS英文使用的是SanFrancisco(SF)字体，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SFUIText适用与小于19pt的文字，SFUIDisplay适用于大于20pt的文字。中文使用的是苹方，共有6个字重。2.1.5

iOS文字规范

iOS系统字体1.系统字体：2.1.5iOS文字规范iOS系统字体2.字号大小：iOS设计时要注意字号的大小。一般为了区分标题和正文，字体大小差异至少保持在4px(2pt@2x),正文的合适行间距在1.5～2倍之间。

iOS系统APP的字体建议2.1.5

iOS文字规范2.字号大小：iOS系统APP的字体建议2.1.5Android系统基础规范可以通过设计尺寸、界面结构、基本布局、字体规范及图标规范5个方面进行详尽的剖析。2.2

Android系统设计规范Android系统基础规范可以通过设计尺寸、界面结构、基本布1.相关单位•DPI:网点密度，英文全称“DotPerinch”，简称“DPI”，是打印分辨率单位,表示每英寸打印的点。在移动设备上等同于PPI，表示的是每英寸所拥有的像素数量。通常PPI代表苹果手机，DPI代表安卓手机。2.2.1

Android设计尺寸及单位

DPI等同于PPI1.相关单位2.2.1Android设计尺寸及单位D•独立密度像素与独立缩放像素：独立密度像素,英文全称“Density-independentpixels”，简称“dp”，是安卓设备上的基本单位，等同于苹果设备上的pt。Android开发工程师使用的单位是dp,所以UI设计师进行标注时应将px转化成dp,公式为dp*ppi/160=px。当设备的DPI值是320，通过公式可得出1dp=2px，如图2-23（类似iPhone6/7/8的高清屏）。

dp与px的转换2.2.1

Android设计尺寸及单位•独立密度像素与独立缩放像素：dp与px的转换2.2.1独立缩放像素，英文全称“Scale-independentPixel”，简称“sp”，是Android设备上的字体单位。Android平台允许用户自定义文字大小（小、正常、大、超大等等），当文字尺寸是“正常”状态时，1sp=1dp，如图2-XX。而当文字尺寸是“大”或“超大”时，1sp>1dp。UI设计师进行Android界面的设计时，标记字体的单位选用sp。

sp等同于dp2.2.1

Android设计尺寸及单位独立缩放像素，英文全称“Scale-independent2.设计尺寸Android常见的设备尺寸。在进行界面设计稿时，如果要一想一稿适配iOS，那就使用Photoshop新建720x1280px尺寸的画布。如果根据MaterialDesign新规范单独设计Android，那就使用Photoshop新建1080x1920px尺寸的画布。无论哪种需求，使用Sketch只建立360x640dp即可。

Android常见的设备尺寸(上)

Android设计标准尺寸（下）2.2.1

Android设计尺寸及单位2.设计尺寸Android常见的设备尺寸(上)AndiOS界面主要由状态栏、导航栏、顶部应用栏组成。2.2.2

Android界面结构

Android界面结构iOS界面主要由状态栏、导航栏、顶部应用栏组成。2.2.2在iOS中已经剖析了网格系统及其组成元素，因此在Android布局中不再赘述，直接进行Android中网格的布局。•单元格：Android的最小点击区域是48dp，因此能被整除的偶数4和8作为Android最小单元格比较合适。2.2.3

Android基本布局

移动设备的8dp网格所有组件都与移动设备的8dp网格对齐在iOS中已经剖析了网格系统及其组成元素，因此在Androi图标、排版和组件中的某些元素可以与4dp网格对齐。•列：列的数量在手机设备上推荐4列，-平板电脑上推荐8列。

列的数量，手机设备（左）平板电脑（右）与4dp网格对齐2.2.3

Android基本布局图标、排版和组件中的某些元素可以与4dp网格对齐。列的水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推荐24dp。

手机设备、平板电脑水槽和边距的宽度2.2.3

Android基本布局水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推边距：边距的宽度可以和水槽统一，也可以根据产品和水槽不同。当Android中边距的宽度和水槽不同时，其宽度的设置具体可以参考iOS布局中边距的宽度。

边距的宽度2.2.3

Android基本布局边距：边距的宽度可以和水槽统一，也可以根据产品和水槽不同。当在Android中，图标规范可以根据MaterialDesign设计语言，从应用图标和系统图标两个方面进行详尽的剖析。1.应用图标•应用图标的概念：应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上。2.2.4

Android图标规范

Android系统中各类应用图标在Android中，图标规范可以根据MaterialDes•应用图标的设计：创建应用图标时，应以320dpi分辨率中的48dp尺寸为基准。MaterialDesign提供了四种不同形状的应用图标尺寸供UI设计师参考，以保持一致的视觉平衡。

不同形状的应用图标尺寸2.2.4

Android图标规范•应用图标的设计：创建应用图标时，应以320dpi分辨率中的•应用图标的适配：应用图标的尺寸应根据不同设备的分辨率进行适配。当应用图标应用于GooglePlay中，其尺寸是512x512px。

Android系统中不同设备应用图标的尺寸2.2.4

Android图标规范•应用图标的适配：应用图标的尺寸应根据不同设备的分辨率进行适2.系统图标•系统图标的概念：系统图标即界面中的功能图标，通过简洁现代的图形表达一些常见功能。MaterialDesign提供了一套完整的系统图标，同时设计师也可以根据产品的调性进行自定义设计。

MaterialDesign官网提供的完整系统图标2.2.4

Android图标规范2.系统图标MaterialDesign官网提供的完整•系统图标的设计：创建系统图标时，以320dpi分辨率中的24dp尺寸为基准。图标应该留出一定的边距，保证不同面积的图标有协调一致的视觉效果。

系统图标的设计2.2.4

Android图标规范•系统图标的设计：创建系统图标时，以320dpi分辨率中的2MaterialDesign语言提供了4种不同的图标形状供UI设计师参考，以保持视觉平衡。

MaterialDesign官网提供的四类图标内部结构线2.2.4

Android图标规范MaterialDesign语言提供了4种不同的图标形状供U设计时为保证图标清晰，需将软件中X和Y坐标设为整数，而不是小数，将图标“放在像素上”。

正确示例（左）错误示例（右）2.2.4

Android图标规范设计时为保证图标清晰，需将软件中X和Y坐标设为整数，而不是小系统图标由①描边末端、②圆角、③反白区域、④描边、⑤内部角⑥边界区域六部分组成。

系统图标2.2.4

Android图标规范系统图标由①描边末端、②圆角、③反白区域、④描边、⑤内部角⑥边角：边角半径默认为2dp。内角应该是方形而不要使用圆形，圆角建议使用2dp。

边角半径为2dp的图标解析图2.2.4

Android图标规范边角：边角半径默认为2dp。内角应该是方形而不要使用圆形，圆描边：系统图标使用2dp的描边以保持图标的一致性。

描边为2dp的图标解析图2.2.4

Android图标规范描边：系统图标使用2dp的描边以保持图标的一致性。描边描边末端：描边末端应该是直线并带有角度，留白区域的描边粗细也应该是2dp。描边如果是倾斜45度，那么末端应该也是倾斜45度为结束。

描边末端为2dp的图标解析图2.2.4

Android图标规范描边末端：描边末端应该是直线并带有角度，留白区域的描边粗细也视觉校正：如果系统图标需要设计复杂的细节，则可以进行细微的调整以提高其清晰度。

•系统图标的适配：系统图标的尺寸应根据不同设备的分辨率进行适配。

系统图标的适配复杂图标的视觉校正解析图2.2.4

Android图标规范视觉校正：如果系统图标需要设计复杂的细节，则可以进行细微的调1.系统字体Android英文使用的是Roboto字体，共有6个字重。中文使用的是思源黑体，又称为“SourceHanSans”或“Noto”，共有7个字重。

思源黑体2.2.5

Android字体规范1.系统字体思源黑体2.2.5Android字体规2.字号大小Android设计时要注意字号的大小。Android各元素以720x1280px为基准设计，可以与iOS对应，其常见的字号大小：24px、26px、28px、30px、32px、34px，36px等，最小字号为20px。

Android系统APP的字体建议2.2.5

Android字体规范2.字号大小Android系统APP的字体建议2.2.第2章移动UI设计规范本章介绍：设计规范在移动UI设计的工作中有着保证视觉统一性、提升项目工作效率、提升设计细节等诸多好处。本章对iOS系统以及Android系统的基础设计规范进行讲解。通过本章的学习，读者可以对移动UI设计的基础规范有一个基本的认识，有助于高效便利地进行移动UI设计工作。第2章移动UI设计规范本章介绍：掌握iOS系统设计规范掌握Android系统设计规范学习目标掌握iOS系统设计规范学习目标iOS设计尺寸及单位iOS界面结构iOS基本布局iOS图标规范iOS文字规范2.1

iOS系统设计规范iOS设计尺寸及单位2.1iOS系统设计规范iOS系统基础规范可以通过设计尺寸、界面结构、基本布局、图标规范及字体规范5个方面进行详尽的剖析。2.1

iOS系统设计规范iOS系统基础规范可以通过设计尺寸、界面结构、基本布局、图标1.相关单位•PPI:像素密度，英文全称“PixelsPerinch”，简称“PPI”，是屏幕分辨率单位，表示的是每英寸所拥有的像素数量，如图2-1所示。屏幕密度越大，画面越细腻。因此，iPhone4比iPhone3GS屏幕尺寸虽然相同，但实际像素大了一倍，清晰度自然变高。2.1.1

iOS设计尺寸及单位PPI的计算公式（X、Y分别为横向、纵向的像素数）1.相关单位2.1.1iOS设计尺寸及单位PPI的计算公•Asset:比例因子，英文全称“Asset”。标准分辨率显示器具有1：1像素密度（或@1x），其中一个像素等于一个点。高分辨率显示器具有更高的像素密度，比例因子为2.0或3.0（称为@2x和@3x）。因此，高分辨率显示器需要具有更多像素的图像。一个10px×10px的标准分辨率（@1x）图像，该图像的@2x版本为20px×20px，@3x版本为30px×30px2.1.1

iOS设计尺寸及单位•Asset:比例因子，英文全称“Asset”。标准分辨率显•逻辑像素和物理像素：逻辑像素，英文全称“LogicPoint”，单位“点”，即“pt”，是根据内容尺寸计算的单位。如iPhone4逻辑像素是480x320pt，但由于每个逻辑的点因为视网膜屏密度增加了1倍，所以一个点等于两个像素，因此iPhone4的物理像素是960x640px。iOS开发工程师和使用Sketch软件设计界面的UI设计师使用的单位都是pt。逻辑像素与物理像素的转换2.1.1

iOS设计尺寸及单位•逻辑像素和物理像素：逻辑像素与物理像素的转换2.1.12.设计尺寸iOS常见的设备尺寸。在进行界面设计稿时，为了一稿适配，都是以iPhone6/6s/7/8为基准。使用Photoshop就建750x1334px尺寸的画布，如果是使用Sketch就建立375x667pt。iOS常见设备的尺寸iOS设计标准尺寸2.1.1

iOS设计尺寸及单位2.设计尺寸iOS常见设备的尺寸iOS界面主要由状态栏、导航栏、标签栏组成。2.1.2

iOS界面结构iOS手机端界面结构图iOS界面主要由状态栏、导航栏、标签栏组成。2.1.2iiOS界面主要由状态栏、导航栏、标签栏组成。iOS手机端界面结构图2.1.2

iOS界面结构iOS界面主要由状态栏、导航栏、标签栏组成。iOS手机端界面iOS界面主要由状态栏、导航栏、标签栏组成。iOSiPad界面结构图2.1.2

iOS界面结构iOS界面主要由状态栏、导航栏、标签栏组成。iOSiPad1.网格系统网格系统（GridSystems），又称为栅格系统，是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面布局设计的方式，能使布局规范、简洁、有秩序。2.1.3

iOS基本布局网格系统1.网格系统2.1.3iOS基本布局网格系统2.组成元素网格系统由列、水槽以及边距3个元素组成。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。组成元素（①列、②水槽、③边距）2.1.3

iOS基本布局2.组成元素组成元素（①列、②水槽、③边距）2.1.3i3.网格运用•单元格：iOS的最小点击区域是44pt，即88px（@2x）。因此，在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。其中4px容易将页面切割细碎，所以比较推荐使用8px。单元格2.1.3

iOS基本布局3.网格运用单元格2.1.3iOS基本布局•列：列的数量有4、6、8、10、12、24这几种情况。其中4列通常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况，然而24列将页面切割太碎，因此实际使用还是以12列和6列为主。

列的使用2.1.3

iOS基本布局•列：列的数量有4、6、8、10、12、24这几种情况。其中•水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如24、32、40。其中32px（16pt@2x）最为常用。

水槽2.1.3

iOS基本布局•水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px•边距：边距的宽度也可以与水槽有所区别。在iOS中以@2x为基准,常见的边距有20px、24px、30px、32px、40px以及50px。边距的选择应结合产品本身的气质，其中30px是最为舒适的边距，也是绝大多数APP首选的边距。

iOS中的设置及通用页面都采用了30px的边距2.1.4

iOS图标规范•边距：边距的宽度也可以与水槽有所区别。在iOS中以@2x为在iOS中，图标规范可以从应用图标和系统图标两个方面进行详尽的剖析。1.应用图标•应用图标的概念：应用图标是应用程序的图标。应用图标主要应用于主屏幕、APPStore、Spotlight以及设置中。

iOS系统中各类应用图标2.1.4

iOS图标规范在iOS中，图标规范可以从应用图标和系统图标两个方面进行详尽•应用图标的设计：应用图标在设计时尺寸可以采用1024px，并根据iOS官方模版进行规范。正确的图标设计稿应是直角矩形不带圆角，iOS会自动应用一个圆角折罩将图标的4个角遮住。

iOS官方模版2.1.4

iOS图标规范•应用图标的设计：应用图标在设计时尺寸可以采用1024px，•应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、AppStore、Spotlight以及设置场景中，尺寸也应根据不同设备的分辨率进行适配。

iOS系统中不同设备应用图标的尺寸2.1.4

iOS图标规范•应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、Ap2.系统图标•系统图标的概念：系统图标即界面中的功能图标，系统图标主要应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标，UI设计师可以设计自定义图标。

澳大利亚Prospa产品设计负责人AndrewMcKay创作2.1.4

iOS图标规范2.系统图标澳大利亚Prospa产品设计负责人Andre•系统图标的设计：在导航栏和工具栏上的图标一般是44px(22pt@2x),在标签栏上的图标一般是50px（25pt@2x）。苹果官方提供了四种不同形状的标签栏图标尺寸供UI设计师参考。其意义是让不同外形的图标在同一个标签栏时，保证视觉平衡。

标签栏图标尺寸2.1.4

iOS图标规范•系统图标的设计：在导航栏和工具栏上的图标一般是44px(2•系统图标的适配：自定义图标会以不同的分辨率出现在导航栏、工具栏以及标签栏场景中，尺寸也应根据不同设备的分辨率进行适配。

iOS系统中不同设备系统图标的尺寸2.1.4

iOS图标规范•系统图标的适配：自定义图标会以不同的分辨率出现在导航栏、工1.系统字体：iOS英文使用的是SanFrancisco(SF)字体，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SFUIText适用与小于19pt的文字，SFUIDisplay适用于大于20pt的文字。中文使用的是苹方，共有6个字重。2.1.5

iOS文字规范

iOS系统字体1.系统字体：2.1.5iOS文字规范iOS系统字体2.字号大小：iOS设计时要注意字号的大小。一般为了区分标题和正文，字体大小差异至少保持在4px(2pt@2x),正文的合适行间距在1.5～2倍之间。

iOS系统APP的字体建议2.1.5

iOS文字规范2.字号大小：iOS系统APP的字体建议2.1.5Android系统基础规范可以通过设计尺寸、界面结构、基本布局、字体规范及图标规范5个方面进行详尽的剖析。2.2

Android系统设计规范Android系统基础规范可以通过设计尺寸、界面结构、基本布1.相关单位•DPI:网点密度，英文全称“DotPerinch”，简称“DPI”，是打印分辨率单位,表示每英寸打印的点。在移动设备上等同于PPI，表示的是每英寸所拥有的像素数量。通常PPI代表苹果手机，DPI代表安卓手机。2.2.1

Android设计尺寸及单位

DPI等同于PPI1.相关单位2.2.1Android设计尺寸及单位D•独立密度像素与独立缩放像素：独立密度像素,英文全称“Density-independentpixels”，简称“dp”，是安卓设备上的基本单位，等同于苹果设备上的pt。Android开发工程师使用的单位是dp,所以UI设计师进行标注时应将px转化成dp,公式为dp*ppi/160=px。当设备的DPI值是320，通过公式可得出1dp=2px，如图2-23（类似iPhone6/7/8的高清屏）。

dp与px的转换2.2.1

Android设计尺寸及单位•独立密度像素与独立缩放像素：dp与px的转换2.2.1独立缩放像素，英文全称“Scale-independentPixel”，简称“sp”，是Android设备上的字体单位。Android平台允许用户自定义文字大小（小、正常、大、超大等等），当文字尺寸是“正常”状态时，1sp=1dp，如图2-XX。而当文字尺寸是“大”或“超大”时，1sp>1dp。UI设计师进行Android界面的设计时，标记字体的单位选用sp。

sp等同于dp2.2.1

Android设计尺寸及单位独立缩放像素，英文全称“Scale-independent2.设计尺寸Android常见的设备尺寸。在进行界面设计稿时，如果要一想一稿适配iOS，那就使用Photoshop新建720x1280px尺寸的画布。如果根据MaterialDesign新规范单独设计Android，那就使用Photoshop新建1080x1920px尺寸的画布。无论哪种需求，使用Sketch只建立360x640dp即可。

Android常见的设备尺寸(上)

Android设计标准尺寸（下）2.2.1

Android设计尺寸及单位2.设计尺寸Android常见的设备尺寸(上)AndiOS界面主要由状态栏、导航栏、顶部应用栏组成。2.2.2

Android界面结构

Android界面结构iOS界面主要由状态栏、导航栏、顶部应用栏组成。2.2.2在iOS中已经剖析了网格系统及其组成元素，因此在Android布局中不再赘述，直接进行Android中网格的布局。•单元格：Android的最小点击区域是48dp，因此能被整除的偶数4和8作为Android最小单元格比较合适。2.2.3

Android基本布局

移动设备的8dp网格所有组件都与移动设备的8dp网格对齐在iOS中已经剖析了网格系统及其组成元素，因此在Androi图标、排版和组件中的某些元素可以与4dp网格对齐。•列：列的数量在手机设备上推荐4列，-平板电脑上推荐8列。

列的数量，手机设备（左）平板电脑（右）与4dp网格对齐2.2.3

Android基本布局图标、排版和组件中的某些元素可以与4dp网格对齐。列的水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推荐24dp。

手机设备、平板电脑水槽和边距的宽度2.2.3

Android基本布局水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推边距：边距的宽度可以和水槽统一，也可以根据产品和水槽不同。当Android中边距的宽度和水槽不同时，其宽度的设置具体可以参考iOS布局中边距的宽度。

边距的宽度2.2.3

Android基本布局边距：边距的宽度可以和水槽统一，也可以根据产品和水槽不同。当在Android中，图标规范可以根据MaterialDesign设计语言，从应用图标和系统图标两个方面进行详尽的剖析。1.应用图标•应用图标的概念：应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上。2.2.4

Android图标规范

Android系统中各类应用图标在Android中，图标规范可以根据MaterialDes•应用图标的设计：创建应用图标时，应以320dpi分辨率中的48dp尺寸为基准。MaterialDesign提供了四种不同形状的应用图标尺寸供UI设计师参考，以保持一致的视觉平衡。

不同形状的应用图标尺寸2.2.4

Android图标规范•应用图标的设计：创建应用图标时，应以320dpi分辨率中的•应用图标的适配：应用图标的尺寸应根据不同设备的分辨率进行适配。当应用图标应用于GooglePlay中，其尺寸是512x512px。

Android系统中不同设备应用图标的尺寸2.2.4

Android图标规范•应用图