觸屏版
全國(guó)服務(wù)熱線:0571-87205688
埃及金字塔、蒙娜麗莎、Twitter、百事可樂(lè),這些事物有什么共同點(diǎn)?答案很簡(jiǎn)單,看似風(fēng)馬牛不相及的它們?cè)谠O(shè)計(jì)時(shí)都遵循了黃金比例的原則。這也正是我們今天要探究的主題:黃金比例。由于黃金比例具備獨(dú)特的美學(xué)價(jià)值,在多個(gè)領(lǐng)域有著廣泛地應(yīng)用:數(shù)學(xué)、物理、建筑、美術(shù)甚至是音樂(lè)。除此以外,黃金比例的栗子在日常生活和大自然中也比比皆是:舞臺(tái)報(bào)幕員不是站在舞臺(tái)的正中央,而是一側(cè);從一棵嫩枝的頂端向下看,它的葉子是按照黃金比例排列著的。不過(guò),很少有人將黃金比例和網(wǎng)站建設(shè)結(jié)合在一起,其實(shí)在網(wǎng)頁(yè)設(shè)計(jì)之中使用黃金比例可以帶來(lái)無(wú)與倫比的比例性、協(xié)調(diào)性和藝術(shù)性,給網(wǎng)站賦予獨(dú)特的美感。今天小飛就帶大家了解一下什么是黃金比例,在網(wǎng)站可以怎樣應(yīng)用黃金比例以及一些優(yōu)秀的范例,希望能給大家一些啟發(fā)和靈感。
什么是黃金比例?
通常我們會(huì)用線段分割來(lái)解釋這個(gè)概念:把一條線段分割為兩部分,較短部分與較長(zhǎng)部分長(zhǎng)度之比等于較長(zhǎng)部分與整體長(zhǎng)度之比,其比值是一個(gè)無(wú)理數(shù),取其前三位數(shù)字的近似值是0.618。由于這樣的比例常常能帶來(lái)設(shè)計(jì)的和諧與美感,因此人們稱(chēng)它為"黃金"比例(或黃金分割、中外比等)。下圖中的公式可以給大家作一個(gè)參考:
黃金比例的運(yùn)用已經(jīng)有幾千年的歷史了,從埃及金字塔到雅典的帕特農(nóng)神廟,從米開(kāi)朗琪羅的西斯廷教堂到達(dá)芬奇的蒙娜麗莎,從Twitter的Logo設(shè)計(jì)到百事的Logo設(shè)計(jì),甚至人臉都遵循這個(gè)數(shù)字比例。事實(shí)上,我們似乎先天就更容易為擁有黃金比例的物體和圖片所吸引。這種反應(yīng)幾乎是下意識(shí)的,我們的大腦甚至?xí)?duì)眼睛看到的事物進(jìn)行微調(diào)以接近黃金比例,加深自身對(duì)事物的記憶和印象。
黃金比例還可以應(yīng)用在圖形之中。隨便拿出一個(gè)正方形,將它的一邊放大1.618倍,這樣一個(gè)黃金比例的矩形就出現(xiàn)了。當(dāng)你將原來(lái)的正方形和新的矩形重疊時(shí),你能更加清晰直觀的看清黃金比例的存在。
如果你繼續(xù)以這樣的方式向圖片右側(cè)的矩形中填充正方形,那么你填充的正方形會(huì)越來(lái)越小。當(dāng)你沿每個(gè)正方形的對(duì)角線從大到小依次畫(huà)出拱形時(shí),你會(huì)繪制出一條螺旋狀的曲線(如下圖所示),這條曲線通常被稱(chēng)為黃金螺旋,或斐波那契螺旋線。有趣的是,自然界中存在許多斐波那契螺旋線的圖案:蕨類(lèi)植物的莖、鮮花、貝殼,甚至颶風(fēng)。這也就是為什么我們常會(huì)覺(jué)得這些事物在視覺(jué)上有著無(wú)法言語(yǔ)的吸引力。
我們還可以更進(jìn)一步,在每個(gè)正方形中內(nèi)切一個(gè)圓形,這些圓形是遵循0.618的黃金比例的,是比例最佳的圓形。
在網(wǎng)頁(yè)設(shè)計(jì)中如何使用黃金比例?
在上面的段落中我們對(duì)于黃金比例和黃金螺旋已有了一定的認(rèn)識(shí),獲得了遵循黃金比例的矩形、圓形,那么接下來(lái)我們就看看在網(wǎng)站中如何使用提升設(shè)計(jì)美感。由于黃金比例的呈現(xiàn)形式多樣,我們可以將它用到布局、間距、內(nèi)容、圖像和圖形等多個(gè)元素之中。
1、布局:將網(wǎng)頁(yè)尺寸設(shè)置為黃金比例
在布局中使用黃金比例很有效,關(guān)鍵點(diǎn)就在于控制比例和尺寸,把握好0.618的黃金比例。舉個(gè)例子,如果你使用960px的寬度布局時(shí),將它乘以0.618就可以得到594px,這就是網(wǎng)頁(yè)布局的高度。在此基礎(chǔ)之上,你可以將整個(gè)布局劃分為一欄正方形,一欄矩形,更加直觀的呈現(xiàn)黃金分割,讓網(wǎng)站更富魅力。
這種兩欄式布局在網(wǎng)頁(yè)設(shè)計(jì)上很實(shí)用,不少網(wǎng)站都選擇這種設(shè)計(jì)方法。就連大家熟知的國(guó)家地理雜志也是這樣,整個(gè)頁(yè)面看上去整潔、易讀、各項(xiàng)元素組織有序、層次分明,用戶(hù)在瀏覽時(shí)也會(huì)更加順暢。
2、間距:使用黃金螺旋布局
間距和留白一樣,是設(shè)計(jì)中十分關(guān)鍵的元素。合理的間距有利于突出網(wǎng)站核心內(nèi)容,讓網(wǎng)站布局更加協(xié)調(diào),而不恰當(dāng)?shù)拈g距則會(huì)影響用戶(hù)體驗(yàn),影響網(wǎng)站的品牌形象。與此同時(shí),在網(wǎng)站中做好合理間距常常需要花費(fèi)很多時(shí)間。那么怎樣才能快捷、高效的安排網(wǎng)頁(yè)間距呢?使用黃金螺旋就是一種很好的選擇,借助圖形合理放置每項(xiàng)元素,讓網(wǎng)站間距按精心計(jì)算過(guò)的比例排版,而不單單是直覺(jué)。另外,如果你正在同時(shí)處理多個(gè)元素,你也可以將黃金螺旋分層,讓網(wǎng)頁(yè)的比例設(shè)計(jì)更加協(xié)調(diào)。
Moodley 設(shè)計(jì)工作室就是一個(gè)栗子,它為布雷根茨藝術(shù)節(jié)設(shè)計(jì)了海報(bào)、節(jié)目單以及Logo等品牌標(biāo)識(shí)。節(jié)目單的整體設(shè)計(jì)采用了攝影圖片拼貼的方式,有大量的留白,而其中各種元素的設(shè)計(jì)比例、位置和留白就是借助黃金螺旋來(lái)布置的。
新加坡的Lemon Graphic設(shè)計(jì)公司在給Terkaya財(cái)富管理公司進(jìn)行視覺(jué)形象設(shè)計(jì)時(shí)同樣也借助了黃金螺旋的布局方式??ㄆ系娜齻€(gè)元素:小鷹、文本和大鷹的位置擺放都是有合理的依據(jù)的。
3、內(nèi)容:沿著黃金螺旋的軌跡
除了借助黃金螺旋安排網(wǎng)站的間距以外,我們還可以運(yùn)用它來(lái)決定網(wǎng)頁(yè)內(nèi)容的位置。根據(jù)黃金螺旋的定理來(lái)看,人眼總是會(huì)不自覺(jué)的注意螺旋處的中心,因此我們應(yīng)該重視螺旋的中心地帶,將用戶(hù)可能感興趣或最重要的內(nèi)容放在此處,讓訪客在獲取信息上更加容易。另外,比較重要的信息要放在螺旋線的內(nèi)部,這樣比較醒目。下面是有關(guān)的三個(gè)栗子:
以國(guó)家地理雜志的網(wǎng)頁(yè)為例。如果你仔細(xì)觀察它的首頁(yè),你就會(huì)發(fā)現(xiàn)它的內(nèi)容就是按照黃金螺旋的軌跡來(lái)安排的。由于人們可能會(huì)下意識(shí)注意這個(gè)軌跡的中心,因此國(guó)家地理雜志在這放置了它的logo,再次突出強(qiáng)調(diào)品牌形象。網(wǎng)站中的其他重要元素也為螺旋線所囊括。
下面Tim Roussilhe設(shè)計(jì)師的網(wǎng)站也是一樣。雖然網(wǎng)站的內(nèi)容很多,信息量很大,但網(wǎng)站的整個(gè)布局顯得十分緊密、信息組織很有條理,元素多而不亂。左上角的內(nèi)容就是跟隨黃金螺旋的軌跡來(lái)設(shè)計(jì)的,訪客在登入的一瞬間會(huì)先看到"Bonjour My Name is Tim"的文字,然后是詳細(xì)的文本,菜單按鈕,再到左上角的Logo。在用戶(hù)注意到充分的留白之前他們已經(jīng)瀏覽完了所有必要的信息,這正是設(shè)計(jì)的目的所在。
Helms 工作室 為Fullsteam Brewery進(jìn)行品牌設(shè)計(jì)時(shí),也同樣借助黃金螺旋安排網(wǎng)站內(nèi)容。各種不同的元素被放在不同的區(qū)塊中,訪客可以沿著中心人物、印章、ABV字符、產(chǎn)商所在地的軌跡去瀏覽。這樣的瀏覽體驗(yàn)很自然、方便。
4、圖片:黃金比例和三分法
圖片的構(gòu)成也是很重要的,無(wú)論圖片是服務(wù)于信息傳遞或美感呈現(xiàn)的目的。在圖片中使用黃金比例和三分法可以使用線條和交點(diǎn)構(gòu)建視覺(jué)中心,讓它們更吸人眼球,更能突出重要的信息。在圖片中使用黃金比例是指將圖片分成3個(gè)不相等的區(qū)塊,3個(gè)區(qū)塊的比例應(yīng)該是1:0.618:1,也就是說(shuō)第一列和第三列的寬度為1,而第二列的寬度為0.618,水平區(qū)域也是同理。這樣一來(lái),我們可以通過(guò)這些線條或交點(diǎn)合理安排圖片的位置和大小,看看怎樣更能吸引用戶(hù)注意力,增添趣味和活力。除了黃金比例以外,我們還可以利用三分法對(duì)圖片進(jìn)行切割。三分法從某種意義上來(lái)說(shuō)算是黃金分割的一種變體,在使用上更加簡(jiǎn)單。它是將圖片三等分,比例為1:1:1,這樣的圖片是完全平衡和均勻的。這樣我們可以將重要的元素圍繞中心的矩形排列開(kāi)來(lái)。
Complex雜志的封面是女星Solange Knowles的特寫(xiě)照,它就使用了黃金比例來(lái)合理安排圖片中正空間和負(fù)空間,人物的鼻子和眼睛正好落在線條的交點(diǎn)處,是吸引訪客注意的理想位置。
Jason Mildren 為Pilot 雜志設(shè)計(jì)封面時(shí),采用三分法來(lái)構(gòu)建視覺(jué)重心,圖中模特的眼、拇指和手臂軸心都處在視覺(jué)重心上,人物位置靠右下,留白靠左上,在布局上既突出重點(diǎn),又做到了和諧統(tǒng)一。
5、圖形:黃金比例圓形
就像黃金比例可以用來(lái)創(chuàng)建比例協(xié)調(diào)矩形(前面幾點(diǎn)都有提及),它還能夠用在圓形上,一個(gè)完美的圓形應(yīng)該遵循0.618的比例。下面就以百事和Twitter的Logo來(lái)仔細(xì)分析一下黃金比例的圓形在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用吧!
百事的Logo是由兩個(gè)黃金比例的圓形相交組成的。雖然小一點(diǎn)的圓形在重疊之中沒(méi)有那么顯眼,但它確實(shí)為L(zhǎng)ogo中間的白色塊狀打下了基礎(chǔ)。
Twitter的Logo設(shè)計(jì)則是借助若干黃金比例的圓形來(lái)構(gòu)建的,只不過(guò)它在使用黃金比例的圓形的時(shí)候,并沒(méi)有使用相鄰比例的圓形來(lái)構(gòu)建,乍一看可能不夠精確,但卻同樣和諧。
其實(shí),黃金比例最大的魅力就在于既能使網(wǎng)站中的各項(xiàng)元素獨(dú)立存在,又能以協(xié)調(diào)、一致的方式讓他們串聯(lián)起來(lái)。這種位置的調(diào)整可能是微妙的,但它卻是好的設(shè)計(jì)和優(yōu)秀設(shè)計(jì)的分水嶺。
評(píng)論(0人參與,0條評(píng)論)
發(fā)布評(píng)論
最新評(píng)論