網(wǎng)站設(shè)計(jì)之:談?wù)勆蔬\(yùn)用

1 評(píng)論 5258 瀏覽 1 收藏 8 分鐘

很久很久以前,我象眾多新手一樣,苦惱于網(wǎng)頁(yè)色調(diào)如何設(shè)計(jì)。就象裝飾設(shè)計(jì)效果圖一樣,網(wǎng)頁(yè)設(shè)計(jì)資料里也提供一些色系搭配,咱就跟著來唄,然而,默默唧唧始終做出好的色調(diào)來。

然而,的確存在普適的色調(diào)搭配,比如用到電腦IT行業(yè)的科技藍(lán),比如用到教育領(lǐng)域的蘋果綠,比如用到女性系列的玫瑰紅等等。

那時(shí)咱也是個(gè)菜鳥,照搬吧,就只會(huì)用一種顏色,所有的界面元素按一種顏色不同色階來處理,結(jié)果呢,要么一身藍(lán),要么一身綠?;叵胍郧埃F(xiàn)在告訴大家,連分割線都用彩色的,一定是菜鳥中的菜鳥。

后來,咱不滿足了,要“色彩繽呈”。一次次的試驗(yàn),都完蛋了,紅一塊,藍(lán)一塊,綠一塊,組裝到一起,能好看嗎?這個(gè)程度的屬于菜鳥中的菜鳥的進(jìn)化階段,尚屬于有發(fā)展?jié)摿Φ?,大家要注意花時(shí)間培養(yǎng),等待他開悟突破瓶頸。

再后來,發(fā)現(xiàn)自己搞色調(diào)搭配實(shí)在不在行,鑒賞力還是有的,起碼能分辨出好壞來,逮住一個(gè)好的站,抄吧。想突破又沒有突成的,回歸到抄上來的,這個(gè)程度的,一般來說有兩年經(jīng)驗(yàn)了,大家用這樣的人,就比較順手了,起碼的工資應(yīng)該到1500-2500。

再再后來,抄著抄著,功力大進(jìn),反手為云,覆手為雨了,什么顏色都運(yùn)用自如了。這樣的人,起碼給到2500以上了。

從色彩看設(shè)計(jì)師的發(fā)展路程,當(dāng)然到達(dá)高端警戒的人的這個(gè)過程中還充斥著規(guī)劃設(shè)計(jì)、組件設(shè)計(jì)、元素分類、代碼規(guī)范、樣式表、布局設(shè)計(jì)、目錄結(jié)構(gòu)、JS效果、Flash多媒體等等一系列扁平化的綜合應(yīng)用知識(shí)。單就這些知識(shí)的積累來說,時(shí)間得用多少呢?不多說了吧。給多少工資能得到這樣一個(gè)人呢?也不多說了吧。如果他是一個(gè)有個(gè)人思想體系的人的話,價(jià)碼就更不言而喻了。

上面說的,是設(shè)計(jì)師的本事和價(jià)碼,打家可以對(duì)號(hào)入座培養(yǎng)自己的設(shè)計(jì)師了。

好了,現(xiàn)在才開始進(jìn)入正題:色彩運(yùn)用。

下面我整理出一個(gè)簡(jiǎn)單的綱要,來說明一下,高效的簡(jiǎn)化通用程式。

(1)白紙黑字

白紙黑字是所有出版物的主題。網(wǎng)頁(yè)這種屏幕出版也不例外,但對(duì)于屏幕來說,有個(gè)特點(diǎn),字最好不要純黑,那樣太刺激,一般選用深灰。

(2)分割線用一律用淺灰

為啥,分欄、模塊的邊際線,其存在的目的是什么?只有一個(gè),就是把不同的內(nèi)容“區(qū)分”開來。所以分割線的顏色一定要淺,能讓用戶感受的內(nèi)容的區(qū)分就可以了,那為啥要有灰色而不用彩色呢?因?yàn)榛疑峭ㄓ蒙?,適用于任何色系的網(wǎng)站。如果分割線用彩色,或者區(qū)塊的背景用彩色,那么就會(huì)壓過你的內(nèi)容或產(chǎn)品,讓用戶的視覺受到“色誘”干擾,甚至影響到你產(chǎn)品的品相。

突出產(chǎn)品,就要弱化裝飾,弱化分割線,弱化背景,弱到不能在弱。

(3)如何呈現(xiàn)網(wǎng)頁(yè)的主色調(diào)

已經(jīng)是白紙黑字了,怎么能讓用戶感到網(wǎng)頁(yè)的行業(yè)色系呢?很簡(jiǎn)單,導(dǎo)航、Logo、功能按鈕、功能鏈接,這些有用戶操作性的重功能區(qū),用彩色來點(diǎn)題。換句話說,如果一張白紙信箋,頁(yè)眉是紅線的就是紅頭文件,頁(yè)眉是藍(lán)線的就是藍(lán)頭文件。彩色用到重功能區(qū),直接就定義了網(wǎng)頁(yè)主調(diào)。而不是處處用紅色,才是紅調(diào)網(wǎng)頁(yè)。

(4)如何處理不搭調(diào)的顏色

網(wǎng)頁(yè)上有時(shí)需要處理一些廣告圖片,有些顏色放到一起不鮮亮,怎么也調(diào)不好顏色。比如紅配藍(lán)討人嫌,紅配綠狗臭屁,還有鴨屎綠,狗屎黃等等一些不好處理的顏色。

怎么辦?很簡(jiǎn)單。用白色把兩種不搭調(diào)的顏色葛開少許距離。一下問題就解決了。字體不鮮亮,描個(gè)邊就完事,一個(gè)邊不出效果,多描幾層就OK了。

(5)關(guān)于韓灰

韓國(guó)網(wǎng)站興起一股韓風(fēng),然后大家就跟在棒子后面學(xué)Flash導(dǎo)航,學(xué)韓灰。學(xué)來學(xué)去,沒有掌握其本質(zhì)精髓。

為啥韓風(fēng)未艾,這得從東西方文字說起。西方文字以26個(gè)英文字母為主,每個(gè)字母都無大多內(nèi)涵,而一個(gè)單詞,一個(gè)句話,缺形成一種優(yōu)美的線條,而且英文字母最小能到6個(gè)像素,英文越小越顯出一種精致的美感。而漢字就不同了,每個(gè)字都是一個(gè)故事一個(gè)典故一個(gè)藝術(shù)體,但一行字就沒多大美感了,如果是一篇文章滿滿的黑字在屏幕上顯示,那就是丑陋了。GB2312國(guó)標(biāo)字體不同于書法,不能像毛筆字一樣體現(xiàn)藝術(shù)美,這個(gè)道理大家都能理解。

如何改善這個(gè)東方文字在屏幕顯示上的丑陋呢?
誰(shuí)在網(wǎng)頁(yè)上首先普及性地解決了這個(gè)問題呢?

是韓國(guó)棒子。古代韓國(guó)是沒有官方文字的,用的是漢字,即便后來發(fā)明了自己的文字,其韓文但也受到中國(guó)文化的深遠(yuǎn)影響。所以棒子的方法同樣可以運(yùn)用到漢字和日文上。

方法很簡(jiǎn)單,就是把字體顏色改用深灰色,而慎用純黑。這樣就弱化了白紙黑方塊字感覺像一張白紙上爬滿蒼蠅的感覺——這就是韓灰的本質(zhì)。不了解東西方文字的本質(zhì)區(qū)別,一樣做不好中英文雙版的網(wǎng)站。

棒子的網(wǎng)站其可去之處,不在于用拙而炫的Flash去滿足爆發(fā)戶的喜好,而在于其對(duì)文字的弱化處理。學(xué)會(huì)弱化、學(xué)會(huì)釜底抽薪的手段,不僅僅能解決界面設(shè)計(jì)問題,也是種政治手段。

最后鄙視一下,功能性網(wǎng)站,加Flash以炫取巧的手段。以后有時(shí)間講講Flash什么時(shí)候該用,什么時(shí)候不改用。

來源:http://www.paidai.com/displaythread.php?boardid=18&topicid=21184

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 很有價(jià)值,值得學(xué)習(xí),贊一個(gè)

    來自北京 回復(fù)