春夏網(wǎng)站W(wǎng)eb端網(wǎng)頁(yè)設(shè)計(jì)

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

目錄

1網(wǎng)站設(shè)計(jì)需求分析....................................................................................................1

1.1網(wǎng)站建設(shè)背景..............................................................................................1

1.2網(wǎng)站結(jié)構(gòu)設(shè)計(jì)..............................................................................................3

2網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)............................................................................................................4

2.1頁(yè)面版式設(shè)計(jì)..............................................................................................4

2.2頁(yè)面視覺(jué)元素設(shè)計(jì)....................................................................................16

3網(wǎng)站前端設(shè)計(jì)..........................................................................................................18

3.1網(wǎng)頁(yè)高保真原型設(shè)計(jì)................................................................................18

3.2網(wǎng)頁(yè)動(dòng)態(tài)特效設(shè)計(jì)....................................................................................28

4設(shè)計(jì)總結(jié)..................................................................................................................30

參考資料.........................................................................................................................32

I

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

春夏網(wǎng)站W(wǎng)eb端網(wǎng)頁(yè)設(shè)計(jì)

1網(wǎng)站設(shè)計(jì)需求分析

1.1網(wǎng)站建設(shè)背景

基于對(duì)春夏這一品牌的了解，發(fā)現(xiàn)春夏只設(shè)立了各電商平臺(tái)的官方旗艦店，

并沒(méi)有屬于自己的官方網(wǎng)站。為了幫助該品牌在網(wǎng)絡(luò)上建立品牌形象、提升品

牌知名度、擴(kuò)大品牌影響力，決定為該品牌設(shè)計(jì)制作一個(gè)網(wǎng)站。于是完成了關(guān)

于春夏品牌官網(wǎng)網(wǎng)站的功能設(shè)計(jì)和網(wǎng)頁(yè)結(jié)構(gòu)設(shè)計(jì)，通過(guò)網(wǎng)站讓該品牌在互聯(lián)網(wǎng)

上建立品牌形象，讓更多的用戶(hù)了解該品牌的產(chǎn)品和服務(wù)，從而增加品牌的曝

光率和知名度。通過(guò)網(wǎng)站，可以向用戶(hù)展示品牌的理念、文化、產(chǎn)品特點(diǎn)、使

用方法、用戶(hù)評(píng)價(jià)等內(nèi)容，讓用戶(hù)更好地了解該品牌的特點(diǎn)和優(yōu)勢(shì)，從而吸引

更多的用戶(hù)了解和使用該品牌的產(chǎn)品。

1.1.1用戶(hù)需求分析

春夏是一家以天然植物成分為基礎(chǔ)研發(fā)的護(hù)膚品牌，其產(chǎn)品定位于中高端

市場(chǎng)，主要面向追求天然、健康、環(huán)保的年輕女性?；谶@些特點(diǎn)，以下是對(duì)

春夏用戶(hù)畫(huà)像的分析：

1.年齡段：春夏的目標(biāo)消費(fèi)者通常集中在20歲到40歲之間，這個(gè)年齡段

的女性更注重肌膚健康和美容護(hù)膚，同時(shí)有一定的經(jīng)濟(jì)能力。

2.地域：春夏的用戶(hù)主要分布在大城市和一線城市，這些地區(qū)的消費(fèi)者更

加注重時(shí)尚和品質(zhì)。

3.收入水平：由于春夏的產(chǎn)品定位為中高端市場(chǎng)，其用戶(hù)群體一般收入水

平較高，有一定的消費(fèi)能力。

4.興趣愛(ài)好：春夏的用戶(hù)通常對(duì)天然、健康、環(huán)保等方面感興趣，同時(shí)也

關(guān)注時(shí)尚和美容護(hù)膚。他們可能會(huì)關(guān)注潮流、品牌、科技等相關(guān)內(nèi)容。

5.購(gòu)買(mǎi)習(xí)慣：春夏的用戶(hù)通常會(huì)在官網(wǎng)或線下門(mén)店購(gòu)買(mǎi)產(chǎn)品，他們對(duì)產(chǎn)品

的品質(zhì)和口碑有一定的要求，通常會(huì)關(guān)注產(chǎn)品的成分、功效和使用方法等方面。

6.社交媒體使用情況：春夏的用戶(hù)常用的社交平臺(tái)有微博、微信、抖音、

小紅書(shū)。春夏的用戶(hù)通常會(huì)在社交媒體上關(guān)注美容護(hù)膚相關(guān)的內(nèi)容，如美妝博

主、美容達(dá)人等，同時(shí)也會(huì)在社交媒體上分享自己的使用心得和體驗(yàn)。

1

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

1.1.2競(jìng)爭(zhēng)品牌分析

表1競(jìng)品分析表

競(jìng)爭(zhēng)品牌產(chǎn)品定位目標(biāo)消費(fèi)群體品牌主張產(chǎn)品賣(mài)點(diǎn)

科技與美學(xué)

的完美結(jié)合，品質(zhì)穩(wěn)定、口碑好、價(jià)格

L'Oreal中高端化年齡在18-45

讓每個(gè)女性適中、種類(lèi)繁多、適合不

Paris妝品品牌歲之間的女性

都能擁有自同膚質(zhì)和需求的人群

信美麗

顏色鮮艷、色彩多樣、品

MAC專(zhuān)業(yè)化妝專(zhuān)業(yè)化妝師和自由、創(chuàng)新、質(zhì)高端、持久性強(qiáng)、適合

Cosmetics品品牌高端消費(fèi)者多元、尊重舞臺(tái)、攝影、影視等專(zhuān)業(yè)

需求

天然成分、簡(jiǎn)約包裝、易

年齡在18-35

輕奢化妝自然、簡(jiǎn)約、于攜帶、適合日常使用、

Glossier歲之間的年輕

品品牌實(shí)用、有趣追求自然、健康、自信的

女性

年輕女性喜歡

通過(guò)對(duì)不同產(chǎn)品的分析，以下是春夏的產(chǎn)品定位、目標(biāo)消費(fèi)群體、品牌主

張和產(chǎn)品賣(mài)點(diǎn)：產(chǎn)品定位：以天然植物成分為基礎(chǔ)研發(fā)的高品質(zhì)護(hù)膚品牌。目

標(biāo)消費(fèi)群體：注重天然、健康、環(huán)保的年輕女性，年齡主要集中在20-40歲之

間，消費(fèi)能力較強(qiáng)。品牌主張：科學(xué)、自然、高效、健康，致力于提供天然、

健康的護(hù)膚產(chǎn)品，讓每個(gè)人都能擁有健康而美麗的肌膚。產(chǎn)品賣(mài)點(diǎn)：天然植物

成分、無(wú)添加、低敏配方、無(wú)動(dòng)物實(shí)驗(yàn)、高效保濕、舒緩鎮(zhèn)靜、改善膚質(zhì)、提

升肌膚光澤、適合各種膚質(zhì)和年齡的消費(fèi)者使用。

1.1.3網(wǎng)站功能設(shè)計(jì)

春夏網(wǎng)站設(shè)計(jì)的功能有：

本網(wǎng)頁(yè)設(shè)計(jì)旨在打造一個(gè)用戶(hù)友好、美觀大方、易于操作、具有品牌特色

的化妝品網(wǎng)站，讓用戶(hù)能夠快速、方便地瀏覽、選擇、購(gòu)買(mǎi)化妝品產(chǎn)品。

頁(yè)面布局：本網(wǎng)站采用簡(jiǎn)潔明了的頁(yè)面布局，主要內(nèi)容放在頁(yè)面中心位置，

包括產(chǎn)品列表、熱銷(xiāo)產(chǎn)品推薦等。同時(shí)提供一個(gè)易于發(fā)現(xiàn)的菜單欄，包括主要

產(chǎn)品分類(lèi)、品牌介紹、會(huì)員權(quán)益等，讓用戶(hù)能夠快速找到自己需要的產(chǎn)品。

頁(yè)面排版：本網(wǎng)站的排版美觀大方，突出品牌形象，同時(shí)注重閱讀體驗(yàn)。

2

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

文字和圖片的排版合理，讓用戶(hù)能夠輕松地閱讀和獲取信息。同時(shí)，排版主要

針對(duì)Web端設(shè)備的屏幕尺寸，提供更好的用戶(hù)體驗(yàn)。

頁(yè)面設(shè)計(jì)：本網(wǎng)站的設(shè)計(jì)注重品牌形象和用戶(hù)體驗(yàn)。網(wǎng)站的色彩和風(fēng)格與

品牌形象相符，突出品牌特色。同時(shí)，網(wǎng)站的設(shè)計(jì)注重用戶(hù)體驗(yàn)，如提供易于

理解的圖標(biāo)和標(biāo)簽、易于操作的按鈕和導(dǎo)航欄等，讓用戶(hù)能夠更好地了解和選

擇產(chǎn)品。

頁(yè)面交互：本網(wǎng)站的交互簡(jiǎn)單明了，讓用戶(hù)能夠輕松地完成購(gòu)物流程。提

供商品瀏覽、商品詳情、商品推薦等交互式功能，讓用戶(hù)能夠更好地了解和選

擇產(chǎn)品。同時(shí)，也提供一個(gè)商品立即購(gòu)買(mǎi)功能，讓用戶(hù)能夠快速、方便地完成

購(gòu)物流程。

1.2網(wǎng)站結(jié)構(gòu)設(shè)計(jì)

1.2.1網(wǎng)頁(yè)層次設(shè)計(jì)

一個(gè)好的網(wǎng)站結(jié)構(gòu)設(shè)計(jì)對(duì)于網(wǎng)站的發(fā)展和運(yùn)營(yíng)至關(guān)重要，它可以提升用戶(hù)

體驗(yàn)、優(yōu)化搜索引擎排名、提高網(wǎng)站性能以及方便管理維護(hù)，進(jìn)而提高企業(yè)的

競(jìng)爭(zhēng)力和品牌知名度。

圖1網(wǎng)頁(yè)層次設(shè)計(jì)

3

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

1.2.2交互邏輯設(shè)計(jì)

良好的網(wǎng)頁(yè)交互設(shè)計(jì)可以吸引用戶(hù)的注意力，提高用戶(hù)在網(wǎng)站上停留的時(shí)

間，提升用戶(hù)的參與度。通過(guò)針對(duì)用戶(hù)需求進(jìn)行設(shè)計(jì)，提供更好的用戶(hù)交互體

驗(yàn)，從而提高用戶(hù)的滿(mǎn)意度和忠誠(chéng)度。良好的網(wǎng)頁(yè)交互設(shè)計(jì)可以使得網(wǎng)站流程

更加順暢、用戶(hù)體驗(yàn)更加完美，從而降低用戶(hù)流失率，提高網(wǎng)站的轉(zhuǎn)化率。

網(wǎng)站有一個(gè)所有頁(yè)面共用的頭部實(shí)現(xiàn)導(dǎo)航欄的功能，導(dǎo)航欄有首頁(yè)、產(chǎn)品

分類(lèi)、品牌介紹、會(huì)員權(quán)益四個(gè)欄目，用戶(hù)可以方便的找到并跳轉(zhuǎn)到相應(yīng)主題

的頁(yè)面中，四個(gè)欄目按鈕在鼠標(biāo)指向時(shí)會(huì)變色給予用戶(hù)反饋，頭部的logo點(diǎn)擊

能鏈接到首頁(yè)。

首頁(yè)的banner輪播圖在會(huì)自動(dòng)輪播展示不同的banner，在鼠標(biāo)指向它時(shí)會(huì)

停止輪播，輪播圖兩側(cè)的箭頭按鈕可以跳轉(zhuǎn)到下一個(gè)或上一個(gè)banner，輪播點(diǎn)

在鼠標(biāo)指向時(shí)會(huì)顯示為對(duì)應(yīng)的banner方便用戶(hù)查看banner，點(diǎn)擊banner圖片

都能夠跳轉(zhuǎn)都對(duì)應(yīng)的產(chǎn)品的商品詳情頁(yè)；熱銷(xiāo)產(chǎn)品的四個(gè)產(chǎn)品圖片在被鼠標(biāo)指

向時(shí)會(huì)呈現(xiàn)虛化效果給予用戶(hù)反饋體驗(yàn)提升互動(dòng)感，點(diǎn)擊產(chǎn)品圖片或者下方產(chǎn)

品信息可以跳轉(zhuǎn)到商品詳情頁(yè)進(jìn)行購(gòu)買(mǎi)。

尾部的關(guān)注我們處的三個(gè)社交平臺(tái)圖標(biāo)，在鼠標(biāo)指向時(shí)會(huì)在旁邊顯示出對(duì)

應(yīng)社交平臺(tái)賬號(hào)的二維碼，方便用戶(hù)對(duì)春夏的社交平臺(tái)進(jìn)行關(guān)注訪問(wèn)。

導(dǎo)航欄的品牌介紹欄目下有三個(gè)相同類(lèi)型的頁(yè)面，在鼠標(biāo)指向品牌介紹按

鈕時(shí)會(huì)有下拉列表展示出三個(gè)頁(yè)面的鏈接按鈕。

2網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)

頁(yè)面版式設(shè)計(jì)要使網(wǎng)頁(yè)整體協(xié)調(diào)內(nèi)容條理清晰，在有好的頁(yè)面版式設(shè)計(jì)的

情況下會(huì)提高用戶(hù)在頁(yè)面中的留存時(shí)間，因?yàn)榫W(wǎng)頁(yè)的版式、色彩、內(nèi)容尺寸等

方面對(duì)用戶(hù)關(guān)于網(wǎng)頁(yè)的觀感會(huì)有很大的影響。

2.1頁(yè)面版式設(shè)計(jì)

頁(yè)面版式設(shè)計(jì)的重要性毋庸置疑，能夠影響整個(gè)網(wǎng)站的呈現(xiàn)效果。這里使

用Axure8制作低保真線框圖進(jìn)行版式的設(shè)計(jì)，對(duì)尺寸大小、內(nèi)容位置進(jìn)行合理

的布局。如圖3所示。

2.1.1首頁(yè)

下面為首頁(yè)布局圖，如圖2為結(jié)構(gòu)圖，圖3為線稿圖。主要由頂部導(dǎo)航欄、

主體內(nèi)容、尾部組成。導(dǎo)航欄部分有品牌logo及其他四個(gè)模塊，點(diǎn)擊不同的導(dǎo)

4

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

航進(jìn)入對(duì)應(yīng)的頁(yè)面。中間的主體內(nèi)容包含了banner板塊，banner圖片輪播對(duì)產(chǎn)

品進(jìn)行展示吸引顧客的注意；Banner下面一個(gè)板塊是熱銷(xiāo)產(chǎn)品，設(shè)置了四個(gè)熱

銷(xiāo)產(chǎn)品的展示，用綠色和藍(lán)色的方塊進(jìn)行產(chǎn)品直接的分割并且襯托出層次感顯

得更為立體，產(chǎn)品有具體的品名及價(jià)格顯示提供關(guān)于產(chǎn)品的基本信息，顏色鮮

明對(duì)比的“立即購(gòu)買(mǎi)”按鈕吸引用戶(hù)點(diǎn)擊前往商品詳情頁(yè)。熱銷(xiāo)產(chǎn)品板塊下面

是關(guān)于我們，顯示了關(guān)于春夏品牌的信息。尾部展示的是企業(yè)聯(lián)系方式，微博、

抖音、小紅書(shū)三個(gè)社交平臺(tái)賬號(hào)二維碼，用戶(hù)可以掃碼添加查看春夏的社交平

臺(tái)賬號(hào)。

首頁(yè)是用戶(hù)最先看到的頁(yè)面，太多的文字信息會(huì)使用戶(hù)失去瀏覽興趣，所

以用少即是多的設(shè)計(jì)使首頁(yè)盡量潔簡(jiǎn)美觀不失吸引力，用戶(hù)也容易在內(nèi)容中找

到自己想要的。

圖2首頁(yè)層次結(jié)構(gòu)圖5

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖3網(wǎng)站首頁(yè)線框圖

2.1.2產(chǎn)品分類(lèi)頁(yè)

下面為產(chǎn)品分類(lèi)頁(yè)，如圖4為結(jié)構(gòu)圖，圖5、6為線稿圖。由頂部導(dǎo)航欄、

主體內(nèi)容、尾部組成。導(dǎo)航欄部分有品牌logo及其他四個(gè)模塊，點(diǎn)擊不同的導(dǎo)

6

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

航進(jìn)入對(duì)應(yīng)的頁(yè)面。尾部展示的是企業(yè)聯(lián)系方式，微博、抖音、小紅書(shū)三個(gè)社

交平臺(tái)賬號(hào)二維碼，用戶(hù)可以掃碼添加查看春夏的社交平臺(tái)賬號(hào)。中間的主體

內(nèi)容有三個(gè)模塊分別是產(chǎn)品的不同類(lèi)型，主體內(nèi)容在一個(gè)有邊緣陰影的矩形襯

托下顯得有立體感。每個(gè)產(chǎn)品類(lèi)型中有三個(gè)產(chǎn)品，進(jìn)入一種產(chǎn)品類(lèi)型，頁(yè)面由

一張banner和三個(gè)產(chǎn)品組成。

這一頁(yè)面的排版，簡(jiǎn)單明了的向用戶(hù)展示了春夏產(chǎn)品的分類(lèi)情況，方便用

戶(hù)找到自己想要了解、購(gòu)買(mǎi)的類(lèi)型的產(chǎn)品，體現(xiàn)出網(wǎng)站在交互方面的簡(jiǎn)單易用

性。

圖4產(chǎn)品分類(lèi)頁(yè)結(jié)構(gòu)圖

7

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖5產(chǎn)品分類(lèi)頁(yè)線稿圖

8

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖6產(chǎn)品分類(lèi)頁(yè)線稿圖

2.1.3商品詳情頁(yè)

如圖7為商品詳情頁(yè)結(jié)構(gòu)圖，圖8為商品詳情頁(yè)線稿圖，由頂部導(dǎo)航欄、

主體內(nèi)容、尾部組成。導(dǎo)航欄部分有品牌logo及其他四個(gè)模塊，點(diǎn)擊不同的導(dǎo)

航進(jìn)入對(duì)應(yīng)的頁(yè)面。尾部展示的是企業(yè)聯(lián)系方式，微博、抖音、小紅書(shū)三個(gè)社

交平臺(tái)賬號(hào)二維碼，用戶(hù)可以掃碼添加查看春夏的社交平臺(tái)賬號(hào)。中間的主體

內(nèi)容，左側(cè)的矩形框是商品展示區(qū)，右邊是商品的品名、規(guī)格、物流、購(gòu)買(mǎi)按

鈕。下面是產(chǎn)品信息圖:展示了產(chǎn)品的細(xì)節(jié)、規(guī)格尺寸、產(chǎn)地及產(chǎn)品賣(mài)點(diǎn)等。

圖7商品詳情頁(yè)結(jié)構(gòu)圖

9

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖8商品詳情頁(yè)線稿圖

2.1.4品牌介紹和品牌理念頁(yè)

品牌介紹和品牌理念頁(yè)基本相同，如圖9為結(jié)構(gòu)圖，圖10為線稿圖。由頂

部導(dǎo)航欄、主體內(nèi)容、尾部組成。導(dǎo)航欄部分有品牌logo及其他四個(gè)模塊，點(diǎn)

擊不同的導(dǎo)航進(jìn)入對(duì)應(yīng)的頁(yè)面。尾部展示的是企業(yè)聯(lián)系方式，微博、抖音、小

紅書(shū)三個(gè)社交平臺(tái)賬號(hào)二維碼，用戶(hù)可以掃碼添加查看春夏的社交平臺(tái)賬號(hào)。

中間的主體內(nèi)容由文字和圖片的左右排版。

10

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

采用圖左右排版這種排版方式，可以讓排版看起來(lái)更加整齊清晰，也比較符

合讀者從左到右的瀏覽習(xí)慣，能讓讀者一眼就能看到文章的重點(diǎn)。

圖9品牌介紹頁(yè)結(jié)構(gòu)圖

圖10品牌介紹頁(yè)線稿圖

11

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.1.5聯(lián)系我們頁(yè)

下面是聯(lián)系我們頁(yè)，如圖11為結(jié)構(gòu)圖，圖12為線稿圖。由頂部導(dǎo)航欄、

主體內(nèi)容、尾部組成。導(dǎo)航欄部分有品牌logo及其他四個(gè)模塊，點(diǎn)擊不同的導(dǎo)

航進(jìn)入對(duì)應(yīng)的頁(yè)面。尾部展示的是企業(yè)聯(lián)系方式，微博、抖音、小紅書(shū)三個(gè)社

交平臺(tái)賬號(hào)二維碼，用戶(hù)可以掃碼添加查看春夏的社交平臺(tái)賬號(hào)。中間的主體

內(nèi)容有聯(lián)系我們的banner圖，下面是春夏品牌的企業(yè)主名稱(chēng)、電話聯(lián)系方式、

電子郵件地址，提供信息方便用戶(hù)聯(lián)系以解決問(wèn)題，各個(gè)信息有形象的圖標(biāo)。

再下面是公司具體地址，左圖右文字圖片是公司位置地圖示意圖。

圖11聯(lián)系我們頁(yè)結(jié)構(gòu)圖

12

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖12聯(lián)系我們頁(yè)線稿圖

2.1.6春夏資訊頁(yè)

下面是春夏資訊頁(yè)，如圖13為結(jié)構(gòu)圖，圖14為線稿圖。由頂部導(dǎo)航欄、

主體內(nèi)容、尾部組成。導(dǎo)航欄部分有品牌logo及其他四個(gè)模塊，點(diǎn)擊不同的導(dǎo)

航進(jìn)入對(duì)應(yīng)的頁(yè)面。尾部展示的是企業(yè)聯(lián)系方式，微博、抖音、小紅書(shū)三個(gè)社

交平臺(tái)賬號(hào)二維碼，用戶(hù)可以掃碼添加查看春夏的社交平臺(tái)賬號(hào)。中間的主體

內(nèi)容有一個(gè)熱門(mén)產(chǎn)品的banner圖，下面三個(gè)資訊板塊由圖片、資訊標(biāo)題、作者

和時(shí)間組成。

13

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖13春夏資訊頁(yè)結(jié)構(gòu)圖

圖14春夏資訊頁(yè)線稿圖

14

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.1.7會(huì)員權(quán)益

下面是會(huì)員權(quán)益頁(yè)，如圖15為結(jié)構(gòu)圖，圖16為線稿圖。由頂部導(dǎo)航欄、主

體內(nèi)容、尾部組成。導(dǎo)航欄部分有品牌logo及其他四個(gè)模塊，點(diǎn)擊不同的導(dǎo)航

進(jìn)入對(duì)應(yīng)的頁(yè)面。尾部展示的是企業(yè)聯(lián)系方式，微博、抖音、小紅書(shū)三個(gè)社交

平臺(tái)賬號(hào)二維碼，用戶(hù)可以掃碼添加查看春夏的社交平臺(tái)賬號(hào)。中間的主體內(nèi)

容有成為會(huì)員和會(huì)員等級(jí)的圖示，文字描述具體會(huì)員權(quán)益。

圖15會(huì)員權(quán)益結(jié)構(gòu)圖

15

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖16會(huì)員權(quán)益線稿圖

2.2頁(yè)面視覺(jué)元素設(shè)計(jì)

2.2.1網(wǎng)站配色

網(wǎng)站的配色根據(jù)春夏的品牌文化及理念延伸得到，主色是白色，藍(lán)色和綠

色為輔助色。

白色寓意白色代表純潔、清新、年輕，象征著圣潔優(yōu)雅。綠色是植物的顏

色，代表自然、生態(tài)、環(huán)保等，因?yàn)榕c春天有關(guān)，所以象征著青春。藍(lán)色象征

寧?kù)o、自由、清新等如圖17所示。

16

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖17網(wǎng)頁(yè)配色圖

2.2.2標(biāo)準(zhǔn)字

網(wǎng)頁(yè)的主體字是Arial字體。導(dǎo)航欄字體為思源黑體CN字體網(wǎng)頁(yè)，網(wǎng)頁(yè)文

字標(biāo)題字體為微軟雅黑字體如圖18所示。

圖18網(wǎng)頁(yè)字體規(guī)范圖

2.2.3圖標(biāo)

網(wǎng)頁(yè)的圖標(biāo)設(shè)計(jì)能夠展現(xiàn)出網(wǎng)頁(yè)的風(fēng)格和細(xì)節(jié)，在網(wǎng)頁(yè)中運(yùn)用到的圖標(biāo)有以

下圖，如圖19所示。

圖19網(wǎng)頁(yè)圖標(biāo)規(guī)范圖

17

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.2.4彈窗

網(wǎng)頁(yè)的彈窗是網(wǎng)頁(yè)中一些按鈕點(diǎn)擊之后彈出的提示窗口，點(diǎn)擊相應(yīng)內(nèi)容按鈕

會(huì)出現(xiàn)相應(yīng)彈窗，如圖20所示。

圖20網(wǎng)頁(yè)彈窗規(guī)范圖

3網(wǎng)站前端設(shè)計(jì)

3.1網(wǎng)頁(yè)高保真原型設(shè)計(jì)

在網(wǎng)頁(yè)高保真原型設(shè)計(jì)過(guò)程中使用到的軟件有Photoshop、Axure8。

3.1.1網(wǎng)站首頁(yè)

用戶(hù)來(lái)的網(wǎng)站首先加入的是首頁(yè)，在首頁(yè)中最吸睛的則是banner圖，我以

三個(gè)熱門(mén)產(chǎn)品制作了3張banner圖；按照一般用戶(hù)的瀏覽順序是從左上開(kāi)始的

所以象征品牌形象的品牌logo放置在網(wǎng)站的左上角一進(jìn)入網(wǎng)站就會(huì)看到；導(dǎo)航

欄設(shè)置的底色是白色用了橫線將導(dǎo)航欄和下面內(nèi)容做分割；banner下面是熱銷(xiāo)

產(chǎn)品、關(guān)于我們兩大模塊。如圖21所示。

18

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖21網(wǎng)站首頁(yè)

3.1.2產(chǎn)品分類(lèi)頁(yè)

產(chǎn)品分類(lèi)頁(yè)展示了產(chǎn)品的三種類(lèi)型。如圖22所示。

19

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖23產(chǎn)品分類(lèi)頁(yè)

每類(lèi)產(chǎn)品中有三個(gè)產(chǎn)品。如圖23所示。

20

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖24產(chǎn)品分類(lèi)-產(chǎn)品頁(yè)

3.1.3商品詳情頁(yè)

商品詳情頁(yè)采用的是作圖右文的版式。展示商品的品名、價(jià)格、規(guī)格、數(shù)

量，賣(mài)點(diǎn)等等；在這個(gè)頁(yè)面可以進(jìn)行商品的購(gòu)買(mǎi)。如圖25所示。

21

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖25商品詳情頁(yè)

3.1.4品牌介紹頁(yè)

品牌介紹頁(yè)用的作圖右文字的版式，頁(yè)面是春夏品牌的簡(jiǎn)單介紹。如圖26

所示。

22

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖26品牌介紹頁(yè)

3.1.5品牌理念頁(yè)

品牌理念頁(yè)面的版式是左文字有圖片，文字用綠色帶陰影的方框做襯托體

現(xiàn)層次感，對(duì)品牌理念進(jìn)行闡述讓用戶(hù)更加深入的了解春夏，增加對(duì)春夏品牌

的認(rèn)同感、信賴(lài)感。如圖27所示。

23

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖27品牌理念頁(yè)

3.1.6聯(lián)系我們頁(yè)

進(jìn)入頁(yè)面首先看到的是聯(lián)系我們的banner圖，下面是春夏品牌的企業(yè)主名

稱(chēng)、電話聯(lián)系方式、電子郵件地址，提供信息方便用戶(hù)聯(lián)系以解決問(wèn)題。再下

面是公司具體地址，左圖右文字圖片是公司位置地圖示意圖。如圖28所示。

24

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖28聯(lián)系我們頁(yè)

3.1.7春夏資訊頁(yè)

進(jìn)入頁(yè)面是一個(gè)熱銷(xiāo)產(chǎn)品的banner增加頁(yè)面美觀性的同時(shí)可以吸引用戶(hù)

進(jìn)入商品詳情頁(yè)提高轉(zhuǎn)化率，banner下面是新聞模塊，圖片加新聞標(biāo)題文字的

結(jié)合更為美觀，點(diǎn)擊可以進(jìn)入具體的新聞信息頁(yè)面。如圖29所示。

25

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖29春夏資訊頁(yè)

3.1.8資訊詳情頁(yè)

資訊詳情頁(yè)是圖文穿插的版式，標(biāo)題、作者、發(fā)布時(shí)間信息簡(jiǎn)單明了，資

訊是一篇對(duì)特一產(chǎn)品的營(yíng)銷(xiāo)文章提高用戶(hù)對(duì)產(chǎn)品的購(gòu)買(mǎi)欲，在標(biāo)題的左邊有一

個(gè)“返回”按鈕方便用戶(hù)回到春夏資訊頁(yè)面查看其他的資訊。如圖30所示。

26

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖30資訊詳情頁(yè)

3.1.9會(huì)員權(quán)益頁(yè)

會(huì)員權(quán)益頁(yè)使用了圖片展示加入會(huì)員的方式，及會(huì)員的各個(gè)等級(jí)；會(huì)員可

以獲得的權(quán)益有休息的文字解釋?zhuān)f(shuō)明了每一級(jí)別的會(huì)員可以享受到的各種權(quán)

益服務(wù)。如圖31所示。

27

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖31會(huì)員權(quán)益頁(yè)

3.2網(wǎng)頁(yè)動(dòng)態(tài)特效設(shè)計(jì)

3.2.1網(wǎng)頁(yè)動(dòng)態(tài)特效

動(dòng)態(tài)特效1：banner輪播特效

圖32banner輪播效果圖

首頁(yè)的banner由三張圖組成，在Axure8軟件中實(shí)現(xiàn)圖片輪播效果，將做

好的三張banner圖導(dǎo)入到軟件的動(dòng)態(tài)面板里，設(shè)置好動(dòng)態(tài)面板的屬性后實(shí)現(xiàn)圖

片輪播效果。如圖32所示。

28

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

動(dòng)態(tài)特效2：下拉列表

圖33下拉列表

網(wǎng)站導(dǎo)航欄中的品牌介紹有下拉列表，當(dāng)鼠標(biāo)懸停在“品牌介紹”時(shí)會(huì)展

開(kāi)顯示出“品牌理念、聯(lián)系我們、春夏資訊”。如圖33所示。

3.2.2網(wǎng)頁(yè)動(dòng)態(tài)特效實(shí)現(xiàn)

Banner輪播特效實(shí)現(xiàn)：建立一個(gè)動(dòng)態(tài)面板，面板里面添加3個(gè)面板狀態(tài)分

別對(duì)應(yīng)制作好的3個(gè)banner，將banner置入各個(gè)面板狀態(tài)中。給動(dòng)態(tài)面板設(shè)置

交互屬性，如圖34所示。

圖34交互屬性

banner的具體動(dòng)態(tài)特效：

自動(dòng)輪播：在載入首頁(yè)時(shí)banner圖就會(huì)自動(dòng)滾動(dòng)播放向用戶(hù)自動(dòng)展示內(nèi)容

。

翻頁(yè)按鈕：在