項目4 Web端“電商平臺”產(chǎn)品交互設(shè)計開發(fā)-備課筆記

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

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