電子商務(wù)視覺設(shè)計(jì) 教案 項(xiàng)目二 電商網(wǎng)站的視覺規(guī)劃

《電商網(wǎng)站的視覺規(guī)劃》課程教案教學(xué)模塊項(xiàng)目二電商網(wǎng)站的視覺規(guī)劃課時(shí)數(shù)9教學(xué)班級(jí)主講教師教學(xué)目的和要求知識(shí)目標(biāo)1.了解產(chǎn)品需求分析的概念、內(nèi)容；2.熟悉產(chǎn)品概念設(shè)計(jì)的內(nèi)容；3.熟悉產(chǎn)品原型制作的理論知識(shí)。技能目標(biāo)1.能夠獨(dú)立進(jìn)行產(chǎn)品需求分析，并撰寫需求報(bào)告；2.能夠根據(jù)產(chǎn)品需求分析，獨(dú)立進(jìn)行產(chǎn)品概念設(shè)計(jì)；3.能夠進(jìn)行簡單的產(chǎn)品原型制作。素養(yǎng)目標(biāo)1.了解社會(huì)主義核心價(jià)值觀，誠實(shí)守信，遵守職業(yè)道德；2.具備積極主動(dòng)的工作態(tài)度、較強(qiáng)的視覺審美與設(shè)計(jì)能力；3.具備較強(qiáng)的溝通能力和良好的解決問題能力。教學(xué)手法1.基礎(chǔ)知識(shí)，教師利用講授法和問答法，首先通過提問引發(fā)學(xué)生思考，讓學(xué)生發(fā)表自己關(guān)于問題的見解，教師總結(jié)學(xué)生答案并講授重要知識(shí)點(diǎn)；2.重難點(diǎn)知識(shí)，教師利用任務(wù)驅(qū)動(dòng)法，在課程開始前告知學(xué)生學(xué)習(xí)目標(biāo)，引導(dǎo)學(xué)生圍繞學(xué)習(xí)目標(biāo)先自行探索、再進(jìn)行合作探究，總結(jié)遇到的困難和問題，然后老師指導(dǎo)學(xué)生進(jìn)行實(shí)操，梳理并總結(jié)出知識(shí)要點(diǎn)。教學(xué)重難點(diǎn)重點(diǎn)：1.掌握產(chǎn)品概念設(shè)計(jì)的內(nèi)容；2.撰寫需求報(bào)告。難點(diǎn)：1.能夠獨(dú)立進(jìn)行產(chǎn)品概念設(shè)計(jì)；2.能夠進(jìn)行簡單的產(chǎn)品原型制作。教學(xué)要點(diǎn)設(shè)計(jì)1.教師設(shè)置問題引發(fā)學(xué)生自主思考：我們在對產(chǎn)品需求分析的時(shí)候需要怎么開展呢？教師鼓勵(lì)學(xué)生根據(jù)自己所學(xué)知識(shí)進(jìn)行回答，教師結(jié)合案例講解產(chǎn)品需求分析和產(chǎn)品概念設(shè)計(jì)。在學(xué)生對于產(chǎn)品需求有一定認(rèn)識(shí)的基礎(chǔ)之上，引導(dǎo)學(xué)生分組討論，進(jìn)行產(chǎn)品分析的內(nèi)容的分析，有哪些注意事項(xiàng)，并在小組內(nèi)推舉代表發(fā)言。教師總結(jié)學(xué)生發(fā)言并將所有知識(shí)點(diǎn)進(jìn)行系統(tǒng)講解，為學(xué)生講解撰寫需求分析報(bào)告的要素，并結(jié)合案例講解需求分析的工作流程；（135分鐘）2.教師在課程一開始，先設(shè)置問題，引發(fā)學(xué)生思考：如何理解產(chǎn)品概念設(shè)計(jì)？引導(dǎo)學(xué)生對問題進(jìn)行討論并陳述自己的認(rèn)識(shí)，教師根據(jù)發(fā)言情況進(jìn)行知識(shí)講解產(chǎn)品概念設(shè)計(jì)的內(nèi)容，并配合案例展示加深學(xué)生的印象和理解；實(shí)操部分，教師先行進(jìn)行在產(chǎn)品概念設(shè)計(jì)規(guī)范和步驟講解，在操作過程中將所有要點(diǎn)進(jìn)行細(xì)致講解，學(xué)生明白了如何操作后，進(jìn)行獨(dú)立練習(xí)，教師隨時(shí)關(guān)注學(xué)生的進(jìn)展并解決設(shè)計(jì)過程中遇到的各種問題；（135分鐘）3.教師在課程開始前，告訴學(xué)生本次課程的目標(biāo)是認(rèn)識(shí)產(chǎn)品原型制作，鼓勵(lì)學(xué)生通過資料搜索與閱讀、合作討論等方式先自行了解相關(guān)內(nèi)容。具體操作問題，教師演示利用Axure軟件進(jìn)行一個(gè)“生活類電商網(wǎng)站”高保真原型制作，并引導(dǎo)學(xué)生跟隨老師共同操作，教師及時(shí)關(guān)注學(xué)生學(xué)習(xí)進(jìn)展，對學(xué)生產(chǎn)生的疑問進(jìn)行解答，并在課程結(jié)束前總結(jié)知識(shí)框架。（135分鐘）教學(xué)過程任務(wù)一產(chǎn)品需求分析【預(yù)備知識(shí)】一、認(rèn)識(shí)產(chǎn)品需求分析產(chǎn)品需求分析是進(jìn)行產(chǎn)品設(shè)計(jì)的前提,是開發(fā)人員經(jīng)過深入細(xì)致的調(diào)研和分析，準(zhǔn)確理解用戶和項(xiàng)目的功能、性能、可靠性等具體要求，將用戶非形式的需求表述轉(zhuǎn)化為完整的需求定義，從而確定系統(tǒng)功能的過程。在產(chǎn)品需求分析的過程中需要注意刪減和整合，刪減是去掉不可能實(shí)現(xiàn)的需求，這些需求通常不切實(shí)際或者說以目前的技術(shù)難以實(shí)現(xiàn)；整合是合并類似或相同的需求，這樣有助于后續(xù)的工作。二、產(chǎn)品分析的內(nèi)容1.用戶畫像分析2.競品分析3.用戶場景分析三、需求分析報(bào)告在完成需求分析后，為了方便指導(dǎo)后續(xù)工作的進(jìn)行，需要書寫需求分析報(bào)告。需求階段的成果包括用戶需求報(bào)告、軟件需求規(guī)格說明書。1.用戶需求報(bào)告2.軟件需求規(guī)格說明書3.項(xiàng)目介紹4.應(yīng)用環(huán)境5.功能規(guī)格6.需求變更7.產(chǎn)品提交【任務(wù)實(shí)施與分析】需求分析的工作流程，根據(jù)項(xiàng)目的復(fù)雜程度有所區(qū)別，但是總的來說，分成以下四個(gè)環(huán)節(jié)：步驟1：獲取需求步驟2：分析需求步驟3：整合需求步驟4：形成報(bào)告【拓展知識(shí)】一、判斷需求優(yōu)先級(jí)的方法-四象限法則四象限法則將需求等級(jí)劃分為：重要且緊急，重要不緊急，不重要不緊急，不重要卻緊急。重要且緊急，必須盡快分配資源，抓緊時(shí)間來實(shí)現(xiàn)。重要不緊急，需要花時(shí)間、精力去精細(xì)化處理好。如果不及時(shí)處理，就堆積到第一象限了。不重要不緊急和不重要卻緊急，雖然是不重要的事情，但它們也是需求，可以花費(fèi)一定的時(shí)間統(tǒng)一去處理。注意這類需求要和前面的需求嚴(yán)格區(qū)分開來，不能因?yàn)檫吘壢蝿?wù)影響主線任務(wù)進(jìn)展。任務(wù)二產(chǎn)品概念設(shè)計(jì)【預(yù)備知識(shí)】一、認(rèn)識(shí)產(chǎn)品概念設(shè)計(jì)產(chǎn)品概念設(shè)計(jì)是指由分析用戶需求到生成概念產(chǎn)品的一系列有序的、可組織的、有目標(biāo)的設(shè)計(jì)活動(dòng)，產(chǎn)品概念設(shè)計(jì)的最終目的是開發(fā)新產(chǎn)品，而新產(chǎn)品必須滿足用戶需求，這就要求產(chǎn)品概念設(shè)計(jì)要以用戶需求為重要設(shè)計(jì)依據(jù)。二、產(chǎn)品概念設(shè)計(jì)的內(nèi)容通常在電商網(wǎng)站產(chǎn)品概念設(shè)計(jì)時(shí)，會(huì)用到信息架構(gòu)圖、功能流程圖、頁面流程圖等三種圖形：1.信息架構(gòu)圖2.功能流程圖3.頁面流程圖三、設(shè)計(jì)規(guī)范在產(chǎn)品概念設(shè)計(jì)的過程中，需要圍繞需求進(jìn)行，從得到的需求出發(fā)，根據(jù)現(xiàn)有的互聯(lián)網(wǎng)設(shè)計(jì)技術(shù)進(jìn)行產(chǎn)品概念設(shè)計(jì)。在設(shè)計(jì)流程圖的過程中，有以下基本要求：1.有中心。這里的中心是指在產(chǎn)品概念設(shè)計(jì)時(shí)，需要圍繞著“需求”進(jìn)行，設(shè)計(jì)出來的網(wǎng)站，能夠滿足客戶的需求。2.切合實(shí)際。因?yàn)槭窃O(shè)計(jì)，所以有很多的發(fā)揮空間，但產(chǎn)品概念設(shè)計(jì)影響后續(xù)的產(chǎn)品原型制作，所以整個(gè)產(chǎn)品概念設(shè)計(jì)過程中需要注意設(shè)計(jì)內(nèi)容能夠落地，進(jìn)行實(shí)施?！救蝿?wù)實(shí)施與分析】通常情況下，產(chǎn)品概念設(shè)計(jì)的流程分為了以下四個(gè)步驟：步驟1：研讀需求報(bào)告，梳理產(chǎn)品框架步驟2：設(shè)計(jì)信息架構(gòu)圖步驟3：設(shè)計(jì)功能流程圖步驟4：設(shè)計(jì)頁面流程圖【拓展知識(shí)】一、產(chǎn)品概念設(shè)計(jì)的研究發(fā)展方向隨著科學(xué)技術(shù)的不斷發(fā)展，產(chǎn)品概念設(shè)計(jì)的研究也必須向集成化、智能化、網(wǎng)絡(luò)化、數(shù)字化的方向發(fā)展，進(jìn)一步拓展產(chǎn)品概念設(shè)計(jì)的研究深度和廣度。在研究內(nèi)容上，要重視對概念設(shè)計(jì)內(nèi)在規(guī)律、思維模式的研究；在研究對象上，要重視對復(fù)雜產(chǎn)品的概念設(shè)計(jì)研究；在實(shí)現(xiàn)技術(shù)上，要重視對網(wǎng)絡(luò)技術(shù)和數(shù)字技術(shù)的應(yīng)用研究。1.復(fù)雜產(chǎn)品概念設(shè)計(jì)模型研究2.統(tǒng)一產(chǎn)品模型描述方式的研究3.協(xié)作式產(chǎn)品概念設(shè)計(jì)研究4.人機(jī)協(xié)作的概念設(shè)計(jì)系統(tǒng)研究任務(wù)三產(chǎn)品原型制作【預(yù)備知識(shí)】一、認(rèn)識(shí)產(chǎn)品原型制作1.產(chǎn)品原型的定義產(chǎn)品原型是設(shè)計(jì)方案的表達(dá)，是產(chǎn)品經(jīng)理、交互設(shè)計(jì)師的重要產(chǎn)出物之一，可以讓用戶提前體驗(yàn)產(chǎn)品，供開發(fā)團(tuán)隊(duì)之間交流設(shè)計(jì)構(gòu)想、展示復(fù)雜交互的方式。2.產(chǎn)品原型的種類產(chǎn)品設(shè)計(jì)原型按照精細(xì)程度來分，可分為低保真產(chǎn)品原型和高保真產(chǎn)品原型。二、產(chǎn)品原型制作工具AxureRP介紹AxureRP是美國AxsureSoftwareSolution公司旗艦產(chǎn)品，一個(gè)專業(yè)的快速原型設(shè)計(jì)工具，支持Windows和MacOS,它能夠讓產(chǎn)品經(jīng)理等設(shè)計(jì)人員快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明書【任務(wù)實(shí)施與分析】下面利用Axure軟件進(jìn)行一個(gè)“生活類電商網(wǎng)站”高保真原型制作。步驟1：利用前面所學(xué)知識(shí)，梳理出“生活類電商網(wǎng)站”——未來生活網(wǎng)的基本；步驟2：根據(jù)信息架構(gòu)圖發(fā)現(xiàn)需要制作6個(gè)Web網(wǎng)站頁面，打開AxureRP軟件，在“左側(cè)”頁面處進(jìn)行文件夾的創(chuàng)建；步驟3：網(wǎng)站首頁制作；步驟3.1：設(shè)置原型尺寸步驟3.2：制作網(wǎng)站名稱步驟3.3：制作導(dǎo)航欄步驟3.4：制作單張海報(bào)圖步驟3.5：進(jìn)行“好評如潮”、“新品上線”“買手力薦”等模塊的設(shè)置【拓展知識(shí)】其他產(chǎn)品原型制作工具介紹1.VisioVisio是微軟公司所研發(fā)的辦公軟件之一，也是目前市場上主流的繪圖軟件。便于IT和商務(wù)專業(yè)人員就復(fù)雜信息、系統(tǒng)和流程進(jìn)行可視化處理、分析和交流的軟件，它不僅可以將用戶的思想、設(shè)計(jì)與最終產(chǎn)品演變成形象化的圖像進(jìn)行傳播，而且還可以幫助用戶創(chuàng)建具有專業(yè)外觀的圖表，以便理解、記錄和分析信息、數(shù)據(jù)、系統(tǒng)和過程2.墨刀墨刀是一款在線原型設(shè)計(jì)工具。借助于墨刀，創(chuàng)業(yè)者、產(chǎn)品經(jīng)理及UI/UX設(shè)計(jì)師能夠快速構(gòu)建移動(dòng)應(yīng)用產(chǎn)品原型，并向他人演示。作為一款專注移動(dòng)應(yīng)用的原型工具，墨刀把全部功能都進(jìn)行了模塊