Photoshop移动UI设计教程案列移动UI设计规范VIP专享VIP免费

第2章移动UI设计规范本章介绍：设计规范在移动UI设计的工作中有着保证视觉统一性、提升项目工作效率、提升设计细节等诸多好处。本章对iOS系统以及Android系统的基础设计规范进行讲解。通过本章的学习，读者可以对移动UI设计的基础规范有一个基本的认识，有助于高效便利地进行移动UI设计工作。掌握iOS系统设计规范掌握Android系统设计规范学习目标iOS设计尺寸及单位iOS界面结构iOS基本布局iOS图标规范iOS文字规范2.1iOS系统设计规范iOS系统基础规范可以通过设计尺寸、界面结构、基本布局、图标规范及字体规范5个方面进行详尽的剖析。2.1iOS系统设计规范1.相关单位•PPI:像素密度，英文全称“PixelsPerinch”，简称“PPI”，是屏幕分辨率单位，表示的是每英寸所拥有的像素数量，如图2-1所示。屏幕密度越大，画面越细腻。因此，iPhone4比iPhone3GS屏幕尺寸虽然相同，但实际像素大了一倍，清晰度自然变高。2.1.1iOS设计尺寸及单位PPI的计算公式（X、Y分别为横向、纵向的像素数）•Asset:比例因子，英文全称“Asset”。标准分辨率显示器具有1：1像素密度（或@1x），其中一个像素等于一个点。高分辨率显示器具有更高的像素密度，比例因子为2.0或3.0（称为@2x和@3x）。因此，高分辨率显示器需要具有更多像素的图像。一个10px×10px的标准分辨率（@1x）图像，该图像的@2x版本为20px×20px，@3x版本为30px×30px2.1.1iOS设计尺寸及单位•逻辑像素和物理像素：逻辑像素，英文全称“LogicPoint”，单位“点”，即“pt”，是根据内容尺寸计算的单位。如iPhone4逻辑像素是480x320pt，但由于每个逻辑的点因为视网膜屏密度增加了1倍，所以一个点等于两个像素，因此iPhone4的物理像素是960x640px。iOS开发工程师和使用Sketch软件设计界面的UI设计师使用的单位都是pt。逻辑像素与物理像素的转换2.1.1iOS设计尺寸及单位2.设计尺寸iOS常见的设备尺寸。在进行界面设计稿时，为了一稿适配，都是以iPhone6/6s/7/8为基准。使用Photoshop就建750x1334px尺寸的画布，如果是使用Sketch就建立375x667pt。iOS常见设备的尺寸iOS设计标准尺寸2.1.1iOS设计尺寸及单位iOS界面主要由状态栏、导航栏、标签栏组成。2.1.2iOS界面结构iOS手机端界面结构图iOS界面主要由状态栏、导航栏、标签栏组成。iOS手机端界面结构图2.1.2iOS界面结构iOS界面主要由状态栏、导航栏、标签栏组成。iOSiPad界面结构图2.1.2iOS界面结构1.网格系统网格系统（GridSystems），又称为栅格系统，是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面布局设计的方式，能使布局规范、简洁、有秩序。2.1.3iOS基本布局网格系统2.组成元素网格系统由列、水槽以及边距3个元素组成。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。组成元素（①列、②水槽、③边距）2.1.3iOS基本布局3.网格运用•单元格：iOS的最小点击区域是44pt，即88px（@2x）。因此，在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。其中4px容易将页面切割细碎，所以比较推荐使用8px。单元格2.1.3iOS基本布局•列：列的数量有4、6、8、10、12、24这几种情况。其中4列通常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况，然而24列将页面切割太碎，因此实际使用还是以12列和6列为主。列的使用2.1.3iOS基本布局•水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如24、32、40。其中32px（16pt@2x）最为常用。水槽2.1.3iOS基本布局•边距：边距的宽度也可以与水槽有所区别。在iOS中以@2x为基准,常见的边距有20px、24px、30px、32px、40px以及50px。边距的选择应结合产品本身的气质，其中30px是最为舒适的边距，也是绝大多数APP首选的边距。iOS中的设置及通用页面都采用了30px的边距2.1.4iOS图标规范在iOS中，图标规范可以从应用图标和系统图标两个方面进行详尽的剖析。1.应用图标•应用图标的概念：应用图标是应用程序的图标。应用图标主要应用于主屏幕、APPStore、Spotlight以及设置中。iOS系统中各类应用图标2....