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

1、iOS系统UI设计规范-1课程回顾n Android系统的手机控件n Android系统界面中的列表和网格n 演示案例-360界面设计2/40本章任务n 了解iOS系统与iPhone的基本信息n 了解iOS系统手机的设计尺寸n 掌握iOS系统中常见术语的含义n 掌握iOS系统手机的设计规范3/40目录n iOS系统与iPhone基本介绍n iOS系统手机的设计尺寸与常见术语n iOS系统手机的设计规范4/40iOS系统与iPhone基本介绍n iOS系统liOS系统是由苹果公司开发的手持设备操作系统l最初是设计给iPhone使用的，随着技术发展陆续应用到iPod touch、iPad以及App

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

3、E6401136iPhone6，6s，7，87501334iPhone6plus，6Splus，7plus，8plus12422208iPhoneX1125243611/40n 常用术语l像素 pxppixel p是指在由一个数字序列表示的图像中的一个最小单位，称为像素iOS系统手机的设计尺寸与常见术语12/40n 常用术语l分辨率 DPIpdots per inchp图像每英寸面积内的像素点数p单位为 像素/英寸p常见印刷分辨率要求300p网页显示分辨率要求72iOS系统手机的设计尺寸与常见术语13/40n 常用术语lRetina屏p也被称为视网膜显示屏p是把更多的像素点压缩至一块屏幕里，提

4、高显示屏分辨率和细腻程度piPhone4机型以后均为Retina屏iOS系统手机的设计尺寸与常见术语14/40n 常用术语l屏幕像素密度ppipPixel per inchp每英寸像素数，为像素密度p单位：像素/每英寸p屏幕分辨率：X*Y，屏幕像素密度：iOS系统手机的设计尺寸与常见术语15/40iOS系统手机的设计尺寸与常见术语iPhone型号设计尺寸 px屏幕像素密度ppiiPhone2，3G，3GS3204801621X分辨率iPhone4，4S6409603262X分辨率iPhone5，5s，SE64011363262X分辨率iPhone6，6s，7，875013343262X分辨率i

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

6、幕像素密度ppi与px的换算关系iPhone2，3G，3GS3204801621X分辨率1px=1ptiPhone4，4S6409603262X分辨率1pt=2pxiPhone5，5s，SE64011363262X分辨率1pt=2pxiPhone6，6s，7，875013343262X分辨率1pt=2pxiPhone6plus，6Splus，7plus，8plus124222084013X分辨率1pt=3pxiPhoneX112524364583X分辨率1pt=3px18/40iOS系统手机的设计尺寸与常见术语n 屏幕像素密度ppi 与 独立像素pt 对设计的影响l在设计PC网页时，只需要考虑

7、不同显示器的分辨率即可l在设计iOS系统手机界面时，由于Retina屏在显示上更加细腻，在PS软件中，像素px与独立像素pt之间存在换算关系，在电脑屏幕中显示的界面设计使用合适的字号大小和布局尺寸，在手机上显示时有可能会发生大小不一的情况l设计师需要设计不同尺寸的设计稿，以适应不同倍率的屏幕19/40目录n iOS系统与iPhone基本介绍n iOS系统手机的设计尺寸与常见术语n iOS系统手机的设计规范20/40iOS系统手机的设计规范n iOS系统手机的设计规范l不需要为每一种分辨率单独设计一套UI界面l在主流尺寸的基础上进行设计，然后再与其他尺寸进行适配l在实际工作中，可以使用750 x

8、1334px 进行设计21/40iOS系统手机的设计规范n iOS系统中的栏l状态栏l导航栏l标签栏l工具栏22/40iOS系统手机的设计规范n iOS系统中的栏l状态栏l显示在屏幕的最上方l栏中包含信号、运营商、电量等状况信息l当运行游戏程序或全屏观看媒体文件时，状态栏会自动隐藏l在750 x1334px尺寸中，状态栏高度为40px23/40iOS系统手机的设计规范n iOS系统中的栏l状态栏：状态栏的颜色可以自定义设计么？24/40iOS系统手机的设计规范n iOS系统中的栏l导航栏l在iOS中，导航栏位于屏幕顶部，分为左、中、右三个区域l左右区域放置控件l中间区域一般是标题l在750 x

9、1334px尺寸中，状态栏高度为88px25/40iOS系统手机的设计规范n iOS系统中的栏l标签栏l又叫菜单栏l通常位于屏幕底部，用来实现标签导航以及应用中功能模块的切换l在750 x1334px尺寸中，状态栏高度为98px26/40iOS系统手机的设计规范n iOS系统中的栏l工具栏l主要用于当前屏幕中的操作处理没有导航和屏幕跳转功能l在iPhone中，工具栏一般在屏幕底部l在iPad中，工具栏一般在屏幕顶部l在750 x1334px尺寸中，状态栏高度为88px27/40iOS系统手机的设计规范n iOS系统中的栏l工具栏和标签栏的区别：p工具栏关注的是当前界面的操作，它的操作按钮中不能

10、有屏幕的切换p标签栏关注的是整体导航，有屏幕的切换p在iOS系统中，如果同时需要工具栏和标签栏，那么受屏幕大小的限制最好适时地隐藏标签栏28/40iOS系统手机的设计规范iPhone型号设计尺寸 px状态栏导航栏标签栏iPhone2，3G，3GS320480204449iPhone4，4S640960408898iPhone5，5s，SE6401136408898iPhone6，6s，7，87501334408898iPhone6plus，6Splus，7plus，8plus1242220860132147iPhoneX1125243613213224929/40iOS系统手机的设计规范n i

11、OS系统的按钮与可点击区域l最小22*22pt24*24ptl在两倍屏中，即 44*44px48*48px为最小可点击区域的尺寸l如果确实由于空间有限，必须要缩小按钮或可点击区域的尺寸，可以在增大可点击区域其中一条边长的前提下适当缩减另一条边的尺寸，以方便用户更容易的进行操作30/40iOS系统手机的设计规范n iOS系统字体与字号l苹方l在设计时中文可以使用苹方、冬青黑体、苹果丽黑l英文可以使用San Francisco、Helvetiall由于系统更新，所使用的字体也会有所变化，因此以官方发布为主31/40iOS系统手机的设计规范n iOS系统字体与字号l界面中使用文字的时候，要保证文字极

12、易被识别l一款App中一般只使用一种或两种字体l为了保证适配方便，尽量使用双数字号l设计师可以通过文字的颜色、大小、所占比重、行间距来进行强调和区分32/40iOS系统手机的设计规范n iOS推荐字号大小l一定要保证文字的识别度，建议将效果图倒入手机实际观看l当段落文字较多时，可以通过增大字号、加宽行间距来保证阅读的舒适感在750 x1334px尺寸（2X）下控件权重在px中的字号导航栏标题字中等34标签栏字常规2028工具条标签字常规202833/40iOS系统手机的设计规范n iOS推荐字号大小34/40课堂练习课堂练习：你手机中的Appn 需求描述l将iOS系统手机中的App界面进行截屏

13、l导入电脑中，查看界面中的p界面尺寸p栏高p按钮的大小p文字的大小n 实现思路l选取至少两个App，每个App至少截取两个界面35/40演示案例演示案例：iOS系统手机UI模板n 需求描述l完成iOS系统手机UI模板l截面尺寸：750 x1334pxn 实现思路l使用矩形工具绘制白色的状态栏，高度40像素，补充显示的文字和图标l使用矩形工具绘制88像素高度的导航栏l绘制高度为98像素的标签栏36/40课堂练习课堂练习：iOS系统界面设计练习n 需求描述l临摹优秀iOS系统界面n 实现思路l以学生自己iOS系统手机中的优秀App为样，临摹界面l画布尺寸以手机尺寸为准l尽量使用矢量形状或工具进行绘制37/40本章总结n 设计师在设计iOS系统手机时，可以从那个尺寸开始新建画布？n iOS系统中pt和ppi指的是什么？n iOS系统手机的最小可点击区域是多少？38/40