《PHOTOSHOP CC 移动UI设计》2

2.1.3 iOS基本布局
1.网格系统 网格系统（Grid Systems），又称为栅格系统，是利用一系列垂 直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这 些格子为基准，进行页面布局设计的方式，能使布局规范、简洁、有 秩序。
网格系统
2.1.3 iOS基本布局
2.组成元素 网格系统由列、水槽以及边距3个元素组成。列是内容放置的区 域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕 左右边缘之间的距离。
学习目标
掌握iOS系统设计规范 掌握Android系统设计规范
2.1 iOS系统设计规范
iOS设计尺寸及单位 iOS界面结构 iOS基本布局 iOS图标规范 iOS文字规范
2.1 iOS系统设计规范
iOS系统基础规范可以通过设计尺寸、界面结构、基本布局、图 标规范及字体规范5个方面进行详尽的剖析。
组成元素（①列、②水槽、③边距）
2.1.3 iOS基本布局
3.网格运用 •单元格：iOS的最小点击区域是44pt，即88px（@2x）。因此， 在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。 其中4px容易将页面切割细碎，所以比较推荐使用8px。
单元格
2.1.3 iOS基本布局
• 应 用 图 标 的 设 计 ： 创 建 应 用 图 标 时 ， 应 以 320dpi 分 辨 率 中 的 48dp尺寸为基准。MaterialDesign提供了四种不同形状的应用图标 尺寸供UI设计师参考，以保持一致的视觉平衡。
不同形状的应用图标尺寸
2.2.4 Android图标规范
•应用图标的适配：应用图标的尺寸应根据不同设备的分辨率进行 适配。当应用图标应用于Google Play中，其尺寸是512x512px。
边距的宽度
2.2.4 Android图标规范
在Android中，图标规范可以根据Material Design设计语言，从 应用图标和系统图标两个方面进行详尽的剖析。
1.应用图标 •应用图标的概念：应用图标即产品图标，是品牌和产品的视觉表 达，主要出现在主屏幕上。
Android系统中各类应用图标
2.2.4 Android图标规范
2.2.1 Android设计尺寸及单位
1.相关单位 •DPI:网点密度，英文全称“Dot Per inch”，简称“DPI”，是 打印分辨率单位,表示每英寸打印的点。在移动设备上等同于PPI，表 示的是每英寸所拥有的像素数量。通常PPI代表苹果手机，DPI代表安 卓手机。
DPI等同于PPI
2.2.1 Android设计尺寸及单位
PPI的计算公式（X、Y分别为横向、纵向的像素数）
2.1.1 iOS设计尺寸及单位
•Asset:比例因子，英文全称“Asset”。标准分辨率显示器具有1： 1像素密度（或@1x），其中一个像素等于一个点。高分辨率显示器 具有更高的像素密度，比例因子为2.0或3.0（称为@2x和@3x）。因 此，高分辨率显示器需要具有更多像素的图像。
iOS设计标准尺寸
2.1.2 iOS界面结构
iOS界面主要由状态栏、导航栏、标签栏组成。
iOS手机端界面结构图
2.1.2 iOS界面结构
iOS界面主要由状态栏、导航栏、标签栏组成。
iOS手机端界面结构图
2.1.2 iOS界面结构
iOS界面主要由状态栏、导航栏、标签栏组成。
iOS iPad界面结构图
一个10px×10px的标准分辨率（@1x）图像，该图像的@ 2x版本为 20px×20px，@ 3x版本为30px×30px
2.1.1 iOS设计尺寸及单位
•逻辑像素和物理像素： 逻辑像素，英文全称“Logic Point”，单位 “点”，即“pt”， 是根据内容尺寸计算的单位。如iPhone4逻辑像素是480x320pt，但 由于每个逻辑的点因为视网膜屏密度增加了1倍，所以一个点等于两个 像素，因此iPhone 4的物理像素是960x640px。iOS开发工程师和使 用Sketch软件设计界面的UI设计师使用的单位都是pt。
Android系统中不同设备应用图标的尺寸
2.2.4 Android图标规范
2.系统图标 •系统图标的概念：系统图标即界面中的功能图标，通过简洁现代 的图形表达一些常见功能。MaterialDesign提供了一套完整的系统图 标，同时设计师也可以根据产品的调性进行自定义设计。
MaterialDesign官网提供的完整系统图标
•独立密度像素与独立缩放像素： 独立密度像素,英文全称“Density-independent pixels”，简称 “ dp” ， 是 安 卓 设 备 上 的 基 本 单 位 ， 等 同 于 苹 果 设 备 上 的 pt 。 Android开发工程师使用的单位是dp,所以UI设计师进行标注时应将px 转化成dp,公式为dp*ppi/160 = px。当设备的DPI值是320，通过公 式可得出1dp=2px，如图2-23（类似iPhone6/7/8的高清屏）。
逻辑像素与物理像素的转换
2.1.1 iOS设计尺寸及单位
2.设计尺寸 iOS常见的设备尺寸。在进行界面设计稿时，为了一稿适配，都 是以iPhone6/6s/7/8为基准。使用Photoshop就建750x1334px尺寸 的画布，如果是使用Sketch就建立375x667pt。
iOS常见设备的尺寸
第2章 移动UI设计规范
本章介绍：
设计规范在移动UI设计的工作中有着 保证视觉统一性、提升项目工作效率、提升 设计细节等诸多好处。本章对iOS系统以及 Android系统的基础设计规范进行讲解。通 过本章的学习，读者可以对移动UI设计的基 础规范有一个基本的认识，有助于高效便利 地进行移动UI设计工作。
dp与px的转换
2.2.1 Android设计尺寸及单位
独立缩放像素，英文全称“Scale-independent Pixel”，简称 “sp”，是Android设备上的字体单位。Android平台允许用户自定 义文字大小（小、正常、大、超大等等），当文字尺寸是“正常”状 态时，1sp=1dp，如图2-XX。而当文字尺寸是“大”或“超大”时， 1sp>1dp。UI设计师进行Android界面的设计时，标记字体的单位选 用sp。
标签栏图标尺寸
2.1.4 iOS图标规范
•系统图标的适配：自定义图标会以不同的分辨率出现在导航栏、 工具栏以及标签栏场景中，尺寸也应根据不同设备的分辨率进行适配。
iOS系统中不同设备系统图标的尺寸
2.1.5 iOS文字规范
1.系统字体： iOS 英 文 使 用 的 是 San Francisco (SF) 字 体 ， 其 中 SF 字 体 有 SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字。 中文使用的是苹方，共有6个字重。
•列：列的数量有4、6、8、10、12、24这几种情况。其中4列通 常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况，然 而24列将页面切割太碎，因此实际使用还是以12列和6列为主。
列的使用
2.1.3 iOS基本布局
•水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px 为增量进行统一设置，如24、32、40。其中32px（16pt@2x）最为 常用。
iOS系统字体
2.1.5 iOS文字规范
2.字号大小： iOS设计时要注意字号的大小。一般为了区分标题和正文，字体 大小差异至少保持在4px(2pt@2x),正文的合适行间距在1.5～2倍之间。
iOS系统APP的字体建议
2.2 Android系统设计规范
Android系统基础规范可以通过设计尺寸、界面结构、基本 布局、字体规范及图标规范5个方面进行详尽的剖析。
2.1.1 iOS设计尺寸及单位
1.相关单位 •PPI:像素密度，英文全称“Pixels Per inch”，简称“PPI”，是 屏幕分辨率单位，表示的是每英寸所拥有的像素数量，如图2-1所示。 屏幕密度越大，画面越细腻。因此，iPhone4比iPhone3GS屏幕尺寸 虽然相同，但实际像素大了一倍，清晰度自然变高。
sp等同于dp
2.2.1 Android设计尺寸及单位
2.设计尺寸 Android常见的设备尺寸。在进行界面设计稿时，如果要一 想一稿适配iOS，那就使用Photoshop新建720x1280px尺寸的 画布。如果根据MaterialDesign新规范单独设计Android，那就使用 Photoshop 新 建 1080x1920px 尺 寸 的 画 布 。 无 论 哪 种 需 求 ， 使 用 Sketch只建立360x640dp即可。
Android常见的设备尺寸(上) Android设计标准尺寸（下）
2.2.2 Android界面结构
iOS界面主要由状态栏、导航栏、顶部应用栏组成。
Android界面结构
2.2.3 Android基本布局
在iOS中已经剖析了网格系统及其组成元素，因此在Android布 局中不再赘述，直接进行Android中网格的布局。
澳大利亚Prospa产品设计负责人AndrewMcKay创作
2.1.4 iOS图标规范
•系统图标的设计：在导航栏和工具栏上的图标一般是 44px(22pt@2x),在标签栏上的图标一般是50px（25pt@2x）。苹果 官方提供了四种不同形状的标签栏图标尺寸供UI设计师参考。其意义 是让不同外形的图标在同一个标签栏时，保证视觉平衡。
水槽
2.1.4 iOS图标规范
•边距：边距的宽度也可以与水槽有所区别。在iOS中以@2x为基 准,常见的边距有20px、24px、30px、32px、40px以及50px。边距 的选择应结合产品本身的气质，其中30px是最为舒适的边距，也是绝 大多数APP首选的边距。
iOS中的设置及通用页面都采用了30px的边距
2.2.4 Android图标规范
•系统图标的设计：创建系统图标时，以320dpi分辨率中的24dp 尺寸为基准。图标应该留出一定的边距，保证不同面积的图标有协调 一致的视觉效果。
系统图标的设计
2.2.4 Android图标规范
iOS官方模版
2.1.4 iOS图标规范
•应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、 App Store、Spotlight以及设置场景中，尺寸也应根据不同设备的分 辨率进行适配。
iOS系统中不同设备应用图标的尺寸
2.1.4 iOS图标规范
2.系统图标 •系统图标的概念：系统图标即界面中的功能图标，系统图标主要 应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标， UI设计师可以设计自定义图标。
列的数量，手机设备（左） 平板电脑（右）
2.2.3 Android基本布局
水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推 荐24dp。
手机设备、平板电脑水槽和边距的宽度
2.2.3 Android基本布局
边距：边距的宽度可以和水槽统一，也可以根据产品和水槽不同。 当Android中边距的宽度和水槽不同时，其宽度的设置具体可以参考 iOS布局中边距的宽度。
2.1.4 iOS图标规范
在iOS中，图标规范可以从应用图标和系统图标两个方面进行详 尽的剖析。
1.应用图标 •应用图标的概念：应用图标是应用程序的图标。应用图标主要应 用于主屏幕、APPStore、Spotlight以及设置中。
iOS系统中各类应用图标
2.1.4 Baidu NhomakorabeaOS图标规范
•应用图标的设计：应用图标在设计时尺寸可以采用1024px，并 根据iOS官方模版进行规范。正确的图标设计稿应是直角矩形不带圆 角，iOS会自动应用一个圆角折罩将图标的4个角遮住。
•单元格：Android的最小点击区域是48dp，因此能被整除的偶 数4和8作为Android最小单元格比较合适。
所有组件都与移动设备的8dp网格对齐
移动设备的8dp网格
2.2.3 Android基本布局
图标、排版和组件中的某些元素可以与4dp网格对齐。
与4dp网格对齐
•列：列的数量在手机设备上推荐4列，-平板电脑上推荐8列。