項(xiàng)目4 Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)-備課筆記

項(xiàng)目四：移動(dòng)端“美食小吃”App交互UI設(shè)計(jì)一、課程說(shuō)明與要求1.課程性質(zhì)與考核方式說(shuō)明教師首先自我介紹。然后說(shuō)明本課為考查課，平時(shí)成績(jī)和期末成績(jī)各占總成績(jī)的50%，平時(shí)成績(jī)主要通過(guò)平時(shí)作業(yè)（作品）的形式評(píng)定，還要兼顧考核出勤、學(xué)習(xí)態(tài)度、課堂表現(xiàn)等因素；期末考試是在課程的最后兩次課采取限時(shí)命題創(chuàng)作的形式，全面考核課程知識(shí)的綜合運(yùn)用。2.課程說(shuō)明《數(shù)字媒體交互設(shè)計(jì)》共分為網(wǎng)頁(yè)交互設(shè)計(jì)、App交互設(shè)計(jì)、VR交互設(shè)計(jì)三方面的內(nèi)容。本課程是以理論為基礎(chǔ)的實(shí)踐導(dǎo)向型課程,所傳達(dá)的課程內(nèi)容圍繞“以人為本”的設(shè)計(jì)原則，重點(diǎn)講述人機(jī)交互的基本概念和重要意義以及發(fā)展歷程、軟件系統(tǒng)的人機(jī)交互設(shè)計(jì)原則和方法、網(wǎng)絡(luò)系統(tǒng)的人機(jī)交互設(shè)計(jì)原則和方法、移動(dòng)端應(yīng)用人機(jī)交互技術(shù)、人機(jī)交互開(kāi)發(fā)工具與環(huán)境等理論內(nèi)容；簡(jiǎn)要介紹人機(jī)交互的認(rèn)知心理學(xué)、計(jì)算機(jī)硬件的人機(jī)交互設(shè)計(jì)、人機(jī)交互技術(shù)的發(fā)展趨勢(shì),并培養(yǎng)學(xué)生利用交互設(shè)計(jì)工具制作做實(shí)際交互作品原型的能力。3.組織簽到及建立班級(jí)課程微信群組織學(xué)生使用學(xué)習(xí)通進(jìn)行簽到。然后使用微信面對(duì)面建群，說(shuō)明本群作為課程的相關(guān)通知發(fā)布、知識(shí)答疑和作品交流使用，同時(shí)歡迎同學(xué)們及時(shí)在群里反饋對(duì)課程教學(xué)方面的意見(jiàn)和學(xué)習(xí)感想，提醒老師及時(shí)調(diào)整適合同學(xué)們的授課方式。4.工具材料準(zhǔn)備說(shuō)明本課的實(shí)踐技能訓(xùn)練階段，需要同學(xué)在手機(jī)或者是計(jì)算機(jī)中下載好行業(yè)需求分析文檔，教師將所需準(zhǔn)備資料發(fā)到微信群中。資料類型與名稱備注行業(yè)需求分析報(bào)告文檔每個(gè)小組一份二、學(xué)情分析與課程導(dǎo)入1.學(xué)情分析本課程授課對(duì)象為藝術(shù)專業(yè)學(xué)生，是在藝術(shù)專業(yè)中設(shè)立的一門(mén)邏輯思維較強(qiáng)的設(shè)計(jì)類課程，需要學(xué)生在學(xué)習(xí)過(guò)程中，對(duì)美術(shù)設(shè)計(jì)與邏輯設(shè)計(jì)內(nèi)容進(jìn)行一定程度上的融通。作為一門(mén)實(shí)踐性較強(qiáng)的課程，針對(duì)學(xué)生對(duì)當(dāng)前市場(chǎng)應(yīng)用需求普遍認(rèn)知不強(qiáng)，或有較多偏差的情況，強(qiáng)調(diào)進(jìn)行引導(dǎo)教學(xué)，融入市場(chǎng)多元化理念。另一方面，學(xué)生對(duì)未來(lái)的市場(chǎng)應(yīng)用有信心，對(duì)所選擇的專業(yè)感興趣，獲取知識(shí)的主動(dòng)性較強(qiáng)。2.課程導(dǎo)入本項(xiàng)目主要通過(guò)Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)講解中，學(xué)習(xí)Web端“電商平臺(tái)”開(kāi)發(fā)流程以及原型設(shè)計(jì)工具AxureRP9軟件的使用方法，通過(guò)本項(xiàng)目的學(xué)習(xí)，讀者可以達(dá)到使用Axure進(jìn)行原型交互設(shè)計(jì)的能力，并為以后的原型設(shè)計(jì)工作打下基礎(chǔ)，從而在工作中收獲自己的人生價(jià)值。三、理論知識(shí)講解（一）Web端“電商平臺(tái)”產(chǎn)品設(shè)計(jì)開(kāi)發(fā)項(xiàng)目背景分析我國(guó)非常重視電子商務(wù)系統(tǒng)領(lǐng)域的發(fā)展，國(guó)家和地方在最近幾年有關(guān)該領(lǐng)域的政策力度明顯加強(qiáng)，突出表現(xiàn)在如下幾個(gè)方面：1、穩(wěn)定國(guó)內(nèi)外市場(chǎng)；2、提高自主創(chuàng)新能力；3、加快實(shí)施技術(shù)改造；4、淘汰落后產(chǎn)能；5、優(yōu)化區(qū)域布局；6、完善服務(wù)體系；7、加快自主品牌建設(shè)；8、提升企業(yè)競(jìng)爭(zhēng)實(shí)力。（二）Web端“電商平臺(tái)”產(chǎn)品設(shè)計(jì)開(kāi)發(fā)項(xiàng)目需求分析（三）AxureRP9介紹1.AxureRP9的工作界面2.AxureRP9的元件庫(kù)元件是原型產(chǎn)品中最基礎(chǔ)的組成部分，使用元件可以制作出豐富多彩的產(chǎn)品原型效果。在AxureRP9中，

用于繪制原型設(shè)計(jì)的用戶界面元素被稱為“元件”。而“元件”又被放在了“元件庫(kù)”面板中。3.AxureRP9的元件庫(kù)在Axure中通過(guò)添加元件來(lái)展示原型設(shè)計(jì)的靜態(tài)頁(yè)面，而實(shí)現(xiàn)動(dòng)態(tài)效果則需要使用Axure中的交互功能。交互定義了一個(gè)元件或者頁(yè)面的動(dòng)態(tài)行為。在Axure的右側(cè)交互欄目中創(chuàng)建和管理交互?？梢栽诘撞縼?lái)設(shè)置交互，也可以單擊新建交互來(lái)創(chuàng)建。（1）事件查看一個(gè)元件或頁(yè)面的事件：?jiǎn)螕粼蝽?yè)面，在右側(cè)交互欄目中可查看。事件的刪除：選中某一個(gè)事件后，按Delete即可。（2）情形一個(gè)事件可以有多個(gè)情形，當(dāng)鼠標(biāo)懸浮在事件上時(shí)，可以看到右側(cè)的添加情形按鈕，可以設(shè)置觸發(fā)條件來(lái)設(shè)置情形的啟動(dòng)。情形的刪除：選中某一個(gè)情形后，直接按Delete即可。注意：可用鼠標(biāo)來(lái)拖動(dòng)情形的順序，特別是使用條件邏輯時(shí)，情形的順序是非常重要的。3.動(dòng)作是在某一情形下的操作。動(dòng)作的添加：?jiǎn)螕羟樾蜗路降摹?”按鈕，如圖4-24所示?？捎檬髽?biāo)來(lái)拖動(dòng)動(dòng)作的順序。4.元件交互樣式交互樣式指元件的樣式，當(dāng)元件進(jìn)入觸發(fā)狀態(tài)時(shí)，效果樣式將被應(yīng)用，當(dāng)元件退出觸發(fā)狀態(tài)時(shí)，樣式效果被取消，元件恢復(fù)為基本樣式。（1）交互樣式常見(jiàn)的例子如下：按鈕被單擊時(shí)邊框顏色發(fā)生改變；鼠標(biāo)懸停在元件上時(shí)，元件的樣式發(fā)生改變；可以為元件自定義樣式效果。操作方法：“選擇元件—>鼠標(biāo)右鍵—>交互樣式”，或者在元件的“交互”面板中找到“交互樣式”點(diǎn)擊“+”添加新的交互樣式，即可打開(kāi)交互樣式設(shè)置面板。（2）Axure9.0元件交互樣式有這幾種：鼠標(biāo)懸停：當(dāng)鼠標(biāo)懸停在元件上時(shí)，元件的顯示樣式。鼠標(biāo)按下：當(dāng)鼠標(biāo)按下元件時(shí)，元件的顯示樣式。選中：元件被選中時(shí)的顯示樣式。禁用：元件被停止使用時(shí)的顯示樣式。獲取焦點(diǎn)：當(dāng)光標(biāo)聚焦在元件（如文本框）上的顯示樣式。（四）AxureRP9的常用元件內(nèi)聯(lián)框架可以將HTML、視頻、音頻和其他媒體文件嵌入到AxureRP中。比如youku視頻和Baidu地圖，也可以將原型中的其他頁(yè)面嵌入其中。在元件庫(kù)中找到內(nèi)聯(lián)框架，拖入工作區(qū)域中松開(kāi)鼠標(biāo)即可開(kāi)始使用中繼器，如圖4-59所示，雙擊內(nèi)聯(lián)框架元件，彈出了“鏈接屬性”的對(duì)話框如圖4-60所示，此處可以選擇鏈接至Axure文件中的其他頁(yè)面或者外部URL地址。默認(rèn)情況下，內(nèi)聯(lián)框架有邊框，可以在“樣式”窗格中的“隱藏邊框”中打開(kāi)或關(guān)閉。當(dāng)內(nèi)聯(lián)框架內(nèi)的內(nèi)容超過(guò)其本身大小時(shí)，可以設(shè)置內(nèi)聯(lián)框架進(jìn)行滾動(dòng)，如圖4-61所示。查看原型當(dāng)產(chǎn)品經(jīng)理在AxureRP9中完成原型設(shè)計(jì)后，接下來(lái)可以在瀏覽器中預(yù)覽原型，可以生成HTML本地文件查看，也可以把原型發(fā)布在Axure云中，或者可以生成Word說(shuō)明書(shū)。當(dāng)項(xiàng)目完成后，單擊工具欄中“預(yù)覽”按鈕或按【F5】鍵。也在“菜單欄”中可以選擇“發(fā)布>預(yù)覽”選項(xiàng)，如圖4-65所示，即可在瀏覽器中查看原型效果。Web端“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)開(kāi)發(fā)（1）使用“動(dòng)態(tài)面板”制作Web端Banner輪播效果本案例需要設(shè)計(jì)制作購(gòu)物網(wǎng)頁(yè)的商品輪播圖效果，案例效果是通過(guò)動(dòng)態(tài)面板元件，讓四張商品圖片隨著一定順序進(jìn)行循環(huán)播放，圖片中的圓點(diǎn)也會(huì)隨著圖片的改變而進(jìn)行相應(yīng)的變化。輪播效果實(shí)現(xiàn)的原理是，多張圖片放進(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)下，以及四個(gè)圓點(diǎn)對(duì)應(yīng)圖片狀態(tài)的一個(gè)切換設(shè)置，之后需要在交互中進(jìn)行圖片輪流切換圖片的設(shè)置。（2）制作步驟1.元件基礎(chǔ)樣式設(shè)置在左側(cè)元件庫(kù)中，選中“動(dòng)態(tài)面板”元件，將其拖入工作區(qū)內(nèi)。在“交互”面板上，設(shè)置“動(dòng)態(tài)面板”的名稱為“輪播”。雙擊“動(dòng)態(tài)面板”進(jìn)入“動(dòng)態(tài)面板”的編輯頁(yè)面，連續(xù)單擊“添加狀態(tài)”按鈕，新建三個(gè)“動(dòng)態(tài)面板”狀態(tài)。在每個(gè)狀態(tài)中都添加一張圖片。添加完成后，可以在“概要”面板中預(yù)覽圖片和狀態(tài)。在左側(cè)元件庫(kù)中找到“動(dòng)態(tài)面板”元件，拖入工作區(qū)內(nèi)，設(shè)置名稱為“but-one”，然后復(fù)制三個(gè)狀態(tài)，然后每個(gè)狀態(tài)中都添加四個(gè)圓形，設(shè)置大小為12px*12px，然后分別在四個(gè)狀態(tài)中按順序給代表不同順序圖片的圓形設(shè)置一個(gè)不同的顏色，其他保持默認(rèn)顏色。在添加兩個(gè)控制左/右進(jìn)行切換的按鈕，并在開(kāi)始時(shí)設(shè)置為“隱藏”。之后將兩個(gè)動(dòng)態(tài)面板和這個(gè)控制按鈕全部選中“轉(zhuǎn)換為動(dòng)態(tài)面板”，命名為“動(dòng)態(tài)輪播圖”。2.設(shè)置元件自動(dòng)輪播的交互效果。給“動(dòng)態(tài)輪播圖”添加交互，在“交互”面板中，點(diǎn)擊“新建交互”按鈕，在下拉列表中選擇“鼠標(biāo)移入時(shí)”事件，添加目標(biāo)為“控制按鈕”，設(shè)置為“顯示”，動(dòng)畫(huà)效果為“彈出效果”。繼續(xù)為“輪播”圖片，點(diǎn)擊“新建按鈕”，在下拉列表中選擇“載入時(shí)”事件，打開(kāi)“交互編輯器”對(duì)話框，選擇“設(shè)置面板狀態(tài)”動(dòng)作，添加目標(biāo)為“輪播”，設(shè)置詳細(xì)參數(shù)。為動(dòng)態(tài)面板“but-one”添加交互動(dòng)作，點(diǎn)擊“新建交互”按鈕，在下拉列表中選擇“載入時(shí)”事件，打開(kāi)“交互編輯器”對(duì)話框，選擇“設(shè)置面板狀態(tài)”動(dòng)作，添加目標(biāo)為“but-one”，設(shè)置詳細(xì)參數(shù)?！翱刂瓢粹o”以及“but-one”按鈕時(shí)圖片切換的效果。在“but-one”動(dòng)態(tài)面板中，四個(gè)不同狀態(tài)里的四個(gè)圓形分別添加交互事件，首先在狀態(tài)1中，對(duì)第二個(gè)按鈕，進(jìn)行點(diǎn)擊交互的設(shè)置，點(diǎn)擊“新建交互”按鈕，在下拉列表中選擇“單擊時(shí)”事件，打開(kāi)“交互編輯器”對(duì)話框，選擇“設(shè)置面板狀態(tài)”動(dòng)作，添加兩個(gè)目標(biāo)分別是“輪播”動(dòng)態(tài)面板和“but-one”動(dòng)態(tài)面板，因?yàn)榇藭r(shí)是需要點(diǎn)擊某個(gè)按鈕切換到相應(yīng)的頁(yè)面，所以設(shè)置的切換狀態(tài)就不需要循環(huán)，只需要切換好制定的狀態(tài)即可，，當(dāng)狀態(tài)切換完后如果沒(méi)有交互操作需要再次讓兩個(gè)動(dòng)態(tài)面板開(kāi)始重新循環(huán)切換狀態(tài)。接下來(lái)給狀態(tài)1中第三個(gè)圓形添加交互動(dòng)作。同理狀態(tài)1中其他“圓形”添加的交互事件，和其他三個(gè)狀態(tài)里的圓形添加的交互事件都類似，只不過(guò)需要注意切換到相應(yīng)的狀態(tài)即可。給動(dòng)態(tài)面板“控制按鈕”中的左右兩個(gè)箭頭添加交互，首先選中“右箭頭”元件，在“交互”面板中，點(diǎn)擊“新建交互”按鈕，動(dòng)作選擇“設(shè)置面板狀態(tài)”，添加兩個(gè)目標(biāo)分別是“輪播”和“B.ut-one”。同理“左箭頭”設(shè)置跟“右箭頭”除了切換狀態(tài)的順序和動(dòng)畫(huà)方向不一樣外其他都是正常的切換效果。交互都設(shè)置完成后，點(diǎn)擊“預(yù)覽”按鈕，打開(kāi)瀏覽器預(yù)覽廣告輪播頁(yè)面，可以發(fā)現(xiàn)圖片切換和圓形變化是對(duì)應(yīng)的。四、實(shí)踐技能訓(xùn)練（一）布置訓(xùn)練任務(wù)設(shè)計(jì)并制作“電商平臺(tái)”產(chǎn)品交互設(shè)計(jì)項(xiàng)目五、課堂總結(jié)本項(xiàng)目主要介紹了關(guān)于AxureRP9原型設(shè)計(jì)工具的相關(guān)使用基礎(chǔ)知識(shí)，包括軟件的基礎(chǔ)使用方法和面板及工具的使用方式方法。其中，著重介紹了AxureRP9原型軟件中的函數(shù)，AxureRP9中的函數(shù)是整個(gè)軟件中非常重要的部分，讀者想要熟練使用軟件，必須對(duì)函數(shù)部分的內(nèi)容熟練掌握才行。六、課后思考本項(xiàng)目主要介紹了AxureRP9原型設(shè)計(jì)工具的界面功能區(qū)、基本交互方法和重點(diǎn)的元件應(yīng)用補(bǔ)充（動(dòng)態(tài)面板的使用，中繼器的使用）等相關(guān)理論，也通過(guò)項(xiàng)目實(shí)施案例——Web端“電商平臺(tái)”的交互功能做了詳細(xì)的介紹，可以在后續(xù)對(duì)讀者所接觸到的相關(guān)作品，用專