亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

8個(gè)強(qiáng)化UI設(shè)計(jì)中的色彩體驗(yàn)

發(fā)布時(shí)間：2024-01-16 11:54:20 瀏覽量：205次

色彩的把控并不容易，大部分UI設(shè)計(jì)中都不會有過多的色彩存在，最多搭配三種顏色就夠了，如果是多彩色界面，那么表示這個(gè)設(shè)計(jì)師足夠的配色能力才能駕馭，否則只會花哨至極。所以在每一個(gè)設(shè)計(jì)作品里，都需要謹(jǐn)慎的使用顏色，并且懂得「平衡」它們，這樣你的作品就算不是優(yōu)秀但至少會「合格」。

文章目錄

  • 一.60-30-10原則

  • 二.顏色的含義

  • 三.灰度優(yōu)先

  • 四.避免使用純粹的灰色或黑色

  • 五.相信自然

  • 六.保持對比度

  • 七.獲取靈感

  • 八、配色工具

Pierre Bonnard：

“色彩并不能為你的設(shè)計(jì)作品增添令人愉悅/舒適的質(zhì)感——它的實(shí)際作用是強(qiáng)化了這種質(zhì)感?！?/strong>

如果在設(shè)計(jì)過程中，你已經(jīng)確定好了自己的調(diào)色板，但是又需要一些額外的顏色來做補(bǔ)充，可以運(yùn)用陰影和色調(diào)來做一些變化，它們結(jié)合起來會呈現(xiàn)出一種和諧的效果。

一.60-30-10原則

這個(gè)室內(nèi)裝修的配色原則是經(jīng)時(shí)間檢驗(yàn)的配色技巧，可以幫助你輕松地將配色方案組織在一起。60%+30%+10% 的比例是為了實(shí)現(xiàn)平衡色彩，這個(gè)公式之所以起作用，是因?yàn)樗鼊?chuàng)造了一種平衡感，讓眼睛可以舒服地從一個(gè)焦點(diǎn)移動(dòng)到另一個(gè)焦點(diǎn)。難得的是它的使用也非常簡單。

其中：

主色調(diào)占60%

輔助色占30%

重點(diǎn)突出顏色占10%

(墻漆；家具；配飾)

二.顏色的含義

科學(xué)家研究了幾個(gè)世紀(jì)以來某些顏色對生理的影響。除了美學(xué)，色彩是情感和想象力的創(chuàng)造者。顏色的含義很大程度上取決于文化和環(huán)境。這就是你經(jīng)?？吹胶谏桶咨臅r(shí)尚商店的原因——他們想要使自己顯得優(yōu)雅、品質(zhì)卓越。

(Asos網(wǎng)頁)

Asos網(wǎng)頁設(shè)計(jì)是純粹黑白色，而“加入購物袋”按鈕選擇了綠色，這是有原因的。

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

· 藍(lán)色：冷靜、可靠的、安全的

· 黑色：神秘、高雅、惡魔

· 白色：純潔、安靜、干凈

· 綠色：嶄新的、新鮮的、自然的

如果你想了解更多顏色的含義，要參考這篇文章《品牌Logo的顏色、價(jià)值與演變 》

品牌Logo的顏色、價(jià)值與演變

三.灰度優(yōu)先

在設(shè)計(jì)過程中，我們都喜歡不停地嘗試各種色彩和色調(diào)，但是當(dāng)你意識到你花了3個(gè)小時(shí)來調(diào)整基色，卻發(fā)現(xiàn)你之前都在做無用功。這種習(xí)慣對于設(shè)計(jì)師來說具有致命的吸引力，但是你應(yīng)該學(xué)會克制，避免總是走進(jìn)這個(gè)死胡同。

相反，你要強(qiáng)迫自己專注于元素的間距、布局等，這樣會為你節(jié)省大量的時(shí)間。這種約束是十分有效的，而且它并不是一件無聊的事情。如果你想讓它更加好看，可以嘗試使用不同的色調(diào)。

(我在dribbble上的作品，只用了簡單的單色，專注于元素的調(diào)整)

四.避免使用純粹的灰色或黑色

我所學(xué)的用色技巧中，有一點(diǎn)很重要，那就是避免使用沒有飽和度的灰色。在現(xiàn)實(shí)生活中，純粹的灰色基本上是不存在的，同理黑色也是一樣。

(這張照片中最深的顏色色值不是#000，而是#0A0A10)

始終記得給自己的顏色添加一點(diǎn)飽和度，這樣潛意識中，用戶看著它會覺得更加自然和親切。

五.相信自然

最棒的色彩組合來源于大自然，這些色彩組合總會看起來非常舒服自然。從環(huán)境中選取適合的顏色組合，但是設(shè)計(jì)最佳的最終方案還是需要不停地調(diào)試你的調(diào)色板。

(要汲取（配色）靈感，我們只需看看周圍)

六.保持對比度

有些顏色很相配，但是有些顏色卻會相互沖突。關(guān)于它們是如何相互匹配、相互作用的規(guī)則，是可以在色輪上觀察到的。你應(yīng)該對這套理論有認(rèn)識，但是不必自己手動(dòng)去操作。

(從左至右：互補(bǔ)色、相近色、三色系、分散的互補(bǔ)色、方形色系、矩形色系)

七.獲取靈感

當(dāng)我們說起UI設(shè)計(jì)參考的時(shí)候，dribbble是最好的尋找靈感的地方。它也有搜索顏色的工具，所以當(dāng)你想對其他設(shè)計(jì)師“如何使用特殊顏色”進(jìn)行視覺研究時(shí)，請使用。

視頻、印刷設(shè)計(jì)、室內(nèi)設(shè)計(jì)、時(shí)尚……有太多可以獲取靈感的地方。不要太依賴那些固有的調(diào)色板樣式，而是要把所有你看起來非常喜歡、覺得有趣、讓你眼前一亮的東西存起來。

(我經(jīng)常從一些韓國視頻里偷顏色，它們非常漂亮)

八、配色工具

為了提高效率，在設(shè)計(jì)導(dǎo)航 里收集了一些特別棒的選色工具。它們會節(jié)省你大量的時(shí)間。

1.Coolors.co

這是我最喜歡的選色工具。你只需簡單地鎖定選定的顏色，然后按空格生成調(diào)色板。在Coolors上你可以上傳一張圖片，并從中生成一個(gè)調(diào)色板。最酷的事情是，你不僅限于一個(gè)調(diào)色板結(jié)果，它會給你提供一個(gè)選擇器，允許你隨時(shí)修改引用點(diǎn)。

2.Kuler

這個(gè)來自于Adobe的工具已經(jīng)陪伴了我們很久了。它可以在網(wǎng)頁端使用，也有桌面本地版本。如果你使用的是桌面版本，可以把配色方案導(dǎo)入到Photoshop里。

3.Color Scheme

這個(gè)工具跟Kuler很像，不同的是，它生成的調(diào)色板里不局限于5種顏色。當(dāng)你已經(jīng)確定了主色調(diào)，想要找一些填充色的時(shí)候，這是個(gè)非常棒的工具。

4.Designspiration.net

想想一下，你已經(jīng)有了一套配色方案，但是你還是想看一下他們組合起來的實(shí)際效果。這時(shí)候，強(qiáng)烈安利Designspiration給你。你可以選擇5種顏色，然后搜索到使用這5種顏色的設(shè)計(jì)圖。真的很贊，不是因?yàn)槟憧梢圆榈綉?yīng)用了這些色彩的圖像，而是因?yàn)槟憧梢哉嬲吹剿鼈冊谠O(shè)計(jì)中真實(shí)被使用、實(shí)現(xiàn)的樣子。

5.Shutterstock Lab Spectrum （翻Q）

你可能會詢問——如果我想根據(jù)某特定色彩搜索圖片呢？Shutterstock有個(gè)功能，名叫Spectrum，可供你根據(jù)特定的顏色來搜索圖片。你甚至不需要訂閱，因?yàn)閹〉男D預(yù)覽足夠生成調(diào)色板。

6.Tineye Multicolr

但如果你想搜索擁有多種色彩混合在一起的照片，并指定每種色彩的數(shù)量，那么Tineye會幫上大忙。這個(gè)網(wǎng)站使用了來自Flickr的1000萬個(gè)創(chuàng)意共享圖像數(shù)據(jù)庫。

總結(jié)

色彩是一個(gè)很難掌握的概念，特別是在數(shù)字時(shí)代。上面提到的技巧可以為查找正確的色彩這項(xiàng)工作提供一些便利。而如果你想創(chuàng)造出讓人驚艷的配色方案，最好的方法歸根到底，還是需要不斷地練習(xí)。所以，別光看文章，動(dòng)起手來，沉浸到色彩的世界中，玩兒起來~

學(xué)會使用配色，學(xué)會使用設(shè)計(jì)導(dǎo)航，將使你的設(shè)計(jì)更上一層樓！

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會在第一時(shí)間與您取得聯(lián)系，請保持電話暢通！
確定