吉普號(hào)品牌網(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商品詳情頁..................................................................................................6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.4登錄注冊(cè)頁視覺設(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購物車視覺設(shè)計(jì)與制作............................................................................17

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

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

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

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

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

3.7個(gè)人中心視覺設(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)店視覺方案設(shè)計(jì)

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

1.1項(xiàng)目背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

們滿足進(jìn)行瀏覽視覺設(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)的人群則采用了胭脂紅、蜜黃等與之形成了深淺的搭配。紅色可以帶來比較

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

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

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

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

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

1.4字體規(guī)范

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

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

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

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

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

2

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

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

2.1首頁

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

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

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

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

在圖形的排版中，通過圖形與文字的相互匹配，在確保可讀性的前提下，我預(yù)

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

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

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

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

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

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

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

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

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

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

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

3

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

圖3首頁原型圖

4

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

2.2搜索結(jié)果頁

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

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

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

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

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

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

5

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

2.3商品詳情頁

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

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

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

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

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

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

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

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

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

圖5商品詳情頁原型圖

6

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

2.4登錄注冊(cè)頁

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

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

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

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

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

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

2.5購物車

購物車主要的功能是用來顯示用戶所選擇了的商品，我認(rèn)為在設(shè)計(jì)的時(shí)候

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

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

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

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

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

7

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

圖7購物車原型圖

2.6訂單結(jié)算頁

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

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

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

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

8

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

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

2.7個(gè)人中心

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

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

9

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

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

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

（如圖9所示）

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

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

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

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

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

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

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

10

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

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

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

所示）

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

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

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

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

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

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

圖11品牌爆品促銷banner

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

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

11

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

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

圖12首頁效果圖

12

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

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

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

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

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

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

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

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

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

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

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

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

13

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

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

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

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

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

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

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

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

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

圍感。

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

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

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

14

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

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

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

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

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

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

可以快速的回到頁面頂端。（如圖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)詳情頁效果圖

17

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18

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

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

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

圖16購物車效果圖

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

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

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

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

19

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

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

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

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

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

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

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

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

20

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

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

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

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

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

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

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

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

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

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