- 相關(guān)推薦
網(wǎng)頁(yè)設(shè)計(jì)的黃金比例是什么
導(dǎo)語(yǔ)：作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師開(kāi)始一個(gè)項(xiàng)目時(shí)經(jīng)常會(huì)考慮到網(wǎng)頁(yè)的布局，雖然現(xiàn)在很多人傾向使用 Grid css框架（如960，blueprint），但有時(shí)也需要設(shè)計(jì)一些獨(dú)特的布局。以下是小編為大家精心整理的網(wǎng)頁(yè)設(shè)計(jì)的黃金比例，歡迎大家參考！
1、黃金分割又稱(chēng)黃金比例，是一個(gè)數(shù)學(xué)上是術(shù)語(yǔ)，用來(lái)表示兩個(gè)元素的比例，它的值大約等于1.618。
黃金分割從文藝復(fù)興時(shí)就開(kāi)始了。那個(gè)時(shí)代的藝術(shù)家 對(duì)黃金分割十分推崇，并且廣泛運(yùn)用在各種設(shè)計(jì)作品上，數(shù)百年來(lái)，在建筑、雕塑、繪畫(huà)等領(lǐng)域都可以看到黃金分割的身影，今天我們同樣可以將它運(yùn)用在數(shù)字藝術(shù)上。
2、黃金分割是一個(gè)數(shù)學(xué)的術(shù)語(yǔ)，所以開(kāi)始可能不是很好理解。
我們可以簡(jiǎn)單舉例講解，假設(shè)有兩個(gè)線段a和b，如果它們的長(zhǎng)度a+b/a的值等于a/b，即a+b/a=a/b=1.618，那么黃金分割就成立了，a和b中間就是黃金分割點(diǎn)。
3、黃金分割的運(yùn)用
以一個(gè)960px寬度的網(wǎng)頁(yè)設(shè)計(jì)布局為例，假如我們要將這個(gè)網(wǎng)頁(yè)分成兩欄，如何才能找到他們的黃金分割點(diǎn)呢？
非常簡(jiǎn)單，從上面的數(shù)學(xué)公式我們知道a+b/a=1.618，960px就相當(dāng)于a+b的值，所以只要用960/1.618=593，所以593px的位置就是黃金分割點(diǎn)。這樣兩欄的網(wǎng)頁(yè)布局，左邊欄寬度設(shè)為593px，右邊欄寬度設(shè)為367px（960-593）就可以了。
這個(gè)方式同樣適用于一些非固定的彈性的網(wǎng)頁(yè)布局，只要通過(guò)同樣的計(jì)算公式得到相應(yīng)數(shù)值用相對(duì)單位（如百分比）表示即可，這樣的網(wǎng)頁(yè)設(shè)計(jì)是令人感覺(jué)最自然的。你也可以進(jìn)一步將網(wǎng)頁(yè)分成3欄、4欄。
當(dāng)然黃金分割比例只是在設(shè)計(jì)上的一個(gè)指導(dǎo)而已，如果你可以打破這個(gè)規(guī)則又能保持網(wǎng)頁(yè)設(shè)計(jì)頁(yè)面的自然平衡也是可以的，作為一個(gè)通常的規(guī)則，經(jīng)常把黃金比例用5：3來(lái)代替，雖然不是非常精確，但是卻更直觀和方便使用。
4、三分法
就像前面說(shuō)過(guò)的一樣，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，不應(yīng)該完全拘泥于某個(gè)設(shè)計(jì)理論，網(wǎng)頁(yè)設(shè)計(jì)不需要完全遵循1.618這個(gè)數(shù)值。三分法是運(yùn)用黃金分割的一個(gè)簡(jiǎn)單實(shí)用的方法。
三分法是用兩條水平線和垂直線將構(gòu)圖在水平和垂直方向上三等分。這四條線交叉會(huì)形成四個(gè)點(diǎn)，這四個(gè)點(diǎn)稱(chēng)之為關(guān)鍵點(diǎn)，重要的設(shè)計(jì)元素最好放置在這四個(gè) 地方。很多網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)在不知不覺(jué)中運(yùn)用了三分法，如網(wǎng)站重要的信息（logo、導(dǎo)航欄）會(huì)放置在左上角，右上角可能會(huì)放置重要性稍微低一點(diǎn)的的內(nèi)容。當(dāng) 你在考慮放置標(biāo)題、按鈕和鏈接的位置時(shí)，就可以考慮用三分法來(lái)做參考了。當(dāng)然，同樣要靈活運(yùn)用，不要“嚴(yán)格遵循”。
5、黃金矩形（Golden Rectangle）
在網(wǎng)頁(yè)設(shè)計(jì)布局時(shí)，根據(jù)功能的不同將網(wǎng)頁(yè)分成幾個(gè)矩形，這些矩形的大小參照黃金分割比例，這樣就形成了很多黃金矩形。這些矩形可以解決你在網(wǎng)頁(yè)設(shè)計(jì) 布局中碰到的大部分困惑，比如你可以通過(guò)這些黃金矩形來(lái)決定flash或者圖像該放在首頁(yè)的什么地方，也可以決定側(cè)邊欄、網(wǎng)站底部?jī)?nèi)容的位置。一些電子商 務(wù)網(wǎng)站在設(shè)計(jì)產(chǎn)品的展示時(shí)尤其可以參考一下黃金矩形。
黃金比例是什么？
黃金比例是一個(gè)數(shù)學(xué)比率，通常在自然界中都能發(fā)現(xiàn)它，用來(lái)建立平衡的構(gòu)圖。 它大約等于1.6180，也被稱(chēng)為“中庸之道”、“黃金分割”， 通常用希臘字母Ф表示這個(gè)值。
“黃金矩形”是指一個(gè)長(zhǎng)方形的寬度是它高度的1.6180倍。 例如，一個(gè)劃分為300 px的一側(cè)， 則另一側(cè)為300 * 1.6180≈485 px，就可以稱(chēng)之為黃金矩形。
拓展：簡(jiǎn)潔網(wǎng)頁(yè)設(shè)計(jì)小貼士
選用富有沖擊力的圖片元素
設(shè)計(jì)任何網(wǎng)站類(lèi)型，恰到好處又吸引眼球的圖片總是非常重要的。雖然讀者通常只關(guān)注網(wǎng)站的內(nèi)容，但吸引人的相關(guān)圖片也可以起到對(duì)內(nèi)容補(bǔ)充的作用，同時(shí)也增添了美感。不過(guò)，在網(wǎng)頁(yè)中使用圖片元素時(shí)，不管它是靜態(tài)還是動(dòng)態(tài)圖片，都要注意顏色的搭配。顏色使用過(guò)多容易造成視覺(jué)混亂，使用單一顏色往往會(huì)產(chǎn)生強(qiáng)烈的視覺(jué)沖擊。
小心使用頁(yè)面空白
毫無(wú)疑問(wèn)，簡(jiǎn)潔的網(wǎng)頁(yè)設(shè)計(jì)成功的先決條件之一就是做到整潔有序。設(shè)計(jì)師在網(wǎng)頁(yè)中熟練地添加flash動(dòng)畫(huà)，視頻，3D圖形等多種元素的同時(shí)，不過(guò)應(yīng)盡量避免過(guò)度使用這些元素。如今，大家都經(jīng)常使用各種便攜式設(shè)備瀏覽網(wǎng)頁(yè)，因此也應(yīng)該充分考慮到移動(dòng)網(wǎng)絡(luò)用戶的需求。在網(wǎng)頁(yè)設(shè)計(jì)中，應(yīng)該小心，準(zhǔn)確地處理頁(yè)面的邊距和空白。但是，空白間距過(guò)多會(huì)讓網(wǎng)站失去吸引力。因此維持設(shè)計(jì)過(guò)程中的流動(dòng)性非常重要，切勿過(guò)度使用。
開(kāi)啟你的像素眼
任何與設(shè)計(jì)的相關(guān)工作，小細(xì)節(jié)都發(fā)揮大作用。網(wǎng)頁(yè)設(shè)計(jì)也不例外。想要成功設(shè)計(jì)出簡(jiǎn)潔的網(wǎng)站，你需要“第三只眼”來(lái)監(jiān)控這些小細(xì)節(jié)。網(wǎng)站的邊框，投影，高光和紋理等元素容易讓瀏覽者印象深刻，但設(shè)計(jì)師們往往卻忽略了這些小細(xì)節(jié)。在某些情況下，忽視動(dòng)畫(huà)和圖片的優(yōu)化問(wèn)題會(huì)影響到網(wǎng)頁(yè)圖像質(zhì)量。為了設(shè)計(jì)出最佳的網(wǎng)站圖片，可在Photoshop中啟用“對(duì)齊到像素”(Snap to Pixels)，對(duì)圖片進(jìn)行適當(dāng)?shù)膬?yōu)化。網(wǎng)頁(yè)中內(nèi)容排版錯(cuò)亂時(shí)有發(fā)生，這會(huì)從視覺(jué)上降低內(nèi)容的吸引力，影響讀者閱讀。
選用合適的字體
簡(jiǎn)潔的網(wǎng)頁(yè)設(shè)計(jì)成功離不開(kāi)排版，排版應(yīng)該獲得和圖片同樣的重視。雖然可供選擇的字體很多，設(shè)計(jì)師要考慮的方面很多，比如說(shuō)，目標(biāo)客戶和客戶公司的性質(zhì)。為網(wǎng)站頁(yè)眉和內(nèi)容選用合適的字體是必不可少的，無(wú)襯線字體(sans serif)和有襯線(sans serif)字體通常會(huì)為設(shè)計(jì)帶來(lái)良好的效果。除此之外，你還可以結(jié)合其它字體，專(zhuān)為孩子和女性打造網(wǎng)站。
為你的網(wǎng)站選擇合適的配色方案
任何網(wǎng)站的設(shè)計(jì)都離不了合適的配色方案，這對(duì)創(chuàng)建一個(gè)整潔干凈的網(wǎng)站同樣適用。堅(jiān)持使用淡色和非彩色的投影對(duì)成功設(shè)計(jì)一個(gè)簡(jiǎn)潔網(wǎng)站大有裨益。淺色的投影可以幫助用戶把焦點(diǎn)轉(zhuǎn)向網(wǎng)站內(nèi)容。標(biāo)志使用黑色和較深的投影，網(wǎng)頁(yè)中的頁(yè)眉和導(dǎo)航元素使用淺色背景，這些都是不錯(cuò)的案例，并沒(méi)有規(guī)定在簡(jiǎn)潔網(wǎng)頁(yè)設(shè)計(jì)中不能使用大膽的顏色，但是這樣的顏色要小心，克制地使用。有時(shí)候，網(wǎng)站有必要使用深色背景色來(lái)吸引某些目標(biāo)用戶。比起漸變色，有些網(wǎng)站更鐘愛(ài)純色。如果你的網(wǎng)站非得要使用紋理和漸變色，也不要用得太過(guò)火。
導(dǎo)航欄與可用性
你對(duì)網(wǎng)站設(shè)計(jì)滿意時(shí)，認(rèn)為一切都趨于完美，這時(shí)，你可以通過(guò)實(shí)際試用來(lái)測(cè)試它的使用性。不妨站在局外人的角度，客觀地對(duì)網(wǎng)站作出評(píng)價(jià)。在網(wǎng)站發(fā)布之前，你可以詢問(wèn)一下跟網(wǎng)站設(shè)計(jì)無(wú)關(guān)的人的看法。保持網(wǎng)站導(dǎo)航的直觀性，避免使用的導(dǎo)航元素讓初次訪問(wèn)者和技術(shù)新手產(chǎn)生挫敗感。
【網(wǎng)頁(yè)設(shè)計(jì)的黃金比例是什么】相關(guān)文章：
網(wǎng)頁(yè)設(shè)計(jì)如何利用“黃金比例”03-24
如何利用網(wǎng)頁(yè)設(shè)計(jì)的黃金比例及運(yùn)用04-11
網(wǎng)頁(yè)設(shè)計(jì)黃金配色原則是什么08-07
網(wǎng)頁(yè)設(shè)計(jì)黃金配色原則08-07
網(wǎng)頁(yè)設(shè)計(jì)黃金配色的原則01-18
網(wǎng)頁(yè)設(shè)計(jì)字體組合的黃金規(guī)則01-20
網(wǎng)頁(yè)設(shè)計(jì)黃金配色的6條原則07-29