如今移動應(yīng)用的發(fā)展愈發(fā)成熟泰偿,功能逐漸大同小異通危。此時铸豁,一個讓人有良好視覺享受的移動應(yīng)用則備受青睞,而色彩正是營造美感的關(guān)鍵所在菊碟。今天帶給大家的就是UI設(shè)計技巧之明亮的色彩應(yīng)用节芥。在UI設(shè)計師的工具包中,色彩是最強有力的工具之一逆害。色彩能吸引注意力头镊,烘托氛圍,影響用戶的情緒魄幕、認(rèn)知和行為相艇。當(dāng)進行網(wǎng)站或移動應(yīng)用的程序設(shè)計時,毫無疑問是亮系色彩大展身手的時機纯陨。設(shè)計師們用亮系色彩讓用戶著眼于界面中的重要元素厂捞,并為之印象深刻。
下面是在設(shè)計中巧用亮系色彩的一些實用技巧:
單調(diào)
在使用亮系色彩時队丝,單一調(diào)色板法則是目前最流行的方式之一靡馁。單一調(diào)色板包括單一色調(diào)和色彩混合方式。這樣的調(diào)色板能形成視覺刺激——驚艷的排版和單一的色彩進行配對能創(chuàng)造令人過目不忘的效果机久。
(采用大膽的色彩來創(chuàng)建一個簡單卻讓人印象深刻的外觀)
小技巧:使用黑白這樣的單一顏色臭墨,是在小屏幕上創(chuàng)造視覺驚喜的好方法。
(圖標(biāo)和簡單的樣式創(chuàng)造了一個易于閱讀和互動的組合)
雙色調(diào)
雙色調(diào)是圖像的半色調(diào)的復(fù)制膘盖,它帶來圖像的中間調(diào)和高光胧弛。這種曾經(jīng)應(yīng)用于印刷裝訂中的技術(shù),在互聯(lián)網(wǎng)時代找到了新的生命侠畔。雙色調(diào)不僅能吸引人的注意力结缚,而且它非常容易被創(chuàng)建。你可以在
Photoshop 中使用雙色梯度輕松做出這種效果软棺。
(上圖:簡約雙色調(diào)營造了一種商務(wù)范红竭。)
雙色調(diào)效果不僅可以在大型桌面圖像中應(yīng)用,它們同樣可以在移動設(shè)備上使用喘落。
小技巧:
使用雙色調(diào)創(chuàng)作主圖茵宪。選擇一張主題明確的高質(zhì)量圖片,而不是有著太多元素的圖片瘦棋,因為后者會有很多細(xì)節(jié)被忽略稀火。
(上圖:一張極簡圖像勝過千言萬語。)
選擇一種能反映照片情緒的色彩赌朋。你要知道凰狞,不同的顏色能喚起不一樣的情緒篇裁。
當(dāng)你設(shè)計網(wǎng)站并想在你的圖像上創(chuàng)建雙色調(diào)的效果時,你可以不在現(xiàn)有圖像上做任何修改赡若,只要在 Colofilter.css 上應(yīng)用 CSS
代碼即可茴恰。
疊加
包含了顏色疊加的設(shè)計是用色彩進行聲明的一種方法。通過使用與材料設(shè)計相關(guān)的一種明亮而飽和的色彩斩熊,你可以在半透明的框架上簡單地應(yīng)用圖像或者視頻往枣,從而營造現(xiàn)代感。
(上圖:顏色疊加增強了圖像的作用粉渠,并允許設(shè)計師校準(zhǔn)基調(diào)色彩分冈。)
請考慮在卡片樣式元素中使用圖層疊加,以用于視頻內(nèi)容或者重點的強調(diào)霸株。
(上圖:懸停動畫卡應(yīng)用雕沉。)
小技巧:當(dāng)使用單一顏色進行疊加時,需要考慮顏色的飽和度和透明度去件。
較深的顏色組合(低透明高飽和)能讓人將注意力集中在色彩上;
較淺的顏色組合能讓人將注意力集中在圖像上坡椒。
結(jié)語
沒什么設(shè)計技術(shù)能比與色彩打交道更有趣的了。色彩能營造戲劇感尤溜、深沉感甚至安詳感倔叼。作為一名設(shè)計師,當(dāng)你使用色彩時宫莱,真應(yīng)該去試驗一下不同的搭配組合丈攒。不論你鐘情于明亮、大膽的色彩授霸,抑或黑白簡約感巡验,你都要記住:
沒有不好看的色彩碘耳,只有不恰當(dāng)?shù)氖褂孟陨琛5竭@里今天的UI設(shè)計技巧之明亮的色彩應(yīng)用就結(jié)束了,喜歡的多多關(guān)注我們哦辛辨。
絲路教程網(wǎng): http://blog.silucg.com/UI/jc/7248.html