UI第1章初识移动UI设计课件

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

2、移动UI设计的学习方法掌握App的的基本概念了解App的操作平台熟练App的设计流程了解App的基本分类学习目标掌握UI设计的的相关概念学习目标移动UI设计属于UI设计的一个分支，想要系统全面的认识移动UI设计，需要对UI设计的相关概念以及移动UI设计的概念、特点、原则、常用软件、学习方法这几个方面进行学习。1.1 认识移动UI设计移动UI设计属于UI设计的一个分支，想要系统全面的认识移动UUI即User Interface（用户界面）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅要保证界面的美观度，更要保证了交互设计（英文Interaction Design,

3、 缩写IxD）的可用性及用户体验（User Experience，简称UE/UX）的友好度。在设计领域，UI现在被广泛分为WUI和GUI。WUI全称Web User Interface，即网页界面。在企业中，WUI设计师主要从事PC端网页设计的工作。GUI全称Graphical User Interface，即图形用户界面。因为移动端包含大量图形用户界面，因此在企业中，GUI设计师主要从事移动端App的设计工作 1.1.1 UI设计的相关概念UI即User Interface（用户界面）的简称，是指对移动UI设计是UI设计的一个分支，主要是指针对移动设备软件的交互操作逻辑、用户情感化体验、界面

4、元素美观的整体设计。移动UI设计因其设备的独特性，较其他类型的UI设计具有更严格的尺寸要求及手机系统限制。从设计范畴来看，移动UI设计主要体现在移动应用界面设计、移动端网页界面设计、微信小程序设计及H5设计等。 1.1.2 移动UI设计的概念 美国设计师Andrea Hock创作的App（左）微信跳一跳小程序（中） 网易新闻小易游戏机H5（右）移动UI设计是UI设计的一个分支，主要是指针对移动设备软件的1.设计极简虽然随着iPhone XS Max、华为Mate 20系列等全面屏手机的发行，移动设备的屏幕较之前在尺寸上有了较大的提升，但相对于PC和笔记本电脑还是较小。因此要在有限的空间中进行元

5、素的设计不宜太过复杂，不然不利于信息的传递。纵观移动UI的设计发展亦是从拟物化到扁平化，甚至为了更好的进行信息展示，iOS11之后的设计风格都围绕着“大而粗、简而美”的原则进行界面设计。 1.1.3 移动UI设计的特点 美国设计师Johny vino创作1.设计极简 1.1.3 移动UI设计的特点 美国设2.交互丰富由于现在市场中智能手机、平板电脑型号的碎片化及多样化，设计师在进行设计时，应充分考虑到文字、图标、图像甚至是界面布局等适配的问题。拿移动应用来说，设计师通常会选用一款常用的、方便适配的屏幕尺寸进行设计，而后不必再大规模对其他尺寸屏幕的界面进行重新布局，设计师只需针对不同屏幕尺寸进行

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

7、Android系统，因此可以根据iOS系统下的设计原则以及Android系统下MaterialDesign语言中的设计原则进行设计。1.iOS设计原则iOS系统设计有清晰、遵从、深度三大原则。2.MaterialDesign设计原则MaterialDesign语言有材质隐喻、大胆夸张、动效表意、灵活、跨平台五大原则。 1.1.4 移动UI设计的原则 在进行移动UI设计时需要遵循iOS系统和Android系统， 1.1.5 移动UI设计的常用软件 UI设计常用软件可以通过界面设计、动效设计、网页设计、3D渲染、思维导图、交互原型这6个方面进行介绍。 1.1.5 移动UI设计的常用软件 UI设计常

8、用软1.界面设计类：PhotoshopPhotoshop，简称“PS”，是由Adobe公司开发和发行的图像处理软件，截止2018年10月，已经更新到CC2019。在Sketch出现之前，PS是大部分UI设计师进行界面设计的首选工具。 1.1.5 移动UI设计的常用软件 Photoshop工作区界面截图1.界面设计类： 1.1.5 移动UI设计的常用软件 SketchSketch是基于苹果电脑系统的一款收费型专业制作UI的工具。相较PS，它是一款可以迅速上手的轻量级矢量设计工具，不仅对UI设计师，就连产品经理和前端开发都能够迅速掌握，减少了沟通合作的问题。 Sketch工作区界面截图1.1.5

9、移动UI设计的常用软件Sketch Sketch工作区界面截图1.1.5IllustratorIllustrator，简称“AI”，是由Adobe公司开发和发行的矢量图形处理软件，截止2018年10月，已经更新到CC2019。AI在UI设计中除了被广泛应用于插画设计，在图标制作中也显示了超凡的性能。 Illustrator工作区界面截图1.1.5 移动UI设计的常用软件Illustrator Illustrator工作Experience DesignExperience Design，简称“XD”，是由Adobe公司开发和发行的集原型、设计和交互于一体的软件，并于2016年3月发布了正式预览

10、版本。XD的简洁既弥补了PS制作UI方面时的臃肿，同时它免费并兼容Windows和mac双平台的平民化又是Sketch无法比拟的。 Experience Design工作区界面1.1.5 移动UI设计的常用软件Experience Design Experie2.动效设计类：AfterEffectsAfterEffects，简称“AE”，是由Adobe公司开发和发行的图形视频处理软件，截止2018年10月，已经更新到CC201。无论是经典的插件还是强大的表达式，都使得AE制作出来的动效变得细腻入微。 After Effects工作区界面截图1.1.5 移动UI设计的常用软件2.动效设计类： A

11、fter Effects工作区界PrinciplePrinciple是基于苹果电脑系统的一款收费型专业制作动效的工具。较AE的综合及体量，它的优势更在于上手容易、操作简单，而且它还能在电脑上实时预览并在手机上进行交互，不像AE智能导出GIF动画和MP4视频，无法交互。 Principle工作区界面1.1.5 移动UI设计的常用软件Principle Principle工作区界面13.网页设计类：DreamweaverDreamweaver，简称“DW”，开始由美国MACROMEDIA公司开发，2005年被Adobe公司收购。DW是一款集网页制作和管理网站于一身的网页代码编辑器，而且它还拥有着所

12、见即所得的功能特点。 Dreamweaver工作区界面截图1.1.5 移动UI设计的常用软件3.网页设计类： Dreamweaver工作区界面截Hype3Hype3是基于苹果电脑系统的一款收费型专业制作网页设计的工具,它主要优势体现在能帮助不会编程的设计师轻松创建HTML5和复杂的动画效果。在响应式方面Hype3有着特别优秀的表现。 Hype3工作区界面1.1.5 移动UI设计的常用软件Hype3 Hype3工作区界面1.1.5 移动4.3D渲染类：CINEMA 4DCINEMA 4D,简称“C4D”，是德国MAXON开发的一款能够进行顶级的建模、动画和渲染的3D动画软件。其功能非常强大更能和

13、PS、AI、AE等各类软件进行无缝结合。近些年被UI设计师大量追捧，通过C4D设计出来的作品被广泛运用到Banner、专题页以及活动页等。 CINEMA 4D工作区界面1.1.5 移动UI设计的常用软件4.3D渲染类： CINEMA 4D工作区界面1.15.思维导图类：Mindjet MindManagerMindjet MindManager，俗称“脑图”，又叫“心智图”， 由美国Mindjet公司开发的一款不仅可以创造、管理和交流思想的绘图软件，更能方便使用的项目管理软件。 Mindjet MindManager工作区界面1.1.5 移动UI设计的常用软件5.思维导图类： Mindjet

14、MindManagXMindXMind,同Mindjet MindManager有着一样的功能，也是一款常实用的商业思维导图软件。思维导图类软件对于UI设计方面没有太大区分，很多时候选择哪款软件的使用都是根据个人喜好。 Xmind工作区界面1.1.5 移动UI设计的常用软件XMind Xmind工作区界面1.1.5 移动6.交互原型类：Axure RPAxure RP,通常称为“Axure”,是一款专业的快速原型设计工具,于2018年9月开放了9.0Beta的下载。在9.0的更新中Axure进行了颠覆式的设计架构，令软件的使用效率及体验友好度都大大幅增加。 Axure9.0工作区界面1.1.5

15、 移动UI设计的常用软件6.交互原型类： Axure9.0工作区界面1.1.墨刀墨刀是国内开发的一款在线型原型设计工具，于2017年6月开放了V3版本的下载。在V3中，墨刀进行了全面更新，除了品牌和组件的升级优化，还支持了sketch的导入及加入了工作流的功能，这使得墨刀更加强大。 墨刀工作区界面1.1.5 移动UI设计的常用软件墨刀 墨刀工作区界面1.1.5 移动UI设计的常对于UI设计的初学者来讲，首先要明确市场现在到底需要什么样的设计师，这样才能有针对性的地学习提升。结合市场需求，我们推荐下列学习方法：1.软件学习软件的学习是UI设计的刚需和基础，设计师即使有再好的想法，但不能通过软件制

16、作出来也是徒劳。要我们主要需要掌握的软件有Photoshop、Illustrator、AfterEffects、Axure RP和墨刀，有条件的设计师还可以学习Sketch和Principle。 1.1.6 移动UI设计学习方法 UI设计需掌握的主流软件对于UI设计的初学者来讲，首先要明确市场现在到底需要什么样的 1.1.6 移动UI设计学习方法 2.开拓眼界眼界的开拓至关重要，许多UI设计师无法做出美观的界面就是没有看到太多优秀的设计。这里推荐3种方法助力设计师开拓眼界。 1.1.6 移动UI设计学习方法 2.开拓眼界第1种:阅读优秀设计师的文章，吸收优秀设计师的经验。当然针对初学者而言首先

17、要学习规范类的文章，如iOS设计规范和Android设计规范，二者都可以在网上查到官方的设计指南。本书亦在第3章iOS系统界面设计和第4章 Android系统界面设计对其进行了深入剖析帮助设计师理解。 1.1.6 移动UI设计学习方法 iOS设计规范（左）Android设计规范（右）第1种:阅读优秀设计师的文章，吸收优秀设计师的经验。当然针对第2种:阅读优秀书籍，系统的学习UI设计的相关知识和设计应用方法。大家可以通过网上输入关键词查找到所需书籍。通过阅读图书的内容提要和目录了解书籍的内容和特色，并通过购买所需书籍来进行全面的学习。第3种:欣赏优秀的作品，建议设计师每天拿出1-2小时到UI中国

18、、站酷（ZCOOL）、追波(Dribbble)这些网站浏览最新的作品，并加入收藏，形成自己的资料库。 1.1.6 移动UI设计学习方法 网站推荐第2种:阅读优秀书籍，系统的学习UI设计的相关知识和设计应用 1.1.6 移动UI设计学习方法 3.临摹学习眼界开拓后，需要进行相关的设计临摹。临摹的来源首先推崇的是从应用中心下载优秀的APP，截图保存进行临摹，其次可以从第2步开拓眼界中的优秀案例进行临摹。临摹一定要保证完全一样并且要多临摹。 1.1.6 移动UI设计学习方法 3.临摹学习 1.1.6 移动UI设计学习方法 4.项目实战经过一定的积累，最好通过一套完整的企业项目来提升。从原型图到设计稿

19、再到切图标注，甚至可以制作成动效Demo。一整套项目的实战，会让我们在设计能力上有质的提升。 1.1.6 移动UI设计学习方法 4.项目实战App的基本概念App的操作平台App的设计流程App的基本分类1.2 认识AppApp的基本概念1.2 认识AppApp是应用程序Application的缩写，一般指智能手机的第三方应用程序。用户下载App主要从应用商店，比较著名的应用商店有苹果的App Store，谷歌的Google Play Store。应用程序的运行与系统密不可分，目前市场上，主要的智能手机操作系统有苹果公司的iOS系统和谷歌公司的Android系统。对于UI设计师而言，要进行移动

20、界面设计工作，需要分别学习两大系统的界面设计知识。 1.2.1 App的基本概念由美国设计团队Ron Design Agency创作App是应用程序Application的缩写，一般指智能手机App的操作平台可以分为iOS 和Android两大平台。1.iOS系统平台1.2.2 App的操作平台iOS是由美国苹果公司开发，专门用于苹果移动设备下的操作系统。iOS截止到2019年已经更新到了iOS12，不管是设备的改革还是系统的更新，iOS都为用户带来了全新的体验。对于UI设计来言，需要快速进行iOS设计规范相关知识的更新。本书在规范章节深入剖析了相关知识，帮助UI设计师进行知识的升级。iOS系

21、统平台App的操作平台可以分为iOS 和Android两大平台。12.Android系统平台Android系统是最初由安迪鲁宾（Andy Rubin）开发，2005年8月被谷歌收购，2008年10月，第一款Android系统的智能手机发布。在2014年的GoogleI/O大会上，谷歌公司推出的全新的设计语言MaterialDesign，旨在规范Android系统的设备、媲美苹果的设计。截止到2019年，Android系统已经发布了Android 9.0操作系统，而2018年的GoogleI/O大会MaterialDesign也有了重大更新，这些都使得Android系统手机的使用愈发的流畅、统一

22、及美观。对UI设计师则面临着知识的更新及现有UI界面的再设计等挑战。本书将在Android系统界面设计章节深入剖析，帮助UI设计师顺利解决。1.2.2 App的操作平台2.Android系统平台1.2.2 App的操作平台App设计的流程可以按照分析调研、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来进行。1.2.3 App的设计流程App设计流程图App设计的流程可以按照分析调研、交互设计、交互自查、界面设1.分析调研App的设计是根据品牌的调性、产品的定位而进行，不同方向的App，设计风格也会有区别。因此先分析需求，了解用户特征，并进行相关竞品的调研，明确设计方向。1.2.3 A

23、pp的设计流程 QQ音乐 网易云音乐 虾米音乐1.分析调研1.2.3 App的设计流程 QQ音乐 2.交互设计交互设计是对整个App设计进行初步构思和制定的环节。一般需要进行纸面原型、架构设计、流程图设计、线框图设计等具体工作。1.2.3 App的设计流程 乌克兰UI/UX设计师Tatiana Lazarenko创作2.交互设计1.2.3 App的设计流程 乌克兰UI/U3.交互自查交互设计完成之后，进行交互自查是整个App设计流程非常重要的一个阶段。可以在执行界面设计之前检查出是否有遗漏缺失的细节问题。1.2.3 App的设计流程 交互自查3.交互自查1.2.3 App的设计流程 交互自查4

24、.界面设计原型图审查通过，就可以进入界面的视觉设计阶段，这个阶段的设计图即产品最终呈现给用户的界面。界面设计要求设计规范、图片、内容真实，并运用墨刀、principle等软件制作成可交互的高保真原型以便后续的界面测试。1.2.3 App的设计流程 乌克兰设计师StasAristov、AlyaPrigotska、Thanh Do联合创作 4.界面设计1.2.3 App的设计流程 乌克兰设计师S5.界面测试界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行相关的调整。1.2.3 App的设计流程 越南设计师Tran Mau Tri

25、Tam进行App细节调整5.界面测试1.2.3 App的设计流程 越南设计师Tr6.设计验证设计验证是最后一个阶段，是为App进行优化的重要支撑。在产品正式上线后，通过用户的数据反馈进行记录，验证前期的设计，并继续优化。1.2.3 App的设计流程 XToken0 x设计师创作6.设计验证1.2.3 App的设计流程 XToken01.2.4 App的基本分类 常用App主要可以分为社区交友、影音娱乐、休闲娱乐、生活服务、旅游出行、电商平台、金融理财、健康医疗、学习教育、资讯阅读这10类。1.2.4 App的基本分类 常用App主要可以分为社区1.社区交友社区交友App，即通过互联网实现交际往

26、来。常用的社交App有微信、QQ、新浪微博等。1.2.4 App的基本分类 QQ（左）微信（中）新浪微博（右）APPStore中的截图1.社区交友1.2.4 App的基本分类 QQ（左）微信2.影音娱乐影音娱乐App，即通过互联网上的电影电视、音乐MV以及小视频进行娱乐放松。常用的影音娱乐App有抖音短视频、腾讯视频、网易云音乐等。1.2.4 App的基本分类 抖音短视频（左）腾讯视频（中）网易云音乐（右）APPStore中的截图2.影音娱乐1.2.4 App的基本分类 抖音短视频（3.休闲娱乐休闲娱乐App，即通过互联网进行找寻餐厅、购买影票以及制作美食等活动进行放松休闲。常用的休闲娱乐App有大众点评、猫眼电影、下厨房等。1.2.4 App的基本分类 大众点评（左）猫眼电影（中）下厨房（右）APPStore中的截图3.休闲娱乐1.2.4 App的基本分类 大众点评（左）4.生活服务生活服务App，主要通过互联网为用户提供外卖订菜、求职招聘以及城市出行等相关服务。常用的生活服务App有饿了么、Boss直聘、摩拜单车等。1.2.4 App的基本分类 饿了么（左）Boss直聘（中）摩拜单车（右）APPStore中的截图4