iOS界面设计课件

1、Sketch 网站UI设计（微课版）主讲老师：06 iOS界面设计目录02绘制iPhone 8 APP界面01绘制iPhone X APP界面绘制iPhone X APP界面iOS系统界面用户元素在iOS界面中，由很多不同元素构成，每个元素都有不同的外观和尺寸，并且在界面中承载着不同的功能，而这些大量的可以直接使用的视图和控件，可以帮助开发者快速的创建界面。顶部导航栏传感器不同状态栏的作用是展示设备的基本系统信息，例如当前事件、时间和电池状态及其他更多信息。视觉上状态栏是和导航栏相连的，都使用一样的背景填充。 为配合APP的风格和保证可读性，状态栏内容有两种不同的风格，分别为暗色（黑）和亮色（

2、白）。标签栏和搜索栏传感器不同标签栏用于切换视图、子任务和模式，并且对程序层面上的信息进行管理，通常在屏幕底部。默认情况下使用和导航栏一样的轻微半透明，以及使用和系统一样的模糊处理遮住的内容。操作案例绘制iPhone X启动界面表格视图纯表格分组表格默认带副标题带数值iOS系统界面设计规范确保程序可行确保APP可以在iPhone和iPad中通用基于Web网页重新设计iPhone X 的APP界面设计对于所有设计师来说，iPhone X的界面设计都是陌生而熟悉的。之所以说它陌生是因为iPhone X才刚问世，而熟悉是因为又是一款iPhone产品，这就给了设计师一种非常微妙的感觉。编辑位图在Ske

3、tch中可以非常方便的使用位图元素，但是Sketch不是一个位图编辑软件，它所提供的位图编辑功能比较简单。双击位图或者单击工具栏上的“编辑”按钮，在检查器中即可显示位图编辑。iPhone X的屏幕尺寸屏幕尺寸 在竖屏中，iPhone X 显示屏的宽度与4.7英寸的 iPhone 6、iPhone 7和iPhone 8一致。但是 iPhone X 显示屏比4.7英寸显示屏高145 pt，为内容增加了大约20的垂直空间。iPhone X的屏幕尺寸iPhone X的布局在 iPhone X 上设计 App 时，你必须确保布局内容填满屏幕，并且不会被设备的圆角、传感器外壳或用于访问主屏幕的指示器所遮挡

4、。绘制iPhone 8 APP界面iOS APP界面设计UI模板Sketch不仅为用户提供了各式各样的画板模版，还为用户提供了iOS用户界面设计元素的各种模版。iPhone 8的组件Sketch中为用户提供了 “iOS用户界面设计”的各种元素组件。凡是iOS 的系统设计元素，“iOS 用户界面设计”选项下都有。并且Sketch提供的组件会随着iOS系统的升级而做出相应的更改。操作案例绘制iPhone系统视频播放界面iPhone X的组件Sketch中的“iOS用户界面设计”选项下，有一项iPhone X，这就是Sketch软件顺应IPhone手机的更新速度而做出的调整。iOS界面设计规范用户想

5、要设计出优秀的iOS界面，仅是会熟练操作各种绘图软件是不够的，还需要熟知iOS 界面设计规范。操作案例绘制“休闲空间”启动页1设计与技术相结合网页界面是整个网站的“门面”，网页能否吸引浏览者，是否能够引起浏览者的兴趣，是否还能够吸引浏览者再次光临，其界面设计是至关重要的界面尺寸设备分辨率状态栏高度导航栏高度标签栏高度iPhone X11252436px44px88px98pxiPhone6 /6/7/8 plus12422208 px60px132px146pxiPhone6/7/87501334 px40px88px98pxiPhone5/5s/5c6401136 px40px88px98p

6、xiPad3/4/Air/Air2/mini220481536 px40px88px98pxiPad1/21024768 px20px44px49pxiPad mini1024768 px20px44px49px图标尺寸设备App Store应用程序主屏幕spotlight搜索iPhone6 /7/8 plus10241024px180180px114114px8787 pxiPhone6/7/810241024px120120px114114px5858pxiPhone5/5s/5c10241024px120120px114114px5858pxiPad3/4/Air/Air2/mini210241024px180180px114114px100100pxiPad1/210241024px9090px7272px5050pxiPad mini10241024px9090px7272px5050px内部设计在绘制iPhone界面和图标时，要注意遵守这些规则。1、所有能点击的图片不得小于44px（Retina需要88px）2、单独存在的部件必须是双数尺寸3、两倍图以2x作为命名后缀 4、充分考虑每个控制按钮在4中状态下的样式移动APP设计过程中的要点在一个成熟且高效的移动APP产品团队中，UI设计师必须在前期就加入到项目设计中