3.3 備課筆記-網(wǎng)頁(yè)交互的低保真呈現(xiàn)

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