網(wǎng)站建設(shè)寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南發(fā)布者：本站     時(shí)間：2022-03-23 13:03:12

網(wǎng)頁設(shè)計(jì)中最基本的原則之一是，不管你花多長時(shí)間創(chuàng)造一個(gè)華麗的設(shè)計(jì)，其最終的角色都是這場(chǎng)秀中真正的明星——內(nèi)容的襯托

前言：本文是樓主翻譯的文章，對(duì)于已經(jīng)看過類似譯文的同學(xué)請(qǐng)自行忽略~

 

     我仍然清楚地記得我最早的一次美術(shù)課，那時(shí)我還是一個(gè)小小的、對(duì)凡事都充滿渴望的孩子，我擺放出一大堆漂亮的彩色顏料。我仍然記得當(dāng)我第一次看到原色與另一種顏色混合變成第二種顏色時(shí)的那種興奮，并且我想，既然兩種顏色能創(chuàng)造出一種全新的美麗色彩，那所有顏色在一起肯定會(huì)更棒！最終，我非常失望的發(fā)現(xiàn)，不論我怎樣混合它，只要我按照我自己的想法使用所有的顏色最終只能得到一種糟糕的顏色，只能用“慘不忍睹”來形容！

    多年以后，當(dāng)我還是一個(gè)羽翼未豐的網(wǎng)頁設(shè)計(jì)師的時(shí)候，我又經(jīng)歷了相同的過程。在學(xué)習(xí)的過程中，我不可避免地掉進(jìn)了這樣的陷阱——使用太多種顏色，或者是將多種顏色以一種錯(cuò)誤的方式進(jìn)行組合，最終都使結(jié)果有一點(diǎn)“慘不忍睹”。

    我開始努力學(xué)習(xí)如何創(chuàng)建網(wǎng)頁的配色方案，同時(shí)我發(fā)現(xiàn)了許多極好的關(guān)于色彩理論的知識(shí)。我讀了色相（Hue）、色彩（Tint）、色度（Shade）、色調(diào)（Tone）、飽和度（Saturation）和明度（Brightness），還有類比色、單色、三元色、互補(bǔ)色以及混合色配色方案。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

     然而，沒有一個(gè)實(shí)際操作的框架去應(yīng)用這些信息，我發(fā)現(xiàn)起初的時(shí)候，這些色彩理論并沒有幫助我更好的進(jìn)行網(wǎng)站配色設(shè)計(jì)。事實(shí)上，直到我通過反復(fù)試驗(yàn)來開始創(chuàng)建可靠的配色方案時(shí)，我所看過的所有色彩理論才開始變得有意義。

    在這個(gè)過程中，我撿起一些我最開始就希望知道的網(wǎng)站配色“安全指南”。最開始的時(shí)候，全部的色彩理論不一定是你需要的。通常在學(xué)習(xí)實(shí)踐的過程中你需要像“滾雪球”一樣，一點(diǎn)一點(diǎn)添加理論知識(shí)。

    在本教程中，我將與你分享六條心得。你可以遵循“不會(huì)錯(cuò)”指南基本掌握色彩在網(wǎng)頁設(shè)計(jì)中的運(yùn)用。這些不是規(guī)則，你可以在你的職業(yè)生涯中創(chuàng)建更多的配色方案，使它往完全不同的方向發(fā)展。相反，這只是一個(gè)起點(diǎn)，一條教你怎樣避免在網(wǎng)頁設(shè)計(jì)中的第一次“試水”不要變得 “慘不忍睹”的安全指南。

1. 配色方案是畫布，不是畫

   網(wǎng)頁設(shè)計(jì)中最基本的原則之一是，不管你花多長時(shí)間創(chuàng)造一個(gè)華麗的設(shè)計(jì)，其最終的角色都是這場(chǎng)秀中真正的明星——內(nèi)容的襯托。網(wǎng)頁設(shè)計(jì)中不應(yīng)該讓配色比內(nèi)容展示更加“熱鬧”。你的設(shè)計(jì)應(yīng)該是在后臺(tái)的，幫助將網(wǎng)站的內(nèi)容推向前臺(tái)。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

     用Photoshop或者Sketch等軟件設(shè)計(jì)網(wǎng)站的時(shí)候，創(chuàng)建設(shè)計(jì)的過程往往是相互獨(dú)立的。有些設(shè)計(jì)單個(gè)看起來很不錯(cuò)，也能被你的客戶所接受，但是當(dāng)它真正被設(shè)計(jì)成網(wǎng)頁的時(shí)候，不適當(dāng)?shù)呐渖鶗?huì)分散訪客的注意力。事實(shí)上，網(wǎng)頁設(shè)計(jì)過程與內(nèi)容是緊密聯(lián)系在一起的，但有許多高質(zhì)量的網(wǎng)站設(shè)計(jì)卻幾乎空無內(nèi)容。

    這是一個(gè)好主意——將你希望出現(xiàn)在這個(gè)位置的內(nèi)容樣例在設(shè)計(jì)軟件里或直接在代碼里先擺放出來，然后圍繞它做設(shè)計(jì)。尤其是在與特定風(fēng)格的照片或圖像有關(guān)的時(shí)候，這樣你可以確保你的設(shè)計(jì)與它們搭配和諧。想象一下，你的網(wǎng)站內(nèi)容是一個(gè)獨(dú)特的個(gè)體，你必須為它設(shè)計(jì)一個(gè)完美的配件。

2. 從簡(jiǎn)單的灰度模式開始

     你可以為你的主背景和文本從無數(shù)的色彩組合中進(jìn)行挑選。然而，我的建議是先掌握最簡(jiǎn)單的，白色或淺灰色背景搭配深灰色的文本。

     如果你觀察流行的網(wǎng)站所選擇的模板或主題，你會(huì)發(fā)現(xiàn)它們中的大多數(shù)都是使用深灰色的文字搭配白色或淺灰背景，這是有充分的理由的。這種組合你基本保證了為訪客提供可讀性，并允許基于內(nèi)容的文本和圖像進(jìn)入前景。

     利用一些示例內(nèi)容制定一個(gè)基本的灰度布局，例如：

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

  一般來說，你應(yīng)該避免使用純黑的文本，深灰色相對(duì)來說更易閱讀。一個(gè)相對(duì)舒適的范圍是#333333至#666666。

   基于上述，在任何文本主體下，最保險(xiǎn)的背景色是全白#FFFFFF。對(duì)于其他的背景元素，背景色的范圍可以從#FFFFFF至#CCCCCC.

   再次聲明，這些并不是你必須使用的顏色準(zhǔn)則，僅僅只是你可以開始安全設(shè)計(jì)的一些指南。

3. 只選擇一種強(qiáng)調(diào)色

   配色方案出錯(cuò)的最常見的地方就是顏色使用過多。你使用的顏色越多，你想要將它們都保持在控制中就越困難。所以一開始，在灰度基礎(chǔ)之上只添加一種額外的顏色來強(qiáng)調(diào)諸如鏈接、某些標(biāo)題、菜單、按鈕等等元素是很有用的。你的強(qiáng)調(diào)色可以是藍(lán)色、綠色、紅色或其它任何你喜歡的顏色。

   開始在你的基礎(chǔ)圖上拉一個(gè)強(qiáng)調(diào)色的矩形框，這樣你可以衡量顏色是否與頁面上所有的元素匹配。然后打開顏色選擇器，選擇在顏色面板右上角四分之一中心位置的顏色。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

上下移動(dòng)滑塊，選擇一個(gè)你認(rèn)為適合你設(shè)計(jì)的顏色。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

至此，你已經(jīng)使用了三種基本顏色：你的背景色，文本色，以及一種強(qiáng)調(diào)色。將來你可以，也應(yīng)該使用多個(gè)強(qiáng)調(diào)色，但是現(xiàn)在最好只是想一想。如今你已經(jīng)使用三種顏色了，請(qǐng)熟悉這三種顏色，當(dāng)你更自信的時(shí)候，你可以添加更多的顏色。

你已經(jīng)學(xué)會(huì)了：

   你學(xué)會(huì)了怎樣選擇“色相”。簡(jiǎn)而言之，色相就是一種基本色。當(dāng)你上下移動(dòng)滑塊的時(shí)候你就會(huì)看到你的顏色選擇器中的“H”值在不斷變化。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

 “H”代表色相，一旦你選擇強(qiáng)調(diào)色，文本框中數(shù)值就是色相的值。

4. 如果有疑問，使用藍(lán)色

    如果你對(duì)選擇什么強(qiáng)調(diào)色有任何疑問，請(qǐng)使用藍(lán)色。藍(lán)色通常是最靈活的顏色，適合多數(shù)的網(wǎng)站類型。紫色和黃色之類的顏色可以是很活潑的，但是如果使用不當(dāng)?shù)脑挘ⅠR會(huì)變得很花哨。

    另一方面，你可以在以藍(lán)色為強(qiáng)調(diào)色的基礎(chǔ)上隨意發(fā)揮，但你也不能走的太遠(yuǎn)。如果你不知道從哪里開始學(xué)習(xí)或者在項(xiàng)目中使用什么顏色的時(shí)候，就用藍(lán)色就對(duì)了。如果你要選擇特別的藍(lán)色，你可以選擇深藍(lán)色（H值235）至淺綠色（H值190）的范圍以保證自己在安全的領(lǐng)地。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

    在我的布局示例中，我選擇值為205的色相。當(dāng)你已經(jīng)選定了強(qiáng)調(diào)色，將它添加到任何你認(rèn)為必需的位置。假如你在按鈕或任何其他有文字的區(qū)域使用了強(qiáng)調(diào)色，也要相應(yīng)地改變文本的顏色。在這個(gè)例子中，我將強(qiáng)調(diào)色區(qū)域之上的文字改成了白色。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

5. 為強(qiáng)調(diào)色添加變化

    一旦你選定了強(qiáng)調(diào)色，將色相（H）滑條位置保持不變。你現(xiàn)在需要為你的設(shè)計(jì)添加額外的顏色，不過為了讓事情變得更簡(jiǎn)單，這些顏色都是你已經(jīng)選擇的強(qiáng)調(diào)色的變色。

    在顏色選擇器上強(qiáng)調(diào)色周圍拖動(dòng)選色點(diǎn)來創(chuàng)建變色。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

在以下這些元素上使用變色：

懸停效果

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

邊框

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

強(qiáng)調(diào)色上的文本

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

漸變

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

光和陰影的效果

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

6. 避開調(diào)色面板右上角的位置

    顏色選擇器上右上角的位置是高純度的顏色。右上角的顏色像一級(jí)方程式賽車，它們的執(zhí)行力驚人，并且非常吸引人，但是我們一般需要足夠的經(jīng)驗(yàn)才能很好地駕馭它們。如果沒有經(jīng)驗(yàn)的話，它們可能會(huì)造成事故，所以最好去嘗試使用更緩和的顏色。

    這就是為什么我在本教程的第三節(jié)讓你選擇右上角四分之一中心位置的顏色，以確保以一種相對(duì)柔和的顏色開始。

    為了說明這一點(diǎn)，看一下假如我只改變?cè)O(shè)計(jì)的色相，不再動(dòng)顏色選擇器，會(huì)是什么效果。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

    它仍然看起來非常漂亮，對(duì)吧？但是如果我把選色點(diǎn)拖拽到顏色選擇器的右上角，它突然就變得不太好了。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

唉媽呀我的眼睛！如果你確定不想燒焦訪問者的眼睛，遵循一般的指南避開顏色面板上右上角的位置來進(jìn)行調(diào)色。

你剛剛學(xué)會(huì)了：

   在上兩個(gè)部分你已經(jīng)學(xué)會(huì)了運(yùn)用色彩理論的幾個(gè)不同的方面。您學(xué)會(huì)了如何使用：

飽和度和明度

   當(dāng)你在顏色選擇器上拖動(dòng)選色點(diǎn)的時(shí)候，你會(huì)看到“S”和“B”的值在改變，這分別代表“飽和度”和“亮度”。同時(shí)你會(huì)也看到色相的值保持不變。所以你是通過改變基礎(chǔ)色的飽和度和亮度來創(chuàng)建變色的。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

飽和度和色彩

   飽和度生動(dòng)地表達(dá)了你的顏色。舉個(gè)例子來說，想象一下“我的白襯衫被溢出的紅酒滲透了”。在顏色選擇器上，飽和度取決于有多少的白色與你的基本色進(jìn)行混合。白色越少，飽和度越高。

   當(dāng)你向右拖動(dòng)選色點(diǎn)的時(shí)候，你減少了白色的量，提高了飽和度，因此“S”值上升了。當(dāng)你向左拖動(dòng)選色點(diǎn)的時(shí)候，你增加了白色的量，降低了飽和度，因此“S”值下降了。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

   這種將基本色與白色混合的方式也叫做創(chuàng)建一種“色彩”。這個(gè)詞來自于顏料混合，就是將白色的顏料與彩色的顏料進(jìn)行混合。

亮度與色度

    亮度是往你的顏色中混合多少黑色。黑色越少，亮度越大。

    當(dāng)你向上拖動(dòng)選擇點(diǎn)的時(shí)候，你減少了黑色的量，提高了亮度，因此，拾色器上的“B”值就上升了。當(dāng)向下拖動(dòng)選擇點(diǎn)的時(shí)候，你增加了黑色，“B”值就下降了。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

    這種將基本色與黑色混合的方式也叫做創(chuàng)建“色度”。這同樣來自于顏料混合，就是將黑色的顏料與彩色的顏料進(jìn)行混合。

色調(diào)

   當(dāng)你用灰色混合基本色時(shí)就創(chuàng)建了“色調(diào)”。當(dāng)你從色板的右上角挪出的時(shí)候，你同時(shí)降低了飽和度和亮度，也就是同時(shí)增加了白色和黑色（灰色），也就創(chuàng)建了色調(diào)。因此基本上任何時(shí)候只要你的飽和度和亮度都不到100%，這就是一種色調(diào)。

   同樣，這個(gè)術(shù)語來自于顏料混合，將灰色顏料與一種彩色顏料混合。這也就是詞語“調(diào)淡”的由來。很酷吧？

單色配色方案

   “單色”配色方案是你使用基本色以及基于基本色調(diào)整顏色的濃淡、陰影及色調(diào)來進(jìn)行擴(kuò)展。你剛剛已經(jīng)學(xué)習(xí)過了所有這些術(shù)語在實(shí)踐設(shè)置中的含義。因此通過挑選一種強(qiáng)調(diào)色以及它的變色，你實(shí)際上已經(jīng)創(chuàng)建了單色的配色方案。

寫給初學(xué)者的6條網(wǎng)頁設(shè)計(jì)安全配色指南

接下來呢？

   在灰度基礎(chǔ)上繼續(xù)練習(xí)你的單色配色方案直到你已經(jīng)非常自信。試著用不同的色相作為你的強(qiáng)調(diào)色來進(jìn)行創(chuàng)作，嘗試在使用中改變飽和度和亮度。

   當(dāng)你覺得得心應(yīng)手的時(shí)候，繼續(xù)添加一個(gè)額外的強(qiáng)調(diào)色。我建議你在第一次嘗試的時(shí)候使用橙色和藍(lán)色，因?yàn)樗鼈兪窍嗵幾詈椭C的“二人組”。然后嘗試綠色和藍(lán)色，在我的經(jīng)驗(yàn)中，這是第二簡(jiǎn)單的。這些組合是最容易打動(dòng)客戶的。

    為了幫助你更好地理解網(wǎng)頁設(shè)計(jì)的配色方案，你能做的最好的事絕對(duì)是利用瀏覽器擴(kuò)展插件顏色取樣器來抓取顏色樣例，比如說Colorzilla，通過它來開始研究經(jīng)驗(yàn)豐富的設(shè)計(jì)師是怎么做的。當(dāng)你瀏覽網(wǎng)頁時(shí)，看到一個(gè)非常棒的配色方案，用顏色取樣器將配色方案分離出來。分析樣例中每個(gè)色相，看看什么飽和度和亮度水平效果最好。也要注意這些顏色都是怎么相互搭配的。