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

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

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

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

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

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

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

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

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