信息交互设计- 课件 04 信息架构

信息交互设计第四章-信息架构信息架构

在互联网时代，人们通过网站和移动应用等交互产品来获取大量信息。这些产品通过有效的信息组织、导航、标签、搜索设计，能够为用户呈现合理、有意义的信息架构，给用户带来良好的体验。设计者在进行信息架构设计时，需要考虑用户的需求和行为，为信息建立明确的组织结构，提升产品的可用性和用户满意度。信息架构

信息架构

组织系统(Organizationsystems)如何组织信息，例如，依据主题、用户或字母顺序导航系统(Navigationsystems)如何支持用户在内容间移动搜索系统(Searchsystems)如何搜索信息标签系统(Labelingsystems)如何表示信息，例如科学术语或通俗术语组织体系－精确性组织体系

按时间组织体系－精确性组织体系

按字母顺序组织体系－精确性组织体系

按地理位置组织体系－精确性组织体系

按类别组织体系－精确性组织体系

按层次组织体系－模糊性组织体系

模糊性组织体系通常比精确性组织体系更重要、更有用，以典型的图书馆目录为例，有三种主要的组织体系：你可以用作者、书名或主题搜索图书。作者和书名的组织体系具有精确性，然而，深入研究后发现，图书馆的使用者通常使用基于主题的模糊性组织体系构建模糊性组织体系比较费功夫，而且会引入相当多的主观性成分，然而，其对用户的价值往往超过精确性组织体系严格的用户测试是必要的举措组织体系－模糊性组织体系

按主题组织体系－模糊性组织体系

按主题组织体系－模糊性组织体系

按用户有时候，网站或企业网络会有两组以上可以清楚界定出来的用户。这个时候采用以用户为主体的体系就有其意义。组织体系－模糊性组织体系

按隐喻隐喻时常帮助用户以熟悉的东西了解新的东西。台式电脑的文件夹、回收站等都是实例。探索用隐喻设计的组织体系过程中，也会对网站的设计、组织和功能产生新奇和令人惊叹的想法。对Teletubbies而言，因为多数目标用户都不识字，包罗万象的视觉隐喻法是很棒的办法。组织体系－模糊性组织体系

慎重使用，如MSBOB它是微软于1995年推出的一款产品使用前必须用户登录，点击门环再从用户列表中选出自己。如果列表中没有，必须注册，看上去用户具有“私人”空间组织体系－模糊性组织体系

组织体系－混合组织体系

混合体系混合体系相当常见，这是因为我们很难全都认同某种体系，所以我们会把多种体系组合起来当多种体系要放在一张网页上时，设计者最好将各种体系放置于网页上不同的位置，为用户保留住心智模型。使网站提供灵活性，同时不会造成困惑组织体系－混合组织体系

组织体系－混合组织体系

信息架构形式

导航系统

在现实生活中，迷路不是好事，那会伴随困惑、沮丧、愤怒和恐惧。为了应对这种危险，我们开发了导航工具，以避免迷路，从面包屑到罗盘、地图、街上的路标，以及全球定位系统。人类在导航工具和寻路策略的设计与应用方面展现了十足的创意。对Web而言，导航还不是生死攸关的问题。然而，如果在网站上迷了路，也是很令人困惑和沮丧的结构和组织与建造房间有关，而导航设计则是增加门窗和标识结构、组织、标签、浏览以及搜索系统，都对有效的导航做出贡献导航系统

导航系统

导航系统

导航系统

导航-全局导航

全局导航是指出现在网站顶部或移动应用底部的导航条，用于显示网站或移动应用的主要功能、页面或区域，用户可以从产品中的任何位置访问它们。全局导航通常以水平的导航条的形式呈现，并且在产品的不同页面上具有相同的结构和位置，以提供一致的用户体验。全局导航可以提高用户的使用效率和体验，使用户更容易找到所需的功能和内容，从而提高网站或移动应用的可用性和用户满意度。然而，全局导航的空间有限，可能无法容纳所有功能和内容，设计者在实际应用时需要对其进行筛选和优化。同时，全局导航要求用户先了解和熟悉导航的结构和功能，这对新用户来说可能存在一定的学习成本。此外，在移动端设备上，全局导航的空间更为有限，需要设计者进行更多的优化。导航-全局导航

导航-全局导航

导航-局部导航

局部导航用于辅助全局导航，能够帮助用户快捷地访问网站或移动应用的各个部分。网站或移动应用的局部导航通常放在页面的特定位置，例如页面的顶部、侧边栏、底部等位置。值得注意的是，设计者需要考虑局部导航的布局和排版，以确保它们不会分散用户的注意力，同时避免它们在页面上占用过多的空间，导致页面混乱。导航-局部导航

导航-情景导航

情景导航是指在特定场景下提供的导航方式，其目的在于帮助用户完成特定的任务或浏览特定的内容。通常，情景导航会在特定页面或功能模块中出现，并根据用户当前的环境和目的来提供相应的导航和操作方式。情景导航的优点在于可以提高用户的操作效率，让用户更容易找到和使用相关功能。在特定场景下，情景导航还可以提供更加精细的操作方式，帮助用户更加方便地完成任务。导航-情景导航

导航-面包屑导航

面包屑导航是一种辅助性导航，用于显示当前页面在网站结构中的位置，以及提示如何返回上一级页面。它通常位于页面顶部或者页面主要内容的下方，并以线性方式展示出从网站首页到当前页面的路径。面包屑导航不仅提供了导航功能，还有助于提升用户对网站结构的理解。然而，在页面结构复杂的情况下，面包屑导航的路径会变得很长，不同页面的路径长度也会不一致，这可能会给用户带来混乱感。导航-面包屑导航

导航-站点地图

站点地图是一种提供网站内容和结构的完整视图的导航方式，使用户可以轻松地找到所需信息。它通常以树形结构呈现，展示网站的所有主要内容，如主页、分类目录、文章列表等。站点地图的优点在于它可以提供一个简单的、易于访问的网站结构视图，为用户提供一种直观、快捷的方式来了解网站内容的组织结构。同时，站点地图也可以帮助搜索引擎更好地理解网站结构，从而更好地索引网站内容，提升网站在搜索引擎中的排名。然而，在网站内容非常丰富、结构复杂的情况下，站点地图很容易变得复杂、臃肿，难以有效地传达网站结构和内容信息。导航-站点地图

导航-抽屉导航

抽屉导航/图标式导航/隐藏式菜单导航汉堡图标/三道杠最早出现在1981年的个人工作站XeroxStar许多移动端应用纷纷使用了这样的导航方式，一时之间成为一种设计的趋势导航-抽屉导航的问题

首先，给导航增加了额外的操作原本一次点击就可以到达具体页面，现在需要两次。当然，这不仅仅是汉堡图标的问题，它是所有隐藏式风格导航的问题。其次，隐藏了导航的内容从用户体验的观点来看，用户不应该为了解自己能做什么，而做出任何动作。“分享到Twitter”或“付款”这些操作若不是近在眼前，太容易被用户忽略。用户根本不会去找他们不知道的链接最后，汉堡图标隐藏了网站的当前状态，还有用户所在的位置菜单中的按下状态为用户提供了前后关联信息，而抽屉导航则使它变得隐晦标签

标签(Label)的命名是一种表达形式。就像我们使用口头语言来表达概念和想法那样，我们用标签代表网站上的许多信息例如，“联系我们”就是一种标签，代表一块内容，通常会包括联系人姓名、地址、电话、传真和电子邮箱。你不可能在相当拥挤的网页上把这些信息全部描述出来。文字标签

文字标签主要分为以下几种类型：上下文链接、标题、导航系统、索引词。上下文链接是出现在文档正文或信息块中的文本，通常用于在站点的不同页面之间创建链接，这些链接依赖于上下文。为确保上下文链接标签具有代表性，设计者需重点思考用户期望看到的信息内容。标题标签用于在文本中建立层次结构，这些层次关系通常通过编号、字体大小、颜色、样式、空格和缩进等方式直观地建立。保持标题标签的一致性很重要，因为用户需要它们来指导下一步该从哪里开始，以及在一个完整操作流程中每一步将涉及哪些动作。图标标签

图标标签最常被用作移动端交互系统中导航系统的标签，有时也被用作标题。由于图标标签所表达的意义比文本更加有限，因此它们主要用于导航系统或选项列表。此外，图标标签受限于用户的文化程度与文化背景，这就要求在设计时尽可能采用多数用户能理解的符号隐喻，从而压缩信息传达的空间。标签系统-可能问题

标签的代表性不够标签无法代表它们所链接的内容或者没有把相似的东西编组在一起标签行话成分重，没有以用户为中心像SuperGraphics这一类的标签，是网站以公司内部的行话设计的，可能公司的员工会觉得那些标签十分清晰和明显，而且具有启发性，但用户并不能理解标签不一致风格、用法、粒度标签系统-约定俗成术语

主页/首页——Main,MainPage,Home搜索(Search),寻找(Find）,浏览(Browse）网站地图(SiteMap),内容(Contents),目录(TableofContents),索引(Index)联系我们——Contact,ContactUs帮助——Help,FAQ,FrequentlyAskedQuestions新闻——News,News&Events,News&Announcements,Announcements关于我们——About,AboutUs,About<companyname>,WhoWeAre搜索

搜索是信息交互产品中经常使用的功能，它可以帮助用户快速有效地找到想要的信息，一个设计有效搜索模式的系统能显著提高产品的可用性。搜索系统通常以搜索框加搜索按钮的形式出现，允许用户使用关键词或短语来查找特定信息，并根据搜索结果的相关性和其他因素展示相关信息。虽然搜索系统经常与导航系统集成为搜索导航，但搜索导航无法提供一个明确的导航路径或内容结构，所以它不能完全替代其他导航形式。搜索-视觉线索

1.放大镜图标放大镜图标是一种常见的视觉提示方式，能够让用户快速找到搜索框的位置。放大镜图标是人们普遍认可的搜索标志，即使没有特别说明，人们也知道放大镜图标代表搜索功能。图标设计应该尽可能简洁清晰，但如果只有一个图标而没有输入框或按钮，用户使用起来也会非常困难。2.搜索按钮在搜索输入框旁边设计一个搜索按钮可以帮助用户确认搜索内容，减少用户的认知负荷。不是所有用户都习惯使用回车键来确认操作，因此搜索按钮必不可少。搜索-输入特性

1.透明占位符添加占位符可以作为有用的提示，告诉用户需要哪些信息。占位符能够帮助用户知道如何搜索，并且不会因编写错误导致查询失败而感到沮丧，但是这些占位符需要保持简短。2.引导查询，即自动提示用户在很多时候会忙于思考搜索结果，而无法进行适当的搜索查询操作。自动提示能够帮助用户构建查询，从用户输入的初始字符来预测查询内容，并弹出自动提示。3.所在位置绝大多数用户希望在界面的顶部中心或右上角找到搜索功能。当访问者需要用到搜索功能时，会下意识地找寻界面的右上角。如果将搜索框放置在其他位置，用户就需要付出更多的努力寻找搜索框。根据日常浏览的习惯，访问者首先注意到的是界面的顶部。在界面顶部中心或右上角放置搜索框，有助于用户快速定位到搜索位置，降低用户的寻找成本。卡片分类法

开放式不预设分组用户自行决定所有信息项应该有几个分组封闭式发起人预先设置好卡片分组被调研者按照自己的理解放入预设好的分组开放式卡片分类

？类？类香蕉西兰花咖啡炸薯条苹果鸡蛋米饭香蕉封闭式卡片分类

水果类蔬菜类饮料类粮食类其他类西兰花咖啡炸薯条香蕉鸡蛋米饭苹果混合