人机交互设计 课件 第6、7章 信息架构、界面设计

人机交互设计第六讲信息架构延迟符信息架构概述信息架构组成系统信息架构方法及流程目录CONTENTS12301信息架构延时文字01：信息架构概念02：信息架构的结构03：案例分析01信息架构信息：英文叫作Information，是指音讯、消息、通讯系统传输和处理的对象，泛指人类社会传播的一切内容。“信息之父”香农（Shannon）是这么说的：信息是用来消除随机不确定性的东西。信息架构（InformationArchitecture）信息架构（InformationArchitecture）指对某一特定内容里的信息进行统筹、规划、设计、安排等一系列有机处理的想法。它就像某个具体建筑的骨架。而另一个概念——信息结构，就好比建筑的风格，是信息架构的模型。01信息架构（1）节点：节点是信息架构中最基本的单位，节点可以对应任意的信息片段或组合，它就像信息存储的容器，在这个容器里存储的内容可大可小。01信息架构的结构自上而下可以理解为是在做分解自下而上可以理解为在做归类（2）结构的分类：用来定义内容条目和群组之间的关系类型。①层级结构。01信息架构结构②矩阵结构。将信息从多个维度进行分类，便得到了矩阵结构。网状结构01信息架构的结构③网状结构是指没有明确从属关系和分类关系，节点与节点间呈不规则的连接方式的信息结构。我们所熟知的“互联网”、“社交网”就是属于网状结构。④线性结构：节点与节点首尾相连，便构成了线性结构。01信息架构结构02信息架构组成系统杰西·詹姆斯·加勒特（JesseJamesGarrett）在《用户体验要素》这本书中将用户体验的流程分为五个层次：战略层、范围层、结构层、框架层、表现层。信息架构包括组织系统、导航系统、搜索系统和标签系统这四个方面。02信息架构组成系统1.组织系统（OrganizationSystems）组织方式：以用户为中心来组织元数据，将以实体为中心的信息结构改为以用户为中心的信息结构；分为组织体系和组织结构。（1）组织方案（Organization

Scheme）①

精确性组织方案②

模糊性组织方案电子购物类APP、图片社交类APP以及微信的架构重庆邮电大学学生APP作品《地理里》（2015级张璐婷）02信息架构组成系统2．标签系统（LabelingSystems）大家常见的标签包括文字标签和图标标签，其中以文字标签最为普遍，文字标签又经常表现为以下几种形式：情境式链接、标题、导航系统选项、索引术语和图标。需要注意以下几点设计标签系统的原则：（1）尽量聚焦网站目标：明确谁是目标用户，网站提供什么，怎么用，何时用等问题。简化标签设计，更体现更好的效率。非用户语言通常会出现在一些专业性很强的产品上。（2）设计统一的标签系统：在思考如何设计时，要明确设计统一的标签系统，而不是分开设计散落在每个页面上的标签。02信息架构组成系统3．导航系统（NavigationSystems）互联网产品中的导航系统，防止你在产品中迷路，告诉你现在所处的位置，能去哪，如何去。一般网站的导航系统分为：全站导航、区域导航、情景式导航。（1）全局导航指网站或App的每个页面均显示的全局性的导航。（2）区域导航作为全局导航的辅助工具，通常用在子栏目中，以满足各区域的连接。02信息架构组成系统3．导航系统（NavigationSystems）一般网站的导航系统分为：全站导航、区域导航、情景式导航。（3）情景式导航：除了全局导航和局部导航，其他内嵌在产品内容中的链接或者可点击的元素，都被称为情景式导航，情景式导航能让用户实现产品内容直接的跳转，从而完成用户目标。02信息架构组成系统4．搜索系统（SearchSystems）互联网发展速度日新月异，新建立的网站越来越多，单单的目录分类已经不能满足用户查找信息的需求，搜索便应运而生。用户只需要搜索关键词，就能在搜索结果里面找到自己想要的内容。主要经历研究

、策略

、设计、实施和管理等几个步骤。03信息架构方法和流程03信息架构方法和流程1．研究研究就是基于情景、内容、用户的方式和原因的分析，我们常用的方法用户访谈，启发式评估，用户测试，竞品分析和卡片分类法。（1）背景研究（2）研究会议（3）与利益相关者进行访谈（4）技术评估（5）启发式评估（6）内容分析（7）内容映射（8）标杆法（9）搜索日志和点击流数据分析（10）测试用例和人物角色（11）情景式调查（12）用户访谈和用户测试03信息架构方法和流程

2．策略信息架构的策略是一种更高层次的框架。信息架构的策略包括：信息架构管理、技术整合、文件类型的识别、元数据字段的定义、导航系统的设计等。在研究过程中，通过用户面谈、内容分析、标杆分析、数据分析来调整策略。03Instagram信息架构蓝图模式信息架构方法和流程

3．设计03信息架构方法和流程

4．实现：信息架构的构建需要相关的实现工具03在建立信息架构之前确定产品目标（战略层）；通过用户研究预测用户对产品可能产生的反应（范围层）；合理运用认知心理学原理验证用户对产品可能产生的反应（结构层）；根据产品信息结构规划导航（框架层）；注意视觉层次在内容的视觉表现中所发挥的重要作用（表现层）。信息架构方法和流程

5．管理03需要注意，这些层级不是完全割裂的，如果我们要求每个层级的工作在下一个层级的工作之前完成，那么必然引发不良的效果。相反地，我们应确保任何一个层级中的工作都不能在其下一个层级的工作完成之前而提前结束。界面下不可见的信息架构内容信息架构方法和流程04构建信息架构的原则在构建信息架构的过程中，需要注意以下原则。（1）尽量窄化范围，开发一致的标签系统而非零散的标签。（2）语义清晰，使用用户能够理解的语言。（3）主干路径清晰。（4）依据用户场景、功能（内容）、用户的心智模型对产品目标进行分解。（5）不同功能模块之间的区分度足够高，使用户能够明确在什么场景中使用哪些功能模块。（6）内容应保持前后一致、紧密性强，并确保前后功能在一条流程线上。（7）对同一个页面中的条目而言，应设置条目数量的上限。概念模型：概念模型是对客观实体系统的特征要素、相关信息和变化规律的一种抽象表述，它反映了系统的某些本质属性。概念模型描述了实体系统各要素之间的相互关系，以及系统与环境之间的相互作用。（1）概念模型的3个特征。①概念模型是对实体系统的抽象或模仿。②概念模型是由与分析问题相关的因素组成的。③概念模型用来表明这些因素之间的关系。05概念模型（2）创建概念模型的意义。①对实体系统很难做实验，或者根本不能做实验。②在现实中虽然可以做实验，但是利用概念模型更便于理解。③概念模型易于操作，利用概念模型的参数变化来了解现实问题的本质和规律更为经济方便。05概念模型（3）概念模型的分类。抽象模型和形象模型。动态模型和静态模型、连续模型和离散模型、确定性模型和随机性模型等；宏观模型、中观模型、微观模型；工程模型、科研模型、管理模型等。按照概念模型的形式进行划分：①抽象模型：抽象模型没有具体的物理结构，只用数字、字符或运算符号来表示，主要内容包含公式、图形和表格等。②形象模型：形象模型分为模拟模型和实物模型。05概念模型2．对概念模型的认知（1）概念模型所对应的阶段。①识别用户需求。②开发可供选择的多种设计方案。③构建设计方案的可交互版本。④评估设计。05概念模型2．对概念模型的认知（2）创建概念模型时需要注意的事项。①了解用户在执行日常任务时会做什么。②选择交互方式，是主动式的提问方式，还是被动式的填表检索方式。05概念模型3．概念模型建模的一般方法传统的概念模型的建模方法分为三个步骤，即分析→描述→验证，其中描述又分为结构化描述和对象化描述，各步骤的解析如下。（1）概念模型分析。（2）概念模型描述。①结构化描述。②对象化描述。（3）概念模型验证。05概念模型实例读者请求服务用例①人物角色的创建。32.实例..图书管理员处理借书、还书的用例33..实例.系统管理员进行系统维护的用3435②读者借书的时序图③协作图协作图着重显示了某个用户行为中各个系统元素之间的关系，而不再重点强调各个步骤的时间顺序。36④工序约束分析——用户任务一览表当所有任务分析完毕，就可以用一览表的形式描述系统中的所有用户及其可能需要完成的所有任务。37任务读者图书馆管理员系统管理员书籍信息查询、读者信息查询√√借书√√还书√√书籍预定√√增加、删除或更新书目√增加、删除书籍√增加、删除或更新读者帐户信息√⑤任务金字塔任务金字塔描述了不同层次的任务之间的关系。任何一个任务都可能包括若干子任务，从而构成金字塔状的结构。以读者查询图书为例38课后思考题1．什么是信息？请解释说明。2．常见的信息架构有几种层级结构？它们有哪些特点？3．简要叙述构建信息架构的的流程。4．什么是概念模型？概念模型有哪些类型？5．概念模型的建模方法有几种？6．访问某一网站或App，结合所学的知识，完成该网站的用户体验报告。延时符谢谢观看THEEND延迟符人机交互设计第七讲界面设计延迟符界面设计原则界面设计前的任务分析界面设计流程目录CONTENTS12301界面设计原则1.1从用户角度进行思考1．思考方向（1）要清楚不同类别的用户在什么样的环境下喜欢哪些视觉元素。（2）要清楚哪些视觉符号有通用含义，以及适用于哪些类别的功能。01界面设计原则1.1从用户角度进行思考2．思考范围用户的种类、层次、能力等因素各不相同，审美差异和需求的特殊性必然存在，满足所有用户的需求是不可能的。01界面设计原则1.1从用户角度进行思考3．思考立场作为产品的使用者，用户希望花最少的时间学习产品的架构和原理，并以最快、最便捷的方式置身于产品内容中，这就要求产品在引导方面注重合理性和科学性，没有其他复杂的干扰因素，使用户能在最短的时间内掌握产品的使用方法。01界面设计原则1.2功能与界面的匹配（1）“一致性”体现在以下四个方面：①界面视觉元素的标准统一、色彩呼应、构成相似。②功能实现的流程应保持一致、功能所在的位置应保持一致。③对象的功能应与用户的期待保持一致。④交互设计应与用户的行为惯性保持一致。01界面设计原则（2）“信息获取的有效性”体现在以下四个方面：①便于用户获取信息。②信息应在明显的位置进行展示。③信息量不宜过大。④提供结果优于提供数据。02界面设计前的任务分析任务分析也被称为“迭代法”，是一种不断使用变量的旧值递推新值的过程。2.1任务分析概述任务分析分为以下五个阶段，用户始终是每个阶段的核心。

（1）用户调研阶段。（2）任务建模阶段。（3）需求定义阶段。（4）框架定义阶段。（5）优化阶段。02界面设计前的任务分析2.2任务分析的流程任务分析具体展开，按流程包含了以下的基本分析方法：决策表分析流程图分析语句描述时间列任务清单综合使用这些基本方法，才算一个完整的任务分析，供设计师找到具体将影响界面设计的环节。02界面设计前的任务分析2.3任务模型的实施任务模型是用户为了完成任务所采用的有目的的行为过程。一般来说用户任务模型包括：用户行为动机、目的、行为计划、操作、结果评估。03界面设计流程3.1结构设计阶段通过总功能明确用户目标，进而锁定用户群体，分类用户以便划分不同层级的操作界面。通过功能分支，确定处于同一层次目录；再利用菜单划分目录类别、页面板块分区细节内容，引导用户操作。03界面设计流程3.1结构设计阶段03界面设计流程3.1结构设计阶段03界面设计流程3.2交互设计阶段1．让用户感觉到能够“控制局面”2．使用图标和分类提示替代文字03界面设计流程3.2交互设计阶段3．避免出现“门口效应”03界面设计流程3.2交互设计阶段4．使用用户语言而非技术语言进行交互5．重视微妙的用户心理活动和情感变化03界面设计流程3.3视觉设计阶段1．图片的配置。（1）照片要兼具质量与刷新速度（2）照片的选择和图标的设计，其内容和风格都需要针对平台需要而定。03界面设计流程3.3视觉设计阶段2．文字的类型。（1）字体的装饰性与信息的传递效率呈现负相关。（2）文字的尺寸从小到大变化在信息识别度之间的关系类似开口朝下的抛物曲线。03界面设计流程3.3视觉设计阶段3．留白的比例和位置。（1）留白不仅可以用于分类显示内容，还能够参与到构图之中。（2）当板块较多时，留白间隙则需要根据功能分类进行规范统一，以便达到更清晰的分区和美观的效果。03界面设计流程3.3视觉设计阶段4．页面元素的逻辑。（1）需要参考人眼的视觉习惯和手的行为习惯。（2）不同的逻辑层级应该由不同的表现形式，同理，相同的逻辑层级则使用同一种表现形式，以便更好的提示用户按流程正确操作03界面设计