淺析李維斯的網(wǎng)頁布局設計

劉秋楠

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

?

淺析李維斯的網(wǎng)頁布局設計

劉秋楠

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

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

李維斯；網(wǎng)頁布局；設計

1 網(wǎng)頁布局設計的類型

1.1 上下對照式布局

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

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

“上中下”“三”字結構是在網(wǎng)頁布局設計中常見的一種結構，它的特點很容易辨別，表現(xiàn)力主要著重突出在中間一欄的設計上，一般情況下，它會集中于受眾的視覺焦點上。“上中下”“三”字布局，常常運用在一些科技類的網(wǎng)絡站點方面，它可以表達出更加另類的特征和效果，更重要的是，它能夠體現(xiàn)出現(xiàn)代感和科技感合一的視覺沖擊力。

1.3 左右對稱型布局

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

2 李維斯案例分析

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

2.1.1 “上中下”的首頁布局，設計風格大氣。

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

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

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

2.1.2 娓娓道來的品牌故事：“文字和圖片”相結合

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

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

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

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

2.2.1 綻放的紫羅蘭：“潮”你而來

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

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

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

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

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

2.2.2 張弛有度：對稱與均衡

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

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

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

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

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

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

3 結語

對于一個企業(yè)而言，網(wǎng)頁布局設計是一個企業(yè)能否取得成功的重要因素。我們在網(wǎng)頁布局設計上如果想達到國際水平，甚至超越他們，就要不斷地學習先進的設計理念，不斷培養(yǎng)自己的創(chuàng)新思維能力和創(chuàng)造能力。

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

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

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

[4] Patrick McNeil. 網(wǎng)頁設計創(chuàng)意書[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