1、交互设计设计思维与实践I n t e r a c t i o n D e s i g n T h i n k i n g a n d P r a c t i c e第五章：信息架构与设计实现PART 1 Business 商业 1.1 组织系统设计PART 2 Information 信息 2.1 界面流程图 2.2 标签系统设计 2.3 导航设计 2.4 站点地图CONTENTPART 3 Design 设计 3.1 纸上原型 3.2 实物模型 3.3 高保真原型 3.4 手势设计 3.5 隐喻设计 3.6 界面风格指南 3.7 布局设计 3.8 动态效果设计及音效设计 3.9 移动端浏览结
2、构布局设计 3.10 Web浏览结构布局设计交互设计第五章:商业模型与概念设计 Before 写在前面1原型在梳理产品信息架构、功能、流程并进行界面设计中扮演着重要的角色，它能在表现层将设计合成为一个逻辑整体，使客户和设计师一起看到未来交互的软件蓝图、功能和效果，获得较真实的感受和未来的设计思路。通过原型整合体，使开发人员和设计人员对产品目标一目了然，这相当于做了一份详细的需求分析。这一阶段工作包括原型设计、信息架构设计和视觉、交互设计。交互设计第五章:信息架构与设计实现 PART ONE 商业2定义 组织系统是为我们展示信息的各种方式。它与标签系统、导航系统和搜索系统合为信息架构的四大组件。
3、组织系统的内容由两部分组成：组织体系和组织架构。以 Web 的组织系统设计作为示例：（1）Web 的组织体系可以分为精准性组织体系和模糊性组织体系两种。精准性组织体系主要有三种类型，按字母顺序、按年表和按地理位置，这种体系适用于已知条目搜索，因为用户已经知道他们要找的是什么。模糊性组织体系主要有五种类型，按主题、按任务、按用户、按隐喻和混用，这种体系适用于浏览与联想式学习，因为用户对其信息需求也不明确。（2）Web 的组织架构可以分为简单组织架构和混合组织架构。其中简单组织架构有层级式、数据库、超链接和线性组织架构，混合组织架构有简单层级+数据库、目录、中心辐射、子站、集中入口和标签。下表 将
4、 Web 组织架构分类的适用内容、适用人群及作用作了对比。1.1 组织系统设计3Web组织架构分类交互设计第五章:信息架构与设计实现 PART ONE 商业1.1 组织系统设计4案例按任务导向的组织体系 把内容与应用程序组织成流程，对于电子商务而言是最常见的。按用户的组织体系 网站或企业网络会有两组以上可以清楚界定出来的用户，采用以用户为主体的体系更有意义。交互设计第五章:信息架构与设计实现 PART ONE 商业1.1 组织系统设计Ebay首页组织体系DELL首页组织体系交互设计第五章:信息架构与设计实现 PART TWO 信息5 信息架构最初是从数据库设计领域中诞生出来的概念，是一个组织信
5、息需求的高级蓝图。其主体对象是信息，最终目的是帮助用户快速地找到想要的信息，搭建用户与信息之间的桥梁。信息架构的设计往往优于界面设计，明确了产品的功能逻辑及架构才可对界面的控件设计及布局编排提供依据。交互设计第五章:信息架构与设计实现 PART TWO 信息62.1 界面流程图定义 界面流程图，又称 OP 图，它借助原型图描述任务，关注用户与系统交互的操作细节，使整个流程看起来更加生动，帮助设计师检验产品或者服务的功能是否齐全，避免出现流程缺陷。OP 图的构成要素：界面原型图及简单的文字线条。能够表示用户的操作和页面跳转之间的关系，在必要的时候，还需要在 OP 图上添加应用对用户操作的反馈。O
6、P 图作用：不仅能帮助设计人员理解程序的工作流程，也能帮助程序员理解开发程序，在应用开发优化过程中是一种不可或缺的工具。对于一个应用程序，我们至少需要一张 OP 图来表示应用主功能的工作流程，根据需要，可以考虑是否添加其他 OP 图。根据我们对流程架构的不断修改，一个项目中，我们会画多个版本的 OP 图，直至确定最终版本。交互设计第五章:信息架构与设计实现 PART TWO 信息72.1 界面流程图规范在画OP图的时候，需要遵循一些规范：（1）在右上角表明OP图的介绍属性，包括项目、任务、版本、页数、页码及日期。（2）OP图的中心位置放操作的主流程，由界面原型由左至右排列组成。（3）界面之间用
7、箭头连接，箭头上的文字表示需要跳转到下一页面的点击对象。(4)界面原型下面标注页面在整个信息架构中的位置，其中“P1.0”表示一级页面，“1”表示流程一，“0”表示流程顺序，“P1.2-1”表示二级页面。当点击页面某处会发生页面跳转的时候，我们需要在原型下面标注。“”表示页面名称，“”表示跳转，“P1.1”表示将会跳转的页面。(5)当点击页面某处会发生页面内的变化时，我们需要截取页面变化的部分，在旁边说明，下面说明发生这种变化的操作，如果页面有需要程序员注意的变化时，可以用连线和文字在边上加以说明。这种方法适合页面有较多变化的时候。交互设计第五章:信息架构与设计实现 PART TWO 信息82
8、.1 界面流程图规范 (6)当页面内变化不多的时候，我们可以直接用连线连接点击处与变化页面，并在连线上标注操作，这样会更加直观。(7)P1.2-1在整体的信息架构中属于二级页面，并且是从属于P1.2的二级页面。(8)当一个页面的二级页面较多的时候，除了(7)中说到的标注之外，也可以用虚线框将它们框在一起。9案例 已有APP的购买流程与网页版基本一致，从移动设计和使用场景角度显得冗余。项目组对购买流程进行简化后，在原型的基础上用界面流程图阐释该软件优化的主要流程并进行梳理。交互设计第五章:信息架构与设计实现 PART TWO 信息 来自UxLab 2012年的商务随行APP优化项目，该APP主要
9、用于营业员购买公司对外的商品。2.1 界面流程图102.2 标签系统设计定义 标签系统由标题和文字等组成，每个标签都是系统的一部分，系统需要使用对用户来说有意义的语言描述分类目录、选项及链接。标签是最初诞生于印刷业的一个名字，带领人们找到想要的信息，用来标志目标分类或产品详情。在架构设计中，设计标签是不可缺少的一环，它是从我们日常生活中常用的实物标签发展而来的。在Web 2.0 中，标签是一个重要的元素，是一种互联网内容组织形式，是相关性很强的关键字，它帮助我们轻松地描述和分类内容、便于检索和分享。作用 向用户学习；使用词典和词汇生成器；看竞争对手的网站；看搜索日志；使用“Tag”。交互设计第
10、五章:信息架构与设计实现 PART TWO 信息设计灵感来源 设计要求 要匹配概念，并且符合读者的使用方法；应该被一致地使用；应够能够正确地表述目标或内容。11案例1、标签作为情景式链接 此时标签指向其他网页中大块信息的链接或同一网页中的另一位置。交互设计第五章:信息架构与设计实现 PART TWO 信息2.2 标签系统设计2、标签作为索引词语 标签作为提供搜索或浏览的关键词和标题词，关键词和标题词代表的是内容。BBC官网首页的字母索引谷歌搜索页的标签设计122.3 导航设计定义 导航包括导航条、超链接、按钮和其他可点击的项目。导航不是简单的一个条形，它是一个完整的系统，链接了不同的模块和不同
11、的需求，下图为导航的内容和功能：交互设计第五章:信息架构与设计实现 PART TWO 信息内容功能13目标 创造无须费力的信息交互。导航应是用户“看不见”的。交互设计第五章:信息架构与设计实现 PART TWO 信息2.3 导航设计（1）平衡。这里的平衡是指广度（Breadth）和深度（Depth）的平衡，即单个平面上可见菜单项的数目与层级结构中级别数目的平衡。（2）易于学习。导航的意图和功能必须一目了然，不但对以赢利为目的的大信息量网站如此，对任何类型的网站导航也是一样。（3）一致性和不一致性。一致性指的是：链接机制出现在页面中固定的位置；其行为可以预料；有标准化的标签；在网站中看起来都一样
12、。不一致性指的是：导航机制在位置、颜色、标签和总体布局上的变化，这样能够创造网站中的行进感。（4）反馈。导航系统应该给用户提示，指引用户如何导航。文字和标签是人们识别选项或者当前页面主题的主要方式。除此之外，应从两个方面考虑导航的反馈：选择某个导航选项前的鼠标悬停行为，以及过渡到新页面后展示当前的位置。特点14交互设计第五章:信息架构与设计实现 PART TWO 信息2.3 导航设计（5）效率。信息的路径应是有效率的。应努力创造容易看到和点击的导航链接、tab和图标，避开那些不必要的点击。（6）明确的标签。链接的标签对于创造强烈的信息气味是绝对关键的。避免使用术语、品牌名称、缩略语和可爱或聪明
13、过头的字眼。（7）视觉清晰。颜色、字体和布局都有助于更丰富的信息体验。视觉设计（Visual design）不仅仅是让外表看起来不错，它还能创造更好的方向感与更佳的导航可用性。（8）与网站类型相称。导航的成功与否，与其所在网站的类型息息相关。不同类型的网站对网站导航的要求也是不一样的。例如信息类的网站应增加导航的广度，学习类的网站导航就应该简单而明确。（9）与用户需求一致。导航的成功与目标群体及其信息需求有关。但是确定信息需求并不容易，首先要定义好您的目标群体，其次是找出每个群体的主要信息需求。15交互设计第五章:信息架构与设计实现 PART TWO 信息2.3 导航设计 网站导航的类型主要有
14、：横向导航、纵向导航、倒 L 型导航、选项卡导航、下拉式导航、弹出式导航、整页导航、页内导航、上下文链接和相关链接，还包括面包屑、标签云、网站地图、页脚、索引和过滤器这些类型的导航。移动应用的导航模式：有跳板式、列表菜单、标签菜单、画廊式、仪表板、隐喻和大数据量菜单这些主要导航，也有页面切换式、图片切换式和扩展列表式这些次级导航模式。导航类型导航模式16案例（1）纵向导航 一般位于页面左边或右边。置于页面右侧时，内容区域得到强调，至于左侧时，对用户来说更容易识别。交互设计第五章:信息架构与设计实现 PART TWO 信息纵向导航倒L型导航2.3 导航设计（2）倒L型导航 结合了横向导航和纵向导
15、航。如下图所示，横向导航作为主导航在各页面中保持一致，纵向导航根据不同页面内容而变化，适用于大型网站。172.4 站点地图定义 站点地图是一张用户可能访问的页面清单，它能够反映出站点所有页面的层次关系，它是一个网站所有链接的容器。它是根据网站的结构、框架、内容生成的导航网页。一种是 XML 站点地图，这种形式的站点地图用户是不需要看到的，但它能够告诉搜索引擎站点所有的网页以及页面之间的重要性和更新周期。一种是 HTML 站点地图，它帮助用户找到页面上的内容，并且不需要包括所有的页面和子页面。站点地图可以优化网站的搜索引擎，确保找到所有的页面。此外，站点地图还可以起到辅助导航的作用，因为它提供了
16、网站所有内容的概述。交互设计第五章:信息架构与设计实现 PART TWO 信息两种形式18作用（1）为搜索引擎自主提供可以浏览整个网站的链接；（2）为搜索引擎自主提供链接，指向动态页面或者采用其他方法比较难以达到的页面；（3）作为一种潜在的着陆页面，可以为搜索流量进行优化；（4）如果访问者试图访问网站所在域内并不存在的 URL，那么这个访问者就会被转到“无法找到文件”的错误页面，而站点地图可以作为该页面的“准”内容。交互设计第五章:信息架构与设计实现 PART TWO 信息2.4 站点地图19案例交互设计第五章:信息架构与设计实现 PART TWO 信息小型网站星巴克官网Starbucks2.
17、4 站点地图Intel的网站地图20交互设计第五章:信息架构与设计实现 PART THREE 设计 这一阶段的重点是原型设计及界面设计。原型除了带给客户感官上的东西外，还能在做深入调整前就收集反馈。编码的代价是很大的，系统重构的代价更大，可能会导致项目的目标无法完成。但是在原型中改变一些重要的交互行为或布局等所花费的也只是一点点沟通的时间，并且通常一个人就能对原型进行构建和维护，不会打断其他进度。213.1 纸上原型交互设计第五章:信息架构与设计实现 PART THREE 设计定义 纸上原型是低保真原型的一种，虽然很粗糙，但通过纸面的转换能使用户得到系统真实的反馈，允许多次评估和迭代，从而得到
18、改善设计的信息。22优点（1）使用较早且经常使用；（2）易于创建，花费小；（3）从纸上模型中可以看出设计思想；（4）不需要特殊知识，任何小组成员都能创建。交互设计第五章:信息架构与设计实现 PART THREE 设计3.1 纸上原型缺点（1）不是交互式的；（2）不能计算响应时间；（3）不能处理界面问题，如颜色和字体大小。23案例 该App主要用于营业员购买公司对外销售的商品，主要针对其“在线购物”和“订单管理”两大功能模块进行流程优化设计，项目组在对购买流程进行简化后，着手绘制纸上原型。交互设计第五章:信息架构与设计实现 PART THREE 设计来自UxLab2012年商务随行App优化项目
19、3.1 纸上原型243.2 实物模型定义 实物模型是使用一些实物元素，表现出现状或者情境，并将它们组合，用以阐述想法或者服务理念。实物模型可以是比例模型或和实物一样大的模型，如果该模型已经实现某些功能，在创建服务模型时也能充当原型，用来表达想法，可以测试其设计。设计者可以使用实物模型来收集使用者的意见及回馈。交互设计第五章:信息架构与设计实现 PART THREE 设计25案例 来自UxLab2014年智能情侣手环设计项目交互设计第五章:信息架构与设计实现 PART THREE 设计该情侣手环设计包括手环的基本功能、健康监测、维护感情、娱乐互动等功能。项目组借助3D打印制作实物模型进行针对性模
20、拟测试，检验功能有效性及可行性。下图为3D打印的实物模型；右图为借助实物模型进行模拟测试的故事版。3.2 实物模型263.3 高保真原型定义 高保真原型是产品逻辑、交互逻辑、视觉效果等极度接近最终产品的形态的一种沟通媒介，但高保真也意味着大量的资源投入。其主要从两个方面进行研讨：一是视觉效果，二是可用性，包括用户体验。至少包括以下几项内容：交互设计第五章:信息架构与设计实现 PART THREE 设计原型的概念或想法说明；详细交互动作与流程；各类后台判定；界面排版；界面切换动态；异常流处理；要做到让产品经理、程序员、客户能够理解的程度。273.3 高保真原型设计步骤交互设计第五章:信息架构与设
21、计实现 PART THREE 设计灰度线框图：颜色会干扰视觉设计，效果 会影响对易用性的判断。清晰地展示流程：好的操作是易用性的最基本标准。关键功能要有故事板：更好、更快地理解产品。要有注释：图只能展示界面元素，图文并茂才能准确、全部地传达设计思想。有一致性：一致性会降低用户对界面的学习和识别成本。有规范性：好的软件或者网站是规范的。设计注意事项高保真原型设计步骤28案例 来自Uxlab2012年车载社交项目车载社交系统高保真原型界面交互设计第五章:信息架构与设计实现 PART THREE 设计通过调查以广州地区为主的中国智能手机使用人群的使用情况及偏好，探索手机应用程序在车载GPS终端平台上
22、的可行性及优化设计。项目组根据该产品的社交定位、流程以及当时插在系统主流的设计风格设计了高保真原型，如下图所示：3.3 高保真原型293.4 手势设计定义 手势设计是自然交互界面的一种，现在已经在各种智能终端得到广泛的使用。用户付出的学习成本并不高，这是因为大量的自然交互界面都是在真实的物理世界中存在或演绎而来，如上下滑动滚动页面、滑动以平移等。交互设计第五章:信息架构与设计实现 PART THREE 设计设计原则（1）符合认知和使用习惯：目前已经有大量的手势交互设计诞生，并被广泛使用。手势交互应该符合并培养用户的认知和使用习惯。否则会增加用户的学习和记忆成本，降低产品的体验。（2）考虑场景限
23、制：空间、时间、其他任务的进行等因素，都可能会影响用户的使用。例如，玩游戏时，会投入大量的精力来完成交互，游戏的手势可以复杂一些。而在相对狭小的驾驶座舱中，用户最关注的是自身的驾驶安全，交互手势力求简单高效，并减少误操作的发生。（3）即时反馈：在手势交互的过程中，即时的反馈能够提高用户的投入度。即使反馈包括动画效果、震动、语音提示等。30案例交互设计第五章:信息架构与设计实现 PART THREE 设计 论文探究驾驶过程中的手势设计，将它们分为了唤醒、主程序正向切换、主程序反向切换等8个分类，并对此设计了实验，进行了垂直分析和水平分析。下表列举了8个主要手势及其对应任务，以及操作后的信息显示内
24、容。3.4 手势设计手势操作一览表31案例（续上）交互设计第五章:信息架构与设计实现 PART THREE 设计3.4 手势设计实验希望解决的问题有：实验期望得到的结果有：来自UXLab硕士论文基于车内交互场景的用户参与手势设计32案例（续上）交互设计第五章:信息架构与设计实现 PART THREE 设计3.4 手势设计 来自UXLab硕士论文基于车内交互场景的用户参与手势设计33案例（续上）交互设计第五章:信息架构与设计实现 PART THREE 设计3.4 手势设计实验希望解决的问题有：软件由Unity3D制作完成。下图为模拟器中的地图全览。由工作人员发出指令，然后测试用户根据任务做出手势
25、，屏幕抬头显示器呈现信息作为反馈。用摄像机记录测试用户的反应时间和手势，同时有一个观察者观察任务并做详细笔记。过程记录方法：1、观察法：测试过程、驾驶过程、操作过程将被录像。2、出声思维方法：测试用户操作同时要描述他们的动作，观察者可借此了解测试中的交互流程和原型当中的错误。3、访谈法：完成测试后对用户进行访问，对实验节奏和流程的感受以及任务的设置是否有看法。来自UXLab硕士论文基于车内交互场景的用户参与手势设计34案例（续上）交互设计第五章:信息架构与设计实现 PART THREE 设计3.4 手势设计实验步骤：来自UXLab硕士论文基于车内交互场景的用户参与手势设计35案例（续上）交互设
26、计第五章:信息架构与设计实现 PART THREE 设计3.4 手势设计测试后，填写如下打分表，对手势操作难度进行打分。来自UXLab硕士论文基于车内交互场景的用户参与手势设计填表后对用户进行访谈，并对各个任务进行了垂直和水平分析。363.5 隐喻设计定义 修辞学中把两个事物因在特征上存在某种类似之处，用其中一个事物（喻体）来指代另一个事物（本体）的修辞方式叫做隐喻。隐喻也是人的一种基本的认知思维方式，它可以帮助人们以熟悉的事物了解新的事物，让人通过已有认知去认识和理解新的、抽象的东西。使用隐喻设计界面时，用户能够比较直观地了解内容和功能。交互设计第五章:信息架构与设计实现 PART THRE
27、E 设计界面元素是用户熟悉的事物（物体或者使用方式）用户的大脑能更轻易地进行推理在界面元素与功能之间建立直觉联系不必了解产品真实的运行机制现实世界的东西细节较多，用户对于功能的描述过于具体过多的装饰元素使得界面复杂，过多地抠细节使得图像复杂装饰可能会变成噪声影响用户对有价值内容的阅读和对功能的理解优点缺点37案例交互设计第五章:信息架构与设计实现 PART THREE 设计 电脑“桌面”的隐喻，就像是日常生活中的桌面一样，电脑“桌面”上的东西可以自由摆放，也可以按照规律排列，每个图标都代表一个文件或程序，而文件夹图标则代表文件或者程序的集合。例如苹果电脑的垃圾桶，按照用户一惯的认知，该“垃圾桶
28、”应该是用来存储暂时不用的文件，必要时可以彻底删除，但是苹果电脑对于退出可移动存储设备的功能设定是将其拖进垃圾桶即可退出，这样很容易让用户产生疑惑，担心会一并删除可移动存储设备中的文件。反例3.5 隐喻设计383.6 界面风格指南定义 界面风格指南是指一套相关预设计元素、图形和规范的集合，其用途是保证负责网站不同部分工作的设计师或开发人员之间保持协调一致，并最终打造出核心化的体验。界面风格指南能够保证不同的页面共同拥有一套核心的体验效果，还有助于保证未来的开发或第三方创作工作不偏离最初的品牌路线，能够与整体品牌保持一致。交互设计第五章:信息架构与设计实现 PART THREE 设计作用（1）保
29、证不同的设计师不会过多地根据个人的喜好对工作内容进行阐述或改变、调整风格样式。（2）在开发阶段，预先设定好的网站元素可以让开发人员拿来直接并反复使用。（3）这样还可以减轻工作量，因为他们能事前看到需要编写代码的元素，心里对最终成果的样子有一定的预期。39案例 该论文对现有社交媒体与运动进行了交叉分析，在此基础上，提取了对应的人物角色、场景剧本、需求框架等。最后根据调研结果，结合调研分析出的功能框架，拟定了“寻找用户伙伴”这一主题的应用设计实例，对设计实例进行了功能原型设计和视觉设计，并针对该软件设计界面做出一系列风格指南。交互设计第五章:信息架构与设计实现 PART THREE 设计来自中山大
30、学硕士论文休闲运动的移动社交行为研究预设计3.6 界面风格指南设计风格 运动为主题，风格定位活泼、明亮。页面取色分布图如下图所示：布局 布局尺寸设计说明如下表所示：控制元素 控制元素设计说明如下表所示：403.7 布局设计定义 布局设计通常离不开使用的设备，硬件屏幕尺寸的变化意味着相同的功能模块需要根据用户操作习惯的不同做出相应兼容适配性的改变。右表以手机端布局为例介绍移动设计中的布局类型及特点。交互设计第五章:信息架构与设计实现 PART THREE 设计41案例 来自Uxlab2012年云社区设计项目首页版式布局划分交互设计第五章:信息架构与设计实现 PART THREE 设计项目目标是简
31、历基于遥控器设计数字电视界面用户行为规范，在交互设计阶段，项目组设计了交互电视端、Web端以及手机端三种呈现形式。在界面设计前，项目组岁每个终端的布局版式设计都进行了详细的设定：3.7 布局设计版式设计右图对首页的版式布局进行了划分，每部分说明如下：42案例（续上）来自Uxlab2012年云社区设计项目首页布局交互设计第五章:信息架构与设计实现 PART THREE 设计每部分内容进行界定后，设计师还需要给出每块布局的位置大小，首页布局如下图所示：3.7 布局设计433.8 动态效果设计及音效设计动态效果设计定义 动态效果设计，有时也称为 Motion Graphic Design，即运动图形
32、设计。严格意义上讲，运动图形设计是动态效果设计里一个细分的风格，但由于它极具代表性且作品数量众多，在一些专业人士的定义里两者逐渐趋同。它是遵循平面设计的原则和视听语言，用视频或动画技术创作出一种动态影像的设计形式。常见的应用是电影的片头片尾，在广告末尾的标志动画，以及电视包装当中常用的 logo 演绎等。随着行业的不断发展，动态效果设计涉及的领域也开始细分，越来越多的从业人员从电影、电视这些传统的领域向其他新媒体转移，这其中就包括互联网行业。动态效果设计主要应用于产品展示、品牌建设、动态原型、趣味性应用等。交互设计第五章:信息架构与设计实现 PART THREE 设计443.8 动态效果设计及
33、音效设计动态效果设计目的（1）在用户体验上为了达到某种目标的引导 早期互联网产品动画较少时，大部分动态效果都很强的目标性。如 iOS 上 book 的翻页效果，模拟真实的翻书效果让用户适应。（2）让界面更灵动活泼 因为现在越来越流行扁平化，所以设计师都开始使用更简单的元素尽量去突出内容。但是纯粹的扁平显得太粗糙了，给人一种界面很死板、没设计的感觉。而动态效果可以让扁平的界面更活泼。交互设计第五章:信息架构与设计实现 PART THREE 设计举例 在动态效果设计中，转场动态效果是为了使不同界面切换更加平加平滑顺畅，或暗示给用户一种新的可用手势操作方式。一般而言，转场动态效果在 App 中给用户
34、指引方向，防止用户“迷路”。453.8 动态效果设计及音效设计音效设计定义 音效设计是一种和声音相关的研究和设计过程。在该过程中，声音被看作是传递信息、含义及交互内容的美学与情感品质的重要渠道之一。音效设计是交互设计和声音处理的交叉学科。在语音交互设计中，声音既可以作为过程的展示，又可以作为输入的中介，达到调节交互的目的。在封闭环境下的交互中，用户的听觉和行动间有紧密的连结关系。听音不但可能激发用户产生一种心理符号，也可能会让用户为自己的反应做准备。声音的认知符号可能和行动计划模式相联系，声音也能为用户提供进一步反应的线索。音效交互同时具有影响用户情感的特点，声音品质是否良好影响用户的交互是否
35、愉快，操作的困难程度亦影响用户的操控感。交互设计第五章:信息架构与设计实现 PART THREE 设计463.9 移动端浏览结构布局设计基本概念隐喻：尽可能以现实世界中的对象和动作来作为该应用中的对象和动作的模型。这有助于用户快速理解和使用该应用。设计习惯用法：设计要符合用户的行为习惯，勉强使用不恰当的隐喻，反而会增加用户的困惑。直接操控性：让用户感觉他们正在控制一些有形，而非抽象的东西。遵循直接操控原则的好处是，用户更容易理解他们动作所引起的结果。少输人多选择：程序比人更擅长记忆选项列表、命令、数据等信息。保持最少的文字输人，以便于把用户从需要花费大量时间的输入中解放出来。反馈：基于直接操控
36、性的原则，除了最终结果外，用户还需要立即看到他们操作的结果以及在系统漫长的进行中的实时状态。用户可控性：用户可控性允许用户(而非程序自身)来开始和控制动作。交互设计第五章:信息架构与设计实现 PART THREE 设计473.9 移动端浏览结构布局设计设计难点与要点移动应用设计的难点主要有以下几个方面：屏幕尺寸小，没有足够空间展示内容 不同设备屏幕宽度不同 触屏时手指不容易准确点击到目标 文字输入有困难 不同的使用环境信息的呈现方式截然不同 周围环境和有限的注意力 交互设计第五章:信息架构与设计实现 PART THREE 设计移动应用设计的要点主要有以下几个方面：用户使用某手机客户端只会在特定
37、情境下，不需要网站的所有信息 取其精华，只保留用户最希望获取的信息 设备提供的硬键盘、硬件能力（如手势等）十分重要 线性化内容 优化交互流程，减少用户操作负担483.9 移动端浏览结构布局设计移动应用的使用方式及组织方式移动应用的使用方式有以下几种：（1）查找/发现（急需信息，基于地点位置）（2）探索/娱乐（无聊，基于地点位置）（3）签到检查（check-in）/状态（重复/微任务处理）（4）编辑/创建（紧急调整，微任务处理）交互设计第五章:信息架构与设计实现 PART THREE 设计移动应用的信息组织方式：一、精确性组织体系 信息可以按以下集中方式组织：字母、位置、时间、连续区间、数字、种
38、类或是随机等。二、模糊性组织体系（一）按任务 按任务的组织体系是把应用程序组织成流程、功能或工作的集合。（二）按主题 以手机常见。（三）按隐喻 隐喻让人通过已有的认知去认识和理解新的、抽象的东西。49信息架构样式一、层级式 适用项：整理需要跟桌面端网站保持一致结构的复杂站点。注意项：在小屏幕上应用多面的导航结构，可能会引起用户的麻烦。二、辐射式 适用项：多功能工具，其中每个都有不同的内部导航和目标。注意项：这种样式不适于用户进行多任务操作。三、套娃式 适用项：应用或网站的主题奇特或者主题之间密切相关。注意项：用户无法在不同内容中快速切换，要考虑这种样式是否方便查找。交互设计第五章:信息架构与设
39、计实现 PART THREE 设计套娃式层级式辐射式3.9 移动端浏览结构布局设计50信息架构样式四、标签视图 适用项：基于一个相似主题的工具项和多任务情况。注意项：不太适合复杂类结构，较适用于非常简单的内容结构。五、便当盒/仪表盘 适用项：主题相似的多功能工具和基于内容的平板电脑应用程序。注意项：要理解用户如何与每块内容互动，以及确保应用简单、有效、使用愉悦。六、筛选视图 适用项：内容数量庞大的应用或网站，内容诸如文章、图像和视频。注意项:移动设备上，由于筛选和分面搜索很复杂，所以很难在较小的屏幕上展示。交互设计第五章:信息架构与设计实现 PART THREE 设计筛选视图标签视图便当盒/仪
40、表盘3.9 移动端浏览结构布局设计51信息架构样式一、简单模式（一）层级结构 在层级的概念中，类目之间的关系是父子关系或者是广义与狭义的区别即抽取为更广义的群组或者是分解为更具体的群组。（二）数据库模式 数据库模式具有特定规划的结构或模型，所有的信息都必须适配于这些结构。（三）超链接模式 超链接模式是一种反结构模式，不存在主结构，内容仅仅通过链接进行连接。（四）线性模式 线性模式即按照直线规则一个跟随着另一个。交互设计第五章:信息架构与设计实现 PART THREE 设计超链接模式层级式结构数据库模式线性模式3.10 Web浏览结构布局设计52信息架构样式二、混合模式（一）“简单等级+简单数据
41、库”模式 “简单等级+简单数据库”模式是基本内容用层级结构，详细信息用数据库模式进行组合的一种混合模式。（二）目录模式 目录模式的底层是内容，由此向上的三个层级取决于网站规模和内容类型。（三）中心辐射型（星型）中心辐射型各层级间的内容之间都有一定联系。人们会从一个层级进入到另一个具体信息，然后返回出发点（中心点）然后在进入到其他详细页面，如此往复。交互设计第五章:信息架构与设计实现 PART THREE 设计中心辐射型（星型）“简单等级+简单数据库”模式目录模式 3.10 Web浏览结构布局设计53信息架构样式二、混合模式（四）子站 整个网站都是由一系列子站构成，并通过首页或多个顶层页面连接起
42、来。子站可以应用任何模式，不必局限于同一种。（五）集中入口点 有意提供的一些入口点来帮助用户发掘有用的信息。这些入口点不必覆盖所有站点内容，专注核心信息即可。（六）标签 标签模式无论在基础的数据库模式或者是超链接模式中都有所运用。网站中的每个类目都利用关键词作为标签，而它们同时也是内容的入口。交互设计第五章:信息架构与设计实现 PART THREE 设计子站集中入口点 3.10 Web浏览结构布局设计54小结交互设计第五章:信息架构与设计实现 PART THREE 设计标签大量内容集根据自身的定义发掘信息，轻松找到相关信息谁有权限进行标签操作结构类型适用内容适用人群挑战和话题层级拥有各类内容的
43、小型站点习惯先阅读概述信息，然后详细内容平衡内容的广度和深度数据库内容具有一致性想通过更多方式进入内容所有内容需要适应于结构，且不要收集超出需求的元数据超链接内容还不完整，需要不断地添加补充追随相关材料的链接作者需要了解链接的内容；当内容完成后，可能需要重构线性顺序性内容用户想按照特定顺序理解某些内容r只有当用户必须按顺序阅读时才使用.简单层级数据库综合性内容加上具有一致性结构的内容类型 区分出哪些内容需要结构化，哪些不需要目录大量结构性内容集寻找特定类别，然后顺藤摸瓜查看具体产品 中心辐射分级内容用户每次想回到中心页面，然后在查看新的内容 子站大型企业和政务站点，需要许多独立的内容版块 考虑子站是否需要统一的导航页面面布局和品牌集中入口点任意均可，但通常层级用户想随心浏览，且没有最好的方法3.10 Web浏览结构布局设计THANKS!THE END交互设计交互设计设计思维与实践设计思维与实践下一章下一章:设计评估与用户测试设计评估与用户测试
