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

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

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

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

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

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

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

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

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

更豐富的“同色系”配色

更多彩的“對比色”配色

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

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

當(dāng)前名稱：網(wǎng)站建設(shè)中如何通過配色提升設(shè)計品質(zhì)（下）
網(wǎng)站鏈接：http://www.muchs.cn/news/117619.html

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

廣告

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