扁平化界面風(fēng)格的設計心得發(fā)布者：本站     時(shí)間：2022-02-18 09:02:32

什么是扁平化設計？

簡(jiǎn)單的說(shuō)就是拋棄那些已經(jīng)流行多年的漸變、陰影、高光等擬真視覺(jué)效果，使用一些簡(jiǎn)單的純色塊，從而打造出一種看上去更“平”的界面。扁平風(fēng)格的一個(gè)優(yōu)勢就在于它可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來(lái)，減少認知障礙的產(chǎn)生。

下面是列舉一些國外網(wǎng)站的例子：
新版的Squarespace幾乎完全采用了扁平化的視覺(jué)風(fēng)格，只在一些細節當中使用了相對傳統的方式突出了重要的交互元素。試用一下你就會(huì )發(fā)現，其實(shí)他們的產(chǎn)品在功能邏輯上還是蠻復雜的，但這一切都隱含在簡(jiǎn)約直白的界面背后，你真的可以從中隱約感受到其設計團隊付出的心血。

淺談扁平化界面風(fēng)格的設計心得,PS教程,

Facebook是扁平化界面設計的絕佳案例。除了幾個(gè)主要的動(dòng)作按鈕當中使用了輕微的斜面效果以外，其他界面元素全部采用扁平風(fēng)格。鑒于他們多年來(lái)在這方面一直保持著(zhù)這樣的特色，至少我們可以說(shuō)這種設計風(fēng)格對于Facebook來(lái)說(shuō)是完全適用的。

淺談扁平化界面風(fēng)格的設計心得,PS教程,

Rdio最新版本的網(wǎng)站及產(chǎn)品界面中都采用了很徹底的最小化、扁平化的設計風(fēng)格，你很難找到使用了陰影、漸變等效果的界面元素。

淺談扁平化界面風(fēng)格的設計心得,PS教程,

Nest

在他們的網(wǎng)站中，實(shí)際的產(chǎn)品及相關(guān)的應用環(huán)境照片作為“真實(shí)”元素融入到扁平風(fēng)格的媒介載體當中，虛實(shí)結合，讓訪(fǎng)問(wèn)者可以很容易的將注意力聚焦在產(chǎn)品上，而不會(huì )被網(wǎng)站界面上的視覺(jué)元素所干擾。

淺談扁平化界面風(fēng)格的設計心得,PS教程,

對設計風(fēng)格的選取最終還是要取決于具體產(chǎn)品的實(shí)際情況。在我個(gè)人看來(lái)，相比于擬物化而言，扁平風(fēng)格的一個(gè)優(yōu)勢就在于它可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來(lái)，減少認知障礙的產(chǎn)生。

無(wú)論采用怎樣的風(fēng)格，優(yōu)秀的界面設計都需要遵從一些共通的設計原則：

一致性

通過(guò)具有一致性的設計模式及視覺(jué)風(fēng)格，為用戶(hù)建立起完整一致的心智模型，使產(chǎn)品更加易用，提升整體體驗。

對比

通過(guò)對配色、尺寸和布局的調整，使可點(diǎn)擊的界面元素在視覺(jué)上與其他元素形成鮮明的對比。

布局

可以嘗試使用960gs一類(lèi)的網(wǎng)格布局為界面設定視覺(jué)規范，使用戶(hù)的視線(xiàn)可以跟隨內容本身所界定出的路徑自然的移動(dòng)，增強界面的視覺(jué)平衡。

層級化

最重要的東西要比相對次要的東西更容易被看到。關(guān)于這個(gè)話(huà)題我可以寫(xiě)一整篇文章出來(lái)，簡(jiǎn)單的說(shuō)，就是在界面設計中著(zhù)重突出那些與核心功能與常見(jiàn)用例相關(guān)的交互元素，而將其他操作元素置于次要位置，這可以使界面得到最有針對性的優(yōu)化和簡(jiǎn)化。

目標用戶(hù)

不同類(lèi)型的用戶(hù)所青睞的界面風(fēng)格也有所不同。建筑、設計、時(shí)尚等領(lǐng)域的用戶(hù)可以更好的擁抱扁平化風(fēng)格，而其他更加“普通”的用戶(hù)則更容易接受相對傳統的擬物化界面。

反饋

當點(diǎn)擊行為發(fā)生時(shí)，要立刻向用戶(hù)提供清晰明確的視覺(jué)反饋。動(dòng)畫(huà)過(guò)渡效果就是一種比較常見(jiàn)的反饋方式，例如在用戶(hù)執行操作后，使用旋轉圖標提示用戶(hù)系統正在進(jìn)行響應。

降低“摩擦力”

無(wú)論采用怎樣的視覺(jué)風(fēng)格，都要使界面盡量簡(jiǎn)化，減少用戶(hù)完成目標所需執行的操作，打造更加流暢的交互體驗。任何一點(diǎn)障礙或額外的步驟都會(huì )提高操作成本，增加功能的復雜度，進(jìn)而降低轉化率。

鼓勵探索

了解目標用戶(hù)有可能對產(chǎn)品進(jìn)行哪些方面的探索。一旦他們習慣了產(chǎn)品的界面與基礎功能，并開(kāi)始向“高級用戶(hù)”的階段進(jìn)發(fā)時(shí)，要為他們的探索和學(xué)習行為進(jìn)行必要的指引與“獎勵”回饋。

原型

無(wú)論風(fēng)格如何，界面形式都取決于實(shí)際的功能。好的設計方案離不開(kāi)產(chǎn)品前期的規劃工作，特別是通過(guò)草圖或線(xiàn)框原型進(jìn)行的探索。識別出最核心的用例需求，使用原型不斷嘗試和驗證，為接下來(lái)的界面設計工作打下堅實(shí)的基礎。