《Photoshop 移动UI设计案例教程（全彩慕课版）（第2版）》课件 第1章 初识移动UI设计

本章介绍：随着2009年6月iPhone3GS的发布，移动UI设计正式进入了设计舞台，由于移动UI有着独特的交互特点，因此想要从事移动UI设计行业的人员需要系统地学习与更新自己的知识体系。本章对移动UI设计的概念、特点、原则、常用软件、学习方法以及App的基本概念、操作平台、设计流程、基本分类进行系统讲解。通过本章的学习，读者可以对移动UI设计有一个系统的认识，有助于高效便利地进行后续的移动UI设计工作。第1章初识移动UI设计掌握移动UI设计的相关概念熟悉移动UI设计的操作平台熟悉移动UI设计的特点掌握移动UI设计的项目流程掌握移动UI设计的常用软件掌握移动UI设计的学习方法学习目标1.1

移动UI设计的相关概念UI设计的概念移动UI设计的概念App的概念用户界面（UserInterface，UI）设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅要保证界面的美观，更要保证交互设计（InteractionDesign,IxD）的可用性强，用户体验（UserExperience，UE/UX）的友好度高。1.1.1UI设计的概念移动UI设计是UI设计的一个分支，主要是指针对移动设备软件的交互操作逻辑、用户情感化体验、界面元素美观的整体设计。移动UI设计因其设备的独特性，较其他类型的UI设计具有更严格的尺寸要求及手机系统限制。1.1.2移动UI设计的概念App是应用程序Application的缩写，一般指智能手机的第三方应用程序。用户主要从应用商店下载App，比较著名的应用商店有苹果的AppStore、谷歌的GooglePlayStore等。1.1.3App的概念1.2

移动UI设计的操作平台iOS系统平台Android系统平台iOS是由美国苹果公司开发，专门用于苹果移动设备中的操作系统。iOS截止到2023年已经更新到了iOS17，不管是设备的改革还是系统的更新，iOS都为用户带来了全新的体验。对于UI设计而言，需要快速进行iOS设计规范相关知识的更新。本书在规范章节深入剖析了相关知识，帮助UI设计师进行知识的升级。1.2.1iOS系统平台Android系统是最初由安迪·鲁宾（AndyRubin）开发的，2005年8月被谷歌收购，2008年10月，第一款Android系统的智能手机发布。1.2.2Android系统平台1.设计极简随着全面屏手机的发行，移动设备的屏幕较之前在尺寸上有了较大的提升，但相对于PC和笔记本电脑还是较小。因此，要在有限的空间中进行元素的设计不宜太过复杂，不然不利于信息的传递。1.3移动UI设计的特点2.交互丰富2007年1月，乔布斯在旧金山发布了第一代iPhone，开启了移动设备的智能化。智能化的移动设备较之前传统手机拥有着更加友好的用户体验，这源于它的多点触摸屏和传感器。由此造就了手势交互、语音交互、重力感应交互等一系列更加丰富的交互方式。3.设计适配由于现有的智能手机、平板电脑型号呈现多样化，设计师在进行设计时，应充分考虑文字、图标、图像甚至是界面布局等适配的问题。就移动应用来说，设计师通常会选用一款常用的、方便适配的屏幕尺寸进行设计，而后不必再大规模对其他尺寸屏幕的界面进行重新布局，只需针对不同屏幕尺寸进行切图输出，然后再交由技术端进行适配即可。1.4移动UI设计的常用软件界面设计类软件动效设计类软件网页设计类软件3D渲染类软件思维导图设计类软件交互原型设计类软件1.PhotoshopPhotoshop，简称“PS”，是由Adobe公司开发和发行的图像处理软件，截止2023年，已经更新到CC2024。在Sketch出现之前，PS是大部分UI设计师进行界面设计的首选工具。1.4.1界面设计类软件2.SketchSketch是基于苹果电脑系统的一款收费型专业制作UI的工具，如为Sketch官方网站新功能介绍截图。相较PS，它是一款可以迅速上手的轻量级矢量设计工具，不仅UI设计师常用，就连产品经理和前端开发人员都能够迅速掌握，减少了沟通合作中的问题。3.IllustratorIllustrator，简称“AI”，是由Adobe公司开发和发行的矢量图形处理软件，截止2023年，已经更新到CC2024。AI在UI设计中除了被广泛应用于插画设计，在图标制作中也显示了超凡的性能。4.ExperienceDesignExperienceDesign，简称“XD”，是由Adobe公司开发和发行的集原型、设计和交互于一体的软件，并于2016年3月发布了正式预览版本。XD的简洁弥补了PS在制作UI方面的“臃肿”，同时它免费并兼容Windows和mac双平台的平民化特点又是Sketch无法比拟的。1.AfterEffectsAfterEffects，简称“AE”，是由Adobe公司开发和发行的图形视频处理软件，截止2023年，已经更新到CC2024。无论是经典的插件还是强大的表达式，都使得AE制作出来的动效变得细腻入微。1.4.2动效设计类软件2.PrinciplePrinciple是基于苹果电脑系统的一款收费型专业制作动效的工具。相较于AE性能综合、体量较大，Principle的优势在于上手容易、操作简单，而且它还能在计算机上实时预览，并在手机上进行交互，不像AE只能导出GIF动画和MP4视频，无法与手机交互。Dreamweaver，简称“DW”，开始由美国MACROMEDIA公司开发，2005年被Adobe公司收购。DW是一款集网页制作和管理网站于一身的网页代码编辑器，拥有所见即所得的功能特点。1.4.3网页设计类软件CINEMA4D，简称“C4D”，是德国MAXON公司开发的一款能够进行顶级建模、动画和渲染的3D动画软件。其功能非常强大，更能和PS、AI、AE等各类软件进行无缝结合。1.4.43D渲染类软件1.MindjetMindManagerMindjetMindManager，俗称“脑图”，又叫“心智图”，由美国Mindjet公司开发，不仅是一款可以创造、管理和交流思想的绘图软件，还是一款项目管理软件。1.4.5思维导图设计类软件2.XMindXMind同MindjetMindManager有着一样的功能，也是一款非常实用的商业思维导图软件。思维导图类软件在UI设计方面没有太大的区别，一般根据个人喜好来选用。1.AxureRPAxureRP，通常称为“Axure”，是一款专业的快速原型设计工具，于2021年开放了10.0的下载。在10.0的更新中，Axure对设计架构进行了颠覆式的改变，令软件的使用效率及体验友好度都大大幅增加。1.4.6交互原型设计类软件2.墨刀墨刀是国内开发的一款在线型原型设计工具，于2017年6月开放了V3版本的下载。在V3中，墨刀进行了全面更新，除了品牌和组件的升级优化，还支持了Sketch文件的导入并加入了工作流的功能，这使得墨刀更加强大。1.5

移动UI设计的项目流程分析调研交互设计交互自查界面设计界面测试设计验证移动设计的流程可以按照分析调研、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来进行。1.5

移动UI设计的项目流程App的设计是根据品牌的调性、产品的定位而进行的，不同定位的App，设计风格也会有区别。因此要先分析需求，了解用户特征，并进行相关竞品的调研，明确设计方向。1.5.1分析调研交互设计是对整个App设计进行初步构思和制定的环节。一般需要进行纸面原型设计、架构设计、流程图设计、线框图设计等具体工作。1.5.2交互设计交互设计完成之后，进行交互自查是整个App设计流程中非常重要的一个阶段。可以在执行界面设计之前检查出是否有遗漏的细节问题。1.5.3交互自查原型图审查通过后，就可以进入界面的视觉设计阶段了，这个阶段的设计图即产品最终呈现给用户的界面。界面设计要求设计规范，图片、内容真实，并运用墨刀、principle等软件制作成可交互的高保真原型以便后续的界面测试。1.5.4界面设计界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行相关的调整。1.5.5界面测试设计验证是最后一个阶段，是为App进行优化的重要支撑。在产品正式上线后，通过用户的数据反馈进行记录，验证前期的设计，并继续优化。1.5.6设计验证1.6

移动UI设计的学习方法软件学习开拓眼界临摹学习项目实战软件的学习是UI设计的刚需和基础，设计师即使有再好的想法，但不能通过软件制作出来也是徒劳。我们主要需要掌握的软件有Photoshop、Illustrator和AfterEffects，有条件的设计师还可以学习Sketch和Principle。1.6.1软件学习眼界的开拓至关重要，许多UI设计师无法做出美观的界面就是没有看到太多优秀的设计。第1种：阅读优秀设计师的文章，吸收优秀设计师的经验。第2种：阅读优秀书籍，系统的学习UI设计的相关知识和设计应用方法。第3种：欣赏优秀的作品。1.6