第一章交互设计开发流程与设计分析

交互设计概述认识交互设计知识要点2、交互设计的流程4、产品交互原型的分类5、交互设计的常用软件1、交互设计的基本概念3、开发人员的配置6、项目实施-交互设计案例分析交互设计的基本概念01

…………什么是交互设计交互设计交互设计（英文InteractionDesign,缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计的目标可以从“可用性”和”用户体验“两个层面上进行分析，关注以人为本的用户需求交互设计的流程重点掌握：√02网页交互设计流程项目立项、产品分析、交互原型、界面设计、前端开发、后台开发、项目测试、项目上线项目立项产品分析交互原型界面设计前端开发后台开发项目测试项目上线开发人员的配置03重点掌握：√开发人员的配置开发一款Web端或移动端交互设计产品，通常是需要一个团队的成员来共同来完成，团队中各成员分工明确，协同处理，才能让产品更完善，更符合用户的预期，人员配置一般包括：产品经理、UI设计师、前端开发工程师、后台程序开发人员以及产品测试人员等。人员配置另外，当产品上线后，经过多个版本的迭代，用户数量会越来越多，这时就需要大数据工程师；如果需要将产品的代码部署到一个服务器上，那么则需要运维工程师，日常的维护都是由运维工程师来负责；如果涉及到推广还需要有运营、市场营销、售前/售后工程师等。UI设计师前端工程师后台程序开发产品经理测试人员其他产品交互原型的分类04重点掌握：√产品交互原型的分类草图草图通常用于产品早期的概念阶段。在项目立项的早期，对于产品的功能及业务场景都处于规划阶段，没有明确成熟的产品方案，团队成员在项目规划，进行头脑风暴的会议时我们需要能够快速呈现产品雏形的原型，且便于及时修改产品交互原型的分类低保真原型当我们明确了产品的业务需求及使用场景以后，产品经理和交互设计师们可以使用低保真原型来快速设计产品的概貌。产品经理和交互设计师们通过项目早期阶段明确了产品的功能需求及业务范围，根据业务会议上确定的产品方案，首先需要梳理清楚产品的功能结构和信息结构，根据业务需求推导出详细的功能点。工作产品的战略目标、需求范围、功能结构都清楚以后，就可以开始正式绘制线框图了，线框图又称为低保真原型产品交互原型的分类高保真原型高保真原型常用于向高层领导进行产品演示或者向投资人演示产品概念，以寻求项目融资。高保真原型又可以成为产品的Demo，除了没有真实的后台数据进行支撑外，几乎可以模拟前端界面的所有功能，完全是一个高度仿真产品，对于一些非专业的高层领导、老板及投资人，他们希望看到的是一个无线接近线上产品的Demo，能够尽可能详细的了解产品的功能及业务需求，从视觉显示以及交互动作上都和真实产品大致相同交互设计常用软件05重点掌握：√交互设计常用软件

VisioVisio是Office软件系列中的负责绘制流程图和示意图的软件。Visio是一款便于IT人员和商务人员就复杂信息、系统和流程进行可视化处理、分析和交流的软件。使用具有专业外观的Visio图表，可以促进对系统和流程的了解，深入了解复杂信息并利用这些知识做出更好的业务决策。

TeambitionTeambition团队协作软件具有无纸化、移动办公、及时沟通和工作标准化等特点，团队的领导人员使用该软件可以保证自己的团队做到，目标清晰、分工明确、协同高效、奖罚分明。Teambition在管理方面可以实现跨项目、跨部门来协调工作。交互设计常用软件

墨刀墨刀是一款在线原型设计与协同工具，用户群体包括：产品经理、设计、研发、运营销售、创业者等，能够搭建产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅，还可以展示产品想法、向客户进行Demo展示或是在团队内部协作沟通进行项目管理等操作。

AxureRPAxureRP能帮助设计者快速创建基于网站架构图的带注释页面示意图、操作流程图以及交互设计原型，并可自动生成用于演示的网页文件和规格文件，以提供给用户演示或交互设计开发，并具有新的硬件加速渲染引擎，旨在加快保存和加载的文件结构，以及用于平滑缩放和更快编辑的流线型画布。交互设计常用软件

AdobeXDAdobeXD主要用于设计UI页面并为其添加简单的交互效果。它能够实现设计页面到原型页面的转换，并将文档共享给项目团队的其他人员。AdobeXD已实现与Photoshop、Illustrator和AfterEffects的良好集成。这样就可以在这些应用程序中进行设计，再将这些资源导入AdobeXD中，然后使用AdobeXD创建和共享原型。AdobeXD支持SVG文件和位图文件，且不会降低保真度。项目实施-交互设计案例分析06项目实施-交互设计案例分析案例分析我们设计一个高保真交互产品之前，先了解几个概念：①产品思维：从用户价值出发，在满足商业战略和业务目标的同时，寻求产品路径，满足用户需求。②线框图、原型图、效果图：线框图是框架，是一种低保真的设计产物；原型是一个应用程序/网页的工作模型，原型的目标是模拟用户和界面之间的交互，原型图的保真度应与思维的保真度相匹配，并且原型可以是低保真度，中保真度和高保真度；效果图就是高保真。③扁平化设计：去除冗余的装饰效果，强调抽象、极简和符号化，看起来更直观，目前主流的扁平化设计风格，降低了我们做高保真原型的门槛。下面我们来举例说明制作高保真交互原型设计时，将产品的用户体验作为设计思路，同时考虑在交互设计时要如何保持产品思维的过程。项目实施-交互设计案例分析案例分析（1）用户行为路径我们以电商售后App平台管理的界面作为示例，需求简单描述为：报修人在平台填写保修单，管理员收到信息后，指派维修人员进行维修。首先我们要进行低保真原型图的交互设计，如图所示，用户的行为路径是：管理员在列表页可以看到待派工的工单，然后进入到详情页，看完工单的详细信息以后，在最下方选择维修师傅前去维修。项目实施-交互设计案例分析案例分析（2）功能优先排序工单通常有很多条，在做功能交互设计时需要有一个搜索功能，在做低保真交互设计时，只绘制一个搜索框即可，如图所示。在做高保真原型时，我们还是去参考竞品，我们发现搜索方式常见的有两类，一是明显的搜索条，另一种是搜索按钮，我们来思考下我们做的这个电商售后平台的用户体验，对于用户来说，他们使用产品的主要目的是处理当前事务，而对应历史数据的查询，使用情况较少，也不存在对于其他类型数据的查询，看到的大多是和自己相关的工单数据，做高保真交互设计时