準(zhǔn)“扁平化設(shè)計(jì)”
![](http://image.woshipm.com/wp-files/img/46.jpg)
扁平化設(shè)計(jì)在當(dāng)下的用戶界面設(shè)計(jì)界是很有爭議的,微軟的 Metro 風(fēng)最早將其介紹給大眾,之后有了很多人跟風(fēng),比如 LayerVault、The Next Web 以及更多。許多設(shè)計(jì)師從最開始就不看好這類設(shè)計(jì),主要是因?yàn)樵谏晕?fù)雜一點(diǎn)的界面中,扁平化設(shè)計(jì)會(huì)帶來很多困擾。
扁平化設(shè)計(jì)既漂亮又清新,設(shè)計(jì)起來快,也更容易響應(yīng)。如果只是繪畫上的設(shè)計(jì)趨向可能會(huì)被廣為接受,但是網(wǎng)頁設(shè)計(jì)者總是對易用性持有很高的關(guān)注度,因此總會(huì)覺得扁平化設(shè)計(jì)天然的就有缺陷。
下面這張圖從左往右分別是蘋果、Google 和微軟的設(shè)計(jì)美學(xué)展示,三家走了非常不同的路線。
中庸之道是解決復(fù)雜爭端的最好辦法。妥協(xié)對觀點(diǎn)鮮明的人來說很難,但是最終受益的還是大眾。在這一例中,受益的大眾就是產(chǎn)品的用戶。
有一個(gè)辦法,那就是把扁平化設(shè)計(jì)的優(yōu)勢都抽出來,應(yīng)用到高度復(fù)雜的用戶界面中去。至于具體怎么做,可以參考 Google 現(xiàn)行的界面設(shè)計(jì)語言。Gmail(web+iOS),Google Maps(iOS)和 Google+(iOS)都是非常好的準(zhǔn)扁平化設(shè)計(jì)的例子。
大多數(shù)情況下,這些界面都遵循扁平化設(shè)計(jì)的原則:扁平色塊,沒有陰影,利用顏色鼓勵(lì)用戶去進(jìn)行交互(比如 Gmail 中的紅色按鈕“寫郵件”)。但是仔細(xì)看時(shí),你會(huì)發(fā)現(xiàn)這個(gè)紅色按鈕其實(shí)是有很小的弧度的。這道弧度就像是“嘿,快點(diǎn)我!”而不是“哇哦,我看起來誘人的就像糖果一樣!對了你還可以點(diǎn)我的?!边@類微妙的功能可見性是準(zhǔn)扁平化設(shè)計(jì)的重要組分之一,也是其優(yōu)于真正的扁平化設(shè)計(jì)的一大特點(diǎn)。
準(zhǔn)扁平化設(shè)計(jì)自然也不會(huì)忽略深度的概念。相反的,適度加入深度的元素可以促進(jìn)用戶對界面的理解。但是就像弧度一樣,深度元素的融入也需要仔細(xì)斟酌,才能讓信息從平面中跳離出來,但又不會(huì)破壞扁平化設(shè)計(jì)的氛圍。
準(zhǔn)扁平化設(shè)計(jì)的例子不單有 Google,新版 MySpace 也采用了這種看起來扁平,但是當(dāng)你把鼠標(biāo)移過去就會(huì)出現(xiàn)“快點(diǎn)我”的弧度。Letterpress,這款大師之作的游戲,雖然有些人說是扁平化設(shè)計(jì),但是也采用了陰影設(shè)計(jì)來改進(jìn)交互體驗(yàn)。還有自最開始就一直不怎么用弧度設(shè)計(jì)的 Facebook,也用陰影來分隔覆蓋圖和其余頁面。
iOS 的未來應(yīng)該會(huì)同繁復(fù)的擬物化設(shè)計(jì)漸行漸遠(yuǎn),微軟的 Metro 在易用性也有硬傷,設(shè)計(jì)的未來可能屬于準(zhǔn)扁平化設(shè)計(jì)這類兼具易用性和高效率的設(shè)計(jì)語言。
- 目前還沒評論,等你發(fā)揮!