扁平化設計最佳實踐

扁平化設計最佳實踐

扁平化設計算是秉承了極簡主義理念的至親了 – 由於它將簡潔的思想融入至全部元素的設計。然而，要達成簡潔的扁平化設計依舊困難 – 即須要咱們以相同的設計理念爲目的，並創造出一套連貫的視覺與功能體驗。

讓咱們來了解下，你可以經過扁平化設計爲用戶作些什麼呢？

隱形設計

刪除沒必要要的樣式

練習「隱形設計」最好的方式是作出不搶用戶注意力的設計創意。由於若是用戶每次都將注意力花費在你的設計上，勢必會減小他們沉浸在產品中的體驗。而你的目標則是要幫助用戶快速、輕鬆、準確地瞭解相應的操做與信息。因此，你的設計應該從視覺元素中剝離出來，並能暴露出產品的基本功能。

Dropbox 網站的扁平化設計僅聚焦於內容

充滿活力的配色

配色是影響扁平化設計的主要因素

配色是扁平化設計的核心 —— 它能夠詮釋你的網站頁面以及 APP 視圖的總體感受。

示例：Rovane Durso

小貼士：

• 這是一個不錯的材料設計和扁平化 UI 配色指南。

當你選擇扁平化配色方案時，扁平化 UI 配色網可以爲你提供一個很棒的配色場所。

• 建議你使用柔和不飽和的色調。由於它們更傾向爲你的頁面增添藝術美感，而不會因爲頁面過亮，讓讀者出現視覺疲勞。

柔和的配色會帶給你視覺上的愉悅，而且不會搶頁面中主要信息的注意力。示例：thehypeagency

• 針對柔和的背景，明亮的色彩能夠起到突顯的做用。請注意，在如下示例中，咱們將展現如何使用色彩突顯，營造出圖像從頁面彈出的效果。

在深色的背景中，明亮色彩的圖片可以起到引人注目的效果。示例：triplagent

• 確保 UI 中色彩的可接受性是實施良好視覺設計的一個很是重要的方面。測一測你的調色板，確保你有足夠的色彩對比。

注重字體排印

聚焦美學

字體能夠告訴用戶在頁面中什麼是最重要的，同時能讓你的設計具有更好的體驗。排版也應當儘可能簡約，由於它能讓頁面更快地加載，易於用戶閱讀。極簡主義則更是如此。

簡單的字體傳達出自信和明晰。示例：Cienne

小貼士：

• 能夠考慮在擁有多變的簡單無襯線字體系列中，以及主要字體排印的網站上使用扁平化設計。
• 字體的調性應與總體設計方案相匹配。而針對簡單的設計，高度美化的字體可能看上去會有些奇怪。

動效

動效使扁平化設計更以用戶爲中心

動效可以良好的搭配扁平化的簡潔視覺效果。當用戶在你的網站或 APP 中進行交互時，他們可能會提出如下問題：

• 這裏什麼是最重要的？
• 我該如何瞭解接下來要作什麼？
• 我該如何得知我已經完成了相應的任務？

像這樣的問題，可能會提醒你是時候使用動效來加強用戶體驗了。而動效可以更好的感知用戶體驗並回答這些問題：

• 它可以吸引用戶的注意力並告知用戶，若是他/她完成了點擊/手勢後會發生什麼。
• 它能夠幫助你在界面中定位用戶，並在視圖間提供重點的引導。
• 它提供了視覺反饋。

你能夠經過過渡、動畫，乃至 3D 的紋理深度等多重形式來了解基於動效設計的相關元素。

動效使咱們可以更好的互動交流，同時讓用戶更易於理解。示例：Anish Chandran

插圖

插圖讓扁平化設計的理念得以更廣闊的延伸

隨着扁平化設計風格逐步的分層，天然而然更多的插圖形態可以融入其中。

圖片比文字更具備說服力，並讓體驗更加的順暢。

因爲插圖更易於讓用戶理解，合理的製做即可達到信息有效傳遞的效果。

Intercom 網站使用了信息化插圖的形式進行展現，它會引導你聚焦到重要的信息上，而不會讓你忽略它。

扁平化設計 2.0

交互體驗應當更加直觀，而且不須要任何額外的解釋

當你設計的扁平化 UI 是互動元素時，你將會面臨一個重要的問題。即用戶須要知道頁面中的哪些區域是純靜態內容，而哪些區域是可點擊的。目前，設計師們已經開始意識到這個問題。所以，扁平化設計 2.0 的出現即是對扁平化設計的更成熟、均衡的解釋。

扁平化設計 2.0 採起了極簡主義最佳的方面，並可與擬物化設計共同工做。

扁平化設計 2.0 使用細微的陰影和邊緣效應來暗示產品中的可交互性。在界面上，陰影和漸變效果告訴了用戶哪些能夠點擊，而哪些則不能。因此，用戶得以更好的理解。

用戶更容易經過陰影效果來了解元素的層次結構。示例：Google

在如下的示例中，你能夠看到，如何在 CTA 按鈕的邊緣巧妙地利用細陰影來增長按鈕凸起的效果。

Sripe 主頁上的主要與次要 CTA 按鈕都是針對背景頁而製做的。

因爲扁平化設計的關鍵屬性使網站變得實用，而且美觀大方。它讓咱們能更加貼近數字化設計的新模式，而其中的功能性與藝術感又能笙磬同音。

感謝你的閱讀，若是以爲文章不錯，不妨點個贊。

注：

1. 本文版權歸原做者全部，僅用於學習與交流。
2. 如需轉載譯文，煩請按下方註明出處信息，謝謝！

英文原文：Best Practices for Flat Design
做者：Nick Babich
譯者：IT程序獅
譯文地址：https://zhuanlan.zhihu.com/p/25070599