《UI界面设计》课件第四章 UI界面设计之移动界面设计.pptx

UIDESIGN主编：殷辛、李茜

UIDESIGN第一节了解App界面设计第二节iOS系统界面尺寸及控件设计规范第三节Android系统界面尺寸及控件设计规范第四节交互式图标设计与制作第五节扁平化移动界面设计与制作

一、什么是App？App是application（应用程序）的缩写，主要指安装在智能手机上的软件，用来完善原始系统的不足与个性化，使手机功能更完善，为用户提供更丰富的使用体验。比较著名的应用商店有苹果的AppStore、谷歌的GooglePlayStore、黑莓的BlackBerryAppWorld、微软的Marketplace等。

在移动端软件快速发展的形势下，软件的类型与功能日益细化、多元化，极大地满足了用户的不同需求。

例如在移动端应用商店中下载“小爱音箱”App，即可在手机上对小爱音箱进行操控。

二、移动端UI的设计趋势（一）界面风格趋势在界面风格上，移动端UI设计的主要趋势可分为扁平化方向、插画风方向、3D效果方向。微课视频

1.扁平化方向扁平化设计作为近几年UI界面的主流设计风格，将继续被广泛应用。扁平化的设计风格在发展过程中变得更加精致化、层次化，会将动态效果纳入设计考量中，再结合动效，在原有的清晰、简约的基础上增添了一些生动活泼的特点。

2.插画风方向近几年，插画手绘风格界面逐渐流行起来。

3.3D效果方向3D效果多用于游戏类界面设计中。

（二）形式与内容趋势1.卡片式设计卡片式设计的优势在于更直观的内容表达和快捷的跳转操作，整体更有层次感，运用起来更方便，在视觉、体验、交互等各方面拥有良好的用户体验。

2.无边框设计无论是PC端还是移动端，显示屏幕都在向大屏方向发展，界面设计则跟随屏幕的发展走向无边框化，去除了界面中的边框、分割线，用间距来区分内容。

3.分割线设计在界面设计中，最传统、最常见的分隔方式是“线”。它能起到分隔、组织、细化的作用，帮助用户了解界面层次，使界面信息具有条理。分割线包含全屏分割线与内嵌式分割线。

三、手机AppUI设计与平面UI设计的区别手机AppUI设计主要是手机App界面设计；平面UI设计的范围则非常广泛，包括绝大部分的UI设计，如车载系统界面设计、智能冰箱界面设计等。

四、移动App界面设计流程（一）工作描述设计师基于原型交互稿及产品需求文档来设计产品页面效果图，与产品经理深入沟通确定详细的交互细节及效果，与需求业务方确定并完善最终效果图，依据开发需求进行效果图细节标注，设计产品图标及应用市场审核宣传材料，配合市场运营部门设计产品运营活动页面等。

（二）工作要点用户分析，设计梳理。素材收集，确定风格。界面设计，规范输出。UE（用户体验）测试，整体复盘。

（三）交付成果交付成果包括PSD源文件、切图源文件、交互描述及标注细节规范说明。

五、App界面配色原则（1）设计色调统一。

（2）运用情感化色彩。

（3）采用标准界面。（4）考虑色盲、色弱用户需求。

（5）颜色方案的测试。由于显示器、显卡的不同，每台机器的色彩表现都不一样，所以应该通过不同机器对每套颜色方案进行严格测试。（6）遵循对比原则。对比原则简单来说就是浅色背景使用深色文字，深色背景使用浅色文字。（7）色彩类别的控制。整个界面中的颜色种类不宜太多，以免让人眼花缭乱，应尽量保持干净。

UIDESIGN第一节了解App界面设计第二节iOS系统界面尺寸及控件设计规范第三节Android系统界面尺寸及控件设计规范第四节交互式图标设计与制作第五节扁平化移动界面设计与制作

一、iOS系统概述iOS系统是苹果公司为其移动设备开发的操作系统，主要应用于iPhone、iPad以及iPodtouch等设备。iOS系统可以管理移动设备硬件并为设备本地应用程序的实现提供基础技术。微课视频

二、iOS系统用户界面元素（一）条栏条栏用来告诉用户他们处于应用程序中的什么位置，提供导航，可能包含按钮或其他元素来启动操作和交流信息。【微课视频】

1.状态栏状态栏在屏幕的上边缘，显示有关设备当前状态的有用信息，如时间、移动运营商、网络状态和电池电量。

2.导航栏导航栏在应用程序界面的顶部，在状态栏的下方，并允许通过一系列分层的屏幕导航。

3.搜索栏搜索栏允许用户通过输入文本来搜索大量的信息。搜索栏既可以单独显示，也可以在导航栏或内容视图中显示。

4.标签栏标签栏出现在应用程序界面的底部，能够在应用程序的不同部分之间快速切换。

5.工具栏工具栏包含用于执行与当前视图或其中内容相关的操作的按钮。工具栏是半透明的，可能有背景色。当用户不需要时，工具栏通常会隐藏起来。

（二）内容视图1.操作表操作表是响应控件或操作时出现的一种特定的警告样式，