抓住“扁平化”


談到設計,無論是一個網站還是一個應用程序,扁平化和極簡的設計已經成爲新的趨勢越來越多的網站設計在UI上走扁平化設計的路線,“扁平化設計”已是當下網頁設計的流行趨勢。那麼,如何讓自己融入到這個流行趨勢中去?

首先,小編就說說什麼是扁平化設計。扁平化完全屬於二次元,這個概念最核心的地方就是放棄一切裝飾效果,諸如陰影,透視,紋理,漸變等等能做出3D效果的元素一概不用。所有的元素的邊界都乾淨利落,沒有任何羽化,漸變,或者陰影。尤其在手機上,更少的按鈕和選項使得界面乾淨整齊,使用起來格外簡潔。可以更加簡單直接的將信息和事物的工作方式展示出來,減少認知障礙的產生。

那麼,如何將扁平化設計運用到自己的項目中去?下面小編介紹幾個採用扁平化設計的例子。

 

一、Facebook

Facebook是扁平化界面設計的絕佳案例。它們的主要操作按鈕依然使用輕微的立體化,但大量的次要按鈕採用了完全的扁平化設計,而且依據事實判斷,它們從未改變過界面風格,它一直是這樣的。它的界面簡約而不簡單,讓人覺得清新干淨。

 

 

二、Squarespace

新版的Squarespace幾乎完全採用了扁平化的視覺風格,只在一些細節當中使用了相對傳統的方式突出了重要的交互元素。試用一下就會發現,他們的產品在功能邏輯上還是蠻複雜的,但這一切都隱含在簡約直白的界面背後。

 

三、Nest

在nest的網站中,實際的產品及相關的應用環境照片作爲“真實”元素融入到扁平風格的媒介載體(網站本身)當中,虛實結合,讓訪問者可以很容易的將注意力聚焦在產品上,而不會被網站界面上的視覺元素所幹擾。

看過上面一些經典的扁平化設計的案例,可能很多人會覺得實際操作起來,讓扁平化融入到自己的網站中去還是比較困難。那小編接下來再介紹一個最近在開源中國上發現的一款框架用戶中心,名爲Open Center的用戶中心,它採用的就是扁平化設計。我們來看看它是如何將扁平化設計融入到產品的界面設計中去。

小編認爲,首先要了解自己產品的特點。OpenCenter的特性之一就是“輕量級”,OpenCenter只做用戶中心。OpenCenter刪繁就簡,沒有微博功能,沒有朋友圈,沒有羣組功能,沒有資訊、沒有專輯等功能,OpenCenter卸掉臃腫,輕鬆上陣。基於這點,OpenCenter的用戶界面和後臺管理界面都採用扁平化的設計,用戶界面簡潔清新。

  

上面是Open Center的後臺管理界面,清晰簡潔。後臺管理框架採用zui作爲UI框架,圖表繪製採用highChart。導航結構頂部爲系統級導航,在頂部導航加入了兩個便捷功能,清空緩存和打開前臺。導航左側爲已安裝的模塊管理界面入口,點擊底部更多可以進入到雲平臺的模塊中心,也可以根據自身需要添加模塊。右側部分爲主內容部分,主要統計當天的活躍度與最近N天的新用戶註冊數,一目瞭然,此處的N可以在後臺配置。

小編認爲扁平化設計可以在兩個層面上展現:第一是在視覺圖形上,如上面的OpenCenter的界面;第二是在信息結構上。視覺圖形很容易理解,就是把這種擬物化的3D視覺風格給“拍平了”。信息架構扁平化以後意味着整個層級架構被“拍扁了”,只有單層。

採用扁平化設計可以更加簡單直接的將信息和事物的工作方式展示出來,減少認知障礙的產生。而且,它能以一個簡單直白的方式來傳遞一個信息或者幫助一個產品以及思想變得更加深入人心。所以小編覺得,趁在下一個新的設計潮流到來之前,我們必須好好把握當前的設計趨勢。

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章