隨本索源探討Metro風(fēng)格

0 評論 1640 瀏覽 1 收藏 7 分鐘

雖然扁平化的設(shè)計在metro風(fēng)格之前已經(jīng)存在,但真正引起人們注意的,正是它的誕生。Metro風(fēng)格是從Segoe字體開始的。Segoe是一款西文無襯線體,為微軟公司諸多新產(chǎn)品中用戶界面的字體。Segoe的設(shè)計靈感來自于Helvetica和瑞士國際主義平面設(shè)計,它的設(shè)計像是一種簡單而又能準(zhǔn)確傳遞信息的工具。沒有多余的裝飾和移動部件,Segoe是一種呈現(xiàn)清晰、準(zhǔn)確和的新方式。

圖1(Segoe與helvetica)
  Segoe與Helvetica

圖2(瑞士國際主義平面設(shè)計)
  瑞士國際主義平面設(shè)計

  瑞士國際主義平面設(shè)計與Metro風(fēng)格設(shè)計共性

由于metro風(fēng)格是由瑞士國際平面主意設(shè)計發(fā)展而來,經(jīng)過類比,驚訝地發(fā)現(xiàn)兩者有驚人的相似之處:他們的設(shè)計目的均為單純,易于識別。風(fēng)格簡單明確,傳達(dá)功能準(zhǔn)確,追求幾何學(xué)式的嚴(yán)謹(jǐn)。采用非對稱的版面組織方式。對齊方式使用左齊,右長短不一的對稱方式使用方格網(wǎng)為設(shè)計基礎(chǔ)。形成高度功能化,理性化的設(shè)計風(fēng)格。使用無飾線體作為主要的設(shè)計字體。

圖3(windows8界面)
  windows8啟動界面

圖4(瑞士國際主義平面設(shè)計)
  瑞士國際主義平面設(shè)計

  從瑞士國際主義平面設(shè)計的局限性到metro風(fēng)格界面的局限性

正所謂針無兩頭利。瑞士國際主義平面設(shè)計的優(yōu)點正正是他的缺點所在。 首先瑞士國際主義平面設(shè)計作品的要求必須是客觀的非個人的設(shè)計。個體偏好、顧客的特殊要求、宣傳的壓力都應(yīng)該漠視不顧。唯一的標(biāo)準(zhǔn)是視覺的力量與效果。過分的理性化與公式化導(dǎo)致了個人性化的過道泯滅。忽略了普羅大眾對于情感化的需求。 其次瑞士國際主義平面設(shè)計形式為數(shù)字網(wǎng)格注重數(shù)學(xué)邏輯和理性思維缺乏感性的思想給設(shè)計者造成很大的局限。不利于思維的發(fā)散而且形成的版面過于死板、拘束缺少更為自由、更為個人化的特點。

圖5網(wǎng)格設(shè)計
  網(wǎng)格設(shè)計

最后瑞士國際主義平面設(shè)計發(fā)展到美國后漸漸背離了設(shè)計先驅(qū)們的初衷。它漸漸變成了一種風(fēng)格而不是一種動機(jī)成為了虛空的形式主義。

以史為鏡,可以知興替,根據(jù)瑞士國際主義平面設(shè)計的消亡可以得出關(guān)于metro界面的局限性。

圖6-優(yōu)秀win8設(shè)計
  優(yōu)秀win8設(shè)計

1.個人情感主意的抹殺。不同與ios的擬物化情感化設(shè)計。Metro風(fēng)格對于質(zhì)感作了最大限度的抽象化。界面設(shè)計上對于高光,陰影這樣的基本元素都作了舍棄。純粹的平面設(shè)計風(fēng)格到底是不是用戶想要的呢?當(dāng)真實世界與互聯(lián)網(wǎng)世界完全割裂的時候,未來的界面設(shè)計,到底是不是一個與真實世界沒有交集的平行性視覺體系?

2.過于嚴(yán)格的網(wǎng)格式排布對設(shè)計者造成很大的局限。首先不能否認(rèn)的是網(wǎng)格設(shè)計具有良好的指導(dǎo)性,會使界面更加整齊劃一。但使用網(wǎng)格并不意味著枯燥的設(shè)計,一個好的設(shè)計師不僅能夠合理地應(yīng)用基于網(wǎng)格布局的規(guī)則,而且還能適時地打破這些規(guī)則。但是當(dāng)規(guī)則不能破的時候,如何展開一個有創(chuàng)造性的設(shè)計?

3.增加認(rèn)知和學(xué)習(xí)成本。當(dāng)信息以他本來的面目完整地展示到我們的面前的時候,我們?nèi)绾慰焖賲^(qū)分這些信息?目前metro界面使用了色塊來快速定位相應(yīng)的模塊。但是如果是色盲患者呢?他們可以看到的,或者是以下這張難以辨認(rèn)的圖。

圖8(windows8界面)
  正所謂窮則變,變則通。從metro的起源瑞士國際主義平面設(shè)計中,我們已經(jīng)看到了危機(jī)與機(jī)遇。如何化解相應(yīng)metro風(fēng)格下的界面設(shè)計呢?其實在諸如無印良品與宜家的相關(guān)設(shè)計里面,已經(jīng)可以找到相關(guān)的答案。在去繁求簡,信息明了的基礎(chǔ)上,開放布局,適當(dāng)增加質(zhì)感,添加人性化的味道。如下圖,同樣是信息的直接羅列,但是使用圖片帶來自然質(zhì)感。板式靈活,在規(guī)矩中與簡潔中帶來不一樣的味道。

圖7-無印
  目前為止metro風(fēng)格的延續(xù)與發(fā)展還是一個不明朗的疑問號?他或許是現(xiàn)今ui趨勢的一個頗為強(qiáng)大的分支。但是它會像科幻電影中未來的界面,到處充斥著由metro風(fēng)格演化而來的簡單的線條與圖標(biāo)信息?我想還是個未知數(shù)。

via:騰訊CDC

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!