蘭網(wǎng)站W(wǎng)eb端網(wǎng)頁設計

湖南商務職業(yè)技術學院畢業(yè)設計

目錄

1網(wǎng)站設計需求分析...................................................1

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

1.2網(wǎng)站結構設計..................................................3

2網(wǎng)站視覺設計.......................................................4

2.1頁面版式設計..................................................4

2.2網(wǎng)站視覺設計元素.............................................16

3網(wǎng)站前端設計......................................................18

3.1網(wǎng)頁高保真原型設計...........................................18

3.2網(wǎng)頁動態(tài)特效設計.............................................26

4設計總結..........................................................30

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

I

湖南商務職業(yè)技術學院畢業(yè)設計

蘭網(wǎng)站W(wǎng)eb端網(wǎng)頁設計

1網(wǎng)站設計需求分析

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

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

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

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

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

市場。

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

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

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

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

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

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

1.1.1用戶需求分析

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

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

企業(yè)相關的營銷活動，能夠讓顧客快速直觀的深入了解整個品牌，增加消費者

對該品牌的信任感以及促進銷售。

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

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

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

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

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

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

及更高層次的使用功能也格外重視。消費者不再購買毫無用處的“花瓶”，而是更

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

簡單直觀凸顯產(chǎn)品“特色”，直擊消費者購買產(chǎn)品時的痛點，滿足消費者購買需求，

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

1

湖南商務職業(yè)技術學院畢業(yè)設計

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

需抓住女性的心理特征和審美觀念，做到“極簡、舒適”的設計風格，給消費者留

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

1.1.2競品分析

表1競品分析表

品牌產(chǎn)品定位目標消費群體品牌主張產(chǎn)品賣點

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

濕、日抵抗、中國敏感肌膚求本心。復配、雙重舒

夜修復輕熟女性，有愈科技。

獨立經(jīng)濟來源、

消費能力強。

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

緩修護、提亮有獨立消費能索世界。烷舒緩物質、

膚色力的女性。透亮抗氧強韌

屏障。

萃樂活密集修復、長歐美國家和中簡單、純凈、天然親膚油脂、

（Trilogy）效滋潤、舒緩國女性消費群活力。緊縮肌膚水分。

泛紅干癢體

天露芬抗初老、修復全世界消費者實現(xiàn)自然健康德國原裝進口、

保濕、緊致肌群體與肌膚呵護和抗老修復、輕

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

通過對同類競爭產(chǎn)品進行分析，得出以油護膚系列產(chǎn)品的定位以修復、抗

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

的是年輕、有護膚習慣且有獨立經(jīng)濟來源的女性顧客群體，品牌主張為“純凈有

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

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

1.1.3網(wǎng)站功能設計

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

首頁：主要由banner、明星臻品、極簡護膚組成。用戶在瀏覽首頁時可以點

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

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

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

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

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

2

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

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

用戶在這個頁面可以了解相關產(chǎn)品的活動以及參與活動的地點、方式等。

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

戶購買評價，用戶可以點擊加入購物車或者點擊立即購買按鈕進行購買。

登錄和注冊頁面：用戶可以進入登錄頁面進行登錄，如果用戶沒有注冊賬

號，可以點擊立即注冊注冊好賬號之后再進行登錄。

1.2網(wǎng)站結構設計

1.2.1網(wǎng)頁層次設計

圖1網(wǎng)站結構層次圖

1.2.2交互邏輯設計

本網(wǎng)站主要人機交互式設計是點擊鼠標跳轉頁面，即用戶在瀏覽器瀏覽網(wǎng)

站時通過鼠標進入相應的頁面查看相關信息。

網(wǎng)站的每一個頁面都設計了一個導航欄，導航欄主要有首頁、品牌文化、

精油系列、滋養(yǎng)護膚、油樂場按鈕，用戶可以通過點擊導航欄上的按鈕進入相

應的頁面模塊。

3

湖南商務職業(yè)技術學院畢業(yè)設計

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

以使用注冊好了的賬號密碼直接登錄，用戶登錄后成功后會有提示是進入首頁

還是取消登錄，用戶可以自行選擇。尚未入會的用戶可以點擊立即入會按鈕進

行入會操作，入會成功可以點擊登錄按鈕進行登錄，點擊登錄頁面的logo圖片

按鈕進入網(wǎng)站首頁。回到網(wǎng)站首頁，點擊明星臻品欄里想要了解的產(chǎn)品圖片進

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

鈕將產(chǎn)品加入購物車，點擊導航欄上的首頁按鈕即可返回首頁頁面。

在品牌故事頁面，用戶點擊導航欄的品牌故事按鈕可以進入品牌文化介紹

頁面，了解相應品牌信息，讓用戶更快更好的了解到品牌信息，增加對品牌的

信任度。

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

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

息。

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

擊展示頁里展示的產(chǎn)品圖片或者點擊了解詳情可以進入對應產(chǎn)品的詳情頁面，

可以看到產(chǎn)品的詳細介紹以及其他用戶的購買體驗。

在油樂場頁面里面，用戶點擊油樂場按鈕進入油樂場頁面，在這個頁面里

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

業(yè)產(chǎn)品活動時間和參與地點。

在產(chǎn)品詳情頁里，用戶可以鼠標點擊加購按鈕將想要購買的產(chǎn)品加入購物

車，也可以鼠標點擊立即購買按鈕購買該產(chǎn)品，向下滑動，可以點擊寶貝詳情

看到詳細的寶貝介紹，點擊寶貝評價可以看到以及購買過該產(chǎn)品的用戶評價和

使用感受。

2網(wǎng)站視覺設計

2.1頁面版式設計

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

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

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

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

品的特點來進行網(wǎng)頁設計。

4

湖南商務職業(yè)技術學院畢業(yè)設計

2.1.1網(wǎng)站首頁

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

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

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

關信息。

首頁線框圖主要采用AxureRP軟件進行制作。制作過程主要分為三個步驟：

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

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

形工具繪制出底部導航欄。

網(wǎng)站首頁是整個網(wǎng)站最重要第一個頁面，因為用戶瀏覽網(wǎng)站時看到的第一

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

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

信息，吸引用戶眼球，讓用戶有興趣的接著瀏覽。所有我在首頁內容版式設計

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

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

不會決定枯燥無味；最后在極簡護膚區(qū)域對產(chǎn)品采用豎向排列式，整個版面看

起來簡單舒適，整齊一致。

圖2首頁層次結構圖

5

湖南商務職業(yè)技術學院畢業(yè)設計

圖3首頁線框圖

2.1.2品牌故事頁

此頁面為品牌故事頁，主要包括頂部導航欄、品牌故事內容區(qū)、底部導航

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

6

湖南商務職業(yè)技術學院畢業(yè)設計

內容區(qū)括banner、品牌理念、品牌哲學和開發(fā)標準。底部導航包括公司相關信息。

首頁線框圖主要采用AxureRP軟件進行制作。制作過程分為三個步驟：第

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

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

三步，使用矩形工具繪制出底部導航。

品牌故事頁版面設計總體講究一個簡潔，目的在于讓用戶能夠快速了解品

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

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

象。

圖4品牌故事層次圖

7

湖南商務職業(yè)技術學院畢業(yè)設計

圖5品牌故事線框圖

8

湖南商務職業(yè)技術學院畢業(yè)設計

2.1.3產(chǎn)品類目頁

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

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

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

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

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

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

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

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

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

9

湖南商務職業(yè)技術學院畢業(yè)設計

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

2.1.4產(chǎn)品資訊頁

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

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

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

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

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

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

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

10

湖南商務職業(yè)技術學院畢業(yè)設計

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

企業(yè)活動，增加用戶對企業(yè)的品牌忠誠度。

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

11

湖南商務職業(yè)技術學院畢業(yè)設計

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

12

湖南商務職業(yè)技術學院畢業(yè)設計

2.1.5商品詳情頁

此頁面為商品詳情頁，主要包括頂部導航欄、產(chǎn)品詳情、產(chǎn)品評價、底部

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

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

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

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

產(chǎn)品評價區(qū)域，用戶通過滑動網(wǎng)頁可以看到更加詳細的產(chǎn)品介紹和產(chǎn)品評價信

息。商品詳情頁使用AxureRP軟件進行設計，主要有三個步驟：第一步，使用

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

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

詳細介紹和產(chǎn)品評價區(qū)域。

圖10商品詳情層次圖

13

湖南商務職業(yè)技術學院畢業(yè)設計

圖11商品詳情頁線框圖

14

湖南商務職業(yè)技術學院畢業(yè)設計

2.1.6注冊登錄頁

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

頁面的美感，不會讓用戶看起來單調和枯燥。

注冊登錄頁使用AxureRP進行制作，首先使用矩形工具制作注冊登錄大致

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

進行縱向排列。

圖12注冊登錄頁面層次圖

圖13注冊登錄頁面線框圖1

15

湖南商務職業(yè)技術學院畢業(yè)設計

圖13注冊登錄頁面線框圖2

2.2網(wǎng)站視覺設計元素

2.2.1顏色

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

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

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

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

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

16

湖南商務職業(yè)技術學院畢業(yè)設計

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

2.2.2導航

導航欄采用了最常見的版式設計，導航欄可以把整個頁面的大體內容呈現(xiàn)

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

圖15網(wǎng)頁導航規(guī)范圖

2.2.3布局

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

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

17

湖南商務職業(yè)技術學院畢業(yè)設計

2.2.4字體

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

要內容部分使用的字體均為華文楷體。

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

2.2.5Logo

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

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

于蘭這個字的拼寫，logo設計簡單易記。

圖18網(wǎng)站logo圖

3網(wǎng)站前端設計

3.1網(wǎng)頁高保真原型設計

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

18

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.1網(wǎng)站首頁

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

我首先是設計了產(chǎn)品的banner來吸引顧客注意。往下滑動設計了明星臻品和極

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

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

19

湖南商務職業(yè)技術學院畢業(yè)設計

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

20

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.2品牌故事頁

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

圖片與品牌故事結合在一起，一來用戶在瀏覽時避免枯燥單調的感覺，二來可

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

圖20品牌故事頁效果圖

21

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.3產(chǎn)品類目頁

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

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

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

22

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.4產(chǎn)品資訊頁

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

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

里參與相關產(chǎn)品的活動。

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

23

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.5商品詳情頁

商品詳情頁采用了左圖右文結合的版型設計，往下滑可以瀏覽到更詳細的

商品介紹和寶貝評價，能夠讓用戶在最短的時間內了解到商品信息。

圖23商品詳情頁效果圖

24

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.6注冊登錄頁

注冊登錄面的設計我主要是想做的簡單，容易操作，太過繁雜的注冊登錄

會讓用戶覺得麻煩，從而放棄購買。注冊登錄頁整個版面我采用圖框結合，放

置圖片元素有美觀版面效果，不會讓頁面顯得單調。

圖24注冊登錄頁效果圖1

圖24注冊登錄頁效果圖2

25

湖南商務職業(yè)技術學院畢業(yè)設計

3.2網(wǎng)頁動態(tài)特效設計

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

1、Banner輪播特效：

圖25banner效果圖1

圖26banner效果圖2

圖27banner效果圖3

26

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

態(tài)面板編輯為三個內容頁面，將對應的圖片放進內容頁面中，把想要顯示的第

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

播效果。

2、導航欄滑動條滑動特效：

圖28導航欄滑動條效果圖1

圖28導航欄滑動條效果圖2

圖28導航欄滑動條效果圖3

圖28導航欄滑動條效果圖4

圖28導航欄滑動條效果圖5

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

滑動條的樣式，確定滑動條在每個欄目文字下的位置，在屬性中使用滑動屬性

實現(xiàn)滑動條滑動效果。

3.2.2網(wǎng)頁動態(tài)特效實現(xiàn)

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

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

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

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

去，把第一個想要顯示出來的banner放在最前面，之后的banner可以有選擇的

27

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

banner輪播效果暫停，當鼠標移出時，banner輪播循環(huán)播放，而當用戶對banner

里面的產(chǎn)品感興趣時，點擊圖片可以進入到產(chǎn)品的詳情頁面進行購買。

第三步：選中面板點擊屬性里的屬性，設置鼠標移出時面板狀態(tài)，依次勾

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

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

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

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

的banner圖片，設置屬性中鼠標單擊時鏈接到對應產(chǎn)品詳情頁，對三張banner

圖片進行依次操作實現(xiàn)鏈接之間的跳轉，完成動態(tài)特效的實現(xiàn)。

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

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

2、導航欄滑動條滑動特效實現(xiàn)步驟：

第一步：在AxureRP軟件中拖拽5個文本標簽，將文本標簽的內容分別編

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

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

色設置為紅色；再拖拽一個三角形部件，調整三角形大小，顏色設置為紅色，

28

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

時文字顏色為紅色，鼠標移出時文字顏色設置為黑色。

第二步：確定滑動條在導航欄首頁文字下的位置（X：281Y：171），在首

頁頁面屬性中的頁面載入時設置首頁文字富文本，在富文本中設置顏色為紅色，

字體加粗，然后設置滑動條移動到達（X：281Y：171），動畫設置為線性，時

間為400毫秒。

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

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

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

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

字富文本，在富文本中設置首頁文字為黑色，字體不加粗，再設置滑動條滑動

到達（X：569Y：171），動畫設置為線性，時間為400毫秒。

第四步：在精油系列頁面屬性頁面載入時設置精油系列文字富文本，在富

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

中設置首頁文字為黑色，字體不加粗，再設置滑動條滑動到達（X：905Y：

171），動畫設置為線性，時間為400毫秒。

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

在富文本中設置顏色為紅色，字體