談談使用者介面中扁平化設計

來源:互聯網
上載者:User

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

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

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

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

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

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

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

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

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

  網友點評:

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

  註:產品中國

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。