您現在的位置是:電腦技術吧?>? 組裝維修 ??>??界面配色,的配色??>??正文詳情

界面配色,的配色

完顏千柔2019-11-15 10:10:46 人圍觀
簡介調色配色如何快速選擇或匹配顏色?今天@MICU設計并介紹了界面中最常用的三種方法,它們簡單實用,有大量優秀的例子,特別適合新手色彩初學者。快到元旦了。每個人手頭都有很多配

如何快速選擇或搭配顏色?今天@Micu設計 和大家介紹在界面中最為常用的三個方法,簡單實用,附上大量的優秀實例,特別適合剛入門的色彩新手,學起來!  快過年了,大家手頭上的事都很多,于是很多同學要設計活動頁面或者APP界面大改版等,那么如何快速的選擇或搭配顏色呢?選擇和搭配顏色,聽到這兩個詞匯的時候,是不是從潛意識上就會有反感,心理琢磨著,這絕對是個坑!肯定得翻來覆去的折騰一把。

其實很多初學設計師都會碰到同樣的問題。

  那我們就橫刀直入的來說說這三招吧。

  第一刀:色不過三  經常很多大神在網上說配色不要超過三種色,在這我只說三遍,色不過三,色不過三,色不過三!不管是做平面也好,還是網頁,還是做APP等設計,都需要遵守這個基本的道理。

  那啥才算是不超過三種顏色的搭配呢?  在這里很多人都會認為就是不要超過三種不同的顏色值。

其實不然,不超過三種顏色的搭配,是指不超過三種色相的搭配。

在單個色相中可以運用顏色明度或飽和度做色彩的豐富性,而色相不要過三!  如果設計的界面的顏色太多,炫酷的眼花繚亂是個什么樣的效果?下面我們來看看一家知名的招聘網站。

  我想你和我一樣頓時淚流滿面了~  是的,我們單純的就想找份合適的工作,過上幸福美好的生活。

并沒有那么簡單,一進入主頁面,剎那間,狗皮膏藥鋪面而來。

這種感覺,我的小心臟頓時崩潰了就一小小塊面積,一個城市地址就出現了三種顏色。

難道這樣真的好嗎?

  我們來做一個對比。

有一種設計,叫別人家的設計。

綠色永遠是品牌色,紅色就是網站的裝點色,這就叫傳承。

  統一的主色彩風格的導向,能加強用戶對產品的記憶程度,也然產品的體驗感更加舒適和自然。

  那是不是越簡潔的顏色就最好?  那咱就只用一種顏色得了。

下圖中單一顏色和多種色相顏色配色下的對比,我們可以看到在單一顏色下的設計更為統一,畫面更為和諧。

在多種顏色下界面中的功能模塊更為明確,區分性更強,所以說在使用多種顏色的時候還需要考慮產品的內容與核心。

  三色搭配,只要控制在不超過三種色相的范圍即可。

學過畫畫的商業設計師,應該都清楚知道顏色的明度、暗度、飽和度。

  運用單色的設計,會顯得單調乏味。

而整體顏色飽和度過低會導致畫面沉悶而不透氣。

明快的顏色和明暗的色彩搭配能使畫面顯得層次感豐富而又有朝氣。

  做精致的顏色,提煉格調  在界面設計中,色彩是設計中的重中之重,是否正確和完整的表現出產品氣質至關重要。

單一的色相,豐富的明度和飽和度能使界面看的有層次感和豐富性。

而精簡的色,處理器來也會跟容易統一和把控。

在用色時,顏色越少越好,但要保證正確的傳達出需要表現的功能和元素為前提。

在我們每添加一種顏色的時候都需要好好的考慮一下,有沒有必要。

因為再復雜的設計,也不會多個三種主色彩。

  以下界面為了區分更多的內容區域運用了三種顏色,但因為顏色過度導致頁面分割凌亂,紅色在頁面中就是多余的,功能分割相對也是多余的。

可以用兩種顏色時候,就不要用到三種顏色。

可以用一種顏色的時候就不要用三種顏色。

簡潔,會使作品更為成熟。

  在桌面圖標設計中,常常也會用到兩色和三色的搭配形式。

這樣的配色能使圖標顯得簡約而不乏味。

  第二刀:確定主色  在運用色彩進行設計的時候,心里要有數。

色彩的主次關系能定作品的性。

優秀的作品色彩就是那么的清晰,  記住色彩功能的劃分:主要色、輔助色、裝點色。

  主色的魅力  主色決定設計的風格。

  在設計中色彩充當了重要的情感元素,那主色就是作品的文化方向。

我們在設計初期需要對項目有明確的了解后提煉選擇出最為貼切的主色進行定位。

  每種顏色承載的文化都是不同的,會領導了整個界面設計的方向。

  網頁設計、移動界面設計、banner設計、平面設計不同的媒介,主色的運用規律各不相同。

網頁設計和界面設計,通常主色運用在結構和裝飾。

而Banner和海報為了更為醒目,主色通常運用在背景顏色上。

  在界面設計中常將品牌LOGO的顏色定為主色彩,并且在不同的界面中主色彩出現的面積也會隨之變化。

  下圖我們可以看到大眾點評、百度外賣、美團應用都將產品LOGO的顏色進行了延續,將logo顏色定義為主色彩,有效的統一了產品的傳播性。

  同時還發現,這幾個產品的界面設計主色面積使用也是非常一致。

首頁中使用的主色彩面積較大,導航條全部填充了主色。

在二級頁面中則使用的面積較少,將主色點綴到界面中。

  我們可以這樣去理解,在用戶使用產品時,更希望用戶記憶產品。

而在用戶進入了信息頁面時則更注重易用性,希望用戶能找到自己需要的東西。

所以主色在首頁使用的面積較多,而二級頁面使用在關鍵的操作點上。

從產品角度出發,我們在使用主色的時候要考慮頁面的內容關系,理解界面的層次與功能性質。

從視覺出發,選擇了飽和度較高的色彩做為主色時,要考慮因為顏色面積過多而造成的視覺疲勞。

  在banner和海報的設計中主色的面積一般會運用在背景色中,相對面積較大。

可謂是直奔主題式。

  第三刀:從對比色中找輔助色  通常大家覺得只要色彩面積最多就是主色。

其實不然,人們的閱讀心理是有差異的,如果顏色飽和度較低容易被相對面積少的高飽和度顏色搶眼,所以在定義界面主色的時候要懸著飽和度(純度)高的顏色作為主色會比較的穩定。

  在界面設計匯總使用互補色彩的對比是最為強烈的。

這種色彩能使用戶的視覺產生強烈的刺激,情感濃烈,給人留下鮮明的印象。

這種方式是最易于傳播的。

適合在夸張的、張揚的場景下使用。

但這種顏色用的太過于平凡容易造成用戶的視覺疲勞。

給人一種不安定的感覺。

那么在使用這樣的搭配方式時需要控制使用的位置和信息的面積了,核心的地方可以這樣去使用。

  主要的三對互補色:紅綠、藍橙、黃紫  我們可以看到很多APP的icon為了吸引用戶的注意就用到了強烈對比的互補色  番茄快點、QQ空間、相機360

  色彩中還會運用到冷暖對比  冷暖對比色是自然平衡的規律,可以在設計中大量使用,這樣的配色會使作品非常的出彩,不顯單調。

  我們先看看一下幾款APP的icon設計:  下面這款APP的名稱叫KOI,很喜歡這款應用配色,運用到了冷暖配色,起了非常好的點綴效果,看起來靈動而醒目。

  Tweetbot的icon也用到了冷暖顏色的對比,是不是醒目又可愛啊,大家可以去試試這種搭配,百試百靈。

  Seedling Comic Studio,這款icon運用到了冷暖搭配顯得由為的精彩,視線里面集中到了中心點上。

  在設計中,冷色與暖色的對比是界面設計中最為廣泛的使用方法,效果也非常的出眾。

  色彩好比就是陰陽太極,冷與暖的兩級平衡還原了生活中的和諧。

用這樣的配色效果讓用戶感覺舒服平和。

  冷暖色彩搭配的方法基本沒有啥缺點,使用在設計中,技巧性比較多,對設計的細膩感受要求比較高。

  雖然支付寶的主圖標發生了改變,變成了簡潔的藍色支付寶,但主頁面中還是利用到了冷色與暖色的搭配,很好的區分了分類,并且讓頁面中豐富的分類變得不是那么得零散。

很多設計師每次碰到滿版分類圖標的時候很頭大,處理的時候容易把頁面搞花了,建議使用冷暖的方式去調整,將頁面平衡好。

  當時米醋哥在設計360防丟器的時候就用了兩個色,紅色和藍色的冷暖搭配。

將360字體樣式融入到建筑中取用了暖紅色,而尋找位置的大頭針運用了冷藍色。

  好了,先寫到這里。

回顧一下今天我們講的知識點。

  色不過三  主色的定義,及面積  找輔助色,還記的有那幾對輔助色嗎?  今天和大家分享的這不僅是運用在界面中,更是選擇顏色時至為重要的三個點!實用性極高!看似簡單,大家運用起來還要多加分析哦~

版權聲明:本文由 完顏千柔 整理編輯。

原標題:界面配色原則,軟件界面配色

轉載注明出處:http://www.dn9ww09s.icu/assemble/12463.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • ibooks,ibooks author

    ibooks,ibooks author 相關圖片ibooks軟件下載IBooks author是蘋果公司2012年發布的一款電子書制作工具。用戶可以免費下載和使用。iBooks作者制作的電子書可以在iBooks上下載并在iPadibookstart...

  • css優先級,css的優先級順序

    css優先級,css的優先級順序 相關圖片css優先級的意義是什么概念瀏覽器通過判斷優先級來確定哪些屬性值與元素最相關,以便將它們應用于元素。優先級由選擇器的匹配規則決定。如何計算?優先級是根據每個選擇器類型...

  • 如何用ibooks,ibooks怎么用不了

    如何用ibooks,ibooks怎么用不了 相關圖片蘋果6的ibooks怎么用iPhone上的IBooks是一種閱讀工具。IPhone用戶可以直接在iBooks上購買和閱讀書籍。iBooks的使用并不復雜。如果你不知道如何使用iBooksridibooks軟件怎么用...

  • ui設計師和交互設計師,交互設計師和ui設計師的區別

    ui設計師和交互設計師,交互設計師和ui設計師的區別 相關圖片ui設計和交互設計哪個好2016年,視覺 互動設計師的就業價值將更高。盡管大多數視覺設計師還沒有接受過正式的基本交互訓練,但不用擔心。今天這篇扣人心弦的雜志文章的@虹膜翻譯分...

  • 證件照編輯,photoshop cc

    證件照編輯,photoshop cc 相關圖片ps導出為png快捷鍵有網友在網上尋找Photoshop CS4的序列號,想激活它。Photoshop CS4軟件具有更直觀的用戶體驗、更大的編輯自由度和大大提高的工作效率photoshop序列號 破解...

  • css搜索框居中,搜索框css

    css搜索框居中,搜索框css 相關圖片css搜索框樣式代碼最終渲染:首先設置一個帶有背景色的公共div框,然后使用上一篇文章中從post獲得的三角形圖標,將div框設置為相對定位模式,將三角形圖標設置為絕對定位,并將位...

  • superamoled屏幕好嗎,ltps和amoled哪個好

    superamoled屏幕好嗎,ltps和amoled哪個好 相關圖片super amoled 手機市場上的一些安卓手機提到,他們在宣傳手機屏幕時使用了超級AMOLED屏幕。超級AMOLED和之前的AMOLED屏幕之間哪一個最好?兩者有什么區別?AMOLED(super amoled屏幕...

  • 高通驍龍625怎么樣,驍龍625處理器怎么樣

    高通驍龍625怎么樣,驍龍625處理器怎么樣 相關圖片驍龍660一些入門級手機使用小龍450,這個CPU呢?小龍450是小龍發布的中低端移動SOC,但事實上,沒有一款中端機型會選擇小龍450。450多臺小龍用于小龍450采用驍龍660怎么樣...

  • 交互設計作品集輔導,交互設計作品

    交互設計作品集輔導,交互設計作品 相關圖片北京交互設計作品集培訓斯佩爾(中國設計總監):我想我首先需要了解的是,為什么我們需要一個投資組合來尋找互動設計或其他設計工作。從我采訪各個設計師的經驗來看,作品集...

  • bios硬盤啟動順序,bios設置硬盤啟動

    bios硬盤啟動順序,bios設置硬盤啟動 相關圖片bios設置ssd第一啟動盤許多計算機用戶不知道,當計算機啟動時,他們會從硬盤中尋找啟動文件來啟動系統。如果硬盤不是第一個引導項目,或者有兩個硬盤,系統將無法啟動。有時,有...

熱評文章

  • 蘋果6s激活出錯怎么解決,蘋果6s激活出錯

    蘋果6s激活出錯怎么解決,蘋果6s激活出錯 相關圖片蘋果6s手機激活出錯iPhone到達后,需要激活iPhone才能正常使用,但部分用戶遇到iPhone激活錯誤的情況。如果Apple激活出錯,我該怎么辦?不久前,用戶在激活蘋果時遇到蘋果破解激活...

  • 什么是超級用戶,超級用戶

    什么是超級用戶,超級用戶 相關圖片如何變成超級用戶我認為您對regedit.exe很熟悉,但無法設置注冊表項的權限。regedt32.exe的最大優點是可以設置注冊表項的權限。NT/2000/XP的帳戶信息是以超級用戶密碼...

  • 簡潔網名,簡潔的意思

    簡潔網名,簡潔的意思 相關圖片簡潔壁紙我們在頁面右側看到了很多浮動效果。第一類是QQ聯系人面板、對聯廣告等,大部分是基于JavaScript的動態效果。今天,我想在右邊分享一個浮動效果,它只需要CS情侶網名二字簡...

  • 聯想xp系統,聯想電腦是xp系統嗎

    聯想xp系統,聯想電腦是xp系統嗎 相關圖片聯想筆記本電腦怎么裝xp系統使用聯想XP SP2系統生產的windowsxpsp3oem系統磁盤,可以在網上找到很多聯想磁盤,但都不是聯想SP2 OEM生產的。根據論壇上的教學方法,我們可聯想電腦怎么做...

  • 什么是混合模式,混合模式在哪

    什么是混合模式,混合模式在哪 相關圖片ps混合模式濾色創造力無處不在。在網頁設計中,如果你發現了一些好的靈感或趨勢,盡量把它應用到你的項目中去,少用那些無聊和腐朽的想法。畢竟,設計師應該提高自己,不要為了...

  • Windows XP,Windows XP Mode

    Windows XP,Windows XP Mode 相關圖片Windows XP下載Windows XP SP3已經正式發布。如果您還沒有下載XP SP3,請在Zixun/200805/3371.html下載XP SP3。IE7不包含在升級包中XP免費升級win10...

  • 高峰效能,高峰效能容量是什么

    高峰效能,高峰效能容量是什么 相關圖片Windows XP我們一直對beta軟件的評估持保留態度,但這條消息確實讓人難以接受。根據魔鬼山軟件的測試結果,盡管微軟說Windows XP SP3只是為了增強和修正安全性Windows XP Mode...

  • 彈出菜單,編程大師

    彈出菜單,編程大師 相關圖片安卓彈出菜單!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/鼠標左鍵彈出菜單...

  • xp主題,win10xp主題

    xp主題,win10xp主題 相關圖片xp主題下載XP SP3已經推出好幾天了。沒有一個好的XP SP3主題,就不是一個好的系統,但是官方不能直接安裝第三方主題,所以我們有這個xpsp3主題破解文件下載地址:論xp sp3鏡像文件下載...

  • 怎么縮進行間距,怎么縮進文字間距

    怎么縮進行間距,怎么縮進文字間距 相關圖片文檔怎么縮進行距首先,CSS控制UL縮進距離方法:styletype=text/CSSUl{margin left:-10px;}/styleul-li計算機軟硬件應用網絡ww行距太寬了怎樣縮進...

關注微信

变脸官网查询