移动UI设计-项目化实战教程-赵峰-课件.pptxVIP

;

;目录;;UI（UserInterface，用户界面）设计是指对应用程序的人机交互、操作逻辑、界面美观的整体设计。从字面上看，用户界面由用户与界面两部分组成，但实际上还包括用户与界面之间的交互关系。

在通常意义上，UI是指人与信息交互的媒介，是信息产品的功能载体和典型特征。

好的UI设计不仅可以使应用程序更加有个性、有品位，还可以使应用程序的操作更加舒适、简单、自由，充分体现应用程序的定位和特点。;UI设计涉及的范围很广，主要包括移动端UI设计、PC端UI设计、游戏端UI设计和其他端UI设计。

移动端UI设计简称移动UI设计，是指智能手机、平板电脑中的AppUI设计。;;;1．图标;1．图标;2．按钮

按钮是用户界面中（无论是计算机桌面，还是移动用户界面）必备的交互元素，甚至可以说，如果页面中没有按钮，那么整个页面设计是不完整的。;（2）根据按钮的摆放位置，可以将按钮分为推荐操作按钮、次要操作按钮、吸底按钮、悬浮按钮等。;3．进度条

进度条主要用于在计算机处理任务时，以图片形式实时显示处理任务的速度、完成度、未完成任务量和可能需要的处理时间等，一般以条形显示。;;4．搜索框

搜索框实际上是输入域和提交按钮的组合。;;5.列表框

列表框是移动端App中常见的元素。用户可以从列表框中选择一个或多个选项。;在设计AppUI时，合理的布局可以让信息看起来层次分明，用户可以很容易地找到自己想要的信息，App的交流率和信息传递的效率也会大大提升。下面介绍AppUI设计中几种常用的布局方式。

;;;要开发一款App，必然会涉及AppUI设计，因为AppUI设计包括用户需求分析、用户行为分析及产品功能分析等。因此在App开发过程中，如果在前期就对AppUI做了详细的设计，那么在后期的开发中会事半功倍。

AppUI设计流程包括以下几个步骤。

;;;;设置尺寸标准和规范的原因如下。

解决在多人协作时，同一个控件尺寸及使用混乱的问题，保证设计的一致性。

与开发人员沟通协作，共同制订细则，提升链路间的工作效率。

保持产品的特??，增强用户认知，并且在后续迭代中不断强化。;当前智能手机的平台以iOS、Android（安卓）和HarmonyOS（鸿蒙）为主，这3个平台有各自的设计规范，分别是：

《iOS设计规范》

《Android设计规范》

《HarmonyOS设计规范》;;iPhone和iPad的界面尺寸如表1-1所示。;iPhone中的图标尺寸如表1-2所示。;AndroidSDK模拟机的界面尺寸如表1-5所示。;Android的图标尺寸如表1-6所示。

表1-6Android的图标尺寸;1．图标分类

根据不同的场景，可以将系统图标分为描边图标与填充图标，这两种图标使用同一种结构图形，具有统一的视觉体验。;根据不同的使用场景，还可以将图标分为单色图标和双色图标。;2．图标尺寸

系统图标设计以24vp为标准尺寸，中央的22vp为图标主要绘制区域，上下左右各留1vp作为空隙。

3．图标特征

?描边大小：1.5vp。

?终点样式：圆头。

?外圆角：4vp。

?内圆角：2.5vp。

?断口宽度：1vp。;;1．简介

AdobePhotoshop通常称为Photoshop，简称PS，是由AdobeSystems开发和发行的图像处理软件，主要用于处理由像素构成的数字图像。Photoshop使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。Photoshop有很多功能，在图像、图形、文字、视频、出版等方面都有涉及。2003年，AdobePhotoshop8更名为AdobePhotoshopCS。2013年7月，Adobe公司推出了新版本的PhotoshopCC，自此，PhotoshopCS6作为AdobeCS系列的最后一个版本被CC系列取代。

截至2021年11月，AdobePhotoshop2022为市场最新版本。Adobe支持Windows操作系统、Android操作系统与macOS，但Linux操作系统用户可以通过使用Wine运行Photoshop。;2．应用领域

;3．功能

Photoshop的功能包括图像编辑、图像合成、校色与调色、特效制作等。