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

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

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

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

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

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

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

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

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