王佳瑜

（哈爾濱師范大學(xué)傳媒學(xué)院 ，哈爾濱 150000）

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

1 研究背景

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

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

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

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

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

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

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

3 網(wǎng)站主題規(guī)劃

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

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

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

4 網(wǎng)站功能規(guī)劃

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

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

圖2 網(wǎng)站功能結(jié)構(gòu)框架

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

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

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

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

（5）公司介紹（company）所包含的內(nèi)容是公司的相關(guān)介紹。

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

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

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

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

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

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

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