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

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