萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 談談用戶界面中扁平化設計

談談用戶界面中扁平化設計

談談用戶界面中扁平化設計 三聯

  扁平化設計在當下的用戶界面設計界是很有爭議的,微軟的Metro風最早將其介紹給大眾,之後有了很多人跟風,比如LayerVault、The Next Web以及更多。許多設計師從最開始就不看好這類設計,主要是因為在稍微復雜一點的界面中,扁平化設計會帶來很多困擾。

  扁平化設計既漂亮又清新,設計起來快,也更容易響應。如果只是繪畫上的設計趨向可能會被廣為接受,但是網頁設計者總是對易用性持有很高的關注度,因此總會覺得扁平化設計天然的就有缺陷。

  下面這張圖從左往右分別是蘋果、Google和微軟的設計美學展示,三家走了非常不同的路線。

  中庸之道是解決復雜爭端的最好辦法。妥協對觀點鮮明的人來說很難,但是最終受益的還是大眾。在這一例中,受益的大眾就是產品的用戶。

  有一個辦法,那就是把扁平化設計的優勢都抽出來,應用到高度復雜的用戶界面中去。至於具體怎麼做,可以參考Google現行的界面設計語言。Gmail(web+iOS),Google Maps(iOS)和Google+(iOS)都是非常好的准扁平化設計的例子。

  大多數情況下,這些界面都遵循扁平化設計的原則:扁平色塊,沒有陰影,利用顏色鼓勵用戶去進行交互(比如Gmail中的紅色按鈕“寫郵件”)。但是仔細看時,你會發現這個紅色按鈕其實是有很小的弧度的。這道弧度就像是“嘿,快點我!”而不是“哇哦,我看起來誘人的就像糖果一樣!對了你還可以點我的。”這類微妙的功能可見性是准扁平化設計的重要組分之一,也是其優於真正的扁平化設計的一大特點。

  准扁平化設計自然也不會忽略深度的概念。相反的,適度加入深度的元素可以促進用戶對界面的理解。但是就像弧度一樣,深度元素的融入也需要仔細斟酌,才能讓信息從平面中跳離出來,但又不會破壞扁平化設計的氛圍。

  准扁平化設計的例子不單有Google,新版MySpace也采用了這種看起來扁平,但是當你把鼠標移過去就會出現“快點我”的弧度。 Letterpress,這款大師之作的游戲,雖然有些人說是扁平化設計,但是也采用了陰影設計來改進交互體驗。還有自最開始就一直不怎麼用弧度設計的 Facebook,也用陰影來分隔覆蓋圖和其余頁面。

  iOS的未來應該會同繁復的擬物化設計漸行漸遠,微軟的Metro在易用性也有硬傷,設計的未來可能屬於准扁平化設計這類兼具易用性和高效率的設計語言。

  網友點評:

  黑白:對於平鋪的大量內容,陰影漸變是很有效的組織秩序的方式,通過顏色組織秩序只在視野中央有效,視野周邊幾乎沒有顏色感知細胞,這也就決定了難以產生整體穩定的秩序感。想想我們周圍的世界如果只有顏色紋理形狀,而沒有陰影漸變會是多麼難以辨認,ios 反對的似乎是對實物諸如紋理特征等與視覺心理無關的模仿,並不等於扁平化~而且陰影漸變形式還有很多潛力可挖呢~

  注:產品中國

copyright © 萬盛學電腦網 all rights reserved