吉普號(hào)品牌網(wǎng)店視覺(jué)方案設(shè)計(jì)

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

目錄

1網(wǎng)店視覺(jué)設(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)店頁(yè)面原型圖分析與設(shè)計(jì)方案............................................................................3

2.1首頁(yè)..............................................................................................................3

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

2.3商品詳情頁(yè)..................................................................................................6

2.4登錄注冊(cè)頁(yè)..................................................................................................7

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

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

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

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

3.1首頁(yè)視覺(jué)設(shè)計(jì)與制作................................................................................10

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

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

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

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

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

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

3.3.1產(chǎn)品名稱(chēng)設(shè)計(jì)思路.............................................................................14

3.3.2產(chǎn)品名稱(chēng)設(shè)計(jì)效果.............................................................................15

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

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

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

I

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

3.5購(gòu)物車(chē)視覺(jué)設(shè)計(jì)與制作............................................................................17

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

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

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

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

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

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

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

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

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

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

II

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

吉普號(hào)品牌網(wǎng)店視覺(jué)方案設(shè)計(jì)

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

1.1項(xiàng)目背景

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

計(jì)也在各種行業(yè)里逐漸受到了越來(lái)越多的重視，隨著這些年線(xiàn)下的市場(chǎng)飽和的

影響讓競(jìng)爭(zhēng)越來(lái)越激烈，在這樣的趨勢(shì)的影響下許多的品牌都不在局限于線(xiàn)下

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

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

增強(qiáng)美觀度和用戶(hù)的體驗(yàn)度，還可以提高品牌的形象和市場(chǎng)的競(jìng)爭(zhēng)力。

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

多年的過(guò)程中，獨(dú)創(chuàng)了“NPS曬青新茶評(píng)測(cè)體系”和熟茶發(fā)酵“元”工藝，長(zhǎng)期

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

牌缺少自己pc端的獨(dú)立網(wǎng)店，綜上所述擁有一個(gè)屬于自己品牌線(xiàn)上且有買(mǎi)賣(mài)功

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

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

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

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

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

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

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

吉普號(hào)雖有自己獨(dú)有的公眾號(hào)以及官網(wǎng)，但官網(wǎng)缺少可以獨(dú)立購(gòu)買(mǎi)的功能，無(wú)

法及時(shí)的滿(mǎn)足消費(fèi)者的需求。在設(shè)計(jì)企業(yè)網(wǎng)店的時(shí)候，希望了解到相關(guān)的信息

通過(guò)以視覺(jué)元素的合理化的應(yīng)用，可以更加的符合當(dāng)下消費(fèi)者的認(rèn)知和追求，

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

加直觀的帶來(lái)信息的反饋，設(shè)計(jì)過(guò)程中可以采用較多的圖文結(jié)合的表達(dá)形式，

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

秉持的理念以圖文搭配的方式傳遞給廣大的消費(fèi)者，同時(shí)也可以讓廣大消費(fèi)者

們滿(mǎn)足進(jìn)行瀏覽視覺(jué)設(shè)計(jì)作品時(shí)追求的美感。

1

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

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

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

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

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

強(qiáng)的視覺(jué)沖擊感，而黃色是屬于給人輕松、活力的感覺(jué)，紅黃的搭配畫(huà)面飽滿(mǎn)

富有激情且可以營(yíng)造出親近、隨和的效果，有主有次，既滿(mǎn)足了消費(fèi)者的需求

又不失品味和檔次，以迎合消費(fèi)者對(duì)于色彩的習(xí)慣與心理，同樣增強(qiáng)視覺(jué)可以

帶來(lái)的沖擊感從而促進(jìn)用戶(hù)的購(gòu)買(mǎi)欲。（如圖1所示）

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

1.4字體規(guī)范

文字設(shè)計(jì)是我們?cè)谝曈X(jué)設(shè)計(jì)中的比較細(xì)小的一個(gè)部分，也是在設(shè)計(jì)的過(guò)程

中容易被忽視掉的一部分。在視覺(jué)設(shè)計(jì)的時(shí)候可以考慮兩個(gè)因素：辨識(shí)度和易

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

關(guān)系，調(diào)整運(yùn)用的適當(dāng)時(shí)候，可以相對(duì)的提高整個(gè)頁(yè)面的可讀性。（如圖2所示）

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

2

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

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

2.1首頁(yè)

人們經(jīng)常說(shuō)第一印象很重要，同理那么網(wǎng)店的首頁(yè)對(duì)品牌來(lái)說(shuō)也是很重要

的，所以我在設(shè)計(jì)的時(shí)候?yàn)榱送怀龊诵男畔ⅲ苊馓喾爆嵉脑貢?huì)給用戶(hù)帶

來(lái)觀感的疲憊，目的是想要給用戶(hù)在視覺(jué)可以有更好的體驗(yàn)，從而可以勾起用

戶(hù)在瀏覽時(shí)有消費(fèi)的欲望和繼續(xù)瀏覽的想法，所以主要用的都是簡(jiǎn)單的布局。

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

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

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

突出頁(yè)面的人性化，給用戶(hù)帶來(lái)更為舒適的體驗(yàn)。

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

方式進(jìn)行排序，用戶(hù)的視線(xiàn)也會(huì)沿著商品的圖片進(jìn)行折現(xiàn)運(yùn)動(dòng)，這樣的布局可

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

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

意的事項(xiàng)的。譬如，設(shè)計(jì)的時(shí)候?yàn)榱耸沟每蛻?hù)使用時(shí)的輕松感，所以在展示產(chǎn)

品圖片的排列設(shè)計(jì)上并沒(méi)有用過(guò)多的排列，產(chǎn)品標(biāo)題也是簡(jiǎn)用特點(diǎn)的進(jìn)行展示。

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

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

3

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

圖3首頁(yè)原型圖

4

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

2.2搜索結(jié)果頁(yè)

現(xiàn)在大部的用戶(hù)沒(méi)有足夠的耐心，他們可能不會(huì)根據(jù)我們所設(shè)計(jì)的導(dǎo)航一

個(gè)一個(gè)的去點(diǎn)擊，找尋他們所要的東西，除非用戶(hù)想要的商品可以在導(dǎo)航欄很

容易的點(diǎn)擊尋找到，所以為了確保用戶(hù)在這種情況下的丟失，在設(shè)計(jì)的時(shí)候我

明確了這點(diǎn)目標(biāo)，把用戶(hù)最常用的功能放在了顯著的位置，同時(shí)考慮頁(yè)面的美

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

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

5

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

2.3商品詳情頁(yè)

商品詳情頁(yè)是比較重要的界面之一，也是大多的用戶(hù)在購(gòu)買(mǎi)產(chǎn)品時(shí)會(huì)被用

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

續(xù)選擇購(gòu)買(mǎi)，都有著非常重要的作用。因此考慮到這一點(diǎn)，我在設(shè)計(jì)商品詳情

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

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

惑，吸引用戶(hù)更加深層次的了解從而促進(jìn)購(gòu)買(mǎi)。在給商品進(jìn)行修飾的時(shí)候，避

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

紛。我在構(gòu)建設(shè)計(jì)時(shí)覺(jué)得商品實(shí)物大圖以及細(xì)節(jié)的圖片是詳情頁(yè)中不可缺失的

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

圖5商品詳情頁(yè)原型圖

6

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

2.4登錄注冊(cè)頁(yè)

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

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

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

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

整個(gè)界面簡(jiǎn)潔直觀。（如圖6所示）

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

2.5購(gòu)物車(chē)

購(gòu)物車(chē)主要的功能是用來(lái)顯示用戶(hù)所選擇了的商品，我認(rèn)為在設(shè)計(jì)的時(shí)候

不宜添加過(guò)多的裝飾，反而加重用戶(hù)視覺(jué)上的疲勞。所以整個(gè)界面還是保持著

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

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

我增加了一個(gè)修改的按鍵，目的是讓用戶(hù)在想更改商品規(guī)格時(shí)可以直接進(jìn)行修

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

7

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

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

2.6訂單結(jié)算頁(yè)

訂單結(jié)算頁(yè)我用線(xiàn)框?qū)⑽淖衷匾?guī)整了起來(lái)，把界面的整體感設(shè)計(jì)成像一

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

的信息，確認(rèn)訂單的部分預(yù)設(shè)了一個(gè)留言區(qū)，可以讓用戶(hù)直接給該訂單進(jìn)行留

言備注，提升用戶(hù)使用時(shí)的體驗(yàn)感。（如圖8所示）

8

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

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

2.7個(gè)人中心

個(gè)人中心的頁(yè)面用來(lái)顯示用戶(hù)賬號(hào)的相關(guān)信息，在左側(cè)的區(qū)域用了一個(gè)列

表式的導(dǎo)航框，可以給用戶(hù)帶來(lái)層次展現(xiàn)清晰，靈活性高感受。在右側(cè)的區(qū)域

9

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

利用搭配圖片來(lái)進(jìn)行突出，圖片相比于圖標(biāo)、文字是最容易吸引用戶(hù)點(diǎn)擊的。

會(huì)員權(quán)益用宮格式進(jìn)行的擺列，頁(yè)面視覺(jué)效果更好，提升用戶(hù)視覺(jué)上面的觀感。

（如圖9所示）

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

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

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

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

結(jié)合吉普號(hào)品牌，基于長(zhǎng)久的銷(xiāo)售利益，我在該Banner中的文案重復(fù)使用

了“好茶”一詞組句進(jìn)行排版，其目的是為了加強(qiáng)用戶(hù)對(duì)企業(yè)、品牌或者服務(wù)

的印象，向用戶(hù)傳達(dá)一種長(zhǎng)期不變的企業(yè)觀念。以中線(xiàn)為基準(zhǔn)，將版面分為了

10

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

左右倆個(gè)設(shè)計(jì)區(qū)域，因?yàn)橹饕纳适遣捎玫诺娘L(fēng)格，所以為使留白不會(huì)過(guò)

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

所示）

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

促銷(xiāo)的廣告目的就是為了吸引用戶(hù)，引起用戶(hù)對(duì)其購(gòu)買(mǎi)的興趣。在設(shè)計(jì)創(chuàng)

作時(shí)我將標(biāo)題重點(diǎn)放在了版面靠中的位置，通過(guò)對(duì)文字進(jìn)行交錯(cuò)的排列設(shè)計(jì)，

讓文字更加的顯目從而吸用戶(hù)的注意，后面的背景中加了幾片葉子進(jìn)行了點(diǎn)綴，

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

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

圖11品牌爆品促銷(xiāo)banner

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

彩和元素進(jìn)行組合、搭配形成一個(gè)悅目畫(huà)面。（如圖12所示）

11

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

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

圖12首頁(yè)效果圖

12

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

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

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

結(jié)合原型圖的設(shè)計(jì)思路，大部的用戶(hù)沒(méi)有足夠的耐心，所以為了確保用戶(hù)

在這種情況下的丟失，在設(shè)計(jì)搜索頁(yè)的時(shí)候，第一欄的位置則設(shè)置的就是搜索

框，搜索按鈕中使用了紅色加強(qiáng)注意，精確查找的導(dǎo)航欄以最為簡(jiǎn)單明了的列

表方式進(jìn)行的排列。設(shè)計(jì)時(shí)保持了整個(gè)界面的統(tǒng)一性，畫(huà)面的整體舒適不雜亂，

沒(méi)有設(shè)用過(guò)多的文字和元素，做到清晰且有重點(diǎn)。頁(yè)面整體的空間有限所搜索

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

接的降低潛在用戶(hù)的購(gòu)買(mǎi)欲望，所以我在搜索結(jié)果產(chǎn)品，產(chǎn)品圖以大圖的方式

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

薦展示，增加潛在用戶(hù)的購(gòu)買(mǎi)幾率。（如圖13所示）

13

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

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

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

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

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

了三個(gè)區(qū)域，產(chǎn)品主圖及相關(guān)信息、左側(cè)懸掛導(dǎo)航欄、產(chǎn)品詳情內(nèi)容區(qū)來(lái)進(jìn)行

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

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

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

圍感。

3.3.1吉普號(hào)設(shè)計(jì)思路

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

心去看成片的圖片或者我呢子，所以在設(shè)計(jì)的時(shí)候我用的簡(jiǎn)約風(fēng)格，讓用戶(hù)在

14

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

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

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

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

的突兀、不和諧。在整體畫(huà)滿(mǎn)的邊緣用了一個(gè)金色線(xiàn)框裝飾，使得整體更加整

潔美觀。最后在結(jié)尾處安插了一個(gè)返回頂部的按鈕，方便用戶(hù)在了解結(jié)束之后

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

15

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

3.3.2吉普號(hào)設(shè)計(jì)效果

16

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

圖14吉普號(hào)詳情頁(yè)效果圖

17

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

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

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

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

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

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

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

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

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

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

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

購(gòu)物車(chē)的界面，一如既往的采用了簡(jiǎn)單、直觀和易于用戶(hù)感官的布局與結(jié)

構(gòu)。在導(dǎo)航欄的交互背景上使用了蒙版對(duì)其進(jìn)行了淡化擦除，使其本身的顏色

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

18

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

影，視覺(jué)效果看起來(lái)較為新穎、有亮點(diǎn)。（如圖16所示）

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

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

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

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

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

潔、有條理所以所有的邊框線(xiàn)都是用的細(xì)邊框，這樣不會(huì)給用戶(hù)在使用時(shí)一種

19

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

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

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

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

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

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

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

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

20

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

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

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

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

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

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

計(jì)，打破了橫平豎直的視覺(jué)思維，斜線(xiàn)與橫平豎直的線(xiàn)形成對(duì)比，可以為畫(huà)面

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

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

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