相信一直有關(guān)注UI設(shè)計(jì)的人們，肯定聽過扁平化UI設(shè)計(jì)這么一個(gè)概念，現(xiàn)在的人們崇尚極簡主義，簡約風(fēng)格等等，而扁平化，則是集這些元素的一種設(shè)計(jì)風(fēng)格。

交互時(shí)代在多年的項(xiàng)目經(jīng)驗(yàn)中，關(guān)于扁平化的項(xiàng)目設(shè)計(jì)的印象是最為深刻的，因?yàn)樗銐驎r(shí)尚，讓人更容易接受。而在交互時(shí)代利用多年的設(shè)計(jì)教育經(jīng)驗(yàn)，針對各大互聯(lián)網(wǎng)企業(yè)對設(shè)計(jì)人才的需求獨(dú)力開發(fā)出的設(shè)計(jì)課程，更是將其作為一個(gè)重點(diǎn)闡述，由此可見扁平化UI設(shè)計(jì)的發(fā)展趨勢是十分強(qiáng)大的。

今天，交互時(shí)代就給大家?guī)硪黄P(guān)于扁平化UI設(shè)計(jì)的幾個(gè)技巧，能夠讓大家做扁平化UI設(shè)計(jì)的時(shí)候更加得心應(yīng)手。

扁平化手段之一：高光漸變與投影的變化

大部分網(wǎng)絡(luò)自學(xué)教程都會(huì)提到扁平化風(fēng)格的三個(gè)要素，就是no高光、no漸變、no陰影。交互時(shí)代認(rèn)為這樣過于武斷，我們既然要扁平化，就不能讓設(shè)計(jì)看起來有厚度，因此我們應(yīng)該去掉的是帶有過渡的顏色漸變，因?yàn)闈u變會(huì)使圖像看起來具有厚度感。

扁平化手段之二：色塊之間的搭配

我們可以用各種基礎(chǔ)形狀組合出更多其他的形狀，但是交互時(shí)代不建議大家超過三種不同的基礎(chǔ)形狀組合，過于復(fù)雜的形狀會(huì)讓我們的UI設(shè)計(jì)不夠扁平。

扁平化手段之三：選擇無襯線字體

在我們選擇字體的時(shí)候，務(wù)必選擇無襯線的字體，例如微軟雅黑，黑體，幼圓等等。

扁平化手段之四：扁平化中的圖片素材處理

在扁平化UI設(shè)計(jì)中使用圖片素材的話，交互時(shí)代主要會(huì)用三種方式處理，分別是：

1.在圖片元素上使用色塊+文字的方式

2.將圖片元素進(jìn)行模糊處理，凸顯信息內(nèi)容

3.調(diào)整圖片元素的亮度，凸顯信息內(nèi)容

扁平化手段之五：用多種色塊進(jìn)行組合

用色塊組合出的圖案，我們可以稱呼為“似扁平化”，雖然它具有一定的深度，但是仍然會(huì)給我們的UI設(shè)計(jì)帶來簡約優(yōu)美的感覺。

扁平化手段之六：利用飽和度制造扁平化的立體感

純粹的扁平化很容易讓人覺得單調(diào)枯燥，而我們依舊可以給扁平化的圖標(biāo)制造那么一點(diǎn)立體感，基本上可以用不同飽和度的相同色調(diào)的色塊進(jìn)行一個(gè)光暗面的對比，來營造出一種立體感。

當(dāng)然，交互時(shí)代說了這么多，實(shí)際上扁平化UI設(shè)計(jì)的主要內(nèi)容還是簡潔，真正的扁平化不光是視覺設(shè)計(jì)上的扁平，還有操作上的扁平，我們做UI設(shè)計(jì)不僅僅是靠幾條原則去進(jìn)行的，更多的時(shí)候要利用天馬行空的想法，將這些規(guī)則熟練運(yùn)用，才是真正的收獲。

請聯(lián)系網(wǎng)站客服，了解詳細(xì)的優(yōu)惠課程信息~

優(yōu)質(zhì)、權(quán)威、便捷、省心