登錄

UI設(shè)計(jì)中色彩運(yùn)用應(yīng)該注意哪些問(wèn)題？

簡(jiǎn)單的奔奔 2016年04月07日
跟帖  |   0條內(nèi)容
添加圖片
Yves 2016年04月07日

和穿衣的原則相同的一點(diǎn)，一般建議不要超過(guò)三種顏色運(yùn)用在同一個(gè)版面中。但這里的顏色指的是色相，也就是說(shuō)，同一個(gè)色相（也可以理解為我們常說(shuō)的色調(diào)、色系）中的顏色并不受這個(gè)原則限制。相反，UI設(shè)計(jì)中常常需要同色相的顏色來(lái)給用戶提供不同的反饋，比如按鍵的突起效果，按鍵的下壓效果等等。除了同色相的顏色使用以外，還可以利用對(duì)比色來(lái)突出主題，以及滿足一些功能上的對(duì)比差異，比如字體色和背景色等。

另外需要注意的一點(diǎn)就是，黑色在UI設(shè)計(jì)中無(wú)法很好的顯示出來(lái)，所以一般選擇暗灰色或者混合色去替代純黑色運(yùn)用。比如在純白色的背景下，灰色的字體會(huì)讀起來(lái)很舒服。

最后給題主一些配色的小工具網(wǎng)站，希望對(duì)你有幫助：

Material Palette  http://www.materialpalette.com、

New Flat UI Color Picker  http://www.flatuicolorpicker.com/、 

Flat UI Colors  http://flatuicolors.com/、

Coolors http://coolors.co/、

Skala Color  http://bjango.com/mac/skalacolor/、

Couleurs  http://couleursapp.com/、

Material UI Colors  http://www.materialui.co/colors、 

Colorful Gradients http://colorfulgradients.tumblr.com/ 


GuyGaoKing 2016年04月10日
1.定好主色和輔助色，并嚴(yán)格執(zhí)行； 2.統(tǒng)一按鈕和可點(diǎn)擊內(nèi)容的顏色，比如鏈接和操作性文字.這樣使用者一看到這種顏色的內(nèi)容就知道是可點(diǎn)擊的； 3.界面內(nèi)除非必要，否則不要出現(xiàn)大面積的裝飾顏色； 4.統(tǒng)一界面中使用的不可點(diǎn)擊的內(nèi)容顏色，比如已經(jīng)點(diǎn)過(guò)了被置灰的按鈕和連接性文字、圖標(biāo)等。 6.使用統(tǒng)一的已選擇狀態(tài)的顏色，一般與主色統(tǒng)一。 7.慎用紅色！紅色一般是作為警示顏色和提醒通知類顏色使用的，如果主色定的是紅色，在界面中少用則醒目。
我叫面試官 2016年04月10日
UI設(shè)計(jì)中色彩搭配的三點(diǎn)原則：UI設(shè)計(jì)中用大色塊烘托氣氛和主題比較穩(wěn)定，而UI設(shè)計(jì)中則用小色塊豐富畫(huà)面。統(tǒng)一顏色可以讓用戶認(rèn)準(zhǔn)店面， 首先需要在不同的界面UI設(shè)計(jì)框架中統(tǒng)一招牌色，保證產(chǎn)品給用戶能一目了然的找到這個(gè)店，用戶方便了，就會(huì)得到更好的用戶體驗(yàn)。 原則二：嚴(yán)謹(jǐn)而有節(jié)奏 在界面UI設(shè)計(jì)中的可以運(yùn)用相似性與來(lái)進(jìn)行色彩的呼應(yīng)，這樣的畫(huà)面更有節(jié)奏感和舒適性。在界面UI設(shè)計(jì)中運(yùn)用顏色漸變穿插，讓界面平衡在一個(gè)頻率上。 原則三：在相似中，找呼應(yīng) 1.定義了色彩的基調(diào)，找到了形象店面色。在設(shè)計(jì)中我們只采用了單一的顏色進(jìn)行了設(shè)計(jì)，使用大小關(guān)系區(qū)分了功能的主次關(guān)系。界面UI設(shè)計(jì)上比較平衡但是頁(yè)面顯得單調(diào)。 2.為了讓用戶聚焦在主要的功能上，在主要功能上使用了補(bǔ)色對(duì)比。這種方式比造型上的區(qū)分更為強(qiáng)烈。 3.但在采用過(guò)多的色彩會(huì)使界面UI設(shè)計(jì)沒(méi)有秩序性。這種色彩的搭配會(huì)給用戶一種混亂感。 4.用色上不僅需要聚焦，還有講究顏色的呼應(yīng)性。同類色彩會(huì)彼此呼應(yīng)，聚焦點(diǎn)只要在主要的點(diǎn)上。 所以說(shuō)注意彩色的關(guān)系與功能的區(qū)別及其重要。這樣才能把握好色彩的節(jié)奏感。也才能帶來(lái)更好的用戶體驗(yàn)?！　?/div>