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

在 Windows Phone 7 誕生后，扁平化的 Metro Design（現在應該叫Modern UI）帶來了一個比較特殊的現象，喜歡和討厭它的人幾乎是各占一半。之后Google 也為 Android 推出 Holo Theme，幾乎 Google 所有的 UI 設計都拍扁了。而現在，連***擬物設計的蘋果也把自己拍扁了。但為什么遭到如此多的反對聲音，這些 IT 界巨頭都開始采用扁平化的設計風格呢？

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

先看看 Web UI 的發展史

從 web 誕生后到 2000 年左右的時間內，由于處于互聯網的發展初期，技術不夠成熟硬件不夠好，網頁只是為了呈現信息而制作，連設計都談不上，隨著web標準的改進，CSS 開始廣泛使用，才開始有了網頁設計的概念，此時已經有不少人開始熱衷于搞自己的個人網站了。我自己***次做網頁是在 2003 年，那時候許多網頁喜歡使用 PS 切圖制作個性的UI效果，其中不少就是現在所說的擬物設計，在 javascript 網頁特效以及 Flash 流行起來后，各種靜態的高光立體擬物效果已經滿足不了大家的視覺需求了，于是開始使用簡單的靜態交互（javascript 或 flash 本地交互）來產生更仿真的效果。

我從那些擬物網頁設計中理解了設計師的想法，他們想讓 webUI 更像是一件實物，帶來一種更為生動的感覺。我想同時代的電腦數碼設備的設計也能體現當時的設計風潮，那時很多電腦設計的更像白色家電，還有各種數碼玩意也是千奇百怪。相信那些設計師也是希望能消除科技產品與生活的距離感，就像現在不少人對于蘋果產品的感覺。

加上那個時期無論是網頁，或是各種獲取資訊的軟件，信息量相對今天是非常小的，網頁更傾向于 UI 帶來的視覺沖擊，軟件的UI設計也比現在更大膽，有人還記得早期的 MSN Explorer 瀏覽器么？Winamp、超級解霸還有很多不同的外觀皮膚，甚至于百變主題的 Windows XP。

2005年后，開始接觸了個概念叫 web2.0，它開始帶來了不一樣的 webUI 設計風潮，開始去掉了各種不必要的視覺效果，更專注于內容呈現和交互，web2.0 概念伴隨著幾何次方增長的信息而生。關于 web2.0，它的一個***的特點，就是上網不再只是去搜狐網易新浪看這些門戶主動給我們呈現的新聞，我們作為網民也開始自己生產信息了，博客算是一個象征性的產物。這帶來了更大的信息量和更復雜的交互產生，使網頁設計改變了方向，webUI 回歸了它應該做的，就是以更好的體驗呈現更大量的信息，讓內容展現自己的生命力，而不是靠UI設計喧賓奪主。

帶來更好的信息傳達

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

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

一樣可以立體而真實

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

呈現和應用方式廣泛

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

這款App采用了實物圖片與UI相結合的設計

627.AM 的UI設計采用了不同形態的圖形（實際上是有動畫效果的，使用 Windows Phone 的用戶可以在市場下載體驗）

圖標設計與色彩

iOS7的UI配色和部分圖標設計令許多人不滿，然而在 Windows Phone 中也有許多第三方app圖標設計不夠理想的問題。有關于配色，在扁平化的設計中如果采用了純色的圖形或線條，除了黑白色以外，其他色彩的選配非常重要，建 議不要使用太深或對比度過高的色彩搭配，下方是我正在使用的一部 Windows Phone 的主界面截圖。另外就是圖標設計，在截圖中介呈現了幾種不同的圖標設計。但現在有部分第三方app也將圖標設計成官方的純色風格，這樣并不一定可以得到好 的效果，圖中的電話和消息圖標是官方設計的，由簡單的圖形構成，純白色，在所有的系統配色中顯示都較好，但沒有明顯特色。而 Whatsapp 的底色采用了磁貼本色，但圖標包含自身的固定色彩，來電通的圖標則與 Whatsapp很類似，只是加了一些3d的效果。skype 和 weico 的圖標則采用了自己的底色。在這其中 Flicker 則使用真實的照片作為封面，HTC Hub 就是采用了擬物設計，所以說在 Metro design 中，不同風格的設計是可以搭配在一起的。而目前的iOS7可能有點麻煩，接下來許多開發者可能會很不情愿的都把圖標拍扁。UI設計的簡單，內容就可以使用 更多的方式呈現，相對而言，原生 Android 系統各方面處理則介于 Windows Phone 和 iOS 之間。

要想做好 Metro 設計也不是很容易的事

微軟當初設計 Metro 風格有個本意是為了讓普通的程序猿也能做出好看的軟件，或者不說好看，至少開發者不必考慮過多的UI設計問題。但事實上用過 Windows 8 或者 Windows Phone 的用戶已經看到許多設計粗糙拙劣的軟件，簡約的設計不一定好做，相信從事設計行業的童鞋應該很清楚這點，因為稍有一點瑕疵就很容易暴露出來，或是顯得十分的不協調，擬物設計或類似的渲染效果制作起來比這種極簡風格要困難，但設計起來極簡風格更費勁。

現在手機上的App主要還是以iOS為標桿去設計，也導致 許多Android上的軟件采用了和iOS一樣的設計風格，但 Windows Phone 則完全不同，因此也見到許多在 iOS上設計很好的軟件，移植到了 Windows Phone 上就顯得非常粗糙，當然應該還是和微軟急迫希望增加應用數量而審核不嚴有關系。

什么叫做藝術

這篇文章本是iOS7發布當天寫的，剛好由于端午節所以延后了一些，但過去兩天后，剛好在網上看到有人提到藝術這個字眼來形容擬物設計，似乎扁平設計就是下里巴人了，當然曾經也一直看到網上有類似的說法，這里順帶發表下我的看法。

首先科技產品不應該是純藝術品，蘋果曾帶來一股風潮，正如喬布斯所說， 他是站在科技與人文路口的人，上文里也談到了扁平化設計對于信息傳達的優勢，而且我也不認為它一定會失去所謂的藝術感，關鍵在于設計。曾經西方繪畫以畫得越逼真為水平的高低，自從照相機出來后，抽象派藝術開始有了很大的發展，而中國的傳統水墨畫一直是寫意為主的，本人也畫過幾年水墨畫，對于寫意的概念也是 有點感受的，這些我想這也應該能算藝術吧。