天天看點

大話“扁平化設計”

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

大話“扁平化設計”

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

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

大話“扁平化設計”

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

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

大話“扁平化設計”

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

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

大話“扁平化設計”

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

大話“扁平化設計”

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

網友點評:

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

Cousins表示他雖然對扁平化設計的感覺非常強烈,但并沒有特别熱愛或者特别讨厭扁平化設計。他認為好的設計不應當局限于某種設計風格,而需要更注重可用性、有用性。如果因為時尚的緣故,那就順其自然吧。但該趨勢并不适合一切項目,是以不能強求所有應用都遵從這一風格。

大話“扁平化設計”

顧名思義,扁平化設計僅僅采用二維元素。所有元素都不加修飾——陰影、斜面、突起、漸變這樣會帶來深度變化的設計都是不應該的。從圖檔框到按鈕,再到導航欄都幹脆有力,需要極力避免羽化、陰影這樣的特效。現實主義、3D、拟物化更是扁平化設計的大敵。

大話“扁平化設計”

扁平化設計中的層次和其它的一一對應,但各個位面間沒有交叉,不會明确區分背景圖檔、前景圖檔、按鈕、文本、導航,等等。

那如何做好扁平化設計?扁平化設計依賴于清晰的層次結構和元素布局,優秀的扁平化設計應該能幫助使用者了解産品以及互動。

現在,越來越多的網站開始應用扁平化設計,在App和移動設計中這一趨勢更為明顯。在小螢幕中,按鈕和選項更少,也讓扁平化設計如魚得水。

大話“扁平化設計”

扁平設計中使用到很多簡單的UI元素,比如按鈕和圖示。設計師更常用矩形、圓形、方形等簡單的形狀。元素獨立。正角、直角、圓弧都非常常見。

UI元素應該在保持高可用性的前提下盡可能的簡單,保證應用或網站直覺、易用,無需引導。為了同時達到簡單但直覺的效果,你可以嘗試為按鈕填充深色,以鼓勵使用者點選。

大話“扁平化設計”

記住,簡單的元素并不意味着設計起來很簡單,恰恰相反,扁平化設計理念的複雜度可以與任何其他設計風格相提并論。

大話“扁平化設計”

因為扁平化設計要求元素更簡單,排版的重要性就更為突出了。字型的大小應該比對整體設計,高度美化的字型會與極簡設計原則相沖突。字形上可以應該使用粗體,文案要求精簡、幹練,最終保證産品在視覺上和措辭上的一緻性。

字型選擇上可以使用簡單的無襯線字型,通過字型大小和比重來區分元素。同時你也可以使用新奇的字型作為點綴,但一定要記得不能過火。

排版的目的在于幫助使用者了解設計。标簽按鈕等其它元素更注重增強易用性和互動性。

大話“扁平化設計”

色彩的使用對于扁平化設計來說非常重要。你可能已經發現了,扁平化設計的網站、應用色彩明顯要更加鮮豔、明亮。此外扁平化設計的項目也擁有更多的色調。一般的網站很少會使用3種以上的色調,但是在扁平化設計中,平均會使用6-8種顔色。

大話“扁平化設計”

扁平化設計的色調偏通常更有活力——色彩更純。其主要、次要顔色通常都是非常大衆化的顔色,然後再配以幾種其它顔色。扁平化設計的另一個趨勢在于複古顔色的使用——淺澄色、紫色、綠色、藍色——都極為流行。

大話“扁平化設計”

扁平化設計生而簡單,整體上趨近極簡主義設計理念。設計中應該驅除任何無關元素,盡可能地僅使用簡單的顔色與文本。如果一定需要視覺元素,你可以添加簡單的圖形。

大話“扁平化設計”

最近,越來越多的設計師開始贊同準扁平化的設計。在準扁平化設計中,基調仍然是扁平風格的,但會在設計方案中添加一種,且僅添加一種特效,無論是陰影也好、梯度也好……

大話“扁平化設計”

這種設計風格比嚴肅的扁平化更加靈活。設計師們喜歡它,因為可以添加深度和紋理;使用者喜歡它,因為它能有助于直覺的互動。但反過來,也有設計師不喜歡它,因為“準”扁平風格是另兩種風格的混合體,缺乏明确的定義,是以更難用好。

繼續閱讀