第6章-iOS界面设计课件.pptx

1、Sketch Sketch 网站网站UIUI设计设计（微课版）主讲老师：主讲老师：06 iOS06 iOS界面设计界面设计iOS界面设计界面设计Sketch网站UI设计目录目录02绘制绘制iPhone 8 APP界面界面01绘制绘制iPhone X APP界面界面iOS界面设计界面设计Sketch网站UI设计绘制iPhone X APP界面iOS界面设计界面设计Sketch网站UI设计iOS系统界面用户元素系统界面用户元素在iOS界面中，由很多不同元素构成，每个元素都有不同的外观和尺寸，并且在界面中承载着不同的功能，而这些大量的可以直接使用的视图和控件，可以帮助开发者快速的创建界面。iOS界面

2、设计界面设计Sketch网站UI设计顶部导航栏顶部导航栏传感器不同状态栏的作用是展示设备的基本系统信息，例如当前事件、时间和电池状态及其他更多信息。视觉上状态栏是和导航栏相连的，都使用一样的背景填充。为配合APP的风格和保证可读性，状态栏内容有两种不同的风格，分别为暗色（黑）和亮色（白）。iOS界面设计界面设计Sketch网站UI设计标签栏和搜索栏标签栏和搜索栏传感器不同标签栏用于切换视图、子任务和模式，并且对程序层面上的信息进行管理，通常在屏幕底部。默认情况下使用和导航栏一样的轻微半透明，以及使用和系统一样的模糊处理遮住的内容。iOS界面设计界面设计Sketch网站UI设计操作案例操作案例绘

3、制绘制iPhone X启动界面启动界面iOS界面设计界面设计Sketch网站UI设计表格视图表格视图纯表格分组表格默认带副标题带数值iOS界面设计界面设计Sketch网站UI设计iOS系统界面设计规范系统界面设计规范确保程序可行确保APP可以在iPhone和iPad中通用基于Web网页重新设计iOS界面设计界面设计Sketch网站UI设计iPhone X 的的APP界面设计界面设计对于所有设计师来说，iPhone X的界面设计都是陌生而熟悉的。之所以说它陌生是因为iPhone X才刚问世，而熟悉是因为又是一款iPhone产品，这就给了设计师一种非常微妙的感觉。iOS界面设计界面设计Sketch

4、网站UI设计编辑位图编辑位图在Sketch中可以非常方便的使用位图元素，但是Sketch不是一个位图编辑软件，它所提供的位图编辑功能比较简单。双击位图或者单击工具栏上的“编辑”按钮，在检查器中即可显示位图编辑。iOS界面设计界面设计Sketch网站UI设计iPhone X的屏幕尺寸的屏幕尺寸屏幕尺寸 在竖屏中，iPhone X 显示屏的宽度与4.7英寸的 iPhone 6、iPhone 7和iPhone 8一致。但是 iPhone X 显示屏比4.7英寸显示屏高145 pt，为内容增加了大约20的垂直空间。iOS界面设计界面设计Sketch网站UI设计iPhone X的屏幕尺寸的屏幕尺寸iOS

5、界面设计界面设计Sketch网站UI设计iPhone X的布局的布局在 iPhone X 上设计 App 时，你必须确保布局内容填满屏幕，并且不会被设备的圆角、传感器外壳或用于访问主屏幕的指示器所遮挡。iOS界面设计界面设计Sketch网站UI设计绘制iPhone 8 APP界面iOS界面设计界面设计Sketch网站UI设计iOS APP界面设计界面设计UI模板模板Sketch不仅为用户提供了各式各样的画板模版，还为用户提供了iOS用户界面设计元素的各种模版。iOS界面设计界面设计Sketch网站UI设计iPhone 8的组件的组件Sketch中为用户提供了“iOS用户界面设计”的各种元素组件

6、。凡是iOS 的系统设计元素，“iOS 用户界面设计”选 项 下 都 有。并 且Sketch提供的组件会随着iOS系统的升级而做出相应的更改。iOS界面设计界面设计Sketch网站UI设计操作案例操作案例绘制绘制iPhone系统视频播放界面系统视频播放界面iOS界面设计界面设计Sketch网站UI设计iPhone X的组件的组件Sketch中的“iOS用户界面设计”选项下，有一项iPhone X，这就是Sketch软件顺应IPhone手机的更新速度而做出的调整。iOS界面设计界面设计Sketch网站UI设计iOS界面设计规范界面设计规范用户想要设计出优秀的iOS界面，仅是会熟练操作各种绘图软件

7、是不够的，还需要熟知iOS 界面设计规范。iOS界面设计界面设计Sketch网站UI设计操作案例操作案例绘制绘制“休闲空间休闲空间”启动页启动页1iOS界面设计界面设计Sketch网站UI设计设计与技术相结合设计与技术相结合网页界面是整个网站的“门面”，网页能否吸引浏览者，是否能够引起浏览者的兴趣，是否还能够吸引浏览者再次光临，其界面设计是至关重要的iOS界面设计界面设计Sketch网站UI设计界面尺寸界面尺寸设备设备分辨率分辨率状态栏高度状态栏高度导航栏高度导航栏高度标签栏高度标签栏高度iPhone X11252436px44px88px98pxiPhone6/6/7/8 plus12422

8、208 px60px132px146pxiPhone6/7/87501334 px40px88px98pxiPhone5/5s/5c6401136 px40px88px98pxiPad3/4/Air/Air2/mini220481536 px40px88px98pxiPad1/21024768 px20px44px49pxiPad mini1024768 px20px44px49pxiOS界面设计界面设计Sketch网站UI设计图标尺寸图标尺寸设备设备App Store应用程序应用程序主屏幕主屏幕spotlight搜索搜索iPhone6/7/8 plus10241024px180180px11

9、4114px8787 pxiPhone6/7/810241024px120120px114114px5858pxiPhone5/5s/5c10241024px120120px114114px5858pxiPad3/4/Air/Air2/mini210241024px180180px114114px100100pxiPad1/210241024px9090px7272px5050pxiPad mini10241024px9090px7272px5050pxiOS界面设计界面设计Sketch网站UI设计内部设计内部设计在绘制iPhone界面和图标时，要注意遵守这些规则。1、所有能点击的图片不得小于

10、44px（Retina需要88px）2、单独存在的部件必须是双数尺寸3、两倍图以2x作为命名后缀 4、充分考虑每个控制按钮在4中状态下的样式iOS界面设计界面设计Sketch网站UI设计移动移动APP设计过程中的要点设计过程中的要点在一个成熟且高效的移动APP产品团队中，UI设计师必须在前期就加入到项目设计中，针对UI设计的产品进行分析、定位等多方面的问题与团队其他人员进行探讨。iOS界面设计界面设计Sketch网站UI设计APP界面设计流程界面设计流程iOS界面设计界面设计Sketch网站UI设计操作案例操作案例绘制系统发生错误页面绘制系统发生错误页面iOS界面设计界面设计Sketch网站UI设计APP界面配色原则界面配色原则色调的色调的一致性一致性保守的使保守的使用色彩用色彩便于用户阅读控制颜色熟练符合习惯用法要有重点色谢谢观赏！