青青河边草免费观看电视剧新浪,青檬在线电视剧在线观看,青丝影院电视剧播放,青柠影视剧大全免费观看黑暗荣耀,青青河边草电视剧免费全集完整版第一集,青春期的妹妹,青青河边草免费观看西瓜,青青河边草高清免费版新闻

更負(fù)責(zé)的品牌升級戰(zhàn)略實(shí)效機(jī)構(gòu)

400-021-0866

首頁 作品案例 品牌全案 服務(wù)項(xiàng)目 品牌升級 豪禾智庫 關(guān)于豪禾 聯(lián)系我們

所在位置：

首頁> 網(wǎng)站設(shè)計(jì)資訊> 正文

平面設(shè)計(jì)和網(wǎng)站設(shè)計(jì)配色方案技巧指南

時(shí)間：2016-06-27 15:19:23 來源：品牌設(shè)計(jì)公司 閱讀量： 作者：豪禾品牌咨詢
　　當(dāng)你在設(shè)計(jì)網(wǎng)站時(shí)，采用的顏色會(huì)傳達(dá)出截然不同的思想和情感，所以為你的品牌選擇合適的顏色非常的重要。例如，如果你給美國的頂級沙灘設(shè)計(jì)網(wǎng)站，和你創(chuàng)造一個(gè)像Groppon一樣的在線商城，你肯定希望用不同的配色設(shè)計(jì)它們，因?yàn)樗鼈儌鬟_(dá)的是不同的信息——一個(gè)網(wǎng)站傳達(dá)的是讓人心情放松，而另一網(wǎng)站傳達(dá)的是由于做了一次非常棒的交易而讓心跳加速興奮。
　　本指南探討的主題是關(guān)于網(wǎng)站和平面設(shè)計(jì)的色彩。學(xué)習(xí)先進(jìn)的色彩理論最好的方法，是通過實(shí)踐，而不是理論。但是為了提高，你必須有一個(gè)起點(diǎn)。除了有用的配色技巧和觀點(diǎn)，你還可以發(fā)現(xiàn)許多寶貴的資源散落在整篇文章中。
　　顏色的目的
　　從藝術(shù)的角度來探索色彩，它可以使主題更加鮮明。這就是一張繪圖和一幅繪畫主要的區(qū)別，盡管它們能傳達(dá)相似的信息。這個(gè)道理適用于任何設(shè)計(jì)包括網(wǎng)頁設(shè)計(jì)。
平面設(shè)計(jì)和網(wǎng)站設(shè)計(jì)配色方案技巧指南
　　將色彩添加到設(shè)計(jì)中使畫面的表達(dá)更加豐富。圖形、字體、按鈕和超鏈接，一切都可以在某種程度上匹配總體的基調(diào)。例如，葡萄園網(wǎng)站的顏色和水族館網(wǎng)站的顏色是不同的。為什么呢？因?yàn)檫@是兩種完全不同類型的網(wǎng)站，它們試圖傳達(dá)不同意義、目的或者感情給自己的目標(biāo)受眾。
　　因此，當(dāng)在考慮顏色時(shí)，記住，顏色很少用來做頁面的結(jié)構(gòu)的區(qū)分和搭建。你應(yīng)該用灰色來構(gòu)建一個(gè)布局，就可以讓人了解到界面的整體結(jié)構(gòu)關(guān)系。訪問者在瀏覽網(wǎng)站界面時(shí)，色彩可以帶給訪問者更加豐富的信息內(nèi)容。
　　HSV色彩模型
　　大多數(shù)色彩理論文章討論的觀點(diǎn)是，每種色彩背后的思想和它們表現(xiàn)出的情感。我覺得感情的話題太主觀，雖然它是準(zhǔn)確的。選擇一個(gè)配色方案，不僅僅是憑情感，相反，我要研究顏色是如何工作的，以及如何開始自己練習(xí)。
　　一個(gè)良好的開端是色相(Hue)、飽和度(Saturation)、明度(Value)（或HSV）。你可能理解這些測量顏色的術(shù)語，但是我想告訴你這些值確實(shí)非常重要。明度是你在黑白照片上獲得的信息——就是不同色度的灰色。把一個(gè)網(wǎng)站截圖,將它轉(zhuǎn)換為灰度圖，你就會(huì)看到它的原始值。
　　這就是說，明度是明暗程度，表示顏色的明與暗，也被稱作亮度。色相是最基本的顏色術(shù)語，通常用來衡量實(shí)際的顏色，如藍(lán)色、紅色或黃色。色相是相當(dāng)簡單的，你可以通過記傳統(tǒng)的色輪來記住它的規(guī)律。
　　飽和度（或純度）與一個(gè)顏色的純度和鮮艷度相關(guān)?？梢园扬柡投瓤闯墒巧{(diào)的強(qiáng)與弱、濁與清。大多數(shù)人識(shí)別飽和度就是通過對比香蕉黃和粉筆黃的區(qū)別。粉筆色更為“發(fā)白”，似乎缺少鮮艷度，因?yàn)樗娘柡投雀?。從下圖的Munsell color system（孟塞爾顏色系統(tǒng)）圖表中，可以獲得更好的理解：
孟塞爾顏色系統(tǒng)圖
　　這個(gè)圖是值得我們?nèi)ダ斫獾?，因?yàn)轭伾际窍鄬Φ?。所以，一個(gè)“冷”色，像藍(lán)色用在淺色中就不那么冷了，同樣的“暖”色，在暗色中也就不那么暖了。顏色系統(tǒng)是一個(gè)奇怪的話題，因?yàn)樗３Ｅc其它顏色相互作用。這樣聽起來好像是沒有意義的，但你可以把它作為學(xué)習(xí)的例子，在實(shí)際的項(xiàng)目中不斷練習(xí)。
　　Harmonic模式
　　當(dāng)選擇一個(gè)配色方案時(shí)，你有很多不同的模式可以遵循。誠然不是每個(gè)人都懂得如何挑選顏色，幸好網(wǎng)絡(luò)上有很多方便的資源，來幫助我們完成這個(gè)任務(wù)。我認(rèn)為這些色彩調(diào)和的網(wǎng)頁做的很出色，但是讓我們討論一些更有趣的選擇吧。
　　互補(bǔ)色是色輪上相對的兩個(gè)顏色，它們之間的色彩對比非常強(qiáng)烈。例如，紫色按鈕在黃色背景上非常的突出，因?yàn)樗鼈兪歉邔Ρ榷鹊呐渖?。?dāng)然，這還取決于每一種顏色的飽和度，通過實(shí)踐來理解是最好的。請記?。簩αΡ龋?/span>
互補(bǔ)色
　　相近色在色輪上緊鄰彼此。很顯然這樣的配色方案不會(huì)產(chǎn)生高對比度。但在設(shè)計(jì)圖形、banner、紋理或者背景，這些需要匹配整個(gè)網(wǎng)頁色系的元素時(shí)，這是非常實(shí)用的。畢竟在總體布局上，并非一切都應(yīng)該是需要高對比度。
　　三色式是在色輪上等距隔開三個(gè)獨(dú)立的顏色，三種顏色在色輪上要呈正三角分布。當(dāng)要擺弄這種配色方案時(shí)，一定要選出一種色彩作為主色，另外兩種作為輔助色，平衡色彩，決定它們應(yīng)該如何融入整體布局。飽和度在其中扮演重要的角色，但是整體的配色方案仍然不會(huì)因此發(fā)生大的變化。
三色式
　　分裂互補(bǔ)色非常像前面的互補(bǔ)色方案，但稍微有些變化。該配色方案是從色輪上的一個(gè)點(diǎn)開始，搭配與它相對的兩個(gè)相鄰色，使用相近色來代替互補(bǔ)色中的一個(gè)。分裂互補(bǔ)色的對比依然非常強(qiáng)烈，但它并不會(huì)像互補(bǔ)色搭配那樣刺目，使人感覺不舒服，它給色彩的選擇提供了一點(diǎn)回旋余地。
分裂互補(bǔ)色
　　四色式（矩形搭配）是最難以調(diào)和的，平衡的適當(dāng)會(huì)使畫面顯得絢麗多彩。這種配色方案利用兩對互補(bǔ)色，它們之間隔兩個(gè)色格，這四種顏色在色環(huán)上的連線形成一個(gè)矩形。在設(shè)計(jì)過程中若讓一個(gè)顏色成為主色，效果會(huì)更加，同時(shí)要注意冷暖色的平衡。我不建議在一開始就采用這種配色方案，因?yàn)槿绻麤]有經(jīng)驗(yàn)，很難去控制它。但是它在較大的設(shè)計(jì)中使用會(huì)顯得非常漂亮，所以它值得被牢記。
四色式
　　顏色對比
　　對比是網(wǎng)頁設(shè)計(jì)的永恒話題。對比度是頁面上的兩個(gè)對象之間的清晰程度。最值得注意的包括段落、鏈接和標(biāo)題文本。如果文本和背景顏色之間沒有足夠的對比，那么文字就很難閱讀(太亮或太暗)。
　　最安全的選擇是始終退回到一個(gè)明暗尺度——灰色在白色上或白色在灰色上。深色的文字在亮色的背景上更加明顯，反之亦然。然而，一些顏色經(jīng)常產(chǎn)生一種不和諧的效果，如紅色和綠色。這種對比在某些情況下是精美的藝術(shù)，   但不是任何情況下。在布局當(dāng)中，如果遇到顏色豐富的地方，在給鏈接和按鈕用色時(shí)要非常小心。
顏色對比
　　看Duplos的網(wǎng)頁，你可以看到一些顏色不同的對話氣泡，使用相同的白色文字。由于背景顏色夠深，文字在各種顏色背景下都可讀。這種不是單純的基于文本的界面，值得我們在設(shè)計(jì)中去學(xué)習(xí)追求。
　　思考一下，圖標(biāo)或具有行為召喚能力的按鈕，在設(shè)計(jì)中所需要的對比度級別。和諧的高對比度元素，自然能引起人們地關(guān)注。當(dāng)某個(gè)按鈕或者注冊區(qū)域需要更多的關(guān)注，高對比度往往是一個(gè)很好的解決方案。顏色如果使用得當(dāng)，能產(chǎn)生均衡的對比。
　　避免純黑
　　從美學(xué)界獲得一些建議，就是避免純黑色。當(dāng)你看到現(xiàn)實(shí)生活中的物體，你幾乎看不到純黑色。實(shí)際看起來很暗，但它的HEX色值（十六進(jìn)制）不太可能是＃000。你甚至可以嘗試拍攝照片，并在Photoshop中測試它的HEX色值。
　　最近我發(fā)現(xiàn)了Ian Storm Taylor寫的一篇文章， ，題目叫做《不要使用黑色》。它指出，通過避免在界面上使用純黑色，能更真實(shí)地反映現(xiàn)實(shí)世界。這可能是一個(gè)有偏見的說法，不過近些年來，我發(fā)現(xiàn)這是一個(gè)極好的建議。
　　為了實(shí)踐這一觀點(diǎn)，盡量避免在較亮的背景上使用＃000。取而代之，選擇一個(gè)暗灰色，可能是混合色（深藍(lán)色，深綠色，深橙色等）。我總是覺得，在白色背景上的深灰色文字，比純黑色文字的可讀性高出10倍。
　　純黑色與其它顏色相比，反差非常大。這一點(diǎn)讓我很苦惱，但即使是一點(diǎn)積極的差異，還是有區(qū)別的，所以我的建議是避免使用＃000。
　　提煉配色方案
　　入門色彩理論，最簡單的方法可能是從一個(gè)單一的顏色開始入手，并使用在線指導(dǎo)工具。沒有人與生俱來就理解色彩的選擇。但隨著不斷的重復(fù)，它就變成了你的第二天性。
　　選擇配色方案的時(shí)間，會(huì)在啟動(dòng)一個(gè)Web項(xiàng)目并收集想法（線框圖，草圖，頁面元素）之后。這可能發(fā)生在設(shè)計(jì)一個(gè)簡單的模型之前或者之后，但方法仍然是相同的。只需選擇一種顏色，可以與基于內(nèi)容、形式、風(fēng)格或情感的布局很好地工作。
提煉配色方案
　　在線web應(yīng)用，如Paletton是早期的方案設(shè)計(jì)中必不可少的。你輸入一個(gè)單色，然后選擇你喜歡的（相近色，三色式，四色式等）匹配方案。每種配色方案允許額外補(bǔ)充一個(gè)，與你選擇的顏色相反的顏色。
　　Paletton是我個(gè)人最喜歡的，因?yàn)樗峁┝艘幌盗谢谡{(diào)整飽和度的相對色。它還提供了基于你所選擇的顏色，相同的顏色范圍的預(yù)設(shè)方案。最重要的是，它是完全免費(fèi)的！
　　另一個(gè)流行的選擇是Adobe Color，它有非常相似的設(shè)置，但界面有些復(fù)雜。你依然需要基于輸入一個(gè)單色，來選擇配色方案。不過Adobe Color使用色輪展示匹配的顏，每一種顏色是靈活的，易于移動(dòng)的，在維持顏色模式一致性之內(nèi)。
　　當(dāng)談到提煉自己的配色方案，我強(qiáng)烈建議選擇這兩個(gè)中的一個(gè)。它們都是基于Web的免費(fèi)工具，并提供足夠的功能，讓你開始構(gòu)造可愛和豐富多彩的項(xiàng)目。
　　在線工具和Webapps
　　除了令人稱奇的配色生產(chǎn)器，也有一些其它工具，值得保存以供將來參考。我覺得這些工具和資源，對數(shù)碼設(shè)計(jì)，例如如圖形或網(wǎng)站設(shè)計(jì)最有幫助。但你應(yīng)該從中精選那些最有益于您的工作流的資源。
在線工具和Webapps
　　如果你正在尋找預(yù)建的配色方案，有很多可用的網(wǎng)站。一種選擇是ColorSchemer，它有大量的附加功能，如移動(dòng)應(yīng)用程序和桌面軟件。但該網(wǎng)站本身是免費(fèi)的，并提供了用戶生成的一個(gè)大型的配色方案展示庫。
平面設(shè)計(jì)和網(wǎng)站設(shè)計(jì)配色方案技巧指南
　　另一種選擇是Colrd，它從圖片照片和其它圖形中提取顏色。這是一個(gè)奇怪的Web應(yīng)用程序，因?yàn)樗灰欢傇诰W(wǎng)頁設(shè)計(jì)領(lǐng)域頗有助益。但你可以通過研究圖片，和它們相關(guān)的顏色學(xué)習(xí)到很多。一般來說，自然總是正確的，所以如果你認(rèn)真觀察生活和照中，你會(huì)從中獲得配色的新思路。
　　但是，當(dāng)涉及到數(shù)字設(shè)計(jì)，有許多其它網(wǎng)站，你可以前去學(xué)習(xí)。一個(gè)在線工具Check My Colours，可以將任何網(wǎng)站拉進(jìn)來，檢查文本和背景顏色之間的對比度。這是一個(gè)優(yōu)質(zhì)的資源，用來測試其它網(wǎng)站以及您自己的設(shè)計(jì)。
平面設(shè)計(jì)和網(wǎng)站設(shè)計(jì)配色方案技巧指南
　　結(jié)果以表格形式列出來，說明了每個(gè)頁面元素，在對比度和亮度方面的差別。這當(dāng)然也不是完美的，但它確實(shí)為新的設(shè)計(jì)師，提供一個(gè)良好的開端。
　　瀏覽器擴(kuò)展
　　我們大多數(shù)人都知道Adobe產(chǎn)品中有拾色器，如Photoshop或者Illustrator。這是一個(gè)迫切需要的工具，因?yàn)樗峁┱麄€(gè)色譜，以及一個(gè)RGB和HEX值。但現(xiàn)在大多數(shù)Web瀏覽器插件，可以復(fù)制一個(gè)類似的顏色選擇器。
平面設(shè)計(jì)和網(wǎng)站設(shè)計(jì)配色方案技巧指南
　　Chroma是谷歌Chrome瀏覽器為設(shè)計(jì)師和色彩愛好者，提供的一個(gè)免費(fèi)擴(kuò)展應(yīng)用。它有一個(gè)正方形和圓形的顏色選擇器，以及很廣泛的不同明度的配色工具。 Mozilla Firefox瀏覽器有一個(gè)類似的擴(kuò)展應(yīng)用，叫做ColorZilla，它有吸管功能，可以從網(wǎng)頁挑選顏色，并顯示它的RGB及HEX色值。
平面設(shè)計(jì)和網(wǎng)站設(shè)計(jì)配色方案技巧指南
　　如果你是一個(gè)Opera的用戶，可以找到一個(gè)名叫Color Picker的擴(kuò)展應(yīng)用。你會(huì)發(fā)現(xiàn)它與Photoshop里的界面風(fēng)格相同。
　　有了合適的擴(kuò)展，所有這些瀏覽器都可以轉(zhuǎn)換為顏色的資源，而不需要開啟另一個(gè)程序。
　　顏色好看的網(wǎng)站
　　我喜歡用具體實(shí)例來闡明顏色的選擇，而不是列一堆網(wǎng)站。這些例子可能不是顏色匹配的絕對典范，但它們確實(shí)為網(wǎng)頁設(shè)計(jì)師提供了一個(gè)可靠的學(xué)習(xí)經(jīng)驗(yàn)。
平面設(shè)計(jì)和網(wǎng)站設(shè)計(jì)配色方案技巧指南
　　網(wǎng)站Barcamp Omaha 2014 在連續(xù)滾動(dòng)的頁面區(qū)域，采用了大量不同的顏色。最突出的一點(diǎn)是，文本設(shè)計(jì)很好地融入到每一個(gè)背景部分。頁面上對比度最大的，往往是圖形或按鈕。你可以在整個(gè)網(wǎng)站中都看到這種效果。
　　雖然這種風(fēng)格可能并非適用于每個(gè)站點(diǎn)，但他它卻是混色的一個(gè)很好的例子。頁面很容易閱讀，但并不覺得對比度太強(qiáng)。找到一個(gè)甜美平衡的顏色是一個(gè)設(shè)計(jì)師的終極任務(wù)。
平面設(shè)計(jì)和網(wǎng)站設(shè)計(jì)配色方案技巧指南
　　iForex Water 是一個(gè)視差網(wǎng)站，展示有關(guān)水資源消耗的信息。不像我最后一個(gè)例子，此網(wǎng)站在每一屏都使用相同的顏色，然而背景在不斷變化。但是因?yàn)轭伾际巧钌?，它們?nèi)匀荒軌蜃鳛楸尘罢９ぷ鳌?/span>
　　這個(gè)例子是一個(gè)有趣的比較關(guān)系，同樣還要注意不同部分滾動(dòng)時(shí)，色彩關(guān)系的變化。在色彩理論的世界里，最好的效果是相對的。
　　Digimurai是一個(gè)更簡單但典型的網(wǎng)站。顯而易見，網(wǎng)站的設(shè)計(jì)布局主要集中在暗藍(lán)色的色調(diào)中。這給人的印象是，藍(lán)色占主導(dǎo)地位，并控制了大部分的設(shè)計(jì)。
平面設(shè)計(jì)和網(wǎng)站設(shè)計(jì)配色方案技巧指南
　　但你會(huì)發(fā)現(xiàn)整個(gè)布局，還有其它的高亮色調(diào)。橙色和淺藍(lán)色的出現(xiàn)非常突出，與暗色背景形成對比。要記住在選擇一個(gè)配色方案時(shí)，使用2個(gè)或3個(gè)不同的色調(diào)，因?yàn)檫@樣很可能會(huì)設(shè)計(jì)出一個(gè)非常棒的網(wǎng)站。
　　結(jié)尾辭
　　最后，我希望這個(gè)指南能提供可靠的起點(diǎn)給各位數(shù)字藝術(shù)家和網(wǎng)頁設(shè)計(jì)師。色彩理論非常像音樂理論，其中主要的原理是通過實(shí)踐得知，而不是傳統(tǒng)的理論分析。但是在起步階段，可能會(huì)感覺有些困難，等你積累了相當(dāng)一部分資源和理論基礎(chǔ)之后會(huì)感覺越來越順暢。
　　如果你真的想了解配色方案的選擇，那么就要堅(jiān)持練習(xí)。剛開始的期望值不要太高，因?yàn)楹苡锌赡苣阍诔跏茧A段的實(shí)踐結(jié)果不會(huì)很成功，但是隨著時(shí)間的推移，你會(huì)做得越來越好。
來源：中國設(shè)計(jì)在線 轉(zhuǎn)載請注明：上海網(wǎng)頁設(shè)計(jì)

相關(guān)案例
Related cases

專業(yè)健康軟件企業(yè)網(wǎng)站設(shè)計(jì)-上海萬序健康品牌網(wǎng)站建設(shè)

上海凌笛數(shù)碼科技有限公司|科技類網(wǎng)站制作

上海神旺房地產(chǎn)網(wǎng)站設(shè)計(jì)|企業(yè)網(wǎng)站制作

上海至善基金網(wǎng)站設(shè)計(jì)|金融網(wǎng)站制作

沃贊智能科技網(wǎng)站設(shè)計(jì)

普瑞邦克高端網(wǎng)站設(shè)計(jì)

相關(guān)文章
Related articles

上海網(wǎng)站設(shè)計(jì)公司注意事項(xiàng)

豪禾品牌資訊
brand information

品牌咨詢

細(xì)分市場行業(yè)標(biāo)識(shí)
打造全新的品牌視覺形象

在線品牌咨詢

最新案例推薦
Related cases

最新資訊推薦
related information

日本包裝設(shè)計(jì)探討

日本包裝設(shè)計(jì)探討