雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁(yè) 案例 服務(wù) 關(guān)于 face+

色彩在ui設(shè)計(jì)中的運(yùn)用有哪些?ui色彩設(shè)計(jì)方案是怎樣的?

Time: 2020-11-20

ui設(shè)計(jì)出的程序效果還是很不錯(cuò)的,看著比較舒服,ui設(shè)計(jì)中使用的色彩也是比較多的。那大家知道色彩在ui設(shè)計(jì)中的運(yùn)用有哪些嗎?還有,ui色彩設(shè)計(jì)方案是怎樣的呢?一起跟小編來(lái)了解一下相關(guān)的內(nèi)容吧。

(圖片來(lái)自網(wǎng)絡(luò))


  色彩在ui設(shè)計(jì)中的運(yùn)用有哪些?

  色彩作為視覺(jué)傳達(dá)中非常重要的要素在UI設(shè)計(jì)中具有非常重要的作用,可以歸納為以下幾個(gè)方面。

  1)顯示界面的整體架構(gòu)

  一個(gè)UI界面總是借助圖形化的外觀直接作用于客戶的視覺(jué)系統(tǒng)。用戶接觸一個(gè)UI界面,看到的往往是一個(gè)由底色、其他幾何色塊、圖標(biāo)、按鈕等元素構(gòu)成的圖形符號(hào)系統(tǒng)。用色彩可以非常直觀的凸顯出背景、導(dǎo)航欄、狀態(tài)欄,按鈕等構(gòu)成元素,并顯示出UI界面的邏輯架構(gòu)。

  2)明確視覺(jué)層級(jí)關(guān)系

  UI設(shè)計(jì)中不同的內(nèi)容屬于不同的層級(jí)關(guān)系,如菜單于菜單間的同級(jí)關(guān)系、內(nèi)容間的從屬關(guān)系等等。用同色系色彩、不同色相色彩間的差距可以非常直觀地區(qū)分內(nèi)容的層級(jí)關(guān)系,還可以通過(guò)色彩間的強(qiáng)對(duì)比突出關(guān)鍵內(nèi)容。

  3)營(yíng)造界面整體風(fēng)格

  UI界面雖然是個(gè)復(fù)雜的視覺(jué)圖形系統(tǒng),但通過(guò)主色調(diào)、輔助色、裝飾色之間的對(duì)比調(diào)和關(guān)系會(huì)呈現(xiàn)出明顯的風(fēng)格傾向。用不同的色系或者同色系色彩之間的對(duì)比與調(diào)和關(guān)系,可以塑造出不同的界面風(fēng)格。如適合男生的金屬質(zhì)感的黑色、灰色、藍(lán)色系,女生喜歡的夢(mèng)幻甜美色系、糖果色系。界面風(fēng)格定位于品質(zhì)已經(jīng)成為用戶體驗(yàn)中最重要的部分之一。

  UI色彩設(shè)計(jì)方案是怎樣的?

  在進(jìn)行UI設(shè)計(jì)時(shí),要通過(guò)對(duì)產(chǎn)品及用戶體驗(yàn)的分析確定明確的色彩搭配反感,形成“標(biāo)準(zhǔn)色彩規(guī)范”,在這個(gè)基礎(chǔ)上再進(jìn)行具體界面、線框、圖標(biāo)等細(xì)節(jié)設(shè)計(jì)。標(biāo)準(zhǔn)色彩規(guī)范中要規(guī)定出最主要主色、輔助色、裝飾色的色號(hào),方便設(shè)計(jì)師的設(shè)計(jì)稿的色彩統(tǒng)一。

  1)主色調(diào)

  主色用量基本占據(jù)全部用色的75%,基本決定了整個(gè)界面的視覺(jué)風(fēng)格。主色選擇要符合產(chǎn)品本身的氣質(zhì)、訴求和色彩心理學(xué)規(guī)律,可在主色的基礎(chǔ)上通過(guò)明度與純度的變化衍生出同色系色調(diào)作為主色調(diào)范圍。

  根據(jù)色彩在視覺(jué)中的能量值,一般主色傾向于選擇飽和度高、明度低的色彩,往往會(huì)在在同一界面中占據(jù)較大的面積或明顯的凸現(xiàn)于背景。

  2)輔助色

  輔助色起到輔助主色的作用,在全部用色中約占據(jù)20%。用與主色同色系色彩作為輔助色可以呈現(xiàn)柔和、整體、統(tǒng)一的視覺(jué)效果;而用主色鄰近色作為輔助色可以讓界面有豐富的變化,產(chǎn)生活潑感;用主色調(diào)對(duì)比色作為輔助色可以讓主色更為突出。

(圖片來(lái)自網(wǎng)絡(luò))

3)裝飾色

  占全部色彩方案的5%的裝飾色起到點(diǎn)綴、提醒的作用。并界面增加個(gè)性化、富于趣味的視覺(jué)元素。裝飾色要與界面整體色調(diào)相區(qū)別,一般在明度、飽和度上要有明顯差異,一般會(huì)用明度或飽和度高的顏色。

  看完了上文小編的介紹,相信大家應(yīng)該對(duì)色彩在ui設(shè)計(jì)中的運(yùn)用有哪些以及ui色彩設(shè)計(jì)方案是怎樣的相關(guān)內(nèi)容有所了解了。色彩在設(shè)計(jì)中的應(yīng)用是很重要的,大家在ui設(shè)計(jì)中要把握好。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁(yè) | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見(jiàn)

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開(kāi)