Photoshop CC 2019图像处理基础教程（第7版） 软件拓展知识汇 1.1 移动UI设计的相关概念- 1.6 移动UI设计的学习方法

1122UIUIUIUIUI设计的概UI设计的概念、App的概念进行学习。UI用户界面（UserInterface，UI）设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计不仅要保证界面的美观，更要保证交互设计（InteractionDesign,IxD）的可用性强，用户体验（UserExperience，UE/UX）1-1所示。图1-1移动UIUIUI设计的一个分支，主要是指针对移动设备软件的交互操作逻辑、用户情感化体UIUI设计具有更严格的尺寸要求及手机系统限制。UIH51-2H5。图1-2AppApp是应用程序Application的缩写，一般指智能手机的第三方应用程序，如图1-3所示。用户主要从应用商店下载App，比较著名的应用商店有苹果的AppStore、谷歌的GooglePlayStore等。图1-3UIiOSAndroidUIiOSiOS是由美国苹果公司开发，专门用于苹果移动设备中的操作系统，如图1-1所示。iOS截止到2023iOS17，不管是设备的改革还是系统的更新，iOS都为用户带来了全新的体验。UIiOSUI设计师进行知识的升级。图1-1AndroidAndroid系统是最初由安迪（Andy810月，Android2014GoogleI/ODesignAndroidAndroid2023年，AndroidAndroid14.01-22021MaterialYou（MaterialAndroid系统手机的使用愈发的流畅、UIUIAndroidUIAndroid系统界面的设计知识。 图1-2移动I移动端界面的设计特点具体可以总结为设计极简、交互丰富以及设计适配3个方面。设计极简PC和笔记本电脑还是较小。因此，要在有限的空间中进行元素的设计不宜太过复杂，不然不利于信息的传递。UI111-1所示。图1-1交互丰富20071iPhone1-2所示通过点击、滑动等手势完成目标。因此，设计师在进行移动界面设计时还应充分考虑到这些人机交互的形式，提升用户参与产品使用的积极性，同时还要注意交互过程的简洁，方便用户顺利达成目标。图1-2设计适配1-3所示为不同的屏幕尺寸。图1-3UI移动UI设计常用软件可以分为界面设计、动效设计、网页设计、3D渲染、思维导图设计、交互原型设计这6种类型。界面设计类软件1.PhotoshopPhotoshop，简称“PSAdobe2023年，已经更新CC20241-1AdobePhotoshopSketch出现之前，PS是大部分UI设计师进行界面设计的首选工具。图1-12.SketchSketchUI1-2Sketch官方网站新PSUI设计师常用，就连产品经理和前端开发人员都能够迅速掌握，减少了沟通合作中的问题。图1-23.IllustratorIllustratorAdobe2023CC20241-3AdobeIllustrator新功能介绍截图。AIUI设计中除了被广泛应用于插画设计，在图标制作中也显示了超凡的性能。图1-34.ExperienceDesignExperienceDesign，简称“XDAdobe公司开发和发行的集原型、设计和交互于一体的软201631-4ExperienceDesign工作区界面。XD的简PSUIWindowsmac双平台的平民化特点又是Sketch无法比拟的。图1-41.AfterEffectsAfterEffects，简称“AEAdobe2023年，已CC1-5AdobeAfterEffectsAE制作出来的动效变得细腻入微。PAGEPAGE3PAGEPAGE4图1-52.PrinciplePrinciple1-6Principle工作AE性能综合、体量较大，Principle的优势在于上手容易、操作简单，而且它还能在AEGIFMP4图1-61.DreamweaverMACROMEDIAAdobe公司收购。DW是一款集网页制作和管理网站于一身的网页代码编辑器，拥有所见即所得的功能特点，如图1-7所示为Adobe公司官方网站Dreamweaver新功能介绍截图。图1-73D1.CINEMA4DCINEMA4D，简称“C4D”，是德国MAXON公司开发的一款能够进行顶级建模、动画和渲染的3D动画软件，如图1-8所示为CINEMA4D官方网站新功能介绍截图。其功能非常强大，更能和PS、AIAEUIC4D设计出来的作品被广Banner、专题页以及活动页等。图1-8思维导图设计类软件1.MindjetMindManagerMindjetMindManagerMindjet公司开发，不仅是一款1-9MindjetMindManager官方网站新功能介绍截图。图1-92.XMindXMindMindjetMindManager有着一样的功能，也是一款非常实用的商业思维导图软件，如图1-10XmindUI设计方面没有太大的区别，一般根据个人喜好来选用。图1-10交互原型设计类软件1.AxureRPAxure202110.0的下载。10.0的更新中，Axure对设计架构进行了颠覆式的改变，令软件的使用效率及体验友好度都大大幅1-11Axure10.0工作区界面。图1-112.墨刀20176V3V3中，Sketch文件的导入并加入了工作流的功1-12所示为墨刀工作区界面。图1-12PAGEPAGE1PAGEPAGE2移动I移动设计的流程可以按照分析调研、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来进行，如图1-1所示。图1-1分析调研AppApp，设计风格也会有区别，1-2App，但产图1-2交互设计App1-3所示。 图1-3交互自查交互设计完成之后，进行交互自查是整个App设计流程中非常重要的一个阶段。可以在执行界面设计之前检查出是否有遗漏的细节问题，如图1-4所示。图1-4界面设计原型图审查通过后，就可以进入界面的视觉设计阶段了，这个阶段的设计图即产品最终呈现给用户的界面。界面设计要求设计规范，图片、内容真实，并运用墨刀、principle等软件制作成可交互的高保真原型以便后续的界面测试，如图1-5所示。图1-5界面测试界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录，如图1-6所示。在测试中可以对设计的细节进行相关的调整。图1-6设计验证设计验证是最后一个阶段，是为App进行优化的重要支撑。在产品正式上线后，通过用户的数据反馈进行记录，验证前期的设计，并继续优化，如图1-7所示。图1-7PAGEPAGE122移动IUI软件学习UIPhotoshopIllustrator和AfterEffectsketchPrinciple1-1所示。图1-1开拓眼界UI3种方法助力设计师开拓眼界。1种：阅读优秀设计师的文章，吸收优秀设计师的经验。当然针对初学者而言首先要学习规范iOSAndroid1-2iOSAndroidMaterialDesign3iOS4Android系统界面设计中对其进行了深入剖析，以帮助设计师理解。图1-2图1-2（续）2UI31-2UI中国、站酷（ZCOOL）、花瓣这1-3所示，并加入收藏，形成自己的资