網(wǎng)頁配色之黃金分割法

2024-08-30 08:36:39

字體：大中小

供稿：網(wǎng)友

眾所周知，數(shù)學(xué)上有一個黃金分割點--0.618。據(jù)說用次比例數(shù)分割是最具美感的，從美眉身材到高樓建筑，從藝術(shù)到繪畫無不出其之左，因此被稱為"神奇的"黃金分割點。與此同時，人們也對其進行了大量的研究，研究結(jié)果更是大量的"神奇"說法。不過，我輩是現(xiàn)實主義者，"神奇"就不談了，還是看看咋用它的"神奇"解決我的問題吧--網(wǎng)頁配色之黃金分割法。

　　諸位制作過烘培雞（homepage）的大蝦們都知道，制作網(wǎng)頁時網(wǎng)頁背景與前景的字體配色比較麻煩的。如果背景顏色與字體顏色的搭配不合理，就會使網(wǎng)頁效果大打折扣。如果背景色與字體色的對比度太大，就會顯得太刺眼；如果對比度太小，就會使網(wǎng)頁風(fēng)格變得過于沉悶。要達最佳配色實在是麻煩之至，自定義-〉觀看效果-〉不合適-〉從頭來……，

　　到最后發(fā)現(xiàn)我們大部分寶貴的time都花在了上面。不過別急，有了我的"網(wǎng)頁配色之黃金分割法"之后，就可以大大節(jié)省你的時間了。別打！別打！我馬上就進入正題了（嗚……嗚……）。

　　黃金分割法的基本原理是這樣的：把顏色的對比度（背景與前景）調(diào)節(jié)在0.618比例附近的位置上。下面我以frontpage 2000為例來講解一下具體操作。

　　1．選擇背景色（記住顏色的亮度值）。打開frontpage 2000以后單擊鼠標(biāo)右鍵，選擇"網(wǎng)頁屬性"，彈出"網(wǎng)頁屬性"對話框后選擇"背景"單元（或"格式"菜單下的"背景"選項），然后在背景色選項中選取你想要的任意背景色，然后確定（本例中選取橄欖綠rgb：0,128,0 亮度：60）。

　　2．選擇前景色。選擇格式-〉字體，在字體顏色中選取"其他顏色"。彈出顏色對話框后選擇"自定義"，彈出windows的標(biāo)準(zhǔn)顏色對話框。

　　3．計算亮度值。若背景色的亮度值為0-92時，將上述對話框中的亮度確定為x+148；若在148-240之間則定為x-148。然后選擇任何你認(rèn)為搭配合理的顏色（亮度值不變）作為前景色。選擇原理如下：亮度的最大值是240，黃金分割值為240×0.618≈148，即亮度差為148為最佳對比度，因此選取的前景色與背景色亮度值至少有一位于0-92或148-240之間，其他亮度值不宜選?。◤娏医ㄗh）。

　　ok，確定，輸入幾個字符看看效果，是不是要好一點呢？作者原創(chuàng)，千萬不可隨意外傳呦^_^。

經(jīng)過分析上邊的網(wǎng)頁設(shè)計黃金分割，我發(fā)現(xiàn)在ps里的亮度卻是以百分比來劃分的，在hsb模式里的b表示的就是亮度值了。
此主題相關(guān)圖片如下：

而根據(jù)它的原理，就可以推算出采用百分?jǐn)?shù)值來看，100%*0.618=62%。當(dāng)背景顏色的亮度值為0~38%時，字體顏色就加上62%，當(dāng)背景顏色為62~100%時，字體顏色就減去62%。例如：

此主題相關(guān)圖片如下：

這樣看來，文字很清晰，且不感覺刺眼了。
不過我個人覺得這個只適合做網(wǎng)頁或者有長篇的文字的地方使用，標(biāo)題或者其它廣告上就不適用了，作為設(shè)計的話，不應(yīng)該考慮這個，而應(yīng)該以要表現(xiàn)的內(nèi)容和精神自由選擇顏色，那樣設(shè)計才是自由的。設(shè)計更多的不是要理論，而是靠感覺

上一篇：網(wǎng)頁設(shè)計常用色譜

下一篇：按形容詞分類：柔和、潔凈、爽朗