編者按：本篇文章雖然不是針對移動游戲的研發(fā)，但是編者認為對移動游戲的UI設(shè)計和新手引導(dǎo)很有啟發(fā)作用。

　　對于剛剛過去的2012年，你最想說什么?2012年的移動開發(fā)領(lǐng)域足以用“風(fēng)起云涌，瞬息萬變”來形容，移動應(yīng)用市場蓬勃發(fā)展也讓眾多的移動應(yīng)用開發(fā)者獲利匪淺，也由此涌現(xiàn)出了許多優(yōu)秀的應(yīng)用設(shè)計，隨著用戶的品質(zhì)需求的上升，App界面設(shè)計也被提升到了全新的高度。移動應(yīng)用實現(xiàn)了從互聯(lián)網(wǎng)到移動設(shè)備的成功蛻變，從用戶角度出發(fā)，對視覺、風(fēng)格、操作方式、架構(gòu)、內(nèi)容呈現(xiàn)等各個方面進行設(shè)計挖掘，從而打造出最為精致的應(yīng)用。為此，國外著名的應(yīng)用設(shè)計師Gannon Burgett結(jié)合自身實戰(zhàn)經(jīng)驗總結(jié)了2013年App設(shè)計發(fā)展的13大趨勢。

　　1. 扁平化設(shè)計

　　扁平化設(shè)計本質(zhì)上只是設(shè)計美學(xué)中的一種，與仿古、高光及金屬質(zhì)感等視覺效果相同。在過去的2012年，無論是單就界面設(shè)計而言還是整體的App設(shè)計，扁平化設(shè)計都在逐漸盛行，這似乎也成了2013年最為顯著的趨勢。

圖：典型的Skeumorphism風(fēng)格

　　在如今的App設(shè)計領(lǐng)域，提到扁平化設(shè)計自然少不了典型的蘋果style之一——Skeumorphism。何謂Skeumorphism?根據(jù)維基百科的解釋，Skeumorphism指的是一個產(chǎn)品的設(shè)計元素模仿了某個原創(chuàng)產(chǎn)品的設(shè)計元素，只不過這個設(shè)計元素在原創(chuàng)產(chǎn)品那里具有某種功能，而在模仿者這里卻只是個裝飾擺設(shè)而已。盡管就連喬布斯都非常熱衷于Skeumorphism設(shè)計風(fēng)格，但即使對物理實體的視覺渲染做得再出色，也只不過是畫皮式的視覺安慰。在用戶體驗至高無上的App設(shè)計領(lǐng)域，濫用形式模仿主義勢必會對用戶造成困惑，這就是為什么主打極簡主義的扁平化設(shè)計風(fēng)格會風(fēng)行的原因之一。

　　扁平化設(shè)計由來已久，使用扁平化設(shè)計的開發(fā)者也不在少數(shù)，但對于大多數(shù)開發(fā)者而言，扁平化一定不會是設(shè)計首選，在2012年微軟Windows 8的推動下，扁平化設(shè)計進入了一個全新的境界。

圖：Windows 8

　　Windows 8是微軟圍繞扁平化UI設(shè)計的一個全新的系統(tǒng)，其中大部分是圍繞著Windows UI(即之前的Metro UI)和實時圖塊(Live Tiles)。通過XBOX控制面板進行啟動，然后圍繞其扁平化設(shè)計進行系統(tǒng)加載，盡管Windows 8并不能說是完美無缺的，但無可否認的是主打扁平化設(shè)計界面的Windows UI徹底征服了世界。

圖：Rise

　　這是扁平化設(shè)計在界面設(shè)計中的運用，那在應(yīng)用中呢?利用扁平化設(shè)計最為充分的應(yīng)用是一個名為Rise的鬧鐘應(yīng)用。Rise的整個UI設(shè)計沒有運用任何形式的三維元素，界面從頭至尾都非常清爽美觀。當(dāng)你合理運用應(yīng)用中所設(shè)置的梯度進行鬧鐘設(shè)定時，你一定會得到一個最讓人期待的完美鬧鐘。當(dāng)然，實用的鬧鐘不會太過深奧，而Rise的導(dǎo)航和UX就很有力地證明了扁平化設(shè)計的好處，讓一款應(yīng)用變得更加簡單，而在視覺上卻非常具有吸引力。

　　扁平化設(shè)計并非適用于所有的應(yīng)用程序，無論風(fēng)格如何，界面形式都取決于其實際功能，但無可否認的是，如果想要讓應(yīng)用的UI實現(xiàn)突破，對于設(shè)計師及開發(fā)者而言，扁平化設(shè)計可謂是一個最好的方法。

　　2. 更少的按鈕，更多的手勢

　　對于應(yīng)用設(shè)計來說，如果想要整體界面美觀大方，扁平化設(shè)計當(dāng)然是個好法子，但除此之外，不可或缺之一就是必須為按鈕做減法，既能減少必要的傳統(tǒng)導(dǎo)航元素的數(shù)量，也能有助于避免界面紊亂。

圖：更少按鈕

　　這方面谷歌地圖就是很好的例子，無論是扁平化設(shè)計還是為按鈕做減法，都無可挑剔。當(dāng)然，不是所有人都認為在應(yīng)用設(shè)計中手勢是最好的選擇，隨著扁平化設(shè)計的普及，還有什么能比手勢更適合你的應(yīng)用呢?

圖：更多手勢

　　3. 可理解的輔助動畫

　　當(dāng)你沒有按鈕或可以進行選擇操作的圖標(biāo)時，你可能會對如何才能保證達到某種效果感到不知所措，這時，可理解的輔助動畫絕對稱得上是戰(zhàn)略性的舉措。雖然在現(xiàn)在的應(yīng)用中使用并不多見，但無可否認的是，在幫助用戶完成某項任務(wù)操作時稍許的動畫絕對是最好的法子。

　　到目前為止我發(fā)現(xiàn)的最好的例子就是iOS鎖屏上的相機圖標(biāo)。很多不太熟悉iOS的用戶可能更多的依賴于屏幕滑動。不用做其他任何事情，只是小小的彈跳滑動動作并可實現(xiàn)某項操作，這也很好地讓不了解的用戶對于如何正確使用它給予了視覺上的提醒和暗示，通過這種暗示，用戶也能夠迅速熟悉起來。

圖：iPhone鎖屏設(shè)計

　　通過提供一些小動畫作為輔助，可以圍繞UI引導(dǎo)人們不會因為按鈕擾亂它，這是權(quán)衡之下最小也最為突出的視覺提示之一。

　　除了輔助，在動畫和轉(zhuǎn)場效果方面還有另外一種很有效的方法，即微流動。應(yīng)用程序的用戶體驗很多時候成也動畫敗也動畫，如果用戶對于應(yīng)用設(shè)計布局等均感到自然舒適，即使存在小瑕疵也會使得用戶體驗更加良好也更有價值。

　　4. 左側(cè)導(dǎo)航菜單

　　回首2012年的App設(shè)計，大多數(shù)的應(yīng)用程序在進行菜單設(shè)計時都會選擇使用左側(cè)導(dǎo)航菜單，但我認為在2013年它勢必會更為普遍。無可否認，左側(cè)導(dǎo)航菜單的的確確是顯示選項列表操作的一個非常簡單而效果卻非常驚人的方式。

圖：Myspace的左側(cè)導(dǎo)航菜單

　　一個很好的例子就是Marco Arment的雜志應(yīng)用，如果你按住菜單按鈕3秒就會出現(xiàn)菜單，這也是商業(yè)化中一個最好的顯示方式。因此作為一個可視化的表達方式，左側(cè)導(dǎo)航菜單在未來一定會更為普遍。

　　5. 更多原生

　　在過去的幾年里應(yīng)用類別是相當(dāng)?shù)囊恢?，但隨著原生應(yīng)用平臺逐漸縮小，這似乎也證明了一點，那就是相比網(wǎng)絡(luò)應(yīng)用，原生似乎往往是最合適的選擇。

　　特別是在今年HTML5的聲音在業(yè)界很響亮，很多媒體開始炒作這個事情。其中的報道有許多失實和扭曲。HTML5與native的優(yōu)勢劣勢小編我就不在這里做過多分析了。要知道在去年夏天的時候，F(xiàn)acebook內(nèi)部做Android的工程師僅有三個人左右。隨著優(yōu)秀的軟件工程師不斷加入，F(xiàn)acebook的客戶端開發(fā)團隊也在不斷壯大?，F(xiàn)在它有足夠的人力，用native來實現(xiàn)以前HTML的功能。同時native在性能方面也有更多優(yōu)化的空間。為了用戶體驗Facebook發(fā)布純native版本的客戶端應(yīng)用也就不足為奇了。

　　6. 響應(yīng)式網(wǎng)頁設(shè)計

　　也許有人會說，既然“更多原生”成了趨勢，那為什么還再來一條“響應(yīng)式網(wǎng)頁設(shè)計”?在2013年里，擺在設(shè)計師面前的明顯有兩條路，一條是原生，而另一條就是Web。作為應(yīng)用開發(fā)者，如果想要獲得更為廣泛的用戶，有時候?qū)Ｓ衅脚_并非最好的方式。

圖：Quartz

　　在這方面，Quartz足以說明一切。Quartz并不是Native的，且離Native還很遠，但它的設(shè)計在感覺上卻是相當(dāng)?shù)捻憫?yīng)，這也使得它在每個設(shè)備上工作都幾乎毫不費力。我可以在我的iPhone、iMac及Surface平板電腦上以相同的方式打開它，而且還保證能以一種非常美觀的方式來呈現(xiàn)相同的信息。

　　在過去的一年里，響應(yīng)式設(shè)計正在被越來越多的開發(fā)者用來呈現(xiàn)基于Web的內(nèi)容。在這個世界上為每種設(shè)備進行專門設(shè)計是不可能的，因此，響應(yīng)式網(wǎng)頁設(shè)計也被證明是允許內(nèi)容跨平臺但卻能保持一致性的最佳選擇。

　　7. 更大的網(wǎng)頁寬度

　　這個趨勢其實與我最近看到的相反，目前許多網(wǎng)站采取的都是比較窄的寬度，當(dāng)然，對此我們不能全盤否定，但試想一下，當(dāng)你設(shè)計一個寬度為700px的響應(yīng)式網(wǎng)頁時，如果你使用“視網(wǎng)膜”屏幕或27寸的iMac查看時，那網(wǎng)站頁面勢必會留有太多的空白。

　　特別是對于視覺媒體而言，通過提供更大的網(wǎng)頁寬度，也可以更加突出文本顯示。因此，何不使用更大的網(wǎng)頁寬度?既保證不浪費網(wǎng)頁空間資源，也能提供更好的用戶體驗?zāi)亍?/p>

　　8. 更大的字體

　　目前網(wǎng)絡(luò)上通用的正文標(biāo)準(zhǔn)字體是12-14px，但現(xiàn)在越來越多的網(wǎng)站在正文字體方面都傾向于使用16-18px的更大的字體。

圖：更大的字體

　　當(dāng)下，響應(yīng)式網(wǎng)頁設(shè)計一個異常顯著的特點就是排版布局在網(wǎng)頁內(nèi)容的可讀性上有著非常重要的作用。當(dāng)在iPhone等移動設(shè)備上進行查看時，18px的字體顯示要比12px文本容易閱讀得多。當(dāng)然，這并不是所有的文字都適用，如果長篇文章使用這么大的字體反而會適得其反，尤其是在使用一個尺寸更大但像素卻偏低的屏幕查看時更加糟糕。

　　9. 大搜索框

　　無論是社交網(wǎng)絡(luò)還是應(yīng)用領(lǐng)域，搜索正在扮演著越來越重要的角色。這方面，設(shè)計師Scott Thomas的The Noun Project和全新的Myspace(點擊查看視頻演示)就充份利用了大搜索框的優(yōu)點，而在剛剛過去的一年中，谷歌搜索第一次達到穩(wěn)定，我相信這是因為在搜索上有了更多的專有形式，而不是一個已經(jīng)被過度推廣的方法。

圖：The Noun Project

　　盡管這并不是指大型的字段檢索，而著名的社交應(yīng)用Path在為他們的服務(wù)量身定制的獨一無二的搜索功能上做了很大的付出，在此也期望大搜索框使用越來越多，進而成為一種應(yīng)用潮流。

圖：Path

　　10. 更多動圖素材的使用

　　GIF文件在網(wǎng)絡(luò)上現(xiàn)在似乎使用很廣泛，下一步就是如何將它運用到應(yīng)用設(shè)計中。目前的標(biāo)準(zhǔn)是PNG文件，而GIF將允許通過一個代碼更少的方法來添加或移動特定的元素。

圖：GIF不一樣的感受

　　當(dāng)然對于這一點，并不是所有的設(shè)計師都會贊同，因為很多時候GIF文件在移動設(shè)備上顯示會感覺有點怪異，但毫無疑問的是，在應(yīng)用設(shè)計上，GIF文件使用將會越來越普遍，而在2013年這方面也會有更多的嘗試。

　　11. 人性化設(shè)計

　　與其說它是一種趨勢倒不如說它是一種設(shè)計觀。我們常常會陷入到查看每一項細節(jié)的死胡同，會后悔做錯事，但我們回不去，唯一能做的就是思考我們?yōu)槭裁磿e?因此在進行設(shè)計的前后，我們一定要弄懂一個問題，那就是為什么要這樣設(shè)計?

　　對于好的設(shè)計，人們趨之若鶩，都會覺得這個設(shè)計很好很有價值，但在進行應(yīng)用設(shè)計時如何既能保持應(yīng)用不凡的價值，又能擁有極為人性化的觸覺體驗，將設(shè)計與應(yīng)用本身結(jié)合起來進入更高的層次?

圖：主打人性化的The Magazine

　　人性化設(shè)計在今年勢必會有更廣泛的發(fā)展，因為我們已經(jīng)走到了對設(shè)備的真實性有所了解且每天都在使用它們的這一步。因此，人性化應(yīng)該是設(shè)計師設(shè)計網(wǎng)頁及應(yīng)用的目標(biāo)，我們需要的不僅是極佳的用戶體驗，還有整體的創(chuàng)作理念及如何通過創(chuàng)作實現(xiàn)它。

　　作為一種非常重要的技術(shù)細節(jié)，它的設(shè)計經(jīng)驗將會對人類社會產(chǎn)生非常重要的影響。畢竟我們不是生產(chǎn)產(chǎn)品，只是進行設(shè)計;為了改善世界，我們竭己之能地進行設(shè)計。無論人們?nèi)绾问褂盟麄兊娜粘ＴO(shè)備，你都可以以一種具有非常重要的意義的方式進行改變，那么你將會對他們的整體工作效率及心境產(chǎn)生影響。如果好的設(shè)計不用來簡化或改善生活，那從根本上來說是毫無意義的。

　　12. 更少老土顏色

　　在設(shè)計界，有一件事一直停滯不前，就是顏色的創(chuàng)新。我的桌面上的應(yīng)用程序60%都是使用一種顏色——藍色，我理解為何使用藍色作為主色調(diào)，但從另一方面來說，在過去的十年中，我們在應(yīng)用商店中有許多圖標(biāo)來表現(xiàn)應(yīng)用，但僅僅藍一種顏色就主宰了一大半。

圖：iOS上的應(yīng)用顏色比例

　　這不僅僅是圖標(biāo)的問題。許多應(yīng)用及網(wǎng)站均是如此，大肆地使用藍色。色彩學(xué)是很有趣的，因此我們需要走出狹隘的藍色空間，對它進行改變。當(dāng)然，不是每種顏色都可以使用，但試試總沒錯，說不定你就會發(fā)現(xiàn)屬于自己應(yīng)用的style。

　　13. 矢量自適應(yīng)

　　有好工具在手，設(shè)計師的工作也變得更加便捷。也許對于眾多的設(shè)計師來說，Sketch是最好的工具。為不同的屏幕設(shè)計開發(fā)不同的應(yīng)用界面不簡單也不可能，如果想要實現(xiàn)“一次設(shè)計，隨處運行”，就必須進行更為精簡的工作流程，當(dāng)然矢量自適應(yīng)是必不可缺的。

圖：Sketch設(shè)計

　　結(jié)語

　　對于所有的設(shè)計師和開發(fā)者來說，2013年可以稱得上是非常美好的一年，隨著移動逐漸成主流，開發(fā)者和設(shè)計師擁有更多的機會來展示自己，也通過應(yīng)用從中獲取利潤，當(dāng)然誰也不能拍拍胸脯保證一定贏，因為無論何時，禍福總相倚，但只要對人心所向的App設(shè)計趨勢深入了解并加以利用，相信在未來讓人愛不釋手的優(yōu)秀應(yīng)用一定會層出不窮。