吉普號品牌網(wǎng)店視覺方案設計

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

目錄

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

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

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

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

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

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

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

2.2搜索結果頁..................................................................................................5

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

2.4登錄注冊頁..................................................................................................7

2.5購物車..........................................................................................................7

2.6訂單結算頁..................................................................................................8

2.7個人中心......................................................................................................9

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

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

3.1.1設計思路.............................................................................................10

3.1.2設計效果.............................................................................................12

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

3.2.1設計思路.............................................................................................13

3.2.2設計效果.............................................................................................13

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

3.3.1產(chǎn)品名稱設計思路.............................................................................14

3.3.2產(chǎn)品名稱設計效果.............................................................................15

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

3.4.1設計思路.............................................................................................17

3.4.2設計效果.............................................................................................17

I

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

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

3.5.1設計思路.............................................................................................17

3.5.2設計效果.............................................................................................18

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

3.6.1設計思路.............................................................................................18

3.6.2設計效果.............................................................................................19

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

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

3.7.2設計效果.............................................................................................20

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

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

II

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

吉普號品牌網(wǎng)店視覺方案設計

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

1.1項目背景

隨著網(wǎng)絡技術的發(fā)展，多媒體等電商行業(yè)也在飛速成長的同時，視覺的設

計也在各種行業(yè)里逐漸受到了越來越多的重視，隨著這些年線下的市場飽和的

影響讓競爭越來越激烈，在這樣的趨勢的影響下許多的品牌都不在局限于線下

的銷售，轉(zhuǎn)為線上結合形。譬如怡清源、裕禧禮品正是在這種結合下也紛紛的

建立起自己的品牌獨立線上網(wǎng)店，同樣的擁有一個自己品牌的網(wǎng)店，不僅僅能

增強美觀度和用戶的體驗度，還可以提高品牌的形象和市場的競爭力。

吉普號一直秉持著年輕人極致的玩家精神，深度根植茶山，死磕古老行業(yè)

多年的過程中，獨創(chuàng)了“NPS曬青新茶評測體系”和熟茶發(fā)酵“元”工藝，長期

致力于世界茶源產(chǎn)地——云南的茶產(chǎn)業(yè)產(chǎn)品、體驗、文化的優(yōu)化及革新。該品

牌缺少自己pc端的獨立網(wǎng)店，綜上所述擁有一個屬于自己品牌線上且有買賣功

能的網(wǎng)店是有必要的。

1.2項目需求分析

吉普號的故事起源于世界茶源產(chǎn)地云南，秉持著年輕人極致的玩家精神，

企業(yè)的核心目標是將理性的制茶態(tài)度與買家的探索之心結合，致力于打造喚起

普洱茶發(fā)燒友心底幸福感的茶品。自從該品牌的創(chuàng)立以來，就深受廣大消費者

的喜愛，也得到了業(yè)界的一致好評。企業(yè)一直傳承著普洱茶千百年的工藝和文

化，基于該品牌多年在原產(chǎn)地的深厚積淀，始終堅守產(chǎn)品為王的產(chǎn)品研發(fā)理念。

吉普號雖有自己獨有的公眾號以及官網(wǎng)，但官網(wǎng)缺少可以獨立購買的功能，無

法及時的滿足消費者的需求。在設計企業(yè)網(wǎng)店的時候，希望了解到相關的信息

通過以視覺元素的合理化的應用，可以更加的符合當下消費者的認知和追求，

進行合理優(yōu)化更好的實現(xiàn)視覺設計的效果，添加一些創(chuàng)新的元素，給消費者更

加直觀的帶來信息的反饋，設計過程中可以采用較多的圖文結合的表達形式，

通過對有關元素的調(diào)整，讓其在界面中都處于合理的布局之中，直接將產(chǎn)品所

秉持的理念以圖文搭配的方式傳遞給廣大的消費者，同時也可以讓廣大消費者

們滿足進行瀏覽視覺設計作品時追求的美感。

1

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

1.3色彩設計

提及茶葉往往聯(lián)想到的是穩(wěn)重、歷史悠久等，在該品牌的色彩設計中保持

了品牌的原有包裝色彩特征搭配了素凈雅致的古風背景，針對較為年輕的新消

費的人群則采用了胭脂紅、蜜黃等與之形成了深淺的搭配。紅色可以帶來比較

強的視覺沖擊感，而黃色是屬于給人輕松、活力的感覺，紅黃的搭配畫面飽滿

富有激情且可以營造出親近、隨和的效果，有主有次，既滿足了消費者的需求

又不失品味和檔次，以迎合消費者對于色彩的習慣與心理，同樣增強視覺可以

帶來的沖擊感從而促進用戶的購買欲。（如圖1所示）

圖1標準色

1.4字體規(guī)范

文字設計是我們在視覺設計中的比較細小的一個部分，也是在設計的過程

中容易被忽視掉的一部分。在視覺設計的時候可以考慮兩個因素：辨識度和易

讀性。一個有層次的頁面視覺設計，可以清楚的區(qū)分頁面元素彼此的輕重次要

關系，調(diào)整運用的適當時候，可以相對的提高整個頁面的可讀性。（如圖2所示）

圖2標準字體

2

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

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

2.1首頁

人們經(jīng)常說第一印象很重要，同理那么網(wǎng)店的首頁對品牌來說也是很重要

的，所以我在設計的時候為了突出核心信息，避免太多繁瑣的元素會給用戶帶

來觀感的疲憊，目的是想要給用戶在視覺可以有更好的體驗，從而可以勾起用

戶在瀏覽時有消費的欲望和繼續(xù)瀏覽的想法，所以主要用的都是簡單的布局。

在圖形的排版中，通過圖形與文字的相互匹配，在確?？勺x性的前提下，我預

設通過顏色和字體等設計方式提高精美度。背景采用淡雅的圖片打底，可以突

出主要產(chǎn)品元素的同時，減少界面單一無趣感，還可以根據(jù)產(chǎn)品或品牌的特點

突出頁面的人性化，給用戶帶來更為舒適的體驗。

首先在首頁的爆款推薦部分，運用了折線型的布局將產(chǎn)品圖片按照錯位的

方式進行排序，用戶的視線也會沿著商品的圖片進行折現(xiàn)運動，這樣的布局可

以給用戶一種清爽、利落的感覺具有韻律感。接著店長推薦的部分用的是統(tǒng)一

型的布局，雖然說統(tǒng)一的確是一種比較保守傳統(tǒng)的布局方式，但也是有需要注

意的事項的。譬如，設計的時候為了使得客戶使用時的輕松感，所以在展示產(chǎn)

品圖片的排列設計上并沒有用過多的排列，產(chǎn)品標題也是簡用特點的進行展示。

最后在品牌故事的部分則采用的是隨意型的布局，搭配圖文在隨意中營造出一

種特定的氛圍和感覺。（如圖3所示）

3

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

圖3首頁原型圖

4

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

2.2搜索結果頁

現(xiàn)在大部的用戶沒有足夠的耐心，他們可能不會根據(jù)我們所設計的導航一

個一個的去點擊，找尋他們所要的東西，除非用戶想要的商品可以在導航欄很

容易的點擊尋找到，所以為了確保用戶在這種情況下的丟失，在設計的時候我

明確了這點目標，把用戶最常用的功能放在了顯著的位置，同時考慮頁面的美

觀和創(chuàng)意，以吸引用戶。（如圖4所示）

圖4搜索結果頁原型圖

5

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

2.3商品詳情頁

商品詳情頁是比較重要的界面之一，也是大多的用戶在購買產(chǎn)品時會被用

戶看到的內(nèi)容，對用戶喜不喜歡這件產(chǎn)品，想要了解的用戶了解完之后是否繼

續(xù)選擇購買，都有著非常重要的作用。因此考慮到這一點，我在設計商品詳情

頁面的時候，盡可能的將能夠反映商品特點的內(nèi)容放置在這塊頁面上，這樣能

夠激發(fā)用戶的消費欲望，在樹立信任感的同時打消用戶消費過程中所產(chǎn)生的疑

惑，吸引用戶更加深層次的了解從而促進購買。在給商品進行修飾的時候，避

免多種的修圖裝飾等，以免造成產(chǎn)品與實物商品相差過大，減少后期產(chǎn)生的糾

紛。我在構建設計時覺得商品實物大圖以及細節(jié)的圖片是詳情頁中不可缺失的

一部分，目的是全方面的給用戶展示商品的全貌與細節(jié)。（如圖5所示）

圖5商品詳情頁原型圖

6

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

2.4登錄注冊頁

我覺得登錄頁不僅僅可以實現(xiàn)登錄與注冊這單一的功能，除此之外預設展

示產(chǎn)品、表達歡迎等讓用戶感受到親切感。在右邊登陸部分用了白背景打底，

其余文字素材放在了背景中央，進行了留白的處理，使得整個界面增加了一些

空間感的同時突出顯示重要部分。大背景用純色拼接，加上產(chǎn)品進行裝飾，讓

整個界面簡潔直觀。（如圖6所示）

圖6登錄注冊頁原型圖

2.5購物車

購物車主要的功能是用來顯示用戶所選擇了的商品，我認為在設計的時候

不宜添加過多的裝飾，反而加重用戶視覺上的疲勞。所以整個界面還是保持著

統(tǒng)一淡雅的背景圖，簡潔大方，在全部商品的導航欄中增加了折扣商品的選項，

可以更用戶更加直觀的了解到添加的商品中，哪些是具有優(yōu)惠的。在商品信息

我增加了一個修改的按鍵，目的是讓用戶在想更改商品規(guī)格時可以直接進行修

改，更加的方便。（如圖7所示）

7

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

圖7購物車原型圖

2.6訂單結算頁

訂單結算頁我用線框?qū)⑽淖衷匾?guī)整了起來，把界面的整體感設計成像一

張紙質(zhì)訂單的感覺。在收件人區(qū)域添加了一個下拉按鈕，讓用戶可以容納更多

的信息，確認訂單的部分預設了一個留言區(qū)，可以讓用戶直接給該訂單進行留

言備注，提升用戶使用時的體驗感。（如圖8所示）

8

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

圖8訂單結算頁原型圖

2.7個人中心

個人中心的頁面用來顯示用戶賬號的相關信息，在左側的區(qū)域用了一個列

表式的導航框，可以給用戶帶來層次展現(xiàn)清晰，靈活性高感受。在右側的區(qū)域

9

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

利用搭配圖片來進行突出，圖片相比于圖標、文字是最容易吸引用戶點擊的。

會員權益用宮格式進行的擺列，頁面視覺效果更好，提升用戶視覺上面的觀感。

（如圖9所示）

圖9個人中心原型圖

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

3.1首頁視覺設計與制作

3.1.1設計思路

結合吉普號品牌，基于長久的銷售利益，我在該Banner中的文案重復使用

了“好茶”一詞組句進行排版，其目的是為了加強用戶對企業(yè)、品牌或者服務

的印象，向用戶傳達一種長期不變的企業(yè)觀念。以中線為基準，將版面分為了

10

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

左右倆個設計區(qū)域，因為主要的色彩是采用淡雅的風格，所以為使留白不會過

多顯得空曠，在中間加入了明顯的文字元素從而增加畫面的平衡感。（如圖10

所示）

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

促銷的廣告目的就是為了吸引用戶，引起用戶對其購買的興趣。在設計創(chuàng)

作時我將標題重點放在了版面靠中的位置，通過對文字進行交錯的排列設計，

讓文字更加的顯目從而吸用戶的注意，后面的背景中加了幾片葉子進行了點綴，

增加畫面感，將產(chǎn)品圖像的色調(diào)做了一下調(diào)整，讓圖像的顏色與banner整體的

畫面感可以相協(xié)調(diào)。（如圖11所示）

圖11品牌爆品促銷banner

首頁整體在方案設計中，根據(jù)和諧、簡約與突出重點的原則，將不同的色

彩和元素進行組合、搭配形成一個悅目畫面。（如圖12所示）

11

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

3.1.2設計效果

圖12首頁效果圖

12

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

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

3.2.1設計思路

結合原型圖的設計思路，大部的用戶沒有足夠的耐心，所以為了確保用戶

在這種情況下的丟失，在設計搜索頁的時候，第一欄的位置則設置的就是搜索

框，搜索按鈕中使用了紅色加強注意，精確查找的導航欄以最為簡單明了的列

表方式進行的排列。設計時保持了整個界面的統(tǒng)一性，畫面的整體舒適不雜亂，

沒有設用過多的文字和元素，做到清晰且有重點。頁面整體的空間有限所搜索

結果商品的排列方式可以直接影響到用戶的視覺體驗，雜亂的呈現(xiàn)方式也會直

接的降低潛在用戶的購買欲望，所以我在搜索結果產(chǎn)品，產(chǎn)品圖以大圖的方式

進行呈現(xiàn)，給用戶更加簡單直觀的感覺。搜索結果的下面添加了銷量產(chǎn)品的推

薦展示，增加潛在用戶的購買幾率。（如圖13所示）

13

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

3.2.2設計效果

圖13搜索結果頁效果圖

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

產(chǎn)品詳情頁是比較重要的頁面之一。在設計詳情頁的時我把主體內(nèi)容分成

了三個區(qū)域，產(chǎn)品主圖及相關信息、左側懸掛導航欄、產(chǎn)品詳情內(nèi)容區(qū)來進行

設計。結合所選的品牌特性，所以在風格方面采用了原胭脂紅和代表沉穩(wěn)、熱

愛的暗紅色為主色調(diào)相結合形成一個漸變的背景，在原本的胭脂紅基礎上降低

了色彩上的名度。隨著色彩深淺的變化，暗紅色可以營造處深邃復古的故事氛

圍感。

3.3.1吉普號設計思路

現(xiàn)在的生活比較偏快節(jié)奏，絕大多數(shù)的用戶在瀏覽的時候都沒有太多的耐

心去看成片的圖片或者我呢子，所以在設計的時候我用的簡約風格，讓用戶在

14

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

瀏覽的時候可以較快速的了解到所想要了解的內(nèi)容。在設計焦點圖的時候，給

產(chǎn)品添加了倒影與一塊純色背景充當展示臺的作用，使得畫面的整體更加的空

間感，在結尾處加了一個小三角銜接，目的是減少兩塊不同的內(nèi)容部分連接處

的突兀、不和諧。在整體畫滿的邊緣用了一個金色線框裝飾，使得整體更加整

潔美觀。最后在結尾處安插了一個返回頂部的按鈕，方便用戶在了解結束之后

可以快速的回到頁面頂端。（如圖14所示）

15

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

3.3.2吉普號設計效果

16

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

圖14吉普號詳情頁效果圖

17

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

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

3.4.1設計思路

在設計宗旨是為企業(yè)提供一張簡潔、美觀、便于操作的界面，所以采用了

現(xiàn)代簡約風格，運用了大面積的黃色與少量的淺灰色進行搭配，符合產(chǎn)品特點

和企業(yè)形象，讓用戶在使用時能夠快速的找到所需的功能，提高用戶體驗感。

部分元素采用了與背景反差較大的紅色作為點綴，以突出重點。（如圖15所示）

3.4.2設計效果

圖15登錄注冊頁效果圖

3.5購物車視覺設計與制作

3.5.1設計思路

購物車的界面，一如既往的采用了簡單、直觀和易于用戶感官的布局與結

構。在導航欄的交互背景上使用了蒙版對其進行了淡化擦除，使其本身的顏色

在界面的整體效果上不會太搶眼。在呈現(xiàn)文字素材的矩形背景上添加了斜角陰

18

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

影，視覺效果看起來較為新穎、有亮點。（如圖16所示）

3.5.2設計效果

圖16購物車效果圖

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

3.6.1設計思路

根據(jù)原型圖的想法設計像紙質(zhì)訂單的視覺效果。為了讓界面看著清晰、簡

潔、有條理所以所有的邊框線都是用的細邊框，這樣不會給用戶在使用時一種

19

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

莫名的沉重感，設計的同時考慮到了界面的顏色元素與文字的搭配排版設計，

讓用戶易于查看與理解。收件人信息里右下角的邊框勾選并沒有直接搭配使用，

而是做了一個鏤空的設計，使其多了一絲靈動。在留言區(qū)域銜接搭配了主色調(diào)

作為背景色的同時做了一個淡化的處理，突顯內(nèi)容的同時看上其與整體不相違

和，也讓頁面整體的視覺感更優(yōu)。（如圖17所示）

3.6.2設計效果

圖17訂單結算頁效果圖

20

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

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

3.7.1設計思路

從用戶的角度觸發(fā)考慮，習慣、喜歡與需求等將這些元素融入到設計中。

在懸掛的列表中所選擇的按鈕背景，所采用的靈感是根據(jù)按鍵按下時起始段的

角度最小越往后越大，就像鋼琴的按鍵一樣。會員積分的背景框采用了傾斜設

計，打破了橫平豎直的視覺思維，斜線與橫平豎直的線形成對比，可以為畫面

增加創(chuàng)意性，讓畫面不那么的平淡，提升張力。（如圖18所示）

3.7.2設計效果

圖18個人中心效果圖