PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第1章.docx

教案编号：1课题：第1章初识Ul设计课时：2课时授课类型：讲授教学目标： 了解Ul设计行业的现状 掌握UI设计的基本概念 熟悉Ul设计项目流程 了解Ul设计不同的风格表现 掌握Ul设计的学习方法教学重点：Ul设计的基本概念、UI设计的学习方法教学难点：UI设计的基本概念、UI设计的学习方法本章技能点：UI设计不同的风格表现本章教学技巧，知识讲解教学过程:（一）课前准备1 .授课前准备准备好教学用具和教学设备2 .板书课题：第1章初识Ul设计项目目标： 了解UI设计行业的现状 掌握Ul设计的基本概念 熟悉Ul设计项目流程 了解Ul设计不同的风格表现 掌握Ul设计的学习方法3.课程引入通过不同的App界面引入Ul设计的概念。100%92lfoMole*AemM<StocksGaHWCEIer59NWMtM11dPassbookSttAQ,Ctoc*mwVWcoj_0001二型 .一»&i口31SjMdAhVertoa>IoellP(二)课程内容1.1 UI设计的相关概念UI设计的相关概念包括了Ui设计的基本概念、Ul与WUl和GUI的关系以及Ul设计的常用术语和常用软件。1.1.1 Ul设计的概念Ul即USerlnterfaCe(用户界面)的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。优秀的Ul设计不仅要保证界面的美观,更要保证交互设计(InteractionDesign,IxD)的可用性及用户体验(UserExperience,UE/UX)的友好度，如图所示。App界面展示1.1.2 Ul与WUl和GUl在设计领域，Ul现在被广泛分为WUI和GUIeWUI全称WebUserInterface,即网页界面。在企业中，WUI设计师主要从事PC端网页设计的工作。GUI全称GraphicalUserInterface,即图形用户界面。因为移动端包含大量图形用户界面，因此在企业中，GUl设计师主要从事移动端APP的设计工作，如图12所示。WUI(左)GUI(右)1.1.3 Ul设计常用术语中英文对照UI：(UserInterface)用户界面。GUI:(GraphicsUserInterface)图形用户界面。HUI:(HandsetUserInterface)手持设备用户界面。WUI：(WebUserInterface)网页风格用户界面。IA:(InformationArchitect)信息架构。UX/UE:(UserExperience)用户体验。IxD:(InteractionDeSign)交互0UED:(UserExperienceDesign)用户体验设计。UCD:(UserCenteredDesign)以用户为中心的设计。UGD:(UserGrowthDesign)用户增长设计。UR:(UserResearch)用户研究。PM:(ProductManager)产品经理。1.1.4 Ul设计常用软件下图所示的软件是结合了软件的专业性、市场的认可度及用户的使用量等因素总结出的常用软件。还有一部分专业性和功能都不错的软件，但由于篇幅限制不再详细剖析。如果有特别喜爱、崇尚软件技术流的设计师可以通过网络进行研究。但以上软件如果能够掌握，完全可以胜任Ul设计技术方面的工作。针对初学者，建议先掌握Photoshop和Illustrator,有条件的话还要掌握SketcheUl设计常用软件分类1.2 Ul设计项目流程无论是从0开始打造一个产品，还是对产品进行迭代更新，一定要有不同技能的角色分工合作。想要保证以最高效的方式做出具备市场竞争力的产品，就一定需要规范的设计福呈。1.2.1 项目设计流程针对整个产品的设计流程而言,Ul设计仅是其中的一部分。一个产品从启动到上线，会经历多个环节、由多个角色共同协作完成。每个角色基本都会有对应的1个或多个环节，如图所示。上图为大流程，下图为展开流程，下图中的橙色为多个角色共同协作完成1.2.2 Ul设计流程Ul设计师(USerInterfaCeDesigner,UID),是公司中专门负责界面设计的职位。其负责的具体内容包括界面设计、切图标注、动效制作等，Ul设计师的主要交接文件是设计稿件与切图标注。随着UI设计的不断发展，Ul设计师的工作已不局限于原先单纯的视觉执行层面，而是参与到了更多的产品设计环节中。由于职位对应的工作内容日趋多元化，UI工作环节甚至可以分出更为细致的工作流程,如图所示。视觉设计设计评审设计定位设it制作设计评估ui设计流程图1.3 UI设计的风格表现Ul设计的风格在2017年由拟物化为主转化到了以扁平化为主,因此UI设计的风格主要可以分为拟物化和扁平化两大类，如图所示。拟物化（左）扁平化（右）1,拟物化风格拟物化风格主要通过高光、纹理、阴影等效果模拟现实物品的造型和质感，将实物在Ul设计中再现，如图所示。拟物化图标优点:识别度高，用户的学习成本低。视觉震摭，在屏幕中模拟实物效果往往会带来较强的质感。体验良好，可以令用户与真实世界联系。缺点:设计费时，需要花费设计师大员的时间。功能较弱，过分强调拟物效果，忽视Ul界面的功能。占据内存，拟物化转化为图片占用大量的加教时间。2.扁平化风格扁平化风格去除了诸如透视、纹理、渐变等冗余、厚重和繁杂的装饰效果，运用抽象、极简和符号化的设计元素进行表现，如图所示。优点:高效便捷，扁平化设计具备一致性和适应性，因此设计更加便捷。信息突出，减少用户认知障碍，产品更加易用。简约清晰，比起拟物化的沉重，扁平化的轻量设计使界面焕然一新。缺点:缺乏情感，界面传递情感有时会过于冰冷。不够直观，用户需要一定的学习成本。体验降低，扁平化的带入感较弱。1.4 UI设计的行业发展国内Ul设计行业历经了10年的发展，从相关岗位、能力要求以及薪资待遇等各方面都产生了巨大的变化。想要进入Ui设计行业，要先了解Ul设计行业的现状及发展趋势。1.4.1 Ul设计行业现状随着近10年的发展，国内Ul设计的市场规模不断扩大，UI设计师的需求亦越发庞大,高级Ul设计的专业人才紧缺。企业需求从原先单一地重视视觉美观度已经提升到了关注产品整体的用户体验。国内诸如阿里巴巴、腾讯、网易等大型互联网公司，都各自成立了用户体验设计部门，如图所示，吸纳了众多UI设计类人才。codTencentIUOUuclc网.巴巴"UE。I网易用户体抬设计中心大型互联网公司1 .地域特征由于政策引进、网络发展和人才聚集等原因，我国UI设计行业有着强烈的地域特征。目前，Ul设计行业发展最为突出的地区依然是北京，其次是上海，深圳与杭州是仅次于北京、上海的热门地区，如图1-10所示。2 .行业分布大部分UI设计师都在互联网公司从业，不少传统行业的公司也已经融入了互联网技术,并开始招聘Ul设计师，向互联网+的方向发展，如图所示。UI设计行业分布3 .岗位细分得益于UI设计行业的加速发展，UI设计相关的岗位变得越来越细分化,演变出了不少新的岗位，如图所示。产品经理Product Manager, 简称-PM",是公 司中专门负责产品 大方向管理的职位。用户体验设计师User Experience Design, D 称,UE" 或mUX",贯穿整个 项目，是与产品、设 计、运营、开发等团 队密切沟通的职位。交互设计师Interaction Design, 是公司中专门负责产 品与用户之间交互工 作的职位。UI设计师User Interface Designer, D 称 mUIDw,是公司中专 门负责界面设计风 格的职位运营设计师OperationDesigner, 是公司中计对产品的 推广和服务而进行设 计方面的职位。动效设计师AnimationDesigner, 是公司中完成元素与 页面间动效动画的创 意与制作，保证视觉 呈现效果的Ul设计岗位细分4 .能力需求近年来，UI设计的能力需求早已从基础的视觉规范、界面美观上升到了产品的交互设计、用户体验层面，"全栈设计师"和"全链路设计师”的概念亦顺应能力需求而提出。Ul设计师对能力的综合性需求越来越高，如图所示。软件技能专业知识沟通分析团队协作Photoshop, Sketch, Illustrator. Axure AfterEffects 等。设计理论、风格定 位、趋势分析、用 户研究等。 一需求理解、观点表 达、团队配合、项 目阐述等。 .任务执行、助力团 队、项目管理、部 门分享等。 一能力需求5 .薪酬待遇以热门城市为基准，UI设计师月薪在8000元以上的超过50%,如图所示。影响UI设计师薪资的因素主要有工作岗位、过往经历、从业年限等。1.4.2Ul设计发展趋势从早期的专注于工具的技法型表现,到现在要求UI设计师参与到整个商业链条,兼顾商业目标和用户体验，可以看出国内的UI设计行业发展是跨跃式的。Ul设计从设计风格、技术实现到应用领域都发生了巨大的变化，如图所示。Ul设计发展趋势1 ,技术实现虚拟现实、增强现实及人工智能等技术的发展，使得Ul设计更加高效,交互亦更为丰富。2 .设计风格UI设计的风格经历了由拟物化到扁平化设计的转变，现在扁平化风格依然为主流，但加入了MaterialDesign设计语言（材料设计语言，是由Google推出的全新设计语言），使设计更为醒目且细腻。3 .应用领域Ul设计的应用领域已由原先的PC端和移动端扩展到可穿戴设备、无人驾驶汽车、Al机器人等，更为广阔。今后无论技术如何进步，设计风格如何转变，甚至于应用领域如何不同，Ul设计都将参与到产品设计的整个链条中，实现人性化、包容化、多元化的目标。1.5Ul设计的学习方法对于Ul设计的初学者来讲，首先要明确市场现在到底需要什么样的设计师，这样才能有针对性地学习提升。结合市场需求，我们推荐下列学习方法。1 .软件学习软件的学习是Ui设计的刚需和基础，设计师即使有再好的想法，但不能通过软件制作出来也是徒劳。我们主要需要掌握的软件有PhotoShop、IlIUStrator、AfterEffects.AXUreRP和墨刀，有条件的设计师还可以学习Sketch和Principle,如图所示。PSIAilAe隰UI设计需掌握的主流软件2 .开拓眼界眼界的开拓至关重要，许多Ui设计师无法做出美观的界面就是没有看到太多优秀的设计。这里推荐3种方法助力设计师开拓眼界。第1种：阅读优秀设计师的文章，吸收优秀设计师的经验。当然针对初学者而言首先要学习规范类的文章，如QS设计规范和Android设计规范，二者都可以在网上查到官方的设计指南，如图所示。本书亦在3.2APP设计的规范对其进行了深入剖析帮助设计师理解。第2种：阅读优秀书籍，系统的学习UI设计的相关知识和设计应用方法。大家可以通过网上输入关键词查找到所需书籍。通过阅读图书的内容提要和目录了解书籍的内容和特色，并通过购买所需书籍来进行全面的学习。第3种：欣赏优秀的作品，建议设计师每天拿出12小时到UI中国、站酷(ZCOOLX追波(Dribbble)这些网站浏览最新的作品，并加入收藏,形成自己的资料库。中国£网站推荐3 .临摹学习眼界开拓后，需要进行相关的设计临摹。临摹的来源首先推崇的是从应用中心下载优秀的App,截图保存进行临摹，其次可以从第2步开拓眼界中的优秀案例进行临摹。临摹一定要保证完全一样并且要多临摹。4 .项目实战经过一定的积累，最好通过一套完整的企业项目来提升。从原型图到设计稿再到切图标注，甚至可以制作成动效Dem0。一整套项目的实战，会让我们在设计能力上有质的提升。