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

文档介绍：第2章 移动UI设计规范
本章介绍：
设计规范在移动UI设计的工作中有着保证视觉统一性、提升项目工作效率、提升设计细节等诸多好处。本章对iOS系统以及Android系统的基础设计规范进行讲解。通过本章的学****读者可以对移动UI设计的基础边距，也是绝大多数APP首选的边距。
iOS中的设置及通用页面都采用了30px的边距
iOS图标规范
在iOS中，图标规范可以从应用图标和系统图标两个方面进行详尽的剖析。

•应用图标的概念：应用图标是应用程序的图标。应用图标主要应用于主屏幕、APPStore、Spotlight以及设置中。
iOS系统中各类应用图标
iOS图标规范
•应用图标的设计：应用图标在设计时尺寸可以采用1024px，并根据iOS官方模版进行规范。正确的图标设计稿应是直角矩形不带圆角，iOS会自动应用一个圆角折罩将图标的4个角遮住。
iOS官方模版
iOS图标规范
•应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、App Store、Spotlight以及设置场景中，尺寸也应根据不同设备的分辨率进行适配。
iOS系统中不同设备应用图标的尺寸
iOS图标规范

•系统图标的概念：系统图标即界面中的功能图标，系统图标主要应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标，UI设计师可以设计自定义图标。
澳大利亚Prospa产品设计负责人AndrewMcKay创作
iOS图标规范
•系统图标的设计：在导航栏和工具栏上的图标一般是44px(******@2x),在标签栏上的图标一般是50px（******@2x）。苹果官方提供了四种不同形状的标签栏图标尺寸供UI设计师参考。其意义是让不同外形的图标在同一个标签栏时，保证视觉平衡。
标签栏图标尺寸
iOS图标规范
•系统图标的适配：自定义图标会以不同的分辨率出现在导航栏、工具栏以及标签栏场景中，尺寸也应根据不同设备的分辨率进行适配。
iOS系统中不同设备系统图标的尺寸
iOS图标规范
：
iOS英文使用的是San Francisco (SF)字体，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字。中文使用的是苹方，共有6个字重。
iOS文字规范
iOS系统字体
：
iOS设计时要注意字号的大小。一般为了区分标题和正文，字体大小差异至少保持在4px(******@2x),～2倍之间。
iOS系统APP的字体建议
iOS文字规范
Android系统基础规范可以通过设计尺寸、界面结构、基本布局、字体规范及图标规范5个方面进行详尽的剖析。
Android系统设计规范

•DPI:网点密度，英文全称“Dot Per inch”，简称“DPI”，是打印分辨率单位,表示每英寸打印的点。在移动设备上等同于PPI，表示的是每英寸所拥有的像素数量。通常PPI代表苹果手机，DPI代表安卓手机。
Android设计尺寸及单位
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的转换
Android设计尺寸及单位
独立缩放像素，英文全称“Scale-independent Pixel”，简称“sp”，是Android设备上的字体单位。Android平台允许用户自定义文字大小（小、正常、大、超大等等），当文字尺寸是“正常”状态时，1sp=1dp，如图2-XX。而当文字尺寸是“大”或“超大”时，1sp>1dp。UI设计师进行Android界面的设计时，标记字体的单位选用sp。
sp等同于dp
Android设计尺寸及单位

Android常见的设备尺寸。在进行界面设计稿时，如果要一