推薦:扁平化界面風(fēng)格的設(shè)計

2013-12-12    藍藍設(shè)計的小編

轉(zhuǎn)載藍藍設(shè)計(   www.bouu.cn  )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點這里 

http://uisdc.qiniudn.com/wp-content/uploads/2013/04/pp.jpg

什么是扁平化設(shè)計

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

下面是列舉一些國外網(wǎng)站的例子:

Squarespace

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

Facebook

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

Rdio

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

Nest

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

 

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

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

一致性

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

對比

通過對配色、尺寸和布局的調(diào)整,使可點擊的界面元素在視覺上與其他元素形成鮮明的對比。

布局

可以嘗試使用960gs一類的網(wǎng)格布局為界面設(shè)定視覺規(guī)范,使用戶的視線可以跟隨內(nèi)容本身所界定出的路徑自然的移動,增強界面的視覺平衡。

層級化

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

目標用戶

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

反饋

當點擊行為發(fā)生時,要立刻向用戶提供清晰明確的視覺反饋。動畫過渡效果就是一種比較常見的反饋方式,例如在用戶執(zhí)行操作后,使用旋轉(zhuǎn)圖標提示用戶系統(tǒng)正在進行響應(yīng)。

降低摩擦力

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

鼓勵探索

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

原型

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

原文地址:http://mdc.sohu.com/?p=1865

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔