2013年，移动App设计的13大精髓
對(duì)于剛剛過(guò)去的2012年，你最想說(shuō)什么？2012年的移動(dòng)開(kāi)發(fā)領(lǐng)域足以用“風(fēng)起云涌，瞬息萬(wàn)變”來(lái)形容，移動(dòng)應(yīng)用市場(chǎng)蓬勃發(fā)展也讓眾多的移動(dòng)應(yīng)用開(kāi)發(fā)者獲利匪淺，也由此涌現(xiàn)出了許多優(yōu)秀的應(yīng)用設(shè)計(jì)，隨著用戶(hù)的品質(zhì)需求的上升，App界面設(shè)計(jì)也被提升到了全新的高度。移動(dòng)應(yīng)用實(shí)現(xiàn)了從互聯(lián)網(wǎng)到移動(dòng)設(shè)備的成功蛻變，從用戶(hù)角度出發(fā)，對(duì)視覺(jué)、風(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ì)感等視覺(jué)效果相同。在過(guò)去的2012年，無(wú)論是單就界面設(shè)計(jì)而言還是整體的App設(shè)計(jì)，扁平化設(shè)計(jì)都在逐漸盛行，這似乎也成了2013年最為顯著的趨勢(shì)。
圖：典型的Skeumorphism風(fēng)格
在如今的App設(shè)計(jì)領(lǐng)域，提到扁平化設(shè)計(jì)自然少不了典型的蘋(píng)果style之一——Skeumorphism。何謂Skeumorphism？根據(jù)維基百科的解釋，Skeumorphism指的是一個(gè)產(chǎn)品的設(shè)計(jì)元素模仿了某個(gè)原創(chuàng)產(chǎn)品的設(shè)計(jì)元素，只不過(guò)這個(gè)設(shè)計(jì)元素在原創(chuàng)產(chǎn)品那里具有某種功能，而在模仿者這里卻只是個(gè)裝飾擺設(shè)而已。盡管就連喬布斯都非常熱衷于Skeumorphism設(shè)計(jì)風(fēng)格，但即使對(duì)物理實(shí)體的視覺(jué)渲染做得再出色，也只不過(guò)是畫(huà)皮式的視覺(jué)自慰。在用戶(hù)體驗(yàn)至高無(wú)上的App設(shè)計(jì)領(lǐng)域，濫用形式模仿主義勢(shì)必會(huì)對(duì)用戶(hù)造成困惑，這就是為什么主打極簡(jiǎn)主義的扁平化設(shè)計(jì)風(fēng)格會(huì)風(fēng)行的原因之一。
扁平化設(shè)計(jì)由來(lái)已久，使用扁平化設(shè)計(jì)的開(kāi)發(fā)者也不在少數(shù)，但對(duì)于大多數(shù)開(kāi)發(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）。通過(guò)XBOX控制面板進(jìn)行啟動(dòng)，然后圍繞其扁平化設(shè)計(jì)進(jìn)行系統(tǒng)加載，盡管Windows 8并不能說(shuō)是完美無(wú)缺的，但無(wú)可否認(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ì)沒(méi)有運(yùn)用任何形式的三維元素，界面從頭至尾都非常清爽美觀。當(dāng)你合理運(yùn)用應(yīng)用中所設(shè)置的梯度進(jìn)行鬧鐘設(shè)定時(shí)，你一定會(huì)得到一個(gè)最讓人期待的完美鬧鐘。當(dāng)然，實(shí)用的鬧鐘不會(huì)太過(guò)深?yuàn)W，而Rise的導(dǎo)航和UX就很有力地證明了扁平化設(shè)計(jì)的好處，讓一款應(yīng)用變得更加簡(jiǎn)單，而在視覺(jué)上卻非常具有吸引力。
扁平化設(shè)計(jì)并非適用于所有的應(yīng)用程序，無(wú)論風(fēng)格如何，界面形式都取決于其實(shí)際功能，但無(wú)可否認(rèn)的是，如果想要讓?xiě)?yīng)用的UI實(shí)現(xiàn)突破，對(duì)于設(shè)計(jì)師及開(kāi)發(fā)者而言，扁平化設(shè)計(jì)可謂是一個(gè)最好的方法。
2. 更少的按鈕，更多的手勢(shì)
對(duì)于應(yīng)用設(shè)計(jì)來(lái)說(shuō)，如果想要整體界面美觀大方，扁平化設(shè)計(jì)當(dāng)然是個(gè)好法子，但除此之外，不可或缺之一就是必須為按鈕做減法，既能減少必要的傳統(tǒng)導(dǎo)航元素的數(shù)量，也能有助于避免界面紊亂。
圖：更少按鈕
這方面谷歌地圖就是很好的例子，無(wú)論是扁平化設(shè)計(jì)還是為按鈕做減法，都無(wú)可挑剔。當(dāng)然，不是所有人都認(rèn)為在應(yīng)用設(shè)計(jì)中手勢(shì)是最好的選擇，隨著扁平化設(shè)計(jì)的普及，還有什么能比手勢(shì)更適合你的應(yīng)用呢？
圖：更多手勢(shì)
3. 可理解的輔助動(dòng)畫(huà)
當(dāng)你沒(méi)有按鈕或可以進(jìn)行選擇操作的圖標(biāo)時(shí)，你可能會(huì)對(duì)如何才能保證達(dá)到某種效果感到不知所措，這時(shí)，可理解的輔助動(dòng)畫(huà)絕對(duì)稱(chēng)得上是戰(zhàn)略性的舉措。雖然在現(xiàn)在的應(yīng)用中使用并不多見(jiàn)，但無(wú)可否認(rèn)的是，在幫助用戶(hù)完成某項(xiàng)任務(wù)操作時(shí)稍許的動(dòng)畫(huà)絕對(duì)是最好的法子。
到目前為止我發(fā)現(xiàn)的最好的例子就是iOS鎖屏上的相機(jī)圖標(biāo)。很多不太熟悉iOS的用戶(hù)可能更多的依賴(lài)于屏幕滑動(dòng)。不用做其他任何事情，只是小小的彈跳滑動(dòng)動(dòng)作并可實(shí)現(xiàn)某項(xiàng)操作，這也很好地讓不了解的用戶(hù)對(duì)于如何正確使用它給予了視覺(jué)上的提醒和暗示，通過(guò)這種暗示，用戶(hù)也能夠迅速熟悉起來(lái)。
圖：iPhone鎖屏設(shè)計(jì)
通過(guò)提供一些小動(dòng)畫(huà)作為輔助，可以圍繞UI引導(dǎo)人們不會(huì)因?yàn)榘粹o擾亂它，這是權(quán)衡之下最小也最為突出的視覺(jué)提示之一。
除了輔助，在動(dòng)畫(huà)和轉(zhuǎn)場(chǎng)效果方面還有另外一種很有效的方法，即微流動(dòng)。應(yīng)用程序的用戶(hù)體驗(yàn)很多時(shí)候成也動(dòng)畫(huà)敗也動(dòng)畫(huà)，如果用戶(hù)對(duì)于應(yīng)用設(shè)計(jì)布局等均感到自然舒適，即使存在小瑕疵也會(huì)使得用戶(hù)體驗(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ì)更為普遍。無(wú)可否認(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)航菜單在未來(lái)一定會(huì)更為普遍。
5. 更多原生
在過(guò)去的幾年里應(yīng)用類(lèi)別是相當(dāng)?shù)囊恢?#xff0c;但隨著原生應(yīng)用平臺(tái)逐漸縮小，這似乎也證明了一點(diǎn)，那就是相比網(wǎng)絡(luò)應(yīng)用，原生似乎往往是最合適的選擇。
特別是在今年HTML5的聲音在業(yè)界很響亮，很多媒體開(kāi)始炒作這個(gè)事情。其中的報(bào)道有許多失實(shí)和扭曲。HTML5與native的優(yōu)勢(shì)劣勢(shì)小編我就不在這里做過(guò)多分析了。要知道在去年夏天的時(shí)候，Facebook內(nèi)部做Android的工程師僅有三個(gè)人左右。隨著優(yōu)秀的軟件工程師不斷加入，Facebook的客戶(hù)端開(kāi)發(fā)團(tuán)隊(duì)也在不斷壯大。現(xiàn)在它有足夠的人力，用native來(lái)實(shí)現(xiàn)以前HTML的功能。同時(shí)native在性能方面也有更多優(yōu)化的空間。為了用戶(hù)體驗(yàn)Facebook發(fā)布純native版本的客戶(hù)端應(yīng)用也就不足為奇了。
6. 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
也許有人會(huì)說(shuō)，既然“更多原生”成了趨勢(shì)，那為什么還再來(lái)一條“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”？在2013年里，擺在設(shè)計(jì)師面前的明顯有兩條路，一條是原生，而另一條就是Web。作為應(yīng)用開(kāi)發(fā)者，如果想要獲得更為廣泛的用戶(hù)，有時(shí)候?qū)Ｓ衅脚_(tái)并非最好的方式。
圖：Quartz
在這方面，Quartz足以說(shuō)明一切。Quartz并不是Native的，且離Native還很遠(yuǎn)，但它的設(shè)計(jì)在感覺(jué)上卻是相當(dāng)?shù)捻憫?yīng)，這也使得它在每個(gè)設(shè)備上工作都幾乎毫不費(fèi)力。我可以在我的iPhone、iMac及Surface平板電腦上以相同的方式打開(kāi)它，而且還保證能以一種非常美觀的方式來(lái)呈現(xiàn)相同的信息。
在過(guò)去的一年里，響應(yīng)式設(shè)計(jì)正在被越來(lái)越多的開(kāi)發(fā)者用來(lái)呈現(xiàn)基于Web的內(nèi)容。在這個(gè)世界上為每種設(shè)備進(jìn)行專(zhuān)門(mé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ì)此我們不能全盤(pán)否定，但試想一下，當(dāng)你設(shè)計(jì)一個(gè)寬度為700px的響應(yīng)式網(wǎng)頁(yè)時(shí)，如果你使用“視網(wǎng)膜”屏幕或27寸的iMac查看時(shí)，那網(wǎng)站頁(yè)面勢(shì)必會(huì)留有太多的空白。
特別是對(duì)于視覺(jué)媒體而言，通過(guò)提供更大的網(wǎng)頁(yè)寬度，也可以更加突出文本顯示。因此，何不使用更大的網(wǎng)頁(yè)寬度？既保證不浪費(fèi)網(wǎng)頁(yè)空間資源，也能提供更好的用戶(hù)體驗(yàn)?zāi)亍?/p>
8. 更大的字體
目前網(wǎng)絡(luò)上通用的正文標(biāo)準(zhǔn)字體是12-14px，但現(xiàn)在越來(lái)越多的網(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ú)論是社交網(wǎng)絡(luò)還是應(yīng)用領(lǐng)域，搜索正在扮演著越來(lái)越重要的角色。這方面，設(shè)計(jì)師Scott Thomas的The Noun Project和全新的Myspace（點(diǎn)擊查看視頻演示）就充份利用了大搜索框的優(yōu)點(diǎn)，而在剛剛過(guò)去的一年中，谷歌搜索第一次達(dá)到穩(wěn)定，我相信這是因?yàn)樵谒阉魃嫌辛烁嗟膶?zhuān)有形式，而不是一個(gè)已經(jīng)被過(guò)度推廣的方法。
圖：The Noun Project
盡管這并不是指大型的字段檢索，而著名的社交應(yīng)用Path在為他們的服務(wù)量身定制的獨(dú)一無(wú)二的搜索功能上做了很大的付出，在此也期望大搜索框使用越來(lái)越多，進(jìn)而成為一種應(yīng)用潮流。
10. 更多動(dòng)圖素材的使用
GIF文件在網(wǎng)絡(luò)上現(xiàn)在似乎使用很廣泛，下一步就是如何將它運(yùn)用到應(yīng)用設(shè)計(jì)中。目前的標(biāo)準(zhǔn)是PNG文件，而GIF將允許通過(guò)一個(gè)代碼更少的方法來(lái)添加或移動(dòng)特定的元素。
圖：GIF不一樣的感受（點(diǎn)擊圖片查看效果）
當(dāng)然對(duì)于這一點(diǎn)，并不是所有的設(shè)計(jì)師都會(huì)贊同，因?yàn)楹芏鄷r(shí)候GIF文件在移動(dòng)設(shè)備上顯示會(huì)感覺(jué)有點(diǎn)怪異，但毫無(wú)疑問(wèn)的是，在應(yīng)用設(shè)計(jì)上，GIF文件使用將會(huì)越來(lái)越普遍，而在2013年這方面也會(huì)有更多的嘗試。
11. 人性化設(shè)計(jì)
與其說(shuō)它是一種趨勢(shì)倒不如說(shuō)它是一種設(shè)計(jì)觀。我們常常會(huì)陷入到查看每一項(xiàng)細(xì)節(jié)的死胡同，會(huì)后悔做錯(cuò)事，但我們回不去，唯一能做的就是思考我們?yōu)槭裁磿?huì)錯(cuò)？因此在進(jìn)行設(shè)計(jì)的前后，我們一定要弄懂一個(gè)問(wèn)題，那就是為什么要這樣設(shè)計(jì)？
對(duì)于好的設(shè)計(jì)，人們趨之若鶩，都會(huì)覺(jué)得這個(gè)設(shè)計(jì)很好很有價(jià)值，但在進(jìn)行應(yīng)用設(shè)計(jì)時(shí)如何既能保持應(yīng)用不凡的價(jià)值，又能擁有極為人性化的觸覺(jué)體驗(yàn)，將設(shè)計(jì)與應(yīng)用本身結(jié)合起來(lái)進(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)，我們需要的不僅是極佳的用戶(hù)體驗(yàn)，還有整體的創(chuàng)作理念及如何通過(guò)創(chuàng)作實(shí)現(xiàn)它。
作為一種非常重要的技術(shù)細(xì)節(jié)，它的設(shè)計(jì)經(jīng)驗(yàn)將會(huì)對(duì)人類(lèi)社會(huì)產(chǎn)生非常重要的影響。畢竟我們不是生產(chǎn)產(chǎn)品，只是進(jìn)行設(shè)計(jì)；為了改善世界，我們竭己之能地進(jìn)行設(shè)計(jì)。無(wú)論人們?nèi)绾问褂盟麄兊娜粘ＴO(shè)備，你都可以以一種具有非常重要的意義的方式進(jìn)行改變，那么你將會(huì)對(duì)他們的整體工作效率及心境產(chǎn)生影響。如果好的設(shè)計(jì)不用來(lái)簡(jiǎn)化或改善生活，那從根本上來(lái)說(shuō)是毫無(wú)意義的。
12. 更少老土顏色
在設(shè)計(jì)界，有一件事一直停滯不前，就是顏色的創(chuàng)新。我的桌面上的應(yīng)用程序60%都是使用一種顏色——藍(lán)色，我理解為何使用藍(lán)色作為主色調(diào)，但從另一方面來(lái)說(shuō)，在過(guò)去的十年中，我們?cè)趹?yīng)用商店中有許多圖標(biāo)來(lái)表現(xiàn)應(yīng)用，但僅僅藍(lán)一種顏色就主宰了一大半。
圖：iOS上的應(yīng)用顏色比例
這不僅僅是圖標(biāo)的問(wèn)題。許多應(yīng)用及網(wǎng)站均是如此，大肆地使用藍(lán)色。色彩學(xué)是很有趣的，因此我們需要走出狹隘的藍(lán)色空間，對(duì)它進(jìn)行改變。當(dāng)然，不是每種顏色都可以使用，但試試總沒(méi)錯(cuò)，說(shuō)不定你就會(huì)發(fā)現(xiàn)屬于自己應(yīng)用的style。
13. 矢量自適應(yīng)
有好工具在手，設(shè)計(jì)師的工作也變得更加便捷。也許對(duì)于眾多的設(shè)計(jì)師來(lái)說(shuō)，Sketch是最好的工具。為不同的屏幕設(shè)計(jì)開(kāi)發(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ì)師和開(kāi)發(fā)者來(lái)說(shuō)，2013年可以稱(chēng)得上是非常美好的一年，隨著移動(dòng)逐漸成主流，開(kāi)發(fā)者和設(shè)計(jì)師擁有更多的機(jī)會(huì)來(lái)展示自己，也通過(guò)應(yīng)用從中獲取利潤(rùn)，當(dāng)然誰(shuí)也不能拍拍胸脯保證一定贏，因?yàn)闊o(wú)論何時(shí)，禍福總相倚，但只要對(duì)人心所向的App設(shè)計(jì)趨勢(shì)深入了解并加以利用，相信在未來(lái)讓人愛(ài)不釋手的優(yōu)秀應(yīng)用一定會(huì)層出不窮。
總結(jié)
以上是生活随笔為你收集整理的2013年，移动App设计的13大精髓的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 互联网的精髓就是实用
- 下一篇： 移动大爆炸