Photoshop移动UI设计教程案列-移动UI设计规范.ppt

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

2、单位PPI:像素密度，英文全称“Pixels Per inch”，简称“PPI”，是屏幕分辨率单位，表示的是每英寸所拥有的像素数量，如图2-1所示。屏幕密度越大，画面越细腻。因此，iPhone4比iPhone3GS屏幕尺寸虽然相同，但实际像素大了一倍，清晰度自然变高。2.1.1 iOS设计尺寸及单位PPI的计算公式（X、Y分别为横向、纵向的像素数）Asset:比例因子，英文全称“Asset”。标准分辨率显示器具有1：1像素密度（或1x），其中一个像素等于一个点。高分辨率显示器具有更高的像素密度，比例因子为2.0或3.0（称为2x和3x）。因此，高分辨率显示器需要具有更多像素的图像。一个10px

3、10px的标准分辨率（1x）图像，该图像的 2x版本为20px20px，3x版本为30px30px2.1.1 iOS设计尺寸及单位逻辑像素和物理像素：逻辑像素，英文全称“Logic Point”，单位“点”，即“pt”，是根据内容尺寸计算的单位。如iPhone4逻辑像素是480 x320pt，但由于每个逻辑的点因为视网膜屏密度增加了1倍，所以一个点等于两个像素，因此iPhone 4的物理像素是960 x640px。iOS开发工程师和使用Sketch软件设计界面的UI设计师使用的单位都是pt。逻辑像素与物理像素的转换2.1.1 iOS设计尺寸及单位2.设计尺寸iOS常见的设备尺寸。在进行界面设计

4、稿时，为了一稿适配，都是以iPhone6/6s/7/8为基准。使用Photoshop就建750 x1334px尺寸的画布，如果是使用Sketch就建立375x667pt。iOS常见设备的尺寸 iOS设计标准尺寸2.1.1 iOS设计尺寸及单位iOS界面主要由状态栏、导航栏、标签栏组成。2.1.2 iOS界面结构iOS手机端界面结构图iOS界面主要由状态栏、导航栏、标签栏组成。iOS手机端界面结构图2.1.2 iOS界面结构iOS界面主要由状态栏、导航栏、标签栏组成。iOS iPad界面结构图2.1.2 iOS界面结构1.网格系统网格系统（Grid Systems），又称为栅格系统，是利用一系列

5、垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面布局设计的方式，能使布局规范、简洁、有秩序。2.1.3 iOS基本布局网格系统2.组成元素网格系统由列、水槽以及边距3个元素组成。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。组成元素（列、水槽、边距）2.1.3 iOS基本布局3.网格运用单元格：iOS的最小点击区域是44pt，即88px（2x）。因此，在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。其中4px容易将页面切割细碎，所以比较推荐使用8px。单元格2.1.3 iOS基本布局列：列的数

6、量有4、6、8、10、12、24这几种情况。其中4列通常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况，然而24列将页面切割太碎，因此实际使用还是以12列和6列为主。列的使用2.1.3 iOS基本布局水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如24、32、40。其中32px（16pt2x）最为常用。水槽2.1.3 iOS基本布局边距：边距的宽度也可以与水槽有所区别。在iOS中以2x为基准,常见的边距有20px、24px、30px、32px、40px以及50px。边距的选择应结合产品本身的气质，其中30px是最为舒适的边距，也是绝大多数APP首选

7、的边距。iOS中的设置及通用页面都采用了30px的边距2.1.4 iOS图标规范在iOS中，图标规范可以从应用图标和系统图标两个方面进行详尽的剖析。1.应用图标应用图标的概念：应用图标是应用程序的图标。应用图标主要应用于主屏幕、APPStore、Spotlight以及设置中。iOS系统中各类应用图标2.1.4 iOS图标规范应用图标的设计：应用图标在设计时尺寸可以采用1024px，并根据iOS官方模版进行规范。正确的图标设计稿应是直角矩形不带圆角，iOS会自动应用一个圆角折罩将图标的4个角遮住。iOS官方模版2.1.4 iOS图标规范应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、App

8、 Store、Spotlight以及设置场景中，尺寸也应根据不同设备的分辨率进行适配。iOS系统中不同设备应用图标的尺寸2.1.4 iOS图标规范2.系统图标系统图标的概念：系统图标即界面中的功能图标，系统图标主要应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标，UI设计师可以设计自定义图标。澳大利亚Prospa产品设计负责人AndrewMcKay创作2.1.4 iOS图标规范 系 统 图 标 的 设 计：在 导 航 栏 和 工 具 栏 上 的 图 标 一 般 是44px(22pt2x),在标签栏上的图标一般是50px（25pt2x）。苹果官方提供了四种不同形状的标签栏图标尺寸供UI

9、设计师参考。其意义是让不同外形的图标在同一个标签栏时，保证视觉平衡。标签栏图标尺寸2.1.4 iOS图标规范系统图标的适配：自定义图标会以不同的分辨率出现在导航栏、工具栏以及标签栏场景中，尺寸也应根据不同设备的分辨率进行适配。iOS系统中不同设备系统图标的尺寸2.1.4 iOS图标规范1.系统字体：iOS英文使用的是San Francisco(SF)字体，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字。中文使用的是苹方，共有6个字重。2.1.5 iOS文字规

10、范 iOS系统字体2.字号大小：iOS设计时要注意字号的大小。一般为了区分标题和正文，字体大小差异至少保持在4px(2pt2x),正文的合适行间距在1.52倍之间。iOS系统APP的字体建议2.1.5 iOS文字规范Android系统基础规范可以通过设计尺寸、界面结构、基本布局、字体规范及图标规范5个方面进行详尽的剖析。2.2 Android系统设计规范1.相关单位DPI:网点密度，英文全称“Dot Per inch”，简称“DPI”，是打印分辨率单位,表示每英寸打印的点。在移动设备上等同于PPI，表示的是每英寸所拥有的像素数量。通常PPI代表苹果手机，DPI代表安卓手机。2.2.1 Andr

11、oid设计尺寸及单位 DPI等同于PPI独立密度像素与独立缩放像素：独立密度像素,英文全称“Density-independent pixels”，简称“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设计尺寸及单位独立缩放像素，英文全称“Scale-independent Pixel”，简称“sp”，是Android设

12、备上的字体单位。Android平台允许用户自定义文字大小（小、正常、大、超大等等），当文字尺寸是“正常”状态时，1sp=1dp，如图2-XX。而当文字尺寸是“大”或“超大”时，1sp1dp。UI设计师进行Android界面的设计时，标记字体的单位选用sp。sp等同于dp2.2.1 Android设计尺寸及单位2.设计尺寸Android常见的设备尺寸。在进行界面设计稿时，如果要一想一稿适配iOS，那就使用Photoshop新建720 x1280px尺寸的画布。如果根据MaterialDesign新规范单独设计Android，那就使用Photoshop新建1080 x1920px尺寸的画布。无论哪

13、种需求，使用Sketch只建立360 x640dp即可。Android常见的设备尺寸(上)Android设计标准尺寸（下）2.2.1 Android设计尺寸及单位iOS界面主要由状态栏、导航栏、顶部应用栏组成。2.2.2 Android界面结构 Android界面结构在iOS中已经剖析了网格系统及其组成元素，因此在Android布局中不再赘述，直接进行Android中网格的布局。单元格：Android的最小点击区域是48dp，因此能被整除的偶数4和8作为Android最小单元格比较合适。2.2.3 Android基本布局 移动设备的8dp网格所有组件都与移动设备的8dp网格对齐图标、排版和组件

14、中的某些元素可以与4dp网格对齐。列：列的数量在手机设备上推荐4列，-平板电脑上推荐8列。列的数量，手机设备（左）平板电脑（右）与4dp网格对齐2.2.3 Android基本布局水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推荐24dp。手机设备、平板电脑水槽和边距的宽度2.2.3 Android基本布局边距：边距的宽度可以和水槽统一，也可以根据产品和水槽不同。当Android中边距的宽度和水槽不同时，其宽度的设置具体可以参考iOS布局中边距的宽度。边距的宽度2.2.3 Android基本布局在Android中，图标规范可以根据Material Design设计语言，从应用图标和系

15、统图标两个方面进行详尽的剖析。1.应用图标应用图标的概念：应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上。2.2.4 Android图标规范 Android系统中各类应用图标应用图标的设计：创建应用图标时，应以320dpi分辨率中的48dp尺寸为基准。MaterialDesign提供了四种不同形状的应用图标尺寸供UI设计师参考，以保持一致的视觉平衡。不同形状的应用图标尺寸2.2.4 Android图标规范应用图标的适配：应用图标的尺寸应根据不同设备的分辨率进行适配。当应用图标应用于Google Play中，其尺寸是512x512px。Android系统中不同设备应用图标的尺寸2

16、.2.4 Android图标规范2.系统图标系统图标的概念：系统图标即界面中的功能图标，通过简洁现代的图形表达一些常见功能。MaterialDesign提供了一套完整的系统图标，同时设计师也可以根据产品的调性进行自定义设计。MaterialDesign官网提供的完整系统图标2.2.4 Android图标规范系统图标的设计：创建系统图标时，以320dpi分辨率中的24dp尺寸为基准。图标应该留出一定的边距，保证不同面积的图标有协调一致的视觉效果。系统图标的设计2.2.4 Android图标规范MaterialDesign语言提供了4种不同的图标形状供UI设计师参考，以保持视觉平衡。Materia

17、lDesign官网提供的四类图标内部结构线2.2.4 Android图标规范设计时为保证图标清晰，需将软件中X和Y坐标设为整数，而不是小数，将图标“放在像素上”。正确示例（左）错误示例（右）2.2.4 Android图标规范系统图标由描边末端、圆角、反白区域、描边、内部角边界区域六部分组成。系统图标2.2.4 Android图标规范边角：边角半径默认为2dp。内角应该是方形而不要使用圆形，圆角建议使用2dp。边角半径为2dp的图标解析图2.2.4 Android图标规范描边：系统图标使用2dp的描边以保持图标的一致性。描边为2dp的图标解析图2.2.4 Android图标规范描边末端：描边末端

18、应该是直线并带有角度，留白区域的描边粗细也应该是2dp。描边如果是倾斜45度，那么末端应该也是倾斜45度为结束。描边末端为2dp的图标解析图2.2.4 Android图标规范视觉校正：如果系统图标需要设计复杂的细节，则可以进行细微的调整以提高其清晰度。系统图标的适配：系统图标的尺寸应根据不同设备的分辨率进行适配。系统图标的适配复杂图标的视觉校正解析图2.2.4 Android图标规范1.系统字体Android英文使用的是Roboto字体，共有6个字重。中文使用的是思源黑体，又称为“Source Han Sans”或“Noto”，共有7个字重。思源黑体2.2.5 Android字体规范2.字号大小Android 设计时要注意字号的大小。Android各元素以720 x1280px为基准设计，可以与iOS对应，其常见的字号大小：24px、26px、28px、30px、32px、34px，36px等，最小字号为20px。Android系统APP的字体建议2.2.5 Android字体规范