編號09-01【web產(chǎn)品交互設(shè)計開發(fā)制作】編號09-01學(xué)習(xí)任務(wù)三、網(wǎng)頁交互的低保真呈現(xiàn)一、課程說明與要求1.課程說明本階段課程分為三個部分，第一部分為制作產(chǎn)品原型時要注意什么，介紹了Axure原型設(shè)計注意事項；第二部分為提高Axure設(shè)計效率的建議，介紹如何高效率設(shè)計交互原型；第三部分為Axure低保真常用功能實現(xiàn)，重點說明網(wǎng)頁交互中的功能Axure低保真的實現(xiàn)；通過學(xué)習(xí)Axure設(shè)計注意事項和低保真交互案例，學(xué)生可以全面、深入、透徹地理解Axure原型設(shè)計工具的使用方法，提高產(chǎn)品設(shè)計能力和項目實戰(zhàn)能力。2.工具材料準(zhǔn)備說明本課的作業(yè)作品實踐需要同學(xué)們提前準(zhǔn)備一些工具和材料，教師提供軟件下載鏈接。工具材料備注Axure每臺電腦安裝二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程為效果實現(xiàn)課程，需要能深入掌握Axure各個元件的使用，然后將低保真原型效果實現(xiàn)出來。需要學(xué)生在學(xué)習(xí)過程中，結(jié)合實際的網(wǎng)頁交互案例進(jìn)行操作感受。在進(jìn)行原型設(shè)計效果制作的同時，要不斷思考原型設(shè)計效果的邏輯，思考如何做到與最終成品一致的效果，這是非常重要的。此外，這時一門實踐性較強(qiáng)的課程，需要學(xué)生在平時學(xué)習(xí)時不斷的思考各個實際案例中交互效果實現(xiàn)的方式方法，提高自己制作交互原型的效率。2.課程導(dǎo)入我們之前學(xué)習(xí)了Axure交互工具的使用規(guī)范。而想要把一個低保真交互效果制作出來，需要知道Axure交互原型設(shè)計的注意事項，這樣才能提高交互設(shè)計效率。那么，本節(jié)課將通過對網(wǎng)頁中的交互在Axure中實現(xiàn)低保真的效果，來對Axure實現(xiàn)交互原型設(shè)計有更深入的了解。三、理論知識講解（一）制作產(chǎn)品原型時要注意事項…【思政融入（從使用時注意事項，提高團(tuán)隊完成任務(wù)的工作效率，領(lǐng)會原型制作各個要點的有機(jī)統(tǒng)一，體現(xiàn)自我在集體中的價值）】1.頁面結(jié)構(gòu)完整，展示頁面流程展示了頁面流程之后，不僅可以看到這個產(chǎn)品中的具體頁面，還可以看到是如何從過一個頁面跳轉(zhuǎn)到另一個頁面。我們一個就能知道有哪些頁面，頁面和頁面之間的關(guān)系是如何，在輔以必要的說明，可以增強(qiáng)溝通的效果，提高工作效率。編號09-02編號09-022.功能框架的劃分要明確、合理產(chǎn)品由很多功能組成，如何將這些功能劃分到不同的模塊里面，這是非常重要的。同時，功能框架劃分明確，也能夠方便產(chǎn)品團(tuán)隊的成員理解產(chǎn)品經(jīng)理的思路和意圖，和產(chǎn)品經(jīng)理一起更好的完善產(chǎn)品設(shè)計。明確合理的功能框架也能夠讓用戶在使用的時候體驗更好。3.功能結(jié)構(gòu)完整、流程清晰清晰的產(chǎn)品流程，能夠幫助用戶快速的了解產(chǎn)品希望解決的問題及解決問題的方式；同時，也能夠方便梳理產(chǎn)品的功能結(jié)構(gòu)是否完整，是否有遺漏的環(huán)節(jié)。簡單來說，功能流程清晰、結(jié)構(gòu)完整的產(chǎn)品原型，能夠幫組用戶快速的了解到“完整”的產(chǎn)品是什么樣的，在此基礎(chǔ)上，用戶就能夠更好的理解和思考產(chǎn)品的功能細(xì)節(jié)。4.色彩的合理應(yīng)用（1）增加明暗對比做好明暗對比之后，我們可以明確地看到，需要突出的內(nèi)容是哪一部分，或者重點和非重點之間的分別。（2）不使用不必要的顏色在制作線框圖的時候，個人的建議是不要使用過多色彩，除了已經(jīng)定下來的主調(diào)色和點綴色，其他的色彩盡量少使用。如果使用了過多色彩，會在產(chǎn)品設(shè)計的時候帶來干擾。5頁面布局（1）設(shè)置好第一屏的高度第一屏的高度至關(guān)重要，尤其是在網(wǎng)頁中。最重要的內(nèi)容、尤其是重要的操作按鈕盡可能在第一屏內(nèi)顯示完全，否則用戶體驗會較差，從而對很多方面造成影響。（2）內(nèi)容切忌堆疊過多的堆疊內(nèi)容，會讓頁面變得非常擁擠，沒有美感，同時也不能突出重點。對后面的工作也有比較大的影響，可能需要重新布局排版、或者調(diào)整所有版塊，大大增加了工作量?！灸敲丛谶@部分的學(xué)習(xí)中，請大家思考一下如何提高Axure制作原型交互的效果】（二）提高Axure設(shè)計效率的建議………………【重點】1.用一個控件就可以完成的事永遠(yuǎn)不要用兩個控件編號09-03編號09-032.不要復(fù)制對象，而是把對象轉(zhuǎn)成母版當(dāng)你使用任何操作次數(shù)超過一次的時候。當(dāng)發(fā)現(xiàn)自己一直在復(fù)制和粘貼一組控件，可以將對象創(chuàng)建一個母版。3.保持項目的組織性和命名的清晰性4.養(yǎng)成使用全局輔助線和網(wǎng)格的習(xí)慣輔助線顧名思義就是用于輔助頁面進(jìn)行排版布局的線，輔助線可以幫助我們在頁面設(shè)計之初，對頁面結(jié)構(gòu)、內(nèi)容排版、間距大小進(jìn)行合理的劃分，在Axure中包括全局輔助線和頁面輔助線兩類。與此同時，一個團(tuán)隊成員將在一個共享項目中看到這些全局輔助線，使用網(wǎng)格可以幫助你保持設(shè)計的整潔和結(jié)構(gòu)化。編號09-04編號09-045.導(dǎo)入功能在大多數(shù)項目中，人們制作的元素對其他項目也都是有用的。不需要重新發(fā)明輪子，而是重復(fù)使用那些在過去工作中使用過的元素。6.不要設(shè)計不必要的交互動作Axure的初始用戶可以很輕松地將交互動作添加到原型中。一開始的時候，會想對創(chuàng)建的每一頁都添加交互動作。然而，在大多數(shù)情況下，只需要清楚地傳達(dá)設(shè)計而不需要任何交互——僅僅是靜態(tài)圖像就可以?！疚覀冊诹私饬嗽c母版的建立方式后，在接下來的部分，就Axure的制作低保真效果來進(jìn)行重點的講解】（三）Axure元件的交互……………………【重點】1.首頁的圖片輪播效果【思政融入（這是使用Axure綜合元件實現(xiàn)的交互效果，離開任何一個元件交互的設(shè)置都將無法完成輪播效果。類比于學(xué)生組合在一起構(gòu)成一個整體，一人無法完成的任務(wù)，但一個團(tuán)隊只要互相取長補(bǔ)短，每個人都發(fā)揮相應(yīng)的作用，就可以完成一件看似不可能完成的任務(wù)。最終達(dá)到預(yù)期：促進(jìn)學(xué)生對團(tuán)隊意義的理解，培養(yǎng)學(xué)生的團(tuán)隊精神和集體榮譽(yù)感）】輪播效果原理多張圖片放進(jìn)一個動態(tài)面板的不同狀態(tài)里面，載入時添加切換動態(tài)面板的狀態(tài)的交互效果，這里使用三張圖片來演示效果將其中一張圖片右鍵單擊選擇轉(zhuǎn)換為動態(tài)面板，添加兩個狀態(tài)，并把其他兩張圖片添加到新創(chuàng)建的兩個狀態(tài)，調(diào)整一下圖片的位置使圖片可以在動態(tài)面板的顯示出來。給動態(tài)面板添加一個交互，載入時的交互。編號09-05編號09-05給輪播的圖片上添加三個點來分別表示三個圖片的位置。為三個點添加新的交互效果就是點擊三個點可以切換相應(yīng)的圖片效果，之后再按最初的輪播效果進(jìn)行切換。左右兩側(cè)添加兩個點擊按鈕進(jìn)行上一張，和下一張的圖片切換操作。編號09-06編號09-062.登錄效果在首頁上點擊登錄進(jìn)行頁面跳轉(zhuǎn)到登錄頁面。網(wǎng)頁的登錄屬于最基本的功能，創(chuàng)建一個登錄頁面和一個簡單的網(wǎng)頁首頁頁面，在首頁上點擊登錄進(jìn)行頁面跳轉(zhuǎn)到登錄頁面，然后在登錄頁面實現(xiàn)假登錄后的跳轉(zhuǎn)首頁的功能，交互功能實現(xiàn)，在未登錄的首頁上為登錄按鈕添加頁面跳轉(zhuǎn)交互，在登錄頁面上的登錄按鈕上分情況設(shè)置不同的登錄狀態(tài)未登錄時，賬號密碼錯誤時給出的登錄提示信息，在登錄情形下進(jìn)行首頁跳轉(zhuǎn)，并將全局變量的值傳遞給首頁上的文本標(biāo)簽進(jìn)行顯示。3.文字跑馬燈效果文字跑馬燈效果就是實現(xiàn)一個文本從一個方向想另一個方向不斷移動，而當(dāng)文字移動完后再回到初始位置，接著進(jìn)行下一次循環(huán)移動顯示。因此這個效果的中心是不斷循環(huán)，然后進(jìn)行文本移動的控制，（1）首先創(chuàng)建一個文本，寫入一些文字，給這個文本先起個名字,然后將其轉(zhuǎn)換為動態(tài)面板，并把文字調(diào)到動態(tài)面板區(qū)域的水平方向的外邊，因為要想讓文字從右向左不斷移動，那么就把文字放到動態(tài)面板水平方向的右邊。（2）雙擊動態(tài)面板吧里面的文字放置到動態(tài)面板X為280，Y為0的位置，到此文字的面板設(shè)置完畢。編號09-07編號09-07想要實現(xiàn)不斷循環(huán)的效果，就需要在添加一個新的動態(tài)面板來不斷切換他的面板狀態(tài)，來進(jìn)行編號09-08循環(huán)操作的控制，而切換面板狀態(tài)的話最少需要兩個狀態(tài)。編號09-08元件設(shè)置完后就需要對循環(huán)控制的交互進(jìn)行設(shè)置，第一步設(shè)置循環(huán)面板載入時-->設(shè)置面板狀態(tài)(向后循環(huán)循環(huán)間隔設(shè)置為100毫秒)，因為設(shè)置了動態(tài)面板為不斷循環(huán)切換，這樣就可以在面板狀態(tài)改變時去控制文字的移動，第二步設(shè)置交互，面板狀態(tài)改變時，需要判斷文字元件的位置是否達(dá)到設(shè)置的點，創(chuàng)建一個局部變量，用來指定文字元件，然后判斷文字元件的X值，來控制文字元件位置的移動，當(dāng)文字的位置在初始位置即動態(tài)面板的右側(cè)時280，因為動態(tài)面板的寬度為280，讓文字開始想左移動到文字完全走出動態(tài)面板的區(qū)域，因為文字元件的長度為349，所以需要文字移動到坐標(biāo)為（-349，0）的位置，而當(dāng)文字移動到-349位置時需要把文字元件的位置在此設(shè)置到原來初始的位置即（280,0）位置這樣在面板狀態(tài)不斷切換的時候就看循環(huán)控制文字進(jìn)行滑動，從而實現(xiàn)跑馬燈的效果。4.導(dǎo)航欄菜單切換效果，鼠標(biāo)移動到某個菜單上方時在導(dǎo)航欄下方顯示對應(yīng)的二級菜單，移出后自動隱藏，首先先添加元件進(jìn)行簡單頁面的搭建，并把這些元件設(shè)置為動態(tài)面板并添加與上方對應(yīng)的狀態(tài)設(shè)置相應(yīng)子選項。給每個按鈕添加鼠標(biāo)移入的交互，當(dāng)鼠標(biāo)移入時設(shè)置面板狀態(tài)為當(dāng)前鼠標(biāo)懸浮在的元件文字內(nèi)容編號09-09的面板上，然后設(shè)置面板為顯示狀態(tài)動畫效果為彈出，而且此時在鼠標(biāo)移出時也會自動收起子菜單欄，接著為每一個按鈕都添加相應(yīng)的交互事件，然后進(jìn)行預(yù)覽。編號09-09四、實踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)任務(wù)1：依據(jù)設(shè)計注意事項與制作建議分析案例制作的方式。任務(wù)2：使用原型工具Axure實現(xiàn)文字跑馬燈效果（二）實戰(zhàn)項目案例運用Axure原型設(shè)計工具制作“輪播圖”交互效果?！倦y點】教師重點指導(dǎo)：Axure元件功能以及設(shè)計注意事項，制作交互原型?！緦W(xué)生初次進(jìn)行設(shè)計實踐，教師應(yīng)多引導(dǎo)，幫助學(xué)生形成設(shè)計方案，指導(dǎo)學(xué)生完成初步概念建立】五、課堂總結(jié)今天，我們主要結(jié)合AXURE軟件工具的注意事項以及低保真交互效果學(xué)習(xí)了Axure元件的具體使用時的交互方法，也針對相關(guān)理論做了一些練習(xí)，想必同學(xué)們通過練習(xí)對Axure制作低保真交互效果有了一定的了解和掌握。希望同學(xué)們課后繼續(xù)對你所接觸到的相關(guān)作品，用所學(xué)習(xí)的知識，分析網(wǎng)頁交互產(chǎn)品的交互效果的設(shè)計方法和網(wǎng)頁交互中的邏輯流程概念，這樣有助于在設(shè)計制作交互案例時更加得心應(yīng)手。六、課后思考前面我們講到