網(wǎng)站建設(shè)中如何通過(guò)配色提升設(shè)計(jì)品質(zhì)（下）

三、選擇正確的色系
    明確配色目標(biāo)，確定主色以及色彩層級(jí)后，如何進(jìn)行下一步的配色？
    這時(shí)候我們可以根據(jù)不同的配色目標(biāo)來(lái)選擇合適的色系，豐富整個(gè)畫(huà)面的配色。需要注意的是，在豐富配色的同時(shí)，仍然要嚴(yán)格控制色彩層級(jí)，以保證整體色彩層級(jí)的精簡(jiǎn)。
1.巧用同色系，統(tǒng)一不單調(diào)
    同色系是指在色環(huán)上相距不超過(guò)45°的兩種顏色，我們可以選擇主色的同色系范圍內(nèi)的顏色來(lái)豐富整體配色。那么如何選擇同色系的顏色呢？
    首先在色環(huán)中確定顏色的位置，通過(guò)色環(huán)兩邊45°延展出我們所需要的同色系。

      在主色的同色系范圍內(nèi)，我們可以選出同色系顏色作為延展色，單獨(dú)使用或者組合成漸變色進(jìn)行使用。

      下面的案例頁(yè)面就是運(yùn)用同色系原理來(lái)進(jìn)行配色的?？梢钥吹?，整個(gè)頁(yè)面在保持色彩的統(tǒng)一的前提下，增強(qiáng)了畫(huà)面的層次和豐富性，從而提升了整個(gè)頁(yè)面的層次感和品質(zhì)感。

      同色系的配色特點(diǎn)是整體頁(yè)面統(tǒng)一而富有層次，從而傳遞出一種穩(wěn)定、專(zhuān)業(yè)的形象，適合絕大多數(shù)的場(chǎng)景使用，是最為簡(jiǎn)單和有效的配色方式。
    我們可以總結(jié)一下同色系的配色方法。首先確定主色，主色兩邊45°以?xún)?nèi)的同色系色彩范圍，在范圍中選取合適的單色作為輔助色，或者選取一段漸變色單獨(dú)使用。
2. 不同場(chǎng)景的對(duì)比色用法
    對(duì)比色是指在色環(huán)上相距120°-180°之間的兩種顏色（180°時(shí)則互為互補(bǔ)色）。處于對(duì)比色關(guān)系的兩種顏色，通常色相差異較大，能夠相互產(chǎn)生強(qiáng)烈的對(duì)比效果，我們可以利用這種原理來(lái)增強(qiáng)畫(huà)面的吸引力。
      在不同的場(chǎng)景中，對(duì)比色同樣有著不一樣的使用方式。在產(chǎn)品設(shè)計(jì)中，通過(guò)小面的顏色對(duì)比，可以加強(qiáng)主色的活力與整體豐富性；而在推廣設(shè)計(jì)中，通常會(huì)使用大面的的對(duì)比色在增強(qiáng)頁(yè)面的吸引力。
（1）產(chǎn)品界面中的對(duì)比色應(yīng)用
    產(chǎn)品界面的配色對(duì)于產(chǎn)品來(lái)說(shuō)至關(guān)重要，好的配色不僅能夠準(zhǔn)確地反映產(chǎn)品的調(diào)性，還能正確地引導(dǎo)用戶(hù)閱讀并理解產(chǎn)品。
    我們可以結(jié)合網(wǎng)易七魚(yú)的官網(wǎng)改版案例，來(lái)了解如何通過(guò)配色來(lái)提升官網(wǎng)的設(shè)計(jì)品質(zhì)。
    下圖是七魚(yú)的舊版官網(wǎng)頁(yè)面，在配色上，產(chǎn)品方認(rèn)為原來(lái)的配色過(guò)于單調(diào)和沉悶，希望可以讓整體更活潑一些。且網(wǎng)站的整體跳出率過(guò)高，希望我們能夠找到原因并通過(guò)改版解決這個(gè)問(wèn)題。

    首先第一步，需要找出舊版官網(wǎng)存在的問(wèn)題。這時(shí)候，我們就需要再次運(yùn)用前面所講的目標(biāo)分析法。通過(guò)不同維度的目標(biāo)分析，尋找頁(yè)面中存在的問(wèn)題。
    我們還是通過(guò)三個(gè)維度去分析問(wèn)題：
    信息傳遞維度：整體的配色過(guò)于單調(diào)，使頁(yè)面和信息缺少吸引力，導(dǎo)致用戶(hù)不想閱讀；其次插圖和ICON在配色和表現(xiàn)形式上都過(guò)于單調(diào)，表現(xiàn)力弱。
  引導(dǎo)操作維度：核心功能模塊邏輯展示混亂且繁雜，導(dǎo)致用戶(hù)無(wú)法正確理解內(nèi)容。
  品牌價(jià)值維度：品牌主色沉悶，整體品牌的品質(zhì)感弱；而且漸變色與品牌色差異過(guò)大，不夠統(tǒng)一。
    如何解決以上問(wèn)題？從何處下手？
    由于七魚(yú)首頁(yè)的修改涉及到整體官網(wǎng)的配色修改，單純從每個(gè)頁(yè)面入手并不能從根本解決問(wèn)題，容易造成整體官網(wǎng)配色不統(tǒng)一的情況。這個(gè)時(shí)候，我們就要從品牌配色入手，通過(guò)修改配色并制定新的設(shè)計(jì)規(guī)范，在整體上解決問(wèn)題。
    首先從品牌主色入手。經(jīng)過(guò)嚴(yán)格的討論，我們重新制定了七魚(yú)的品牌主色。為了解決顏色沉悶的問(wèn)題，我們選擇了接近原有主色，但更鮮亮且富有活力的藍(lán)色色作為主色。而輔助色上，為了讓七魚(yú)品牌更有溫度，我們選擇主色的對(duì)比色——橙色。
    藍(lán)色與橙色在小面積上的互相對(duì)比，可以互相襯托，讓兩種顏色更顯活力。

      我們以新的配色規(guī)范為基礎(chǔ)，重新制定了全新的七魚(yú)設(shè)計(jì)規(guī)范。規(guī)范中包含了配色的使用比例、不同的icon樣式與配色的結(jié)合方式等一系列的頁(yè)面細(xì)節(jié)，以保證規(guī)范可以完整、統(tǒng)一地落實(shí)到每個(gè)頁(yè)面和元素中。

      運(yùn)用新的配色規(guī)范進(jìn)行頁(yè)面設(shè)計(jì)時(shí)，要靈活地將配色與產(chǎn)品內(nèi)容相結(jié)合，讓配色更好的融于頁(yè)面中，而不是生搬硬套地將配色裝到頁(yè)面里（很多初級(jí)設(shè)計(jì)師在執(zhí)行規(guī)范時(shí)會(huì)出現(xiàn)類(lèi)似問(wèn)題）。
    比如我們?cè)趦?yōu)化首頁(yè)的主要功能模塊時(shí)，首先做的便是重新梳理產(chǎn)品功能的展示構(gòu)架，然后再結(jié)合新的設(shè)計(jì)形式和配色規(guī)范，讓新的規(guī)范發(fā)揮大的作用。

    在不同頁(yè)面的功能icon上，我們豐富了icon的表現(xiàn)形式，同時(shí)將新的對(duì)比色配色加入到每個(gè)icon元素中，增強(qiáng)了icon的活力和吸引力，讓每個(gè)icon看起來(lái)更精致。
      而在功能插圖中上，我們采用了與icon統(tǒng)一的配色和表現(xiàn)形式，讓頁(yè)面中的所有元素具有統(tǒng)一的品牌感。
      最終，我們將新的配色規(guī)范逐步落實(shí)到網(wǎng)易七魚(yú)所有的Web端和Mob端頁(yè)面中，使七魚(yú)的整體官網(wǎng)設(shè)計(jì)煥然一新。在新的官網(wǎng)頁(yè)面中，不僅提升了整體的設(shè)計(jì)品質(zhì)，同時(shí)也解決了前面分析的問(wèn)題，整體提升了15%的客戶(hù)留存率。
      通過(guò)這個(gè)案例我們可以發(fā)現(xiàn)，整體配色的改變，可以極大的提升官網(wǎng)對(duì)于用戶(hù)的第一印象。用戶(hù)往往在進(jìn)來(lái)的一瞬間就決定了對(duì)官網(wǎng)的印象，并最終影響用戶(hù)是否進(jìn)一步閱讀，而配色則是其中非常重要的一部分，正確的配色能夠讓用戶(hù)更愿意停留并閱讀內(nèi)容。
（2）推廣活動(dòng)頁(yè)面中的對(duì)比色應(yīng)用
    在推廣頁(yè)面的設(shè)計(jì)中，通常需要用營(yíng)造強(qiáng)烈的視覺(jué)沖擊，以達(dá)到快速吸引用戶(hù)并傳遞信息的目標(biāo)。這就需要大面積的對(duì)比色，來(lái)達(dá)到強(qiáng)烈的對(duì)比效果。而在較大面積使用對(duì)比色時(shí)，整體色彩的主次和整體平衡至關(guān)重要。
    我們可以來(lái)看一個(gè)案例：
      可以看到，整個(gè)頁(yè)面主由橙色和深藍(lán)紫色兩個(gè)主要對(duì)比色構(gòu)成。大面積的對(duì)比色產(chǎn)生了強(qiáng)烈的視覺(jué)沖擊，讓整個(gè)頁(yè)面充滿(mǎn)了吸引力。整個(gè)畫(huà)面用最強(qiáng)烈的對(duì)比色重點(diǎn)突出了兩個(gè)主要的人物角色，從而吸引用戶(hù)注意并進(jìn)行閱讀，最終將用戶(hù)引導(dǎo)至購(gòu)買(mǎi)入口。至此，整個(gè)頁(yè)面的任務(wù)也算是完成了。
    在推廣頁(yè)面中，我們需要注意的是，重點(diǎn)信息并非只能是文字內(nèi)容，也可以是最吸引用戶(hù)的畫(huà)面核心元素。
3. 嘗試更多的創(chuàng)新配色
    除了掌握以上的幾種基本色系的配色方法外，大家可以在此基礎(chǔ)上嘗試更多的配色風(fēng)格。比如在同色系、對(duì)比色系的基礎(chǔ)上，有目的地加入色彩元素豐富色調(diào)，在保持整體色彩層級(jí)的同時(shí)，加入更豐富的變化，從而達(dá)到配色目標(biāo)。

更豐富的“同色系”配色

更多彩的“對(duì)比色”配色

復(fù)古的平面風(fēng)配色

      而對(duì)于很多初學(xué)者來(lái)說(shuō)，我建議大家能夠首先明確配色的目標(biāo)，在配色時(shí)保持色彩層級(jí)的精簡(jiǎn)明確。在此基礎(chǔ)上，循序漸進(jìn)，逐步去嘗試更多地配色風(fēng)格。只有這樣，才能養(yǎng)成良好的配色習(xí)慣。

文章名稱(chēng)：網(wǎng)站建設(shè)中如何通過(guò)配色提升設(shè)計(jì)品質(zhì)（下）
URL地址：http://www.muchs.cn/news19/117619.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等

廣告

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