簡(jiǎn)體: 簡(jiǎn)體中文 English

尚品與山東真諾智能設(shè)備有限公司簽署網(wǎng)站改版合作協(xié)議

類(lèi)型：尚品動(dòng)態(tài) 了解更多

首頁(yè)/ 新聞/ 網(wǎng)站建設(shè) /正文

如何在網(wǎng)站UI設(shè)計(jì)中處理顏色？

來(lái)源：尚品中國(guó)| 類(lèi)型：網(wǎng)站百科| 時(shí)間：2018-06-06

法則篇

60-30-10法則

這是一個(gè)室內(nèi)設(shè)計(jì)領(lǐng)域中永不過(guò)時(shí)的裝飾技巧，它可以輕松地幫助你完成一個(gè)網(wǎng)站設(shè)計(jì)配色方案。60%+30%+10%的比例分配是為了平衡顏色。這個(gè)公式妙在它營(yíng)造了一種平衡感，使眼睛可以舒適地從一個(gè)焦點(diǎn)移動(dòng)到另一個(gè)焦點(diǎn)。同時(shí)，它也運(yùn)用起來(lái)非常簡(jiǎn)單。

60%是主色調(diào)，30%是輔助色，10%是強(qiáng)調(diào)色。

關(guān)注顏色的含義

幾個(gè)世紀(jì)以來(lái)，科學(xué)家一直在研究顏色的情感效應(yīng)。除了創(chuàng)造美學(xué)，顏色也是情感和聯(lián)想的創(chuàng)造者。顏色的含義會(huì)根據(jù)文化和情況而有所不同。這就是為什么你會(huì)看到黑白色的時(shí)裝店。因?yàn)樗麄兿胍憩F(xiàn)得優(yōu)雅和高級(jí)。

紅色：激情、愛(ài)、危險(xiǎn)

藍(lán)色：冷靜、負(fù)責(zé)、安全

黑色：神秘、優(yōu)雅、邪惡

白色：純潔、安靜、干凈

綠色：新鮮、清新、自然

我們習(xí)慣在設(shè)計(jì)階段的早期就開(kāi)始調(diào)整顏色和色調(diào)。但是，當(dāng)你意識(shí)到自己花了3個(gè)小時(shí)來(lái)調(diào)整主色調(diào)的時(shí)候，你發(fā)現(xiàn)這種行為毫無(wú)幫助。雖然把玩顏色很有吸引力，但是你應(yīng)該避免在設(shè)計(jì)初期進(jìn)行這種行為。

相反地，你應(yīng)該強(qiáng)迫自己專(zhuān)注調(diào)整間距和布局元素。這種布局的約束是非常有效的，它會(huì)為你節(jié)省很多時(shí)間。調(diào)整間距和布局元素并不是那么無(wú)聊。如果你想表達(dá)不一樣的東西，嘗試使用不同的色調(diào)即可。

遠(yuǎn)離純灰色和純黑色

多年來(lái)，我學(xué)到的一個(gè)最重要的顏色技巧之一就是避免使用不帶色調(diào)的灰色。在現(xiàn)實(shí)生活中，純灰色幾乎是不存在的。黑色也是同樣的道理。（沒(méi)錯(cuò)，事實(shí)上就是要五彩斑斕的黑）

在這張圖片中最深的顏色不純黑，而是#0A0A10

記得給你的顏色添加一些色調(diào)。用戶會(huì)下意識(shí)地覺(jué)得這類(lèi)顏色更加自然和熟悉。

相信自然

最佳的色彩組合來(lái)自于大自然。它們總是看起來(lái)非常天然。根據(jù)自然環(huán)境來(lái)尋找設(shè)計(jì)方案的好處是可以擁有無(wú)數(shù)的色板，因?yàn)榇笞匀坏念伾偸窃谧兓?。

我們只需要看看周?chē)湍塬@取靈感。

保持對(duì)比度

有的顏色和某些顏色搭配協(xié)調(diào)，和另一些顏色則會(huì)產(chǎn)生沖突。通過(guò)色輪，可以很好地觀察到顏色相互作用的規(guī)則。你應(yīng)該清楚地了解這個(gè)方法，但是不一樣要親手去做。

獲得靈感

當(dāng)我們談到UI參考的時(shí)候，Dribbble是一個(gè)很好的選擇。Dribbble也有顏色搜索工具。所以，如果你想要針對(duì)某個(gè)特定的顏色進(jìn)行視覺(jué)研究，

可以前往以下網(wǎng)址：dribbble.com/colors

視頻、印刷設(shè)計(jì)、室內(nèi)設(shè)計(jì)、時(shí)尚……有很多的啟發(fā)靈感的事物。要對(duì)各種形式的色板保持靈敏的感覺(jué)，并且把看起來(lái)有趣的所有東西存下來(lái)。我會(huì)從韓流的視頻短片中獲取顏色靈感

工具篇

為了節(jié)省大家時(shí)間，下面整理了一些2017年非常好用的色板工具。它們會(huì)為你節(jié)省大量的時(shí)間。我最喜歡的顏色選擇工具。你可以簡(jiǎn)單地鎖定顏色，并按住空格鍵生成色板。Coolors.co還支持上傳圖片，從圖片中提取色板。Coolors.co酷在，你不僅僅有一個(gè)結(jié)果，相反地，你可以通過(guò)選擇器，調(diào)整你的顏色，獲得很多配色方案。

鏈接（無(wú)需翻墻）：https://coolors.co/

Kuler

這款來(lái)自Adobe的工具已經(jīng)陪伴我們很長(zhǎng)時(shí)間了。它可以在瀏覽器或桌面應(yīng)用中使用。如果你使用的是桌面應(yīng)用程序，那你可以將配色方案導(dǎo)出到Photoshop中。

鏈接（無(wú)需翻墻）：https://color.adobe.com/zh/create/color-wheel/

Paletton

它和前面一款工具Kuler相似。不同之處是，它不限于5種色調(diào)。當(dāng)你已經(jīng)確定主色調(diào)，想要調(diào)整輔助色的時(shí)候，這是一款很棒的工具。

鏈接（需翻墻）：http://paletton.com/

Shutterstock Lab Spectrum

你可能會(huì)問(wèn)：如果我想用我選擇的顏色搜索圖片呢？那么，Shutterstock旗下有款叫作Spectrum的工具可以滿足你的需求，你可以通過(guò)特定的色調(diào)搜索圖片。你甚至不需要稱(chēng)為會(huì)員，因?yàn)榧词故菐〉男☆A(yù)覽圖片已經(jīng)足以生成色板。

來(lái)源聲明：本文章系尚品中國(guó)編輯原創(chuàng)或采編整理，如需轉(zhuǎn)載請(qǐng)注明來(lái)自尚品中國(guó)。以上內(nèi)容部分(包含圖片、文字)來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)及時(shí)與本站聯(lián)系（010-60259772）。

上一篇：網(wǎng)站文章如何能夠讓搜索引擎快速收錄？下一篇：企業(yè)手機(jī)網(wǎng)站制作的原則和注意事項(xiàng)有哪些？

TAG標(biāo)簽：

建站流程

網(wǎng)站需求
網(wǎng)站策劃方案
頁(yè)面設(shè)計(jì)風(fēng)格
確認(rèn)交付使用
資料錄入優(yōu)化
程序設(shè)計(jì)開(kāi)發(fā)
后續(xù)跟蹤服務(wù)
聯(lián)系電話
010-60259772

預(yù)約專(zhuān)業(yè)咨詢(xún)顧問(wèn)溝通！

免責(zé)聲明

非常感謝您訪問(wèn)我們的網(wǎng)站。在您使用本網(wǎng)站之前，請(qǐng)您仔細(xì)閱讀本聲明的所有條款。

1、本站部分內(nèi)容來(lái)源自網(wǎng)絡(luò)，涉及到的部分文章和圖片版權(quán)屬于原作者，本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流，切勿用于任何商業(yè)活動(dòng)。

2、本站不承擔(dān)用戶因使用這些資源對(duì)自己和他人造成任何形式的損失或傷害。

3、本聲明未涉及的問(wèn)題參見(jiàn)國(guó)家有關(guān)法律法規(guī)，當(dāng)本聲明與國(guó)家法律法規(guī)沖突時(shí)，以國(guó)家法律法規(guī)為準(zhǔn)。

4、如果侵害了您的合法權(quán)益，請(qǐng)您及時(shí)與我們,我們會(huì)在第一時(shí)間刪除相關(guān)內(nèi)容!

聯(lián)系方式：010-60259772
電子郵件：394588593@qq.com

高校集群解決方案

強(qiáng)軍網(wǎng)建設(shè)解決方案

政府事業(yè)解決方案

智慧會(huì)展解決方案

科研領(lǐng)域解決方案

智慧景區(qū)解決方案

海外房產(chǎn)解決方案

網(wǎng)站建設(shè)

小程序

移動(dòng)互聯(lián)網(wǎng)

網(wǎng)絡(luò)營(yíng)銷(xiāo)

VI設(shè)計(jì)

尚品與山東真諾智能設(shè)備有限公司簽署網(wǎng)站改版合作協(xié)議

如何在網(wǎng)站UI設(shè)計(jì)中處理顏色？

建站流程

網(wǎng)站需求

網(wǎng)站策劃方案

頁(yè)面設(shè)計(jì)風(fēng)格

確認(rèn)交付使用

資料錄入優(yōu)化

程序設(shè)計(jì)開(kāi)發(fā)

后續(xù)跟蹤服務(wù)

熱門(mén)標(biāo)簽

最新文章

企業(yè)官網(wǎng)建設(shè)與開(kāi)發(fā)：?jiǎn)栴}預(yù)防與實(shí)戰(zhàn)策略

企業(yè)網(wǎng)站建設(shè)的五大關(guān)鍵要點(diǎn)：掌握這五點(diǎn)，打造高效網(wǎng)站

定制網(wǎng)站制作的優(yōu)勢(shì)與成本解析

推薦新聞

seo網(wǎng)站優(yōu)化過(guò)程中的致命細(xì)節(jié)

UEO營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的優(yōu)勢(shì)

網(wǎng)站建設(shè)中使用長(zhǎng)滾動(dòng)頁(yè)面設(shè)計(jì)有哪些好處？

如何創(chuàng)建網(wǎng)頁(yè)上的列表？

網(wǎng)站中了WebShell木馬病毒怎么辦？用這些方法快速解決。

百度算法調(diào)整明細(xì)

預(yù)約專(zhuān)業(yè)咨詢(xún)顧問(wèn)溝通！

免責(zé)聲明

電話咨詢(xún)

在線咨詢(xún)

微信咨詢(xún)

現(xiàn)在就與專(zhuān)業(yè)咨詢(xún)顧問(wèn)溝通！

免責(zé)聲明

如何在網(wǎng)站UI設(shè)計(jì)中處理顏色？

如何創(chuàng)建網(wǎng)頁(yè)上的列表？

網(wǎng)站中了WebShell木馬病毒怎么辦？用這些方法快速解決。

現(xiàn)在就與專(zhuān)業(yè)咨詢(xún)顧問(wèn)溝通！