銘宇小屋網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計

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

目錄

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

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

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

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

2.1頁面版式設(shè)計...............................................2

2.2網(wǎng)頁視覺元素設(shè)計..........................................14

3網(wǎng)站前端設(shè)計.....................................................17

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

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

4設(shè)計總結(jié).........................................................27

參考資料............................................................29

I

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

銘宇小屋網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計

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

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

我選擇這個選題，是因為與我現(xiàn)在從事的工作相關(guān)，畢業(yè)后我選擇自主創(chuàng)

業(yè)，主要經(jīng)營動漫周邊產(chǎn)品的銷售工作，“銘宇小屋”就是我個人工作室的名

字，為了能給更多地模玩愛好者提供一個最新的國漫資源平臺，我便將我的畢

業(yè)設(shè)計選題定為“銘宇小屋網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計”。

1.1.1用戶需求分析

針對國內(nèi)動漫文化的痛點：咨詢更新與渠道不穩(wěn)定，周邊產(chǎn)品信息第一時

間找不到渠道獲得，沒有一個良好的交流和選購平臺；所以我針對這幾點，建

設(shè)一個既能看到周邊產(chǎn)品的信息又能第一時間了解動漫的最新咨詢的網(wǎng)站。

1.1.2競爭分析

對于同類型網(wǎng)站，比如動漫信息咨詢的網(wǎng)站，其版面古早，信息來源與咨

詢更新很混雜，本網(wǎng)站提供國內(nèi)最新最權(quán)威的咨詢和周邊產(chǎn)品購買渠道；其劣

勢在與國內(nèi)大部分咨詢很大部分是根據(jù)社交媒體來獲取的，可能會有核心人員

流失的可能性。

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

銘宇小屋Web端網(wǎng)頁設(shè)計主要實現(xiàn)的是點擊動漫周邊產(chǎn)品圖片實行跳轉(zhuǎn)，

即可查看更多的詳細(xì)信息；點擊咨詢文本實現(xiàn)跳轉(zhuǎn)到最新的動漫咨詢。

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

本網(wǎng)站最主要的人機交互方式是鼠標(biāo)點擊操作，用戶在瀏覽器中點擊各個

頁面的圖片按鈕，即可實現(xiàn)頁面之間的跳轉(zhuǎn)。

本網(wǎng)站的每一個網(wǎng)頁都有一個導(dǎo)航欄。導(dǎo)航欄上設(shè)有首頁、商店、社區(qū)、

頭條、周邊、積分商城等按鈕。用戶點擊導(dǎo)航欄上的按鈕，即可前往網(wǎng)站的相

對應(yīng)的模板，也可以在導(dǎo)航欄中點擊登錄前往登錄頁面。

1

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

在網(wǎng)站首頁，用戶點擊登錄或者注冊即可登錄享受網(wǎng)站的優(yōu)秀內(nèi)容。如果

賬號或者是密碼沒有輸入的話是會細(xì)心提醒用戶沒有輸入賬號或是密碼，同時

在首頁，有最新、內(nèi)容豐富的精選和推薦，用戶可以最直觀的了解最新的周邊

產(chǎn)品折扣與推薦。在社區(qū)活動一欄中還可以一覽社區(qū)的最新活動，豐富周邊產(chǎn)

品生活；在頭條頁面中還能發(fā)現(xiàn)最新的周邊產(chǎn)品資訊，也可以在周邊與積分商

城頁面中找到自己心儀周邊產(chǎn)品的周邊哦。其網(wǎng)站的程序設(shè)計如下圖1所示。

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

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

2.1頁面版式設(shè)計

網(wǎng)站的版式設(shè)計采用的方法是首先手繪草稿圖，再使用軟件axure進(jìn)行網(wǎng)

頁低保真線框圖的制作。在設(shè)計線框圖之前，我瀏覽了許多關(guān)于網(wǎng)頁設(shè)計規(guī)范

的相關(guān)文件，以及相關(guān)周邊產(chǎn)品銷售品牌網(wǎng)站的設(shè)計，并且觀察其特點來進(jìn)行

2

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

一些網(wǎng)頁的規(guī)劃。

2.1.1網(wǎng)站首頁

此首頁為首頁布局圖，主要部分為頂部導(dǎo)航以及主要的版面推薦，導(dǎo)航欄

有：“首頁”、“商店”、“社區(qū)”、“頭條”、“周邊”、“積分商城”六個模塊內(nèi)

容，右上角設(shè)有登錄按鈕。內(nèi)容為主要推出的最新、最火爆的周邊產(chǎn)品折扣，

便于消費者更加直觀的了解最新情報，提高消費者的購買欲的同時也增加消費

者的好奇心，讓整個頁面更加的完整，給消費者更舒適的消費體驗；主要是

“精選和推薦”和“特別優(yōu)惠”的滾動廣告欄。在這之下就是為吸引消費者設(shè)

置的登錄按鈕。首頁層次結(jié)構(gòu)圖如圖2所示。

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

網(wǎng)站首頁的線框圖采用axure進(jìn)行制作，可以分為五步。第一步把頭部導(dǎo)

航欄用占位符工具繪制出；第二步將banner圖片、首推區(qū)域用占位符工具繪

制出；第三步用占位符工具將主體部分劃分，進(jìn)行細(xì)微的調(diào)整；第四步用占位

符將背景圖繪制出來，并置于最底層；第五步用占位符工具繪制最底部的網(wǎng)站

詳細(xì)資料。

網(wǎng)站首頁是一個網(wǎng)站的門面的主要形象，也是網(wǎng)站的最重要的一個部分，

3

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

在首頁這個版面的版式設(shè)計上，我想通過網(wǎng)站給用戶最直觀的周邊產(chǎn)品折扣，

讓用戶在打開網(wǎng)站的瞬間就便能明白這個版式要傳遞的內(nèi)容和信息。網(wǎng)站的首

頁設(shè)計我的想法是干凈舒適、版式明確，思路明確并且有辨識性，能讓用戶一

目了然的知道銘宇小屋的“為玩家著想”的思想。只有讓用戶了解了真心、真

誠的服務(wù)，才能讓消費者群體信服，擁護(hù)。

首頁的設(shè)計是先以banner大圖進(jìn)行視覺傳達(dá)，分別是“【銘宇食堂】快

來尋找時代的美味吧”、“【銘宇玩伴】快來尋找你的伙伴吧”、“【銘宇漫展】

快來尋找你的世界吧”、“【銘宇衣柜】快來尋找你的衣世界吧”、“【銘宇小

屋】快來創(chuàng)造自己的世界吧”，然后便是周邊產(chǎn)品精選推薦和零食產(chǎn)品特別優(yōu)

惠。首先是對用戶的沖擊讓用戶有歸屬感，直觀也很細(xì)心的兩者貼合在一個版

面，最后在整個最后設(shè)置登錄提示，讓用戶更加直觀的體驗服務(wù)，并使整個首

頁的版面更加完整。首頁線框圖如圖3所示。

圖3銘宇小屋首頁線框圖

4

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

2.1.2網(wǎng)站商品頁

此頁面為網(wǎng)站的核心商品頁布局，主要部分分為兩大板塊，其一是以導(dǎo)航

欄為主特惠為輔的開頭版面，畫面簡潔且不失風(fēng)采，能直觀的瀏覽到有效信息；

承接開頭版面的就是另一個以“零食、玩具、漫畫、衣服、裝飾小物品”的導(dǎo)

航的商品頁面，多種分類可以使得面對復(fù)雜人群時，每個用戶都能有效的獲取

到自己想要的信息，更人性化，能夠簡單直觀的吸引到消費者，并能讓消費者

在消費的同時感受到真誠的服務(wù)態(tài)度。網(wǎng)站商品頁層次結(jié)構(gòu)圖如圖4所示。

圖4網(wǎng)站商品頁層次結(jié)構(gòu)圖

5

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

圖5網(wǎng)站商品頁線稿圖

商品頁的設(shè)計需要展示出來的是周邊產(chǎn)品的多元化和社區(qū)文化，分為的“零

食、玩具、漫畫、衣服、裝飾小物品”都是經(jīng)過精心挑選出來的標(biāo)簽，其次在

諸多的消費中讓消費者不會眼花繚亂，讓消費者能精準(zhǔn)的找到自己所需要的信

息；在排版方面使用的是單豎排列，再加上五個標(biāo)簽，不會讓這個版面顯得很

擁擠，給人感覺體驗良好。網(wǎng)站商品頁線框圖如圖5所示。

商品頁的線框圖采用axure進(jìn)行制作，第一步把頭部導(dǎo)航欄用占位符工具

繪制出來；第二步對五個標(biāo)簽的位置進(jìn)行繪制；第三步用占位符工具對各個商

品進(jìn)行繪制；第四步將底部的網(wǎng)站詳細(xì)信息用占位符工具繪制出來。

6

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

2.1.3網(wǎng)站社區(qū)頁

此頁面為網(wǎng)站的核心社區(qū)頁布局，是以導(dǎo)航欄為主特惠為輔的開頭版面，

畫面簡潔且不失風(fēng)采，能直觀的瀏覽到有效信息；承接的是以“社區(qū)要聞”的

核心快捷板塊；在后面就是社區(qū)的最新頭條咨詢，簡單明了，加深社區(qū)的互動

性，讓人能確切的感到周邊產(chǎn)品文化所帶來的多樣性，和社區(qū)文化的魅力。其

中社區(qū)的要聞和頭條是以圖文或是視頻結(jié)合，符合現(xiàn)在主流的信息獲取方式。

網(wǎng)站社區(qū)頁層次結(jié)構(gòu)圖如圖6所示。

圖6網(wǎng)站社區(qū)頁層次結(jié)構(gòu)圖

社區(qū)頁的線框圖采用axure進(jìn)行制作，第一步把頭部導(dǎo)航欄用占位符工具繪

制出來；第二步用占位符工具對最新社區(qū)活動進(jìn)行分化；第三步將熱門小組分

四大塊進(jìn)行分化；最后對最底部的網(wǎng)站詳細(xì)信息進(jìn)行繪制，使得整個網(wǎng)頁版面

更加完整。網(wǎng)站社區(qū)線框圖如圖7所示。

圖7銘宇小屋社區(qū)線稿圖

7

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

2.1.4網(wǎng)站頭條頁

此頁面為網(wǎng)站的核心頭條頁布局，主要部分分為四大板塊，其一是以導(dǎo)航

欄為主特惠為輔的開頭版面，畫面簡潔且不失風(fēng)采，能直觀的瀏覽到有效信息；

承接的是以“最專業(yè)的次元咨詢中心”的頭條標(biāo)簽，簡潔明了；第三大板塊就

是以“推薦、視頻、電臺”的頭條咨詢，采用的是圖文結(jié)合和視頻加文字的方

式，現(xiàn)在在短視頻時代的潮流下，圖文結(jié)合的方式是最能穩(wěn)定傳達(dá)方式，不拖

沓并且能精準(zhǔn)的了解想要了解的周邊產(chǎn)品內(nèi)容和動態(tài)咨詢，接著就是最底部的

有關(guān)網(wǎng)站的詳細(xì)信息。網(wǎng)站頭條頁層次結(jié)構(gòu)圖如圖8所示。網(wǎng)站頭條線框圖如

圖9所示。

圖8網(wǎng)站頭條頁層次結(jié)構(gòu)圖

8

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

圖9銘宇小屋頭條圖線稿圖

頭條頁的線框圖采用axure進(jìn)行制作，第一步把頭部導(dǎo)航欄用占位符工具

繪制出來；第二步將頭條大標(biāo)簽的模塊進(jìn)行繪制；第三步用占位符工具對“推

薦、視頻、電臺”的頭條咨詢進(jìn)行繪制；最后對最底部的網(wǎng)站詳細(xì)信息進(jìn)行繪

制，使得整個網(wǎng)頁版面更加完整。

2.1.5網(wǎng)站周邊頁

此頁面為網(wǎng)站的核心周邊頁布局，主要部分分為三大板塊，其一是以導(dǎo)航

欄為主特惠為輔的開頭版面，畫面簡潔且不失風(fēng)采，能直觀的瀏覽到有效信息；

承接的是以“周邊首頁”的周邊標(biāo)簽，簡潔明了；第三大板塊就是以“卡普空、

北通、蓋世小雞”的周邊，采用的是圖文結(jié)合的方式，直觀的了解商品的價格

與詳情；接著就是最底部的有關(guān)網(wǎng)站的詳細(xì)信息。網(wǎng)站周邊頁層次結(jié)構(gòu)圖如圖1

0所示。

9

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

圖6網(wǎng)站周邊頁層次結(jié)構(gòu)圖

10

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

周邊頁的線框圖采用axure進(jìn)行制作，第一步把頭部導(dǎo)航欄用占位符工具

繪制出來；第二步將“周邊首頁、人們推薦、促銷折扣、限量周邊”的周邊標(biāo)

簽繪制出來；第三步將“卡普空、北通、蓋世小雞”的周邊繪制出來，采用的

是一排五個的圖文結(jié)合形式；最后對最底部的網(wǎng)站詳細(xì)信息進(jìn)行繪制，使得整

個網(wǎng)頁版面更加完整。網(wǎng)站周邊頁線稿圖如圖11所示。

圖7銘宇小屋周邊圖線稿圖

2.1.6網(wǎng)站積分商城頁

11

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

圖9網(wǎng)站積分商城頁層次結(jié)構(gòu)圖

圖8銘宇小屋積分商城圖線稿圖

12

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

此頁面為網(wǎng)站的核心積分商城頁布局，主要部分分為四大板塊，其一是以導(dǎo)

航欄為主特惠為輔的開頭版面，畫面簡潔且不失風(fēng)采，能直觀的瀏覽到有效信

息；整個積分商城的商品采用的是圖文并茂的格式，讓用戶能夠準(zhǔn)確的獲得到

自己所需要的信息；接著就是最底部的有關(guān)網(wǎng)站的詳細(xì)信息。網(wǎng)站積分商城頁

層次結(jié)構(gòu)圖如圖12所示。

積分商城頁的線框圖采用axure進(jìn)行制作，第一步把頭部導(dǎo)航欄用占位符

工具繪制出來；再是使用占位符工具將商品內(nèi)容繪制出來，采用的是一行4個

的方式，整個版面簡潔清爽；最后對最底部的網(wǎng)站詳細(xì)信息進(jìn)行繪制，使得整

個網(wǎng)頁版面更加完整。網(wǎng)站積分商城圖線框圖如圖13所示。

2.1.7網(wǎng)站登錄頁

圖10網(wǎng)站登錄頁層次結(jié)構(gòu)圖

此頁面為網(wǎng)站的核心登錄頁布局，主要部分分為四大板塊，其一是以導(dǎo)航欄

為主特惠為輔的開頭版面，畫面簡潔且不失風(fēng)采，能直觀的瀏覽到有效信息；

承接的是巨大背景的banner；頁面中心就是登錄的板塊，如果用戶沒有輸入用

戶名或者密碼時，下方會彈出“請輸入用戶名或者是密碼”的提示語，并會在

輸入后消失，輸入完畢后將跳轉(zhuǎn)到首頁；所有商品的購買都需要用戶先登錄之

后才可以操作。網(wǎng)站登錄頁層次結(jié)構(gòu)圖如圖14所示。

登錄頁的線框圖采用axure進(jìn)行制作，第一步把頭部導(dǎo)航欄用占位符工具

繪制出來；第二步將巨大背景的banner繪制出來；再是使用占位符工具將用戶

名密碼欄繪制出來，整個版面簡潔清爽；最后對最底部的網(wǎng)站詳細(xì)信息進(jìn)行繪

制，使得整個網(wǎng)頁版面更加完整。網(wǎng)站登錄頁線框圖如圖15所示。

13

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

圖11登錄頁線稿圖

2.1.8網(wǎng)站個人主頁

圖126網(wǎng)站個人主頁頁層次結(jié)構(gòu)圖

此頁面為網(wǎng)站的核心個人主頁布局，主要部分分為四大板塊，其一是以導(dǎo)

航欄為主特惠為輔的開頭版面，畫面簡潔且不失風(fēng)采，能直觀的瀏覽到有效信

息；承接的是用戶背景圖和用戶名以及用戶頭像；接著右邊是用戶的個性化而

有的：商店、社區(qū)、頭條、周邊、積分。網(wǎng)站個人主頁頁層次結(jié)構(gòu)圖如圖16所

示。

14

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

個人主頁頁的線框圖采用axure進(jìn)行制作，第一步把頭部導(dǎo)航欄用占位符

工具繪制出來；第二步將用戶背景繪制出來；再是使用占位符工具將用戶名用

戶頭像繪制出來，整個版面簡潔清爽；第三步將以“我的主頁”為主題的五大

版面繪制出來；最后對最底部的網(wǎng)站詳細(xì)信息進(jìn)行繪制，使得整個網(wǎng)頁版面更

加完整。網(wǎng)站個人主頁頁線框圖如圖17所示。

圖13網(wǎng)站個人主頁頁線稿圖

2.2網(wǎng)頁視覺元素設(shè)計

2.2.1網(wǎng)站logo

網(wǎng)站logo取自銘宇的首字母MY，正好對應(yīng)網(wǎng)站所希望的成為用戶的“我

的”小屋。Logo圖如圖18所示。

圖14銘宇小屋logo圖

2.2.2顏色

網(wǎng)頁的整體配色設(shè)計根據(jù)原有品牌的LOGO進(jìn)行設(shè)計，選取的主色調(diào)是灰色。

灰色可以聯(lián)想到“沉穩(wěn)”給人一種踏實的感覺，將導(dǎo)航欄和底部網(wǎng)站詳細(xì)信息

給與灰色讓整個不會太活躍也不會太陰沉。輔助色用靛青色、白色設(shè)置按鈕色。

15

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

如圖19所示。

圖15銘宇小屋主輔顏色搭配圖

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

網(wǎng)站的主體內(nèi)容都采用的是Arial。網(wǎng)站正文文字大小32pt，二級標(biāo)題

24pt，文本使用18。在導(dǎo)航欄文字字體大小設(shè)置為20pt，以突出標(biāo)題，標(biāo)準(zhǔn)字

如圖20所示。

圖16標(biāo)準(zhǔn)字圖

16

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

2.2.4導(dǎo)航

導(dǎo)航的設(shè)置采用的是最常用的頂部導(dǎo)航欄，頂部導(dǎo)航欄可以使用網(wǎng)頁的一

目了然呈現(xiàn)在用戶眼前，使其迅速尋找所需。頂部導(dǎo)航這樣的設(shè)計形式為保守

但是使他的目的性強，可以確保網(wǎng)頁組織結(jié)構(gòu)的可靠性和降低用戶尋找的時間

成本。導(dǎo)航圖如圖21所示。

圖17導(dǎo)航圖

2.2.5彈窗

在購買是需要先登錄，將會彈出提示窗口。彈窗圖如圖22所示。

圖18彈窗圖

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

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

網(wǎng)頁的高保真設(shè)計采用的方法是先通過在頁面版式設(shè)計的基礎(chǔ)上，對版面

的元素進(jìn)行素材替換，使用的軟件是以axure為主Photoshop為輔。

3.1.1網(wǎng)站首頁

網(wǎng)站首頁是分為三個大的部分，分別是“精選和推薦”、“特別優(yōu)惠”和“推

薦登錄”；其中，在“精選和推薦”里，分別有“【銘宇食堂】”、“【銘宇玩

17

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

伴】”、“【銘宇衣柜】”和“【銘宇小屋】”五個類別；在“特別優(yōu)惠”中，用戶

可以瀏覽到最新的商品折扣；在“推薦登錄”中用戶可以點擊登錄按鈕進(jìn)行登

錄，以便之后進(jìn)行消費。

網(wǎng)站首頁如圖23所示。

圖19網(wǎng)站首頁高保真圖

3.1.2網(wǎng)站商品頁

網(wǎng)站商品頁有五個大類，分別是“零食”、“玩具”、“漫畫”、“衣服”和“裝

飾品”；采用小圖加折扣的形式，能讓用戶更加直觀的了解折扣。

網(wǎng)站商品頁如圖24所示。

18

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

圖20網(wǎng)站商品頁高保真圖

3.1.3網(wǎng)站社區(qū)頁

圖21網(wǎng)站社區(qū)頁高保真圖

19

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

網(wǎng)站社區(qū)頁是圖與文的“1+1”的形式呈現(xiàn)，其網(wǎng)頁的主要內(nèi)容是關(guān)于國內(nèi)

動漫的最新相關(guān)資訊和雜談。網(wǎng)站社區(qū)頁如圖25所示。

3.1.4網(wǎng)站頭條頁

網(wǎng)站頭條頁是以圖文并茂的縮略圖的形式呈現(xiàn)，其網(wǎng)頁的主要內(nèi)容和網(wǎng)站

社區(qū)頁一樣是關(guān)于國內(nèi)動漫的最新相關(guān)資訊和雜談。網(wǎng)站頭條頁如圖26所示。

圖22網(wǎng)站頭條頁高保真

3.1.5網(wǎng)站周邊頁

網(wǎng)站周邊頁是有三個大類別，分別是“喜羊羊系列”、“漫畫系列”和“斗

龍戰(zhàn)士玩具系列”。網(wǎng)站周邊頁如圖27所示。

20

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

圖23網(wǎng)站周邊頁高保真圖

3.1.6網(wǎng)站積分商城頁

網(wǎng)站積分商城頁是即將上架的頁面，里面是預(yù)設(shè)1：10的金額換取積分來

進(jìn)行額外的物品交換，來提高用戶的粘性。網(wǎng)站積分商城頁如圖28所示。

3.1.7網(wǎng)站登錄頁

網(wǎng)站登錄頁是用戶在購買商品前必須接觸的頁面，登錄后才可進(jìn)行購買，

在登錄過程中會提示用戶是否輸入用戶名與密碼。網(wǎng)站登錄頁如圖29所示。

3.1.8網(wǎng)站個人主頁頁

網(wǎng)站個人主頁頁設(shè)置了注銷按鈕，同時可以通過點擊跳轉(zhuǎn)至其他網(wǎng)頁。網(wǎng)

21

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

站個人主頁頁如圖30所示。

圖24網(wǎng)站積分商城頁

圖25網(wǎng)站登錄頁高保真圖

22

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

圖26網(wǎng)站個人主頁頁高保真圖

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

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

動態(tài)特效1：鼠標(biāo)懸停讓類別大圖變成商品圖，將鼠標(biāo)放置到四個商品小圖

上將在類別圖展現(xiàn)商品圖，鼠標(biāo)移出后類別圖恢復(fù)原狀。如圖31、32所示。

圖27網(wǎng)頁動態(tài)特效1效果圖1

23

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

圖28網(wǎng)頁動態(tài)特效1效果圖2

動態(tài)特效2：在首頁的banner做了一個輪播圖特效。這個輪播特效一共設(shè)

計了5張banner圖，每張主圖附加4張小預(yù)覽圖，當(dāng)鼠標(biāo)移動到預(yù)覽圖時，原

本的大圖將會替換為預(yù)覽圖的大圖版本，目的是實現(xiàn)banner輪播滾動特效的同

時，也可以先用戶展示出更多的咨詢與訊息。Banner的輪播特效的制作使用的

是的Axure軟件進(jìn)行的都交互設(shè)計制作而成，先將做好的banner效果圖放在繪

制好的區(qū)域中，然后將圖片進(jìn)行導(dǎo)入，調(diào)整好圖片大小和尺寸，再調(diào)整整個的

banner的版面，放在合適的位置。Banner輪播滾動主要利用的是Axure中的動

態(tài)面板進(jìn)行設(shè)置，banner圖是整個首頁圖的核心部分，讓瀏覽者能一眼看到，

所有在設(shè)計banner時，根據(jù)所放置的產(chǎn)品圖會和區(qū)域進(jìn)行文字元素位置的調(diào)整

與設(shè)置，讓整個區(qū)域更契合。如圖33、34所示。

圖29網(wǎng)頁動態(tài)特效2效果圖1

24

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

圖30網(wǎng)頁動態(tài)特效2效果圖2

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

鼠標(biāo)懸停大圖特效制作步驟：給各個商品圖設(shè)置鼠標(biāo)移入和移出效果并且

將移入移出時的商品小圖的不透明度進(jìn)行調(diào)換，具體設(shè)置如圖35所示。

圖31鼠標(biāo)懸停大圖特效設(shè)置圖

Banner輪播特效制作步驟：首先建立一個動態(tài)面板，將效果圖分別