扁平化概念的核心意義是:去除冗余、厚重和繁雜的裝飾效果。而具體表現在去掉了多余的透視、紋理、漸變以及能做出 3D 效果的元素,這樣可以讓“信息”本身重新作為核心被凸顯出來。同時在設計元素上,則強調了抽象、極簡和符號化。
時至今日,扁平化已不再是流行一時的設計風潮,而是一種美學風格。
扁平化的設計,尤其是手機的系統直接體現在:更少的按鈕和選項,這樣使得UI界面變得更加干凈整齊,使用起來格外簡潔,從而帶給用戶更加良好的操作體驗。因為可以更加簡單直接地將信息和事物的工作方式展示出來,所以可以有效減少認知障礙的產生。
“Flat Design”為“扁平化設計”的英文名,這個概念在 2008 年由 Google 提出。但圍繞“Flat Design”這個名字則存在著諸多爭議,現在你所看到的這個名稱“Flat Design”也并未被大家所完全認可。
總結丨扁平化設計特質
對于扁平化的定義,依然沒有一個固定范式,但概括起來有下面四個特征:
- 沒有多余的效果,例如投影、凹凸或漸變等
- 使用簡潔風格的元素和圖標
- 大膽豐富且明亮的配色風格
- 盡量減少裝飾的極簡設計
趨勢丨扁平化2.0的全新細節(jié)
了解了上面的扁平化,那什么是扁平化 2.0 呢?為了避免純粹的扁平化設計,一些細微的效果逐漸被運用其中。扁平化歷來被人所詬病的方面即交互不夠明顯,按鈕難以找到等,現在這些問題都可以通過增加一些小小的效果而得以解決,我們一起來看看。(以下觀點來源:ifeiwu)
一、微陰影
微陰影,就是極其微弱的投影,這是一種幾乎不被人所立刻察覺的投影,它可以增加元素的深度,使其從背景中脫穎而出,引起用戶的注意。但在使用這一效果時候需要注意,要讓它保持柔和感和隱蔽性。
利用元素的形狀,使其從背景中獨立出來。即使元素與背景有著同樣的顏色,依然可以通過微陰影加以區(qū)分,而視覺上還能保持色調一致的簡潔性。
有人這時會提到長陰影,但長陰影通常運用的地方只是在LOGO、圖標等元素的內部,它是扁平化的一種設計風格的延伸。
二、幽靈按鈕
這不是指一個幽靈形狀的按鈕。恰恰相反,這類按鈕的形狀非常簡單,僅僅是一個矩形或一個圓角矩形的邊框,內部為透明。看上去若有若無,類似于幽靈的出沒方式。
幽靈按鈕的顏色通常為黑或白,這是因為它需要和周圍環(huán)境所協調。如果可以,試試別的色彩也未嘗不可。例如無色的黑白圖片搭配有色的幽靈按鈕。同時,也需要注意,與幽靈按鈕搭配的也多半是無襯線的字體,中文也是細黑等類似的字體。這樣就讓按鈕和其字體都在外觀上取得一致性。
三、低調漸變
談到避免極端的扁平主義,漸變的運用就有回暖之勢。而新的漸變不同以往,它往往是以更為低調的姿態(tài)出現的,比如只用于背景色或氛圍色,不再喧兵奪主,并且只在兩種顏色之間漸變過渡。下面是雙色漸變的實例。
可以看出這一案例中,網頁已經讓漸變成為了一種設計元素。
四、圓形
毫無疑問,扁平化設計就是 Google 的 Material Design 的前身,這在 Material Design 的設計風格中可以看出扁平化的影子,但后者不但繼承其簡潔的優(yōu)勢,還進一步在用戶體驗上得以發(fā)揮。
由于圓形很好的模擬了手指印,因此一個圓的存在看似就是一個可觸的地方。這對于喚起用戶的操作發(fā)揮了極大的作用。
由于圓形本身的特殊性,使它極易從背景中分離出來,因此將重要的元素設計為圓形也是心機滿滿。例如下面這家餐廳的網頁設計,圓形本身具有一種親和感,非常契合餐廳這類溫馨休閑的品牌氛圍。
五、雙色搭配
早期的扁平化配色是非常鮮艷大膽的,它可以在高飽和度中挑選六到七種顏色進行搭配。如今,扁平化設計的配色選擇雖然仍然朝明亮大膽的方向走,但只局限于有限的顏色選擇,雙色調配色是目前逐漸流行起來的另一種配色方向。
近來,扁平化項目包含了大量的影像。由于這一轉變,就能從眾多明亮或鮮艷的色系中進行選擇配色。
六、動態(tài)要素
更多的視頻和動畫特效的運用,使得扁平化更加生動活潑。然而這些讓網頁看起來更生動的手段,無一獨立于整體頁面的風格而獨立存在。它們依然是簡潔的,符合網站整體的審美方向的。
從一開始的擬物化風格到純粹的扁平化風格,再到今天的「扁平化2.0」,扁平化的未來還需要在此基礎上不斷發(fā)展一下新的創(chuàng)意,我們一起期待。
文章首發(fā)于「庖丁開發(fā)」公眾號,每晚十點分享產品、設計、開發(fā)的干貨,歡迎拍磚。