Photoshop CC 移动UI设计案例教程全套教学课件.pptx

全套可编辑PPT课件;第1章初识移动UI设计;掌握UI设计的的相关概念

掌握移动UI设计的的概念

了解移动UI设计的的特点

掌握移动UI设计的的原则

熟练移动UI设计的的常用软件

掌握移动UI设计的学习方法

掌握App的的基本概念

了解App的操作平台

熟练App的设计流程

了解App的基本分类;移动UI设计属于UI设计的一个分支，想要系统全面的认识移动UI设计，需要对UI设计的相关概念以及移动UI设计的概念、特点、原则、常用软件、学习方法这几个方面进行学习。;UI即UserInterface（用户界面）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅要保证界面的美观度，更要保证了交互设计（英文InteractionDesign,缩写IxD）的可用性及用户体验（UserExperience，简称UE/UX）的友好度。

在设计领域，UI现在被广泛分为WUI和GUI。WUI全称WebUserInterface，即网页界面。在企业中，WUI设计师主要从事PC端网页设计的工作。GUI全称GraphicalUserInterface，即图形用户界面。因为移动端包含大量图形用户界面，因此在企业中，GUI设计师主要从事移动端App的设计工作

;移动UI设计是UI设计的一个分支，主要是指针对移动设备软件的交互操作逻辑、用户情感化体验、界面元素美观的整体设计。移动UI设计因其设备的独特性，较其他类型的UI设计具有更严格的尺寸要求及手机系统限制。

从设计范畴来看，移动UI设计主要体现在移动应用界面设计、移动端网页界面设计、微信小程序设计及H5设计等。

;1.设计极简

虽然随着iPhoneXSMax、华为Mate20系列等全面屏手机的发行，移动设备的屏幕较之前在尺寸上有了较大的提升，但相对于PC和笔记本电脑还是较小。因此要在有限的空间中进行元素的设计不宜太过复杂，不然不利于信息的传递。纵观移动UI的设计发展亦是从拟物化到扁平化，甚至为了更好的进行信息展示，iOS11之后的设计风格都围绕着“大而粗、简而美”的原则进行界面设计。;2.交互丰富

由于现在市场中智能手机、平板电脑型号的碎片化及多样化，设计师在进行设计时，应充分考虑到文字、图标、图像甚至是界面布局等适配的问题。拿移动应用来说，设计师通常会选用一款常用的、方便适配的屏幕尺寸进行设计，而后不必再大规模对其他尺寸屏幕的界面进行重新布局，设计师只需针对不同屏幕尺寸进行切图输出，然后再交由技术端进行适配。;3.设计适配

由于现在市场中智能手机、平板电脑型号的碎片化及多样化，设计师在进行设计时，应充分考虑到文字、图标、图像甚至是界面布局等适配的问题。拿移动应用来说，设计师通常会选用一款常用的、方便适配的屏幕尺寸进行设计，而后不必再大规模对其他尺寸屏幕的界面进行重新布局，设计师只需针对不同屏幕尺寸进行切图输出，然后再交由技术端进行适配。;在进行移动UI设计时需要遵循iOS系统和Android系统，因此可以根据iOS系统下的设计原则以及Android系统下MaterialDesign语言中的设计原则进行设计。

1.iOS设计原则

iOS系统设计有清晰、遵从、深度三大原则。

2.MaterialDesign设计原则

MaterialDesign语言有材质隐喻、大胆夸张、动效表意、灵活、跨平台五大原则。

;;1.界面设计类：

·Photoshop

Photoshop，简称“PS”，是由Adobe公司开发和发行的图像处理软件，截止2018年10月，已经更新到CC2019。在Sketch出现之前，PS是大部分UI设计师进行界面设计的首选工具。;·Sketch

Sketch是基于苹果电脑系统的一款收费型专业制作UI的工具。相较PS，它是一款可以迅速上手的轻量级矢量设计工具，不仅对UI设计师，就连产品经理和前端开发都能够迅速掌握，减少了沟通合作的问题。;·Illustrator

Illustrator，简称“AI”，是由Adobe公司开发和发行的矢量图形处理软件，截止2018年10月，已经更新到CC2019。AI在UI设计中除了被广泛应用于插画设计，在图标制作中也显示了超凡的性能。;·ExperienceDesign

ExperienceDesign，简称“XD”，是由Adobe公司开发和发行的集原型、设计和交互于一体的软件，并于2016年3月发布了正式预览版本。XD的简洁既弥补了PS制作UI方面时的臃肿，同时它免费并兼容Windows和mac双平台的平民化又是Sketch无法比拟的。;2.动效设计类：

·AfterEffects

AfterEffects，简称“AE”，是由Adobe公司开发和发行的图形视频处理软件，截止2018年10月，已经更新到CC201。