扁平化設(shè)計(jì)算是秉承了極簡(jiǎn)主義理念的至親了 – 因?yàn)樗鼘⒑?jiǎn)潔的思想融入至所有元素的設(shè)計(jì)。然而碍岔，要達(dá)成簡(jiǎn)潔的扁平化設(shè)計(jì)依舊困難 – 即需要我們以相同的設(shè)計(jì)理念為目的，并創(chuàng)造出一套連貫的視覺(jué)與功能體驗(yàn)朵夏。
讓我們來(lái)了解下蔼啦，你能夠通過(guò)扁平化設(shè)計(jì)為用戶做些什么呢？
隱形設(shè)計(jì)
刪除不必要的樣式
練習(xí)“隱形設(shè)計(jì)”最好的方式是做出不搶用戶注意力的設(shè)計(jì)創(chuàng)意仰猖。因?yàn)槿绻脩裘看味紝⒆⒁饬ㄙM(fèi)在你的設(shè)計(jì)上捏肢，勢(shì)必會(huì)減少他們沉浸在產(chǎn)品中的體驗(yàn)。而你的目標(biāo)則是要幫助用戶快速饥侵、輕松鸵赫、準(zhǔn)確地了解相應(yīng)的操作與信息。所以躏升，你的設(shè)計(jì)應(yīng)該從視覺(jué)元素中剝離出來(lái)辩棒，并能暴露出產(chǎn)品的基本功能。
充滿活力的配色
配色是影響扁平化設(shè)計(jì)的主要因素
配色是扁平化設(shè)計(jì)的核心 —— 它可以詮釋你的網(wǎng)站頁(yè)面以及 APP 視圖的整體感覺(jué)膨疏。
小貼士：
- 這是一個(gè)不錯(cuò)的材料設(shè)計(jì)和扁平化 UI 配色指南一睁。
- 建議你使用柔和不飽和的色調(diào)者吁。因?yàn)樗鼈兏鼉A向?yàn)槟愕捻?yè)面增添藝術(shù)美感，而不會(huì)由于頁(yè)面過(guò)亮饲帅，讓讀者出現(xiàn)視覺(jué)疲勞复凳。
- 針對(duì)柔和的背景染坯，明亮的色彩可以起到突顯的作用均芽。請(qǐng)注意，在以下示例中单鹿，我們將展示如何使用色彩突顯掀宋，營(yíng)造出圖像從頁(yè)面彈出的效果。
- 確保 UI 中色彩的可接受性是實(shí)施良好視覺(jué)設(shè)計(jì)的一個(gè)非常重要的方面。測(cè)一測(cè)你的調(diào)色板儒喊，確保你有足夠的色彩對(duì)比镣奋。
注重字體排印
聚焦美學(xué)
字體可以告訴用戶在頁(yè)面中什么是最重要的，同時(shí)能讓你的設(shè)計(jì)具備更好的體驗(yàn)怀愧。排版也應(yīng)當(dāng)盡量簡(jiǎn)約侨颈，因?yàn)樗茏岉?yè)面更快地加載，易于用戶閱讀芯义。極簡(jiǎn)主義則更是如此哈垢。
小貼士：
- 可以考慮在擁有多變的簡(jiǎn)單無(wú)襯線字體系列中扛拨，以及主要字體排印的網(wǎng)站上使用扁平化設(shè)計(jì)耘分。
- 字體的調(diào)性應(yīng)與整體設(shè)計(jì)方案相匹配。而針對(duì)簡(jiǎn)單的設(shè)計(jì)绑警，高度美化的字體可能看上去會(huì)有些奇怪求泰。
動(dòng)效
動(dòng)效使扁平化設(shè)計(jì)更以用戶為中心
動(dòng)效能夠良好的搭配扁平化的簡(jiǎn)潔視覺(jué)效果。當(dāng)用戶在你的網(wǎng)站或 APP 中進(jìn)行交互時(shí)计盒，他們可能會(huì)提出以下問(wèn)題：
- 這里什么是最重要的渴频？
- 我該如何了解接下來(lái)要做什么？
- 我該如何得知我已經(jīng)完成了相應(yīng)的任務(wù)北启？
像這樣的問(wèn)題卜朗，可能會(huì)提醒你是時(shí)候使用動(dòng)效來(lái)增強(qiáng)用戶體驗(yàn)了。而動(dòng)效能夠更好的感知用戶體驗(yàn)并回答這些問(wèn)題：
- 它能夠吸引用戶的注意力并告知用戶暖庄，如果他/她完成了點(diǎn)擊/手勢(shì)后會(huì)發(fā)生什么聊替。
- 它可以幫助你在界面中定位用戶楼肪，并在視圖間提供重點(diǎn)的引導(dǎo)培廓。
- 它提供了視覺(jué)反饋。
你可以通過(guò)過(guò)渡春叫、動(dòng)畫(huà)肩钠，乃至 3D 的紋理深度等多重形式來(lái)了解基于動(dòng)效設(shè)計(jì)的相關(guān)元素泣港。
插圖
插圖讓扁平化設(shè)計(jì)的理念得以更廣闊的延伸
隨著扁平化設(shè)計(jì)風(fēng)格逐步的分層当纱，自然而然更多的插圖形態(tài)能夠融入其中。
圖片比文字更具有說(shuō)服力踩窖，并讓體驗(yàn)更加的順暢坡氯。
由于插圖更易于讓用戶理解，合理的制作便可達(dá)到信息有效傳遞的效果洋腮。
扁平化設(shè)計(jì) 2.0
交互體驗(yàn)應(yīng)當(dāng)更加直觀悯恍，并且不需要任何額外的解釋
當(dāng)你設(shè)計(jì)的扁平化 UI 是互動(dòng)元素時(shí)，你將會(huì)面臨一個(gè)重要的問(wèn)題伙狐。即用戶需要知道頁(yè)面中的哪些區(qū)域是純靜態(tài)內(nèi)容涮毫，而哪些區(qū)域是可點(diǎn)擊的。目前贷屎，設(shè)計(jì)師們已經(jīng)開(kāi)始意識(shí)到這個(gè)問(wèn)題罢防。因此，扁平化設(shè)計(jì) 2.0 的出現(xiàn)便是對(duì)扁平化設(shè)計(jì)的更成熟豫尽、均衡的解釋篙梢。
扁平化設(shè)計(jì) 2.0 采取了極簡(jiǎn)主義最佳的方面，并可與擬物化設(shè)計(jì)共同工作美旧。
扁平化設(shè)計(jì) 2.0 使用細(xì)微的陰影和邊緣效應(yīng)來(lái)暗示產(chǎn)品中的可交互性渤滞。在界面上，陰影和漸變效果告訴了用戶哪些可以點(diǎn)擊榴嗅，而哪些則不能妄呕。所以，用戶得以更好的理解嗽测。
在以下的示例中，你可以看到唠粥，如何在 CTA 按鈕的邊緣巧妙地利用細(xì)陰影來(lái)增加按鈕凸起的效果疏魏。
由于扁平化設(shè)計(jì)的關(guān)鍵屬性使網(wǎng)站變得實(shí)用晤愧，并且美觀大方大莫。它讓我們能更加貼近數(shù)字化設(shè)計(jì)的新模式，而其中的功能性與藝術(shù)感又能笙磬同音官份。
感謝你的閱讀只厘，如果覺(jué)得文章不錯(cuò)烙丛，不妨點(diǎn)個(gè)贊。
注：
- 本文版權(quán)歸原作者所有羔味，僅用于學(xué)習(xí)與交流河咽。
- 如需轉(zhuǎn)載譯文，煩請(qǐng)按下方注明出處信息赋元，謝謝忘蟹！
英文原文：Best Practices for Flat Design
作者：Nick Babich
譯者：IT程序獅
譯文地址：http://www.reibang.com/p/f1556eaab3d9
