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

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

目錄

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

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

1.1.1用戶需求分析.......................................................................................1

1.1.2網(wǎng)站功能設計.......................................................................................1

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

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

1.2.2交互邏輯設計.......................................................................................2

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

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

2.1.1網(wǎng)站首頁版式.......................................................................................3

2.1.2關于CEEKAY頁版式.............................................................................5

2.1.3產(chǎn)品中心頁版式...................................................................................7

2.1.4產(chǎn)品展示頁版式...................................................................................9

2.1.5產(chǎn)品詳情頁版式...................................................................................9

2.2頁面視覺元素設計....................................................................................11

2.2.1網(wǎng)站配色設計.....................................................................................11

2.2.2網(wǎng)站LOGO設計...................................................................................11

2.2.3網(wǎng)站圖標設計.....................................................................................12

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

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

3.1.1網(wǎng)站首頁原型.....................................................................................12

3.1.2關于CEEKAY頁原型...........................................................................14

3.1.3產(chǎn)品中心頁原型.................................................................................15

3.1.4產(chǎn)品展示頁原型.................................................................................17

3.1.5產(chǎn)品詳情頁原型.................................................................................18

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

I

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

4設計總結(jié)..................................................................................................................20

參考資料.........................................................................................................................21

II

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

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

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

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

1.1.1用戶需求分析

隨著經(jīng)濟的發(fā)展和人們消費水平的不斷提高，各種時尚的物件油然而生，

其中包包更是成為人們生活中體現(xiàn)時尚的不可或缺的飾品。同時網(wǎng)絡時代的盛

行，更是讓網(wǎng)上購物成為人們的家常便飯，越來越多的買家選擇足不出戶在網(wǎng)

上購買包包，盡情享受網(wǎng)店的方便和快捷，因此我將為“CEEKAY”品牌制作一

個官方網(wǎng)站，提高品牌的影響力。

近年來全球的包包行業(yè)銷售額都呈現(xiàn)出波動增長的趨勢，在我們的傳統(tǒng)觀

念中人們可能更注重于包包的實用性，不過隨著消費質(zhì)量的提高，人們開始注

重于包包的時尚和個性化。不僅想要包包產(chǎn)品的功能屬性能夠滿足日常需求，

例如一些材料的耐磨、材質(zhì)的柔軟、顏色的高級，日常的搭配等，還想要追求

美與時尚。總的來說，現(xiàn)在消費者更趨向于追求實用性與個性化融為一體的產(chǎn)

品。

人們選擇在網(wǎng)上購物一方面是因為方便與快捷，所以在制作該網(wǎng)站時要盡

量簡約，不要過于復雜，要讓顧客一目了然，更快的找到自己想要的包包；另

一方面人們都是視覺動物，好看的事物往往會更具有吸引力，因此網(wǎng)頁要制作

的更精美，更具有視覺沖擊力，讓顧客有想要瀏覽頁面的欲望。

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

CEEKAY包包網(wǎng)站實現(xiàn)的主要功能包括，首頁、關于CEEKAY、產(chǎn)品中心、精

選爆款、聯(lián)系我們、個人中心六個模塊。

1)首頁：其中包括了CEEKAY的logo展示、搜索框的展示、banner的輪

播圖、商品爆款展示、商品的新品推薦以及底部的企業(yè)信息。主要是為

了讓顧客更快的了解網(wǎng)站，能一目了然的看到火爆產(chǎn)品，吸引顧客進入

網(wǎng)站。

2)關于CEEKAY頁面：包括了搜索導航欄、書店logo展示、品牌簡介、產(chǎn)

品優(yōu)勢、日常保養(yǎng)以及底部的企業(yè)信息。

3)產(chǎn)品中心：包含各種類目的包包。

1

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

4)精選爆款：主要展示了幾款較火爆的包包。

5)聯(lián)系我們：包含公司地址，聯(lián)系方式，郵箱。

6)個人中心：包含登錄、注冊等一些個人信息

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

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

banner

首頁爆款展示

新品推薦

CEEKAY簡介

關于CEEKAY

公司新聞

通用款女包詳情頁

小方包詳情頁

腋下包詳情頁

水桶包詳情頁

CEEKAY產(chǎn)品中心托特包詳情頁

馬鞍包詳情頁

手機包詳情頁

雙肩背包詳情頁

胸包詳情頁

精選爆款詳情頁

地址

聯(lián)系我們

聯(lián)系方式

個人資料

個人中心我的訂單

我的售后

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

1.2.2交互邏輯設計

用戶通過用鼠標在瀏覽器中點擊網(wǎng)頁中的圖片或者文字，從而實現(xiàn)頁面之

2

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

間的跳轉(zhuǎn)。

網(wǎng)站每個頁面的頁頭都有搜索欄，收藏和導航欄，其中導航欄上設有首頁、

關于CEEKAY、產(chǎn)品中心、精選爆款、聯(lián)系我們、個人中心的文字，點擊可以跳

轉(zhuǎn)到對應的頁面。

1)首頁：點擊產(chǎn)品的立即購買按鈕可以跳轉(zhuǎn)到相對應的產(chǎn)品展示頁。

2)產(chǎn)品中心頁面：有日常百搭、手機包、雙肩背包、胸包等頁面。點擊商

品圖片查看更多可跳轉(zhuǎn)到對應的產(chǎn)品展示頁，點擊立即購買可跳轉(zhuǎn)到對

應的詳情頁。

3)精選爆款頁面：點擊商品旁的立即搶購可以跳轉(zhuǎn)到對應的產(chǎn)品展示頁。

4)個人中心頁面：點擊個人中心進入登錄注冊頁面，點擊登錄可進入會員

中心，若沒有賬號可先注冊再登錄。

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

2.1頁面版式設計

2.1.1網(wǎng)站首頁版式

此頁為商品首頁，主要是用RP軟件制作而成，其中l(wèi)ogo和圖標用PS繪制

而成。分為四個板塊，第一個板塊是頁頭：左邊放品牌logo和廣告語，右邊放

購物車、個人中心和手機登錄的圖標以及搜索框，下面是分類導航欄，以便于

用戶更快的了解網(wǎng)站；第二個板塊是banner：包含一些商品以及活動的相關信

息；第三個板塊是內(nèi)容板塊：包含爆款展示和新品推薦兩個內(nèi)容，主要文字和

圖片結(jié)合的形式，讓顧客對品牌有個深刻的理解，引起顧客對網(wǎng)站的好奇；第

四個板塊是頁尾：包含公司的相關版權(quán)信息。

3

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

圖2網(wǎng)站首頁線框圖

4

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

2.1.2關于CEEKAY頁面版式

圖3關于CEEKAY頁線框圖

5

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

此頁為關于CEEKAY頁面，主要是用RP軟件制作而成，分為四個板塊，第

一個板塊是頁頭：左邊是品牌logo和廣告語，讓顧客一眼就知道是什么網(wǎng)站，

右邊是購物車、個人中心和手機登錄的圖標，搜索框和分類導航欄。用一些小

巧且精致的圖標讓顧客更直觀的感受同時讓頁面更加飽滿，增加搜索框可以讓

顧客快速搜索到自己想要的包包，更加方便；第二個板塊是banner：用RP中的

占位符進行繪制；第三個板塊是內(nèi)容板塊：最上面是品牌簡介，主要采取上面

文字結(jié)合下面圖片的形式進行展示，讓顧客一進入頁面就能對CEEKAY品牌有個

初步的了解，中間是產(chǎn)品優(yōu)勢，主要是用PS繪制圖標，采取上面圖標下面文字

的形式，文字用四字成語表示，通過簡潔明了的成語讓顧客通俗易懂，下面是

日常保養(yǎng)，采取左邊圖片右邊文字的形式；第四個板塊是頁尾：包括公司的相

關信息。

6

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

2.1.3產(chǎn)品中心頁版式

圖4產(chǎn)品中心頁線框圖

7

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

此頁為產(chǎn)品中心頁面，主要是用RP軟件制作而成，總共三個板塊。第一個

板塊是頁頭，左邊放品牌logo和廣告語，右邊放購物車、個人中心和手機登錄

的圖標以及搜索框，下面是分類導航欄，以便于用戶更快的了解網(wǎng)站；第二個

板塊的是內(nèi)容板塊，主要是根據(jù)包包品類進行梯級式設計，總共有四個品類，

每一品類采取banner再加商品圖片和文字的形式進行展示，用RP中的占位符

進行繪制，占位符里面再加上文本框和按鈕。第一個品類是女式包裝新，里面

包含六類包包，每一類用一張圖片和文字的形式進行展示，顧客可以通過文字

看出是什么款式的包包，第二、三、四個品類分別是手機包、雙肩背包、胸包，

都是放置了四張圖片和文字；第三個板塊是頁尾，主要包括公司的聯(lián)系方式等。

8

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

2.1.4產(chǎn)品展示頁版式

圖5產(chǎn)品展示頁線框圖

此頁為產(chǎn)品展示頁面，主要是RP軟件制作而成，總共三個板塊。第一個板

9

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

塊是頁頭：左邊是品牌logo和廣告語，比較醒目，能讓顧客一眼認出是什么網(wǎng)

站，右邊是購物車、個人中心、手機登錄的圖標和搜索框，下面是分類導航欄。

用一些小巧且精致的圖標讓頁面更加飽滿，增加搜索框可以讓顧客更加快速便

捷的找到自己想要的款式；第二個板塊是內(nèi)容板塊，首先繪制兩根直線，其次

在直線中放包包品類名稱，讓顧客能一眼看出是什么款式的包包，然后中間采

取從上到下依次是圖片、文本、購買按鈕的形式進行繪制，其中點擊購買按鈕

可以跳轉(zhuǎn)到商品詳情頁；第三個板塊是頁尾，主要包括公司的相關信息。

2.1.5產(chǎn)品詳情頁版式

圖6產(chǎn)品詳情頁線框圖

此頁為產(chǎn)品詳情頁面，主要是RP軟件制作而成，總共三個板塊。第一個板

塊是頁頭：左邊是品牌logo和廣告語，比較醒目，能讓顧客一眼認出是什么網(wǎng)

站，右邊是購物車、個人中心和手機登錄的圖標，搜索框，下面是分類導航欄。

用一些精致的圖標讓顧客更直觀的感受，增加搜索框可以讓顧客更加方便快捷

的搜索到網(wǎng)站的包包，提高用戶的體驗，點擊導航欄可以跳轉(zhuǎn)到各個頁面；第

二個板塊是內(nèi)容板塊，左邊放一張商品的主圖，下面放四張商品的副圖，例如

10

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

商品不同的顏色圖以及商品內(nèi)部的結(jié)構(gòu)圖等，右邊放商品的名稱，價格，顏色

分類，購買數(shù)量和立即購買按鈕；第三個板塊是頁尾，主要包括公司的版權(quán)信

息，聯(lián)系方式。

2.2頁面視覺元素設計

2.2.1網(wǎng)站配色設計

關于CEEKAY網(wǎng)站色彩設計與搭配主要是采用了高級灰，輔色為黑色，白色

和綠色。黑白灰的組合讓網(wǎng)站的整個頁面顯得簡約高級，同時CEEKAY品牌的包

包以黑白色為主，頁面的整體顏色也和產(chǎn)品做了一個很好的呼應。

我們將綠色作為點綴，會讓色彩感更豐富，一定程度上吸引了讀者的購買

興趣，這種顏色樸實且成熟優(yōu)雅穩(wěn)重，跟我們網(wǎng)站包包簡單時尚典雅相符合。

圖7網(wǎng)站配色設計

2.2.2網(wǎng)站LOGO設計

在網(wǎng)站設計中，一個簡單，易懂的Logo不僅可以很好的樹立公司形象，還

可以傳達豐富的產(chǎn)品信息，讓顧客對網(wǎng)站有個初步的了解。CEEKAY品牌的logo

由圖案和文字組合而成，通俗易懂，讓顧客一目了然，從而提升品牌的認知度。

logo采用圓形，圓形代表著完美極致，沒有棱角，低調(diào)也豐富，奢華還內(nèi)斂，

包羅萬象，下面由品牌的字母組成，簡潔大方，美觀自然，同時采用了黑色，

是整個網(wǎng)站顯得更高級簡約，完美的體現(xiàn)了CEEKAY品牌包包簡約大氣的風格。

圖8網(wǎng)站LOGO設計

11

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

2.2.3網(wǎng)站圖標設計

圖9網(wǎng)站圖標設計

CEEKAY網(wǎng)站制作時一共用了八個小圖標。第一個是購物車圖標，主要是針

對于客戶進行購買時所使用的小圖標。第二個是手機圖標，點擊可以進入登錄

注冊頁面。第三個是用戶圖標，點擊可以進入個人中心頁面。第四個小圖標是

搜索小圖標，做的是放大鏡，是用于搜索框內(nèi)，是基于最基本的搜索圖標。后

四個圖標放在關于CEEKAY頁面中來表現(xiàn)產(chǎn)品優(yōu)勢的圖標。做圖標時的軟件主要

是PS和RP，通過一些簡單直觀的圖標來吸引顧客，使網(wǎng)站看起來更加飽滿。

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

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

3.1.1網(wǎng)站首頁原型

首先將品牌的logo放在網(wǎng)站比較醒目的左上角，讓顧客能一眼看出是什么

網(wǎng)站，logo旁邊放言簡意賅的廣告語，起到宣傳作用，吸引顧客進行消費。網(wǎng)

站右上角放搜索框，可以讓顧客直接搜索想要的款式點擊進入相對應的頁面。

下面放分類導航欄，起到引導的作用。導航欄下面放banner輪播圖，給顧客傳

達信息，吸引顧客的注意力。banner下面做了兩個產(chǎn)品展示區(qū)域，一個是爆款

展示，采取左圖右文和左文右圖的形式，且文字較簡潔，這樣可以減少視覺疲

勞。另一個是新品展示，采取上圖下文的形式，整體排版較整齊，下意識地影

響用戶的瀏覽視線和閱讀順序。最下面是頁尾，展示了網(wǎng)頁的版權(quán)信息等。整

體顏色采取灰色為主，營造一種穩(wěn)重高雅的氛圍感。

12

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

圖10網(wǎng)站首頁原型

13

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

3.1.2關于CEEKAY頁原型

圖11關于CEEKAY頁原型

14

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

同樣是以灰色調(diào)為主，該頁面主要是為了讓顧客對CEEKAY品牌和產(chǎn)品有個

更深刻的理解，所以制作了品牌簡介，放置了CEEKAY門店和包包的照片，其中

在產(chǎn)品優(yōu)勢板塊中還參雜了小圖標，能快速的傳達信息，更高效的讓顧客理解

產(chǎn)品。在最后一個板塊放置了包包日常保養(yǎng)的小貼士，可以讓顧客對品牌有個

好印象，會覺得貼心并且會為顧客著想，從而吸引其購買的欲望。

3.1.3產(chǎn)品中心頁原型

通過產(chǎn)品的品類進行梯級式設計，分為四大類，每一類由banner進行區(qū)分，

第一大類是日常百搭款，里面包括了六小類，每一小類放置了一款商品，采取

上圖下文的形式，點擊查看更多可以進入相對應的頁面；下面三大類采取相同

的排版方式，讓整個頁面看起來較整齊，不顯得凌亂，同時點擊banner上面的

查看更多和商品都可以直接跳轉(zhuǎn)到商品展示頁，讓顧客有更多的選擇機會。

15

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

圖12產(chǎn)品中心頁原型

16

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

3.1.4產(chǎn)品展示頁原型

圖13產(chǎn)品展示頁原型

首先在導航欄下面繪制了兩根直線，在直線中放包包的品類名稱，讓顧客

能一眼看出是什么款式的包包，同時在名稱前面放置了一個箭頭，顧客點擊可

以直接返回到產(chǎn)品中心頁面，讓顧客更方便快捷。其次中間商品采取從上到下

依次是圖片、文本、購買按鈕的形式進行繪制，其中點擊購買按鈕可以跳轉(zhuǎn)到

商品詳情頁；頁面設計十分簡潔，可以讓顧客更通俗易懂。

17

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

3.1.5產(chǎn)品詳情頁原型

圖14產(chǎn)品詳情頁原型

首先在導航欄下面繪制了兩根直線，在直線中放詳情頁名稱，讓顧客能一

眼看出是什么頁面，同時在名稱前面放置了一個箭頭，顧客點擊可以直接返回

到產(chǎn)品展示頁面。內(nèi)容板塊左邊是商品的主圖，主圖下面放四張商品的副圖，

例如商品不同的顏色圖以及商品內(nèi)部的結(jié)構(gòu)圖等，鼠標移入副圖，主圖的照片

會變?yōu)槠涓眻D，右邊放商品的名稱，價格，顏色分類，購買數(shù)量和立即購買按

鈕。

18

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

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

網(wǎng)頁動態(tài)特效使用RP實現(xiàn)。

動態(tài)特效1：頁面跳轉(zhuǎn)（一級目錄間的跳轉(zhuǎn)、父與子目錄間的跳轉(zhuǎn)）

圖15頁面跳轉(zhuǎn)特效效果

動態(tài)特效2：首頁banner自動輪播（鼠標移入序號實現(xiàn)輪播，移出時自動

輪播）

圖16網(wǎng)頁旋轉(zhuǎn)特效效果

19