在網(wǎng)頁設計里的排版和配色技巧

在網(wǎng)頁設計中，如何配色，有的時候很難去定位，那么我們到底要怎么做才能做的更好呢，那么就看下下面的一些分析，相信你會找到你所需要的。

1、根據(jù)頁面風格以及產(chǎn)品本身的訴求確定主色；2、根據(jù)主色找配色；3、調(diào)整色彩在頁面中的比例。

首先說說找主色調(diào)，關于找主色調(diào)，我個人一直覺得顏色是有一定心理暗示的，最出名的例子就是麥當勞、肯德基這類快餐店不約而同的選擇了紅色作為主基調(diào)，因為紅色有增進食欲的效果。：紅色代表熱情、革命和危險；綠色代表希望、春天和環(huán)保；橙色代表活躍和快樂；紫色代表華麗、妖艷、神秘……如果有興趣的同學，可以去找一些色彩心理學的資料稍微研究下，這里稍微提一些，僅供參考。

由于色彩本身心理暗示的作用，很多行業(yè)都有其行業(yè)色，比如商務/工業(yè)藍、環(huán)保綠之類的，當做到某些特定行業(yè)時候，使用行業(yè)色作為主色調(diào)會是一個很保險的選擇。

當然，在選擇主色調(diào)的時候還有其他一些因素要考慮，比如整個站點的美術效果、需要傳達的氛圍/感覺以及用戶觀感。說到觀感，有一個很多設計師都不注意的問題：通常來說，顏色純度的顏色，從廣告效果上是好的，能夠一瞬間把用戶的眼睛吸引過來。但是不適合長時間瀏覽，長時間瀏覽純色的頁面，會產(chǎn)生視覺疲勞(有人說綠色是保護眼睛的顏色，但是事實上純綠色對眼睛的刺激也不小)；顏色灰度偏高的顏色，雖然不是很醒目，但是有利于長時間的瀏覽，不容易產(chǎn)生視覺疲勞。高調(diào)頁面（整個頁面調(diào)性偏白的那種），雖然看起來會有一種簡約干凈的感覺，但是由于顯示器不同，所以在部分電腦里，亮部容易沒有層次而顯得單?。欢院谏钌珵橹鞯捻撁?，雖然整體把握比較容易，但是同樣的問題，暗部可能會損失層次，另外深沉的顏色使用不好會使頁面顯得沉悶。所以說，多從用戶的角度去考慮觀感的問題，被“飛機”的概率才會降低。

確定好主色之后就是配色。配色的話，個人感覺不宜過多，對于初學者，最好別超過3種，實際情況是顏色太多不利于把握主調(diào)性，容易花。關于配色，很多時候靠經(jīng)驗的積累，但是也不是完全沒有技巧：最簡單的方法是使用LOGO上本身的顏色搭配或者VI設計時候設定的標準色，這樣的顏色搭配大多應用在公司宣傳性網(wǎng)站，屬于比較偷懶的方法；第二種方法是挑選兩個色相色性相近的顏色（主要顏色），再選擇一個色相色性相對的顏色（輔助顏色），這樣的搭配大多數(shù)情況下屬于是比較合適；第三種是搭配消色。

所謂的消色，就是指黑白灰（也有說是黑白金銀灰），這類顏色由于本身沒有色性，所以可以說是萬用搭配色。當然，說是說萬用搭配色，但是也是有一些需要注意的地方：首先，由于本身沒有色性，他們必須和色性比較強的顏色搭配會比較出效果；其次，消色與其他顏色搭配的時候，比例一定要控制好，尤其是灰色，灰色是一種很“高檔”的顏色，但是問題是使用的過多，會使得頁面灰蒙蒙沒有質(zhì)感。

配色確定之后，就是調(diào)配顏色比例了，關于顏色比例方面，我覺得沒有什么特別好的規(guī)律，最好的方法就是做色彩小稿看效果。當然，你足夠自信的話，胸有成竹也是可以的。

此外，還有一些特殊的顏色搭配：說到純色之間的搭配，有很多人會想到“紅配綠，大傻X”但是農(nóng)民畫當中大量的使用紅配綠。卻非常的有感覺，為什么呢？關于這個問題，我個人是這么感覺的（僅為個人見解），使用四至五種純色進行搭配的時候，基本上不用考慮顏色搭配的問題，如果略微有一些壓不住，用一點消色壓一下就OK了。類似情況的還有粉色和灰粉色，這類顏色由于本身含有消色，且調(diào)性都比較高，所以搭配起來會顯得非常的清爽。當然，只要色相、純度、明度三個屬性中有一個屬性是基本相同或者接近，搭配起來基本上都不會覺得太牽強，只是相對而言之前提到的那幾種搭配是比較常見的而已。

關于配色的就說這么多。最后說一下，對于配色軟件之類，的確有可取之處，只是個人不建議用。配色軟件是死的，人是活的，習慣使用配色軟件之后，人就會產(chǎn)生惰性，設計也就變死了。以上說的一些東西，只是我的一些個人經(jīng)驗，不完全正確，僅供參考。關于配色，感覺依然還是最關鍵的東西，同時多看好的作品，多關注生活中的設計才是正途。

配色說完了說下排版，網(wǎng)頁設計的排版同平面印刷的排版是一脈相承的，所以對于網(wǎng)頁面設計排版的學習可以從平面媒體的排版設計開始，我最初接觸的排版方面的專業(yè)性書籍是《英國版式設計教程【高級版】》，很多理論對我后來有深遠的影響，建議想多排版有所了解的同學去看一下。當然，雖然說，平面媒體的排版經(jīng)驗對于網(wǎng)頁設計的排版有所借鑒，但是由于載體的興致不同，所以還是有一些區(qū)別的，希望大家在學習之余有自己的思考。

網(wǎng)頁設計首先是要說整體的感覺，整個頁面的風格氣氛需要自上而下一脈相承。不少人做頁面時候頭重腳輕，頭部做的很花哨，尾部就隨意的來一下，雖說從實際說的確頁面的頭部比較重要而尾部是不是那么重要，但是作為一個作品，這樣的觀念還是不大可取的。所以，作為設計者，心中必須確立這樣一個觀點，出現(xiàn)在頁面上的信息，都是有用的，都是有人看的，關注的人再少也不能馬虎，這是對自己的設計負責，也是對觀看頁面的用戶負責。

頁面的整體感覺需要重視，但是同時網(wǎng)頁受限于瀏覽器，是通過自上而下滾動瀏覽的。所以呈現(xiàn)在用戶眼中的絕大多數(shù)是頁面的局部。不少設計師很注意考慮頁面的整體效果，卻比較少考慮滾動瀏覽時候每個瀏覽器截取片段的效果。網(wǎng)頁的排版同平面媒體的排版一樣，需要注意圖片文字標題等元素在頁面上呈現(xiàn)的效果的平衡，但是網(wǎng)頁排版更需要注意的是一個動態(tài)的平衡，即無論頁面滾動到何位置，在瀏覽器中呈現(xiàn)出來的效果應該都是至少讓人在視覺上“舒服”的。

網(wǎng)頁設計排版與平面媒體排版大的區(qū)別在于：網(wǎng)頁設計排版有很多交互性的功能和動態(tài)效果。所以排版的時候要考慮到更多的功能性需求以及動態(tài)的視覺效果。由于這么多的元素要排列在頁面上，所以頁面在排版的時候需要考慮的情況也多了，對頁面元素排列的邏輯性要求也相對高了不少。這個時候，最簡單的處理方法的就是假設：假設用戶是你，你希望這個導航條在什么地方？通過什么樣的方式（靜態(tài)/動態(tài)？）展現(xiàn)你會覺得使用方便？假設你是后臺的管理者，你在實際操作后臺之后，會產(chǎn)生什么樣的問題？有什么好的解決方案？……這個在用戶體驗當中叫做“假想用戶”，是比較常用的方法。

最后要說的是，關于排版（無論是平面設計排版還是網(wǎng)頁設計排版），最核心的成功元素是什么？是通過頁面的美術效果，引導用戶瀏覽信息，引導用戶進入頁面想帶給用戶的氛圍。所以最好的設計，應該是“無設計”——請注意，“無設計”不是說沒有設計，而是整個設計渾然一體讓人感覺不到設計的痕跡。這樣的設計不會影響用戶對于信息的瀏覽，而且良好的排版層次會讓頁面的邏輯性更加明確，讓用戶產(chǎn)生良好的體驗，甚至可以通過設計中的一些技巧引導用戶主動去瀏覽頁面最主要想呈現(xiàn)給用戶的信息，只有做到這個程度才算是成功的排版。雖然說設計師最主要的工作是把頁面做的漂亮，但是希望大家不要忘記自己的設計最原始的用處是什么。

本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司！

名稱欄目：在網(wǎng)頁設計里的排版和配色技巧
文章源于：http://www.muchs.cn/news37/309437.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、軟件開發(fā)、移動網(wǎng)站建設、企業(yè)建站、網(wǎng)站排名、外貿(mào)網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)