《交互设计》课件-2.交互设计常用软件

交互设计项目一

交互设计概述·交互设计常用软件同学们大家好，今天我们一起来了解,完成交互设计整个工作流程需要涉及到的软件工具。思考：同学们了解到的交互设计类的软件有哪些？这些软件作用是什么？同学们可以思考一下你们了解到的交互设计类的软件有哪些？这些软件作用是什么？好，带着这个问题让我们进入到常用的交互设计软件介绍。思维导图类软件视觉类软件动态效果类软件根据工作流程，我们可以将软件分类思维导图类、视觉类、动态效果类软件，我们一起来看看都有那些软件。01思维导图类软件思维导图类软件1.概念：MicrosoftVisio是一款强大的图表和矢量图形应用程序，主要用于绘制流程图和示意图。Visio是MicrosoftOffice家族的一部分，最初由Visio公司开发，后于2000年被微软收购。它支持创建多种类型的图表，包括流程图、组织结构图、网络图、UML图等，广泛应用于IT和商务领域，帮助用户将复杂信息可视化。2.基本操作：1.选择并打开模板2.绘制基本图形3.连接图形4.调整图形5.插入文本6.插入图表7.保存和导出文件。3.应用：绘制流程图，对交互设计师和产品经理来说，流程图是一个核心的工具，设计你产品的交互流程，确保的你的产品在任何时候都是友好的（甚至包括你原来根本未曾考虑过的故障发生时）。企业流程图设计、项目管理图表制作、组织结构图绘制、网络拓扑图规划、软件设计架构图创建、业务流程优化分析。1.1思维导图类软件:VisioVisio，是一款强大的图表和矢量图形应用程序，主要用于绘制交互设计应用程序开发中的流程图和示意图。对交互设计师和产品经理来说，流程图是一个核心的工具，设计你产品的交互流程，确保的你的产品在任何时候都是友好的1.2思维导图类软件:XMind1.概念：XMind是一款非常实用的商业思维导图软件，应用全球最先进的软件架构，全力打造易用、高效的可视化思维软件，强调软件的可扩展、跨平台、稳定性和性能，致力于使用先进的软件技术帮助用户真正意义上提高生产率。2.XMind软件基本操作：1.创建选择你想要的样式2.绘制思维导图3.插入图片/超链接4.修改与调整5.导出与保存。3.XMind在交互设计中的应用：绘制信息架构图，帮助产品设计师和产品经理理解和分析上游的业务逻辑与功能点，向下游输出清晰明确的信息架构图，避免信息内容在展示过程中出现遗漏、混乱、重复，作为开发工程师建立数据库的参考依据。XMind，是一款非常实用的商业思维导图软件，应用全球最先进的软件架构，全力打造易用、高效的可视化思维软件，强调软件的可扩展、跨平台、稳定性和性能，致力于使用先进的软件技术帮助用户真正意义上提高生产率。主要用于绘制信息架构图，帮助产品设计师和产品经理理解和分析上游的业务逻辑与功能点，向下游输出清晰明确的信息架构图，避免信息内容在展示过程中出现遗漏、混乱、重复，作为开发工程师建立数据库的参考依据。思考：还有没有其他的思维导图软件？思维导图软件有很多，完成产品开发逻辑的方式也有很多，大家也可以查阅其他方便使用的思维导图软件。1.5其他思维导图类软件思维导图软件思维导图是一种图形思维工具，它以中心主题为核心，通过分支和连接展示关联思想。常见的思维导图软件有迅捷思维导图、知犀思维导图、Mindnow、Taskade、Mindly等，这些软件各具特色，功能强大且操作简便，能满足用户不同的创作需求。比如很多在线思维导图软件，百度脑图、幕布等，这些软件各具特色，功能强大且操作简便，能满足用户不同的创作需求。同学们可以根据自己的创作需求选用合适的逻辑软件。02视觉类软件视觉类软件2.1视觉类软件：AxureAxure（通常被写作AxureRP）是一款专业的快速原型设计工具，主要用于创建网站和应用程序的线框图、流程图、交互原型以及规格说明文档。它允许设计师和开发人员以较低的成本和较短的时间制作产品原型，从而进行测试、评估和迭代。Axure是一款专业的快速原型设计工具，主要用于创建网站和应用程序的线框图、流程图、交互原型以及规格说明文档，通常以图形、符号来完成交互设计的初步想法，相当于视觉草图。2.1视觉类软件：Axure一、主要功能原型设计：AxureRP允许用户通过拖放组件的方式快速创建原型，包括按钮、表单、导航菜单等常见界面元素。用户还可以设置这些元素的交互行为，如点击、悬停、输入等，以模拟真实产品的用户体验。交互逻辑：AxureRP提供了强大的交互逻辑设置功能，用户可以通过添加条件、动态面板、中继器等元素，实现复杂的交互效果，如动态显示/隐藏内容、动画效果、数据验证等。注释与文档：AxureRP支持为原型添加注释和说明文档，方便团队成员理解和沟通设计思路。这些注释可以附加到页面、组件或交互逻辑上，确保信息的准确性和完整性。生成原型：AxureRP可以将设计好的原型导出为HTML文件，方便在浏览器中查看和分享。这有助于团队成员、客户或利益相关者更直观地了解产品设计和功能。团队协作：AxureRP支持团队协作，多个用户可以同时编辑同一个项目，并实时查看彼此的更改。这有助于提高团队工作效率，减少沟通成本。Axure主要功能在于允许用户通过拖放组件的方式快速创建原型，包括按钮、表单、导航菜单等常见界面元素。提供了强大的交互逻辑设置功能，用户可以通过添加条件、动态面板、中继器等元素，实现复杂的交互效果，如动态显示/隐藏内容、动画效果、数据验证等。2.1视觉类软件：Axure二、应用场景AxureRP广泛应用于产品设计、用户体验设计、交互设计等领域。它可以帮助设计师和开发人员更好地理解用户需求，快速迭代产品原型，提高产品质量和用户体验。三、软件特点易用性：AxureRP的操作界面简洁明了，提供了丰富的拖放组件和交互逻辑设置选项，使得用户能够轻松上手并快速创建原型。灵活性：AxureRP支持自定义组件和交互逻辑，用户可以根据项目需求进行灵活调整，实现个性化的设计效果。高效性：AxureRP能够快速生成原型，并支持实时预览和分享，有助于提高团队协作效率和产品设计质量。可扩展性：AxureRP提供了丰富的插件和扩展功能，用户可以根据需要添加新的组件、交互逻辑或导出格式，以满足特定项目的需求。Axure软件有易用性、灵活性、高效性等特点，是帮助设计师和开发人员更好的理解用户的工具。2.2视觉类软件：墨刀墨刀墨刀是一款在线原型设计与协作的工具，操作简单，有丰富的行业素材库，简单拖拽即可进行产品原型的创作，而且可在一键分享在任意端上展示。相对Axure反复导出、传送的问题，墨刀解决了此问题，整体操作设计更容易上手。但墨刀把太多的东西都高度封装了。造成产品经理在设计的时候是完全不用动脑思考的。直接类似拼积木一样，拖拽过来，堆叠起来，在这个过程中没有形成良好的逻辑思维和结构化思维。产品设计的过程，不是画的过程，是思考的过程。对于新手来说Axure会恰到好处的让产品经理在设计原型的时候“慢”下来考虑更多的细节。因此原型设计可以结合学者自身实际情况选用设计工具。接下来我们看看墨刀这个工具，墨刀与Axure不同的是他是一款在线原型设计与协作的工具，操作简单，有丰富的行业素材库，简单拖拽即可进行产品原型的创作，而且可在一键分享在任意端上展示。相对Axure反复导出、传送的问题，墨刀解决了此问题，整体操作设计更容易上手。2.2视觉类软件：思考：在原型设计阶段到底使用Axure还是墨刀呢？那么在原型设计阶段到底使用Axure还是墨刀呢？两者比较来看，墨刀把太多的东西都高度封装了。造成产品经理在设计的时候是完全不用动脑思考的。直接类似拼积木一样，拖拽过来，堆叠起来，在这个过程中没有形成良好的逻辑思维和结构化思维。产品设计的过程，不是画的过程，是思考的过程。对于新手来说Axure会恰到好处的让产品经理在设计原型的时候“慢”下来考虑更多的细节。因此原型设计可以结合学者自身实际情况选用设计工具。整体操作设计更容易上手高度封装类似拼积木，不用思考没有形成良好的逻辑思维和结构化思维有形成良好的逻辑思维和结构化思维节奏放慢适合新手思考墨刀Axure2.3视觉类软件：FigmaFigmaFigma是一款在线的团队协作UI设计工具,不仅可以完成原型设计和交互设计，还可以完成界面视觉设计，作品集排版功能。可以多人同时编辑文件，国内国外部分大团队已使用figma产出内容。Figma部分功能需要付费才能使用，对于初学者来说免费功能已经足够。Figma是一款在线的团队协作UI设计工具,可以完成原型设计和交互设计，主要功能完成界面视觉设计，作品集排版功能。但Figma部分功能需要付费才能使用，对于初学者来说免费功能已经足够。2.3视觉类软件：AdobeXDAdobeXD一站式UX/UI设计平台，在这款产品上面用户可以进行移动应用和网页设计与原型制作。他的特殊之处在于将UI设计与UX设计进行了结合。设计师可以使用XD高效、准确地完成UI设计图或框架图导交互原型的转变。并且XD与Photoshop、Illustrator和AfterEffects的良好集成，设计师可以再这些软件中进行资源转换、共享。AdobeXD，是UI设计与UX设计进行了结合。设计师可以使用XD高效、准确地完成UI设计图或框架图导交互原型的转变。并且XD与Photoshop、Illustrator和AfterEffects的良好集成，设计师可以在这些软件中进行资源转换、共享。2.3视觉类软件：其他Sktech、Photoshop、Illustrator当然界面视觉类软件还可以使用Sktech、Photoshop、Illustrator来完成，制作阶段设计师可以根据自身实际情况来选择使用的工具。03动态效果类软件动态效果类软件，用于向客户展示交互行为效果。3.1动态效果类软件：AftereffctsAftereffcts“AfterEffects”，这是一款由Adobe公司开发的专业的视频剪辑及设计软件，也是视频后期合成处理的专业非线性编辑软件。例如AE，专业的视频剪辑及设计软件，也是视频后期合成处理的专业非线性编辑软件。3.1动态效果类软件：PrinciplePrinciplePrinciple适用于MAC系统，为web、移动和桌面设计动画和交互式界面的工具，很好结合了各类动效软件的优点，能快速创建可视化的交互原型和赏心悦目动态效果。Principle，一款简单易上手的web、移动和桌面设计动画和交互式界面的工具，但他仅适用于MAC系统。3.3动态效果类软件：Flinto、FramerFlintoFlintomac版是macOS操作系统平台上一款强大的移动应用原型设计工具，它能够帮助你创建良好的可交互式设计原型，在线设计各种效果非常实用，而且有高度的兼容性，可以同时支持和Sketch等应用结合使用，并且可以在网页和移动端设备上运行，这种高度的兼容性使得其非常受欢迎，设计师和产