《aigc+ui 交互设计》课件全套 重大版 第1-7章 UI设计入门 -制作移动端App项目

第一章UI设计入门目录01UI设计概述02UI设计基础知识03UI设计基本原则04UI设计流程05AIGC应用提升UI交互设计效率UI设计概述01UI设计是用户界面（UserInterface）设计的简称，是指在数字产品（如网站、移动应用等）中，通过视觉呈现和交互设计来塑造用户与产品之间的互动体验。UI设计的主要目标是提供直观、友好、高效的界面，以便用户能够轻松地使用产品并实现其预期目的。一、UI设计的定义一、UI设计的定义视觉设计是UI设计的核心部分，通过运用色彩、图形、排版和视觉元素等设计原则来创造吸引用户的界面，并确保信息的有效传达。视觉设计交互设计聚焦于用户与产品之间的沟通和操作方式。它包括定义页面结构、规划导航流程、搭建功能布局，设计用户输入与反馈机制等。交互设计在UI设计后期，UI设计师需要进行可用性测试来评估设计方案的有效性和用户对界面的理解程度。可用性测试随着移动设备的普及，UI设计需要考虑不同屏幕尺寸和设备的适配性。响应式设计旨在确保产品在各种设备上都能提供一致的用户体验。响应式设计UI设计既要注重功能性，也要追求独特性和创新性。优秀的UI设计师能够通过把握最新的设计趋势和技术，结合产品需求和用户心理，创造出令人愉悦的用户界面。创新与美学UI设计是将美学、功能和用户体验相结合的过程。通过合理的布局、视觉吸引力和直观的操作方式，提升用户对产品的喜欢度和使用体验，从而达到提高产品价值和推动商业成功的目标。一、UI设计的定义在移动UI设计领域，手机系统作为用户与智能手机交互的直接界面，其设计和功能对用户体验至关重要。目前，市场上主流的手机操作系统主要包括以下几种。二、UI设计常用系统1.iOS系统iOS系统是由苹果公司开发的移动操作系统，主要用于iPhone、iPad、iPodtouch等苹果移动设备。自2007年首次发布以来，iOS系统经历了多个版本的迭代和更新。二、设计常用系统iOS系统特点：（1）安全性高：iOS系统采用了多层次的安全机制，有效保护用户的隐私和数据安全。（2）稳定性强：iOS系统经过严格的测试和优化，具有较高的稳定性和流畅性，减少了崩溃和卡顿的情况，为用户提供更好的使用体验。（3）集成性强：iOS系统与苹果的其他产品和服务紧密集成，如iCloud、AppleMusic等，方便用户在不同设备间共享数据。（4）用户界面友好：iOS系统采用直观简洁的用户界面设计，图标清晰易辨，操作逻辑简单易懂，使用户能够快速上手并享受操作过程。二、设计常用系统2.Android系统Android系统是谷歌公司主导开发的一款基于Linux内核的开源移动操作系统，主要应用于智能手机、平板电脑、智能电视、车载系统等各类移动设备，凭借其高度的开放性和广泛的兼容性在全球移动市场占据重要地位。目前，Android系统已经成为全球最受欢迎的移动操作系统之一。二、设计常用系统Android系统特点：（1）开源性：Android系统是一个开源的操作系统，允许开发者自由查看、修改和分发源代码，这为开发者提供了极大的便利和灵活性。（2）多任务处理：Android系统支持多任务处理，用户可以同时运行多个应用程序，并在不同应用程序之间轻松切换，提高了工作效率。（3）丰富的应用程序：Android系统拥有庞大的应用程序生态系统，用户可以从GooglePlay商店下载和安装各种应用程序，满足不同需求。（4）高度定制化：Android系统允许用户根据个人喜好进行定制，如更改主题、小部件和图标等，使得界面更加符合个人风格和偏好。二、设计常用系统3.HarmonyOS鸿蒙系统HarmonyOS鸿蒙系统是由华为公司自主研发的分布式操作系统，自2019年首次发布以来，凭借其创新的技术理念和强大的功能特性，在智能终端设备市场上逐渐崭露头角。二、设计常用系统HarmonyOS鸿蒙系统特点：（1）分布式架构与统一开发：HarmonyOS采用了分布式架构，可以在不同设备之间实现无缝连接和交互，形成智能化生态系统。（2）高度可定制与丰富的生态：HarmonyOS可以根据不同厂商的需求进行定制和适配，以满足不同设备的需求。同时，在生态方面，HarmonyOS已经吸引了众多开发者和合作伙伴加入，共同推动了系统的生态繁荣。（3）设备智能激活：鸿蒙系统支持设备智能激活，使得设备可以实现一碰入网、无屏变有屏、操作可视化等全新功能。二、设计常用系统此外，还有一些其他手机操作系统，如BlackBerryOS（由加拿大公司BlackBerry开发，以其强大的数据安全性和商务功能而闻名）、Tizen（由三星和Linux基金会联合开发，主要用于三星的智能手机和智能电视等设备）、WindowsPhone（由微软公司开发，已于2017年宣布停止开发和维护）等。这些系统市场份额相对较小，但在某些特定领域内仍具有一定影响力。二、设计常用系统在UI设计领域，选择合适的软件工具对于提高工作效率和设计质量至关重要。随着技术的不断进步，市场上涌现出了众多功能强大、易于上手的UI设计软件。常用的UI设计专业软件有以下几种。三、UI设计常用软件1.PhotoshopPhotoshop是一款图像编辑和处理软件，广泛应用于UI设计领域。它提供了丰富的绘图、编辑、调整和合成工具，可以创建、修改和优化图像素材。在UI设计中，设计师经常使用Photoshop来处理图像、裁剪和调整照片，以及创建视觉效果、渐变和图层样式。此外，Photoshop还支持切片和导出功能，方便将设计转化为Web页面所需的图像资源。三、设计常用软件2.IllustratorIllustrator是一款强大的矢量图形编辑软件，特别适用于创建和编辑图标、标志、插画和界面元素等矢量图形。与Photoshop不同的是，Illustrator主要基于数学公式描述图形，因此可以无限缩放而不会失真。在UI设计中，Illustrator经常用于绘制和编辑复杂的形状、路径、图标和排版。它具有丰富的绘图工具、字体库、渐变和混合模式，使设计师能够精确控制和调整界面元素。三、设计常用软件3.AxureAxure是专门用于交互设计和原型制作的软件，旨在帮助设计师创建交互式的UI原型和线框图。它提供了丰富的工具和控件库，使设计师能够快速建立可交互的原型，展示界面流程、交互细节和用户体验。通过Axure，设计师可以添加链接、动画效果、状态变化和用户输入模拟等，以创建逼真且易于测试的交互式原型。这有助于设计团队更好地理解和评估设计概念，并进行反馈和迭代。三、设计常用软件4.FigmaFigma是一款基于云的实时协作设计工具，它打破了传统设计软件的地域限制，让团队成员无论身处何地都能实时查看和编辑界面。Figma不仅具有强大的原型设计和交互功能，还支持实时协作、自动保存和版本控制，这也极大地提升了团队协作效率。同时，其丰富的设计资源和插件市场也为设计师提供了更多创作灵感和可能性。三、设计常用软件UI设计基础知识02一、图片格式JPEG是一种广泛应用的有损压缩图像格式,适合用于颜色丰富、细节复杂的照片。它可以在文件大小和图像质量之间做出权衡,但对于包含文本或线条的图像效果可能不佳。JPEG(.jpg)PNG是一种无损压缩图像格式,其特性确保了图像在多次保存和传输过程中不会出现画质下降的情况,同时支持多种颜色模式和透明背景,因此在网页设计中应用广泛。PNG(.png)GIF是一种支持动画和透明度的格式,在UI设计中常用于简单的动画元素和小尺寸的图像。虽然支持动画,但颜色深度较低,适合于简单的图形和动画。GIF(.gif)SVG是一种基于XML的矢量图形格式,适用于线条和图标类的矢量图形。它可以无损地调整大小,适合在不同尺寸的设备上展示。SVG(.svg)9.png格式是一种特殊的PNG图片格式,通常用于Android平台的应用程序界面设计。这种格式的图像可以实现在不失真的情况下进行拉伸或缩放。9.png(.9.png)二、相关术语PMProductManager：项目经理，负责管理项目的人员，负责规划、执行和监控项目，确保项目按时、按预算、按要求完成。GUIGraphicalUserInterface：图形用户界面，是用户与计算机交互的一种方式，相较于传统的命令界面，GUI以更加直观、易懂的方式呈现信息和操作选项，极大地降低了用户与计算机交互的门槛。UEUserExperience：用户体验，指用户与产品或服务互动的全面体验，包括视觉、情感、实用性等各个方面。它关注用户感受和感知，致力于提供尽可能流畅、愉悦的用户体验。IXDInteractionDesign：交互设计，涉及产品设计的领域，注重产品的外观、功能和用户体验，以满足用户的需求和市场的期望。UIUserInterface：用户界面，UI是用户与软件或产品互动的界面。它包括图形、文本、按钮、菜单等，以及用户与应用程序交互的方式。在UI设计中，常用到的尺寸单位包括英寸（inch，缩写in）、分辨率、屏幕密度、像素（pixel，缩写px）、点（pt）。英寸（in）：是一种长度单位，常用于测量屏幕尺寸或物理设备尺寸。在UI设计中，英寸通常用于描述屏幕的对角线尺寸，例如手机屏幕的大小可以以英寸为单位给出。常见的iOS系统手机尺寸有5.4英寸、5.8英寸、6.1英寸、6.3英寸、6.5英寸、6.7和6.9英寸等规格。三、尺寸单位分辨率：分辨率指显示设备上的像素数量，通常以水平像素×垂直像素形式表示。较高的分辨率意味着显示屏具有更多的像素，从而能够展示更多细节和更高质量的图像。分辨率也是设计界面时需要考虑的重要因素，因为不同分辨率的设备可能需要调整布局和元素大小。三、尺寸单位屏幕密度：屏幕密度指单位物理长度（例如英寸）内的像素数量，通常以每英寸像素数（PPI或DPI）来衡量。屏幕密度决定了在给定分辨率下不同设备上显示的元素大小。高屏幕密度表示单位长度包含更多像素，因此相同分辨率下的元素看起来更小，而低屏幕密度则相反。屏幕密度：又叫做像素密度，像素密度=√{（长度像素数^2+宽度像素数^2）}/屏幕尺寸。三、尺寸单位像素（px）：像素是组成数字图像的最小单位。在显示器屏幕上，像素是一个个能发出不同颜色光的小方块，这些小方块紧密排列，通过它们各自发光的组合来显示出各种图像。三、尺寸单位UI设计基本原则03UI交互设计要始终坚持以用户为中心的原则，这一原则强调在设计过程的每个阶段都要以用户的需求、期望和行为为出发点，以用户的所思、所行、所言、所需为基础，充分考虑用户的需求和心理，并将其融入设计框架中。这一原则的核心目标是为用户提供最直观、最便捷、最愉悦的使用体验，确保设计能够有效地解决用户问题，提高用户满意度和使用效率。一、以用户为中心简洁性原则旨在避免过度设计，减少不必要的元素，一个简洁的界面能够帮助用户更快速地理解内容和完成操作。因此，设计师在设计界面时应尽可能的简化流程，优化功能逻辑，减少层级，使得用户能够快速熟悉流程。二、简洁性一致性原则为了确保用户在使用App时，能够感知界面元素中的一贯性和可预测性。但一致性并不是指完全相同，而是界面中各个要素的设计风格应保持一致、类似功能应使用相同的操作方式。保持视觉风格、交互方式和信息结构的一致性，能够减少用户的学习成本和认知负担，使品牌形象统一，提升品牌产品优化迭代的效率。三、一致性美观性是UI界面设计中不可忽视的重要因素，它不仅影响用户对产品的第一印象，还能增强用户的使用体验，提升产品的吸引力和品牌价值。美观性虽然在UI设计中起到了重要的引导作用，是用户体验的一部分，但它并不是核心，设计师需在创意与功能之间找到平衡，确保界面既美观又实用。四、美观性UI设计流程04UI设计是一个系统化的过程，其核心目标是通过科学的设计满足用户需求，优化用户体验。通常，UI设计流程分为四个主要阶段：需求调研、设计制作、方案修改、测试改进。需求调研是UI设计中至关重要的一个环节，它决定了后续设计的整体框架和基调。通过调研，设计师可以深入了解产品的使用场景、目标用户群体以及行业的整体趋势。首先，要明确产品市场定位与目标，了解产品的核心功能、使用场景等，例如一款健身App，其定位是为健身爱好者提供专业的训练指导；其次，通过问卷调查法、用户访谈法、观察法等，了解目标用户的行为习惯、喜好、痛点和期望，例如了解健身用户在不同场景下使用类似产品的情况以及操作习惯、偏好等；最后，研究市场上同类产品的界面设计、功能特点、用户体验等，分析其优势和不足，找出差异化竞争的方向，比如分析其它健身App的界面布局、色彩搭配、交互方式等。一、需求调研确定了用户需求后，就进入到设计阶段。设计师根据前期需求调研结果，绘制产品的低保真原型图，主要展现产品的信息架构、页面流程、功能布局和交互逻辑等，帮助团队成员快速理解产品的整体框架和基本操作流程。在原型图绘制阶段，无需过多关注视觉细节。在原型方案确认后，视觉设计师结合产品定位、目标用户和品牌形象等，确定界面的整体视觉风格，并选择相应的色彩方案、字体样式、图标风格等，尽可能接近产品最终样式，确保界面设计符合产品需求和用户体验标准。交互动效设计阶段，使用相关软件为界面添加交互动效，如页面切换动画、元素的显示与隐藏、按钮的点击效果等，增强用户与界面的交互性和趣味性，提升用户体验。最后，将设计好的界面进行切图处理，生成开发所需的各种图片资源，并制定详细的设计规范文档，为开发团队提供统一的设计标准和指导，提高开发效率和还原度。二、设计制作在设计交互样稿确定后，将邀请真实用户或内部人员对产品进行可用性测试，观察他们在使用过程中的操作行为、反应和反馈，发现界面设计和交互设计中存在的问题，如操作流程是否顺畅、信息是否易于理解、功能是否易于找到等，并根据测试结果进行优化，对界面设计和交互设计进行针对性的优化和改进，解决用户在使用过程中遇到的问题，提高产品的可用性和用户满意度。三、方案优化在完成方案优化后，产品团队将产品正式上线发布，并收集上线后的运行情况和用户的反馈意见，包括对界面设计、交互体验、功能等方面的评价和建议，对产品进行持续的迭代优化，不断改进界面设计和用户体验，以满足用户不断变化的需求和市场的竞争要求。四、测试改进AIGC应用提升

UI交互设计效率05人工智能生成内容（AIGC）技术的快速发展，正在重塑交互设计的工作方式。无论是需求分析、原型构建还是视觉呈现，AIGC技术以其高效、智能和多样化的特性，显著优化了设计流程，提升了创意表达的深度和广度。从项目初期的规划到最终的交付，AIGC帮助设计师更快地完成复杂的任务，并探索出更多的设计可能性。在交互设计的不同阶段，AIGC扮演着各具特色的角色。它不仅能够在初期帮助明确设计框架和用户需求，还能通过自动化工具高效构建原型框架，最终在视觉呈现环节带来更具创意和品质的设计成果。以下将具体探讨AIGC如何在交互设计的三个主要环节中提升效率和优化流程：从框架构建与用户洞察，到界面布局与原型搭建，再到视觉创意与运营设计。1.文本类AIGC工具工具：DeepSeek、ChatGPT、文心一言、豆包、kimi、通义在交互设计的初期，文本类AI工具，如DeepSeek、ChatGPT、文心一言、豆包、kimi、通义千问等。这些大模型通过智能对话和角色扮演等方式，协助设计师快速梳理需求、生成用户画像，并提出信息架构和功能模块建议。这些大模型能够基于项目背景快速构建核心功能列表，同时结合上下文理解和竞品分析，为优化设计方向提供有力支持。设计师可以利用这些AI工具快速明确项目目标，定义用户群体特征，并提出创新性的设计解决方案。例如，与ChatGPT对话模拟用户使用场景，能够更高效地挖掘用户需求，减少与团队反复沟通的时间。而文心一言可以进一步生成精准的用户画像，为后续设计奠定基础。其他如豆包、kimi和通义等国内文本类AI工具，也提供了便捷的语言生成和需求分析功能，进一步丰富了设计师的选择。与文心一言和ChatGPT进行对话，生成了界面设计所需的功能需求和界面内容等，为后续的设计流程提供了清晰的参考依据。这些文本类AI的加入，让复杂的需求分析更加精准高效，同时为交互设计提供了更广阔的创意空间。2.界面类AIGC工具工具：Figma（WireframeDesigner插件）、即时AI在界面和框架设计阶段，Figma的WireframeDesigner插件与即时AI提供了智能化的支持，显著提升了设计师的工作效率。通过简单地输入功能需求，这些工具可以自动生成页面布局和逻辑框架，帮助设计师快速构建初步的原型设计，简化了设计流程中的重复性工作。这些工具不仅让设计更高效，还为设计师提供了极大的创意自由。例如，设计师可以利用WireframeDesigner插件快速生成一个初始框架，然后通过即时AI进行功能迭代和细化调整，从而节省了大量绘图和手动调整的时间。同时，自动生成的页面布局能够有效降低传统设计流程中因遗漏或重复修改而导致的效率损失，实现更高效的设计迭代。例如，针对校园外卖App的设计，设计师在GPT中编写了页面描述，并将其输入到WireframeDesigner插件和即时AI中，分别生成了不同风格的版面效果。两种工具的结合展示了其在界面设计中的灵活性和多样性，为设计师提供了更多探索和优化的可能性。3.图像类AIGC工具工具：MidJourney、StableDiffusion、即梦AIMidJourney和StableDiffusion等AI图像生成工具在视觉创意与运营设计环节发挥了不可或缺的作用。通过简单的文字提示，这些工具可以快速生成高质量的视觉效果图，包括图标、启动页、banner等关键设计元素，为设计师提供了丰富的创意灵感。借助MidJourney，设计师能够探索多样化的风格方向，快速确定符合项目需求的视觉效果。例如，生成启动页或运营海报时，MidJourney提供了极具创意的设计方案，为产品赋予更多的视觉吸引力。StableDiffusion则专注于细化和优化阶段，帮助设计师处理更精细的图像调整，确保最终呈现的视觉效果兼具品质和风格一致性。同时，即梦AI作为国内的图像生成工具，在本地化设计需求上具有独特优势，能够更加贴近国内市场需求，协助设计师高效完成相关创意任务。AIGC的迅猛发展为UI设计带来了前所未有的机遇，它能够提升效率、扩展创意，并且使得设计更具个性化和智能化。然而，设计的本质始终是“以人为本”，AIGC可以优化和自动化设计流程，但无法取代设计师的创造力与生活洞察。设计师依然需要通过对生活的深刻理解和情感的细腻把握，创造出具有温度和灵魂的设计作品。未来，AIGC将继续影响和推动UI设计的演变，使设计师能更专注于创意与用户体验，而AI则成为提升效率、拓展视野的得力助手。

感谢您的观看第二章

以用户为中心的设计目录01用户体验02用户画像03信息架构04竞品分析用户体验01用户体验（UserExperience，简称UX）是用户在使用产品或服务过程中建立起来的一种主观感受。从初次接触产品的瞬间，到使用过程中的操作体验，再到使用后的反馈与感受，它涵盖了用户与产品交互的每一个环节。根据国际标准化组织（ISO）标准ISO9241-210:2019的定义，用户体验是“用户在使用产品或服务过程中所产生的情感、信念、偏好、认知印象、生理和心理反应、行为和成就等综合结果”。它不仅关注产品的功能是否满足用户需求，更关注用户在使用过程中的情感体验和满意度。一、用户体验的定义在UI与交互设计领域，用户体验是衡量设计成功与否的关键指标。良好的用户体验能够提升用户对产品的满意度和忠诚度，而糟糕的用户体验则可能导致用户流失。因此，设计师需要从用户的角度出发，深入理解用户需求、期望和行为模式，通过合理的设计策略来优化用户体验。一、用户体验的定义用户体验的核心是“以用户为中心”的设计理念。这一理念强调将用户的需求、期望和感受放在设计的首位，确保产品或服务能够满足用户的实际需求，并为用户提供愉悦的使用体验。以用户为中心的设计包括用户需求的满足、情感体验的优化、易用性与无障碍性、持续性与适应性等几个主要方面。二、用户体验的核心用户体验并非一成不变，而是随着用户需求的变化和技术的发展而不断演进。设计师需要关注用户反馈，持续优化产品，以适应不断变化的市场环境和用户需求。持续性与适应性用户体验的核心还包括产品的易用性和无障碍性。设计应确保产品对所有用户群体（包括残障人士）都是可访问的，并且用户能够轻松上手，无需过多的学习成本。易用性与无障碍性用户体验的核心首先是满足用户的功能性需求。产品或服务必须具备明确的功能目标，能够帮助用户高效完成任务。用户需求的满足除功能性需求外，用户体验还关注用户的情感反应。设计应注重营造积极的情感体验，让用户在使用过程中感到愉悦、轻松和满足。情感体验的优化二、用户体验的核心用户体验的五要素是理解用户体验结构的重要框架，由杰西·詹姆斯·加勒特（JesseJamesGarrett）在其著作《用户体验要素：以用户为中心的产品设计》中提出，这五要素从战略层到表现层，层层递进，涵盖了用户体验设计的各个方面。三、用户体验的五要素用户体验五要素图范围层表现层结构层框架层战略层0504030201三、用户体验的五要素用户画像02用户画像这一概念最早源于交互设计领域，由交互设计之父阿兰·库珀（AlanCooper）提出，他指出用户画像是真实用户的虚拟代表，是建立在真实数据之上的目标用户模型。用户画像是基于用户的行为数据、心理特征、生活习惯和社会属性等多维度信息构建的虚拟用户模型。它是一种以用户为中心的设计工具，旨在通过具体化的方式，帮助设计师深入理解目标用户群体的特征和需求，从而为设计决策提供有力的支持。一、用户画像的定义用户画像是UI设计中至关重要的环节，主要具有以下几点作用。二、用户画像的作用02用户画像帮助设计师站在用户角度出发，以数据和洞察为依据，帮助品牌更好地了解用户的使用习惯和痛点，提升产品的可用性、适配度和满意度，从而为用户带来更高质量的体验。提升用户体验01用户画像通过描绘目标用户的年龄、性别、职业、兴趣爱好、使用场景等信息，帮助设计师明确设计的受众，精准勾勒目标用户群体，从而确定产品定位，避免设计方向偏离实际需求。明确产品定位03通过对用户画像与实际用户行为的对比分析，帮助产品团队识别用户的核心需求和痛点，指导优化方向。设计师可以验证设计是否真正符合目标用户的需求，从而快速调整设计，降低产品发布后的试错成本。优化产品方向04用户画像能够帮助品牌精准地定位目标客户群体，并根据用户画像中的兴趣偏好、行为模式、购买习惯等信息，为不同的用户群体定制个性化的营销内容，实现精准营销。实现精准营销二、用户画像的作用构建用户画像是通过对用户数据的系统收集、整理和分析，将用户的基本信息、行为模式、心理特征、需求和偏好等多维度数据进行综合，形成一个或多个代表目标用户的虚拟模型。构建用户画像的过程，就是将无法具象化的用户行为数据，转化成能够直观认识的用户标签。这一过程帮助设计师和产品团队更直观地理解用户的真实需求和行为习惯，从而为产品设计、功能规划和用户体验优化提供有力的数据支撑和决策依据。三、构建用户画像用户画像标签三、构建用户画像1.明确目标与用户群体在构建用户画像前，首先要明确构建用户画像的目标是为了优化产品界面、提升用户体验、指导市场营销策略，或者探索新的功能需求。只有确定了目标，整个画像构建过程才能有针对性地进行。其次，要对目标用户进行初步划分，包括用户的人口统计学信息，如年龄、性别、地域、教育背景和职业等，还应考虑用户的行为特征、兴趣爱好、消费习惯以及使用产品的场景等维度。这样的分类有助于识别出各个细分市场的共性与差异，为后续数据采集提供方向和依据。三、构建用户画像2.用户数据采集在构建用户画像时，用户数据采集是非常关键的一步，其目的是获取真实、全面的用户信息，为后续的用户群体划分和画像构建提供数据支撑。用户数据分为静态信息数据和动态信息数据两大类。静态信息数据是指用户相对稳定的信息，包括基础信息、社交信息、商业信息、其他信息等维度；动态信息数据是指用户不断变化的行为特征数据，包括行为信息、决策信息、关联信息等。三、构建用户画像3.用户采集及用户细分在完成用户画像的基础数据采集后，需要对大量的用户源数据进行分析梳理，提炼出有效数据并构建有效模型。可以使用各种数据分析工具，如人工智能生成技术、机器学习算法等工具，找出其中的关联性和规律性，依据用户属性、用户偏好、消费场景等要素将数据进行处理和细分，从而构建多维度完整的用户画像。三、构建用户画像4.生成用户画像基于前期的数据分析结果，为每个用户群体创建详尽的画像描述，包括基本属性（如年龄、性别、职业）、行为特征（如使用频率、常用功能）、心理需求（如期望、痛点）以及兴趣爱好等信息。构建出的用户画像应尽可能具象化，可以通过虚拟人物的方式呈现，使团队成员对目标用户形成直观、具体的认知。01设计用户调研问卷03数据分析与用户群体划分02数据收集与处理04生成用户画像四、课堂案例——AIGC博物馆App用户画像分析竞品分析03竞品分析是指对市场上与自身产品存在竞争关系的其他产品进行系统评估和研究的过程。通过系统性的比较和研究，深入了解其市场表现、功能特点、设计风格、用户体验、营销策略等方面的优劣势，从而为自身产品的优化和发展提供指导的一种方法。竞品分析的核心目标是找出自身产品与竞品之间的差异化优势和改进空间，帮助产品在市场中建立更强的竞争力和用户吸引力。一、竞品分析的定义02竞品分析能够发现现有产品的优缺点，识别出哪些设计细节能够提升用户体验，哪些功能或流程存在不足，从而在产品设计中有针对性地进行优化和改进。发现自身优劣势04在产品迭代和优化过程中，竞品分析为决策提供了数据支持和市场反馈，使产品不断进步并保持在激烈竞争中的领先地位。制定差异化策略01通过对竞品界面布局、交互模式和视觉风格的分析，帮助设计师把握行业趋势，确定产品的设计基调和方向。明确设计方向03竞品分析可以帮助团队准确定位目标用户群体，明确自身产品的差异化优势，通过借鉴竞品成功的经验并规避其失误，制定出更符合用户需求的设计策略。挖掘用户需求05通过持续的竞品监测和数据分析，为产品更新提供科学依据，实现持续改进，保证产品始终符合用户期望和市场变化。支持产品迭代和优化二、竞品分析的作用直接竞品也叫同类竞品，是指与自身产品用户群体、主要功能、产品定位等属性基本一致的产品。直接竞品间接竞品与自身产品在部分功能或目标用户群体上有一定重叠，但业务重点和核心功能有所不同，存在间接竞争关系的产品。间接竞品参照品是指在某些方面可以为分析本产品提供参考和借鉴的产品。这类产品不一定与本产品直接竞争或具有完全相同的功能，但在产品设计、用户体验、市场策略、技术应用等某个或某些方面具有突出的特点或优势，值得去研究和参照。参照品替代品是指产品可能在形态、技术、商业模式等方面与本产品有所不同，但它们能够为用户提供类似的价值，从而在市场上与本产品形成竞争关系。替代品三、竞品类型的选择分析竞品的目标用户群体，了解其用户画像，包括年龄、性别、职业、兴趣爱好等。通过研究竞品如何满足其目标用户的需求，可以为自身产品的用户定位和功能设计提供借鉴。

对比竞品的核心功能，评估其功能的完整性、创新性和实用性。通过功能对比，发现自身产品在功能上的优势和不足。评估竞品的视觉设计风格，包括配色方案、字体选择、图标设计、布局结构等。通过对比，了解竞品在视觉传达上的特点，以及用户对其视觉设计的反馈。

分析竞品的用户体验效果，包括交互流程、响应速度、易用性等方面的表现。通过用户反馈和自身体验，发现竞品在用户体验上的亮点和痛点。01四、竞品分析的维度020304目标用户核心功能视觉设计用户体验输出竞品分析报告05收集竞品信息03确定待分析的竞品02确定分析目标和维度01整理竞品信息和差异04五、课堂案例——AIGC博物馆App竞品分析信息架构04信息架构(InformationArchitecture)，简称IA，这一术语最早是由美国建筑师理查德·索·乌曼（RichardSaulWurman）提出的,他认为信息架构是一种使问题变清晰的方式。在此之前，并没有明确关于信息架构的概念，但在一些早期的设计中已经存在相关的理念雏形，这也为后期UI界面信息架构的发展提供了一定的思路和借鉴。一、信息架构的定义信息架构是指在用户界面设计中对信息进行组织、分类和布局的方式。信息指的是内容的载体，包括各种文本、图片、按钮等元素；架构是指对这些元素进行选择、分类、导航和检索。通俗点说，信息架构就是通过对信息元素合理的组织和表达，让用户获取、理解信息更加容易。一、信息架构的定义UI界面的信息架构主要包括以下几个方面。1.信息的组织与分类对产品中涉及的各种信息（文本、图片、按钮等）进行全面梳理，明确其性质、用途和相互关系。根据信息的重要性和相关性，将其划分为不同的层级。一般来说，主要信息处于较高层级，次要信息处于较低层级。一、信息架构的定义2.导航系统的设计导航系统为用户提供在整个应用或网站中进行快速定位和切换的方式，并在特定的页面或功能区域内，为用户提供当前页面相关的导航信息，帮助用户在该区域内进行操作和浏览。3.信息的呈现与布局根据信息的分类和层级，合理安排各个元素在界面上的位置，例如通过颜色、大小、字体、图标等视觉元素，突出重要信息，弱化次要信息，使用户能够快速识别和区分不同层级的信息。一、信息架构的定义1.优化用户体验合理的信息架构能让用户轻松找到所需的信息和功能，通过清晰的分类和层级关系，使用户快速理解产品的内容和功能布局。例如将核心功能放在突出位置，符合用户的操作习惯，减少用户的学习成本和操作失误。2.提高工作效率清晰的信息架构为设计和开发团队提供了明确的框架和指导，使他们能够更高效地进行页面设计、功能开发和代码编写，提高项目的整体推进速度。当需要添加新功能或修改现有功能时，能够准确地找到对应的位置进行操作，降低了维护成本。二、信息架构的作用3.促进业务目标实现合理的信息架构可以体现产品的品牌特色和价值观，增强用户对品牌的认同感和忠诚度。通过信息架构的设计，可以引导用户按照产品的预期流程进行操作，例如将重要的操作按钮设置在显眼的位置，引导用户完成购买、注册等关键行为，从而提高产品的转化率。二、信息架构的作用1.自上而下的构建方式自上而下的构建方式是由战略层驱动，从整体的目标和需求出发，先确定信息架构的顶层框架，然后逐步向下细分，将大的概念和功能分解为具体的子模块和内容元素。例如，在设计一个电商App时，首先考虑App的主要功能模块，然后再将商品展示模块进一步细分为不同的商品类别，每个类别下再列出具体的商品信息。这种构建方式适用于有明确的业务目标和需求，对信息架构的整体规划有清晰认识的项目。三、信息架构的构建方式自上而下的构建方式能够确保信息架构与业务目标紧密结合，整体结构清晰，有利于信息的组织和管理，提高设计效率。但可能会忽略用户的实际需求和行为习惯，导致设计出的信息架构与用户的期望不符。如果顶层设计不合理，可能会对整个项目产生负面影响，需要进行较大幅度的调整。三、信息架构的构建方式2.自下而上的构建方式自下而上的构建方式是由范围层驱动，从具体的内容和数据出发，先对现有的信息进行收集、整理和分析，然后根据信息之间的相似性、关联性等特征进行分类和归纳，逐步构建出信息架构的上层结构。比如，在整理一个公司的文档资料时，先将各种文件按照类型、主题、时间等进行分类，然后再将相关的类别进行合并和抽象，形成更高层次的分类，最终构建出整个公司文档管理的信息架构。这种构建方式适用于对现有信息资源进行整合和优化的项目，或者在项目初期对业务需求和用户需求了解不够深入的情况。三、信息架构的构建方式自下而上的构建方式能够充分考虑到实际存在的信息内容和用户的使用习惯，构建出的信息架构更加符合用户的认知和操作方式。但由于是从具体的信息出发，可能会导致信息架构缺乏整体的规划和前瞻性，难以满足未来业务发展的需求。三、信息架构的构建方式3.综合运用的构建方式综合运用的构建方式就是将自上而下和自下而上的方法结合起来，充分发挥两种方法的优势。先从业务目标和用户需求出发，制定信息架构的整体框架和顶层设计，再对现有的信息进行收集和分析，根据实际情况对顶层设计进行调整和完善。例如，在设计一个在线教育平台时，先根据教育行业的特点和用户需求，确定平台的主要功能模块，如课程分类、学习社区、教学管理等。然后，对平台上现有的课程资源、用户数据等进行分析，进一步细化课程分类，优化学习社区的功能和布局。这种构建方式适用于大多数复杂的信息系统和产品设计项目。三、信息架构的构建方式综合运用的构建方式可以避免单一方法的局限性，使信息架构既具有明确的目标和整体规划，又能充分考虑到实际的信息内容和用户需求，提高信息架构的质量和实用性。但需要更多的时间和精力来进行规划和协调，对设计人员的要求较高。三、信息架构的构建方式三、信息架构的构建方式自上而下的构建方式自下而上的构建方式综合运用的构建方式1.层级结构层级结构又叫树状结构或中心辐射结构，是最常见的信息架构类型。层级结构将信息按照从整体到局部、从上层到下层的顺序进行组织，形成类似金字塔的结构。用户可以通过逐级导航来获取具体信息，有明确的主从关系和清晰的路径。层级结构的适用场景非常广泛，适用于信息内容丰富、分类明确的应用或网站，如电商平台、企业官网等，既可以用于主产品，也可用于子模块。四、信息架构的类型层级结构能让用户快速了解信息的整体结构和层次关系，对信息的组织和分类一目了然。但如果层级过深，用户获取底层信息可能需要多次点击或操作，增加了时间成本和操作复杂性。四、信息架构的类型2.线性结构线性结构是指信息按照线性顺序依次排列，用户按照固定的流程或顺序进行浏览，不能进行跳转，只能一步一步按顺序浏览对应的信息。常用于表示具有明确流程或步骤的信息，如操作指南、业务流程等，例如新手引导，App引导页、问卷调查、安装教程等。四、信息架构的类型线性结构的优点是简单易懂，引导性强，学习成本低，缺点是拓展性有限，用户控制感较差，如果用户需要查找线性结构中的某一特定信息，可能需要从头开始依次查找，效率较低。四、信息架构的类型3.矩阵结构矩阵结构是指将信息按照两个或多个维度进行分类和组织，用户可以通过不同维度的交叉点来获取信息，具有较高的灵活性和自由度。例如，微信的对话功能是社交类App的核心，因此需要能够多维度触达，所以微信设计了从“最近聊天记录”、“通讯录”、“朋友圈头像”等多个入口触达。四、信息架构的类型矩阵结构能够更全面地展示信息的多种属性和关系，适用于信息具有复杂的多维度特征的情况，用户可以根据自己的需求和习惯，从不同维度来访问和组织信息，满足不同用户的个性化需求。但矩阵结构相对复杂，设计和理解起来都有一定难度，尤其是当维度较多或分类标准不清晰时，容易造成混淆，影响用户体验。四、信息架构的类型4.自然结构

自然结构是指信息之间没有固定的层级或顺序关系，用户可以在不同的信息节点之间自由跳转，具有很强的灵活性和探索性。这种结构常用于知识类网站、社交平台等。例如各App的推荐模块，推荐内容之间无明确的归属或分类关系，用户可以根据自己的兴趣和需求在不同的内容之间进行跳跃和探索。四、信息架构的类型自然结构的信息组织方式最接近现实认知，自然流畅，但与一些较为规整的信息架构（如层级结构、线性结构）相比，自然结构可能没有那么明确的信息查找路径和索引方式。用户可能需要在较为复杂的自然信息网络中进行探索和寻找，才能找到自己需要的信息，这在一定程度上会影响信息查找的效率。四、信息架构的类型5.混合结构混合结构是指将多种信息架构类型结合使用，根据不同的功能和内容需求，在同一界面中灵活运用层级结构、线性结构、矩阵结构或自然结构等。大多数复杂的应用或网站都会采用混合结构。例如，一个综合类新闻应用可能在首页采用层级结构展示不同的新闻频道，在详情页采用线性结构让用户按顺序阅读内容，同时在相关推荐部分采用自然结构，方便用户跳转阅读其他感兴趣的新闻。四、信息架构的类型课后习题1.为一款运动健身类App构建用户画像。2.选择一款你熟悉的App，分析其直接竞品、间接竞品、替代品和参照品。3.以一款短视频App为例，对其进行竞品分析，并根据分析结果提出该短视频App可优化的方向。4.以一款在线教育App为例，运用用户体验五要素分析其用户体验，阐述该App在各要素层面的表现。5.假设你正在设计一款新的电商App，基于构建的用户画像、竞品分析等，分析该App的整体信息架构。感谢您的观看第三章

图标设计基础目录01图标概述02图标设计规范03图标设计流程04功能图标0506装饰图标启动图标图标概述

01图标，也称为icon，是一种图形化标识。图标分为广义和狭义两种，广义的图标是指具有指代意义的图形化符号，例如：男女厕所标志、交通标志等。狭义的图标主要是指设备界面中的符号，这些设备泛指承载互联网产品的载体，如手机、电脑、iPad等。UI设计体系中图标主要是针对狭义的概念。在UI设计体系中，图标是最重要的组成部分之一，也是任何UI界面都不可或缺的视觉元素。一、图标的定义一、图标的定义图标设计在UI设计中通过简洁、直观的图形语言，帮助用户快速理解和操作界面。良好的图标设计不仅能够提升界面的美观度，还能增强用户体验。因此，图标设计需要遵循相应的基本原则方能达到最佳的效果。二、图标设计原则1.简洁性原则图标设计应尽量简洁，避免复杂的线条和过多的细节。简洁的图标更容易被用户识别和记忆。在现代UI界面中，图标通常需要在较小的尺寸下展示，复杂的细节可能会导致图标模糊不清，难以辨认。简洁的设计能够确保图标在不同尺寸下都能保持清晰可读。苹果公司的图标设计风格以简洁著称，例如，“相机”图标仅用简单的线条勾勒出相机的轮廓，用户能够迅速识别其功能。二、图标设计原则2.一致性原则在同一个应用或系统中，图标的设计风格应保持一致，包括形状、颜色、线条粗细等元素。一致性能够帮助用户建立对界面的认知模式，减少学习成本。当用户看到一个图标时，能够根据已有的经验快速理解其功能。例如，在微信应用中，所有功能图标都采用了相似的线条风格和色彩搭配，用户在使用过程中能够轻松识别不同功能的图标。二、图标设计原则3.可识别性原则图标需要能够清晰地传达其代表的功能或概念，避免让用户产生误解。图标的主要作用是帮助用户快速理解界面元素的功能。如果图标无法被用户正确识别，将严重影响用户体验。如在常见的办公软件中，“保存”功能通常使用一个软盘图标表示。这个图标因为其高度的可识别性，被广泛应用于不同的软件中。二、图标设计原则4.适应性原则图标设计应考虑不同的设备和屏幕尺寸，确保在各种场景下都能保持良好的显示效果。随着移动设备和多平台应用的普及，图标需要在手机、平板、电脑等多种设备上显示。适应性原则能够确保图标在不同分辨率和屏幕尺寸下都能保持清晰、美观。在设计图标时，通常会提供多个尺寸的图标文件，以满足不同设备的需求。二、图标设计原则图标设计规范02

当下，数字产品种类繁多，用户对界面易用性的要求越来越高。而图标是用户与产品交互的关键元素，一份规范的图标设计指南，对打造优质产品体验至关重要。遵循图标设计规范，能确保图标风格统一、表意清晰。这不仅有助于塑造一致的品牌形象，还能降低用户学习成本，提升交互效率。​图标栅格系统是一种用于规范图标设计布局的框架体系。它通过设定固定的网格结构，精确约束图标元素的位置、大小与间距，使图标在视觉上达到规整、协调的效果。图标栅格系统源于平面设计领域的栅格概念，最初被广泛应用于报纸、杂志排版，旨在优化内容呈现、提升可读性。随着数字化时代来临，其理念被引入UI图标设计，用于确保图标在不同尺寸、平台下的一致性与可识别性，帮助设计师高效构建风格统一且符合用户认知习惯的图标体系

。一、图标栅格系统常见的图标造型可概括为4种：圆形图标、方形图标、横长形图标、竖长形图标。图形的形状不同，视觉张力就不同，最终呈现的视觉大小也就不同。比如实际尺寸都为144px×144px的正方形和圆形，正方形要看起来大一些。而将正方形缩小后，正方形和圆形在视觉上看起来大小一致。一、图标栅格系统两个图形的视觉大小是否一致是由两个图形的面积是否相同决定的，只要能够保证两个图形的面积基本相同，就能保证两个图形的视觉大小基本一致。因此，为了确保图标在手机屏幕上显示的视觉大小一致，在绘制时要遵循图标栅格系统规范。图标栅格系统中的尺寸不是随意定制的，而是具有严格的比例关系。在iOS界面中，底部标签栏的系统图标标准大小为44px×44px，因此选择这个尺寸作为标准来定制图标栅格系统。一、图标栅格系统1.圆形图标圆形图标具有天然的收缩性，在撑满整个网格的情况下，圆形是在固定尺寸内的最小视觉大小。一、图标栅格系统2.正方形图标正方形图标在实际尺寸中比圆形多了4个尖角，为了与圆形图标在视觉上统一，需要将正方形图标缩小。一、图标栅格系统3.横长形图标制定横长形图标栅格的原理和正方形图标一样，将圆形和横长形重叠在一起，然后适当压低高度，直到圆形和横长形的面积基本相同。一、图标栅格系统4.竖长形图标竖长形图标跟横长形图标的栅格系统一样，即将横长形图标栅格旋转90度。一、图标栅格系统图标栅格系统作用重大，它能确保图标风格和尺寸的一致性，让整个图标体系协调统一且视觉平衡，帮助设计师快速定位布局图标，让图标适配不同屏幕尺寸，在不同设备上都有良好的视觉效果与可操作性，提升用户体验。一、图标栅格系统二、iOS系统图标规范1.启动图标启动图标是用户在主屏幕上看到的应用图标，点击后可以启动相应的应用。在AppStore中，启动图标尺寸为1024×1024px，所以设计师在设计iOS系统启动图标时，不仅需要提供该尺寸的设计稿，还需要提供多尺寸的图标以适应不同设备。需要注意的是，从iOS13开始，开发者可以提交完整的方形图标，系统会自动为图标添加圆角，无需再手动设计圆角。设备类型尺寸（像素）用途iPhone（全面屏@3x，如iPhoneX及以上）180×180px用于主屏幕iPhone（全面屏@2x，如iPhone8及以下）120×120px用于主屏幕AppStore图标1024×1024px用于AppStore展示二、iOS系统图标规范2.栏图标在iPhone中，栏图标通常指的是出现在状态栏、导航栏、标签栏或工具栏中的图标，用于指示状态、辅助导航或提供快捷操作。在设计栏图标时，建议使用

SFSymbols（苹果官方图标库），确保与系统风格一致。图标类型尺寸（像素）用途导航栏图标（@2X）44×44px用于导航栏，如返回、设置、搜索等图标导航栏图标（@3X）66×66px标签栏图标（@2x）50×50px用于标签栏，图标下方通常搭配文字标签标签栏图标（@3x）75×75px工具栏图标（@2x）44×44px用于工具栏，如分享、收藏、删除等图标工具栏图标（@3x）66×66px状态栏图标由iOS自动管理，开发者无法直接修改尺寸二、iOS系统图标规范3.小图标小图标用于应用内的次级场景，如列表项、下拉菜单等，作为功能或内容的视觉标识。在设计小图标时，建议从最大尺寸开始，逐步调整小尺寸的细节，具体尺寸需根据使用场景调整。图标类型尺寸（像素）用途Spotlight搜索图标（@2x）80×80px用于Spotlight搜索Spotlight搜索图标（@3x）120×120px通知图标（@2x）40×40px用于系统通知图标通知图标（@3x）60×60px设置图标（@2x）58×58px用于系统设置图标设置图标（@3x）87×87px三、Android系统图标规范1.启动图标Android系统主屏幕上的启动图标，没有强制要求使用圆角矩形作为背景，因此设计师要确保启动图标在任何背景上都能清晰可见。在GooglePlay商店中显示的启动图标尺寸为512×512px，所以设计师在设计Android系统启动图标时，需提供尺寸为512×512px的设计稿。除此之外，由于使用Android系统的手机品牌众多，设计师还需将其适配到不同屏幕像素密度的手机上。屏幕像素密度启动图标尺寸Ldpi（小屏）36×36pxMdpi（中屏）48×48pxHdpi（大屏）72×72pxXHdpi（特大屏）96×96pxXXHdpi（超大屏）144×144px三、Android系统图标规范2.栏图标栏图标是指在系统界面的各个栏中显示的具有特定功能或代表特定状态的图形标识，是用户在App中执行操作的入口。按照不同Android系统手机的屏幕像素密度进行缩放，得出操作栏图标的设计尺寸和焦点区域大小。屏幕像素密度操作栏图标设计尺寸操作栏图标焦点区域尺寸Ldpi（小屏）24×24px18×18pxMdpi（中屏）32×32px24×24pxHdpi（大屏）48×48px36×36pxXHdpi（特大屏）64×64px48×48pxXXHdpi（超大屏）96×96px72×72px三、Android系统图标规范3.小图标Android系统的小图标系统界面或应用程序中，用于代表各种功能、操作、状态或内容的小型图形元素，一般出现在App的行列表中。按照不同Android系统手机的屏幕像素密度，对Android系统的小图标进行缩放，得出相应小图标的设计尺寸和焦点区域（视觉中心安全区域）尺寸。屏幕像素密度小图标设计尺寸小图标焦点区域尺寸Ldpi（小屏）12×12px9×9pxMdpi（中屏）16×16px12×12pxHdpi（大屏）24×24px18×18pxXHdpi（特大屏）32×32px24×24pxXXHdpi（超大屏）48×48px36×36px图标设计流程03一

、寻找隐喻隐喻是将抽象的功能或概念转化为用户熟悉的视觉符号。隐喻分为直接隐喻，间接隐喻，功能性隐喻三种类型。直接隐喻是指用真实世界中的物体代表功能，例如垃圾桶代表“删除”，信封代表“邮件”；间接隐喻是借助文化符号来表达隐喻，例如心形表示“喜欢”或“收藏”；功能性隐喻是基于用户交互习惯，比如放大镜代表“搜索”，齿轮代表“设置”。在进行UI图标设计时，应先将抽象的概念实体化，再通过产品属性、功能和特点提取关键词，进行头脑风暴。二、抽象图形抽象图形是指从选定的隐喻中，提取最具代表性的关键特征，运用图形设计的手法，对关键特征进行简化和抽象处理，去除不必要的细节，使图标更简洁、清晰。需要注意的是，在抽象的过程中，要确保图标仍然能够被用户轻易识别出其所代表的含义，不能过度抽象导致用户无法理解。三、竞品分析在做图标竞品分析时，要广泛收集同类产品或相关领域产品的UI图标，从形状、颜色、风格、隐喻等方面对竞品图标进行分析，找出它们的优点和不足。基于竞品分析结果，寻找自己图标设计的差异化方向，以在众多竞品中脱颖而出。例如，常用的通信类应用绝大多数使用气泡图形，为了避免在设计同质化，可以通过筛选分析市面上同类应用，调整图形设计细节，做出差异。四、确定风格在确定基础图形后，要根据产品的定位、目标用户和使用场景来确定图标风格，同时还要确保整个产品中的图标风格保持一致，包括颜色搭配、线条粗细、图形元素等方面，形成统一的视觉语言，提升用户体验。五、调整细节在初步设计完成后，还需要对图形比例、颜色层次、质感等细节进行优化，确保图标在不同环境下都能完美呈现。六、场景测试设计好的图标需要放入实际界面中测试，确保它能清晰传达信息，在不同设备和系统中都能被用户高度识别，并在各种背景、设备上都具有良好的可见性。通过以上六个步骤，可以设计出高效、直观、符合用户认知的UI图标，提高整体产品的易用性和美观度。功能图标04功能图标是一种用于表示软件或应用程序界面上各种功能的图形符号。它们通常由简单的、易于识别的图形元素组成，能够替代或辅助文字传达信息，帮助用户快速理解界面功能。在设计功能图标时，应注意以下三点：1.表意准确由于功能图标绘制简洁，要确保关键线条能准确传达核心功能，避免产生歧义。2.风格一致在绘制功能图标时，要注意线条的粗细、圆角、风格要保持一致。在一组图标中，不能有的线面结合图标以线为主、面为辅，有的却相反，导致风格不统一。3.适配性和可拓展性在不同分辨率和尺寸的屏幕上，线条的显示要清晰、流畅，不会出现模糊或变形的情况，并且在不同的应用场景和界面布局中都能保持良好的视觉效果和可识别性。一、功能图标分类1.线性图标线性图标主要由线条构成，简洁轻量，通过线条的粗细、端点、弯曲程度等属性来表达不同的视觉感受，常用于移动端的标题栏、导航栏等次要功能设计，以及后台业务类产品的设计，其优点是简洁、易识别，适合快速传达信息。一、功能图标分类2.面性图标面性图标通过面的形式表达语义，给人以重量感和力量感，通常用于主功能图标或重要位置的图标。面性图标常用于主页面中的主要功能图标，如首页入口、个人中心列表等，其优点是视觉表现力强，能够吸引用户目光。一、功能图标分类3.线面结合图标线面结合图标是线性和面性的结合体，既保留了线形的精致细腻，又增加了面的重量感和装饰效果。线面结合图标常用于首页功能入口、引导页、缺省页等，其优点是兼具线性和面性的优点，能够提升界面的视觉层次感和辨识度。装饰图标05一、功能图标分类装饰图标是UI设计中不可或缺的元素之一，通过风格一致、色彩协调、细节优化等手段，为界面增添趣味性和视觉层次感。装饰图标一般应用于金刚区、信息卡片区、用户行为反馈区、情感化场景区、数据可视化展示区等，在设计时可融入一些品牌元素，起到渲染品牌氛围和提升品牌调性的作用。在设计装饰图标时，应注意以下两点：1.装饰与功能的平衡装饰图标要在强化界面美观度的同时，明确装饰图标的功能属性，清晰的传达其功能意义，使用户一目了然，避免使用容易混淆或具备多义性的图形元素。2.简约与细节的结合装饰图标应避免过于繁杂的设计风格，一般以轻拟态风格为主，通过渐变色、微妙的纹理或装饰元素来增添细节，让界面更有吸引力。一、装饰图标分类1.轻拟物风格轻拟物风格图标是一种介于扁平风格和拟物风格之间的图标设计风格，在平面界面中使用一些真实世界物体的形态和材质作为设计灵感，结合一些阴影、渐变色和细节来表达动态和立体感，以平面化的方式呈现，突出简洁性和符号化的特点。一、装饰图标分类2.磨砂玻璃风格磨砂玻璃风格图标是一种近年来在UI设计领域逐渐流行的设计风格，其特点是通过半透明效果、高斯模糊、剪切蒙版等技术手段，营造出轻质感、若隐若现的视觉效果。这种风格介于扁平化设计和写实设计之间，既具有现代感，又带有柔和的朦胧美，非常适合用于电商、科技、金融等行业的图标设计。一、装饰图标分类3.MBE风格MBE是一种具有独特视觉特征的图标设计风格，因其多样的色彩运用和趣味的绘制手法，近年来在互联网产品中流行，广泛应用于插画、图标、品牌和UI界面设计中。其设计要点是粗线条描边、断点式处理、色块溢出以及单色系配色，具有简洁、可爱、易识别的特点。01设计目标与风格确定03采样方法与生成参数02提示词编写与解析04生成与后期优化四、课堂案例——AIGC装饰图标设计启动图标06启动图标是在操作系统界面中，用于启动应用程序或执行特定功能的图形化标识，是UI设计中非常重要的一部分。它不仅是应用的视觉入口，还承载着品牌识别和用户体验的重要功能，是用户与应用之间的第一接触点。在设计启动图标时，应注意以下两点。1.体现品牌与功能启动图标应融入品牌的核心元素，如品牌标志的颜色、形状或标志性图案等，使用户看到图标就能联想到品牌，强化品牌认知度。2.确保识别性与简洁性在众多应用图标中，启动图标要具有独特的造型和鲜明的特征，避免与其他应用图标过于相似，以免造成用户混淆。同时，避免图标设计过于复杂，去除不必要的细节和装饰，以简洁的图形和线条来表达核心内容，让用户在短时间内快速识别和理解。一、启动图标分类1.扁平化图标扁平化图标是一种UI设计中广泛使用的图标风格，它摒弃了拟物化图标中复杂的细节、纹理、阴影和高光等元素，仅保留了最核心的形状和线条，使图标在视觉上更加清爽、干净，易于识别和理解。一、启动图标分类2.拟物图标拟物化风格图标是一种通过图形设计手法，高度模仿现实世界中物体的外观、质感、光影等特征，以直观地传达其功能或含义的图标设计风格。尽管其设计复杂度较高，但其高辨识度和易用性使其在早期UI设计中占据了重要地位。随着用户对屏幕化人机交互方式的适应，轻拟物和扁平化风格逐渐成为主流，但拟物风格仍然在某些场景中发挥着重要作用。01构思与创意03将指令输入到即梦生成设计02使用DeepSeek生成设计指令04局部修改与细节调整四、课堂案例——AIGC启动图标设计课后习题1.为一款社交App设计一组功能图标，包括消息、好友、动态、设置四个核心功能。2.为一款办公软件设计启动图标，要求体现品牌与功能，确保识别性与简洁性。3.以一款音乐App为例，设计播放界面的装饰图标，采用轻拟物风格。4.为一款阅读类App设计一套完整的图标集，涵盖功能图标、装饰图标和启动图标。感谢您的观看第四章

App组件设计目录01按钮02滑动条03数据图表04Banner05瓷片区按钮

011.文本按钮文本按钮以纯文字形式呈现，简洁、灵活且表意明确，能精准传达操作意图。2.图标按钮图标按钮以图标为主要展示内容，表意直观，能够快速传达操作意图、节省空间并提升操作效率。3.图文按钮图文按钮是将图标和文字结合在一起，既能通过图标直观地表达操作含义，又能借助文字进一步明确操作内容。一、按钮的类型1.直观性按钮的设计应便于用户识别，使用户无需过多思考即可理解其功能与交互方式，避免产生歧义。直观的按钮设计能够降低用户的学习成本，提升操作效率。2.反馈性用户操作按钮后应提供即时反馈，告知用户可否交互、交互成功或正在进行。良好的反馈设计能够增强用户的操作信心，避免误操作。不同状态下按钮的形态有所不同，按钮的颜色、形状或状态应发生变化。3.规范性按钮的设计应遵循UI设计规范和标准，确保用户在不同界面和操作中有一致的体验。针对不同平台进行UI设计时，应遵循其官方的设计指南和规范。二、按钮的设计原则滑动条02滑动条是通过拖拽滑块在轨道上移动，实现数值调节或范围选择的交互组件，常用于参数调整、数据筛选等交互场景，可以直观高效地完成连续或离散值的精准控制。滑动条通常由一个长条形的轨道和一个可以沿轨道滑动的拖动块组成。轨道显示滑动条的整体范围及当前值的进度，比如在音量调节滑动条中，长度代表音量从最小到最大的区间范围。滑块是用户拖拽的直接操作对象，代表当前选中的值或范围，会通过独特的颜色或阴影与轨道形成鲜明对比，部分滑块端点会使用圆形、方形、胶囊形等形状进行标记，以便用户能够轻松识别和操作。一、滑动条的构成滑动条根据操作特性可分为连续型滑动条和离散型滑动条。连续型滑动条允许用户在连续范围内选择任意值，适用于无固定步长的参数调节。离散型滑动条的滑块取值是离散的、不连续的，只能取到预先设定好的特定值，存在明确的间隔，适用于需要明确数值或分段选项的场景。二、滑动条的分类数据图表03数据图表是一种将数据以可视化形式呈现的核心工具，可以将复杂的数据以直观易懂的方式呈现，帮助用户快速理解和分析信息，是UI设计中重要的可视化元素。受限于移动端屏幕尺寸，相较B端系统及数据大屏等场景，其形态更趋轻量化，重点聚焦核心指标的即时呈现。一、数据图表的使用场景1.健康管理场景个人健康管理场景下，数据图表帮助用户掌握自身健康状况。一、数据图表的使用场景2.消费决策场景消费决策支持场景里，数据图表可以帮助用户降低决策成本，提升消费信息透明度。一、数据图表的使用场景3.效率提升场景数据图表可以将抽象任务转化为可视化进度，强化用户目标达成感知，提高用户的工作学习效率。一、数据图表的使用场景4.社交洞察场景数据图表量化人际关系与内容传播路径，增强用户社交参与感。二、数据图表的分类1.柱状图柱状图以垂直或水平的柱体高度为变量来展示数据的大小，主要用于比较数据之间的差异，能让用户快速判断不同类别数据的数值高低。二、数据图表的分类2.折线图折线图通过将数据点连接成折线，来展示数据随时间或其他有序变量的变化趋势，能有效反映数据的走势和变化规律。二、数据图表的分类3.饼图饼图将一个圆形划分为不同扇形区域，扇形的面积大小代表该部分数据占总体的比例，清晰展示各部分在整体中所占的份额，常用于展示比例关系。一致性是降低用户学习成本的关键，同一产品内的图表应遵循统一的设计语言，颜色、字体、样式，交互逻辑也需保持一致。一致性三、数据图表的设计原则数据图表的核心使命是传递真实准确的数据信息，设计时必须杜绝误导性呈现。设计图表需确保数据源的准确性与完整性，数据源要可靠，展示时不能篡改或选择性呈现。准确性用户面对复杂数据时容易陷入信息过载，设计者需通过视觉简化引导注意力，去除多余装饰，突出关键信息，帮用户快速抓住重点，避免信息过多导致用户困惑。简洁性在用户与数据产生交互的瞬间提供实时反馈，确保数据呈现与物理世界状态同步更新，满足时效性场景的认知需求。即时性Banner04Banner通常位于界面的首页，是运营活动等重要信息的展示区。作为界面中极为醒目的元素，是吸引用户注意力、传递关键信息、提高转化率、增强品牌形象和营造活动氛围的重要窗口。一、Banner的分类1.营销推广类营销推广类是最为常见的Banner类型。主要用于推广产品或服务，旨在吸引用户的注意力并促使其产生购买行为。通常包含产品图片、信息等，设计风格鲜明，色彩鲜艳，以突出产品的特点和优势。首页电商平台通常在大促时展示大幅的营销推广类Banner，搭配热门商品图片，再加上醒目的限时活动时间，吸引用户下单。一、Banner的分类2.活动宣传类活动宣传类Banner主要用于宣传即将举行的活动，如节日庆典、新品发布、线上促销等。通常包含活动主题、时间、地点以及参与方式等关键信息，设计风格与活动主题相符，营造活动氛围。一、Banner的分类3.品牌形象类品牌形象类Banner用于塑造和强化品牌形象，传达品牌价值观、理念和独特个性。通过富有创意和感染力的视觉元素，如品牌标志性颜色、独特图案、简洁有力的品牌标语等，设计风格与品牌形象保持一致，以塑造和提升品牌形象。一、Banner的分类4.信息展示类用于展示重要资讯、通知或更新内容，让用户快速了解关键信息。新闻类App会在首页设置信息展示类Banner，展示今日热点新闻标题和简短摘要，用户无需进入具体新闻页面，就能快速获取重要资讯。二、Banner的设计原则1.信息层级Banner区中核心内容突出，标题简洁明了，使用易懂的口语化表达，一般控制在8个字以内，同时通过加粗字体和高对比度的颜色搭配来吸引用户注意。辅助性的信息简化处理，说明性文字不宜超过两行，杜绝装饰性元素干扰，让用户能轻松聚焦关键信息。2.视觉吸引Banner需要在短时间内抓住用户眼球，运用色彩和排版迅速吸引用户注意力。使用鲜明且富有品牌特色的色彩方案，选用品牌色或高饱和色来增强视觉冲击力。排版方面合理安排元素位置，重要信息应置于视觉中心，图片简洁且与主题适配，产品类Banner优先选用实物照片。二、Banner的设计原则3.品牌渗透Banner设计要与整体品牌形象相符，沿用品牌主色调、字体、图标、IP等元素，强化品牌印象，让用户在看到Banner时，能立即联想到该品牌，增强品牌认同感。4.交互引导Banner有引导用户操作的功能，如点击进入详情页，在设计时加入明显的交互提示，可以通过按钮样式设计，或者在Banner上添加箭头等指示图标，明确告知用户可进行操作，提升用户参与度，引导用户完成预期行为。01准备阶段03参数设置02提示词设置04优化设计三、课堂案例——AIGC技术辅助电商Banner设计瓷片区05瓷片区是UI界面中由多个“瓷片”组成的模块化布局区域，通过规整的网格化排布，将信息或功能以卡片形式高效展示。每个瓷片作为独立单元，通常会包含标题、介绍文字、主体视觉元素、标签等信息，可承载图文、数据、快捷操作等内容，兼顾视觉统一性与功能灵活性，适合快速浏览与精准触达，能够吸引用户、推广产品、展示内容，并为用户提供个性化体验。一、瓷片区的特点1.设计模块性瓷片区通过将内容信息划分为多个独立的模块，构建出清晰有序的界面布局。模块化的设计赋予了界面极大的灵活性，各个瓷片是一个独立的信息模块，能够自由组合，共同构成完整的瓷片区。2.内容独立性与模块化设计相辅相成的是瓷片内容的独立性，每个瓷片模块内容都是独立的，可以各自显示不同的信息或功能，从而强化应用的个性展示。瓷片区能够灵活地展示各种内容，如商品推荐、活动预告、功能介绍等，满足用户多样化的需求。3.信息精简性在设计瓷片时会将内容信息精简整合，提炼核心信息，去除冗余内容，以最简洁的方式呈现给用户最重要的信息，突出瓷片区的视觉效果，快速传递瓷片信息也更易于用户理解和记忆。二、瓷片区的设计原则1.网格布局原则

瓷片区的核心是模块化布局，需通过网格系统保证视觉秩序与扩展性。在组件区域，首先要确定瓷片区框架四周内边距，为后续布局提供空间，通常在App界面中可将模块拆分出2×2、3×2、4×2、4×1的基本网格系统。根据瓷片的重要性不同，可以灵活合并或拆分瓷片，如电商App中，将多个小