第二章2-网页交互设计规划-思维导图工具XMind-备课笔记

编号04编号04-01学习任务二、网页交互设计规划-思维导图工具XMind一、课程说明与要求1.课程说明“思维导图”是一种应用于记忆、学习、思考等的有效思维模式，利于人脑的扩散思维的展开。思维导图软件是一个创造、管理和交流思想的通用标准，其可视化的绘图软件有着直观、友好的用户界面和丰富的功能，学好思维导图的应用，可以帮助我们有序地组织思维，在交互设计工作和资源管理、项目进程方面都有很大的帮助。下面我们可以在设计案例中去体会思维导图的作用。在交互设计实践方面，培养学生使用思维导图工具绘制web产品交互设计中的一些架构图。2.工具材料准备说明本课的实践需要在同学们计算机中下载并安装操作软件，教师将在下面的表格中提供下载链接，与使用说明。软件工具下载链接备注XMind/每台电脑安装二、学情分析与课程导入1.学情分析本课程授课对象为艺术专业学生，是在艺术专业中设立的一门逻辑思维较强的设计类课程，作为一门实践性较强的课程，针对学生对当前市场应用需求普遍认知不强，或有较多偏差的情况，强调进行引导教学，融入市场多元化理念。另一方面，学生对新兴的事物接受比较快，对所选择的专业感兴趣，获取知识的主动性较强。2.课程导入我们学习思维导图，那么什么是思维导图，使用什么工具来实现，这在设计领域是比较常用的一个术语和应用，比如我们列大纲、写进度、记笔记，都是思维导图的一种体现。下面我们针对思维导图的应用及特性，对其做一个详细的讲解三、理论知识讲解（一）思维导图软件XMind的介绍1.什么是思维导图“思维导图”是一种应用于记忆、学习、思考等的有效思维模式，利于人脑的扩散思维的展开。思维导图是一种非常有用的思维工具，其创始人是东尼·博赞（TonyBuzan），他因此以“大脑先生”闻名国际，是将思想图像化的技巧，使用思维导图的过程，也是将知识结构图像化的过程。编号04编号04-02

2.思维导图软件-xmindXMind是一款非常实用的商业思维导图软件，应用全球最先进的软件架构

，全力打造易用、高效的可视化思维软件，强调软件的可扩展、跨平台、稳定性和性能，致力于使用先进的软件技术帮助用户真正意义上提高生产率。XMind不仅可以绘制思维导图，还能绘制鱼骨图Fishbone、树形图Tree、逻辑图LogicChart、组织结构图Org；并且，可以方便地从这些展示形式之间进行转换。可以灵活的定制节点外观、插入图标;含有丰富的样式和主题。可以导出word、excel、HTML、png图片、PDF等多种格式；并支持Windows/Mac/Linux/iOS/浏览器等多平台。（二）XMind思维导图的作用和特性………【重点】1.xmind思维导图的作用（1）思维管理XMind在企业领域有很广泛的应用。在企业中它可以用来进行会议管理、项目管理、信息管理、计划和时间管理、企业决策分析等；（2）汇报演示XMind提供了一种结构化的演示模式；在XMind中进行演示，为用户提供纵向深入和横向扩展两个维度的选择，这样用户在进行演示的时候，可以根据现场的反馈及时的调整演示的内容。（3）与办公软件协同工作XMind的文件可以导出成Word、PPT、PDF、图片、TXT等格式，这样我们就可以和没有安装XMIND的其它用户分享思维图；可以方便的将XMind绘制的成果与其他人共享。编号04编号04-03编号04编号04-042.思维导图的特性(1)提高我们的学习速度和效率；(2)激发联想与创意，将各种零散的智慧、资源等融会贯通成为一个系统；(3)形成系统的学习和思维的习惯，能够达到我们想达到的目标，包括：快速的记笔记，轻松的表达沟通、演讲、写作、管理等等！3.XMind思维导图的优势(1)纯中文(2)适合国人的思考方式(3)更易用、零学习曲线编号04编号04-05(4)强大的工作簿(5)个性化窗口布局(6)兼容其他思维导图软件(7)降低客户成本【课后思考：第一，思维导图的作用；第二，思维导图的作用；第三，xmind思维导图的优势】（三）xmind软件的操作……………………【重点】1.基础功能-创建打开软件，在“选择风格”对话框寻找合适的样式---选择想要的风格样式，即可创建一个思维导图编号04编号04-062.基础功能-界面介绍菜单栏大纲预览区常用命令区格式设置区分支主题：在中心主题下，按enter键，创建分支主题子主题：在分支主题，按下Tab键，创建子主题概要：选中选中一个主题或多个主题，点击上方工具栏的概要即可添加概要编号04-07编号04-07外框：想强调和凸显某些主题内容，可以用外框将这些主题框在一起，并进行注释，xmind提供多种样式调整，包括线条颜色、字号字体等选项。联系：是任意两个主题之间用于显示特殊关系的自定义连接线。笔记：将需要长文解释说明的内容放入笔记中，需要时再进行查看。画布概览：呈现了思维导图的全貌；3.扩展功能图片：可插入本地图片超链接：可以将网页或文件用超链接的方式插入主题中，点击即可直接跳转至相应的内容。编号04编号04-084.思维导图的修改在我们绘制思维导图过程中，会对不合适的内容进行调整，我们可以进行下面的操作1）选择任意主题（中心主题除外），按下Delete键即可删除该主题及其所属的所有子主题；2）选择任意主题拖拽可以调整这个主题及其所属子主题在思维导图中的位置；3）选择任意一个或者多个主题进行拖拽可将其放到其他主题之下。5.思维导图的导出与保存保存：Ctrl+S直接保存，选择文件保存地址即可，文件后缀名为.xmind导出：png图片格式、PDF格式、PPT格式。编号04编号04-09（四）如何绘制信息架构图……………………【难点】信息架构图主要适用于产品信息构成比较复杂需要考虑优化的情况，比如内容型产品（web门户网站、微博等内容比较丰富，功能比较多的网站），产品的信息结构对于用户体验就十分重要，需要用信息结构图作为工具进行分析思考。绘制信息架构图的要点（1）按照总分结构确定关键的一级节点（2）先绘制单个一级节点模块的信息架构图，之后再逐个完善（3）若某个页面在不同的一级节点内出现，建议明确标识编号04编号04-10四、实践技能训练（一）布置训练任务任务1：熟练使用xmind的基本工具操作任务2：尝试使用xmind绘制web端产品信息架构图。（二）实战项目案例运用绘制架构图的要点及基本工具的操作，进行web端电商平台的产品信息架构图的初稿绘制。…………【思政融入（以下内容感受中国电商的发展趋势，树立文化自信）】………【难点】中国互联网络信息中心发布的第47次《中国互联网发展状况统计报告》显示，截至2020年12月，我国网民规模达9.89亿；利用网络新闻媒体获取信息，借助网络购物、网上外卖解决日常生活所需等成为当下社会发展的趋势。数据显示，截至2020年12月，我国网络购物用户规模达7.82亿，占网民整体的79.1%。随着我国经济水平不断提高以及消费者对网购接受程度的日益提升，电商产业市场规模亦持续扩大。编号04编号04-11那么针对电商平台的应用及交互设计需求也逐渐增多，对我们的专业发展也越来越有利，在原型设计阶段的页面交互环节，我们需要了解产品信息结构，产品的信息结构对于用户体验就十分重要，需要用信息结构图作为工具进行分析思考，信息结构图主要适用于产品信息构成比较复杂需要考虑优化的情况，如内容型产品（博客、web门户网站等）或购物型网站，在产品设计阶段的概念化过程中，需要在产品功能框架已确定、功能结构已完善好的情况下才对产品信息结构进行分析设计，避免信息内容在展示过程中出现遗漏、混乱、重复；作为开发工程师建立数据库的参考依据。案例分析：淘宝的信息结构与任务分析淘宝是阿里巴巴推出的一款多模式合一的在线购物应用，涵盖了阿里巴巴旗下多网站的商户、商品和生活服务资源，旨在为用户提供一站式购物体验。因其承载的内容庞大，因而相对于其他平台产品，其信息结构更加复杂多元，核心在于通过合理的信息设计和多样化功能以促成用户为自己满意的商品下单这一目标动作的实现。下面，我们从信息结构和任务设计上对淘宝如何促成其目标动作的实现进行分析。1、基本信息结构编号04-1编号04-12（1）首页首页的信息结构如上图所示，分为首屏部分和非首屏部分，依次按照淘宝希望用户关注的重要程度排序；首屏上，搜索、Banner和业务入口显然是首屏优先级最高的，此外还有特价信息和特色商品推荐供闲逛用户打开应用后有地可去；上划页面后的非首屏部分，按照用户查找欲望深度的不断加深而不断个性化，直至猜你喜欢模块。在首页，大多数用户购买需求的第一层（“我要什么”，“我大概要什么”）能得到较好的满足，从整平台逻辑设计来看，首页的优先级也高于其他任何页面，从返回逻辑可以看出（应用内返回的终点是首页而不是其他一级页面）。（2）逛逛编号04编号04-13淘宝逛逛用于形成一个类似“好物推荐”的板块，在初期主要是用于分享好的产品，之后将会与商家合作，推广商品。其实也就是另外一种宣传和推广的方式；淘宝逛逛的推出也是一种非常好的分享方式，达人们可以在这里收获更多的粉丝群体，并且为大家分享好的商品。另一方面也有利于商家销售商品，一举两得。它的特点是：商品属性不会那么明显了，而是更加强调消费者在无聊的时候打开手机淘宝到处“逛逛”的功能。这样改版的目的自然是为消费者带来沉浸式购物体验，获得消费者更多的停留时间。（3）消息编号04-14编号04-14（4）购物车购物车的存在大多数情况下是满足用户购买多件商品或是想购暂存需求，类似于实体超市的购物车。购物车的核心动作是结算，按钮也格外显眼；此外，用户可以通过多选控件管理商品及查看总价格。该页面仍然服务于用户的最终下单。（5）我的淘宝编号04-15我的淘宝页面中核心任务是用户对订单的管理，淘宝编号04-15（6）商品详情页商品详情页信息量也比较大，可以看出很多对买家购买决策影响的因素：在该页面最显眼的元素依次是商品图像、价格、加入购物车和立即购买，它们在该页首屏形成一个弯曲的视觉线，用户沿着这条线关注与之相关的信息（诸如：邮费、销量、评价等等），如果用户仍然不达成下单意愿，向上滑动可以看到包括评分的商家信息和最新评论，进一步促进用户产生购买决策。（7）订单详情页编号04编号04-16当用户进入订单详情页，意味着两种情况：一是用户决定下单准备（或暂时放弃）付款，二是用户付款后查看发货信息和物流信息。前者情况下，该页面的核心任务是促成用户下单，后者情况下在于用户查看物流和申请售后，在这些核心任务的驱动下，页面展现出细微的差别，但都加亮提示了这些任务。3、横向信息分析除了以上对每个页面的梳理外，我们再从横向对淘宝的信息进行梳理。（1）信息的聚合方式淘宝中最重要的两种信息元素是商品和商家，通过以下方式将他们聚合为用户显示。a.通过业务属性的不同对商品和商家进行聚合（例如首页的天猫、聚划算）；b.通过相似的类别对商品和商家进行聚合（例如首页的类目）；c.通过具备某种相同的商品属性对商品进行聚合（例如首页的特色市场）；编号04编号04-17e.通过消费者的喜好进行商品聚合（例如首页的猜你喜欢和店铺推荐）；（2）信息的查找方式淘宝主要的信息查找方式有文字搜索和相机扫描，前者基于文字语音，后者基于图像。文字搜索方面支持对三种属性的元素（宝贝、天猫、店铺）进行搜索，搜索时遇到细分属性不同还支持直接点选跳转，筛选条件根据优先级适当做了隐藏，基本符合用户需求。拍立淘，利用手机拍照和手机中的图片通过图像识别技术识别出对应类别或具体的某件商品，经试用该功能能准确识别商品颜色和类别，至于具体某一件商品来说则和拍摄方式、角度和光源相关。（3）买家的消费引导淘宝在买家消费引导上做了很多尝试，比如：占据首屏的“淘宝头条”、“淘抢购”满足了价格导向型的用户需求，“有好货”则满足了品质导向型用户的需求，它们都很好地引导了大部分的用户群；而对于更加细分的需求则需要滑动才能看到，例如达人淘、猜你喜欢等等；同时在收藏店铺下还列有同类用户喜爱的店铺，引导用户更多地收藏和消费。4、小结综上所述，淘宝作为一款电商应用，在设计的每个组成部分都致力于希望用户达成购买期望商品这样一个目标，虽然体量庞大但具备很强的逻辑性，是电商类应用的经典之作。通过淘宝的分析，我们更加清晰了产品设计时应始终围绕产品目标展开，其中包括产品的战略目标和产品的用户目标，通过目标的分解得到每个界面达成的任务并思考信息结构的设计如何推进任务实现。教师重点指导：基本工具的操作及快捷键；绘制信息架构图的要点。【实训指导：学生初次接触软件进行设计实践，教师应多引导，帮助学生形成设计初稿，指导学生完成信息架构图初稿绘制】五、课堂总结今