《UI设计项目教程（AI助创 微课版）》课件 项目一 初识UI设计

项目1初识UI设计UI设计项目教程（AI助创微课版）高等院校艺术设计精品系列教材CONTENTS1.1什么是UI设计1.2UI设计的基本原则1.3UI设计的常用工具1.4UI设计的基本流程1.5实践训练1.1.1

UI设计的基本概念UI是指用户与计算机或其他电子设备进行交互时所涉。及的界面，包括菜单、按钮、图标、文本、音频、视频等视听元素。UI设计是指对产品的人机交互、操作逻辑和界面表现等多个方面进行整体构思与设计，目的是优化用户体验，使用户能够直观地浏览界面，轻松地完成操作。UI设计主要包含以下3个方面。0102界面设计交互设计用户体验设计031.1.2UI设计的分类010203移动端App界面设计App是Application的简称，一般指在移动设备中使用的应用程序。随着

移动互联网的快速发展，智能手机成为人们日常生活中重要的组成部分，因此移动端App界面设计显得尤为重要。网页界面设计网站是在互联网上根据一定的规则，使用相关工具制作的用于展示特定内容的网页。网页界面设计是指根据特定内容和不同使用需求规划和美化网页，让网页内容更加丰富、美观、具有吸引力，从而引起用户的探索欲，同时让用户操作起来更方便、快捷，并更有效地接收网页所传达的信息。软件界面设计PC端软件的界面空间大，能承载更多内容，实现复杂的功能。软件界面设计主要针对PC端软件的界面进行设计，以满足专业化和标准化的需求。1.1.2UI设计的分类1.1.3

UI设计中尺寸的相关概念像素是屏幕上的最小显示单元，属于相对单位，随屏幕像素密度的变化而变化。像素英寸是设备屏幕对角线的长度单位，常说的14寸、27寸屏幕就是用此单位衡量的。英寸分辨率指单位长度内包含的像素数量，常用“像素/英寸”或“像素/厘米”表示。分辨率越高，图像越清晰。分辨率像素密度是屏幕分辨率的单位，表示每英寸屏幕的像素数量，常用于衡量iOS设备的屏幕清晰度。像素密度点是逻辑像素的单位，不随屏幕像素密度的变化而改变。pt与px的换算依赖于屏幕的像素密度，换算公式为：pt=(PPI/72)×px。点独立密度像素是Android设备上的基本单位，用于非文字元素，与iOS设备上的pt相似。dp与px的换算公式为：dp×(PPI/160)=px。独立密度像素独立缩放像素是Android设备上的字体单位。在默认的“正常”文字尺寸下，1sp等于1dp。独立缩放像素网点密度是打印分辨率的单位，表示每英寸打印的点数，多用于Android设备打印或扫描时的分辨率设置。网点密度1.1.4

UI设计的发展趋势AI技术一般是指模拟、延伸和扩展人类智能的理论、方法的技术手段。AI技术驱动创新随着大数据技术的发展，用户越来越关注个人数据的收集与使用，设计师有责任通过清晰的界面语言和交互设计，告知用户并获得其同意，倡导用户主权和选择自由。数据隐私与透明度通过优化图片和视频资源、简化动效、精简代码等方式，减少服务器资源消耗。可持续设计随着AR、VR和MR技术的成熟，UI设计不再局限于二维屏幕，“大屏幕”交互开始兴起。空间计算与三维交互遵循无障碍设计标准WCAG《网页内容无障碍指南》，确保色盲、视力障碍、听力障碍、行动障碍用户等有特殊需求的用户都能使用产品，满足用户的多样化需求。无障碍与包容性设计CONTENTS1.1什么是UI设计1.2UI设计的基本原则1.3UI设计的常用工具1.4UI设计的基本流程1.5实践训练1.2.1规范性UI设计的规范性是指在设计时遵循一套预先定义、统一的标准和规则，它涵盖色彩、字体、图标、布局、间距、组件、交互反馈等视觉和交互元素，其核心目标是保证产品内部及跨产品间的一致性。UI设计的规范性不仅是构建专业品牌形象、赢得用户信任的基础，更能通过可复用的组件和清晰的设计规范，极大地提升团队协作与开发效率。对用户而言，一致的交互逻辑与视觉语言能显著降低学习成本，让产品直观易用，从而提供高效、可靠的用户体验。1.2.2统一性UI不是一个单独的作品，而是一套由多个界面组成的作品。因此，为了让作品整齐有序、有逻辑、有关联，在进行UI设计时，对界面中的版式、文字大小与间距、色彩、风格、布局等元素，要做到基本统一和协调。例如，确定界面中的主色、辅助色和中性色，并规定其使用场景；确定界面中边距、间距、对齐方式的一致性；确定界面中的字号、字重、行高和字间距等。另外，设计师在进行交互设计时，其交互行为也需要保持统一，使类型相同的操作触发相似的反馈和动效。例如，所有界面的跳转动效都采用右滑进入、左滑返回，这种交互一致性让用户能准确预测操作的结果，产生掌控感和安全感。1.2.3层级性一般而言，层次分明、交互逻辑清晰的界面会让用户形成清晰的浏览次序，也会给用户带来良好的印象，而没有层级性的界面会让用户找不到内容重点，对界面感到困惑，从而产生不好的体验。因此，UI设计的层级性非常重要，设计师在进行UI设计时需要先梳理所有的内容，考虑信息之间的关联性，分清主次关系，然后按照一定的条理进行展示。一般来说，设计师可以从字体、色彩、图标等界面元素或用户浏览习惯入手，以突显界面内容的层级性。1.2.4易操作性由于用户会在UI中进行一定的交互操作，因此UI设计应符合用户的认知习惯和操作直觉，具有方便易用的特性，降低用户的交互难度和操作负荷，为用户带来便利，从而建立对品牌的信任。一般来说，UI设计的易操作性主要体现在进行交互操作的按钮上，如按钮与按钮之间需要保持合适的距离，同时能够引导用户进行操作。1.2.5适应性功能的适用性主要可分为两个方面，分别是实用功能的适用性和审美功能的适用性，二者相辅相成。功能的适用性UI设计会在不同设备中进行展示，很容易受到设备屏幕尺寸的限制，因此对于不同的设界会设计不同尺寸的界面，设计师在进行UI设计时需要注意尺寸的适用性。尺寸的适用性CONTENTS1.1什么是UI设计1.2UI设计的基本原则1.3UI设计的常用工具1.4UI设计的基本流程1.5实践训练1.3.1思维梳理类工具XmindWhimsicalXmind是专业的思维导图制作软件，其界面简洁、美观，功能全面，能帮助设计师快速将复杂的想法结构化，梳理功能模块之间的逻辑关系。Whimsical是一款功能强大的在线协作工具，以轻量、快速著称，可以创建流程图、线框图和思维导图，非常适合快速表达想法。TreeMind树图是一款在线的思维导图制作工具，支持多平台使用，

拥有庞大的知识导图搜索库和丰富的素材库，适合头脑风暴和创意规划。TreeMind树图1.3.2原型设计类工具Figma是一款基于云端的界面设计与原型开发工具，提供实时协作设计功能，而且支持多平台和跨设备无缝使用，特别适合远程团队和跨平台的设计项目。Pixso是一款在线设计工具，提供原型设计和协作功能。Pixso集成了高效的协作和开发交付功能，而且有海量的设计素材、模板、插件可供调用。墨刀是一款在线原型设计与协同工具，可以轻松地定制设计方案和管理UI设计资源，从操作上来说相对简单、方便，可以在线进行交互原型设计、标注切图、文件管理等操作，在很大程度上提高了工作效率。简称XD，是一款专门用于设计和制作原型的专业软件，集设计、协作功能于一体，可以方便、快速地和Adobe公司旗下其他设计软件结合使用。AxureRP是一款适用于复杂原型设计和交互设计的工具，具有强大的原型设计和逻辑控制功能，适合从小型App界面到大型网页界面的原型图绘制，尤其适用于需要进行复杂交互的大型项目。FigmaPixso墨刀AdobeExperienceDesignAxureRP04030201051.3.3界面设计类工具3.Sketch1.Photoshop0103Sketch是一款专业的矢量图形编辑软件，专注于UI设计和产品原型制作，可以帮助设计师快速创建高质量的设计元素。Photoshop是Adobe公司旗下的一款图像处理软件，主要用于处理以像素构成的数字图像，可以完成UI的合成、调整。02Illustrator是Adobe公司开发的一款矢量绘图软件，广泛应用于制作图标、绘制矢量图像等。2.Illustrator1.3.4动效设计类工具AdobeAfterEffects简称AE，是一款图形视频处理软件，功能非常强大，可用于制作界面中的各种动态图形和动画效果。1.AdobeAfterEffects12Principle是一款专业的交互设计软件，界面直观、操作方便，不仅可以帮助设计师快速创建丰富的动画效果，而且允许设计师为界面元素设置交互行为，如点击、滑动、拖曳等。3.Principle34AdobeAnimate简称An，是一款专业的动画制作软件,可以帮助设计师快速创建高质量的动画和动效。2.AdobeAnimateFramer是一款用于设计可交互原型和动效的软件，专注于创建可交互的原型，以及各种复杂的动效，但使用该软件需要设计师掌握一定的编程知识。4.Framer1.3.5

AIGC工具UI设计领域中的AIGC工具主要有AIGC写作类工具和AIGC绘画类工具。常用的AIGC写作类工具有文心一言、DeepSeek、Kimi、豆包等，能够帮助设计师快速获取灵感、梳理UI设计逻辑框架、撰写文案；常用的AIGC绘画类工具有万相即梦AI、可灵AI等，可以根据提示词生成高质量的图片、插画和图标素材，还可以智能化编辑图片，为UI设计提供灵感和视觉元素。CONTENTS1.1什么是UI设计1.2UI设计的基本原则1.3UI设计的常用工具1.4UI设计的基本流程1.5实践训练1.4.1设计需求分析1.市场需求市场需求包括市场背景、市场定位、现有产品数据、产品的运营与营利方式等。

2.用户需求用户需求包括两个方面，第一个方面是用户的显性需求，即用户的可视化特征，如用户的年龄、性别、职业、地域、兴趣爱好等；第二个方面是用户的隐性需求，即用户的内在特征，如产品的使用场景、用户对产品的需求、用户的情感等。3.产品需求产品需求既是产品的组成部分，又是产品最终要达到的目的。在分析产品需求时，设计师需要确定产品的功能与内容，即产品中有哪些界面、每个界面中有哪些内容、哪些界面是重点设计部分、选择哪种产品系统等。1.4.2信息架构梳理与流程图设计信息架构梳理是组织和分类信息的过程，将产品的内容和功能通过某种逻辑，找到相互的层级关系并对其进行归类、组织，形成一个有层次、有逻辑的结构，让用户能够快速定位和管理，确保用户能轻松找到他们想要的东西。1．信息架构梳理流程图是用特定的符号和说明文字，以及有方向的箭头表示流程走向的图。在UI设计中，流程图主要用来表示用户使用产品的某一流程所需要经历的所有步骤和可能路径。2．流程图设计1.4.3原型图绘制信息架构梳理与流程图设计结束后，设计师将根据信息架构和流程图绘制原型图。原型图是设计师对产品的初步构想，涉及产品内容和布局，绘制原型图的主要目的是将抽象的需求转化为具体的界面布局和交互流程。在绘制原型图前需要明确各界面的文案、图片、音效、交互、动效、视频等，确定每一个界面中的内容与布局，如果要求不高，可以找一些相关的图进行替代，重点是将想表达的思路阐述清楚。在原型图绘制过程中，设计师需要和程序员积极沟通，例如界面场景动效如何展示、技术上能否实现等，这样才能够确保后续工作顺利进行。1.4.4视觉设计设计师需要根据产品定位和用户需求，确定整体的视觉风格，如扁平风格、卡通风格等，同时选择合适的色彩和字体样式，以营造符合产品调性的视觉氛围。1．确定风格确定风格并完成素材的搜集后，可根据原型图与搜集的素材进行界面和动效设计。界面设计即创造美观且符合品牌调性的界面；动效设计即通过合理的动效引导用户的注意力，增强交互的直观性，提升用户体验的流畅感和愉悦感。3．界面和动效设计风格确定后，设计师需要根据风格搜集合适的素材，主要包括图像、视频和音效，以及文字类信息等。●

图像、视频和音效。在进行UI设计时，通常需要使用很多素材来包装界面，包括图像、视频和音效等，这些素材的搜集方式主要有4种，分别是网上搜集、绘制、生成和实物拍摄。●

文字类信息。文字类信息主要是指产品内容的信息，包括界面中的图标名称、按钮名称，以及产品展示过程中的文字叙述等。文字类信息主要根据产品的特性、功能进行搜集，设计师要兼顾文字类信息的广泛性、准确性、及时性、系统性等，这样才能使搜集到的文字类信息更符合需求。2．搜集素材1.4.5切图与标注界面设计完成后，为了保证后期开发者在开发产品时能够准确、高效地还原界面，设计师需要对设计出的界面进行精确的标注与切图。标注指在设计稿上详细注明元素的尺寸、边距、色值、文字大小、透明度等属性；切图指将设计稿中需要独立使用的图片元素导出为不同尺寸和格式的图片资源，以供开发者在不同设备上使用。1.4.6测试与优化产品上线前，需要通过可用性测试来验证设计，并通过收集和整理测试用户的反馈信息，对设计进行优化和调整。UI设计是一个交替迭代的过程，在这个过程中设计师需要切实参与产品设计、开发至上线的全过程，多方面思考、了解产品，才能制作出契合产品特性、符合市场需求及用