網(wǎng)頁設(shè)計中色彩搭配的運用

沒人希望你能成為米開朗基羅，但對顏色使用的基本了解是網(wǎng)頁設(shè)計的堅實先決條件。

顏色在潛意識里影響我們的思維和理性。我們一直面臨著顏色的選擇，從決定早上穿什么顏色的衣服開始，通常，我們會根據(jù)色彩傳遞的情緒和意愿來選擇穿什么衣服。比衣柜的選擇更重要的是你的品牌或網(wǎng)站的色彩選擇。

顏色研究和規(guī)劃是設(shè)計過程的重要部分，在開始設(shè)計之前，必須選擇適當(dāng)?shù)念伾杂行У貓?zhí)行品牌，價值傳遞和整體色調(diào)。

那么我們?nèi)绾卧诰W(wǎng)頁設(shè)計中使用顏色創(chuàng)造正確的情感呢?

在人類歷史上，大師級畫家和其他藝術(shù)家操控色彩的能力得到了全世界的認(rèn)可?，F(xiàn)如今，色彩的這種藝術(shù)形式在商業(yè)中得到了廣泛應(yīng)用，一開始是在廣告行業(yè)，現(xiàn)在是被用于網(wǎng)頁設(shè)計。色彩高深莫測，顏色使用的技能也得到不斷改進。

我們將探索色彩理論和配色方案的基本原理，然后檢查某些顏色的情感效果。

顏色理論

與顏色相關(guān)的主題浩如煙海，所以這里我們只談與 UI 設(shè)計相關(guān)的部分。我們可以將顏色理論分為 Web UI 設(shè)計的三個部分：

對比度

每一種顏色的陰影都有一個相反的 – 對比度遠遠大于任何其他顏色的色彩與之對應(yīng)。你可以使用下面的色輪來找到每個特定顏色的對面。只需在圓圈的另一端找到顏色。

網(wǎng)頁設(shè)計色彩互補

顏色并非總是相互矛盾，互補的顏色互相強調(diào)，與對比色相反，它們交相輝映出最好的彼此。這些是在色輪上彼此相對的顏色，例如，紫色的補充是綠色的。

網(wǎng)頁設(shè)計色彩活力

每種顏色都會引起特定的心情：溫暖的顏色(紅色，橙色，黃色)傾向于激勵用戶，使他們更加警覺，而較暗的色彩(綠色，藍色，紫色)往往更加輕松和寧靜。 CNN 在其官網(wǎng)的頂部導(dǎo)航中使用紅色 banner 來提高警覺性，顏色決定適合該網(wǎng)站的突發(fā)新聞內(nèi)容。

網(wǎng)頁設(shè)計中的色彩理論不僅僅是一個視覺裝飾，它可以對你的業(yè)務(wù)產(chǎn)生改變游戲規(guī)則的影響。

顏色的情感含義

不能否認(rèn)情感和顏色之間的聯(lián)系：事實上，人類已經(jīng)記錄了中世紀(jì)以來顏色的心理影響。自然，任何網(wǎng)頁設(shè)計師都想利用這一點，因為正確的顏色能為你的網(wǎng)站創(chuàng)造正確的心情和氣氛。

網(wǎng)頁設(shè)計色彩：紅色

傳遞：力量，重要性，青春

作為最刺激的顏色，紅色對于增加血液循環(huán)是如此有效，它代表著激情和力量，紅色是能吸引最多注意的顏色，所以通常被用于警告和重要通知。

紅色非常適合 No Way NSA 網(wǎng)站，其目的是喚醒對于來自 NSA 威脅的感知。在單頁網(wǎng)站的第一部分使用紅色是特別聰明，因為它通過向下滾動來提醒人們注意主要信息，同時生理誘導(dǎo)人們“走出危險區(qū)域”。 當(dāng)然，這只會讓用戶參與更多的內(nèi)容。

然而，這可能對你不利，因為紅色可以煽動憤怒，或至少過度刺激。 如果你想要一個更輕松的氣氛，請謹(jǐn)用(或至少在較淺的陰影)或不用。

網(wǎng)頁設(shè)計色彩：橙色

傳遞：友好，能量，獨一無二

作為最暖的暖色調(diào)，橙色是獨一無二的。 作為原色，它可以吸引和激勵，作為次要的顏色，它也以不顯眼的方式保留這些屬性。橙色也有助于創(chuàng)造運動和能量的感覺。

除了作為品牌風(fēng)格的一部分，橙色與芬達所要表達的光明和卡通畫面網(wǎng)站很相襯。 顏色顯示創(chuàng)造力，同時保持熟悉度。

網(wǎng)頁設(shè)計色彩：黃色

傳遞：幸福，熱情，復(fù)古(深色調(diào))

黃色是更通用的顏色之一，取決于色調(diào)。

明亮的黃色是最有活力的顏色，沒有紅色的嚴(yán)重性。 黃色的中間色調(diào)給人的舒適感，同時仍然感覺振奮。 深色調(diào)(包括金色)可以給人復(fù)古的印象，并提供永恒，智慧和好奇心的氛圍。

上圖是網(wǎng)頁設(shè)計公司 Flash Media 的例子，黃色的深色散出了能量，好奇心和權(quán)威。 這對于一個公司來說很有意義，他們的咨詢和技能很有價值。

網(wǎng)頁設(shè)計色彩：綠色

傳遞：增長，穩(wěn)定，金融主題，環(huán)保主題

綠色緩和了暖色調(diào)和冷色調(diào)之間的差距，雖然往往是更酷的顏色。這意味著綠色有與藍色相同的放松效果，但仍然保留一些黃色的激勵品質(zhì)。因此，它創(chuàng)造了一個非常平衡和穩(wěn)定的氣氛。 黑暗的陰影發(fā)出更多的錢/富裕的感覺，你可以在 Ameritrade 上看到綠色。

網(wǎng)頁設(shè)計色彩：藍色

傳遞：平靜，安全，開放(更淺的色調(diào))，可靠性(更深色調(diào))

像黃色，藍色的意義根據(jù)色調(diào)大不相同。所有的藍色是普遍放松和安全，但較淺的陰影似乎更加友好，而較暗的似乎更沉悶。 社交媒體網(wǎng)站，如 Twitter 和 Facebook ，采用更輕或中等的色調(diào)，而企業(yè)網(wǎng)站喜歡更重更可靠的色調(diào)。

活動設(shè)計機構(gòu) Van Vliet&Trap 巧妙運用深藍色，通過在背景中的花中使用藍色，他們在視覺上提示他們在花藝設(shè)計的專業(yè)知識，同時也散發(fā)信任和可靠性。這是很有意義的，因為他們計劃高可見度(和有點神經(jīng)緊張)事件，如婚禮。

網(wǎng)頁設(shè)計色彩：紫色

傳遞：奢華，浪漫(淺色調(diào))，神秘(深色調(diào))

在歷史上與皇族相關(guān)聯(lián)，紫色保留了豪華的語調(diào)，甚至到頹廢的點。

紫色表示一般的奢侈和財富，使它成為時尚和奢侈品(甚至巧克力，像上面的Cadbury例子)的流行選擇。 較淡的色調(diào)如薰衣草(帶粉紅色的色調(diào))被認(rèn)為是浪漫的，而較深的色調(diào)似乎更加豪華和神秘。

網(wǎng)頁設(shè)計色彩：黑色

傳遞：力量，柔順，復(fù)雜

作為 最強的中性色，黑色存在于幾乎每個網(wǎng)站。

它可以取決于其支持顏色而具有不同的特性，或者如果過量使用則占據(jù)所有這些特性。 它在中性的力量使它成為長塊的文本的選擇的顏色，但作為一個基本的顏色可以給人的印象，柔滑，復(fù)雜，甚至邪惡。

對于大多數(shù)網(wǎng)站，黑色能創(chuàng)造瞬間的復(fù)雜性和永恒的感覺。當(dāng)與白色字體配合使用時，優(yōu)雅的感覺特別強烈，并且設(shè)置了一個極簡主義的布局，你可以在 Bose 的“Dream and Reach”微網(wǎng)站中看到。

網(wǎng)頁設(shè)計色彩：白色

傳遞：清潔，美德，簡單

白色與西方文化中的美德相關(guān)聯(lián)，是與純潔和無辜最相關(guān)的顏色。

極簡主義和簡單的網(wǎng)站最常使用它作為背景。跟其他顏色相比，白色是最不吸引注意力的，所以它最能強調(diào)頁面上的其他顏色。

這對于藝術(shù)家 Kaloian Toshev 的 awwwards 獲勝網(wǎng)站尤其有效。白色背景吸引了對他充滿活力的藝術(shù)品的注意，同時創(chuàng)造了一個藝術(shù)畫廊優(yōu)雅的光環(huán)。

網(wǎng)頁設(shè)計色彩：灰色

傳遞：中立，形式，憂郁

雖然在某些情況下，它可能看起來沉思或悲傷，但灰色在傳統(tǒng)或?qū)I(yè)領(lǐng)域是很流行的選擇。然而，灰色的大優(yōu)點之一在于它的色調(diào)變化 – 熟練運用，在白黑之間跳躍，陰影的改變，能體現(xiàn)出定制的美感。

當(dāng)與更明亮的顏色配合并呈現(xiàn)在一個平面的用戶界面，灰色背景的 awwwards 與它沉悶的風(fēng)格相比，感覺更有現(xiàn)代感。

網(wǎng)頁設(shè)計色彩：米色

傳遞：周圍顏色的特點

米色是顏色的通配符，因為它的主要用途是突出其他顏色。

米色很鈍，雖然可以用來象征謙卑。 然而，它通常承擔(dān)襯托它周圍的顏色的特點，使其成為一個有趣的設(shè)計工具。由于這些原因，米色幾乎總是次要或背景顏色。

深色的米色(如 Dishoom 網(wǎng)站上)將創(chuàng)造一種土質(zhì)和幾乎紙狀的紋理，而較淺的色調(diào)感覺更新鮮。在這種情況下，圍繞品牌名稱的較淺的陰影，向外變暗，幫助給餐廳創(chuàng)造一種取自大地精華的新鮮食材的感覺。

網(wǎng)頁設(shè)計色彩：象牙色

傳遞：舒適，優(yōu)雅，簡約

在情感反應(yīng)方面，象牙色(和奶油)是白色的輕微變化。

象牙色比白色更溫暖，在體現(xiàn)同樣的簡約和互補的同時，能給人一種舒服的感覺。象牙色應(yīng)該被用來代替白色，以軟化它和更暗的顏色之間的對比度。對于 art in my coffee 網(wǎng)站，橙色/棕色被添加到奶油背景(看起來有點微灰色)，以創(chuàng)造一種溫暖的感覺。

網(wǎng)頁設(shè)計配色方案

每個網(wǎng)站都有一個配色方案，在它的主要區(qū)域使用主要顏色。正如我們一直在討論的，這些顏色的重復(fù)使用將影響用戶的心態(tài)和心情，通常是潛意識，所以選擇它們會很好。

雖然有很多不同的方式來把顏色混合在一起，我們將關(guān)注3個最成功，最常見的：

三元組

三元組是三個結(jié)構(gòu)中最基本和平衡的。使用活力和互補，但偏離了棘手的對比，三元結(jié)構(gòu)是最安全和最可靠的方案。在12步色輪上，選擇彼此相隔120度的任意三種顏色：一種顏色用于背景，兩種顏色用于內(nèi)容和導(dǎo)航。

復(fù)合(分裂互補)

這個配色方案略微復(fù)雜，但如果用得好，可以收到不錯的效果。該概念使用四種顏色：兩個對比對和兩個互補對。

下圖中 Florida Flourish 的配色就是很好的例子。紅色和綠色的對比與文本標(biāo)簽和植物，加上沙漠上面的藍色和橙色的天空。同時，紅色/橙色和藍色/綠色的補充讓整個視圖很協(xié)調(diào)。

類似

最后有類似的方案，專注于互補色。真正突出了所選擇的顏色的活力，例如，一個紅橙黃色的類似方案將看起來非?；顫姾突顫?。 雖然這個方案相對容易拉開，訣竅是決定使用哪種顏色的活力，因為它會被夸大。

通過使用藍色，綠松石和綠色的類似網(wǎng)站， Blinksale 創(chuàng)建一個柔和，甚至具有安全氣氛的網(wǎng)站。注意他們?nèi)绾问褂脤Ρ鹊狞S色來吸引注意他們的號召力。

我們剛剛討論的只是顏色理論如何增強你的 UI 設(shè)計的基礎(chǔ)，但是沒有限制如何更深入的去探索對你網(wǎng)站色彩的應(yīng)用。

常用的配色協(xié)助工具

有很多工具能幫助你把顏色理論付諸實踐。通過查看預(yù)制的調(diào)色板，不需要從頭開始。

Adobe Color CC – 以前叫 Kuler ，這是最受信任的配色工具之一。

Paletton – 如果你需要一個快速上手，簡單易用的工具，Paletton很適合上手。

Flat UI Color Picker – 對于平面UI設(shè)計，這是一個非常有用和方便的顏色選擇工具。

沒人希望你能成為米開朗基羅，但對顏色使用的基本了解是網(wǎng)頁設(shè)計的堅實先決條件。正如我們剛才解釋的，顏色帶來了很多額外的效果，但有時卻很容易被忽視。無論你選擇什么顏色，他們對設(shè)計作為一個整體有一個明確的影響 – 從交流對比或相似性，到喚起精確的情緒。

創(chuàng)新互聯(lián)同時為你提供，APP設(shè)計資訊，點擊可直接預(yù)覽。

當(dāng)前題目：網(wǎng)頁設(shè)計中色彩搭配的運用
URL地址：http://www.bm7419.com/news14/162164.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、搜索引擎優(yōu)化、做網(wǎng)站、ChatGPT、品牌網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(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)