HTML5移動(dòng)前端開(kāi)發(fā)基礎(chǔ)與實(shí)戰(zhàn)（第2版）（微課版）-PPT 模塊4

模塊4前端開(kāi)發(fā)演練本模塊實(shí)戰(zhàn)演練如何設(shè)計(jì)移動(dòng)端購(gòu)物系統(tǒng)的常見(jiàn)頁(yè)面，包括登錄、設(shè)置、客服、商品詳情、購(gòu)物車(chē)、訂單頁(yè)面的設(shè)計(jì)。購(gòu)物系統(tǒng)是我們最熟悉的系統(tǒng)，如淘寶、京東等，通過(guò)對(duì)購(gòu)物系統(tǒng)的演練學(xué)習(xí)，可以更容易地理解相關(guān)知識(shí)。本模塊也帶領(lǐng)讀者實(shí)戰(zhàn)演練設(shè)計(jì)一個(gè)PC端的頁(yè)面。HTML5移動(dòng)前端開(kāi)發(fā)基礎(chǔ)與實(shí)戰(zhàn)（微課版）綜合掌握HTML、CSS、JavaScript、DOM操作。知識(shí)目標(biāo)1通過(guò)設(shè)計(jì)移動(dòng)端、PC端的常見(jiàn)頁(yè)面，提高綜合運(yùn)用HTML5進(jìn)行前端開(kāi)發(fā)的能力。職業(yè)目標(biāo)培養(yǎng)團(tuán)隊(duì)協(xié)同工作能力。培養(yǎng)一絲不茍的工作態(tài)度和持之以恒的職業(yè)精神。素質(zhì)目標(biāo)“登錄”幾乎是所有系統(tǒng)的必備功能，掌握“登錄”頁(yè)面的設(shè)計(jì)可以說(shuō)是系統(tǒng)設(shè)計(jì)的開(kāi)端。4.1

登錄頁(yè)面“登錄”頁(yè)面通常需要提供用戶(hù)名、密碼，并進(jìn)行驗(yàn)證。后臺(tái)將根據(jù)登錄信息控制用戶(hù)權(quán)限、記錄用戶(hù)行為，保護(hù)操作安全等，本書(shū)只針對(duì)前端進(jìn)行設(shè)計(jì)。4.1.1登錄頁(yè)面介紹4.1.2登錄頁(yè)面演練登錄頁(yè)面演練。演練4.1“設(shè)置”也幾乎是所有系統(tǒng)的必備功能，掌握“設(shè)置”頁(yè)面的設(shè)計(jì)可以進(jìn)一步熟悉項(xiàng)目的開(kāi)發(fā)并增強(qiáng)信心。4.2

設(shè)置頁(yè)面4.2.1設(shè)置頁(yè)面介紹“設(shè)置”頁(yè)面常見(jiàn)功能布局的實(shí)現(xiàn)，包括清除緩存、關(guān)于、退出登錄。4.2.2設(shè)置頁(yè)面演練設(shè)置頁(yè)面演練。演練4.2在線(xiàn)客服作為一個(gè)專(zhuān)業(yè)的網(wǎng)頁(yè)客服工具，是方便用戶(hù)及時(shí)和企業(yè)進(jìn)行即時(shí)溝通的一項(xiàng)常見(jiàn)功能。在線(xiàn)客服不僅僅是在線(xiàn)客服，同時(shí)還為網(wǎng)站提供訪客軌跡跟蹤、流量統(tǒng)計(jì)分析，客戶(hù)關(guān)系管理等功能。4.3

客服頁(yè)面4.3.1客服頁(yè)面介紹“客服頁(yè)面”的設(shè)計(jì)，包括對(duì)話(huà)雙方的頭像、聊天內(nèi)容、內(nèi)容部分的箭頭指向。4.3.2客服頁(yè)面演練客服頁(yè)面演練。演練4.3商品詳情是購(gòu)物系統(tǒng)的必備功能。作為產(chǎn)品的對(duì)外展示，直接影響到產(chǎn)品銷(xiāo)售額。商品詳情的介紹一定要通過(guò)用戶(hù)的角度去設(shè)計(jì)文案和畫(huà)面，而不能通過(guò)單方面強(qiáng)調(diào)自身產(chǎn)品優(yōu)勢(shì)的口徑去表達(dá)。所有產(chǎn)品都是解決用戶(hù)需求為前提的，在設(shè)計(jì)時(shí)需要多思考產(chǎn)品優(yōu)勢(shì)與用戶(hù)痛點(diǎn)之間的對(duì)應(yīng)關(guān)系。4.4

商品詳情頁(yè)面4.4.1商品詳情頁(yè)面介紹“商品詳情”頁(yè)面的設(shè)計(jì)，包括商品名稱(chēng)、商品描述、原價(jià)、售價(jià)、優(yōu)惠活動(dòng)介紹等。4.4.2商品詳情頁(yè)面演練5G商品詳情頁(yè)面演練。演練4.4購(gòu)物車(chē)功能指的是應(yīng)用于網(wǎng)店的在線(xiàn)購(gòu)買(mǎi)功能，它類(lèi)似于超市購(gòu)物時(shí)使用的推車(chē)或籃子，可以暫時(shí)把挑選商品放入購(gòu)物車(chē)、刪除或更改購(gòu)買(mǎi)數(shù)量，并對(duì)多個(gè)商品進(jìn)行一次結(jié)款，是購(gòu)物系統(tǒng)的必備功能之一。4.5

購(gòu)物車(chē)頁(yè)面4.5.1購(gòu)物車(chē)頁(yè)面介紹“購(gòu)物車(chē)”頁(yè)面的設(shè)計(jì)，包括商品圖片、商品名稱(chēng)、價(jià)格、數(shù)量以及增減數(shù)量的按鈕等。4.5.2購(gòu)物車(chē)頁(yè)面演練購(gòu)物車(chē)頁(yè)面演練。演練4.5訂單是購(gòu)物系統(tǒng)的必備功能。訂單提交到購(gòu)物系統(tǒng)后，系統(tǒng)管理員對(duì)訂單進(jìn)行確認(rèn)有效與無(wú)效的操作處理。訂單確認(rèn)后將不能再進(jìn)行修改。4.6

訂單頁(yè)面4.6.1訂單頁(yè)面介紹“訂單”頁(yè)面的設(shè)計(jì)，包括收貨人、聯(lián)系電話(huà)、收獲地址以及訂單的相關(guān)信息（商品圖片、商品名稱(chēng)、價(jià)格、數(shù)量、規(guī)格等）。4.6.2訂單頁(yè)面演練訂單頁(yè)面演練。演練4.64.7

裝修網(wǎng)站首頁(yè)通過(guò)裝修網(wǎng)站首頁(yè)學(xué)習(xí)PC端布局4.7.1裝修網(wǎng)站首頁(yè)介紹裝修網(wǎng)站首頁(yè)如圖所示，包括頂部（聯(lián)系方式）、頭部（導(dǎo)航欄）、焦點(diǎn)圖（廣告欄）、主體（各項(xiàng)內(nèi)容）、尾部（頁(yè)腳）。4.7.2裝修網(wǎng)站首頁(yè)演練裝修網(wǎng)站首頁(yè)演練。演練4.7思考本章實(shí)戰(zhàn)代碼的每一行都仔