配色方法,三種UI的選擇配色方法

2022-12-26 18:34:35 來源/作者: / 己有:72人學習過

3、 調整透明度(1%-100%隨意,省心的做法是直接鍵入一個整數值,比如:輕質感類頁面可以選20%-40%,重質感感類可以鍵入60%或以上)

如下圖(將色塊使用“柔光”混合模式,調整不一樣的數值得到不同的效果)

配色方法,三種UI的選擇配色方法

同樣的方法:界面中的字體顏色、細節線條、按鈕漸變、邊角高光、描邊陰影……都可以用這樣的方法取色使用這個方法的優點是:色彩獲得比較簡單 , 無需了解色彩的指數和直方圖 , 不用看色輪.....只需要設計師具備色彩的審美 , 能夠合理的應用。

配色方法,三種UI的選擇配色方法

方法三: 色彩提取法

這個方法是從現有的自然色、圖片色中提取所要的顏色,給應用和搭配贏得了不少的時間。

1、找圖

找一張符合所要設計界面風格的圖(本教程用圖為Galaxy S4自帶壁紙)

配色方法,三種UI的選擇配色方法

2、提取顏色

將圖片放入PS中,點擊“存儲web所有格式”(Windows快捷鍵為Ctrl+shift+Alt+s),格式選擇png,色塊選擇8。

在顏色顯示區域會留下8種顏色,點擊顏色區域右側下拉按鈕,會找到“存儲顏色表”,把他存儲到桌面上或者你容易找到的地方。然后用PS打開,色板中會顯示剛才提取到的顏色。

配色方法,三種UI的選擇配色方法

成功提取出8種顏色

配色方法,三種UI的選擇配色方法

3、應用

配色方法,三種UI的選擇配色方法

配色方法,三種UI的選擇配色方法

具體的顏色應用為:

1、導航文字及logo的顏色為最淺的藍色;

2、Banner區域既大背景,這里用了開始的圖片。上面的大標題logo則用了最深的藍色;

3、內容區域出現的提取到的三個色相的色彩,如果只是排列剩下的幾個顏色的話,顏色會很沖,所以用了幾張圖片來過度顏色調整畫面的節奏。現在看來效果還不錯,內容區域的文字顏色與導航文字一致,都是最淺的藍色;

4、內容區域的幾個按鈕并沒有用提取的顏色,而是用白色疊加然后調整透明度出來的。

總結 : 以上的三種配色方法思路是完全不一樣的,希望多多少少能帶給大家一些收獲。在學習新的方法的同時,也要學會舉一反三,結合自己已有的經驗和設計師獨有的對色彩的感覺,形成一套屬于自己的配色方法。