編號16-01【web產(chǎn)品交互設(shè)計(jì)開發(fā)制作】編號16-01學(xué)習(xí)任務(wù)十、網(wǎng)頁高保真制作案例-Axure與Ps結(jié)合應(yīng)用一、課程說明與要求1.課程說明本階段課程分為三個部分，第一部分為Photoshop制作web首頁，介紹了Photoshop制作web首頁；第二部分為頁面的切圖和存儲，介紹Photoshop切圖與存儲操作；第三部分為Axure高保真功能實(shí)現(xiàn)案例，重點(diǎn)說明網(wǎng)頁交互中的功能Axure高保真的實(shí)現(xiàn)；通過學(xué)習(xí)Axure高保真交互案例制作，學(xué)生可以全面、深入、透徹地理解Axure原型設(shè)計(jì)工具的使用方法，提高產(chǎn)品交互設(shè)計(jì)能力和項(xiàng)目實(shí)戰(zhàn)能力。2.工具材料準(zhǔn)備說明本課的作業(yè)作品實(shí)踐需要同學(xué)們提前準(zhǔn)備一些工具和材料。工具材料備注Photoshop每臺電腦安裝Axure每臺電腦安裝二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程為高保真效果實(shí)現(xiàn)課程，需要能深入掌握Axure各個元件的使用以及PS圖片搭建頁面的操作，然后將高保真原型效果實(shí)現(xiàn)出來。需要學(xué)生在學(xué)習(xí)過程中，結(jié)合實(shí)際的網(wǎng)頁交互案例進(jìn)行操作感受。在進(jìn)行原型設(shè)計(jì)效果制作的同時，要不斷思考原型設(shè)計(jì)效果的實(shí)現(xiàn)邏輯，思考如何做到與最終成品一致的效果，這是非常重要的。此外，這時一門實(shí)踐性較強(qiáng)的課程，需要學(xué)生在平時學(xué)習(xí)時不斷的思考各個實(shí)際案例中交互效果實(shí)現(xiàn)的方式方法，提高制作高保真交互效果。2.課程導(dǎo)入我們之前學(xué)習(xí)了Axure低保真交互效果。而想要把一個高保真交互效果制作出來，需要結(jié)合Photoshop工具將web頁面的元素切圖，在Axure中進(jìn)行頁面搭建，這樣才能制作逼真的網(wǎng)頁交互界面。那么，本節(jié)課將通過對網(wǎng)頁中的交互在Axure中實(shí)現(xiàn)高保真的效果，來對Axure實(shí)現(xiàn)交互原型設(shè)計(jì)有更深入的了解。三、理論知識講解（一）制作web首頁主頁的制作首先我們要知道我們要制作的主頁都包含哪些內(nèi)容，這時對網(wǎng)頁原型制作時整體上的把控：頁頭部分：客戶的標(biāo)識和標(biāo)語：主要告訴用戶這是什么網(wǎng)站，它是做什么的。品牌理念(Tagline)：最有價值的位置之一是靠近logo的地方，當(dāng)我們看到一個和客戶企業(yè)logo相關(guān)聯(lián)的短語時，就知道這是口號，然后我們會把它當(dāng)作整個網(wǎng)站的描述?？谔柺且粭l精煉的語句，刻畫了整個企業(yè)。歡迎廣告：歡迎廣告是網(wǎng)站的簡要描述，在主頁的首要位置顯示，不需要滾動屏幕就能看到。網(wǎng)頁的層次：主頁要給網(wǎng)站提供服務(wù)的概貌：既要包括內(nèi)容(我能在這里找到什么)，也要包括功能(“我能做什么”)搜索：大多數(shù)網(wǎng)站需要在主頁上設(shè)置一個顯示突出的搜索框。它是一個站內(nèi)給用戶直接到達(dá)目的地的通道，起到了一個引導(dǎo)用戶走向的重要作用。導(dǎo)航：導(dǎo)航位于頁面頂部或者側(cè)邊區(qū)域的，在頁眉橫幅圖片上邊或下邊的一排水平導(dǎo)航按鈕，它起著鏈接站點(diǎn)或者軟件內(nèi)的各個頁面的作用；以及包含用戶登錄、注冊、個人中心等信息編號16-02編號16-02主體：內(nèi)容區(qū)域,是展示部分的主體，以展示為主頁腳部分:這部分包含一些版權(quán)信息、友情鏈接，聯(lián)系方式、備案信息等；通常頁頭和頁腳是整個站點(diǎn)通用的部分；【思政融入（整體決定部分，培養(yǎng)大家具有系統(tǒng)思想，建立系統(tǒng)觀與大局觀，使我們?nèi)蘸笤诠ぷ髦芯幪?6-03，能夠站在更高的位置，駕馭整體，統(tǒng)管全局）】編號16-03【那么在這部分的學(xué)習(xí)中，請大家思考一下如何制作高保真主頁界面】（二）頁面的切圖和存儲1.文字及矩形工具等不需要切圖，需要將字號大小，尺寸、色號等信息標(biāo)注出來，供原型圖繪制時使用；圖片、logo、圖標(biāo)需要切圖。2.導(dǎo)出的文件信息比較大，我們可以使用“文件”導(dǎo)出“存儲為web所用格式”進(jìn)行優(yōu)化；3.標(biāo)注：對文字、矩形框等沒有切圖的圖層元素進(jìn)行標(biāo)注，比如字號、字間距、字體顏色、矩形框的透明度、倒角數(shù)值等信息；便于后期原型設(shè)計(jì)制作編號16-04編號16-04【我們在了解了Photoshop制作頁面切圖后，在接下來的部分，就Axure的制作高保真效果來進(jìn)行重點(diǎn)的講解】（三）高保真案例……………………【重點(diǎn)】1.秒殺倒計(jì)時功能（1）倒計(jì)時的功能就是需要根據(jù)一個固定的時間然后不斷遞減，并把相應(yīng)的時間在Axure的文本元件中顯示出來。首先需要在Axure的項(xiàng)目菜單中添加兩個全局變量來進(jìn)行時間的變化的計(jì)算，在全局變量添加面板中添加一個dataObject用來賦值一個設(shè)定的倒計(jì)時間，添加另一個elapsed用來在間隔一秒的時候進(jìn)行加1，相當(dāng)于已過去的時長。當(dāng)變量設(shè)置好后就可以進(jìn)行交互事件的添加。面板隨鼠標(biāo)滑動面板隨鼠標(biāo)移動方向進(jìn)行滑動顯示的效果，準(zhǔn)備一個圖片元件和一個顯示信息的元件，可以命名為浮層元件,將兩個商品圖片和浮層元件進(jìn)行重合放置，并把浮層元件進(jìn)行隱藏。編號16-05編號16-05將圖片和浮層元件全選轉(zhuǎn)換為一個動態(tài)面板元件可以起一個名字為-商品面板，為了做出檢測鼠標(biāo)移入移出的判斷，需要在商品面板的四邊添加一個熱區(qū)用來監(jiān)控鼠標(biāo)是從哪個方向移入和移出的。元件設(shè)置完成后，需要給商品面板元件添加移入和移出時的交互，因?yàn)榇藭r交互事件是放在了商品面板上的需要把商品面板置于頂層，否則就無法正常檢測到移入移出時需要的交互效果。3.內(nèi)聯(lián)框架添加視頻【思政融入（）】（1）添加視頻鏈接在Axure中拖入內(nèi)聯(lián)框架元件，然后設(shè)置內(nèi)聯(lián)框架的而樣式為隱藏邊框，從不滾動，預(yù)覽圖就設(shè)置為視頻即可，然后就可以將對內(nèi)聯(lián)框架播放視頻的交互事件進(jìn)行設(shè)置。編號16-06編號16-06當(dāng)元件載入時給內(nèi)聯(lián)框架設(shè)置視頻的連接進(jìn)行載入的播放（2）添加本地視頻內(nèi)聯(lián)框架添加本地視頻的話，就需要將Axure發(fā)布生成HTML文件，發(fā)布生成的HTML文件會生成Axure中各個頁面的HTML文件，并把本地視頻也放到這個文件下，然后在內(nèi)聯(lián)框架中的交互事件中把本地視頻的名稱包括后綴名一起填入到框架中打開鏈接中的視頻文件路徑添加完視頻名稱后，然后再次發(fā)布重新生成當(dāng)前頁面的HTML文件，然后在文件夾中找到當(dāng)前頁面進(jìn)行預(yù)覽，注意本地視頻的添加只能在文件中找到對應(yīng)的頁面進(jìn)行雙擊預(yù)覽，無法在Axure中進(jìn)行實(shí)時預(yù)覽。編號16-07編號16-074.圖片放大預(yù)覽功能（1）在左側(cè)“元件庫”中找到“圖片”元件，拖入動態(tài)面板“左面板1”的默認(rèn)狀態(tài)中，把圖片位置調(diào)整到（0,0），大小與動態(tài)面板的尺寸一樣，圖片填充為需要顯示的商品圖片。（2）狀態(tài)1設(shè)置好，在動態(tài)面板便捷頁面頂部菜單欄，復(fù)制三個狀態(tài)，然后修改復(fù)制出來的狀態(tài)中圖片的填充。（3）接著在“元件庫”中，選擇“矩形”拖入工作區(qū)中，命名為“演示預(yù)覽框”，調(diào)整矩形的尺寸為150*150，線段的寬度設(shè)置為0。顏色和透明度。并把“演示預(yù)覽框”設(shè)置為隱藏狀態(tài)。編號16-08編號16-08（4）中“左面板1”和“演示預(yù)覽框”兩個元件，鼠標(biāo)“右鍵”，在下拉列表中選擇“轉(zhuǎn)換為動態(tài)面板”。命名為“左面板2”。接下來制作右側(cè)圖片放大面板。（4）“右面板1”設(shè)置完成后，選中“右面板1”鼠標(biāo)“右鍵”，選擇“轉(zhuǎn)換為動態(tài)面板”，命名為“右面板2”，設(shè)置面板顯示尺寸為450*450，樣式為取消“自適應(yīng)內(nèi)容”。把“右面板2”設(shè)置為隱藏狀態(tài)。編號16-09編號16-09（5）元件設(shè)置完成后，可以開始進(jìn)行交互事件的添加，首先為“左面板2”添加交互，在“交互”面板中，點(diǎn)擊“新建交互”，在下拉列表中選擇“鼠標(biāo)移入時”，打開“交互編輯器”面板，添加動作“顯示/隱藏”，添加目標(biāo)分別為“演示預(yù)覽框”和“右面板2”。添加事件“鼠標(biāo)移出時”，在“交互編輯器”面板添加動作“顯示/隱藏”，添加目標(biāo)分別是“演示預(yù)覽框”和“右面板2”。接著設(shè)置“圖片放大循環(huán)”動態(tài)面板的交互效果，點(diǎn)擊“圖片放大循環(huán)”面板，在“交互”頁面點(diǎn)擊“新建交互”，選擇“載入時”，在“交互編輯器”頁面中添加動作“切換面板狀態(tài)”。繼續(xù)添加交互“狀態(tài)改變時”事件，添加動作“移動”。編號16-10編號16-10設(shè)置指針移動。（10）最后給“右面板1”的移動添加邊界。四、實(shí)踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)任務(wù)1：根據(jù)提供的素材進(jìn)行頁面搭建布局設(shè)置。任務(wù)2：瀏覽搜集網(wǎng)站并利用Axure工具制作高保真交互效果。（二）實(shí)戰(zhàn)項(xiàng)目案例運(yùn)用Axure原型設(shè)計(jì)工具制作“面板隨鼠標(biāo)滑動”交互效果原型?！倦y點(diǎn)】教師重點(diǎn)指導(dǎo)：Axure元件功能以及高保真頁面搭建，制作交互原型?！緦W(xué)生初次進(jìn)行設(shè)計(jì)實(shí)踐，教師應(yīng)多引導(dǎo)，幫助學(xué)生形成設(shè)計(jì)方案，指導(dǎo)學(xué)生完成初步概念建立】五、課堂總結(jié)今天，我們主要結(jié)合PS制作頁面切圖以及AXURE軟件工具的元件綜合使用學(xué)習(xí)了Axure制作高保真交互的效果，也針對相關(guān)理論做了一些練習(xí)，想必同學(xué)們通過練習(xí)對Axure制作高保真交互效果有了一定的了解和掌握。希望同學(xué)們課后繼續(xù)對你所接觸到的相關(guān)作品，用所學(xué)習(xí)的知識，分析網(wǎng)頁交互產(chǎn)品的高保真交互效果的設(shè)計(jì)制作方法，這樣有助于在以后的工作中設(shè)計(jì)交互原型更加符合實(shí)際產(chǎn)品的交互效果。六、課后思考前面我們講到了AXURE軟件工具結(jié)合PS工具制作高保真交互效果，那么在以后的產(chǎn)品設(shè)計(jì)中，網(wǎng)頁設(shè)計(jì)的交互效果是采用高保真效果還是低保真效果是要根據(jù)