【文档说明】移动UI界面设计07iOS系统UI设计规范1课件.pptx，共(38)页，10.672 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-50593.html

以下为本文档部分文字说明：

iOS系统UI设计规范-1课程回顾Android系统的手机控件Android系统界面中的列表和网格演示案例-360界面设计2/40本章任务了解iOS系统与iPhone的基本信息了解iOS系统手机的设计尺寸掌握iOS系统中常见术语的含义掌握iOS系统手机的设计规范3/40

目录iOS系统与iPhone基本介绍iOS系统手机的设计尺寸与常见术语iOS系统手机的设计规范4/40iOS系统与iPhone基本介绍iOS系统iOS系统是由苹果公司开发的手持设备操作系统最初是设计给iPhone使用的，随着技术发展陆续应用到iPodtou

ch、iPad以及AppleTV等苹果产品上业内佼佼者5/40iOS系统与iPhone基本介绍iOS系统相关产品6/40iOS系统与iPhone基本介绍苹果官方网站https://www.apple.com/cn/7/40iOS系统与iPho

ne基本介绍产品特点高端、大气、上档次的代名词新型设计潮流的引领者设计流行趋势的代言人8/40iOS系统与iPhone基本介绍iPhone的型号迭代9/40目录iOS系统与iPhone基本介绍iOS系统

手机的设计尺寸与常见术语iOS系统手机的设计规范10/40iOS系统手机的设计尺寸与常见术语iPhone型号设计尺寸pxiPhone2，3G，3GS320×480iPhone4，4S640×960iPhone5，5s，SE640×1136iPhone6

，6s，7，8750×1334iPhone6plus，6Splus，7plus，8plus1242×2208iPhoneX1125×243611/40常用术语像素pxpixel是指在由一个数字序列表示的图像中的一个最小单位，称为像素iOS系统手机的设计尺寸与常见术语12/4

0常用术语分辨率DPIdotsperinch图像每英寸面积内的像素点数单位为像素/英寸常见印刷分辨率要求300网页显示分辨率要求72iOS系统手机的设计尺寸与常见术语13/40常用术语Retina屏也被称为规网膜显示屏是把更多的像素点压缩至

一块屏幕里，提高显示屏分辨率和细腻程度iPhone4机型以后均为Retina屏iOS系统手机的设计尺寸与常见术语14/40常用术语屏幕像素密度ppiPixelperinch每英寸像素数，为像素密度单位：像素/每英寸屏幕分辨率：X*Y，屏

幕像素密度：iOS系统手机的设计尺寸与常见术语15/40iOS系统手机的设计尺寸与常见术语iPhone型号设计尺寸px屏幕像素密度ppiiPhone2，3G，3GS320×480162@1X分辨率iPhone4，4S640×960326@2X分

辨率iPhone5，5s，SE640×1136326@2X分辨率iPhone6，6s，7，8750×1334326@2X分辨率iPhone6plus，6Splus，7plus，8plus1242×220840

1@3X分辨率iPhoneX1125×2436458@3X分辨率16/40常用术语pt指印刷行业中讲的“点”（也被翻译成“磅”）iOS开发中用到的长度单位，是独立像素的意思–丌随屏幕密度PPI发生变化，是固定单位–和日常用到的毫米、厘米是

同样的长度单位，只是它要小得多»在非规网膜的@1X的屏幕下，1px=1pt»在@2X的屏幕下，1pt=2px»在@3X的屏幕下，1pt=3px–pt可以帮助换算丌同倍率屏幕下的像素尺寸iOS系统手机的设计尺寸与常见术语

17/40iOS系统手机的设计尺寸与常见术语iPhone型号设计尺寸px屏幕像素密度ppi与px的换算关系iPhone2，3G，3GS320×480162@1X分辨率1px=1ptiPhone4，4S640×960326@2X分辨率1pt=2

pxiPhone5，5s，SE640×1136326@2X分辨率1pt=2pxiPhone6，6s，7，8750×1334326@2X分辨率1pt=2pxiPhone6plus，6Splus，7plus，8plus1242×2208401@3X分辨率1pt=3

pxiPhoneX1125×2436458@3X分辨率1pt=3px18/40iOS系统手机的设计尺寸与常见术语屏幕像素密度ppi与独立像素pt对设计的影响在设计PC网页时，只需要考虑丌同显示器的分辨率即可在设计iOS系统手机

界面时，由于Retina屏在显示上更加细腻，在PS软件中，像素px不独立像素pt之间存在换算关系，在电脑屏幕中显示的界面设计使用合适的字号大小和布局尺寸，在手机上显示时有可能会发生大小丌一的情况设计师需要设计丌同尺寸的设计稿，以适应丌同倍

率的屏幕19/40目录iOS系统与iPhone基本介绍iOS系统手机的设计尺寸与常见术语iOS系统手机的设计规范20/40iOS系统手机的设计规范iOS系统手机的设计规范丌需要为每一种分辨率单独设计一套UI

界面在主流尺寸的基础上进行设计，然后再不其他尺寸进行适配在实际工作中，可以使用750x1334px进行设计21/40iOS系统手机的设计规范iOS系统中的栏状态栏导航栏标签栏工具栏22/40iOS系统手机的设计规范

iOS系统中的栏状态栏显示在屏幕的最上方栏中包含信号、运营商、电量等状况信息当运行游戏程序或全屏观看媒体文件时，状态栏会自动隐藏在750x1334px尺寸中，状态栏高度为40px23/40iOS系统手机的设计规范iOS系统中的栏状态栏：状态栏的颜

色可以自定义设计么？24/40iOS系统手机的设计规范iOS系统中的栏导航栏在iOS中，导航栏位于屏幕顶部，分为左、中、右三个区域左右区域放置控件中间区域一般是标题在750x1334px尺寸中，状态栏高度为88px25/40iOS系

统手机的设计规范iOS系统中的栏标签栏又叫菜单栏通常位于屏幕底部，用来实现标签导航以及应用中功能模块的切换在750x1334px尺寸中，状态栏高度为98px26/40iOS系统手机的设计规范iOS系统中的栏工具栏主要用于当前屏幕中的操作处理没有导航和屏幕跳转功能

在iPhone中，工具栏一般在屏幕底部在iPad中，工具栏一般在屏幕顶部在750x1334px尺寸中，状态栏高度为88px27/40iOS系统手机的设计规范iOS系统中的栏工具栏和标签栏的区别：工具栏关注的是当

前界面的操作，它的操作按钮中丌能有屏幕的切换标签栏关注的是整体导航，有屏幕的切换在iOS系统中，如果同时需要工具栏和标签栏，那么受屏幕大小的限制最好适时地隐藏标签栏28/40iOS系统手机的设计规范iPhone型号设

计尺寸px状态栏导航栏标签栏iPhone2，3G，3GS320×480204449iPhone4，4S640×960408898iPhone5，5s，SE640×1136408898iPhone6，6s，7，8750×13

34408898iPhone6plus，6Splus，7plus，8plus1242×220860132147iPhoneX1125×243613213224929/40iOS系统手机的设计规范iOS系统的按钮与可点击区域最小22*22pt~24*24pt

在两倍屏中，即44*44px~48*48px为最小可点击区域的尺寸如果确实由于空间有限，必须要缩小按钮或可点击区域的尺寸，可以在增大可点击区域其中一条边长的前提下适当缩减另一条边的尺寸，以方便用户更容易的进行操作30/40iOS系统手机的设计规范iOS系统字体与字号苹

方在设计时中文可以使用苹方、冬青黑体、苹果丽黑英文可以使用SanFrancisco、Helvetial由于系统更新，所使用的字体也会有所变化，因此以官方发布为主31/40iOS系统手机的设计规范iOS系统字体与字号界面中使用文字的时候，要保证

文字极易被识别一款App中一般只使用一种或两种字体为了保证适配方便，尽量使用双数字号设计师可以通过文字的颜色、大小、所占比重、行间距来进行强调和区分32/40iOS系统手机的设计规范iOS推荐

字号大小一定要保证文字的识别度，建议将效果图倒入手机实际观看当段落文字较多时，可以通过增大字号、加宽行间距来保证阅读的舒适感在750x1334px尺寸（@2X）下控件权重在px中的字号导航栏标题字中等34标签栏字常觃20~28工具条标签字常觃20~2833

/40iOS系统手机的设计规范iOS推荐字号大小34/40课堂练习课堂练习：你手机中的App需求描述将iOS系统手机中的App界面进行截屏导入电脑中，查看界面中的界面尺寸栏高按钮的大小文字的大小实现思路选取至少两个App，每个App至少截取两个界面35/40演示案例演

示案例：iOS系统手机UI模板需求描述完成iOS系统手机UI模板截面尺寸：750x1334px实现思路使用矩形工具绘制白色的状态栏，高度40像素，补充显示的文字和图标使用矩形工具绘制88像素高度的导航栏绘制高度为98像素的标签栏36/40课堂练习课

堂练习：iOS系统界面设计练习需求描述临摹优秀iOS系统界面实现思路以学生自己iOS系统手机中的优秀App为样，临摹界面画布尺寸以手机尺寸为准尽量使用矢量形状或工具进行绘制37/40本章总结设计师在设计iOS系统手机时，可以从那个尺

寸开始新建画布？iOS系统中pt和ppi指的是什么？iOS系统手机的最小可点击区域是多少？38/40