海淘科技編者按，運用扁平化設(shè)計技巧創(chuàng)造極致用戶體驗，呈現(xiàn)內(nèi)容。

扁平化設(shè)計算是秉承了極簡主義理念的至親了——因為它將簡潔的思想融入至所有元素的設(shè)計。然而，要達成簡潔的扁平化設(shè)計依舊困難——即需要我們以相同的設(shè)計理念為目的，并創(chuàng)造出一套連貫的視覺與功能體驗。讓我們來了解下，你能夠通過扁平化設(shè)計為用戶做些什么呢?

隱形設(shè)計

刪除不必要的樣式

練習“隱形設(shè)計”最好的方式是做出不搶用戶注意力的設(shè)計創(chuàng)意。因為如果用戶每次都將注意力花費在你的設(shè)計上，勢必會減少他們沉浸在產(chǎn)品中的體驗。而你的目標則是要幫助用戶快速、輕松、準確地了解相應(yīng)的操作與信息。所以，你的設(shè)計應(yīng)該從視覺元素中剝離出來，并能暴露出產(chǎn)品的基本功能。

Dropbox 網(wǎng)站的扁平化設(shè)計僅聚焦于內(nèi)容

充滿活力的配色

配色是影響扁平化設(shè)計的主要因素

配色是扁平化設(shè)計的核心 —— 它可以詮釋你的網(wǎng)站頁面以及 APP 視圖的整體感覺。

示例：Rovane Durso

小貼士：

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

當你選擇扁平化配色方案時，扁平化 UI 配色網(wǎng)能夠為你提供一個很棒的配色場所。建議你使用柔和不飽和的色調(diào)。因為它們更傾向為你的頁面增添藝術(shù)美感，而不會由于頁面過亮，讓讀者出現(xiàn)視覺疲勞。

柔和的配色會帶給你視覺上的愉悅，并且不會搶頁面中主要信息的注意力。示例：thehypeagency。針對柔和的背景，明亮的色彩可以起到突顯的作用。請注意，在以下示例中，我們將展示如何使用色彩突顯，營造出圖像從頁面彈出的效果。

在深色的背景中，明亮色彩的圖片能夠起到引人注目的效果。示例：triplagent。確保 UI 中色彩的可接受性是實施良好視覺設(shè)計的一個非常重要的方面。測一測你的調(diào)色板，確保你有足夠的色彩對比。

注重字體排印

聚焦美學

字體可以告訴用戶在頁面中什么是最重要的，同時能讓你的設(shè)計具備更好的體驗。排版也應(yīng)當盡量簡約，因為它能讓頁面更快地加載，易于用戶閱讀。極簡主義則更是如此。

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

小貼士：

可以考慮在擁有多變的簡單無襯線字體系列中，以及主要字體排印的網(wǎng)站上使用扁平化設(shè)計。

字體的調(diào)性應(yīng)與整體設(shè)計方案相匹配。而針對簡單的設(shè)計，高度美化的字體可能看上去會有些奇怪。

動效

動效使扁平化設(shè)計更以用戶為中心

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

• 這里什么是最重要的?
• 我該如何了解接下來要做什么?
• 我該如何得知我已經(jīng)完成了相應(yīng)的任務(wù)?

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

• 它能夠吸引用戶的注意力并告知用戶，如果他/她完成了點擊/手勢后會發(fā)生什么。
• 它可以幫助你在界面中定位用戶，并在視圖間提供重點的引導。
• 它提供了視覺反饋。

你可以通過過渡、動畫，乃至 3D 的紋理深度等多重形式來了解基于動效設(shè)計的相關(guān)元素。

動效使我們能夠更好的互動交流，同時讓用戶更易于理解。示例：Anish Chandran

插圖

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

• 隨著扁平化設(shè)計風格逐步的分層，自然而然更多的插圖形態(tài)能夠融入其中。
• 圖片比文字更具有說服力，并讓體驗更加的順暢。
• 由于插圖更易于讓用戶理解，合理的制作便可達到信息有效傳遞的效果。

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

扁平化設(shè)計 2.0

交互體驗應(yīng)當更加直觀，并且不需要任何額外的解釋

當你設(shè)計的扁平化 UI 是互動元素時，你將會面臨一個重要的問題。即用戶需要知道頁面中的哪些區(qū)域是純靜態(tài)內(nèi)容，而哪些區(qū)域是可點擊的。目前，設(shè)計師們已經(jīng)開始意識到這個問題。此，扁平化設(shè)計 2.0 的出現(xiàn)便是對扁平化設(shè)計的更成熟、均衡的解釋。扁平化設(shè)計 2.0 采取了極簡主義最佳的方面，并可與擬物化設(shè)計共同工作。扁平化設(shè)計 2.0 使用細微的陰影和邊緣效應(yīng)來暗示產(chǎn)品中的可交互性。在界面上，陰影和漸變效果告訴了用戶哪些可以點擊，而哪些則不能。所以，用戶得以更好的理解。

用戶更容易通過陰影效果來了解元素的層次結(jié)構(gòu)。示例：Google。在以下的示例中，你可以看到，如何在 CTA 按鈕的邊緣巧妙地利用細陰影來增加按鈕凸起的效果。

Stripe 主頁上的主要與次要 CTA 按鈕都是針對背景頁而制作的。由于扁平化設(shè)計的關(guān)鍵屬性使網(wǎng)站變得實用，并且美觀大方。它讓我們能更加貼近數(shù)字化設(shè)計的新模式，而其中的功能性與藝術(shù)感又能笙磬同音。

以上就是“運用扁平化設(shè)計技巧創(chuàng)造極致用戶體驗”內(nèi)容，更多扁平化設(shè)計資訊，點擊：《淺談扁平化設(shè)計—–視覺設(shè)計》。