PhotoshopCC移动UI设计 2 移动UI设计规范
- 格式：ppt
- 大小：4.93 MB
- 文档页数：42
当前位置：文档之家 › PhotoshopCC移动UI设计 2 移动UI设计规范
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一个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。
iOS设计标准尺寸
2.1.2 iOS界面结构
iOS界面主要由状态栏、导航栏、标签栏组成。
iOS手机端界面结构图
2.1.2 iOS界面结构
iOS界面主要由状态栏、导航栏、标签栏组成。
iOS手机端界面结构图
2.1.2 iOS界面结构
iOS界面主要由状态栏、导航栏、标签栏组成。
iOS iPad界面结构图
学习目标
掌握iOS系统设计规范 掌握Android系统设计规范
2.1 iOS系统设计规范
iOS设计尺寸及单位 iOS界面结构 iOS基本布局 iOS图标规范 iOS文字规范
2.1 iOS系统设计规范
iOS系统基础规范可以通过设计尺寸、界面结构、基本布局、图 标规范及字体规范5个方面进行详尽的剖析。
PPI的计算公式（X、Y分别为横向、纵向的像素数）
2.1.1 iOS设计尺寸及单位
•Asset:比例因子，英文全称“Asset”。标准分辨率显示器具有1： 1像素密度（或@1x），其中一个像素等于一个点。高分辨率显示器 具有更高的像素密度，比例因子为2.0或3.0（称为@2x和@3x）。因 此，高分辨率显示器需要具有更多像素的图像。
2.1.3 iOS基本布局
1.网格系统 网格系统（Grid Systems），又称为栅格系统，是利用一系列垂 直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这 些格子为基准，进行页面布局设计的方式，能使布局规范、简洁、有 秩序。
网格系统
2.1.3 iOS基本布局
2.组成元素 网格系统由列、水槽以及边距3个元素组成。列是内容放置的区 域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕 左右边缘之间的距离。
逻辑像素与物理像素的转换
2.1.1 iOS设计尺寸及单位
2.设计尺寸 iOS常见的设备尺寸。在进行界面设计稿时，为了一稿适配，都 是以iPhone6/6s/7/8为基准。使用Photoshop就建750x1334px尺寸 的画布，如果是使用Sketch就建立375x667pt。
iOS常见设备的尺寸
2.1.1 iOS设计尺寸及单位
1.相关单位 •PPI:像素密度，英文全称“Pixels Per inch”，简称“PPI”，是 屏幕分辨率单位，表示的是每英寸所拥有的像素数量，如图2-1所示。 屏幕密度越大，画面越细腻。因此，iPhone4比iPhone3GS屏幕尺寸 虽然相同，但实际像素大了一倍，清晰度自然变高。
2.1.4 iOS图标规范
在iOS中，图标规范可以从应用图标和系统图标两个方面进行详 尽的剖析。
1.应用图标 •应用图标的概念：应用图标是应用程序的图标。应用图标主要应 用于主屏幕、APPStore、Spotlight以及设置中。
iOS系统中各类应用图标
2.1.4 iOS图标规范
•应用图标的设计：应用图标在设计时尺寸可以采用1024px，并 根据iOS官方模版进行规范。正确的图标设计稿应是直角矩形不带圆 角，iOS会自动应用一个圆角折罩将图标的4个角遮住。
第2章 移动UI设计规范
本章介绍：
设计规范在移动UI设计的工作中有着 保证视觉统一性、提升项目工作效率、提升 设计细节等诸多好处。本章对iOS系统以及 Android系统的基础设计规范进行讲解。通 过本章的学习，读者可以对移动UI设计的基 础规范有一个基本的认识，有助于高效便利 地进行移动UI设计工作。
iOS官方模版
2.1.4 iOS图标规范
•应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、 App Store、Spotlight以及设置场景中，尺寸也应根据不同设备的分 辨率进行适配。
iOS系统中不同设备应用ห้องสมุดไป่ตู้标的尺寸
2.1.4 iOS图标规范
2.系统图标 •系统图标的概念：系统图标即界面中的功能图标，系统图标主要 应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标， UI设计师可以设计自定义图标。
澳大利亚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.1.3 iOS基本布局
3.网格运用 •单元格：iOS的最小点击区域是44pt，即88px（@2x）。因此， 在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。 其中4px容易将页面切割细碎，所以比较推荐使用8px。
单元格
2.1.3 iOS基本布局
•列：列的数量有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）最为 常用。
2.1.1 iOS设计尺寸及单位
•逻辑像素和物理像素： 逻辑像素，英文全称“Logic Point”，单位 “点”，即“pt”， 是根据内容尺寸计算的单位。如iPhone4逻辑像素是480x320pt，但 由于每个逻辑的点因为视网膜屏密度增加了1倍，所以一个点等于两个 像素，因此iPhone 4的物理像素是960x640px。iOS开发工程师和使 用Sketch软件设计界面的UI设计师使用的单位都是pt。
iOS设计标准尺寸
2.1.2 iOS界面结构
iOS界面主要由状态栏、导航栏、标签栏组成。
iOS手机端界面结构图
2.1.2 iOS界面结构
iOS界面主要由状态栏、导航栏、标签栏组成。
iOS手机端界面结构图
2.1.2 iOS界面结构
iOS界面主要由状态栏、导航栏、标签栏组成。
iOS iPad界面结构图
学习目标
掌握iOS系统设计规范 掌握Android系统设计规范
2.1 iOS系统设计规范
iOS设计尺寸及单位 iOS界面结构 iOS基本布局 iOS图标规范 iOS文字规范
2.1 iOS系统设计规范
iOS系统基础规范可以通过设计尺寸、界面结构、基本布局、图 标规范及字体规范5个方面进行详尽的剖析。
PPI的计算公式（X、Y分别为横向、纵向的像素数）
2.1.1 iOS设计尺寸及单位
•Asset:比例因子，英文全称“Asset”。标准分辨率显示器具有1： 1像素密度（或@1x），其中一个像素等于一个点。高分辨率显示器 具有更高的像素密度，比例因子为2.0或3.0（称为@2x和@3x）。因 此，高分辨率显示器需要具有更多像素的图像。
2.1.3 iOS基本布局
1.网格系统 网格系统（Grid Systems），又称为栅格系统，是利用一系列垂 直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这 些格子为基准，进行页面布局设计的方式，能使布局规范、简洁、有 秩序。
网格系统
2.1.3 iOS基本布局
2.组成元素 网格系统由列、水槽以及边距3个元素组成。列是内容放置的区 域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕 左右边缘之间的距离。
逻辑像素与物理像素的转换
2.1.1 iOS设计尺寸及单位
2.设计尺寸 iOS常见的设备尺寸。在进行界面设计稿时，为了一稿适配，都 是以iPhone6/6s/7/8为基准。使用Photoshop就建750x1334px尺寸 的画布，如果是使用Sketch就建立375x667pt。
iOS常见设备的尺寸
2.1.1 iOS设计尺寸及单位
1.相关单位 •PPI:像素密度，英文全称“Pixels Per inch”，简称“PPI”，是 屏幕分辨率单位，表示的是每英寸所拥有的像素数量，如图2-1所示。 屏幕密度越大，画面越细腻。因此，iPhone4比iPhone3GS屏幕尺寸 虽然相同，但实际像素大了一倍，清晰度自然变高。
2.1.4 iOS图标规范
在iOS中，图标规范可以从应用图标和系统图标两个方面进行详 尽的剖析。
1.应用图标 •应用图标的概念：应用图标是应用程序的图标。应用图标主要应 用于主屏幕、APPStore、Spotlight以及设置中。
iOS系统中各类应用图标
2.1.4 iOS图标规范
•应用图标的设计：应用图标在设计时尺寸可以采用1024px，并 根据iOS官方模版进行规范。正确的图标设计稿应是直角矩形不带圆 角，iOS会自动应用一个圆角折罩将图标的4个角遮住。
第2章 移动UI设计规范
本章介绍：
设计规范在移动UI设计的工作中有着 保证视觉统一性、提升项目工作效率、提升 设计细节等诸多好处。本章对iOS系统以及 Android系统的基础设计规范进行讲解。通 过本章的学习，读者可以对移动UI设计的基 础规范有一个基本的认识，有助于高效便利 地进行移动UI设计工作。
iOS官方模版
2.1.4 iOS图标规范
•应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、 App Store、Spotlight以及设置场景中，尺寸也应根据不同设备的分 辨率进行适配。
iOS系统中不同设备应用ห้องสมุดไป่ตู้标的尺寸
2.1.4 iOS图标规范
2.系统图标 •系统图标的概念：系统图标即界面中的功能图标，系统图标主要 应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标， UI设计师可以设计自定义图标。
澳大利亚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.1.3 iOS基本布局
3.网格运用 •单元格：iOS的最小点击区域是44pt，即88px（@2x）。因此， 在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。 其中4px容易将页面切割细碎，所以比较推荐使用8px。
单元格
2.1.3 iOS基本布局
•列：列的数量有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）最为 常用。