無趣工社品牌網(wǎng)店視覺方案設計

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

目錄

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

1.1項目背景......................................................................................................1

1.2項目需求分析..............................................................................................1

1.3色彩設計......................................................................................................2

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

2網(wǎng)店頁面原型圖分析與設計方案............................................................................4

2.1首頁..............................................................................................................4

2.2搜索結果頁..................................................................................................6

2.3商品詳情頁..................................................................................................6

2.4登錄注冊頁..................................................................................................8

2.5購物車..........................................................................................................8

2.6訂單結算頁..................................................................................................9

2.7個人中心....................................................................................................10

3網(wǎng)店頁面視覺效果設計與制作..............................................................................11

3.1首頁視覺設計與制作................................................................................11

3.1.1設計思路.............................................................................................11

3.1.2設計效果.............................................................................................13

3.2搜索結果頁視覺設計與制作....................................................................14

3.2.1設計思路.............................................................................................14

3.2.2設計效果.............................................................................................15

3.3產(chǎn)品詳情頁視覺設計與制作....................................................................15

3.3.1樂樂杯栽培設計思路.........................................................................15

3.3.2樂樂杯栽培設計效果.........................................................................16

3.4登錄注冊頁視覺設計與制作....................................................................18

3.4.1設計思路.............................................................................................18

3.4.2設計效果.............................................................................................18

I

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

3.5購物車視覺設計與制作............................................................................18

3.5.1設計思路.............................................................................................18

3.5.2設計效果.............................................................................................19

3.6訂單結算頁視覺設計與制作....................................................................19

3.6.1設計思路.............................................................................................19

3.6.2設計效果.............................................................................................20

3.7個人中心視覺設計與制作........................................................................20

3.7.1設計思路.............................................................................................20

3.7.2設計效果.............................................................................................21

4總結..........................................................................................................................21

參考資料.........................................................................................................................22

II

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

無趣工社品牌網(wǎng)店視覺方案設計

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

1.1項目背景

目前，網(wǎng)絡的發(fā)展逐步影響了人們的日常生活，傳統(tǒng)的生活模式正在發(fā)生

變化。網(wǎng)絡的發(fā)展顛覆了傳統(tǒng)信息甚至是物質(zhì)之間的交流，改變了受限制在空

間和時間中的壁壘。也正是這種新發(fā)展誕生了許多基于網(wǎng)絡形成的特色賽道。

電商，正是由此形成并且逐漸的發(fā)展壯大。

自1999年電商元年發(fā)展至今，電商的模式已經(jīng)完成了摸索階段，形成了成

熟的商業(yè)體系。線上，有大量的電商平臺作為渠道，如淘寶京東等網(wǎng)站，將買

賣雙方聯(lián)系起來進行交易。線下，通過物流派送，線下門店等方式完成商品的

交付，人們對于網(wǎng)絡購物早就習慣甚至產(chǎn)生依賴性。

網(wǎng)絡購物的興起不僅是對傳統(tǒng)商務的一種沖擊，也是對企業(yè)發(fā)展的一種機

遇。這是一種全新的賽道，可以通過電商擴大企業(yè)的影響力、競爭力。不少的

品牌都選擇了建設自己的獨立網(wǎng)店，也有包括三只松鼠在內(nèi)的，是基于電商而

興起的品牌，從網(wǎng)絡中發(fā)展如今也成了零食行業(yè)的龍頭企業(yè)。這給了許多品牌

一個發(fā)展的啟示。

無趣工社，也正是隨著電商的發(fā)展而同步進行的品牌。致力于打造新穎的、

具有個性化服務的一家潮流禮品的公司。根據(jù)調(diào)查，目前無趣工社尚沒有屬于

自己的專屬網(wǎng)站，僅是在天貓京東等網(wǎng)絡購物平臺上有屬于自己的具有購買能

力的旗艦店。

1.2項目需求分析

根據(jù)調(diào)查，無趣工社在天貓和京東均有自己的網(wǎng)店。但是隨著時代的發(fā)展，

潮流趨勢已經(jīng)產(chǎn)生了一定的變化，可能之前建立的網(wǎng)店裝修設計不太契合如今

人們的喜好。根據(jù)數(shù)據(jù)分析，在潮玩一類商品的消費者當中，消費的主要人群

是15-25歲之間的年輕人群，其中性別以女性偏多。這一類人群有著大量的娛

樂活動，潮流玩具也是他們選擇的滿足自身需求的商品。而且這一類人具有購

買的頻率高但購買的力度不大，購買的目的性很強，個性化差異大。所以在網(wǎng)

站的建設中就要注重服務與這部分人群。無趣工社在商品上面是滿足這一點的，

1

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

首先價格方面與相似的品牌并無太大的差別，所以從視覺和網(wǎng)店設計上就要體

現(xiàn)自己的競爭力。根據(jù)對競爭對手品牌的研究分析發(fā)展，現(xiàn)多數(shù)的潮流品牌推

出的產(chǎn)品帶有科技風、賽博風。而無趣工社不同的是產(chǎn)品有特有的文藝風、溫

情風等有創(chuàng)意的產(chǎn)品，這可以作為品牌的一個獨有競爭點。

無趣工社一直以“誠信”“共贏”“開創(chuàng)”作為自身的經(jīng)營理念?，F(xiàn)在的網(wǎng)

店裝修因為沒有變化，已經(jīng)失去了新穎力，而且排版結構也不符合當下的潮流，

首頁沒能將產(chǎn)品和品牌有一個良好的展示和宣傳甚至出現(xiàn)了部分死鏈接，導航

欄過于隱蔽，導航指引的功能不太能體現(xiàn)出現(xiàn)，這些都是現(xiàn)在的網(wǎng)店存在的問

題。網(wǎng)店的設計上就可以基于這幾點進行改進，計劃打造一個有新創(chuàng)意的門面，

同時也要展現(xiàn)出品牌個性化十足的特點滿足更多不同需求的消費者。設計的風

格偏向明亮，活躍富有動態(tài)的形式，視覺上能第一時間抓住客戶的眼球，引起

客戶的注意，從而促進消費，增長無趣工社品牌的影響力。

1.3色彩設計

色彩對人視覺上的影響很大，良好的色彩的搭配會使得用戶的觀感舒適.在

本次網(wǎng)店的建設中，選擇了以黃色系作為他的主色調(diào)。黃色會給人一種溫和、

歡愉的情感，客戶看到網(wǎng)店會激發(fā)心理上的愉悅產(chǎn)生興奮的感覺，心情良好才

會促進消費。同時添加了鄰近色橙色進行對比，使得畫面更加的和諧，也利用

了黃色的分布將整個網(wǎng)頁進行劃分布局。輔色選擇使用降低了明亮度的淺黃色，

用于突出主體，也能使網(wǎng)頁顯得不單調(diào)。整體的色彩上以暖色調(diào)為主，目的是

給客戶營造出一種溫馨明亮的環(huán)境，進入無趣工社的網(wǎng)店能產(chǎn)生熱烈興奮的情

緒，同時又保證了網(wǎng)店年輕活力的氛圍。（如圖1所示）

2

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

圖1標準色

1.4字體規(guī)范

無趣工社網(wǎng)店的建設使用字體一共有四種，分別是：黑體、微軟雅黑、思

源黑體、宋體。（如圖2所示）

3

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

圖2標準字體

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

2.1首頁

首頁的布局將整體分為了四個模塊，從上到下依次是banner區(qū)域，優(yōu)惠券

區(qū)域，產(chǎn)品區(qū)域和品牌介紹區(qū)域。Banner區(qū)放置首位目的是快速的引起客戶對

無趣工社品牌的興趣。下方的優(yōu)惠券區(qū)域是用于放置各種活動依次保留用戶。

產(chǎn)品區(qū)域中也做了詳細劃分，分為熱賣產(chǎn)品推薦和新品上市促銷將依次介紹產(chǎn)

品，最后的品牌介紹目的是向用戶宣傳品牌文化獲得用戶的認同。（如圖3所示）

4

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

圖3首頁原型圖

5

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

2.2搜索結果頁

搜索結果頁的布局中，最上方設置了一個搜索導航欄以便于用戶能夠快速

準確的找到心儀的商品。下方則是做了分類，將產(chǎn)品總的分類作為主要，也設

置了根據(jù)人群進行區(qū)分和根據(jù)價格進行區(qū)分。并且在下面還向用戶展示了商品

分類為小夜燈分類的搜索結果。（如圖4所示）

圖4搜索結果頁原型圖

2.3商品詳情頁

商品詳情頁的布局可以分為四塊。上方是商品的一個店招展示，而且標明

了種類和價格，在這里可以實現(xiàn)購買功能。右側導航是熱賣產(chǎn)品的推薦，用于

展示更多的商品。左側是一個所有產(chǎn)品的導航欄，可以跳轉(zhuǎn)到其他的商品。中

間部分是詳情頁的主體，里面將對整個產(chǎn)品的功能，設計，使用方式等數(shù)據(jù)進

行一個詳細的介紹，讓用戶更加精確的了解產(chǎn)品。（如圖5所示）

6

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

圖5商品詳情頁原型圖

7

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

2.4登錄注冊頁

登錄注冊頁的布局相對簡單，分為了左右兩塊。右側的模塊用于放置圖片

對整個頁面進行裝飾。左邊是登錄模塊，是實現(xiàn)登錄的功能的模塊，除了賬號

登錄以外還設置了第三方軟件登錄。（如圖6所示）

圖6登錄注冊頁原型圖

2.5購物車

購物車頁面目的是實現(xiàn)對商品訂單進行支付結算的功能。在最上方介紹了

完成支付的流程，中間是對商品數(shù)據(jù)的簡易介紹，如單價，總價和數(shù)量等。并

在最后計算出總共需要支付的價格給客戶結算。在購物車的下方做了相關產(chǎn)品

的一個推薦，吸引用戶進行購買推進銷量。（如圖7所示）

8

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

圖7購物車原型圖

2.6訂單結算頁

訂單結算頁的結構根據(jù)功能的不同進行劃分，最上方是完整的訂單流程介

紹，也讓用戶能夠明白當前處于哪個步驟。下面是收獲地址的確認，保證商品

能夠到達正確的地址。最下方是商品完整的訂單信息，包括商品名稱、單價、

數(shù)量、小計部分，最后完成對商品訂單的統(tǒng)計提交訂單進入到下一個步驟。（如

圖8所示）

9

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

圖8訂單結算頁原型圖

2.7個人中心

個人中心是用戶在本網(wǎng)站上的賬號信息的總和。左側的導航欄是對個人中

心功能的介紹，包含了個人信息，訂單，商場等便于用戶快速導航。右邊的個

人信息模塊為主要部分，首先是用戶的專屬ID卡，上面有用戶的名稱等級和賬

戶錢包、地址等數(shù)據(jù)。ID卡的下方是對會員福利的一個介紹，會員享受優(yōu)惠的

同時也是增長了對品牌的信任喜愛。最后是對近期活動的介紹。（如圖9所示）

10

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

圖9個人中心原型圖

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

3.1首頁視覺設計與制作

3.1.1設計思路

首頁的設計，首先映入眼簾的是兩張banner圖，活動banner圖選擇的是

以61兒童節(jié)作為活動。結構采用的是左右式，右邊是商品圖展示，左側是文字

描述和活動主題：六一歡樂購。背景采用藍色為主，這種色彩更能吸引兒童的

興趣，裝修了彩帶積木這些童年常見的元素來使主題更加完善。（如圖10所示）

11

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

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

另一張banner圖作為促銷宣傳的作業(yè)，促銷的主題是限時特價，買一送一。

同樣的使用左右結構將主題和產(chǎn)品進行一個區(qū)分，背景使用的音符等裝修是為

了契合產(chǎn)品的屬性。（如圖11所示）

圖11品牌爆品促銷banner

Banner圖之后是優(yōu)惠券區(qū)域，此處的優(yōu)惠券根據(jù)優(yōu)惠力度不同進行區(qū)分。

下面的產(chǎn)品展示區(qū)域為首頁的主體部分，整體的背景采用黃色+一些線條的裝飾。

這種向內(nèi)收縮的線條可以將用戶的目光也向內(nèi)收縮突出主體的商品，而且線條

顯得二維化。主體的商品介紹采用了立體效果的框架，與背景形成了一個對比

更能夠吸引眼球。氣球愛心等裝飾是為了體現(xiàn)青春活力的整體風格。最下方的

品牌介紹利用了無趣工社的吉祥物作為裝飾。（如圖12所示）

12

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

3.1.2設計效果

13

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

圖12首頁效果圖

3.2搜索結果頁視覺設計與制作

3.2.1設計思路

搜索結果頁的布局在上方利用了方框?qū)Y構進行一個劃分，將各種分類給

區(qū)分出來，利用改變顏色的方式表面所處的頁面是所有分類中的小夜燈產(chǎn)品分

類。下方用兩行每行三個產(chǎn)品展示向客戶展現(xiàn)搜索的結果。（如圖13所示）

14

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

3.2.2設計效果

圖13搜索結果頁效果圖

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

商品詳情頁是面向用戶展示產(chǎn)品的重要部分，根據(jù)無趣工社具有創(chuàng)意性的

特點我選擇了產(chǎn)品：創(chuàng)意樂樂杯栽培，進行詳情頁設計。分為了產(chǎn)品主體、商

品信息、左側導航、右側促銷和產(chǎn)品詳情等部分。排版結構集中在網(wǎng)頁的中間

部分，背景顏色選擇淺綠色，給人的感覺舒適清新，也契合產(chǎn)品健康的主體。

整體結構統(tǒng)一，以下是介紹產(chǎn)品詳情內(nèi)容。

3.3.1樂樂杯栽培設計思路

產(chǎn)品詳情內(nèi)容上方以綠色為主，白色為輔。開頭以長圖對產(chǎn)品進行展示，

然后開始介紹產(chǎn)品的特點。利用對用料的介紹對布局進行一個劃分，下方以粉

色為主，綠色為輔，使顏色不單調(diào)，整個頁面更完整。接著向用戶介紹使用方

15

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

法和進一步的特點。最后是產(chǎn)品的參數(shù)展示。（如圖14所示）

3.3.2樂樂杯栽培設計效果

16

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

圖14樂樂杯栽培詳情頁效果圖

17

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

3.4登錄注冊頁視覺設計與制作

3.4.1設計思路

登錄頁的設計采用左右的結構，右邊的圖片是無趣工社的吉祥物。左邊實

現(xiàn)登錄功能，可以使用賬號密碼登錄，也可以在下方選擇第三方軟件登錄。（如

圖15所示）

3.4.2設計效果

圖15登錄注冊頁效果圖

3.5購物車視覺設計與制作

3.5.1設計思路

購物車頁面從上到下，最上面是購物車功能的一個簡述。整體購物車以列

表的方式體現(xiàn)，中間產(chǎn)品部分從左到右分別是商品信息，單價，數(shù)量，小計和

操作。不同的產(chǎn)品直接利用黃色線來進行區(qū)分。最終在產(chǎn)品下面進行總價結算

支付。除了購物結算模塊，整個頁面的最下方還設置了更多產(chǎn)品的推薦，便于

用戶選擇相關的心儀產(chǎn)品。（如圖16所示）

18

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

3.5.2設計效果

圖16購物車頁效果圖

3.6訂單結算頁視覺設計與制作

3.6.1設計思路

訂單結算頁的背景用淺灰黃顏色，最上方的模塊是對訂單流程的一個介紹，

并用紅色標準第一個說明此刻在確認訂單這一步上。下方是選擇收貨地址的模

塊，用單獨的白色方框?qū)⒌刂穭澐殖鰜?。最后的商品信息也同樣用更深色的?/p>

框劃分，簡易的說明訂單的信息，最終在下方進行結算。（如圖17所示）

19

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

3.6.2設計效果

圖17訂單結算頁效果圖

3.7個人中心視覺設計與制作

3.7.1設計思路

個人中心頁的背景同樣使用淺灰黃色，但利用白色將中間1300像素的區(qū)域

劃分出來作為個人中心的主體部分。主體的左側是導航欄，用橙色方塊說明此

刻處于會員中心模塊。右邊是主要內(nèi)容，最上方是用戶的專屬