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字体规范