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

1、iOS系统UI设计规范-2课程回顾n iOS系统与iPhone基本介绍n iOS系统手机的设计尺寸与常见术语n iOS系统手机的设计规范2/40本章任务n 了解iOS系统的手机控件有哪些n 掌握iOS系统手机界面的常见布局方式3/40目录n iOS系统的手机控件n iOS系统手机界面的布局n Android与iOS系统手机界面、图标设计规范小结4/40iOS系统的手机控件l文本输入、输出控件l按钮l滑块l选择控件l对话框l活动指示器l进度条l5/40iOS系统的手机控件n 文本输入、输出控件l文本输出 是用户只能查看内容而不能进行修改l文本输入 则可以由用户进行修改6/40iOS系统的手机控件

2、n 文本输入、输出控件l默认的iOS系统文本输入控件是一个圆角矩形l当用户使用输入控件，输入控件被激活的时候，控件高亮显示，界面上会自动弹出键盘7/40iOS系统的手机控件n 按钮liOS系统默认的按钮样式为圆角设计8/40iOS系统的手机控件n 滑块控件l为了形象的表示滑块控件所要传达的意思，可以在滑块两端增加图标9/40iOS系统的手机控件n 选择控件l在iOS系统中，二选一控件只有开关控件10/40iOS系统的手机控件n 选择控件l收音机按钮被称作分段控件l在每一段中可以添加文字也可以设置图片l有时候可以将分段控件放置在工具栏或是导航栏中11/40iOS系统的手机控件l多选控件可以让用户

3、在多个选项中进行选择，选择的个数是不定的lAndroid系统使用的是复选框l而在iOS系统中是没有复选框的，可以借助表视图为单元格加上选中标志12/40iOS系统的手机控件n 寻找iOS手机中的复选框：iOS系统中真的没有“复选框”么？13/40iOS系统的手机控件n 寻找iOS手机中的复选框14/40iOS系统的手机控件n 拾取器l常用的日期和时间拾取器一般有四种模式p日期p日期+时间p时间p定时器 计时器模块中的日期和时间拾取器15/40iOS系统的手机控件n 对话框l警告框l操作表l分享列表16/40iOS系统的手机控件n 对话框l警告框l操作表l分享列表 iPhone中的操作表 iPa

4、d中的操作表17/40iOS系统的手机控件n 对话框l警告框l操作表l分享列表 iPhone中的分项列表 iPad中的分项列表18/40iOS系统的手机控件n 活动指示器iOS系统中可以自定义活动指示器么？19/40iOS系统的手机控件n 进度条 iOS系统的进度条20/40课堂练习课堂练习：寻找iOS中的常见控件n 需求描述l将iOS系统手机中的App界面进行截屏，寻找常见控件p文本输入、输出控件p按钮p滑块、选择控件p对话框p活动指示器、进度条n 实现思路l截屏，将界面导入电脑l查看常见控件的样式和大小21/40演示案例演示案例：制作iOS系统手机UI套件n 需求描述l制作iOS系统手机U

5、I套件n 实现思路l尽量使用形状工具绘制各控件l便于颜色的更改l便于控制控件的大小，放大不失真l注意控件在不同状态下的样式差异22/40目录n iOS系统的手机控件n iOS系统手机界面的布局n Android与iOS系统手机界面、图标设计规范小结23/40iOS系统手机界面的布局n 列表视图主要分为l普通表视图l分组表视图 普通表视图和分组表视图24/40iOS系统界面的布局n 网格视图l被称作集合视图l比起手机，iPad中更常用到集合视图 iOS系统qq音乐App采用了网格视图25/40演示案例演示案例：制作iOS系统控制中心界面n 需求描述l制作iOS系统控制中心界面l750 x1334

6、pxn 实现思路l将iOS系统主界面截屏并导入电脑作为图片素材，在其上增加黑色半透明图层l复制界面下面的区域，在新建图层上进行粘贴，然后对其进行高斯模糊。新建一个同等大小的白色矩形图层，更改其透明度l使用钢笔工具和形状工具绘制图标26/40课堂练习课堂练习：iOS&Android系统中的App比较n 需求描述liOS&Android系统中的App比较n 实现思路l将双系统同一App进行截屏，上传到电脑，然后进行图标、界面对比：p原生App：拨号界面、短信、闹钟、计算器等p优秀App：微信、QQ、百度云盘等p对比界面和控件，包括：主界面、各个栏高、可点击区域和按钮、文字大小、搜索栏等27/40目

7、录n iOS系统的手机控件n iOS系统手机界面的布局n Android与iOS系统手机界面、图标设计规范小结28/40Android与iOS系统手机界面、图标设计规范小结n iOS系统liOS系统是由苹果公司开发的手持设备操作系统n Android系统lAndroid是一种基于Linux的自由及开放源代码的操作系统29/40Android与iOS系统手机界面、图标设计规范小结n iOS系统启动图标规范l采用圆角矩形l默认一般采用顶部光源l在设计的时候，圆角部分是不需要要进行设计的，这部分是通过程序来实现的l1024*1024pxn Android系统启动图标规范l没有对启动图标在风格上有过多

8、的硬性要求l512*512px30/40Android与iOS系统手机界面、图标设计规范小结n iOS系统推荐界面设计尺寸l在实际工作中，可以使用750 x1334px（1pt=2px）n Android系统推荐界面设计尺寸l在实际工作中，可以使用720*1280px（1dp=2px）1080*1920px（1dp=3px）31/40Android与iOS系统手机界面、图标设计规范小结n iOS系统中的栏iPhone型号屏幕大小 px状态栏高度 px导航栏高度 px标签栏高度 pxiPhone6，6s，7，8750133440889832/40Android与iOS系统手机界面、图标设计规范小

9、结n Android系统中的栏nAndroid控件高度都支持自定义，所以没有严格的尺寸数值设备屏幕大小 px状态栏高度 px导航栏高度 px标签栏高度 pxXHdpi720 x1280509696XXHpid1080 x19207514414433/40Android与iOS系统手机界面、图标设计规范小结n iOS系统Android系统可点击区域大小l考虑用户手指接触屏幕的最小可点击区域34/40Android与iOS系统手机界面、图标设计规范小结n iOS系统字体与字号l默认字体：苹方l在设计时中文可以使用苹方、冬青黑体、苹果丽黑英文可以使用San Francisco、Helvetiall暂

10、时不支持内嵌字体n Android系统字体与字号l默认英文字体：Robotol默认中文字体：Droid sans fallbackl在设计上可以使用微软雅黑、方正兰亭等l支持内嵌字体35/40Android与iOS系统手机界面、图标设计规范小结n iOS系统Android系统字号大小l双数字号l保证文字识别度36/40课堂练习课堂练习：临摹运动类手机App界面n 需求描述l临摹运动类手机App界面l750 x1334pxn 实现思路l确立主要的几种颜色，以此为基础进行设计l依次设计绘制各个界面中的控件l注意控件的各个状态37/40本章总结n iOS系统界面、图标设计规范n Android系统界面、图标设计规范38/40