UI設(shè)計技巧之明亮的色彩應(yīng)用

如今移動應(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末捕捂,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子愉阎,更是在濱河造成了極大的恐慌绞蹦,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件榜旦,死亡現(xiàn)場離奇詭異,居然都是意外死亡景殷,警方通過查閱死者的電腦和手機溅呢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進店門澡屡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人咐旧,你說我怎么就攤上這事驶鹉。” “怎么了铣墨?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵室埋,是天一觀的道長。 經(jīng)常有香客問我伊约,道長姚淆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任屡律,我火速辦了婚禮腌逢,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘超埋。我一直安慰自己搏讶,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布霍殴。 她就那樣靜靜地躺著媒惕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪来庭。 梳的紋絲不亂的頭發(fā)上吓笙,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天,我揣著相機與錄音巾腕,去河邊找鬼面睛。 笑死,一個胖子當(dāng)著我的面吹牛尊搬,可吹牛的內(nèi)容都是我干的叁鉴。 我是一名探鬼主播,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼佛寿,長吁一口氣:“原來是場噩夢啊……” “哼幌墓!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起冀泻,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤常侣,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后弹渔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體胳施,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年肢专,在試婚紗的時候發(fā)現(xiàn)自己被綠了舞肆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片焦辅。...
    茶點故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖椿胯,靈堂內(nèi)的尸體忽然破棺而出筷登,到底是詐尸還是另有隱情,我是刑警寧澤哩盲,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布前方,位于F島的核電站,受9級特大地震影響廉油,放射性物質(zhì)發(fā)生泄漏惠险。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一娱两、第九天 我趴在偏房一處隱蔽的房頂上張望莺匠。 院中可真熱鬧,春花似錦十兢、人聲如沸趣竣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽遥缕。三九已至,卻和暖如春宵呛,著一層夾襖步出監(jiān)牢的瞬間单匣,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工宝穗, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留户秤,地道東北人。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓逮矛,卻偏偏與公主長得像鸡号,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子须鼎,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,654評論 2 354

推薦閱讀更多精彩內(nèi)容