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

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

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

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

帶來(lái)更好的信息傳達(dá)

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

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

一樣可以立體而真實(shí)

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

#p#

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

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

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

627.AM 的UI設(shè)計(jì)采用了不同形態(tài)的圖形（實(shí)際上是有動(dòng)畫(huà)效果的，使用 Windows Phone 的用戶(hù)可以在市場(chǎng)下載體驗(yàn)）圖標(biāo)設(shè)計(jì)與色彩

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

要想做好 Metro 設(shè)計(jì)也不是很容易的事

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

什么叫做藝術(shù)

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

原文鏈接：http://www.mindboat.org/archives/60