2013年 移動App設計13項注意細節總結

導讀：在過去的一年裡，移動成主流也讓眾多的移動應用如雨後春筍般層出不窮，在眾多開發者從中獲利的同時競爭也愈演愈烈，如何才能保證自己立於不敗之地?用戶是上帝，一切還得從應用說起。
對於剛剛過去的2012年，你最想說什麼?2012年的移動開發領域足以用“風起雲湧，瞬息萬變”來形容，移動應用市場蓬勃發展也讓眾多的移動應用開發者獲利匪淺，也由此湧現出了許多優秀的應用設計，隨著用戶的品質需求的上升，App界面設計也被提升到了全新的高度。移動應用實現了從互聯網到移動設備的成功蛻變，從用戶角度出發，對視覺、風格、操作方式、架構、內容呈現等各個方面進行設計挖掘，從而打造出最為精致的應用。為此，國外著名的應用設計師Gannon Burgett結合自身實戰經驗總結了2013年App設計發展的13大趨勢。

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

  
圖：典型的Skeumorphism風格

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

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

   　
圖：Windows 8

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

   　
圖：Rise

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

扁平化設計並非適用於所有的應用程序，無論風格如何，界面形式都取決於其實際功能，但無可否認的是，如果想要讓應用的UI實現突破，對於設計師及開發者而言，扁平化設計可謂是一個最好的方法。

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

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

  
圖：更少按鈕

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

3. 可理解的輔助動畫

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

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

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

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

4. 左側導航菜單

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

  
圖：Myspace的左側導航菜單

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

5. 更多原生

在過去的幾年裡應用類別是相當的一致，但隨著原生應用平台逐漸縮小，這似乎也證明了一點，那就是相比網絡應用，原生似乎往往是最合適的選擇。  
特別是在今年HTML5的聲音在業界很響亮，很多媒體開始炒作這個事情。其中的報道有許多失實和扭曲。HTML5與native的優勢劣勢小編我就不在這裡做過多分析了。要知道在去年夏天的時候，Facebook內部做Android的工程師僅有三個人左右。隨著優秀的軟件工程師不斷加入，Facebook的客戶端開發團隊也在不斷壯大。現在它有足夠的人力，用native來實現以前HTML的功能。同時native在性能方面也有更多優化的空間。為了用戶體驗Facebook發布純native版本的客戶端應用也就不足為奇了。

6. 響應式網頁設計

也許有人會說，既然“更多原生”成了趨勢，那為什麼還再來一條“響應式網頁設計”?在2013年裡，擺在設計師面前的明顯有兩條路，一條是原生，而另一條就是Web。作為應用開發者，如果想要獲得更為廣泛的用戶，有時候專有平台並非最好的方式。   圖：Quartz

在這方面，Quartz足以說明一切。Quartz並不是Native的，且離Native還很遠，但它的設計在感覺上卻是相當的響應，這也使得它在每個設備上工作都幾乎毫不費力。我可以在我的iPhone、iMac及Surface平板電腦上以相同的方式打開它，而且還保證能以一種非常美觀的方式來呈現相同的信息。

在過去的一年裡，響應式設計正在被越來越多的開發者用來呈現基於Web的內容。在這個世界上為每種設備進行專門設計是不可能的，因此，響應式網頁設計也被證明是允許內容跨平台但卻能保持一致性的最佳選擇。

7. 更大的網頁寬度

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

特別是對於視覺媒體而言，通過提供更大的網頁寬度，也可以更加突出文本顯示。因此，何不使用更大的網頁寬度?既保證不浪費網頁空間資源，也能提供更好的用戶體驗呢。

8. 更大的字體

目前網絡上通用的正文標准字體是12-14px，但現在越來越多的網站在正文字體方面都傾向於使用16-18px的更大的字體。

   　
圖：更大的字體

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

9. 大搜索框

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

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

圖：Path

10. 更多動圖素材的使用

GIF文件在網絡上現在似乎使用很廣泛，下一步就是如何將它運用到應用設計中。目前的標准是PNG文件，而GIF將允許通過一個代碼更少的方法來添加或移動特定的元素。   　
圖：GIF不一樣的感受(點擊圖片查看效果)

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

11. 人性化設計

與其說它是一種趨勢倒不如說它是一種設計觀。我們常常會陷入到查看每一項細節的死胡同，會後悔做錯事，但我們回不去，唯一能做的就是思考我們為什麼會錯?因此在進行設計的前後，我們一定要弄懂一個問題，那就是為什麼要這樣設計?

對於好的設計，人們趨之若鹜，都會覺得這個設計很好很有價值，但在進行應用設計時如何既能保持應用不凡的價值，又能擁有極為人性化的觸覺體驗，將設計與應用本身結合起來進入更高的層次?   圖：主打人性化的The Magazine

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

作為一種非常重要的技術細節，它的設計經驗將會對人類社會產生非常重要的影響。畢竟我們不是生產產品，只是進行設計;為了改善世界，我們竭己之能地進行設計。無論人們如何使用他們的日常設備，你都可以以一種具有非常重要的意義的方式進行改變，那麼你將會對他們的整體工作效率及心境產生影響。如果好的設計不用來簡化或改善生活，那從根本上來說是毫無意義的。

12. 更少老土顏色

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

   　圖：iOS上的應用顏色比例

這不僅僅是圖標的問題。許多應用及網站均是如此，大肆地使用藍色。色彩學是很有趣的，因此我們需要走出狹隘的藍色空間，對它進行改變。當然，不是每種顏色都可以使用，但試試總沒錯，說不定你就會發現屬於自己應用的style。

13. 矢量自適應

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

  
圖：Sketch設計

結語

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