蘭網(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)站視覺設(shè)計(jì).......................................................4

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

2.2網(wǎng)站視覺設(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ì).............................................26

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è)背景

蘭（LAN）品牌誕生于2019年，國(guó)內(nèi)較早貫徹“以油養(yǎng)膚”護(hù)膚理念的護(hù)膚

品品牌，蘭所倡導(dǎo)“純凈有效護(hù)膚”，移除一切不必要的概念和成分，天然、有效、

透明配方的理念受到廣大消費(fèi)者的認(rèn)可和喜愛，其產(chǎn)品更是憑借富含“鉆石油脂、

科技油溶性植物成分、玫瑰果油”等滋養(yǎng)肌膚、抗皮膚衰老成分迅速打入護(hù)膚品

市場(chǎng)。

我自己本身比較了解這個(gè)品牌，也挺喜歡這個(gè)品牌的產(chǎn)品，有發(fā)現(xiàn)它在許

多平臺(tái)上進(jìn)行宣傳推廣，但是卻沒有找到它的官網(wǎng)。通過調(diào)研發(fā)現(xiàn)品牌官網(wǎng)無(wú)

論是在樹立品牌形象還是產(chǎn)品推廣上都發(fā)揮著重要作用，而剛好我在實(shí)習(xí)過程

中組長(zhǎng)要求我們獨(dú)立構(gòu)建網(wǎng)站作為考核，考慮到蘭并沒有官網(wǎng)，我決定將蘭網(wǎng)

站設(shè)計(jì)作為我的被考核項(xiàng)目，同時(shí)我希望把蘭的網(wǎng)站設(shè)計(jì)成與它品牌理念相符

合以及滿足消費(fèi)者需求的獨(dú)一無(wú)二的網(wǎng)站。

1.1.1用戶需求分析

網(wǎng)站用戶需求對(duì)于甲方來(lái)說，蘭的網(wǎng)站設(shè)計(jì)需要讓客戶更加直觀的了解到

它的產(chǎn)品系列、產(chǎn)品展示、產(chǎn)品理念、產(chǎn)品研發(fā)標(biāo)準(zhǔn)、品牌文化以及一系列與

企業(yè)相關(guān)的營(yíng)銷活動(dòng)，能夠讓顧客快速直觀的深入了解整個(gè)品牌，增加消費(fèi)者

對(duì)該品牌的信任感以及促進(jìn)銷售。

蘭網(wǎng)站針對(duì)的主要顧客群體為女性購(gòu)買者，其中大部分膚質(zhì)屬于大干皮、

干皮、干敏皮，對(duì)護(hù)膚品要求高，使用護(hù)膚品頻率高的女性。而這部分女性年

齡大概在20~40歲左右，中等收入且有獨(dú)立經(jīng)濟(jì)來(lái)源、消費(fèi)能力強(qiáng)。女性在網(wǎng)

上購(gòu)物人數(shù)占比最高，而且護(hù)膚品對(duì)于女性生活來(lái)說是必不可少的一部分。隨

著消費(fèi)水平的提高，女性選擇護(hù)膚產(chǎn)品的要求越來(lái)高和嚴(yán)格，除追求精致美觀

的產(chǎn)品設(shè)計(jì)、包裝和產(chǎn)品所屬品牌價(jià)值以外，對(duì)產(chǎn)品提供的基本效用、功能以

及更高層次的使用功能也格外重視。消費(fèi)者不再購(gòu)買毫無(wú)用處的“花瓶”，而是更

加注重產(chǎn)品使用的實(shí)際效用。因此，網(wǎng)站頁(yè)面設(shè)計(jì)除了要美觀舒適以外，還需

簡(jiǎn)單直觀凸顯產(chǎn)品“特色”，直擊消費(fèi)者購(gòu)買產(chǎn)品時(shí)的痛點(diǎn)，滿足消費(fèi)者購(gòu)買需求，

在消費(fèi)者心中形成清晰的產(chǎn)品辨認(rèn)度。蘭倡導(dǎo)“極簡(jiǎn)有效護(hù)膚”理念，可以將品牌

1

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

理念貫徹至網(wǎng)站設(shè)計(jì)的過程當(dāng)中。蘭主要針對(duì)的客戶群體是女性，網(wǎng)站設(shè)計(jì)也

需抓住女性的心理特征和審美觀念，做到“極簡(jiǎn)、舒適”的設(shè)計(jì)風(fēng)格，給消費(fèi)者留

下深刻的產(chǎn)品印象和品牌形象。

1.1.2競(jìng)品分析

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

品牌產(chǎn)品定位目標(biāo)消費(fèi)群體品牌主張產(chǎn)品賣點(diǎn)

逐本雙效舒緩、保針對(duì)26-35歲追逐本質(zhì)，尋十味高濃精油

濕、日抵抗、中國(guó)敏感肌膚求本心。復(fù)配、雙重舒

夜修復(fù)輕熟女性，有愈科技。

獨(dú)立經(jīng)濟(jì)來(lái)源、

消費(fèi)能力強(qiáng)。

PMPM抗老緊致、舒年輕中等收入、去往世界，探富含玫瑰角鯊

緩修護(hù)、提亮有獨(dú)立消費(fèi)能索世界。烷舒緩物質(zhì)、

膚色力的女性。透亮抗氧強(qiáng)韌

屏障。

萃樂活密集修復(fù)、長(zhǎng)歐美國(guó)家和中簡(jiǎn)單、純凈、天然親膚油脂、

（Trilogy）效滋潤(rùn)、舒緩國(guó)女性消費(fèi)群活力。緊縮肌膚水分。

泛紅干癢體

天露芬抗初老、修復(fù)全世界消費(fèi)者實(shí)現(xiàn)自然健康德國(guó)原裝進(jìn)口、

保濕、緊致肌群體與肌膚呵護(hù)和抗老修復(fù)、輕

膚。諧統(tǒng)一。薄好吸收。

通過對(duì)同類競(jìng)爭(zhēng)產(chǎn)品進(jìn)行分析，得出以油護(hù)膚系列產(chǎn)品的定位以修復(fù)、抗

老、保濕為主，目標(biāo)客戶群體為年輕有購(gòu)買能力的女性顧客。所以蘭品牌面向

的是年輕、有護(hù)膚習(xí)慣且有獨(dú)立經(jīng)濟(jì)來(lái)源的女性顧客群體，品牌主張為“純凈有

效護(hù)膚”，產(chǎn)品賣點(diǎn)為移除一切不必要的概念和成分，天然、有效、透明配方，

用最少的產(chǎn)品達(dá)到最有效的護(hù)膚效果。

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

蘭網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)主要實(shí)現(xiàn)的功能模塊有：

首頁(yè)：主要由banner、明星臻品、極簡(jiǎn)護(hù)膚組成。用戶在瀏覽首頁(yè)時(shí)可以點(diǎn)

擊banner進(jìn)入相應(yīng)鏈接，也可以通過點(diǎn)擊產(chǎn)品圖片或者點(diǎn)擊了解詳情按鈕可以

進(jìn)入到產(chǎn)品的詳情介紹頁(yè)面中。

品牌故事：主要banner、品牌理念、品牌哲學(xué)、產(chǎn)品開發(fā)標(biāo)準(zhǔn)四個(gè)部分組成。

精油系列：介紹企業(yè)精油系列的相關(guān)產(chǎn)品，包括時(shí)光精油、修復(fù)精油、鳳

凰精油等比較熱門的幾款產(chǎn)品。

2

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

洗護(hù)系列：介紹企業(yè)其他護(hù)膚產(chǎn)品，包括卸妝油、洗面奶、修復(fù)面霜、面

膜等產(chǎn)品。用戶可以點(diǎn)擊產(chǎn)品圖片或者點(diǎn)擊了解詳情按鈕進(jìn)入相應(yīng)的鏈接。

油樂場(chǎng)：是用來(lái)介紹產(chǎn)品配套產(chǎn)品瑜伽板的使用方法以及產(chǎn)品優(yōu)惠活動(dòng)，

用戶在這個(gè)頁(yè)面可以了解相關(guān)產(chǎn)品的活動(dòng)以及參與活動(dòng)的地點(diǎn)、方式等。

商品詳情頁(yè)面：是產(chǎn)品的詳情頁(yè)，主要包括商品主圖、商品詳細(xì)信息、用

戶購(gòu)買評(píng)價(jià)，用戶可以點(diǎn)擊加入購(gòu)物車或者點(diǎn)擊立即購(gòu)買按鈕進(jìn)行購(gòu)買。

登錄和注冊(cè)頁(yè)面：用戶可以進(jìn)入登錄頁(yè)面進(jìn)行登錄，如果用戶沒有注冊(cè)賬

號(hào)，可以點(diǎn)擊立即注冊(cè)注冊(cè)好賬號(hào)之后再進(jìn)行登錄。

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

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

圖1網(wǎng)站結(jié)構(gòu)層次圖

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

本網(wǎng)站主要人機(jī)交互式設(shè)計(jì)是點(diǎn)擊鼠標(biāo)跳轉(zhuǎn)頁(yè)面，即用戶在瀏覽器瀏覽網(wǎng)

站時(shí)通過鼠標(biāo)進(jìn)入相應(yīng)的頁(yè)面查看相關(guān)信息。

網(wǎng)站的每一個(gè)頁(yè)面都設(shè)計(jì)了一個(gè)導(dǎo)航欄，導(dǎo)航欄主要有首頁(yè)、品牌文化、

精油系列、滋養(yǎng)護(hù)膚、油樂場(chǎng)按鈕，用戶可以通過點(diǎn)擊導(dǎo)航欄上的按鈕進(jìn)入相

應(yīng)的頁(yè)面模塊。

3

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

在網(wǎng)站首頁(yè)，用戶可以點(diǎn)擊去登錄進(jìn)入會(huì)員登錄頁(yè)面，已經(jīng)入會(huì)的用戶可

以使用注冊(cè)好了的賬號(hào)密碼直接登錄，用戶登錄后成功后會(huì)有提示是進(jìn)入首頁(yè)

還是取消登錄，用戶可以自行選擇。尚未入會(huì)的用戶可以點(diǎn)擊立即入會(huì)按鈕進(jìn)

行入會(huì)操作，入會(huì)成功可以點(diǎn)擊登錄按鈕進(jìn)行登錄，點(diǎn)擊登錄頁(yè)面的logo圖片

按鈕進(jìn)入網(wǎng)站首頁(yè)?；氐骄W(wǎng)站首頁(yè)，點(diǎn)擊明星臻品欄里想要了解的產(chǎn)品圖片進(jìn)

入產(chǎn)品詳情頁(yè)，在產(chǎn)品詳情頁(yè)里可以點(diǎn)擊購(gòu)買按鈕立即購(gòu)買，也可點(diǎn)擊加購(gòu)按

鈕將產(chǎn)品加入購(gòu)物車，點(diǎn)擊導(dǎo)航欄上的首頁(yè)按鈕即可返回首頁(yè)頁(yè)面。

在品牌故事頁(yè)面，用戶點(diǎn)擊導(dǎo)航欄的品牌故事按鈕可以進(jìn)入品牌文化介紹

頁(yè)面，了解相應(yīng)品牌信息，讓用戶更快更好的了解到品牌信息，增加對(duì)品牌的

信任度。

在精油系列頁(yè)面，用戶點(diǎn)擊精油系列按鈕進(jìn)入精油系列產(chǎn)品展示頁(yè)面，點(diǎn)

擊產(chǎn)品圖片或了解詳情按鈕進(jìn)入產(chǎn)品詳情頁(yè)面，幫助用戶更詳細(xì)的了解產(chǎn)品信

息。

在滋養(yǎng)護(hù)膚系列頁(yè)面，用戶點(diǎn)擊滋養(yǎng)護(hù)膚按鈕進(jìn)入對(duì)應(yīng)產(chǎn)品的展示頁(yè)。點(diǎn)

擊展示頁(yè)里展示的產(chǎn)品圖片或者點(diǎn)擊了解詳情可以進(jìn)入對(duì)應(yīng)產(chǎn)品的詳情頁(yè)面，

可以看到產(chǎn)品的詳細(xì)介紹以及其他用戶的購(gòu)買體驗(yàn)。

在油樂場(chǎng)頁(yè)面里面，用戶點(diǎn)擊油樂場(chǎng)按鈕進(jìn)入油樂場(chǎng)頁(yè)面，在這個(gè)頁(yè)面里

面，用戶可以了解到產(chǎn)品配套產(chǎn)品瑜伽刮板的使用方法與功效，還可以了解企

業(yè)產(chǎn)品活動(dòng)時(shí)間和參與地點(diǎn)。

在產(chǎn)品詳情頁(yè)里，用戶可以鼠標(biāo)點(diǎn)擊加購(gòu)按鈕將想要購(gòu)買的產(chǎn)品加入購(gòu)物

車，也可以鼠標(biāo)點(diǎn)擊立即購(gòu)買按鈕購(gòu)買該產(chǎn)品，向下滑動(dòng)，可以點(diǎn)擊寶貝詳情

看到詳細(xì)的寶貝介紹，點(diǎn)擊寶貝評(píng)價(jià)可以看到以及購(gòu)買過該產(chǎn)品的用戶評(píng)價(jià)和

使用感受。

2網(wǎng)站視覺設(shè)計(jì)

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

網(wǎng)站的每個(gè)網(wǎng)頁(yè)的版式設(shè)計(jì)我是先在稿紙上畫出草稿線稿圖，設(shè)計(jì)好草稿

線稿圖之后采用AxureRP軟件制作低保真線稿圖，最后進(jìn)行整個(gè)網(wǎng)站的高保真

圖的制作。在確定整個(gè)網(wǎng)站的設(shè)計(jì)框架之前，我查閱了許多關(guān)于網(wǎng)站設(shè)計(jì)規(guī)范

的資料，同樣也瀏覽了許多優(yōu)秀的同行業(yè)品牌的網(wǎng)站設(shè)計(jì)，根據(jù)蘭品牌不同產(chǎn)

品的特點(diǎn)來(lái)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。

4

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

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

此頁(yè)面為網(wǎng)站首頁(yè)布局，網(wǎng)站首頁(yè)整體框架包括頂部導(dǎo)航、主要內(nèi)容、底

部導(dǎo)航三個(gè)部分。頂部導(dǎo)航包括logo導(dǎo)航、去登錄和整個(gè)網(wǎng)站的主要導(dǎo)航欄目

區(qū)。主要內(nèi)容包括熱賣產(chǎn)品banner、明星臻品和極簡(jiǎn)護(hù)膚。底部導(dǎo)航包括公司相

關(guān)信息。

首頁(yè)線框圖主要采用AxureRP軟件進(jìn)行制作。制作過程主要分為三個(gè)步驟：

第一步使用矩形工具制作好頂部導(dǎo)航欄；第二步使用占位符工具確定爆款banner

的位置，用矩形工具和圖片設(shè)計(jì)明星臻品以及極簡(jiǎn)護(hù)膚產(chǎn)品區(qū)域；最后使用矩

形工具繪制出底部導(dǎo)航欄。

網(wǎng)站首頁(yè)是整個(gè)網(wǎng)站最重要第一個(gè)頁(yè)面，因?yàn)橛脩魹g覽網(wǎng)站時(shí)看到的第一

個(gè)頁(yè)面就是首頁(yè)，首頁(yè)的設(shè)計(jì)決定了用戶對(duì)整個(gè)網(wǎng)站的第一個(gè)印象。我在首頁(yè)

設(shè)計(jì)時(shí)首先考慮到的是要讓用戶直觀且快速的知道整個(gè)網(wǎng)站傳遞給他的有價(jià)值

信息，吸引用戶眼球，讓用戶有興趣的接著瀏覽。所有我在首頁(yè)內(nèi)容版式設(shè)計(jì)

時(shí)采用了邏輯式思維，首先制作了產(chǎn)品的大banner給用戶視覺沖擊力；其次在

明星臻品區(qū)域使用四列式排列，產(chǎn)品與介紹左右交叉排列，這樣用戶在瀏覽時(shí)

不會(huì)決定枯燥無(wú)味；最后在極簡(jiǎn)護(hù)膚區(qū)域?qū)Ξa(chǎn)品采用豎向排列式，整個(gè)版面看

起來(lái)簡(jiǎn)單舒適，整齊一致。

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

5

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

圖3首頁(yè)線框圖

2.1.2品牌故事頁(yè)

此頁(yè)面為品牌故事頁(yè)，主要包括頂部導(dǎo)航欄、品牌故事內(nèi)容區(qū)、底部導(dǎo)航

欄。頂部導(dǎo)航包括logo導(dǎo)航、去登錄和整個(gè)網(wǎng)站的主要導(dǎo)航欄目區(qū)。品牌故事

6

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

內(nèi)容區(qū)括banner、品牌理念、品牌哲學(xué)和開發(fā)標(biāo)準(zhǔn)。底部導(dǎo)航包括公司相關(guān)信息。

首頁(yè)線框圖主要采用AxureRP軟件進(jìn)行制作。制作過程分為三個(gè)步驟：第

一步，使用矩形工具繪制出頂部導(dǎo)航欄；第二步，使用占位符確定banner位置，

分別使用圖片文字和矩形工具繪制出品牌理念、品牌哲學(xué)、開發(fā)標(biāo)準(zhǔn)區(qū)域；第

三步，使用矩形工具繪制出底部導(dǎo)航。

品牌故事頁(yè)版面設(shè)計(jì)總體講究一個(gè)簡(jiǎn)潔，目的在于讓用戶能夠快速了解品

牌信息，文字與圖片結(jié)合的方式將品牌理念賦予在產(chǎn)品本身，理念貫徹于產(chǎn)品

本身，用戶在使用產(chǎn)品時(shí)能夠聯(lián)想到本企業(yè)的品牌文化，加深用戶對(duì)產(chǎn)品的印

象。

圖4品牌故事層次圖

7

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

圖5品牌故事線框圖

8

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

2.1.3產(chǎn)品類目頁(yè)

此頁(yè)面為產(chǎn)品類目頁(yè)，主要包括頂部導(dǎo)航欄、產(chǎn)品展示區(qū)、底部導(dǎo)航欄。

頂部導(dǎo)航包括logo導(dǎo)航、去登錄和整個(gè)網(wǎng)站的主要導(dǎo)航欄目區(qū)。

產(chǎn)品類目頁(yè)主要是展示企業(yè)不同產(chǎn)品種類，顯示不同產(chǎn)品功能，同時(shí)增加

產(chǎn)品banner區(qū)展示產(chǎn)品大類。產(chǎn)品類目頁(yè)用AxureRP制作，首先使用矩形工具

繪制出導(dǎo)航欄目；其次使用占位符確定banner區(qū)域；最后采用上圖下文的樣式

設(shè)計(jì)產(chǎn)品展示區(qū)，上方采用圖片工具，下方使用圓角矩形加文字進(jìn)行制作。產(chǎn)

品排列主要采用橫向加縱向方式排列，上圖下文排版產(chǎn)品信息整齊清晰，讓用

戶更快的找到與自己需求相關(guān)的產(chǎn)品。

圖6產(chǎn)品類目頁(yè)層次圖

9

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

圖7產(chǎn)品類目頁(yè)線框圖

2.1.4產(chǎn)品資訊頁(yè)

此頁(yè)面為產(chǎn)品資訊頁(yè)，主要包括頂部導(dǎo)航欄、產(chǎn)品資訊、底部導(dǎo)航欄。頂

部導(dǎo)航包括logo導(dǎo)航、去登錄和整個(gè)網(wǎng)站的主要導(dǎo)航欄目區(qū)。

產(chǎn)品資訊活動(dòng)頁(yè)主要是展示企業(yè)產(chǎn)品的配套工具以及相關(guān)活動(dòng)，幫助用戶

快速了解相關(guān)產(chǎn)品的使用方法，關(guān)注相關(guān)活動(dòng)的開展。增加產(chǎn)品banner吸引用

戶參與活動(dòng)。產(chǎn)品類目頁(yè)使用AxureRP制作，首先使用矩形工具繪制出導(dǎo)航欄

目；其次使用占位符確定banner區(qū)域；最后采用矩形繪制出配套工具使用教程

區(qū)域和活動(dòng)開展內(nèi)容區(qū)域，采用上文下圖的方式進(jìn)行排列。產(chǎn)品資訊頁(yè)主要采

10

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

用縱向方式排列，圖文結(jié)合便于用戶清晰了解產(chǎn)品配套工具的使用，積極參與

企業(yè)活動(dòng)，增加用戶對(duì)企業(yè)的品牌忠誠(chéng)度。

圖8產(chǎn)品資訊層次圖

11

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

圖9產(chǎn)品資訊線框圖

12

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

2.1.5商品詳情頁(yè)

此頁(yè)面為商品詳情頁(yè)，主要包括頂部導(dǎo)航欄、產(chǎn)品詳情、產(chǎn)品評(píng)價(jià)、底部

導(dǎo)航欄。頂部導(dǎo)航包括logo導(dǎo)航、去登錄和整個(gè)網(wǎng)站的主要導(dǎo)航欄目區(qū)。

制作產(chǎn)品詳情頁(yè)的目的在于簡(jiǎn)單齊全的展示產(chǎn)品全部信息，讓用戶以最快

速度了解整個(gè)產(chǎn)品。在商品詳情頁(yè)版式設(shè)計(jì)上采用了左圖右文的排版，左邊是

產(chǎn)品主圖，右邊是產(chǎn)品介紹。在左圖右文的排列下設(shè)置了產(chǎn)品詳情圖介紹以及

產(chǎn)品評(píng)價(jià)區(qū)域，用戶通過滑動(dòng)網(wǎng)頁(yè)可以看到更加詳細(xì)的產(chǎn)品介紹和產(chǎn)品評(píng)價(jià)信

息。商品詳情頁(yè)使用AxureRP軟件進(jìn)行設(shè)計(jì)，主要有三個(gè)步驟：第一步，使用

矩形工具繪制頂部底部導(dǎo)航欄目；第二步，使用圖片工具和文字工具繪制出產(chǎn)

品詳情區(qū)域，使用矩形工具繪制購(gòu)買加購(gòu)按鈕；第三步使用矩形工具繪制產(chǎn)品

詳細(xì)介紹和產(chǎn)品評(píng)價(jià)區(qū)域。

圖10商品詳情層次圖

13

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

圖11商品詳情頁(yè)線框圖

14

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

2.1.6注冊(cè)登錄頁(yè)

注冊(cè)登錄頁(yè)面采用了左圖右登錄面的排版方式，這樣的排版方式增加整個(gè)

頁(yè)面的美感，不會(huì)讓用戶看起來(lái)單調(diào)和枯燥。

注冊(cè)登錄頁(yè)使用AxureRP進(jìn)行制作，首先使用矩形工具制作注冊(cè)登錄大致

內(nèi)容區(qū)域；然后使用文本框制作注冊(cè)登錄具體內(nèi)容區(qū)域；最后對(duì)整體內(nèi)容區(qū)域

進(jìn)行縱向排列。

圖12注冊(cè)登錄頁(yè)面層次圖

圖13注冊(cè)登錄頁(yè)面線框圖1

15

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

圖13注冊(cè)登錄頁(yè)面線框圖2

2.2網(wǎng)站視覺設(shè)計(jì)元素

2.2.1顏色

網(wǎng)站整體的配色設(shè)計(jì)根據(jù)在產(chǎn)品本身顏色的基礎(chǔ)上進(jìn)行擴(kuò)展選取的，主要

選擇了淡黃色作為網(wǎng)站的主色調(diào)。黃色能夠給用戶一種“舒適，簡(jiǎn)單”的感覺，并

且與企業(yè)品牌理念“極簡(jiǎn)有效護(hù)膚”相適應(yīng)。選取與產(chǎn)品同色系的顏色作為網(wǎng)站配

色，在展示產(chǎn)品時(shí)不會(huì)顯得突兀。同樣選用了與主色類似的淡色系作為網(wǎng)站的

輔助色。紅色作為按鈕的顏色。

16

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

圖14網(wǎng)站配色圖

2.2.2導(dǎo)航

導(dǎo)航欄采用了最常見的版式設(shè)計(jì)，導(dǎo)航欄可以把整個(gè)頁(yè)面的大體內(nèi)容呈現(xiàn)

在用戶眼前，讓用戶迅速找到自己想了解的內(nèi)容區(qū)域。

圖15網(wǎng)頁(yè)導(dǎo)航規(guī)范圖

2.2.3布局

網(wǎng)站內(nèi)容控制在1300px以內(nèi)，Banner大小為1920*900px。

圖16網(wǎng)頁(yè)布局規(guī)范圖

17

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

2.2.4字體

網(wǎng)頁(yè)的主體字是華文楷體。banner內(nèi)部的字體為華文新魏，網(wǎng)站導(dǎo)航欄和主

要內(nèi)容部分使用的字體均為華文楷體。

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

2.2.5Logo

網(wǎng)站的logo凸顯企業(yè)形象，富有創(chuàng)造和新穎性的logo往往能夠讓企業(yè)快速

被用戶記住，用戶在看到企業(yè)logo時(shí)會(huì)產(chǎn)生熟悉和親近感。蘭網(wǎng)站的logo來(lái)自

于蘭這個(gè)字的拼寫，logo設(shè)計(jì)簡(jiǎn)單易記。

圖18網(wǎng)站logo圖

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

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

網(wǎng)頁(yè)的高保真原型設(shè)計(jì)是用AxureRP完成制作的。

18

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

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

用戶在瀏覽網(wǎng)站時(shí)第一個(gè)看到的就是網(wǎng)站首頁(yè)，因此在網(wǎng)站首頁(yè)設(shè)計(jì)里面

我首先是設(shè)計(jì)了產(chǎn)品的banner來(lái)吸引顧客注意。往下滑動(dòng)設(shè)計(jì)了明星臻品和極

簡(jiǎn)護(hù)膚產(chǎn)品兩個(gè)區(qū)域，明星臻品主要是本品牌的主打產(chǎn)品，極簡(jiǎn)護(hù)膚里主要是

不同功效的產(chǎn)品，用戶可以根據(jù)自己肌膚特點(diǎn)和需要選擇對(duì)應(yīng)的產(chǎn)品。

19

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

圖19網(wǎng)站首頁(yè)效果圖

20

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

3.1.2品牌故事頁(yè)

品牌故事頁(yè)面在版型設(shè)計(jì)方面采用了文字圖形相結(jié)合的縱向排列，將產(chǎn)品

圖片與品牌故事結(jié)合在一起，一來(lái)用戶在瀏覽時(shí)避免枯燥單調(diào)的感覺，二來(lái)可

以加深用戶對(duì)產(chǎn)品的印象。

圖20品牌故事頁(yè)效果圖

21

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

3.1.3產(chǎn)品類目頁(yè)

產(chǎn)品類目頁(yè)的版型設(shè)計(jì)采用了三排縱向分布的版式設(shè)計(jì)，不同系列的產(chǎn)品

采用相同的版式設(shè)計(jì)，統(tǒng)一布局、簡(jiǎn)潔明了，方便用戶瀏覽。

圖21產(chǎn)品類目頁(yè)效果圖

22

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

3.1.4產(chǎn)品資訊頁(yè)

產(chǎn)品咨詢頁(yè)里我制作了兩個(gè)主要的內(nèi)容：產(chǎn)品配套工具介紹和產(chǎn)品相關(guān)活

動(dòng)介紹。用戶可以在產(chǎn)品咨詢頁(yè)里了解產(chǎn)品配套工具的使用方法，也可以在這

里參與相關(guān)產(chǎn)品的活動(dòng)。

圖22產(chǎn)品資訊頁(yè)效果圖

23

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

3.1.5商品詳情頁(yè)

商品詳情頁(yè)采用了左圖右文結(jié)合的版型設(shè)計(jì)，往下滑可以瀏覽到更詳細(xì)的

商品介紹和寶貝評(píng)價(jià)，能夠讓用戶在最短的時(shí)間內(nèi)了解到商品信息。

圖23商品詳情頁(yè)效果圖

24

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

3.1.6注冊(cè)登錄頁(yè)

注冊(cè)登錄面的設(shè)計(jì)我主要是想做的簡(jiǎn)單，容易操作，太過繁雜的注冊(cè)登錄

會(huì)讓用戶覺得麻煩，從而放棄購(gòu)買。注冊(cè)登錄頁(yè)整個(gè)版面我采用圖框結(jié)合，放

置圖片元素有美觀版面效果，不會(huì)讓頁(yè)面顯得單調(diào)。

圖24注冊(cè)登錄頁(yè)效果圖1

圖24注冊(cè)登錄頁(yè)效果圖2

25

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

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

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

1、Banner輪播特效：

圖25banner效果圖1

圖26banner效果圖2

圖27banner效果圖3

26

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

在首頁(yè)banner輪播里面做了三張圖，利用AxureRP軟件中的動(dòng)態(tài)面板實(shí)現(xiàn)

banner輪播效果。首先將三張圖片做好，在AxureRP軟件中設(shè)置動(dòng)態(tài)面板，動(dòng)

態(tài)面板編輯為三個(gè)內(nèi)容頁(yè)面，將對(duì)應(yīng)的圖片放進(jìn)內(nèi)容頁(yè)面中，把想要顯示的第

一個(gè)圖片放到第一個(gè)內(nèi)容頁(yè)面中，在面板屬性中設(shè)置好面板狀態(tài)，最終實(shí)現(xiàn)輪

播效果。

2、導(dǎo)航欄滑動(dòng)條滑動(dòng)特效：

圖28導(dǎo)航欄滑動(dòng)條效果圖1

圖28導(dǎo)航欄滑動(dòng)條效果圖2

圖28導(dǎo)航欄滑動(dòng)條效果圖3

圖28導(dǎo)航欄滑動(dòng)條效果圖4

圖28導(dǎo)航欄滑動(dòng)條效果圖5

在網(wǎng)站導(dǎo)航欄中做了滑動(dòng)條特效，在AxureRP軟件中使用矩形工具繪制出

滑動(dòng)條的樣式，確定滑動(dòng)條在每個(gè)欄目文字下的位置，在屬性中使用滑動(dòng)屬性

實(shí)現(xiàn)滑動(dòng)條滑動(dòng)效果。

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

1、Banner輪播動(dòng)態(tài)特效實(shí)現(xiàn)步驟：

第一步：在AxureRP軟件中設(shè)置一個(gè)動(dòng)態(tài)面板，并給這個(gè)面板命名為banner

并在面板中設(shè)置三個(gè)不同的面板狀態(tài)分別命名為banner1、banner2、banner3。

第二步：將制作好的banner圖片分別放進(jìn)以及命名好了的不同面板狀態(tài)中

去，把第一個(gè)想要顯示出來(lái)的banner放在最前面，之后的banner可以有選擇的

27

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

放置。設(shè)置輪播效果時(shí)，首先要考慮到自己想要實(shí)現(xiàn)的輪播效果是什么。在設(shè)

計(jì)蘭網(wǎng)站banner動(dòng)態(tài)特效時(shí)，我想要實(shí)現(xiàn)的是當(dāng)用戶鼠標(biāo)移進(jìn)banner區(qū)域時(shí)，

banner輪播效果暫停，當(dāng)鼠標(biāo)移出時(shí)，banner輪播循環(huán)播放，而當(dāng)用戶對(duì)banner

里面的產(chǎn)品感興趣時(shí)，點(diǎn)擊圖片可以進(jìn)入到產(chǎn)品的詳情頁(yè)面進(jìn)行購(gòu)買。

第三步：選中面板點(diǎn)擊屬性里的屬性，設(shè)置鼠標(biāo)移出時(shí)面板狀態(tài)，依次勾

選banner面板，選擇狀態(tài)為Next，時(shí)間間隔設(shè)置為為2000毫秒，首個(gè)狀態(tài)延遲

2000毫秒后向后切換。設(shè)置鼠標(biāo)移入狀態(tài)，先勾選banner面板，再將選擇轉(zhuǎn)態(tài)

選為停止循環(huán)。

第四步：雙擊banner面板進(jìn)入各個(gè)設(shè)置好的三個(gè)面板里面，選中已經(jīng)放好

的banner圖片，設(shè)置屬性中鼠標(biāo)單擊時(shí)鏈接到對(duì)應(yīng)產(chǎn)品詳情頁(yè)，對(duì)三張banner

圖片進(jìn)行依次操作實(shí)現(xiàn)鏈接之間的跳轉(zhuǎn)，完成動(dòng)態(tài)特效的實(shí)現(xiàn)。

圖29banner輪播動(dòng)態(tài)效果實(shí)現(xiàn)步驟圖1

圖29banner輪播動(dòng)態(tài)效果實(shí)現(xiàn)步驟圖2

2、導(dǎo)航欄滑動(dòng)條滑動(dòng)特效實(shí)現(xiàn)步驟：

第一步：在AxureRP軟件中拖拽5個(gè)文本標(biāo)簽，將文本標(biāo)簽的內(nèi)容分別編

輯為首頁(yè)、品牌故事、精油系列、滋養(yǎng)護(hù)膚、油樂場(chǎng)，在文字樣式中設(shè)置文字

顏色為黑色。然后拖拽一個(gè)橫線部件，將橫線部件樣式設(shè)置為第五個(gè)寬度，顏

色設(shè)置為紅色；再拖拽一個(gè)三角形部件，調(diào)整三角形大小，顏色設(shè)置為紅色，

28

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

然后組合這兩個(gè)部件，將它們命名為滑動(dòng)條。再接著設(shè)置文字樣式，依次選擇

首頁(yè)、品牌故事、精油系列、滋養(yǎng)護(hù)膚、油樂場(chǎng)文字，在屬性中設(shè)置鼠標(biāo)移入

時(shí)文字顏色為紅色，鼠標(biāo)移出時(shí)文字顏色設(shè)置為黑色。

第二步：確定滑動(dòng)條在導(dǎo)航欄首頁(yè)文字下的位置（X：281Y：171），在首

頁(yè)頁(yè)面屬性中的頁(yè)面載入時(shí)設(shè)置首頁(yè)文字富文本，在富文本中設(shè)置顏色為紅色，

字體加粗，然后設(shè)置滑動(dòng)條移動(dòng)到達(dá)（X：281Y：171），動(dòng)畫設(shè)置為線性，時(shí)

間為400毫秒。

第三步：將滑動(dòng)條分別移動(dòng)到品牌故事、精油系列、滋養(yǎng)護(hù)膚、油樂場(chǎng)文

字下確定滑動(dòng)到的位置（X：569Y：171）；（X：905Y：171）；（X：1242

Y：171）；（X：1553Y：171）；然后在品牌故事頁(yè)面屬性頁(yè)面載入時(shí)設(shè)置品

牌故事文字富文本，在富文本中設(shè)置顏色為紅色，字體加粗，然后設(shè)置首頁(yè)文

字富文本，在富文本中設(shè)置首頁(yè)文字為黑色，字體不加粗，再設(shè)置滑動(dòng)條滑動(dòng)

到達(dá)（X：569Y：171），動(dòng)畫設(shè)置為線性，時(shí)間為400毫秒。

第四步：在精油系列頁(yè)面屬性頁(yè)面載入時(shí)設(shè)置精油系列文字富文本，在富

文本中設(shè)置顏色為紅色，字體加粗，然后設(shè)置品牌故事文字富文本，在富文本

中設(shè)置首頁(yè)文字為黑色，字體不加粗，再設(shè)置滑動(dòng)條滑動(dòng)到達(dá)（X：905Y：

171），動(dòng)畫設(shè)置為線性，時(shí)間為400毫秒。

第五步：在滋養(yǎng)護(hù)膚系列頁(yè)面屬性頁(yè)面載入時(shí)設(shè)置滋養(yǎng)護(hù)膚文字富文本，

在富文本中設(shè)置顏色為紅色，字體