2.3 備課筆記-網(wǎng)頁(yè)交互流程圖制作-Visio的具體應(yīng)用

編號(hào)05編號(hào)05-01學(xué)習(xí)任務(wù)二、Visio的具體應(yīng)用一、課程說(shuō)明與要求1.課程說(shuō)明Visio是一款便于IT和商務(wù)人員就復(fù)雜信息、系統(tǒng)和流程進(jìn)行可視化處理、分析和交流的軟件。使用具有專(zhuān)業(yè)外觀的OfficeVisio圖表，可以促進(jìn)對(duì)系統(tǒng)和流程的了解，深入了解復(fù)雜信息并利用這些知識(shí)做出更好的業(yè)務(wù)決策。本階段課程分為三個(gè)部分，第一部分為Visio簡(jiǎn)介，了解Visio啟動(dòng)界面的使用；第二部分為Visio軟件應(yīng)用，介紹了Visio中制作圖表所需要掌握的相關(guān)技術(shù)，以及制作常用類(lèi)型圖表的方法和技巧；內(nèi)容主要包括繪圖前需要了解的基本概念、繪圖文件和繪圖頁(yè)的基本操作與管理、自定義設(shè)置Visio繪圖環(huán)境、形狀的基本概念和特性、繪制與編輯形狀、選擇文本、輸入與編輯文本、設(shè)置文本格式、繪制與連接形狀、選擇形狀、調(diào)整形狀的大小和位置、設(shè)置形狀的布局和行為、使用容器對(duì)形狀分組、使用圖層管理形狀、設(shè)置形狀的邊框和填充效果、為形狀添加數(shù)據(jù)、使用數(shù)據(jù)圖形顯示數(shù)據(jù)等。第三部分為Visio流程的使用，介紹了Visio流程圖使用的注意事項(xiàng)以及網(wǎng)頁(yè)流程圖的制作案例。通過(guò)學(xué)習(xí)Visio基礎(chǔ)使用方法和項(xiàng)目綜合案例，學(xué)生可以全面、深入、透徹地理解Visio流程圖制作工具的使用方法，提高流程圖設(shè)計(jì)制作能力。2.工具材料準(zhǔn)備說(shuō)明本課的作業(yè)作品實(shí)踐需要同學(xué)們提前準(zhǔn)備一些工具和材料，教師提供軟件下載鏈接。工具材料下載鏈接備注Visio/visio/visio-professional-2019每臺(tái)電腦安裝二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程為軟件使用介紹課程，Visio流程圖制作工具需要能更全面的梳理整個(gè)項(xiàng)目中所涉及的各個(gè)流程，需要學(xué)生在學(xué)習(xí)過(guò)程中，能通過(guò)自己思考在網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)完整的交互需要的各個(gè)流程環(huán)節(jié)。在學(xué)習(xí)Visio流程圖工具的時(shí)，要不斷思考各個(gè)流程環(huán)節(jié)是否符合交互設(shè)計(jì)理念，思考如何做到最完善的交互流程圖。2.課程導(dǎo)入我們學(xué)習(xí)Visio流程圖制作，那么大家肯定會(huì)想，為什么要制作交互流程圖，實(shí)際上在瀏覽一個(gè)網(wǎng)頁(yè)時(shí)最大的功能就是我們要與網(wǎng)頁(yè)進(jìn)行交互，而網(wǎng)頁(yè)交互的整體邏輯思維需要我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)之初就要進(jìn)行交互流程圖的制作，來(lái)規(guī)劃交互是否完善，是否更符合交互設(shè)計(jì)理念，這些在進(jìn)行網(wǎng)頁(yè)制作時(shí)，都需要使用Visio制作交互流程圖，在整體上進(jìn)行把控，才能在制作中提前規(guī)避一些錯(cuò)誤的交互方式，提高設(shè)計(jì)效率。本節(jié)課我們講主要講解Visio流程圖的使用方法以及在制作流程圖時(shí)需要注意的事項(xiàng)。三、理論知識(shí)講解（一）Visio簡(jiǎn)介編號(hào)05編號(hào)05-02在工作中經(jīng)常需要去給很多人進(jìn)行演講，或者進(jìn)行培訓(xùn)和與同事，客戶(hù)，以及領(lǐng)導(dǎo)進(jìn)行討論，通過(guò)文字進(jìn)行討論效率還是比較低的，而通過(guò)使用Visio軟件可以把工作中各種各樣的信息通過(guò)圖表的形式來(lái)展現(xiàn)出來(lái)這樣就可以提高和客戶(hù)，同事以及領(lǐng)導(dǎo)的交流，并且能方便做出更好的決策。而Visio繪制的圖表大致可以分為8種：商務(wù)上遇到的組織架構(gòu)圖，家具以及辦公領(lǐng)域的平面布置圖；工程專(zhuān)業(yè)的設(shè)計(jì)圖表；常規(guī)的形狀可以組合起來(lái)繪制出非常強(qiáng)大的圖表；在工作中設(shè)計(jì)到的項(xiàng)目日程安排和管理；流程圖是在企業(yè)或者政府文檔中的流程圖表使用較多的；IT行業(yè)的網(wǎng)絡(luò)，軟件數(shù)據(jù)庫(kù)和網(wǎng)站的圖像可以使用Visio繪制圖表。2.Visio啟動(dòng)界面要學(xué)習(xí)一款軟件需要先了解這個(gè)軟件的啟動(dòng)界面，這樣才能在后續(xù)使用時(shí)快速定位到我們需要的操作的預(yù)訂位置?？梢钥吹絍isio的啟動(dòng)界面上有“開(kāi)始”、“新建”、“打開(kāi)”、“賬戶(hù)”、“反饋”以及“選項(xiàng)”六個(gè)按鈕這幾個(gè)菜單可以幫我創(chuàng)建和打開(kāi)Visio文檔，以及文檔設(shè)置等操作。，（二）Visio軟件應(yīng)用……………【重點(diǎn)】1.Visio軟件界面編號(hào)05編號(hào)05-03精神、-03頂部的左側(cè)自定義快速訪問(wèn)欄，設(shè)定一些對(duì)文件的基本操作，保存，新建，打開(kāi)等等。右側(cè)的是登錄和設(shè)置功能區(qū)顯示隱藏的一個(gè)設(shè)置。在選項(xiàng)卡下的命令中office把功能相近的命令使用豎線的方式分隔開(kāi)來(lái)。Visio功能區(qū)除了文件按鈕特殊是打開(kāi)之前講過(guò)的文件選項(xiàng)卡界面外，其他的功能都是對(duì)Visio文檔內(nèi)容編輯的設(shè)置，對(duì)于熟系office軟件的人員來(lái)說(shuō)應(yīng)該都見(jiàn)怪不怪了。Visio繪圖的三要素根據(jù)這個(gè)連接圖可以看出Visio繪圖的三要素分別是“形狀、文本和連接線”。編號(hào)05-04編號(hào)05-04選擇形狀,可以通過(guò)鼠標(biāo)框選進(jìn)行鼠標(biāo)選中，也可以按住Ctrl鍵可以選中多個(gè)形狀，當(dāng)同時(shí)選中多個(gè)形狀的話，想要去掉某個(gè)形狀就可以按住Ctrl鍵再次點(diǎn)擊不想選中的形狀即可去除該形狀的選中，如果想要一次全部選中可以按住Ctrl+A。第二種在功能區(qū)選項(xiàng)卡的開(kāi)始選項(xiàng)中的編輯中找到選擇可以看到全選按鈕就是把畫(huà)布中的所有形狀全部選中另一個(gè)就是選擇區(qū)域，就是框選進(jìn)行選擇需要注意的是這時(shí)選擇形狀必須全部框選后才能選中，只選擇一部分的話是沒(méi)有辦法選中的。還有一個(gè)套索選擇，這樣就可以繪制一個(gè)區(qū)域然后就可以把套索內(nèi)的形狀進(jìn)行選中。連接線連接的是形狀，它是基于形狀才會(huì)有意義的。.如果想把這兩個(gè)形狀連接起來(lái)有這么幾種方式，第一種在開(kāi)始選項(xiàng)卡，在工具這里有一個(gè)連接線，和后邊繪圖工具里面的線條首先使用線條連接形狀，選中線條后當(dāng)鼠標(biāo)移動(dòng)到形狀上方的時(shí)候，在形狀的上就會(huì)出現(xiàn)黑色的連接點(diǎn)，如果沒(méi)有黑色連接點(diǎn)的話，可以看看視圖選項(xiàng)界面的視覺(jué)幫助的連接點(diǎn)是否勾選上了，連接兩個(gè)形狀需要先從一個(gè)形狀的連接點(diǎn)，然后把鼠標(biāo)移動(dòng)到另一個(gè)形狀上這時(shí)在另一個(gè)形狀上也會(huì)出現(xiàn)黑色的連接點(diǎn)，然后把鼠標(biāo)放到連接點(diǎn)松開(kāi)鼠標(biāo)就可以和另一個(gè)形狀進(jìn)行連接了,編號(hào)05編號(hào)05-05同樣我們也可以使用任意多邊形來(lái)進(jìn)行連接操作。另外一種方式，就是選用連接線的方式進(jìn)行連接當(dāng)Visio的兩個(gè)形狀進(jìn)行連接時(shí)Visio會(huì)自動(dòng)計(jì)算出一個(gè)連接路徑，需要注意這個(gè)連接線是Visio自己計(jì)算出來(lái)的，同時(shí)也可以看到在連接線上有很多小藍(lán)點(diǎn)，當(dāng)吧鼠標(biāo)懸停在這些小藍(lán)點(diǎn)上時(shí)就可以進(jìn)行移動(dòng)，也就是說(shuō)我們可以對(duì)Visio自動(dòng)計(jì)算出來(lái)的連接線路徑進(jìn)行調(diào)整，同時(shí)針對(duì)這個(gè)連接線我們也可以右鍵，調(diào)整連接線的類(lèi)型，當(dāng)前的為直角連接線，我們也可以選擇直線連接線、曲線連接線，當(dāng)我們選擇后可以看到這個(gè)連接線的類(lèi)型就發(fā)生了相應(yīng)的變化，最后我們也可以把連接線重置為Visio默認(rèn)的連接線路徑。到這里我們應(yīng)該可以看到這兩種連接方式有一個(gè)區(qū)別點(diǎn)，我們使用線條直接進(jìn)行連接時(shí)，它是對(duì)于我們自己的繪制來(lái)進(jìn)行變化的，而連接線的方式連接的是根據(jù)Visio自動(dòng)計(jì)算出來(lái)的一個(gè)路徑，我們可以通過(guò)手動(dòng)來(lái)調(diào)整路徑，也可以通過(guò)鼠標(biāo)右鍵來(lái)進(jìn)行連接類(lèi)型的調(diào)整。編號(hào)05-06編號(hào)05-06另一個(gè)區(qū)別就是線條連接線沒(méi)有箭頭方向，而連接線的連接線可以向第二個(gè)形狀進(jìn)行箭頭指示。線條連接線可以使用鉛筆功能進(jìn)行形狀的改變而連接線的連接線只能通過(guò)連接線的點(diǎn)進(jìn)行修改路徑文字也是基于形狀來(lái)對(duì)形狀進(jìn)行說(shuō)明和講解的，所以這里的核心點(diǎn)就是形狀。要給畫(huà)布中的形狀添加文字有以下這些方法：這樣我們就知道了給形狀添加文本有三種方法，退出文本編輯有2種方法1.鼠標(biāo)點(diǎn)擊形狀，直接輸入文字2.鼠標(biāo)雙擊擊形狀，開(kāi)始輸入文字3.鼠標(biāo)點(diǎn)擊形狀，按F2開(kāi)始輸入文字退出文字輸入的方法1.鼠標(biāo)點(diǎn)擊空白處2.點(diǎn)擊ESC退出添加文字此時(shí)需要注意一下就時(shí)，此時(shí)的回車(chē)鍵是對(duì)文本進(jìn)行換行輸入并不能退出文本的編輯。如果需要使用回車(chē)鍵來(lái)提交文本編輯，可以在文件選項(xiàng)高級(jí)設(shè)置里勾選按enter提交形狀文本，這樣在添加文本結(jié)束時(shí)就可以直接使用enter鍵提交，不過(guò)此時(shí)就無(wú)法使用enter鍵進(jìn)行換行輸入，如果想要換行輸入可以使用shift+enter鍵來(lái)進(jìn)行換行輸入。（三）Visio流程的使用……………………【重點(diǎn)】1.流程圖的定義編號(hào)0編號(hào)05-07流程圖的定義以特定的圖形符號(hào)加上說(shuō)明，表示算法的圖，稱(chēng)為流程圖或框圖。流程圖是流經(jīng)一個(gè)系統(tǒng)的信息流、觀點(diǎn)流或部件流的圖形代表。在企業(yè)中，流程圖主要用來(lái)說(shuō)明某一過(guò)程。這種過(guò)程既可以是生產(chǎn)線上的工藝流程，也可以是完成一項(xiàng)任務(wù)必需的管理過(guò)程。流程圖大致歸納成兩類(lèi)：一類(lèi)是表示算法或內(nèi)部邏輯的一類(lèi)是表示業(yè)務(wù)或工作流程的流程圖的構(gòu)成流程圖由特定的圖形構(gòu)成，但具體的樣子由圖本身的目的和閱讀者的閱讀習(xí)慣（或約定）來(lái)決定，所以使用的圖形并不是固定的。比如有人用圓形表示開(kāi)端和結(jié)束，有人則用圓角矩形，有人有云團(tuán)表示其他流程的引用，有人用矩形加文字來(lái)表示，形式不重要，達(dá)到描述的效果而閱讀者能讀懂才是最重要。設(shè)計(jì)流程圖也遵循這個(gè)原理。視覺(jué)詞匯：起點(diǎn)和終點(diǎn)、決策點(diǎn)、條件分支、子流程、跳轉(zhuǎn)點(diǎn)、描述、系統(tǒng)行為2.流程圖注意什么？【思政融入（拋棄錯(cuò)誤信息，不需要的邏輯即使去除，體現(xiàn)了交互設(shè)計(jì)中使用流程圖邏輯清晰、嚴(yán)謹(jǐn)?shù)墓そ尘瘢繄?jiān)持表達(dá)表現(xiàn)層不要一個(gè)流程圖里面，又有內(nèi)部算法邏輯，又有界面邏輯，這個(gè)不關(guān)用戶(hù)的事情，會(huì)擾亂你的導(dǎo)航設(shè)計(jì)思路。要拋棄系統(tǒng)錯(cuò)誤就是非用戶(hù)犯的錯(cuò)誤，比如登錄的時(shí)候服務(wù)器宕機(jī)了，網(wǎng)絡(luò)連接錯(cuò)誤等導(dǎo)致登編號(hào)05編號(hào)05-08形式上可以很靈活如果你想把一個(gè)界面的主要內(nèi)容表達(dá)出來(lái)，可以細(xì)分里面的內(nèi)容究竟是信息還是下個(gè)界面的入口。編號(hào)05編號(hào)05-093.流程圖對(duì)軟件設(shè)計(jì)的重要性軟件不等于編碼，一般接到軟件設(shè)計(jì)任務(wù)馬上開(kāi)始編碼的設(shè)計(jì)人員都會(huì)多次返工。軟件設(shè)計(jì)不僅僅是技術(shù)的提現(xiàn)，更藝術(shù)的提現(xiàn)。好的設(shè)計(jì)架構(gòu)清晰，業(yè)務(wù)邏輯清楚完整，程序魯棒性好，而差的設(shè)計(jì)就反之了。在軟件設(shè)計(jì)的這個(gè)流程中，從需求到設(shè)計(jì)方案，從設(shè)計(jì)方案到設(shè)計(jì)流程，從流程到編碼，從編碼到測(cè)試，每一步都要認(rèn)真對(duì)待。尤其在流程設(shè)計(jì)階段，不但是對(duì)業(yè)務(wù)的梳理，也是對(duì)設(shè)計(jì)方案的驗(yàn)證。四、實(shí)踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)任務(wù)1：從網(wǎng)絡(luò)中查找先關(guān)交互流程圖，分析流程圖設(shè)計(jì)的背后邏輯。任務(wù)2：用Visio進(jìn)行交互流程圖的繪制。（二）實(shí)戰(zhàn)項(xiàng)目案例運(yùn)用Visio流程圖工具制作購(gòu)物網(wǎng)站購(gòu)物流程圖?！倦y點(diǎn)】教師重點(diǎn)指導(dǎo)：Visio流程圖中形狀、文本、以及連接線在流程圖中的合理使用?！緦W(xué)生初次進(jìn)行設(shè)計(jì)實(shí)踐，教師應(yīng)多引導(dǎo)，幫助學(xué)生形成設(shè)計(jì)方案，指導(dǎo)學(xué)生完成流程圖繪制】五、課堂總結(jié)今天，我們主要結(jié)合Visio流程圖設(shè)計(jì)工具使用規(guī)范，學(xué)習(xí)了流程圖繪制的三要素、流程圖繪制注意事項(xiàng)以及流程圖對(duì)交互設(shè)計(jì)的意義，想必同學(xué)們通過(guò)練習(xí)對(duì)繪制完整的交互流程圖有了一定的了解和掌握。編號(hào)05編號(hào)05-10六、課后