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

1. 扁平化設(shè)計(jì)

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

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

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

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

圖：Windows 8

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

圖：Rise

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

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

2. 更少的按鈕，更多的手勢(shì)

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

圖：更少按鈕

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

圖：更多手勢(shì)

3. 可理解的輔助動(dòng)畫

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

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

圖：iPhone鎖屏設(shè)計(jì)

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

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

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

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

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

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

5. 更多原生

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

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

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

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

圖：Quartz

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

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

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

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

特別是對(duì)于視覺媒體而言，通過提供更大的網(wǎng)頁(yè)寬度，也可以更加突出文本顯示。因此，何不使用更大的網(wǎng)頁(yè)寬度?既保證不浪費(fèi)網(wǎng)頁(yè)空間資源，也能提供更好的用戶體驗(yàn)?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)頁(yè)設(shè)計(jì)一個(gè)異常顯著的特點(diǎn)就是排版布局在網(wǎng)頁(yè)內(nèi)容的可讀性上有著非常重要的作用。當(dāng)在iPhone等移動(dòng)設(shè)備上進(jìn)行查看時(shí)，18px的字體顯示要比12px文本容易閱讀得多。當(dāng)然，這并不是所有的文字都適用，如果長(zhǎng)篇文章使用這么大的字體反而會(huì)適得其反，尤其是在使用一個(gè)尺寸更大但像素卻偏低的屏幕查看時(shí)更加糟糕。

9. 大搜索框

無論是社交網(wǎng)絡(luò)還是應(yīng)用領(lǐng)域，搜索正在扮演著越來越重要的角色。這方面，設(shè)計(jì)師Scott Thomas的The Noun Project和全新的Myspace(點(diǎn)擊查看視頻演示)就充份利用了大搜索框的優(yōu)點(diǎn)，而在剛剛過去的一年中，谷歌搜索第一次達(dá)到穩(wěn)定，我相信這是因?yàn)樵谒阉魃嫌辛烁嗟膶Ｓ行问?，而不是一個(gè)已經(jīng)被過度推廣的方法。

圖：The Noun Project

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

圖：Path

10. 更多動(dòng)圖素材的使用

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

圖：GIF不一樣的感受(點(diǎn)擊圖片查看效果)

當(dāng)然對(duì)于這一點(diǎn)，并不是所有的設(shè)計(jì)師都會(huì)贊同，因?yàn)楹芏鄷r(shí)候GIF文件在移動(dòng)設(shè)備上顯示會(huì)感覺有點(diǎn)怪異，但毫無疑問的是，在應(yīng)用設(shè)計(jì)上，GIF文件使用將會(huì)越來越普遍，而在2013年這方面也會(huì)有更多的嘗試。

11. 人性化設(shè)計(jì)

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

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

圖：主打人性化的The Magazine

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

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

12. 更少老土顏色

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

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

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

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

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

圖：Sketch設(shè)計(jì)

結(jié)語(yǔ)

對(duì)于所有的設(shè)計(jì)師和開發(fā)者來說，2013年可以稱得上是非常美好的一年，隨著移動(dòng)逐漸成主流，開發(fā)者和設(shè)計(jì)師擁有更多的機(jī)會(huì)來展示自己，也通過應(yīng)用從中獲取利潤(rùn)，當(dāng)然誰也不能拍拍胸脯保證一定贏，因?yàn)闊o論何時(shí)，禍?？傁嘁校灰獙?duì)人心所向的App設(shè)計(jì)趨勢(shì)深入了解并加以利用，相信在未來讓人愛不釋手的優(yōu)秀應(yīng)用一定會(huì)層出不窮。

來源：TheIndustry