劉秋楠

(哈爾濱學(xué)院，哈爾濱 150001)

?

淺析李維斯的網(wǎng)頁(yè)布局設(shè)計(jì)

劉秋楠

(哈爾濱學(xué)院，哈爾濱 150001)

網(wǎng)頁(yè)是人們接觸網(wǎng)絡(luò)的連接點(diǎn)，如何更加人性化地將網(wǎng)頁(yè)上的圖片、文字、色彩、動(dòng)畫等視覺(jué)構(gòu)成元素進(jìn)行有機(jī)地整合，是賺取點(diǎn)擊量的重要因素之一。

李維斯；網(wǎng)頁(yè)布局；設(shè)計(jì)

1 網(wǎng)頁(yè)布局設(shè)計(jì)的類型

1.1 上下對(duì)照式布局

“極簡(jiǎn)主義”這種設(shè)計(jì)理念對(duì)設(shè)計(jì)師極其重要。在這種設(shè)計(jì)思想的指導(dǎo)下，李維斯網(wǎng)頁(yè)設(shè)計(jì)者設(shè)計(jì)出來(lái)的作品給人一種直觀的、常用的結(jié)構(gòu)布局形式，這就是上下對(duì)照結(jié)構(gòu)布局。網(wǎng)頁(yè)作品選擇了一些形式考究的文字，大小不等，錯(cuò)落有致，達(dá)到張弛有度的版面視覺(jué)效果。這類頁(yè)面設(shè)計(jì)，是考驗(yàn)網(wǎng)頁(yè)設(shè)計(jì)師設(shè)計(jì)能力的直接方式，也是檢驗(yàn)設(shè)計(jì)師布局能力的戰(zhàn)場(chǎng)。

1.2 “上中下”“三”字布局

“上中下”“三”字結(jié)構(gòu)是在網(wǎng)頁(yè)布局設(shè)計(jì)中常見(jiàn)的一種結(jié)構(gòu)，它的特點(diǎn)很容易辨別，表現(xiàn)力主要著重突出在中間一欄的設(shè)計(jì)上，一般情況下，它會(huì)集中于受眾的視覺(jué)焦點(diǎn)上?！吧现邢隆薄叭弊植季郑３＿\(yùn)用在一些科技類的網(wǎng)絡(luò)站點(diǎn)方面，它可以表達(dá)出更加另類的特征和效果，更重要的是，它能夠體現(xiàn)出現(xiàn)代感和科技感合一的視覺(jué)沖擊力。

1.3 左右對(duì)稱型布局

左右對(duì)稱型結(jié)構(gòu)是在網(wǎng)頁(yè)中常見(jiàn)的形式之一，它的優(yōu)點(diǎn)在于內(nèi)容相對(duì)集中，并且把設(shè)計(jì)表現(xiàn)區(qū)域化，受眾在網(wǎng)絡(luò)上觀看瀏覽的時(shí)候，能夠留下深刻的印象。

2 李維斯案例分析

2.1 從網(wǎng)頁(yè)布局設(shè)計(jì)基本要素看李維斯

2.1.1 “上中下”的首頁(yè)布局，設(shè)計(jì)風(fēng)格大氣。

在美語(yǔ)中，李維斯已經(jīng)成了牛仔褲的代名詞。打開(kāi)李維斯的首頁(yè)，讓人沉靜而淡定。在網(wǎng)頁(yè)的布局設(shè)計(jì)結(jié)構(gòu)中，首頁(yè)采用的是“上中下”的結(jié)構(gòu)，簡(jiǎn)約而大氣。

在奪目的眉頭位置，用明黃色粗線勒出耀眼的里維斯標(biāo)識(shí)，讓人一目了然，夸張的跳出黑底白字“ICONS”，這是它的核心；在中間部分，是網(wǎng)頁(yè)的核心內(nèi)容，一個(gè)男孩，陽(yáng)光大方地跳起來(lái)，雙拳向上跳躍沖擊，這是李維斯內(nèi)在的一種張揚(yáng)和釋放。接下來(lái)，用疊加圖片的形式展現(xiàn)出一種緊湊感，讓人有種想要馬上去購(gòu)買的心理沖動(dòng)；在下面部分，有“風(fēng)尚配飾”，把李維斯的全部產(chǎn)品在這個(gè)網(wǎng)頁(yè)上都展示出來(lái)，如圖1。

圖1 李維斯產(chǎn)品網(wǎng)頁(yè)展示Fig.1 Web page display of Levi′s product

2.1.2 娓娓道來(lái)的品牌故事：“文字和圖片”相結(jié)合

想更好地了解一個(gè)品牌的設(shè)計(jì)理念，可以去看它的品牌故事。李維斯，這個(gè)再熟悉不過(guò)的品牌，用了一個(gè)頁(yè)面，來(lái)簡(jiǎn)單而有力地?cái)⑹鲋墓适隆＞W(wǎng)頁(yè)布局設(shè)計(jì)上采用的是“文字和圖片”相結(jié)合的手法，這種用正方形將它們隔開(kāi)的方式，讓人很安心，左上角的文字，精練而簡(jiǎn)短，講述了里維斯是怎么來(lái)的；后下角與它相對(duì)的，是李維斯最具代表性的產(chǎn)品，用紅色醒目顯眼的筆跡標(biāo)著，容易引起別人的注意。兩幅圖片的選擇，一個(gè)是產(chǎn)品的展示，一個(gè)是模特穿上后的展示，給人一種平面與立體相結(jié)合的展示行為。文字和圖片的結(jié)合，讓你看到這個(gè)頁(yè)面就了解了這個(gè)品牌背后的故事，也了解了它的“奇跡產(chǎn)品”。

2.1.3 李維斯：經(jīng)典無(wú)須太多的語(yǔ)言

這個(gè)網(wǎng)頁(yè)采用的是“上下”結(jié)構(gòu)的設(shè)計(jì)，它的上面，只有幾個(gè)詞：里維斯經(jīng)典，用一條“501”的褲子，裝點(diǎn)著背景，大氣而又低調(diào)。下面部分是簡(jiǎn)單的幾個(gè)電話號(hào)碼，這些字號(hào)加大了的電話號(hào)碼很容易進(jìn)入到視覺(jué)中，這種沖擊力是無(wú)限的。這部分的經(jīng)典設(shè)計(jì)，簡(jiǎn)單、大方，就像李維斯牛仔褲本身一樣，經(jīng)典，永不過(guò)時(shí)，而這背后，無(wú)須太多的語(yǔ)言。

2.2 從網(wǎng)頁(yè)布局設(shè)計(jì)基本原理看李維斯

2.2.1 綻放的紫羅蘭：“潮”你而來(lái)

圖2所示，這個(gè)新款頁(yè)面的顏色，一改之前的深藍(lán)色和黑色的簡(jiǎn)單搭配，在網(wǎng)頁(yè)布局設(shè)計(jì)的“上”部分用透明的、奔放而不失高雅的紫羅蘭色為背景，給人洋溢和奔放的感受。即使不用文字，也可以鑒賞出“潮”的味道，色彩原理中的“四兩撥千斤”之處，就在這里。

圖2 綻放的紫羅蘭Fig.2 Blooming violet

簡(jiǎn)單的色彩運(yùn)用，使得整個(gè)網(wǎng)頁(yè)綻放出了紫羅蘭的美感和動(dòng)感，再看文字的結(jié)合，果真“潮”你而來(lái)。像用了“蒙太奇”的手法一樣，將文字和色彩恰到好處的剪接起來(lái)，背景也用了動(dòng)感十足的剪接，錯(cuò)落而有致。

中間部分是簡(jiǎn)單的人物照片，但是細(xì)致入微，有男士和女士褲子的展示，這種細(xì)微讓受眾感受到了李維斯的細(xì)膩之處。

下面部分從一個(gè)騎自行車人的角度去展現(xiàn)李維斯牛仔褲的質(zhì)量和質(zhì)感。白色的單車也跟整體的網(wǎng)頁(yè)色彩相搭配。色彩的精巧運(yùn)用，讓這個(gè)網(wǎng)頁(yè)舒服又大方，奔放又不失格調(diào)。

2.2.2 張弛有度：對(duì)稱與均衡

這個(gè)網(wǎng)頁(yè)的設(shè)計(jì)內(nèi)容是李維斯的男士經(jīng)典款展示，主題便是“永不過(guò)時(shí)”，對(duì)這個(gè)網(wǎng)頁(yè)設(shè)計(jì)時(shí)，采用了長(zhǎng)方形的豎條圖片拼起來(lái)，即使是長(zhǎng)方形的拼接，也沒(méi)有失衡的感覺(jué)。它采用了網(wǎng)頁(yè)布局設(shè)計(jì)中的“原理”，將“對(duì)稱與均衡”很好地結(jié)合起來(lái)。

慢慢瀏覽，仔細(xì)觀察，每一行的圖片，從整體來(lái)看都是對(duì)稱的，第一行兩個(gè)長(zhǎng)方形圖片對(duì)稱；第二行兩個(gè)正方形對(duì)稱，第三行長(zhǎng)方形的對(duì)稱。這種相對(duì)的對(duì)稱，帶來(lái)了的效果就是視覺(jué)的平衡、內(nèi)心的平衡，不會(huì)有錯(cuò)亂的感受，更不會(huì)有雜亂無(wú)章的煩躁感。均衡的網(wǎng)頁(yè)，生動(dòng)活潑富于變化，有一種運(yùn)動(dòng)中的感覺(jué),具有韻律的美。

2.2.3 性感的詮釋：變化與統(tǒng)一

這組圖片是女士的牛仔褲，它的主題依舊是“永不過(guò)時(shí)”。中間圖片展示的是女人各個(gè)性感部位的節(jié)選和特寫，修長(zhǎng)的長(zhǎng)腿，黝黑色皮膚的腹部，性感的臀部，這些圖片讓女性受眾也感受到了同樣的美感。雖然它表達(dá)的形式不同，用各個(gè)部位勾起人們對(duì)美的感受，其主題是一致的，都是表達(dá)女人穿上里維斯后的性感和美感，這種變化和統(tǒng)一彰顯出設(shè)計(jì)者的用心良苦，是最直接、最有效的廣告。

2.2.4 有條理的美感：對(duì)比與調(diào)和

這個(gè)網(wǎng)頁(yè)的設(shè)計(jì)內(nèi)容簡(jiǎn)單，就是將男士和女士的風(fēng)尚配飾，上下排列開(kāi)來(lái)，雖然看似簡(jiǎn)單，卻又直入人心。上圖中男士的配飾和下圖女士的配飾形成鮮明的對(duì)比，色彩和樣式的擺放，在大體上都有自己相應(yīng)的位置，不會(huì)讓人感覺(jué)很陌生，或者突兀，這就是構(gòu)圖和配圖的講究和搭配。這種內(nèi)在的調(diào)和，不僅使受眾在視覺(jué)上得到美的享受，更在心靈上得到蕩滌。

3 結(jié)語(yǔ)

對(duì)于一個(gè)企業(yè)而言，網(wǎng)頁(yè)布局設(shè)計(jì)是一個(gè)企業(yè)能否取得成功的重要因素。我們?cè)诰W(wǎng)頁(yè)布局設(shè)計(jì)上如果想達(dá)到國(guó)際水平，甚至超越他們，就要不斷地學(xué)習(xí)先進(jìn)的設(shè)計(jì)理念，不斷培養(yǎng)自己的創(chuàng)新思維能力和創(chuàng)造能力。

[1] 王麗莉.網(wǎng)絡(luò)界面的色彩設(shè)計(jì)原則[J].網(wǎng)絡(luò)與信息，2010，(06)：32.

[2] 張帆,羅琦,宮曉東.網(wǎng)頁(yè)界面設(shè)計(jì)藝術(shù)教程[M].北京：人民郵電出版社,2009.

[3] Steve Krug.Don.t Make Me Think[M].蔣芳，譯.北京：機(jī)械工業(yè)出版社,2016.

[4] Patrick McNeil. 網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意書(shū)[M]. 北京：人民郵電出版社，2011.

Analysis on Levi′s web page layout

LIU Qiu-nan

(Harbin University, Harbin 150001, China)

Web page is the connection point of people′s contact with the network, how to integrate the page pictures, text, color, animation and other visual elements organically is an important factor to receive views.

Levi′s; Web page layout; Design

2017-03-28

G622.4

B

1674-8646(2017)10-0152-02