評論:為何越來越多公司采用扁平化設(shè)計

2014-6-23    藍藍設(shè)計的小編

轉(zhuǎn)載藍藍設(shè)計(   m.820esy.cn  )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源:http://www.cssn.cn/ysx/ysx_sjx/201310/t20131026_611976.shtmll

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點這里

  

應(yīng)該有許多人和我一樣,熬夜看了WWDC,而其中更多人關(guān)注的是 iOS7 的部分。iOS7是有人喜歡有人厭,除了部分配色和App圖標讓我感覺顯得粗糙,整體還是沒有出乎自己對于iOS向后發(fā)展的預(yù)測 UI會效仿 Windows Phone ,而功能則會效仿 Android,當然現(xiàn)在說這話你可以說是馬后炮。從功能上說,Android 因為其開放性使得功能各方面發(fā)展十分迅速,iOS要往后發(fā)展難免會吸收一些 Android 已經(jīng)擁有的特色功能。但對于 Metro 設(shè)計語言與 Holo 主題的扁平化模仿,出乎不少人的意料。

  在 Windows Phone 7 誕生后,扁平化的 Metro Design(微軟改名太頻繁,現(xiàn)在已經(jīng)不知道叫什么UI了)帶來了一個比較特殊的現(xiàn)象,喜歡和討厭它的人幾乎是各占一半。之后Google 也為 Android 推出 Holo Theme,幾乎 Google 所有的UI設(shè)計都拍扁了。而現(xiàn)在,連最愛擬物設(shè)計的蘋果也把自己拍扁了。但為什么遭到如此多的反對聲音,這些IT界巨頭都開始采用扁平化的設(shè)計風(fēng)格呢?

評論:為何越來越多公司采用扁平化設(shè)計

  我的確在新的 iOS7 里看到了熟悉的 Metro 風(fēng)格,最明顯的地方莫過于新的 音樂播放器,與PC端的 Zune 軟件有極大的相似度,而在 AppStore 中又看到了很明顯的 Holo 風(fēng)格。好了,在微博上有許許多多的人開始大罵蘋果抄襲,甚至有人調(diào)侃說IOS7的顧問是袁隆平先生(雜交水稻之父)。但我不認為是蘋果黔驢技窮,這是未來 的UI設(shè)計趨勢,只是誰先做誰后做的問題。盡管有許多地方與WP或是Android相似,但我依然看到了蘋果自己的扁平化風(fēng)格,雖然不一定喜歡,但只能 說,蘋果這次發(fā)布了一個不成熟的作品。類似微軟的 Windows Phone 和 Windows 8,在UI上還有許多不足的地方。

評論:為何越來越多公司采用扁平化設(shè)計

  先看看 Web UI 的發(fā)展史我是從1999年開始接觸互聯(lián)網(wǎng)的,我不知道能不能算是一個互聯(lián)網(wǎng)發(fā)展的見證者,當然,沒經(jīng)歷過最早發(fā)展的那個階段,從web誕生后到2000年左右的時 間內(nèi),由于處于互聯(lián)網(wǎng)的發(fā)展初期,技術(shù)不夠成熟硬件不夠好,網(wǎng)頁只是為了呈現(xiàn)信息而制作,連設(shè)計都談不上,隨著web標準的改進,CSS開始廣泛使用,才 開始有了網(wǎng)頁設(shè)計的概念,此時已經(jīng)有不少人開始樂忠于搞自己的個人網(wǎng)站了,我自己第一次做網(wǎng)頁是在2003年,那時候許多網(wǎng)頁喜歡使用PS切圖制作個性的 UI效果,其中不少就是現(xiàn)在所說的擬物設(shè)計,在 javascript 網(wǎng)頁以及 Flash 流行起來后,各種靜態(tài)的高光立體擬物效果已經(jīng)滿足不了大家的視覺需求了,于是開始使用簡單的靜態(tài)交互(javascript 或 flash 本地交互)來產(chǎn)生更仿真的效果,我從那些擬物網(wǎng)頁設(shè)計中理解了設(shè)計師的想法,他們想讓webUI更像是一件實物,帶來一種更為生動的感覺。我想同時代的電 腦數(shù)碼設(shè)備的設(shè)計也能體現(xiàn)當時的設(shè)計風(fēng)潮,那時很多電腦設(shè)計的更像白色家電,還有各種數(shù)碼玩意也是千奇百怪。我相信那些設(shè)計師也是希望能消除科技產(chǎn)品與生 活的距離感,就像現(xiàn)在不少人對于蘋果產(chǎn)品的感覺。加上那個時期無論是網(wǎng)頁,或是各種獲取資訊的軟件,信息量相對今天是非常小的,網(wǎng)頁更傾向于UI帶來的視 覺沖擊,軟件的UI設(shè)計也比現(xiàn)在更大膽,有人還記得早期的 MSN Explorer 瀏覽器么?Winamp、超級解霸還有很多不同的外觀皮膚,甚至于百變主題的Windows XP。2005年后,開始接觸了個概念叫 web2.0,它開始帶來了不一樣的 webUI 的設(shè)計風(fēng)潮,開始去掉了各種不必要的視覺效果,更專注于內(nèi)容呈現(xiàn)和交互,web2.0概念伴隨著幾何次方增長的信息而生。關(guān)于 web2.0,它的一個最大的特點,就是上網(wǎng)不再只是去搜狐網(wǎng)易新浪看這些門戶主動給我們呈現(xiàn)的新聞,我們作為網(wǎng)民也開始自己生產(chǎn)信息了,博客算是一個象 征性的產(chǎn)物。這帶來了更大的信息量和更復(fù)雜的交互產(chǎn)生,使網(wǎng)頁設(shè)計改變了方向,webUI 回歸了它應(yīng)該做的,就是以更好的體驗呈現(xiàn)更大量的信息,讓內(nèi)容展現(xiàn)自己的生命力,而不是靠UI設(shè)計喧賓奪主。

評論:為何越來越多公司采用扁平化設(shè)計

帶來更好的信息傳達

  現(xiàn)在,軟件的UI設(shè)計,也開始像webUI一樣,走由繁至簡的路子了。無論是 Metro Design 或是 Holo Theme,都在更努力的讓UI隱形或簡化,而信息本身的排版又能呈現(xiàn)出UI本身,特別是 Metro 本身就是一門基于排版的設(shè)計語言。在雜志中,Metro design 得以很好的體現(xiàn),雜志不可能都以生硬的有形框架來固定內(nèi)容的位置,而是用合理的方式排版讓信息以比較自然的方式呈現(xiàn)。

評論:為何越來越多公司采用扁平化設(shè)計

  上圖是 National Geographic 的一期排版設(shè)計,左側(cè)的排版比較傳統(tǒng),右側(cè)則是圖片和文字的疊加排版,它們表現(xiàn)在 web 或是 軟件的交互UI上,就是所謂的扁平化設(shè)計。這種設(shè)計風(fēng)格可以在滿足傳達大量信息的需求同時兼顧美感。但也正如這份雜志頁面一樣,簡約的設(shè)計讓文字更突出, 所以在這種設(shè)計風(fēng)格中,字體尤為重要,有很大一部分美感是字體帶來的。

  一樣可以立體而真實

評論:為何越來越多公司采用扁平化設(shè)計

  上圖是 Yahoo Weather 的UI設(shè)計,它也是iOS7中的默認天氣服務(wù)。天氣資訊是作為“信息交互”的一個層在距離用戶最近的地方,底部則有另外一個層顯示與天氣相關(guān)的圖像,這種 設(shè)計與傳統(tǒng)擬物的最大區(qū)別是,它將信息表現(xiàn)簡化或抽象化,而在全局體現(xiàn)比擬物更接近現(xiàn)實的效果。相比擬物設(shè)計,信息展現(xiàn)更直觀也可以更生動。在信息量大的 時候,不會產(chǎn)生過多的視覺干擾,現(xiàn)在iOS上已經(jīng)有不少軟件采用扁平化的設(shè)計方案。

  第2頁呈現(xiàn)和應(yīng)用方式廣泛

  呈現(xiàn)和應(yīng)用方式廣泛

  微軟曾展示過一些對于未來展望的UI設(shè)計,這篇文章發(fā)布之前我已經(jīng)看到有人提到它了,未來交互的設(shè)備可能更千奇百怪,交互界面也存在于許許多多不同 的表面上,就像視頻中的玻璃幕墻,或者一面鏡子,類似我在上段提到的 Yahoo Weather,在這種玻璃幕墻上表現(xiàn)的時候,可以只保留“信息交互”這個層,而底部的圖像可以就是鏡子反射的景象,或是透過玻璃本身可以見到的東西,使 交互界面能夠完美融合在現(xiàn)實之中,或者說更適合未來的虛擬現(xiàn)實、增強現(xiàn)實系統(tǒng)的設(shè)計。同時這里也糾正下許多人對 Metro Design 的誤區(qū),由于 Windows Phone 和 Windows 8 的開始界面是由方塊構(gòu)成,以至于不少人(還有許多為這些系統(tǒng)設(shè)計軟件的人)以為它的設(shè)計元素只有方塊和直線,實際上也包括各種設(shè)計形態(tài)。

評論:為何越來越多公司采用扁平化設(shè)計

這款A(yù)pp采用了實物圖片與UI相結(jié)合的設(shè)計

評論:為何越來越多公司采用扁平化設(shè)計

  627.AM 的UI設(shè)計采用了不同形態(tài)的圖形(實際上是有動畫效果的,使用 Windows Phone 的用戶可以在市場下載體驗)圖標設(shè)計與色彩

要想做好 Metro 設(shè)計也不是很容易的事  微軟當初設(shè)計 Metro 風(fēng)格有個本意是為了讓普通的程序猿也能做出好看的軟件,或者不說好看,至少開發(fā)者不必考慮過多的UI設(shè)計問題。但事實上用過 Windows 8 或者 Windows Phone 的用戶已經(jīng)看到許多設(shè)計粗糙拙劣的軟件,簡約的設(shè)計不一定好做,相信從事設(shè)計行業(yè)的童鞋應(yīng)該很清楚這點,因為稍有一點瑕疵就很容易暴露出來,或是顯得十分 的不協(xié)調(diào),擬物設(shè)計或類似的渲染效果制作起來比這種極簡風(fēng)格要困難,但設(shè)計起來極簡風(fēng)格更費勁。現(xiàn)在手機上的app主要還是以iOS為標桿去設(shè)計,也導(dǎo)致 許多Android上的軟件采用了和iOS一樣的設(shè)計風(fēng)格,但 Windows Phone 則完全不同,因此也見到許多在 iOS上設(shè)計很好的軟件,移植到了 Windows Phone 上就顯得非常粗糙,當然應(yīng)該還是和微軟急迫希望增加應(yīng)用數(shù)量而審核不嚴有關(guān)系。

  什么叫做藝術(shù)

  這篇文章本是iOS7發(fā)布當天寫的,剛好由于端午節(jié)所以延后了一些,但過去兩天后,剛好在網(wǎng)上看到有人提到藝術(shù)這個字眼來形容擬物設(shè)計,似乎扁平設(shè) 計就是下里巴人了,當然曾經(jīng)也一直看到網(wǎng)上有類似的說法,這里順帶發(fā)表下我的看法。首先科技產(chǎn)品不應(yīng)該是純藝術(shù)品,蘋果曾帶來一股風(fēng)潮,正如喬布斯所說, 他是站在科技與人文路口的人,上文里也談到了扁平化設(shè)計對于信息傳達的優(yōu)勢,而且我也不認為它一定會失去所謂的藝術(shù)感,關(guān)鍵在于設(shè)計。曾經(jīng)西方繪畫以畫得 越逼真為水平的高低,自從照相機出來后,抽象派藝術(shù)開始有了很大的發(fā)展,而中國的傳統(tǒng)水墨畫一直是寫意為主的,本人也畫過幾年水墨畫,對于寫意的概念也是 有點感受的,這些我想這也應(yīng)該能算藝術(shù)吧。

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.820esy.cn

存檔