果家人品牌網(wǎng)店視覺方案設(shè)計(jì)

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

目錄

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

1.1項(xiàng)目背景...........................................................................................................1

1.2項(xiàng)目需求分析...................................................................................................1

1.3色彩設(shè)計(jì)...........................................................................................................2

1.4字體規(guī)范...........................................................................................................2

2網(wǎng)店頁面原型圖分析與設(shè)計(jì)方案...............................................................................3

2.1首頁...................................................................................................................3

2.2搜索結(jié)果頁.......................................................................................................5

2.3商品詳情頁.......................................................................................................5

2.4登錄注冊(cè)頁.......................................................................................................6

2.5購(gòu)物車...............................................................................................................7

2.6訂單結(jié)算頁.......................................................................................................8

2.7個(gè)人中心...........................................................................................................8

3網(wǎng)店頁面視覺效果設(shè)計(jì)與制作...................................................................................9

3.1首頁視覺設(shè)計(jì)與制作.......................................................................................9

3.1.1設(shè)計(jì)思路...............................................................................................9

3.1.2設(shè)計(jì)效果.............................................................................................11

3.2搜索結(jié)果頁視覺設(shè)計(jì)與制作.........................................................................12

3.2.1設(shè)計(jì)思路.............................................................................................12

3.2.2設(shè)計(jì)效果.............................................................................................12

3.3產(chǎn)品詳情頁視覺設(shè)計(jì)與制作.........................................................................13

3.3.1黃桃罐頭設(shè)計(jì)思路.............................................................................13

3.3.2黃桃罐頭設(shè)計(jì)效果.............................................................................14

3.4登錄注冊(cè)頁視覺設(shè)計(jì)與制作.........................................................................15

3.4.1設(shè)計(jì)思路.............................................................................................15

3.4.2設(shè)計(jì)效果.............................................................................................15

I

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

3.5購(gòu)物車視覺設(shè)計(jì)與制作.................................................................................15

3.5.1設(shè)計(jì)思路.............................................................................................15

3.5.2設(shè)計(jì)效果.............................................................................................16

3.6訂單結(jié)算頁視覺設(shè)計(jì)與制作.........................................................................16

3.6.1設(shè)計(jì)思路.............................................................................................16

3.6.2設(shè)計(jì)效果.............................................................................................17

3.7個(gè)人中心視覺設(shè)計(jì)與制作.............................................................................18

3.7.1設(shè)計(jì)思路.............................................................................................18

3.7.2設(shè)計(jì)效果.............................................................................................18

4總結(jié).............................................................................................................................19

參考資料.........................................................................................................................20

II

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

果家人品牌網(wǎng)店視覺方案設(shè)計(jì)

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

1.1項(xiàng)目背景

果家人品牌自成立以來，該品牌始終秉承著誠(chéng)信、共贏的經(jīng)營(yíng)理念，創(chuàng)造

良好的企業(yè)環(huán)境，致力于為客戶提供高品質(zhì)的產(chǎn)品和服務(wù)，堅(jiān)持以客戶為中心，

以質(zhì)量為核心，以服務(wù)為基礎(chǔ)，深受廣大客戶和消費(fèi)者的青睞。

隨著電商的發(fā)展，各品牌的競(jìng)爭(zhēng)越來越激烈，品牌實(shí)力的體現(xiàn)也越來越重

要。傳統(tǒng)的銷售渠道已經(jīng)不能滿足企業(yè)的發(fā)展需要，因此，建立獨(dú)立的品牌形

象網(wǎng)店成為企業(yè)發(fā)展的必要措施。像百草味、三只松鼠這種知名品牌都有著自

己的獨(dú)立網(wǎng)店，建立這種品牌形象網(wǎng)店，一方面可以使消費(fèi)者對(duì)企業(yè)的品牌有

更深刻的認(rèn)知，從而提高企業(yè)的知名度和美譽(yù)度。另一方面可以更加全面地展

示企業(yè)的產(chǎn)品，讓消費(fèi)者可以更加全面地了解，以便更好地提高企業(yè)的銷售量。

果家人也不例外，它是一個(gè)擁有購(gòu)買功能的獨(dú)立品牌網(wǎng)店，并且一直注重

著品牌的建設(shè)，質(zhì)量方面嚴(yán)格把控產(chǎn)品，以精湛的工藝、優(yōu)質(zhì)的原材料打造出

更好的產(chǎn)品，以達(dá)到客戶的期望。

1.2項(xiàng)目需求分析

網(wǎng)店頁面是一個(gè)品牌形象的重要組成部分，它可以幫助品牌建立良好的形

象，吸引更多的消費(fèi)者，提高品牌的知名度。隨著行業(yè)的競(jìng)爭(zhēng)越來越激烈，原

有的網(wǎng)店頁面很難在眾多優(yōu)秀的頁面中脫穎而出，因此，我們需要重新設(shè)計(jì)網(wǎng)

店頁面。果家人主打的產(chǎn)品是水果罐頭，跟它同一類產(chǎn)品的競(jìng)爭(zhēng)對(duì)手還有林家

鋪?zhàn)印g樂家，相較于果家人，它們兩個(gè)的網(wǎng)店頁面更能夠吸引消費(fèi)者，因此，

重新設(shè)計(jì)的網(wǎng)店頁面要考慮消費(fèi)者的感受。

首先，重新設(shè)計(jì)的網(wǎng)店頁面應(yīng)該更加簡(jiǎn)潔明了，使用戶能夠快速找到所需

要的信息。網(wǎng)店頁面應(yīng)該讓用戶能夠快速定位，清晰的菜單結(jié)構(gòu)可以幫助用戶

輕松瀏覽網(wǎng)站。此外，網(wǎng)店頁面還應(yīng)該包含有關(guān)品牌的信息，如品牌介紹、產(chǎn)

品介紹、服務(wù)介紹等，以便消費(fèi)者了解該品牌。

其次，重新設(shè)計(jì)的網(wǎng)店頁面應(yīng)該更加美觀大方。頁面的美觀性，能夠使用

戶有著良好的視覺體驗(yàn)，讓消費(fèi)者在瀏覽網(wǎng)店時(shí)能夠感受到品牌的特色，從而

1

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

增強(qiáng)品牌的知名度。

最后還有一個(gè)重要因素，那就是網(wǎng)店頁面的創(chuàng)新，創(chuàng)新可以使網(wǎng)店頁面有

著自己獨(dú)特的特色。讓頁面變得更加有趣，更加有吸引力。比如，網(wǎng)店可以使

用一些新穎的設(shè)計(jì)，讓消費(fèi)者在瀏覽網(wǎng)店時(shí)更加感興趣；此外，網(wǎng)店可以提供

一些有趣的活動(dòng)，讓消費(fèi)者更愿意參與，更容易購(gòu)買商品；最后，網(wǎng)店可以提

供一些優(yōu)惠，讓消費(fèi)者更有動(dòng)力購(gòu)買商品。

根據(jù)以上三個(gè)方面重新設(shè)計(jì)的網(wǎng)店頁面，是希望能夠吸引更多的消費(fèi)者，

以及樹立該品牌在消費(fèi)者心中的形象；從一定的程度上去提高產(chǎn)品的銷售量。

1.3色彩設(shè)計(jì)

因?yàn)楣胰酥鞔虻漠a(chǎn)品是水果罐頭，提到水果我們第一個(gè)想到的顏色就是

綠色，用綠色來傳達(dá)品牌的核心價(jià)值觀，這個(gè)價(jià)值觀是關(guān)于健康和自然的，這

也更能突顯出果家人的產(chǎn)品是健康的、自然的、美味的。所以主色定為淺綠色，

輔助色則選擇的是與主色同類色的淡綠色，這個(gè)色彩的搭配讓整個(gè)頁面看起來

比較統(tǒng)一和諧。

以下為色彩設(shè)計(jì)的標(biāo)準(zhǔn)色（如圖1所示）

圖1標(biāo)準(zhǔn)色

1.4字體規(guī)范

以下為字體規(guī)范的標(biāo)準(zhǔn)字體（如圖2所示）

2

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

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

2網(wǎng)店頁面原型圖分析與設(shè)計(jì)方案

2.1首頁

首先是導(dǎo)航區(qū)，為用戶提供導(dǎo)航和瀏覽功能，它可以幫助用戶快速找到自

己需要的信息和內(nèi)容，避免用戶浪費(fèi)不必要的時(shí)間。緊接著是banner區(qū)，banner

區(qū)最大的作用就是吸引目標(biāo)用戶。通過展示Banner廣告，可以讓用戶在瀏覽網(wǎng)

頁的過程中注意到品牌或產(chǎn)品，從而吸引他們進(jìn)入品牌的官方網(wǎng)站或購(gòu)買頁面。

這樣可以提高品牌的轉(zhuǎn)化率，并增加銷售額。廣告區(qū)后就是產(chǎn)品展示區(qū)，通過

展示自己的產(chǎn)品來吸引消費(fèi)者的注意力，讓消費(fèi)者對(duì)自己的產(chǎn)品產(chǎn)生興趣，從

而增加銷售量。其中展示區(qū)中穿插了一個(gè)產(chǎn)品輪播區(qū)，一方面產(chǎn)品輪播可以將

多個(gè)商品的信息展示給用戶，特別是對(duì)于新品或者促銷商品，能快速的提高商

品的曝光率和銷售量。另一方面，它能夠改善該頁面從上到下居中排版的一個(gè)

單調(diào)性，能夠緩解用戶視覺上的疲勞。其次就是品牌簡(jiǎn)介區(qū)，它可以讓用戶更

好地了解品牌的歷史、文化、理念、產(chǎn)品等信息，從而使用戶更加認(rèn)同該品牌。

這個(gè)區(qū)域下面設(shè)計(jì)了兩個(gè)按鈕，能夠幫用戶快速跳轉(zhuǎn)到其他地方，給用戶帶來

3

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

一定的便利性。最后就是頁尾區(qū)，為客戶指路以及相關(guān)的聯(lián)系方式。這種從上

到下的排版特別簡(jiǎn)單明了，能夠讓用戶快速的了解他想要的信息。（如圖3所

示）

圖3首頁原型圖

4

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

2.2搜索結(jié)果頁

首先是導(dǎo)航區(qū)，緊接著的是分類區(qū)，按照口味、價(jià)格等因素進(jìn)行分類，讓

消費(fèi)者可以更加方便快捷地找到自己所需要的商品，提高購(gòu)物的效率。其次就

是產(chǎn)品區(qū)，根據(jù)不同的搜索需求對(duì)應(yīng)不同的結(jié)果產(chǎn)品。最后就是頁尾。這樣的

版式即簡(jiǎn)潔又很高效。（如圖4所示）

圖4搜索結(jié)果頁原型圖

2.3商品詳情頁

首先是導(dǎo)航區(qū)，接著是產(chǎn)品區(qū)，展示產(chǎn)品的同時(shí)簡(jiǎn)述產(chǎn)品的基本信息（如

價(jià)格、口味、銷售量），其次是商品詳情頁，它可以直觀地展示商品的外觀、

質(zhì)感、色彩等方面，讓消費(fèi)者更加真實(shí)地感受商品的樣貌和品質(zhì)。細(xì)節(jié)上面的

展示可以讓消費(fèi)者更全面地了解商品的特點(diǎn)。最后就是頁尾。這樣的排版能夠

充分的展示商品的細(xì)節(jié)。（如圖5所示）

5

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

圖5商品詳情頁原型圖

2.4登錄注冊(cè)頁

首先是導(dǎo)航區(qū)，其次是登錄注冊(cè)區(qū)，左邊區(qū)域放了一張banner，不僅能夠

填充空白區(qū)域，還能夠緩解頁面的單調(diào)性。登錄注冊(cè)后用戶將有一個(gè)獨(dú)立的專

屬賬號(hào)，能夠進(jìn)行商品的了解和交易，確保用戶的權(quán)益。最后是頁尾區(qū)。這樣

的版式即方便又生動(dòng)。（如圖6所示）

6

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

圖6登錄注冊(cè)頁原型圖

2.5購(gòu)物車

首先是導(dǎo)航區(qū)，其次是購(gòu)物車結(jié)算區(qū)，能夠清晰的了解用戶所加購(gòu)商品的

詳情信息，并對(duì)商品的總額進(jìn)行一個(gè)結(jié)算。緊接著是一個(gè)商品推薦區(qū)，根據(jù)用

戶所加購(gòu)的商品推測(cè)用戶可能會(huì)喜歡或者感興趣的商品，引導(dǎo)用戶進(jìn)一步的瀏

覽與購(gòu)買。這樣的版式設(shè)計(jì)非常工整但又不乏小心機(jī)。（如圖7所示）

圖7購(gòu)物車原型圖

7

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

2.6訂單結(jié)算頁

首先是導(dǎo)航區(qū)，其次是收貨地址區(qū)，收貨地址的填寫能夠確保用戶收到該

產(chǎn)品，緊接著是核對(duì)訂單區(qū)域，讓用戶確認(rèn)商品信息是否有誤。下面設(shè)計(jì)了兩

個(gè)按鈕，確認(rèn)商品信息無誤的話可以按支付按鈕，有誤的話可以返回購(gòu)物車重

新編輯，給用戶帶來一定的便利性。最后就是頁尾區(qū)。這樣的版式條理清晰，

邏輯嚴(yán)謹(jǐn)。（如圖8所示）

圖8訂單結(jié)算頁原型圖

2.7個(gè)人中心

首先是導(dǎo)航區(qū)，其次是會(huì)員卡區(qū)，能夠展示用戶的會(huì)員積分、會(huì)員權(quán)益及

購(gòu)物金等信息，緊接著是會(huì)員權(quán)益區(qū)，展示會(huì)員的四大權(quán)益，然后就是會(huì)員福

利區(qū)，提供某些商品價(jià)格上面的優(yōu)惠。在這些區(qū)域的左邊，有一個(gè)關(guān)于個(gè)人中

心的分類，能夠幫助用戶快速切換到其他頁面，提高用戶的體驗(yàn)度。最后就是

頁尾區(qū)。這樣的版式養(yǎng)眼又便捷。（如圖9所示）

8

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

圖9個(gè)人中心原型圖

3網(wǎng)店頁面視覺效果設(shè)計(jì)與制作

3.1首頁視覺設(shè)計(jì)與制作

3.1.1設(shè)計(jì)思路

首頁的開頭是一個(gè)店招和導(dǎo)航欄，緊接著是banner，設(shè)計(jì)了兩張banner，

第一張是品牌節(jié)日banner，以中秋節(jié)為主題，表達(dá)中秋獻(xiàn)禮送水果罐頭也是個(gè)

不錯(cuò)的選擇。在賞月的同時(shí)，也可以一邊吃水果罐頭慶祝。這張banner的背景

運(yùn)用了紋理，使整體看起來更加高級(jí)，月亮用了一個(gè)內(nèi)發(fā)光和外發(fā)光的效果，

桌布那里則用了圖案的疊加和投影效果。（如圖10所示）

9

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

圖10品牌節(jié)日活動(dòng)banner

第二張是品牌爆品促銷banner，以楊梅罐頭為主題，整個(gè)頁面穿插著許多

的楊梅及樹葉，對(duì)用戶的視覺上造成上一定的沖擊。（如圖11所示）

圖11品牌爆品促銷banner

Banner后面整體的背景是一個(gè)插畫，且顏色跟店招一樣，此外，還有一些

樹葉的修飾，這些都能夠彌補(bǔ)整個(gè)畫面的單調(diào)性，爆款推薦模塊運(yùn)用了一個(gè)不

規(guī)則圖案，能給用戶帶來更好的視覺體驗(yàn)。在每個(gè)板塊的展示前面都有一些創(chuàng)

意修飾，比如兩個(gè)拿著樹枝的樹懶、粉嫩的花枝以及用草裝飾的小牌子。后面

用動(dòng)物的小腳印來表示按鈕也非常的生動(dòng)、可愛。

頁尾則是與品牌相關(guān)的一些信息及聯(lián)系方式，如qq、微信、微博，方便用

戶快速找到該品牌。

10

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

3.1.2設(shè)計(jì)效果

圖12首頁效果圖

11

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

3.2搜索結(jié)果頁視覺設(shè)計(jì)與制作

3.2.1設(shè)計(jì)思路

搜索結(jié)果頁前面是店招和導(dǎo)航欄，分類這里除了搜索框還用了一個(gè)表格形

式，且顏色上從淺綠色到淡綠色過度，整體色調(diào)比較統(tǒng)一。產(chǎn)品圖片的選取也

比較統(tǒng)一，前面都帶有果家人這個(gè)標(biāo)識(shí)。這樣的頁面構(gòu)思很統(tǒng)一，用戶視覺上

有著良好的視覺體驗(yàn)。（如圖13所示）

3.2.2設(shè)計(jì)效果

圖13搜索結(jié)果頁效果圖

12

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

3.3產(chǎn)品詳情頁視覺設(shè)計(jì)與制作

商品詳情頁是整個(gè)店鋪成交的關(guān)鍵頁面，這里選擇了黃桃罐頭進(jìn)行詳情頁

設(shè)計(jì)。產(chǎn)品詳情頁設(shè)計(jì)我共分了五個(gè)部分，店招導(dǎo)航、產(chǎn)品主圖及購(gòu)買信息、

左側(cè)導(dǎo)航欄、中間產(chǎn)品詳情內(nèi)容，這里的主色調(diào)定為淡黃色，一方面這個(gè)顏色

非常接近黃桃的顏色，另一方面淡黃色是一種溫暖的顏色，也是能夠刺激消費(fèi)

者食欲的顏色。以下是黃桃罐頭詳情內(nèi)容的設(shè)計(jì)思路。

3.3.1黃桃罐頭設(shè)計(jì)思路

首先是店招導(dǎo)航，緊接著產(chǎn)品主圖及購(gòu)買信息，下面的詳情頁左邊是一個(gè)

導(dǎo)航欄，能夠幫助用戶了解不同口味罐頭的詳情，詳情頁右邊上面是焦點(diǎn)圖，

焦點(diǎn)圖的背景是淡黃色，產(chǎn)品置于左下角，用黃桃當(dāng)點(diǎn)綴，右下角的窗戶用了

圖層蒙版，窗戶前的葉子用了高斯模糊，黃桃罐頭的“桃”字用了兩種顏色，

每種顏色各一半，非常的吸睛。下面的詳情信息背景為白色，標(biāo)題文字為黃色，

從多個(gè)角度展示黃桃罐頭，有黃桃罐頭的外包裝、黃桃罐頭的果肉實(shí)拍圖、黃

桃的原生產(chǎn)地及黃桃罐頭的各種吃法。最后還有個(gè)售后保證，讓用戶買得放心。

這樣的頁面構(gòu)思設(shè)計(jì)不僅可以全面的向用戶展示商品詳情，同時(shí)還可以起到吸

引用戶的作用，引導(dǎo)用戶去購(gòu)買。（如圖14所示）

13

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

3.3.2黃桃罐頭設(shè)計(jì)效果

圖14黃桃罐頭詳情頁效果圖

14

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

3.4登錄注冊(cè)頁視覺設(shè)計(jì)與制作

3.4.1設(shè)計(jì)思路

前面是店招和導(dǎo)航欄，下面就是登錄注冊(cè)區(qū)，左邊放了一張關(guān)于黃桃罐頭

的手繪插畫，一方面與果家人的產(chǎn)品相呼應(yīng)，另一方面可以彌補(bǔ)頁面的單調(diào)性。

右邊分為登錄賬號(hào)和注冊(cè)賬號(hào)兩部分，其中，登錄賬號(hào)是從用戶名、密碼、驗(yàn)

證碼三個(gè)方面進(jìn)行登錄。這樣的頁面構(gòu)思設(shè)計(jì)給人一種“麻雀雖小五臟俱全”

的感受。（如圖15所示）

3.4.2設(shè)計(jì)效果

圖15登錄注冊(cè)頁效果圖

3.5購(gòu)物車視覺設(shè)計(jì)與制作

3.5.1設(shè)計(jì)思路

前面是店招和導(dǎo)航欄，緊接著從商品、口味、單價(jià)、數(shù)量、小計(jì)、操作六

個(gè)方面來進(jìn)行購(gòu)物車區(qū)的設(shè)計(jì)，這個(gè)區(qū)域的文字、圖片、顏色都保持一致，在

購(gòu)物車區(qū)的下面，添加了一個(gè)猜你喜歡的板塊，用圖文相結(jié)合的方式來展現(xiàn)，

15

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

可以更加吸引消費(fèi)者的目光，從而進(jìn)一步引導(dǎo)消費(fèi)者下單，提高商品的銷售量。

這樣的頁面構(gòu)思設(shè)計(jì)不僅排版很工整，還有著自己巧妙的小心思。（如圖16所

示）

3.5.2設(shè)計(jì)效果

圖16購(gòu)物車效果圖

3.6訂單結(jié)算頁視覺設(shè)計(jì)與制作

3.6.1設(shè)計(jì)思路

訂單結(jié)算頁前面是店招和導(dǎo)航欄，緊接著是收貨地址區(qū)，地址用長(zhǎng)矩形的

方式呈現(xiàn)，簡(jiǎn)單明了。下面是核對(duì)訂單區(qū)，從店鋪寶貝、單價(jià)、數(shù)量、小計(jì)四

16

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

個(gè)方面讓用戶確認(rèn)他的訂單是否有誤，此外，還包含運(yùn)費(fèi)險(xiǎn)、運(yùn)輸方式、優(yōu)惠、

電子發(fā)票。這個(gè)區(qū)域的后面針對(duì)訂單是否有誤設(shè)計(jì)了兩個(gè)按鈕，能夠?qū)崿F(xiàn)結(jié)算

的功能或者返回購(gòu)物車重新挑選。這樣的頁面構(gòu)思設(shè)計(jì)詳細(xì)的同時(shí)又很嚴(yán)謹(jǐn)。

（如圖17所示）

3.6.2設(shè)計(jì)效果

圖17訂單結(jié)算頁效果圖

17

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

3.7個(gè)人中心視覺設(shè)計(jì)與制作

3.7.1設(shè)計(jì)思路

個(gè)人中心頁首先是店招和導(dǎo)航欄，下面分為兩部分，左邊是一個(gè)關(guān)于個(gè)人

中心的分類，能夠幫助客戶快速到達(dá)他想要去的頁面，其中VIP會(huì)員那一類用

紅色標(biāo)記表明該頁面是個(gè)人中心的會(huì)員頁。右邊分為三塊，上面的是會(huì)員卡的

設(shè)計(jì)，包含會(huì)員的一些簡(jiǎn)單信息，如會(huì)員積分、會(huì)員權(quán)益、購(gòu)物金。中間是會(huì)

員特權(quán)版塊根據(jù)四個(gè)不同的特權(quán)設(shè)計(jì)了相應(yīng)的圖標(biāo)，下面用圖文相結(jié)合的方式

展示了會(huì)員福利。這樣的頁面構(gòu)思設(shè)計(jì)簡(jiǎn)潔但又不失創(chuàng)意。（如圖18所示）

3.7.2設(shè)計(jì)效果

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

18