《Photoshop 移动UI设计案例教程（全彩慕课版）（第2版）》课件 第2章 移动UI设计规范

本章介绍：设计规范在移动UI设计的工作中有着保证视觉统一性、提升项目工作效率、提升设计细节等诸多好处。本章对iOS系统以及Android系统的基础设计规范进行讲解。通过本章的学习，读者可以对移动UI设计的基础规范有一个基本的认识，有助于高效便利地进行移动UI设计工作。第二章移动UI设计规范了解移动UI设计的设计单位掌握移动UI设计的基本布局掌握移动UI设计的文字规范掌握移动UI设计的图标规范掌握移动UI的设计尺寸熟练搭建移动UI的网格系统熟练设置动移UI的字号掌握适配移动UI的不同设备学习目标2.1iOS系统设计规范iOS设计单位及尺寸iOS界面结构iOS基本布局iOS字体规范iOS图标规范1.相关单位•PPI：像素密度（PixelsPerInch，PPI）。•Asset：比例因子。•物理像素、渲染像素和逻辑像素2.1.1iOS设计单位及尺寸2.设计尺寸iOS常见的设备尺寸如图。在进行界面设计时，为了适配大部分尺寸，推荐以iPhone14Pro/15/15Pro为基准。如果使用Photoshop就创建786px×1704px尺寸的画布，如果使用Sketch就建立393pt×852pt尺寸的画布。在iOS系统中，界面通常由状态栏、导航栏、安全设计区以及标签栏组成。自全面屏上市，界面较之前还多了虚拟主页键。2.1.2iOS界面结构1.网格系统网格系统，英文名称“GridSystems”，又称为“栅格系统”。在APP中，是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面的布局设计，使布局规范简洁有秩序。2.1.3iOS基本布局2.组成元素网格系统由①列、②水槽以及③边距三个元素组成。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。3.网格运用•单元格：iOS的最小点击区域是44pt，即88px（@2x）。因此，在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。其中4px容易将页面切割细碎，所以比较推荐使用8px。•列：列的数量有4、6、8、10、12、24这几种情况。其中4列通常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况，然而24列将页面切割太碎，因此实际使用还是以12列和6列为主。•水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如24、32、40。其中32px（16pt@2x）最为常用。•边距：边距的宽度也可以与水槽有所区别。在iOS中以@2x为基准,常见的边距有20px、24px、30px、32px、40px以及50px。边距的选择应结合产品本身的气质，其中30px是最为舒适的边距，也是绝大多数APP首选的边距。iOS中的设置及通用页面都采用了30px的边距。1.系统字体旧金山字体：旧金山字体是非衬线字体，如图2-13所示，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SFUIText（文本模式）适用与小于19pt的文字，SFUIDisplay（展示模式）适用于大于20pt的文字。2.1.4iOS字体规范纽约字体：纽约字体是衬线字体，旨在补充旧金山字体。对于小于20pt的文本使用小号，对于20到35pt之间的文本使用中号，对于36到53pt之间的文本使用大号，对于54pt或更大的文本使用特大号。苹方：在iOS系统中，中文使用的是苹方字体，该字体共有6个字重。2.字号大小iOS设计时要注意字号的大小。苹果官网的建议全部是针对英文SF字体而言的，中文字体需要UI设计师灵活运用，以最终呈现效果的实用性和美观度为基准进行调整。在iOS中，图标规范可以从应用图标和系统图标两个方面进行详尽的剖析。2.1.5iOS图标规范2.2Android系统设计规范Android设计单位及尺寸Android界面结构Android基本布局Android字体规范Android图标规范1.相关单位•DPI：网点密度（DotPerinch，DPI）•独立密度像素与独立缩放像素2.2.1Android设计单位及尺寸2.设计尺寸Android常见的设备尺寸可以分成大小两类。Android和iOS一样，只是叫法不同。在Android中，界面通常由状态栏、顶部应用栏、安全设计区、底部应用栏以及虚拟导航栏组成。2.2.2Android界面结构在iOS中已经剖析了网格系统及其组成元素，因此在Android布局中不再赘述，直接进行Android中网格的布局。•单元格：Android的最小点击区域是48dp，因此能被整除的偶数4和8作为Android最小单元格比较合适。2.2.3Android基本布局•列：列的数量在手机设备上推荐4列，平板电脑上推荐8列。右侧为平板电脑列的数量。•水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推荐24dp。•边距：边距的宽度可以和水槽统一，也可以根据产品和水槽不同。当Android中边距的宽度和水槽不同时，其宽度的设置具体可以参考iOS布局中边距的宽度。1.系统字体Android英文使用的是Roboto字体，共有6个字重。中文使用的是思源黑体，又称为“SourceHanSans”或“Noto”，共有7个字重。2.2.4Android字体规范2.字号大小Android设计时要注意字号的大小。Android各元素以720x1280px为基准设计，可以与iOS对应，其常见的字号大小：2