01第一章1网页交互设计流程初识.pptx

网页交互设计流程初识认识交互设计 知识要点2、网页交互设计流程4、结构层-信息架构5、框架层-界面设计1、什么是交互设计3、用户体验要素6、开发人员配置 什么是交互设计01 … …… …什么是交互设计交互设计交互设计（英文Interaction Design, 缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计的目标可以从“可用性”和”用户体验“两个层面上进行分析，关注以人为本的用户需求 网页交互设计流程重点掌握： √02 网页交互设计流程项目立项、产品分析、交互原型、界面设计、前端开发、后台开发、项目测试、项目上线项目立项产品分析交互原型界面设计前端开发后台开发项目测试项目上线 用户体验要素03重点掌握： √ 用户体验要素用户体验的五个层面战略层范围层结构层框架层表现层表现层框架层结构层范围层战略层视觉设计交互设计 信息架构 功能规格 内容需求用户需求 网站目标功能型 信息型界面设计 导航设计信息设计 结构层-信息架构04重点掌握： √ 结构层-信息架构结构层交互设计信息架构功能型产品信息型产品交互设计:定义系统如何响应用户的请求。信息架构:合理安排内容元素以促进人类理解信息。 结构层-信息架构信息架构以内容为主的web端，信息架构的主要工作是设计组织分类和导航的结构组织分类、导航结构信息架构 结构层-信息架构结构方法信息架构的基本单位：节点层级结构矩阵结构自然结构线性结构常见的结构类型：层级结构矩阵结构自然结构线性结构 结构层-信息架构结构方法-层级结构又叫树状结构或中心辐射结构。它的节点与其他相关节点之间存在父级/子级的关系。 结构层-信息架构结构方法-矩阵结构允许用户在节点与节点之间沿着两个或更多的“维度”移动。 结构层-信息架构结构方法-自然结构节点是被逐一连接起来的，同时这种结构没有太强的分类概念。 结构层-信息架构结构方法-自然结构大部分面对用户产品应该是任务式和浏览式并行的。 结构层-信息架构结构方法-自然结构大部分的产品都不是简单单一的结构，而是充满了层级，跳转与交叉。 结构层-信息架构结构方法-线性结构连贯的语言流程是最基本的信息结构类型。 结构层-信息架构组织原则是我们决定节点分组或独立的标准，不同的组织原则将被应用在不同的区域和层面。信息架构-架构图 框架层-界面设计05重点掌握： √ 框架层-界面设计 框架层… …… …界面设计:提供用户做某件事的能力导航设计:提供用户去某个地方的能力信息设计:传达想法给用户界面设计导航设计功能型信息型信息设计 框架层-界面设计 界面设计 导航设计 信息设计a.选择正确的界面元素1、在网站间跳转使用颜色标识、图标、标签系统和排版等方式，辅助用户进行页面定位。b.能帮助用户完成任务c.容易被理解和使用2、传达出元素和所包含内容之间的关系3、内容和用户当前浏览页面之间的关系 界面设计流程细节推敲文字、颜色、icon大小、统一规范、整体对齐；交互细节、交互操作是否符合用户操作习惯； 交互初稿制作过程统一icon、界面尺寸规范、视觉风格分析背景/需求分析 框架层-线框图线框图线框图是对一个页面的组成部分以及它们如何结合的最直观的描述。 开发人员配置及原型交互分类06 开发人员配置及原型交互分类开发人员配置产品经理UI设计师前端工程师后台程序开发测试人员其他UI设计师前端工程师后台程序开发产品经理测试人员其他 开发人员配置及原型交互分类产品原型的分类草图低保真高保真 开发人员配置及原型交互分类产品原型的分类草图低保真高保真 开发人员配置及原型交互分类产品原型的分类草图低保真高保真 重点掌握：1、关于用户体验的几个层面； 2、结构层（四种结构方法：层级结构、矩阵结构、自然结构、线性结构; 结构层需要输出的架构图） 3、框架层（界面设计、导航设计、信息设计； 框架层需要输出的线框图）小结 本课内容技术 祝学习顺利天津电子信息职业技术学院认识交互设计