暴肌獨(dú)角獸網(wǎng)站W(wǎng)eb端網(wǎng)頁設(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ì)...............................................2

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

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

2.2頁面視覺元素設(shè)計(jì)..........................................20

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

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

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

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

參考資料............................................................36

I

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

暴肌獨(dú)角獸網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計(jì)

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

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

「暴肌獨(dú)角獸」是廈門魔角獸科技有限公司旗下的一個(gè)品牌，品牌于

2016年在福建廈門創(chuàng)立?！副┘—?dú)角獸」專注于懶人健康食品，已擁有高蛋

白肉、方便食品、谷物代餐、零食、醬料、沖飲等多個(gè)品類，100多款產(chǎn)品。

為什么在眾多的品牌中選擇該品牌呢？是因?yàn)槲矣X得該品牌的產(chǎn)品理

念值得更多公司學(xué)習(xí)借鑒——以客戶為中心，對產(chǎn)品安全健康和高品質(zhì)的追

求?！副┘—?dú)角獸」是專注于打造各類健康輕食產(chǎn)品的健康食品品牌，致力

于更全面的產(chǎn)品研發(fā)，力求給到消費(fèi)者更專長的健康生活指導(dǎo)，更具性價(jià)比

的市場定價(jià)，滿足多種輕食類消費(fèi)需求。提倡健康飲食、健康生活。追求健

康不忌口，讓自律更輕松，陪你遇見更好的自己！

隨著網(wǎng)絡(luò)信息的發(fā)展，網(wǎng)上購物的時(shí)代逐漸步入成熟期，搭建一個(gè)滿足

顧客購物需求的人性化購物網(wǎng)站不僅可以節(jié)省商家的運(yùn)營成本，同時(shí)也能進(jìn)

一步提高客戶的消費(fèi)體驗(yàn)感。暴肌獨(dú)角獸Web端網(wǎng)頁設(shè)計(jì)是基于AxureRP

軟件開發(fā)的一個(gè)購物網(wǎng)站，搭建了購物車、個(gè)人中心、收藏店鋪、關(guān)于我們

以及商品智能推薦等不同的交互效果，在促進(jìn)用戶消費(fèi)的同時(shí)也增加其用戶

粘性，為自己帶來更長足的發(fā)展。

通過對「暴肌獨(dú)角獸」品牌的網(wǎng)上調(diào)查和相關(guān)文獻(xiàn)了解，我將網(wǎng)站的色

彩選定為紫色和白色，并根據(jù)客戶網(wǎng)上購物習(xí)慣和市場需求進(jìn)行網(wǎng)站設(shè)計(jì)，

包括首頁、所有產(chǎn)品、個(gè)人中心、關(guān)于我們、購物車、登錄注冊等一系列的

頁面設(shè)計(jì)。

1.1.1用戶需求分析

隨著社會經(jīng)濟(jì)的持續(xù)發(fā)展，人們生活質(zhì)量的提高，越來越多的人更注重飲

食上面的搭配，健康綠色的生活方式被越來越多的人所接受和傳播。健康的體

態(tài)是中國人所追求的美，營養(yǎng)健康又美味的零食在中國乃至全球都非常被消費(fèi)

者所喜愛，而暴肌獨(dú)角獸就此孕育而生。

用戶群體：16-80歲的熱愛零食但又重視自我體態(tài)的人群。

性別：男女都有。

1

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

收入：高、中、低收入群體。

愛好：購物、沖浪、美食、運(yùn)動(dòng)等。

生活習(xí)慣：生活健康、注重生活品質(zhì)。

1.1.2競品分析

在健康瘦身日漸成為“剛需”的當(dāng)下，龐大的健康飲食消費(fèi)者們造就了一

大批輕食代餐商家的崛起，眾多商家和品牌，開始布局輕食代餐賽道。

據(jù)消費(fèi)洞察報(bào)告顯示，輕食代餐逐步日?；?，覆蓋了健身人群、減重人群、

加班族以及日常保健人群等多種健康飲食場景。輕食代餐用戶群體從單純想要

減重和保持體重的人群，逐步擴(kuò)大為追求健康、高效生活的年輕群體。輕食已

經(jīng)從小眾潮流逐漸走向大眾選擇，并成為一種健康飲食生活方式。

當(dāng)下中國輕食代餐市場的規(guī)模呈持續(xù)增長態(tài)勢，廣闊的應(yīng)用場景，龐大的

消費(fèi)市場，讓輕食代餐品牌受到資本和消費(fèi)者的熱捧。我對暴肌獨(dú)角獸品牌的

部分競爭品牌從品牌、產(chǎn)品、優(yōu)勢、消費(fèi)人群等方面做了簡單分析（如表1競

品分析表）。

表1競品分析表

品牌

品牌定位競爭優(yōu)勢消費(fèi)者關(guān)鍵詞

slogan

若飯液體便當(dāng)三餐不規(guī)律極簡代餐一快節(jié)奏上班/高效

開創(chuàng)者常備若飯瓶就是一頓健身人群

飯

超級零專注體重理想身材超流量變現(xiàn)關(guān)注健康人群低糖

管理代餐級零

輕食獸吃不胖的零食可以更網(wǎng)紅流量關(guān)注健康人群輕餐

新零食健康健康可

以更好吃

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

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

一個(gè)優(yōu)秀的shopping網(wǎng)站除了要滿足用戶的需求，提高網(wǎng)站的可維護(hù)性和

靈活性也是必不可少的，在搭建網(wǎng)站之前，對網(wǎng)站結(jié)構(gòu)分析和設(shè)計(jì)的探索能提

高網(wǎng)站性能。網(wǎng)頁的創(chuàng)作更應(yīng)該關(guān)注用戶的視覺過程和信息的傳遞，而這些要

2

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

求更多的是建立在網(wǎng)頁層次的設(shè)計(jì)過程中，比如說網(wǎng)站的整體架構(gòu)、網(wǎng)站的版

塊、網(wǎng)站的整體色調(diào)、網(wǎng)站的素材等等。同時(shí)，各個(gè)版塊的協(xié)調(diào)感也是非常重

要的，如果放置合理，那么網(wǎng)站整體看起來會顯得非常兼容。優(yōu)秀的網(wǎng)站結(jié)構(gòu)

布局設(shè)計(jì)，會使得整個(gè)網(wǎng)站就顯得非常漂亮，也就能夠更好地吸引瀏覽者的縱

深訪問。（如圖1網(wǎng)站結(jié)構(gòu)層次圖）

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

1.2.2網(wǎng)頁布局設(shè)計(jì)

網(wǎng)頁布局設(shè)計(jì)和我們蓋房子、寫作文有異曲同工之處，即首先在草稿紙上

打好草稿，并且依據(jù)實(shí)際需要和閱讀者的愛好制作出多個(gè)可供選擇和參考的方

案。暴肌獨(dú)角獸Web端網(wǎng)頁設(shè)計(jì)的布局設(shè)計(jì)是建立在用戶的需求體驗(yàn)之上的。

從用戶的角度出發(fā)，在此基礎(chǔ)上以遞進(jìn)層次出發(fā)到用戶的交互體驗(yàn)，再到表層

的視覺體驗(yàn)。

在優(yōu)秀網(wǎng)站設(shè)計(jì)中，不同類型的網(wǎng)站布局方式不一樣，但是不管采用何種

布局，都要圍繞用戶的瀏覽習(xí)慣去布局，布局的方式要主次分明，重點(diǎn)突出，

比如，用戶一般瀏覽網(wǎng)頁喜歡從左到右的瀏覽方式，并且可以流暢連貫地了解

內(nèi)容，能對自己感興趣的內(nèi)容進(jìn)行網(wǎng)頁鏈接跳轉(zhuǎn)，進(jìn)行更深層次的探索了解。

當(dāng)然，快速且準(zhǔn)確的進(jìn)入用戶所點(diǎn)擊網(wǎng)頁能提升其對該網(wǎng)站的瀏覽體驗(yàn)感，反

之亦然。

3

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

目前在眾多網(wǎng)站中，首次進(jìn)入都會根據(jù)用戶視線的移動(dòng)習(xí)慣：以順時(shí)針方

向由左向右、由上向下移動(dòng)。在shopping界面中，頁面上方放置了用戶經(jīng)常使

用的主菜單、搜索、廣告欄等，將重要的活動(dòng)信息置于用戶視線的重要位置，

按照用戶的使用習(xí)慣進(jìn)行提醒。其次，通過圖標(biāo)設(shè)計(jì)、色彩運(yùn)用等與整個(gè)網(wǎng)頁

相匹配的信息板塊來構(gòu)建符合用戶心理的模型，這樣的板塊在購物網(wǎng)頁中的信

息展示就顯得尤為重要，用戶對這些板塊的接受度越高，帶來的用戶體驗(yàn)也就

越好。

1.2.3網(wǎng)頁交互設(shè)計(jì)

暴肌獨(dú)角獸Web端網(wǎng)頁設(shè)計(jì)最主要的人機(jī)交互方式是鼠標(biāo)點(diǎn)擊操作。用戶

在網(wǎng)頁中點(diǎn)擊網(wǎng)站各頁面的文字或圖片，實(shí)現(xiàn)頁面間的跳轉(zhuǎn)。暴肌獨(dú)角獸Web

端網(wǎng)頁的每一個(gè)網(wǎng)頁，都有一個(gè)導(dǎo)航欄。導(dǎo)航欄上設(shè)有網(wǎng)站首頁、所有寶貝、

爆款產(chǎn)品、個(gè)人中心、關(guān)于我們、加入我們、聯(lián)系我們等模塊，用戶點(diǎn)擊每個(gè)

模塊可以前往網(wǎng)站的相應(yīng)模塊。

在網(wǎng)站首頁，我在頭部區(qū)域放置了登錄/注冊的文字鏈接，點(diǎn)擊即可進(jìn)入登

錄界面，如果用戶已是本網(wǎng)站的客戶，那么只要輸入賬號和密碼就可以登錄進(jìn)

去。反之，是新用戶則需要自己注冊一個(gè)賬號才能在本網(wǎng)站進(jìn)行購物。在首頁

導(dǎo)航欄其下的區(qū)域，我設(shè)置了廣告banner圖的輪播，可以引導(dǎo)用戶進(jìn)入網(wǎng)站的

不同頁面，如最新產(chǎn)品、特價(jià)促銷、公司介紹等。用戶還可以點(diǎn)擊商品展示和

商品推薦下的產(chǎn)品進(jìn)入到產(chǎn)品信息頁后對我們的產(chǎn)品進(jìn)行了解和購買；

在所有寶貝頁面中，我對暴肌獨(dú)角獸旗下的產(chǎn)品進(jìn)行了整理并在該頁面進(jìn)

行展示，用戶可以根據(jù)自己的興趣進(jìn)行選擇了解和購買；

在爆款產(chǎn)品頁面中，banner區(qū)的廣告位輪播、三個(gè)具有代表性的產(chǎn)品可以

讓用戶進(jìn)行選購；

在個(gè)人中心頁面里，用戶可以看到賬戶設(shè)置、訂單中心、積分福利、我的

收藏、消息管理、客服中心六個(gè)板塊，可以對自己的信息進(jìn)行設(shè)置和了解；

在關(guān)于我們頁面里包含公司介紹、企業(yè)文化和公司風(fēng)采這三部分，目的就

是為了讓顧客更加的了解我們的品牌信息，品牌的歷程，讓顧客對我們的產(chǎn)品

加以的信賴，相信我們的產(chǎn)品是安全健康可靠的，是有品質(zhì)保障的；

在加入我們這個(gè)頁面，我設(shè)置了加盟條件、加盟流程和加盟申請，有興趣

的加盟商可以直接了解本公司的相關(guān)加盟信息；

在網(wǎng)站的聯(lián)系我們頁面中，用戶可以直接找到企業(yè)的聯(lián)系方式，有地址、

電話微信可以方便用戶聯(lián)系我們，同時(shí)我們公司的人工客服隨時(shí)在線可以幫助

4

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

用戶解決問題和及時(shí)進(jìn)行溝通。

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

網(wǎng)站視覺設(shè)計(jì)可以結(jié)合圖形、文字、顏色等不同的搭配來實(shí)現(xiàn)它想要表達(dá)

的效果，其具有高度的融合性。信息化的發(fā)展，人們對網(wǎng)站W(wǎng)eb端的要求越來

越高，一個(gè)優(yōu)秀的網(wǎng)站更注重整體元素的融合搭配，通過圖形、文字、色彩等

元素的合理運(yùn)用將設(shè)計(jì)的的視覺效果傳遞給大眾。

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

一個(gè)網(wǎng)站的頁面版式設(shè)計(jì)在整個(gè)網(wǎng)站中占的比重較大，根據(jù)網(wǎng)站的不同性

質(zhì)規(guī)劃不同的頁面版式，其不但能夠改變整個(gè)網(wǎng)站的視覺效果，還能夠加深用

戶對該網(wǎng)站的第一印象。網(wǎng)頁設(shè)計(jì)者應(yīng)努力做到整體布局的合理化、有序化、

整體化，優(yōu)秀的設(shè)計(jì)師會善于以巧妙、合理的視覺方式使一些語言無法表達(dá)的

想法得以展示，做到豐富多樣，而又簡潔明了。

5

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

2.1.1暴肌獨(dú)角獸Web端——首頁

圖2首頁頁面層次圖

6

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

圖3首頁線框圖

在首頁此頁面中（圖2首頁頁面層次圖），我采用的是上下分割型的頁面布

局版式，其特點(diǎn)是上面部分放置網(wǎng)頁的標(biāo)題和導(dǎo)航菜單。上面部分的左邊有暴

肌獨(dú)角獸的logo和關(guān)注，右邊區(qū)域設(shè)置了搜索框、登錄/設(shè)置和購物車標(biāo)志。

導(dǎo)航欄上設(shè)有網(wǎng)站首頁、所有寶貝、爆款產(chǎn)品、個(gè)人中心、關(guān)于我們、加入我

們、聯(lián)系我們這幾部分。中間部分放置網(wǎng)頁的正文內(nèi)容，如廣告位會設(shè)置產(chǎn)品

廣告banner的輪播，廣告位之下會有商品展示區(qū)域和商品推薦區(qū)域，商品展示

區(qū)域的商品設(shè)計(jì)布局是左右左“s”型的特點(diǎn)，商品推薦區(qū)域采取四個(gè)產(chǎn)品左中

右的順序進(jìn)行設(shè)計(jì)。最下面的區(qū)域設(shè)置為網(wǎng)站的尾部，如新手指南、品質(zhì)保障、

售后服務(wù)等，幫助用戶了解信息和解決相關(guān)問題。（如圖3首頁線框圖）

首頁又稱網(wǎng)站的頁面之首，是一個(gè)很醒目且關(guān)鍵的部分。暴肌獨(dú)角獸首頁

7

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

最重要的是頁面結(jié)構(gòu)布局清晰、主次分明、易于使用，給用戶帶來賞心悅目的

體驗(yàn)感受，同時(shí)也可以增加客戶的信任度、傳達(dá)品牌形象、傳達(dá)本網(wǎng)站的活動(dòng)

信息、增加本網(wǎng)站的誘惑力和承載網(wǎng)站流量的中轉(zhuǎn)站。

2.1.2暴肌獨(dú)角獸Web端——所有寶貝

圖4所有寶貝頁面層次圖

8

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

圖5所有寶貝線框圖

在所有寶貝此頁面中（圖4所有寶貝頁面層次圖），我設(shè)置了3個(gè)部分，頭

部、內(nèi)容區(qū)和尾部。頭部放置網(wǎng)頁的標(biāo)題和導(dǎo)航菜單。頭部最上面的左邊有暴

肌獨(dú)角獸的logo和關(guān)注，右邊區(qū)域設(shè)置了搜索框、登錄/設(shè)置和購物車標(biāo)志。

導(dǎo)航欄上設(shè)有網(wǎng)站首頁、所有寶貝、爆款產(chǎn)品、個(gè)人中心、關(guān)于我們、加入我

們、聯(lián)系我們這幾個(gè)模塊。內(nèi)容區(qū)我放置了八個(gè)商品圖片并與之對應(yīng)的設(shè)計(jì)了

其商品名、稱，這一部分可以讓用戶對暴肌獨(dú)角獸的商品進(jìn)行相關(guān)的了解，可

以直觀的看到網(wǎng)站的所有寶貝商品并選擇直接感興趣的產(chǎn)品進(jìn)行消費(fèi)購買。最

下面的區(qū)域設(shè)置為網(wǎng)站的尾部，如新手指南、品質(zhì)保障、售后服務(wù)等，幫助用

戶了解信息和解決相關(guān)問題。（圖5所有寶貝線框圖）

9

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

2.1.3暴肌獨(dú)角獸Web端——爆款產(chǎn)品

圖6爆款產(chǎn)品頁面層次圖

10

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

圖7爆款產(chǎn)品頁面線框圖

在爆款產(chǎn)品此頁面中（圖6爆款產(chǎn)品頁面層次圖），我設(shè)置了頭部、導(dǎo)航欄、

熱銷系列輪播、內(nèi)容區(qū)和尾部。頭部最上面的左邊有暴肌獨(dú)角獸的logo和關(guān)注，

右邊區(qū)域設(shè)置了搜索框、登錄/設(shè)置和購物車標(biāo)志。導(dǎo)航欄上設(shè)有網(wǎng)站首頁、所

有寶貝、爆款產(chǎn)品、個(gè)人中心、關(guān)于我們、加入我們、聯(lián)系我們這幾個(gè)模塊。

熱銷系列輪播，我對較為熱賣的商品進(jìn)行集中的輪播，每周都會有更新，從而

吸引客戶。內(nèi)容區(qū)我設(shè)計(jì)了三個(gè)商品并對商品，這一部分可以讓用戶對暴肌獨(dú)

角獸的商品進(jìn)行相關(guān)的了解，可以直觀的看到網(wǎng)站的所有寶貝商品并選擇直接

11

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

感興趣的產(chǎn)品進(jìn)行消費(fèi)購買。最下面的區(qū)域設(shè)置為網(wǎng)站的尾部，如新手指南、

品質(zhì)保障、售后服務(wù)等，幫助用戶了解信息和解決相關(guān)問題。（圖7爆款產(chǎn)品頁

面線框圖）

2.1.4暴肌獨(dú)角獸Web端——個(gè)人中心

圖8個(gè)人中心頁面層次圖

12

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

圖9個(gè)人中心頁面線框圖

在個(gè)人中心此頁面中（圖8個(gè)人中心頁面層次圖），我設(shè)置了頭部、導(dǎo)航欄、

內(nèi)容區(qū)和尾部。頭部最上面的左邊有暴肌獨(dú)角獸的logo和關(guān)注，右邊區(qū)域設(shè)置

了搜索框、登錄/設(shè)置和購物車標(biāo)志。導(dǎo)航欄上設(shè)有網(wǎng)站首頁、所有寶貝、爆款

產(chǎn)品、個(gè)人中心、關(guān)于我們、加入我們、聯(lián)系我們這幾個(gè)模塊。內(nèi)容區(qū)我設(shè)計(jì)

了左右兩欄，左邊包括個(gè)人信息的賬戶設(shè)置、訂單中心、積分福利、我的收藏、

消息管理和客服中心六個(gè)板塊，客戶可以對自己的信息進(jìn)行設(shè)置和了解，右邊

是與左邊相匹配的內(nèi)容。最下面的區(qū)域設(shè)置為網(wǎng)站的尾部，如新手指南、品質(zhì)

保障、售后服務(wù)等，幫助用戶了解信息和解決相關(guān)問題。（圖9個(gè)人中心頁面線

框圖）

13

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

2.1.5暴肌獨(dú)角獸Web端——關(guān)于我們

圖10關(guān)于我們頁面層次圖

14

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

圖11關(guān)于我們頁面線框圖

在關(guān)于我們此頁面中（圖10關(guān)于我們頁面層次圖），我設(shè)置了頭部、導(dǎo)

航欄、內(nèi)容區(qū)和尾部。頭部最上面的左邊有暴肌獨(dú)角獸的logo和關(guān)注，右

邊區(qū)域設(shè)置了搜索框、登錄/設(shè)置和購物車標(biāo)志。導(dǎo)航欄上設(shè)有網(wǎng)站首頁、

所有寶貝、爆款產(chǎn)品、個(gè)人中心、關(guān)于我們、加入我們、聯(lián)系我們這幾個(gè)模

塊。內(nèi)容區(qū)我設(shè)計(jì)了公司介紹、企業(yè)文化和公司風(fēng)采這三部分，目的就是為

了讓顧客更加的了解我們的品牌信息，品牌的歷程，讓顧客對我們的產(chǎn)品加

以的信賴，相信我們的產(chǎn)品是安全健康可靠的，是有品質(zhì)保障的。最下面的

15

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

區(qū)域設(shè)置為網(wǎng)站的尾部，如新手指南、品質(zhì)保障、售后服務(wù)等，幫助用戶了

解信息和解決相關(guān)問題。（圖11關(guān)于我們頁面線框圖）

2.1.6暴肌獨(dú)角獸Web端——加入我們

圖12加入我們頁面層次圖

16

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

圖13加入我們頁面線框圖

在關(guān)于我們此頁面中（圖12加入我們頁面層次圖），我設(shè)置了頭部、導(dǎo)

航欄、內(nèi)容區(qū)和尾部。頭部最上面的左邊有暴肌獨(dú)角獸的logo和關(guān)注，右

邊區(qū)域設(shè)置了搜索框、登錄/設(shè)置和購物車標(biāo)志。導(dǎo)航欄上設(shè)有網(wǎng)站首頁、

所有寶貝、爆款產(chǎn)品、個(gè)人中心、關(guān)于我們、加入我們、聯(lián)系我們這幾個(gè)模

塊。內(nèi)容區(qū)我設(shè)計(jì)了公司的加盟推薦、加盟流程和加盟申請這三部分，目的

就是為了讓有興趣的加盟商可以直接了解本公司的相關(guān)加盟信息。最下面的

區(qū)域設(shè)置為網(wǎng)站的尾部，如新手指南、品質(zhì)保障、售后服務(wù)等，幫助用戶了

解信息和解決相關(guān)問題。（圖13加入我們頁面線框圖）

17

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

2.1.7暴肌獨(dú)角獸Web端——聯(lián)系我們

圖14聯(lián)系我們頁面層次圖

18

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

圖15聯(lián)系我們頁面線框圖

在關(guān)于我們此頁面中（圖14聯(lián)系我們頁面層次圖），我設(shè)置了頭部、導(dǎo)

航欄、內(nèi)容區(qū)和尾部。頭部最上面的左邊有暴肌獨(dú)角獸的logo和關(guān)注，右

邊區(qū)域設(shè)置了搜索框、登錄/設(shè)置和購物車標(biāo)志。導(dǎo)航欄上設(shè)有網(wǎng)站首頁、

所有寶貝、爆款產(chǎn)品、個(gè)人中心、關(guān)于我們、加入我們、聯(lián)系我們這幾個(gè)模

塊。內(nèi)容區(qū)我放置了公司的廣告口號，廣告的下面是暴肌獨(dú)角獸公司的電話

聯(lián)系、公司地址、微信號碼和人工客服，目的就是可以幫助用戶解決問題和

及時(shí)進(jìn)行溝通。最下面的區(qū)域設(shè)置為網(wǎng)站的尾部，如新手指南、品質(zhì)保障、

售后服務(wù)等，幫助用戶了解信息和解決相關(guān)問題。（圖15聯(lián)系我們頁面線框

圖）

19

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

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

2.2.1頁面圖標(biāo)設(shè)計(jì)

暴肌獨(dú)角獸Web端網(wǎng)站設(shè)計(jì)了一些有趣又可愛的小圖標(biāo)，在提高頁面整體

美觀的同時(shí)也能很好的吸引用戶的目光和興趣。（圖16網(wǎng)頁小圖標(biāo)）

圖16網(wǎng)頁小圖標(biāo)

2.2.2頁面導(dǎo)航設(shè)計(jì)

在導(dǎo)航欄上設(shè)有首頁、所有寶貝、爆款產(chǎn)品、個(gè)人中心、關(guān)于我們、加入

我們、聯(lián)系我們這幾個(gè)模塊。這一部分可以讓用戶對暴肌獨(dú)角獸的商品進(jìn)行相

關(guān)的了解，可以直觀的看到網(wǎng)站的大概區(qū)域內(nèi)容并選擇感興趣的模塊進(jìn)行了解。

（圖17網(wǎng)頁導(dǎo)航條）

圖17網(wǎng)頁導(dǎo)航條

2.2.3頁面視覺顏色設(shè)計(jì)

暴肌獨(dú)角獸Web端網(wǎng)頁設(shè)計(jì)使用紫色作為網(wǎng)站的主色調(diào)，搭配明度和純度

較高的白色和紅色來點(diǎn)綴，突出產(chǎn)品的表現(xiàn)力，整體色調(diào)和諧，給人一種優(yōu)雅、

高級、大方的視覺印象（如圖18顏色設(shè)計(jì)）。

圖18顏色設(shè)計(jì)

20

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

2.2.4頁面視覺字體設(shè)計(jì)

暴肌獨(dú)角獸Web端網(wǎng)頁的字體設(shè)計(jì)如下圖（圖19字體規(guī)范）

圖19字體規(guī)范

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

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

高保真原型是一種基于計(jì)算機(jī)的交互式表現(xiàn)，它在細(xì)節(jié)和功能方面與最終

設(shè)計(jì)最接近，其包括用戶界面組件、顏色、布局、信息層次對用戶的心理負(fù)荷

以及其他交互。高保真原型不僅涵蓋了網(wǎng)頁在視覺和美學(xué)方面的用戶界面。

21

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

3.1.1暴肌獨(dú)角獸Web端——首頁

圖20首頁效果圖

22

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

3.1.2暴肌獨(dú)角獸Web端——所有寶貝

圖21所有寶貝效果圖

23

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

3.1.3暴肌獨(dú)角獸Web端——爆款產(chǎn)品

圖22爆款產(chǎn)品效果圖

24

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

3.1.4暴肌獨(dú)角獸Web端——個(gè)人中心

圖23個(gè)人中心效果圖

25

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

3.1.5暴肌獨(dú)角獸Web端——關(guān)于我們

圖24關(guān)于我們效果圖

26

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

3.1.6暴肌獨(dú)角獸Web端——加入我們

圖25加入我們效果圖

27

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

3.1.7暴肌獨(dú)角獸Web端——聯(lián)系我們

圖26聯(lián)系我們效果圖

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

3.2.1Banner區(qū)輪播

在首頁導(dǎo)航欄下面我設(shè)計(jì)了一個(gè)banner區(qū)的輪播，放置了三個(gè)廣告進(jìn)

行客戶引流，同時(shí)也能增加這幾個(gè)商品的關(guān)注率。（如圖27、28、29banner

效果圖）該設(shè)計(jì)的理念是健康和貼近生活，文字清晰簡潔內(nèi)容少、焦點(diǎn)主圖

精細(xì)、突出表現(xiàn)細(xì)節(jié)。Bannner區(qū)的輪播具體操作：首先建立一個(gè)動(dòng)態(tài)面板

并命名為banner輪播，再添加3個(gè)不同的面板，然后選擇設(shè)置面板狀態(tài)，

為其添加載入時(shí)的用例。鼠標(biāo)移入時(shí)停止循環(huán)，鼠標(biāo)移出時(shí)延時(shí)2000毫秒

后向后切換，進(jìn)入和退出動(dòng)畫為向左滑動(dòng)時(shí)長為500毫秒（如圖30banner

28

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

操作圖1）；之后再設(shè)置3個(gè)橢圓原點(diǎn)，在其狀態(tài)面板內(nèi)改變其橢圓顏色并

分別將其與相對應(yīng)的效果圖聯(lián)系上來（圖31banner操作圖2），實(shí)現(xiàn)圖片輪

播橢圓也隨之變換，同時(shí)點(diǎn)擊圖片進(jìn)入相應(yīng)的內(nèi)容區(qū)如（圖32banner操作

圖3）所示。

圖27banner效果圖1

圖28banner效果圖2

圖29banner效果圖3

29

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

圖30banner操作圖1

圖31banner操作圖2

30

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

圖32banner操作圖3

3.2.2熱區(qū)轉(zhuǎn)化

在商品詳情頁中對商品介紹和商品評價(jià)這兩個(gè)模塊進(jìn)行了熱區(qū)的設(shè)置，當(dāng)

用戶使用鼠標(biāo)點(diǎn)擊時(shí)下面的圖片可以轉(zhuǎn)換，用最小的力實(shí)現(xiàn)最大的效果（圖33、

34熱區(qū)效果圖）。

31

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

圖33熱區(qū)效果圖1

32

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

圖34熱區(qū)效果圖2