詳解網(wǎng)頁(yè)設(shè)計(jì)中的配色和排版理論,其實(shí)尋找顏色,有時(shí)候可以很套路:
1、根據(jù)頁(yè)面風(fēng)格以及產(chǎn)品本身的訴求確定主色;2、根據(jù)主色找配色;3、調(diào)整色彩在頁(yè)面中的比例。
首先說(shuō)說(shuō)找主色調(diào),關(guān)于找主色調(diào),我個(gè)人一直覺(jué)得顏色是有一定心理暗示的,最出名的例子就是麥當(dāng)勞、肯德基這類快餐店不約而同的選擇了紅色作為主基調(diào),因?yàn)榧t色有增進(jìn)食欲的效果。:紅色代表熱情、革命和危險(xiǎn);綠色代表希望、春天和環(huán)保;橙色代表活躍和快樂(lè);紫色代表華麗、妖艷、神秘……如果有興趣的同學(xué),可以去找一些色彩心理學(xué)的資料稍微研究下,這里稍微提一些,僅供參考。
由于色彩本身心理暗示的作用,很多行業(yè)都有其行業(yè)色,比如商務(wù)/工業(yè)藍(lán)、環(huán)保綠之類的,當(dāng)做到某些特定行業(yè)時(shí)候,使用行業(yè)色作為主色調(diào)會(huì)是一個(gè)很保險(xiǎn)的選擇。
當(dāng)然,在選擇主色調(diào)的時(shí)候還有其他一些因素要考慮,比如整個(gè)站點(diǎn)的美術(shù)效果、需要傳達(dá)的氛圍/感覺(jué)以及用戶觀感。說(shuō)到觀感,有一個(gè)很多設(shè)計(jì)師都不注意的問(wèn)題:通常來(lái)說(shuō),顏色純度的顏色,從廣告效果上是好的,能夠一瞬間把用戶的眼睛吸引過(guò)來(lái)。但是不適合長(zhǎng)時(shí)間瀏覽,長(zhǎng)時(shí)間瀏覽純色的頁(yè)面,會(huì)產(chǎn)生視覺(jué)疲勞(有人說(shuō)綠色是保護(hù)眼睛的顏色,但是事實(shí)上純綠色對(duì)眼睛的刺激也不小);顏色灰度偏高的顏色,雖然不是很醒目,但是有利于長(zhǎng)時(shí)間的瀏覽,不容易產(chǎn)生視覺(jué)疲勞。高調(diào)頁(yè)面(整個(gè)頁(yè)面調(diào)性偏白的那種),雖然看起來(lái)會(huì)有一種簡(jiǎn)約干凈的感覺(jué),但是由于顯示器不同,所以在部分電腦里,亮部容易沒(méi)有層次而顯得單薄;而以黑色深色為主的頁(yè)面,雖然整體把握比較容易,但是同樣的問(wèn)題,暗部可能會(huì)損失層次,另外深沉的顏色使用不好會(huì)使頁(yè)面顯得沉悶。所以說(shuō),多從用戶的角度去考慮觀感的問(wèn)題,被“飛機(jī)”的概率才會(huì)降低。
確定好主色之后就是配色。配色的話,個(gè)人感覺(jué)不宜過(guò)多,對(duì)于初學(xué)者,最好別超過(guò)3種,實(shí)際情況是顏色太多不利于把握主調(diào)性,容易花。關(guān)于配色,很多時(shí)候靠經(jīng)驗(yàn)的積累,但是也不是完全沒(méi)有技巧:最簡(jiǎn)單的方法是使用LOGO上本身的顏色搭配或者VI設(shè)計(jì)時(shí)候設(shè)定的標(biāo)準(zhǔn)色,這樣的顏色搭配大多應(yīng)用在公司宣傳性網(wǎng)站,屬于比較偷懶的方法;第二種方法是挑選兩個(gè)色相色性相近的顏色(主要顏色),再選擇一個(gè)色相色性相對(duì)的顏色(輔助顏色),這樣的搭配大多數(shù)情況下屬于是比較合適;第三種是搭配消色。
所謂的消色,就是指黑白灰(也有說(shuō)是黑白金銀灰),這類顏色由于本身沒(méi)有色性,所以可以說(shuō)是萬(wàn)用搭配色。當(dāng)然,說(shuō)是說(shuō)萬(wàn)用搭配色,但是也是有一些需要注意的地方:首先,由于本身沒(méi)有色性,他們必須和色性比較強(qiáng)的顏色搭配會(huì)比較出效果;其次,消色與其他顏色搭配的時(shí)候,比例一定要控制好,尤其是灰色,灰色是一種很“高檔”的顏色,但是問(wèn)題是使用的過(guò)多,會(huì)使得頁(yè)面灰蒙蒙沒(méi)有質(zhì)感。
配色確定之后,就是調(diào)配顏色比例了,關(guān)于顏色比例方面,我覺(jué)得沒(méi)有什么特別好的規(guī)律,最好的方法就是做色彩小稿看效果。當(dāng)然,你足夠自信的話,胸有成竹也是可以的。
此外,還有一些特殊的顏色搭配:說(shuō)到純色之間的搭配,有很多人會(huì)想到“紅配綠,大傻X”但是農(nóng)民畫當(dāng)中大量的使用紅配綠。卻非常的有感覺(jué),為什么呢?關(guān)于這個(gè)問(wèn)題,我個(gè)人是這么感覺(jué)的(僅為個(gè)人見(jiàn)解),使用四至五種純色進(jìn)行搭配的時(shí)候,基本上不用考慮顏色搭配的問(wèn)題,如果略微有一些壓不住,用一點(diǎn)消色壓一下就OK了。類似情況的還有粉色和灰粉色,這類顏色由于本身含有消色,且調(diào)性都比較高,所以搭配起來(lái)會(huì)顯得非常的清爽。當(dāng)然,只要色相、純度、明度三個(gè)屬性中有一個(gè)屬性是基本相同或者接近,搭配起來(lái)基本上都不會(huì)覺(jué)得太牽強(qiáng),只是相對(duì)而言之前提到的那幾種搭配是比較常見(jiàn)的而已。
關(guān)于配色的就說(shuō)這么多。最后說(shuō)一下,對(duì)于配色軟件之類,的確有可取之處,只是個(gè)人不建議用。配色軟件是死的,人是活的,習(xí)慣使用配色軟件之后,人就會(huì)產(chǎn)生惰性,設(shè)計(jì)也就變死了。以上說(shuō)的一些東西,只是我的一些個(gè)人經(jīng)驗(yàn),不完全正確,僅供參考。關(guān)于配色,感覺(jué)依然還是最關(guān)鍵的東西,同時(shí)多看好的作品,多關(guān)注生活中的設(shè)計(jì)才是正途。
配色說(shuō)完了說(shuō)下排版,網(wǎng)頁(yè)設(shè)計(jì)的排版同平面印刷的排版是一脈相承的,所以對(duì)于網(wǎng)頁(yè)面設(shè)計(jì)排版的學(xué)習(xí)可以從平面媒體的排版設(shè)計(jì)開(kāi)始,我最初接觸的排版方面的專業(yè)性書籍是《英國(guó)版式設(shè)計(jì)教程【高級(jí)版】》,很多理論對(duì)我后來(lái)有深遠(yuǎn)的影響,建議想多排版有所了解的同學(xué)去看一下。當(dāng)然,雖然說(shuō),平面媒體的排版經(jīng)驗(yàn)對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的排版有所借鑒,但是由于載體的興致不同,所以還是有一些區(qū)別的,希望大家在學(xué)習(xí)之余有自己的思考。
網(wǎng)頁(yè)設(shè)計(jì)首先是要說(shuō)整體的感覺(jué),整個(gè)頁(yè)面的風(fēng)格氣氛需要自上而下一脈相承。不少人做頁(yè)面時(shí)候頭重腳輕,頭部做的很花哨,尾部就隨意的來(lái)一下,雖說(shuō)從實(shí)際說(shuō)的確頁(yè)面的頭部比較重要而尾部是不是那么重要,但是作為一個(gè)作品,這樣的觀念還是不大可取的。所以,作為設(shè)計(jì)者,心中必須確立這樣一個(gè)觀點(diǎn),出現(xiàn)在頁(yè)面上的信息,都是有用的,都是有人看的,關(guān)注的人再少也不能馬虎,這是對(duì)自己的設(shè)計(jì)負(fù)責(zé),也是對(duì)觀看頁(yè)面的用戶負(fù)責(zé)。
頁(yè)面的整體感覺(jué)需要重視,但是同時(shí)網(wǎng)頁(yè)受限于瀏覽器,是通過(guò)自上而下滾動(dòng)瀏覽的。所以呈現(xiàn)在用戶眼中的絕大多數(shù)是頁(yè)面的局部。不少設(shè)計(jì)師很注意考慮頁(yè)面的整體效果,卻比較少考慮滾動(dòng)瀏覽時(shí)候每個(gè)瀏覽器截取片段的效果。網(wǎng)頁(yè)的排版同平面媒體的排版一樣,需要注意圖片文字標(biāo)題等元素在頁(yè)面上呈現(xiàn)的效果的平衡,但是網(wǎng)頁(yè)排版更需要注意的是一個(gè)動(dòng)態(tài)的平衡,即無(wú)論頁(yè)面滾動(dòng)到何位置,在瀏覽器中呈現(xiàn)出來(lái)的效果應(yīng)該都是至少讓人在視覺(jué)上“舒服”的。
網(wǎng)頁(yè)設(shè)計(jì)排版與平面媒體排版大的區(qū)別在于:網(wǎng)頁(yè)設(shè)計(jì)排版有很多交互性的功能和動(dòng)態(tài)效果。所以排版的時(shí)候要考慮到更多的功能性需求以及動(dòng)態(tài)的視覺(jué)效果。由于這么多的元素要排列在頁(yè)面上,所以頁(yè)面在排版的時(shí)候需要考慮的情況也多了,對(duì)頁(yè)面元素排列的邏輯性要求也相對(duì)高了不少。這個(gè)時(shí)候,最簡(jiǎn)單的處理方法的就是假設(shè):假設(shè)用戶是你,你希望這個(gè)導(dǎo)航條在什么地方?通過(guò)什么樣的方式(靜態(tài)/動(dòng)態(tài)?)展現(xiàn)你會(huì)覺(jué)得使用方便?假設(shè)你是后臺(tái)的管理者,你在實(shí)際操作后臺(tái)之后,會(huì)產(chǎn)生什么樣的問(wèn)題?有什么好的解決方案?……這個(gè)在用戶體驗(yàn)當(dāng)中叫做“假想用戶”,是比較常用的方法。
最后要說(shuō)的是,關(guān)于排版(無(wú)論是平面設(shè)計(jì)排版還是網(wǎng)頁(yè)設(shè)計(jì)排版),最核心的成功元素是什么?是通過(guò)頁(yè)面的美術(shù)效果,引導(dǎo)用戶瀏覽信息,引導(dǎo)用戶進(jìn)入頁(yè)面想帶給用戶的氛圍。所以最好的設(shè)計(jì),應(yīng)該是“無(wú)設(shè)計(jì)”——請(qǐng)注意,“無(wú)設(shè)計(jì)”不是說(shuō)沒(méi)有設(shè)計(jì),而是整個(gè)設(shè)計(jì)渾然一體讓人感覺(jué)不到設(shè)計(jì)的痕跡。這樣的設(shè)計(jì)不會(huì)影響用戶對(duì)于信息的瀏覽,而且良好的排版層次會(huì)讓頁(yè)面的邏輯性更加明確,讓用戶產(chǎn)生良好的體驗(yàn),甚至可以通過(guò)設(shè)計(jì)中的一些技巧引導(dǎo)用戶主動(dòng)去瀏覽頁(yè)面最主要想呈現(xiàn)給用戶的信息,只有做到這個(gè)程度才算是成功的排版。雖然說(shuō)設(shè)計(jì)師最主要的工作是把頁(yè)面做的漂亮,但是希望大家不要忘記自己的設(shè)計(jì)最原始的用處是什么。
本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
網(wǎng)頁(yè)題目:網(wǎng)頁(yè)設(shè)計(jì)中的配色和排版問(wèn)題
網(wǎng)站地址:http://m.rwnh.cn/news19/311819.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊(cè)、定制開(kāi)發(fā)、全網(wǎng)營(yíng)銷推廣、做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)