基于HTML5網站前端設計的分析與規(guī)劃
——以魅力印象服飾電子商城為例

王佳瑜

（哈爾濱師范大學傳媒學院 ，哈爾濱 150000）

近幾年來，Web前端設計已然成為朝陽產業(yè)，十九大報告指出，創(chuàng)新是一個國家發(fā)展的首要動力，科技才能促進人們生活水平的提高。移動互聯(lián)的迅猛發(fā)展促使Web前端、HTML5、JavaScript、CSS等技術廣泛應用，截止于2015年末，基于HTML5開發(fā)的APP已經達到80%，成為網頁開發(fā)呈現(xiàn)的主流技術，HTML5同樣兼容Android、iOS多種操作系統(tǒng)，因此受到開發(fā)人員們的喜愛。魅力印象服飾電子商城正是通過HTML5標記性語言開發(fā)而完成的，實現(xiàn)平臺查詢、更新個人資料、查看支付訂單、查看個人意見、查看商品評價、查看購物車、更改密碼等功能。為了方便用戶在線購買，該網站也提供瀏覽產品類別、產品搜索、瀏覽產品詳情、產品添加到購物車、下單等相關功能。同時解決了網站在不同平臺操作時的不兼容問題。

1 研究背景

目前移動互聯(lián)技術的飛速發(fā)展，大大提高了人們的生活水平，科技的發(fā)展將世界變小了的同時，也拉進了人與人之間的距離，我們也告別了傳統(tǒng)的書信交流?，F(xiàn)如今，一部智能手機就可以完成通信、視頻、購物、娛樂等生活需要，此外，網購、高鐵、支付寶和共享單車也已經并稱為中國的“新四大發(fā)明”，可見科技創(chuàng)新的重要性。因此，魅力印象服飾電子商務網站的開發(fā)也是與時俱進，通過科技創(chuàng)新來提高人們的生活水平。此網站的前端設計基于HTML5、JavaScript、CSS等技術設計實現(xiàn)。

近幾年來，隨著互聯(lián)網的普及傳統(tǒng)的PC端網頁已經不能夠滿足用戶的需求，不斷開發(fā)新的網站也成為技術人員的首要工作，如今普遍運用的HTML5普通標記語言，可跨越多平臺實現(xiàn)操作，給技術人員也帶來了很多方便，高效的在PC端上實現(xiàn)圖形、圖像、音頻、視頻處理的同時，也解決了異構環(huán)境下不兼容的現(xiàn)象。

HTML5是萬維網的標準通用置標語言下的一個應用HTML（超文本標記語言）的第5次重大修改。并于2014年10月29日，萬維網聯(lián)盟正式宣布，經過大概近8年的不斷努力探索，HTML5的標準規(guī)范終于制定完成。HTML5這種技術逐漸在前端設計行業(yè)中嶄露頭角，帶給交互式網絡社交廣泛的影響，如今的社交平臺已然成為互聯(lián)網行業(yè)中最火熱最熱門的應用。科技的發(fā)展取代了人們的許多勞動，給生活帶來了無限的方便，魅力印象服飾電子商城的開發(fā)就是通過互聯(lián)網技術為工薪族減少逛街購物的時間，在忙碌的工作日過后得到充分的休息，該項目基于HTML5標準語言結合JavaScript以及CSS修飾語言設計并實現(xiàn)的，也高效的帶動互聯(lián)網產業(yè)鏈的迅速發(fā)展壯大。

2 服裝類電子商城市場分析

從現(xiàn)在的發(fā)展狀況來看服裝類電子商務已經進入成熟期。據(jù)相關數(shù)據(jù)分析，由于網絡購物的優(yōu)惠價格及方便快捷的服務，網絡購物日益成為越來越大眾的消費行為，網絡市場的巨大潛力吸引眾多品牌企業(yè)搶灘登陸。在目前的服裝類電子商務市場上，除大型綜合性電商外，邦購網、瑪薩瑪索、夢芭莎、凡客誠品等垂直服裝類電子商務也占據(jù)了一定的市場份額，而從運營模式上看，既有優(yōu)衣庫、綾致服裝、紅領集團、衣邦人等O2O電商，又有韓都衣舍、茵曼、裂帛、七格格等淘品牌，另外反向定制的C2M電子商城也嶄露頭角。

2018年網站數(shù)據(jù)庫共收錄網店71家，其中品牌旗艦店(品牌直銷)的電子商城占總比最多，達到48家，其次為小品牌電子商城，收錄總數(shù)為20家，京東旗艦店收錄電子商城為11家，京東特許店收錄電子商城為2家，亞馬遜收錄電子商城為1家。

根據(jù)以上數(shù)據(jù)可以看出，服裝類電子商務的發(fā)展呈現(xiàn)出上升趨勢，因此一家以服裝類為主要經營類別的電子商務網站在國內外都會具有廣闊的市場前景。

3 網站主題規(guī)劃

一個網站的建設，首先是要確定網站的主題，其次是要根據(jù)網站主題的所需要求來設計該網站的功能，魅力印象服飾電子商城網站是一個明確以服飾類購物為主題的網站?，F(xiàn)如今綜合的網絡購物平臺有淘寶、天貓、京東、亞馬遜等電子商務平臺，以女性時尚為主題的購物網站也有美麗說、唯品會為代表的新興站點，魅力印象服飾電子商城網站則是一個針對服飾類的購物網站，開發(fā)它的主要目的是從服飾類領域深入開來，做成一個品質、服務雙一流的網站。

從設計學的角度來講，一個人就是一套努力認知世界的感覺系統(tǒng)。眼睛、耳朵、鼻子、皮膚以及其他稱為感覺接收器的東西，但這些詞語所攜帶的意象對于感覺器官來說是被動的。人類的感官是對世界大膽開放的[6]。

該項目的主題為魅力印象服飾電子商城前端設計，所以可以看出本網站是以服裝營銷類為主要類別進行開發(fā)的，網站中的所有頁面采用統(tǒng)一主題歐美風主題，簡約大氣。選取了黑色、白色、紅色為主要色調進行搭配，其中黑白兩色在RGB顏色模式下處于色盤的兩個端點，對比性較為強烈，搭配使用會呈現(xiàn)出干凈的效果，紅色代表熱情與活力，暖色調的選擇更受到女性消費者的喜愛，三個顏色的搭配會體現(xiàn)出簡潔大氣的效果，與此同時也不會減少人們的購物熱情，給用戶呈現(xiàn)了良好的視覺感官，降低了由于顏色過多造成的視覺繁雜感。

4 網站功能規(guī)劃

作為服裝類企業(yè)電子商務網站的前臺，會員注冊和登錄是用戶在線購買商品的基本功能。用戶還可以通過該平臺查詢、更新個人資料、查看自己支付的訂單、查看個人意見、查看商品評價、查看購物車、更改密碼等功能。用戶還可以通過該平臺查詢、更新個人資料、查看支付訂單、查看個人意見、查看商品評價、查看購物車、更改密碼等。為了方便用戶在線購買，該平臺提供瀏覽產品類別、產品搜索、瀏覽產品詳情、產品添加到購物車、下單等功能。此外，為了讓用戶更好地了解產品，能夠及時和商家溝通，該平臺還考慮設立品牌介紹和與我們聯(lián)系相關功能。

因此，在功能設計上魅力印象服飾電子商城網站由首頁（index）、與我相關（about）、招聘（careers）、聯(lián)系我們（contact）、公司介紹（company）、公司注冊（register）、登錄（login）、注冊（register）、購物車（wish list）以及詳情頁（single）十個頁面所構成的，以下內容對各個頁面進行介紹，圖2為該網站的功能結構框架。

圖2 網站功能結構框架

（1）首頁（index）所呈現(xiàn)的功能：在首頁中的導航欄下方設有輪播模塊，此處的功能是放置網站推薦的商品Banner；在輪播的下方設有商品搜索功能，方便用戶對自己所需服飾進行直接搜索；之后在搜索欄的左下方設有商品目錄功能以及服飾論壇，商品目錄具體是對所有服飾進行了分類，用戶可根據(jù)自己的需求點擊查看，服飾論壇則是用戶自主的對服裝問題進行討論；右下方是網站對各類服飾的推送，用戶可對自己心儀商品點擊查看價格、詳情或點擊購買。

（2）與我相關（about）具體功能：此頁面的功能是介紹什么是魅力印象、魅力印象的歷史、發(fā)展歷程、優(yōu)勢及榮譽等。

（3）招聘（careers）的功能從字面意思上就可以體現(xiàn)出來，此頁面存在的目的是對想要加入魅力印象的商戶提出具體要求以及加入方法。

（4）聯(lián)系我們（contact）的功能：此頁面的功能可分為兩個部分，第一部分是用戶提供自己的姓名、郵箱及聯(lián)系方式；第二部分則是魅力印象服飾電子商城的地址、電話、網址等。

（5）公司介紹（company）所包含的內容是公司的相關介紹。

（6）公司注冊（register）的功能是賣家的注冊通道。

（7）登錄（login）界面中包含兩個功能，第一個功能是對沒有注冊的用戶提示創(chuàng)建一個新賬戶，有賬號的用戶可直接登錄。

（8）注冊（register）頁面的功能是買家用戶的注冊通道，其中需要提供用戶的姓名、郵箱、聯(lián)系方式及密碼設置。

（9）購物車（wish list）的功能：此頁面的功能是為用戶心儀的商品創(chuàng)建的心愿單，加入購物車的商品方便用戶尋找并提供價格信息。

（10）詳情頁（single）的主要功能為商品的詳細介紹，其中可以顯示該商品的高清圖片、商品名稱、商品價格、庫存量、尺寸、評價等。

上述內容為魅力印象服飾電子商城的各個頁面的基本功能規(guī)劃。

總之，HTML5技術是新興的開發(fā)技術，此項技術的問世是網絡應用技術開發(fā)的新飛躍，它以更先進的方式處理圖片、音頻、視頻等，大大解決了網站跨平臺時存在的不兼容性。在使用HTML5進行開發(fā)的同時也要結合JavaScript的腳本嵌入、CSS樣式和函數(shù)的調用等方法對網站進行裝飾，將所構建的網站進行美化。魅力印象服飾電子商城網站前端設計包含了首頁、關于我們、招聘、公司簡介、公司注冊、登錄、購物車等功能，該網站中同時包含了服裝分類，用戶可根據(jù)自己所需要的服裝類別進行篩選，方便、省時，是購買服裝類應用的極佳選擇。在此網站的設計中固然是存在買家和賣家的雙重選擇，雙向提供了便利條件。