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