移动UI界面设计07iOS系统UI设计规范1课件

1、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使用的，随着技术发展陆续应用到iPod touch、iPad以及Apple TV等苹果产品上业内佼佼者5/40iOS系

2、统与iPhone基本介绍iOS系统相关产品6/40iOS系统与iPhone基本介绍苹果官方网站/cn/7/40iOS系统与iPhone基本介绍产品特点高端、大气、上档次的代名词新型设计潮流的引领者设计流行趋势的代言人8/40iOS系统与iPhone基本介绍iPhone的型号迭代9/40目录iOS系统与iPhone基本介绍iOS系统手机的设计尺寸与常见术语iOS系统手机的设计规范10/40iOS系统手机的设计尺寸与常见术语iPhone型号设计尺寸 pxiPhone2，3G，3GS320480iPhone4，4S640960iPhone5，5s，SE6401136iPhone6，6s，7，8750

3、1334iPhone6plus，6Splus，7plus，8plus12422208iPhoneX1125243611/40常用术语像素 pxpixel 是指在由一个数字序列表示的图像中的一个最小单位，称为像素iOS系统手机的设计尺寸与常见术语12/40常用术语分辨率 DPIdots per inch图像每英寸面积内的像素点数单位为 像素/英寸常见印刷分辨率要求300网页显示分辨率要求72iOS系统手机的设计尺寸与常见术语13/40常用术语Retina屏也被称为视网膜显示屏是把更多的像素点压缩至一块屏幕里，提高显示屏分辨率和细腻程度iPhone4机型以后均为Retina屏iOS系统手机的设计尺

4、寸与常见术语14/40常用术语屏幕像素密度ppiPixel per inch每英寸像素数，为像素密度单位：像素/每英寸屏幕分辨率：X*Y，屏幕像素密度：iOS系统手机的设计尺寸与常见术语15/40iOS系统手机的设计尺寸与常见术语iPhone型号设计尺寸 px屏幕像素密度ppiiPhone2，3G，3GS3204801621X分辨率iPhone4，4S6409603262X分辨率iPhone5，5s，SE64011363262X分辨率iPhone6，6s，7，875013343262X分辨率iPhone6plus，6Splus，7plus，8plus124222084013X分辨率iPhone

5、X112524364583X分辨率16/40常用术语pt指印刷行业中讲的“点”（也被翻译成“磅”） iOS 开发中用到的长度单位，是独立像素的意思不随屏幕密度PPI发生变化，是固定单位和日常用到的毫米、厘米是同样的长度单位，只是它要小得多在非视网膜的1X的屏幕下， 1px=1pt在2X的屏幕下，1pt=2px在3X的屏幕下，1pt=3pxpt可以帮助换算不同倍率屏幕下的像素尺寸iOS系统手机的设计尺寸与常见术语17/40iOS系统手机的设计尺寸与常见术语iPhone型号设计尺寸 px屏幕像素密度ppi与px的换算关系iPhone2，3G，3GS3204801621X分辨率1px=1ptiPho

6、ne4，4S6409603262X分辨率1pt=2pxiPhone5，5s，SE64011363262X分辨率1pt=2pxiPhone6，6s，7，875013343262X分辨率1pt=2pxiPhone6plus，6Splus，7plus，8plus124222084013X分辨率1pt=3pxiPhoneX112524364583X分辨率1pt=3px18/40iOS系统手机的设计尺寸与常见术语屏幕像素密度ppi 与 独立像素pt 对设计的影响在设计PC网页时，只需要考虑不同显示器的分辨率即可在设计iOS系统手机界面时，由于Retina屏在显示上更加细腻，在PS软件中，像素px与独立像

7、素pt之间存在换算关系，在电脑屏幕中显示的界面设计使用合适的字号大小和布局尺寸，在手机上显示时有可能会发生大小不一的情况设计师需要设计不同尺寸的设计稿，以适应不同倍率的屏幕19/40目录iOS系统与iPhone基本介绍iOS系统手机的设计尺寸与常见术语iOS系统手机的设计规范20/40iOS系统手机的设计规范iOS系统手机的设计规范不需要为每一种分辨率单独设计一套UI界面在主流尺寸的基础上进行设计，然后再与其他尺寸进行适配在实际工作中，可以使用750 x1334px 进行设计21/40iOS系统手机的设计规范iOS系统中的栏状态栏导航栏标签栏工具栏22/40iOS系统手机的设计规范iOS系统中

8、的栏状态栏显示在屏幕的最上方栏中包含信号、运营商、电量等状况信息当运行游戏程序或全屏观看媒体文件时，状态栏会自动隐藏在750 x1334px尺寸中，状态栏高度为40px23/40iOS系统手机的设计规范iOS系统中的栏状态栏：状态栏的颜色可以自定义设计么？24/40iOS系统手机的设计规范iOS系统中的栏导航栏在iOS中，导航栏位于屏幕顶部，分为左、中、右三个区域左右区域放置控件中间区域一般是标题在750 x1334px尺寸中，状态栏高度为88px25/40iOS系统手机的设计规范iOS系统中的栏标签栏又叫菜单栏通常位于屏幕底部，用来实现标签导航以及应用中功能模块的切换在750 x1334px

9、尺寸中，状态栏高度为98px26/40iOS系统手机的设计规范iOS系统中的栏工具栏主要用于当前屏幕中的操作处理没有导航和屏幕跳转功能在iPhone中，工具栏一般在屏幕底部在iPad中，工具栏一般在屏幕顶部在750 x1334px尺寸中，状态栏高度为88px27/40iOS系统手机的设计规范iOS系统中的栏工具栏和标签栏的区别：工具栏关注的是当前界面的操作，它的操作按钮中不能有屏幕的切换标签栏关注的是整体导航，有屏幕的切换在iOS系统中，如果同时需要工具栏和标签栏，那么受屏幕大小的限制最好适时地隐藏标签栏28/40iOS系统手机的设计规范iPhone型号设计尺寸 px状态栏导航栏标签栏iPho

10、ne2，3G，3GS320480204449iPhone4，4S640960408898iPhone5，5s，SE6401136408898iPhone6，6s，7，87501334408898iPhone6plus，6Splus，7plus，8plus1242220860132147iPhoneX1125243613213224929/40iOS系统手机的设计规范iOS系统的按钮与可点击区域最小22*22pt24*24pt在两倍屏中，即 44*44px48*48px为最小可点击区域的尺寸如果确实由于空间有限，必须要缩小按钮或可点击区域的尺寸，可以在增大可点击区域其中一条边长的前提下适当缩减另

11、一条边的尺寸，以方便用户更容易的进行操作30/40iOS系统手机的设计规范iOS系统字体与字号苹方在设计时中文可以使用苹方、冬青黑体、苹果丽黑英文可以使用San Francisco、Helvetial由于系统更新，所使用的字体也会有所变化，因此以官方发布为主31/40iOS系统手机的设计规范iOS系统字体与字号界面中使用文字的时候，要保证文字极易被识别一款App中一般只使用一种或两种字体为了保证适配方便，尽量使用双数字号设计师可以通过文字的颜色、大小、所占比重、行间距来进行强调和区分32/40iOS系统手机的设计规范iOS推荐字号大小一定要保证文字的识别度，建议将效果图倒入手机实际观看当段落文

12、字较多时，可以通过增大字号、加宽行间距来保证阅读的舒适感在750 x1334px尺寸（2X）下控件权重在px中的字号导航栏标题字中等34标签栏字常规2028工具条标签字常规202833/40iOS系统手机的设计规范iOS推荐字号大小34/40课堂练习：你手机中的App需求描述将iOS系统手机中的App界面进行截屏导入电脑中，查看界面中的界面尺寸栏高按钮的大小文字的大小实现思路选取至少两个App，每个App至少截取两个界面35/40演示案例：iOS系统手机UI模板需求描述完成iOS系统手机UI模板截面尺寸：750 x1334px实现思路使用矩形工具绘制白色的状态栏，高度40像素，补充显示的文字和图标使用矩形工具绘制88像素高