2.3 备课笔记-网页交互流程图制作-Visio的具体应用

编号05编号05-01学习任务二、Visio的具体应用一、课程说明与要求1.课程说明Visio是一款便于IT和商务人员就复杂信息、系统和流程进行可视化处理、分析和交流的软件。使用具有专业外观的OfficeVisio图表，可以促进对系统和流程的了解，深入了解复杂信息并利用这些知识做出更好的业务决策。本阶段课程分为三个部分，第一部分为Visio简介，了解Visio启动界面的使用；第二部分为Visio软件应用，介绍了Visio中制作图表所需要掌握的相关技术，以及制作常用类型图表的方法和技巧；内容主要包括绘图前需要了解的基本概念、绘图文件和绘图页的基本操作与管理、自定义设置Visio绘图环境、形状的基本概念和特性、绘制与编辑形状、选择文本、输入与编辑文本、设置文本格式、绘制与连接形状、选择形状、调整形状的大小和位置、设置形状的布局和行为、使用容器对形状分组、使用图层管理形状、设置形状的边框和填充效果、为形状添加数据、使用数据图形显示数据等。第三部分为Visio流程的使用，介绍了Visio流程图使用的注意事项以及网页流程图的制作案例。通过学习Visio基础使用方法和项目综合案例，学生可以全面、深入、透彻地理解Visio流程图制作工具的使用方法，提高流程图设计制作能力。2.工具材料准备说明本课的作业作品实践需要同学们提前准备一些工具和材料，教师提供软件下载链接。工具材料下载链接备注Visio/visio/visio-professional-2019每台电脑安装二、学情分析与课程导入1.学情分析本课程为软件使用介绍课程，Visio流程图制作工具需要能更全面的梳理整个项目中所涉及的各个流程，需要学生在学习过程中，能通过自己思考在网页设计中一个完整的交互需要的各个流程环节。在学习Visio流程图工具的时，要不断思考各个流程环节是否符合交互设计理念，思考如何做到最完善的交互流程图。2.课程导入我们学习Visio流程图制作，那么大家肯定会想，为什么要制作交互流程图，实际上在浏览一个网页时最大的功能就是我们要与网页进行交互，而网页交互的整体逻辑思维需要我们在设计网页之初就要进行交互流程图的制作，来规划交互是否完善，是否更符合交互设计理念，这些在进行网页制作时，都需要使用Visio制作交互流程图，在整体上进行把控，才能在制作中提前规避一些错误的交互方式，提高设计效率。本节课我们讲主要讲解Visio流程图的使用方法以及在制作流程图时需要注意的事项。三、理论知识讲解（一）Visio简介编号05编号05-02在工作中经常需要去给很多人进行演讲，或者进行培训和与同事，客户，以及领导进行讨论，通过文字进行讨论效率还是比较低的，而通过使用Visio软件可以把工作中各种各样的信息通过图表的形式来展现出来这样就可以提高和客户，同事以及领导的交流，并且能方便做出更好的决策。而Visio绘制的图表大致可以分为8种：商务上遇到的组织架构图，家具以及办公领域的平面布置图；工程专业的设计图表；常规的形状可以组合起来绘制出非常强大的图表；在工作中设计到的项目日程安排和管理；流程图是在企业或者政府文档中的流程图表使用较多的；IT行业的网络，软件数据库和网站的图像可以使用Visio绘制图表。2.Visio启动界面要学习一款软件需要先了解这个软件的启动界面，这样才能在后续使用时快速定位到我们需要的操作的预订位置。可以看到Visio的启动界面上有“开始”、“新建”、“打开”、“账户”、“反馈”以及“选项”六个按钮这几个菜单可以帮我创建和打开Visio文档，以及文档设置等操作。，（二）Visio软件应用……………【重点】1.Visio软件界面编号05编号05-03精神、-03顶部的左侧自定义快速访问栏，设定一些对文件的基本操作，保存，新建，打开等等。右侧的是登录和设置功能区显示隐藏的一个设置。在选项卡下的命令中office把功能相近的命令使用竖线的方式分隔开来。Visio功能区除了文件按钮特殊是打开之前讲过的文件选项卡界面外，其他的功能都是对Visio文档内容编辑的设置，对于熟系office软件的人员来说应该都见怪不怪了。Visio绘图的三要素根据这个连接图可以看出Visio绘图的三要素分别是“形状、文本和连接线”。编号05-04编号05-04选择形状,可以通过鼠标框选进行鼠标选中，也可以按住Ctrl键可以选中多个形状，当同时选中多个形状的话，想要去掉某个形状就可以按住Ctrl键再次点击不想选中的形状即可去除该形状的选中，如果想要一次全部选中可以按住Ctrl+A。第二种在功能区选项卡的开始选项中的编辑中找到选择可以看到全选按钮就是把画布中的所有形状全部选中另一个就是选择区域，就是框选进行选择需要注意的是这时选择形状必须全部框选后才能选中，只选择一部分的话是没有办法选中的。还有一个套索选择，这样就可以绘制一个区域然后就可以把套索内的形状进行选中。连接线连接的是形状，它是基于形状才会有意义的。.如果想把这两个形状连接起来有这么几种方式，第一种在开始选项卡，在工具这里有一个连接线，和后边绘图工具里面的线条首先使用线条连接形状，选中线条后当鼠标移动到形状上方的时候，在形状的上就会出现黑色的连接点，如果没有黑色连接点的话，可以看看视图选项界面的视觉帮助的连接点是否勾选上了，连接两个形状需要先从一个形状的连接点，然后把鼠标移动到另一个形状上这时在另一个形状上也会出现黑色的连接点，然后把鼠标放到连接点松开鼠标就可以和另一个形状进行连接了,编号05编号05-05同样我们也可以使用任意多边形来进行连接操作。另外一种方式，就是选用连接线的方式进行连接当Visio的两个形状进行连接时Visio会自动计算出一个连接路径，需要注意这个连接线是Visio自己计算出来的，同时也可以看到在连接线上有很多小蓝点，当吧鼠标悬停在这些小蓝点上时就可以进行移动，也就是说我们可以对Visio自动计算出来的连接线路径进行调整，同时针对这个连接线我们也可以右键，调整连接线的类型，当前的为直角连接线，我们也可以选择直线连接线、曲线连接线，当我们选择后可以看到这个连接线的类型就发生了相应的变化，最后我们也可以把连接线重置为Visio默认的连接线路径。到这里我们应该可以看到这两种连接方式有一个区别点，我们使用线条直接进行连接时，它是对于我们自己的绘制来进行变化的，而连接线的方式连接的是根据Visio自动计算出来的一个路径，我们可以通过手动来调整路径，也可以通过鼠标右键来进行连接类型的调整。编号05-06编号05-06另一个区别就是线条连接线没有箭头方向，而连接线的连接线可以向第二个形状进行箭头指示。线条连接线可以使用铅笔功能进行形状的改变而连接线的连接线只能通过连接线的点进行修改路径文字也是基于形状来对形状进行说明和讲解的，所以这里的核心点就是形状。要给画布中的形状添加文字有以下这些方法：这样我们就知道了给形状添加文本有三种方法，退出文本编辑有2种方法1.鼠标点击形状，直接输入文字2.鼠标双击击形状，开始输入文字3.鼠标点击形状，按F2开始输入文字退出文字输入的方法1.鼠标点击空白处2.点击ESC退出添加文字此时需要注意一下就时，此时的回车键是对文本进行换行输入并不能退出文本的编辑。如果需要使用回车键来提交文本编辑，可以在文件选项高级设置里勾选按enter提交形状文本，这样在添加文本结束时就可以直接使用enter键提交，不过此时就无法使用enter键进行换行输入，如果想要换行输入可以使用shift+enter键来进行换行输入。（三）Visio流程的使用……………………【重点】1.流程图的定义编号0编号05-07流程图的定义以特定的图形符号加上说明，表示算法的图，称为流程图或框图。流程图是流经一个系统的信息流、观点流或部件流的图形代表。在企业中，流程图主要用来说明某一过程。这种过程既可以是生产线上的工艺流程，也可以是完成一项任务必需的管理过程。流程图大致归纳成两类：一类是表示算法或内部逻辑的一类是表示业务或工作流程的流程图的构成流程图由特定的图形构成，但具体的样子由图本身的目的和阅读者的阅读习惯（或约定）来决定，所以使用的图形并不是固定的。比如有人用圆形表示开端和结束，有人则用圆角矩形，有人有云团表示其他流程的引用，有人用矩形加文字来表示，形式不重要，达到描述的效果而阅读者能读懂才是最重要。设计流程图也遵循这个原理。视觉词汇：起点和终点、决策点、条件分支、子流程、跳转点、描述、系统行为2.流程图注意什么？【思政融入（抛弃错误信息，不需要的逻辑即使去除，体现了交互设计中使用流程图逻辑清晰、严谨的工匠精神）】坚持表达表现层不要一个流程图里面，又有内部算法逻辑，又有界面逻辑，这个不关用户的事情，会扰乱你的导航设计思路。要抛弃系统错误就是非用户犯的错误，比如登录的时候服务器宕机了，网络连接错误等导致登编号05编号05-08形式上可以很灵活如果你想把一个界面的主要内容表达出来，可以细分里面的内容究竟是信息还是下个界面的入口。编号05编号05-093.流程图对软件设计的重要性软件不等于编码，一般接到软件设计任务马上开始编码的设计人员都会多次返工。软件设计不仅仅是技术的提现，更艺术的提现。好的设计架构清晰，业务逻辑清楚完整，程序鲁棒性好，而差的设计就反之了。在软件设计的这个流程中，从需求到设计方案，从设计方案到设计流程，从流程到编码，从编码到测试，每一步都要认真对待。尤其在流程设计阶段，不但是对业务的梳理，也是对设计方案的验证。四、实践技能训练（一）布置训练任务任务1：从网络中查找先关交互流程图，分析流程图设计的背后逻辑。任务2：用Visio进行交互流程图的绘制。（二）实战项目案例运用Visio流程图工具制作购物网站购物流程图。……………【难点】教师重点指导：Visio流程图中形状、文本、以及连接线在流程图中的合理使用。【学生初次进行设计实践，教师应多引导，帮助学生形成设计方案，指导学生完成流程图绘制】五、课堂总结今天，我们主要结合Visio流程图设计工具使用规范，学习了流程图绘制的三要素、流程图绘制注意事项以及流程图对交互设计的意义，想必同学们通过练习对绘制完整的交互流程图有了一定的了解和掌握。编号05编号05-10六、课后