扁平化設計算是秉承了極簡主義理念的至親了 – 因為它將簡潔的思想融入至所有元素的設計。然而,要達成簡潔的扁平化設計依舊困難 – 即需要我們以相同的設計理念為目的,并創(chuàng)造出一套連貫的視覺與功能體驗。
讓我們來了解下,你能夠通過扁平化設計為用戶做些什么呢?
隱形設計
刪除不必要的樣式
練習“隱形設計”最好的方式是做出不搶用戶注意力的設計創(chuàng)意。因為如果用戶每次都將注意力花費在你的設計上,勢必會減少他們沉浸在產品中的體驗。而你的目標則是要幫助用戶快速、輕松、準確地了解相應的操作與信息。所以,你的設計應該從視覺元素中剝離出來,并能突出產品的基本功能。
? Dropbox 網站的扁平化設計僅聚焦于內容
充滿活力的配色
配色是影響扁平化設計的主要因素
配色是扁平化設計的核心 —— 它可以詮釋你的網站頁面以及 APP 視圖的整體感覺。
示例:Rovane Durso
小貼士:這是一個不錯的材料設計和扁平化 UI 配色指南。
當你選擇扁平化配色方案時,扁平化 UI 配色網能夠為你提供一個很棒的配色方案。
建議你使用柔和不飽和的色調。因為它們更傾向為你的頁面增添藝術美感,而不會由于頁面飽和度過高,讓讀者出現視覺疲勞。
柔和的配色會帶給你視覺上的愉悅,并且不會喧賓奪主。示例:thehypeagency
針對柔和的背景,明亮的色彩可以起到突顯的作用。請注意,在以下示例中,我們將展示如何使用色彩對比,營造出圖像從頁面跳出來的效果。
在深色的背景中,明亮色彩的圖片能夠起到引人注目的效果。示例:triplagent
確保 UI 中色彩的可接受性是實施良好視覺設計的一個非常重要的方面。多嘗試配色的方案,確保頁面元素有很好的對比效果。
注重字體排印
聚焦美學
字體可以告訴用戶在頁面中什么是最重要的,同時能讓你的設計具備更好的體驗。排版也應當盡量簡約,因為它能讓頁面更快地加載,易于用戶閱讀。極簡主義則更是如此。
簡單的字體傳達出自信和明晰。示例:Cienne
小貼士:可以考慮在擁有多變的簡單無襯線字體系列中,以及主要字體排印的網站上使用扁平化設計。
字體的調性應與整體設計方案相匹配。而針對簡單的設計,高度美化的字體可能看上去會有些奇怪。
動效設計
動效使扁平化設計更以用戶為中心
動效能夠良好的搭配扁平化的簡潔視覺效果。當用戶在你的網站或 APP 中進行交互時,他們可能會提出以下問題:
?“這里什么是最重要的?
“我該如何了解接下來要做什么?
“我該如何得知我已經完成了相應的任務?
像這樣的問題,可能會提醒你是時候使用動效來增強用戶體驗了。而動效能夠更好的感知用戶體驗并回答這些問題:
?它能夠吸引用戶的注意力并告知用戶,如果他/她完成了點擊/手勢后會發(fā)生什么。
它可以幫助你在界面中定位用戶,并在視圖間提供重點的引導。
它提供了視覺反饋。
你可以通過過渡、動畫,乃至 3D 的紋理深度等多重形式來了解基于動效設計的相關元素。
? 動效使我們能夠更好的互動交流,同時讓用戶更易于理解。示例:Anish Chandran
插圖
插圖讓扁平化設計的理念得以更廣闊的延伸
隨著扁平化設計風格逐步的分層,自然而然更多的插圖形態(tài)能夠融入其中。
圖片比文字更具有說服力,并讓體驗更加的順暢。
由于插圖更易于讓用戶理解,合理的設計可以讓信息更有效的傳遞。
? Intercom 網站使用了信息圖的形式進行展示,它會引導你聚焦到重要的信息上,而不會讓你感到迷茫。
扁平化設計 2.0
交互體驗應當更加直觀,并且不需要任何額外的解釋
當你設計的扁平化 UI 是互動元素時,你將會面臨一個重要的問題。即用戶需要知道頁面中的哪些區(qū)域是純靜態(tài)內容,而哪些區(qū)域是可點擊的。目前,大多數設計師們已經開始意識到這個問題。因此,扁平化設計 2.0 的出現便是對扁平化設計的更成熟、均衡的解釋。
扁平化設計 2.0 吸取了極簡主義的優(yōu)點,并可與擬物化設計相得益彰。
扁平化設計 2.0 使用細微的陰影和邊緣效應來暗示產品中的可交互性。在界面上,陰影和漸變效果告訴了用戶哪些可以點擊,而哪些則不能。所以,用戶得以更好的理解。
? 用戶更容易通過陰影效果來了解元素的層次結構。示例:Google
在以下的示例中,你可以看到,如何在 CTA 按鈕的邊緣巧妙地利用細陰影來增加按鈕凸起的效果。
? Sripe 主頁上的主要與次要 CTA 按鈕都是針對背景頁而制作的。
由于扁平化設計的關鍵屬性使網站變得實用,并且美觀大方。它讓我們能更加貼近數字化設計的新模式,而其中的功能性與藝術感又能笙磬同音。