今天25學(xué)堂跟大家聊聊移動APP的設(shè)計風(fēng)格。主要的APP設(shè)計風(fēng)格大致分為以下三種：

扁平化（Flat Design?）、極簡、Material Design（谷歌APP設(shè)計風(fēng)格）

APP設(shè)計風(fēng)格是指APP通過主要的幾種顏色搭配、頁面布局和界面交互體驗等給用戶呈現(xiàn)出的整體視覺感受。

下面我們就來重點分析下這三種目前主流的APP設(shè)計風(fēng)格的區(qū)別。

APP設(shè)計風(fēng)格一、扁平化設(shè)計 ??Flat Design

首先，扁平化設(shè)計是一個大的范疇。它既包含了極簡設(shè)計風(fēng)格和Material Design、微軟的metro風(fēng)格。是相對之前的蘋果擬物化設(shè)計風(fēng)格發(fā)展至今的。

1、什么是扁平化設(shè)計

去除冗余、厚重和繁雜的裝飾效果。而具體表現(xiàn)在去掉了多余的透視、紋理、漸變以及能做出3D效果的元素，這樣可以讓“信息”本身重新作為核心被凸顯出來。同時在設(shè)計元素上，則強(qiáng)調(diào)了抽象、極簡和符號化。

更少的按鈕和選項，這樣使得UI界面變得更加干凈整齊，使用起來格外簡潔，從而帶給用戶更加良好的操作體驗。

優(yōu)點

1、界面美觀、簡約大方、條理清晰

2、設(shè)計元素上強(qiáng)調(diào)抽象、極簡、符號化，去除冗余的裝飾效果突顯App的文字圖片等信息內(nèi)容。

3、完美兼容pc網(wǎng)站、安卓、ios等不同系統(tǒng)的平臺和不同屏幕分辨率的設(shè)備，適應(yīng)性強(qiáng)。

缺點

》 ??降低用戶體驗，在非移動設(shè)備上令人反感；意思就是比較抽象

》 ??缺乏直觀，需要一定的學(xué)習(xí)成本和意思的表達(dá)不清晰。

》 ??傳達(dá)的感情不豐富，不直觀。

設(shè)計技巧分享

》 ?簡單的設(shè)計元素

》?強(qiáng)調(diào)字體的使用

》?關(guān)注色彩

》?簡化的交互設(shè)計

》?偽扁平化設(shè)計

扁平化設(shè)計推薦閱讀：

1、APP配色學(xué)習(xí)：3個扁平化配色方案酷站推薦

2、如何設(shè)計移動APP的扁平化及扁平化設(shè)計技巧

3、APP圖標(biāo)設(shè)計教程：扁平化設(shè)計風(fēng)格分析

APP設(shè)計風(fēng)格二、極簡設(shè)計風(fēng)格

極簡在攝影中是一種突出主體取簡去繁的攝影手法，在生活中是一種放松的生活態(tài)度，在設(shè)計中是一種簡潔的設(shè)計手法。

簡約正是極簡設(shè)計風(fēng)格的代表產(chǎn)物。極簡設(shè)計以簡單，易用為原則，滿足人們生活需要原則簡單，易于掌握。

簡約正在成為當(dāng)代人的審美標(biāo)準(zhǔn)，無論是排版還是交互，越簡單的設(shè)計反而更加吸引人。不僅用戶的審美在發(fā)生改變，移動APP設(shè)計師們也在為此而努力著。

APP的極簡設(shè)計風(fēng)格如下：

界面：簡潔整齊大方，回歸自然，尊重自然規(guī)律，依據(jù)形態(tài)自然體現(xiàn)。明快而富視覺沖擊力的個性圖形，用色單純洗練，刪繁就簡，以少勝多，視覺中心點明確。大面積的留白，使圖、文、底主次分明，更具有強(qiáng)烈的視覺沖擊力。交互：核心在于以人為本，更加重視用戶自然的感受。通過交互來設(shè)計出用戶希望出現(xiàn)的界面效果。

之前介紹的《愛玩動圖和喜歡極簡主義風(fēng)格的APP推薦：挖豆》和《APP產(chǎn)品秀：一款手機(jī)上制作簡歷的神器【極簡APP】》

APP設(shè)計風(fēng)格三、Material Design設(shè)計

Material?Design設(shè)計風(fēng)格是興起于谷歌安卓系統(tǒng)的5.1以后的。也是谷歌安卓手機(jī)操作系統(tǒng)的風(fēng)格。也是谷歌推出了全新的設(shè)計語言Material Design。

Material Design設(shè)計代表是卡片化設(shè)計風(fēng)格。

如今Material?Design將會慢慢成為全平臺設(shè)計規(guī)范和APP設(shè)計風(fēng)格的趨勢。

下面我們看下微博APP的Material?Design設(shè)計風(fēng)格。

當(dāng)然還有國外的一些設(shè)計網(wǎng)站的Material?Design的設(shè)計風(fēng)格的APP案例。例如：追波網(wǎng)的APP界面設(shè)計風(fēng)格。

現(xiàn)在讓我們回顧下Material Design的九大設(shè)計原則：

擴(kuò)展閱讀：最全安卓Material Design的設(shè)計原則和設(shè)計規(guī)范

1、材料是個隱喻?

（所謂的“材料”是基于觸覺現(xiàn)實，靈感來自于對于紙張和墨水的研究，也加入了想象和魔法的因素。）

2、表面是直觀和自然的

（表面和邊緣為現(xiàn)實經(jīng)驗提供了視覺線索。使用熟悉的觸覺屬性，可以直觀地感受到使用情景。）

3、維度提供交互

光、表面和運動是展現(xiàn)交換的關(guān)鍵因素。逼真的光影效果顯出了各部分分離，劃分了空間，指示了哪些部分可以進(jìn)行操作。

4、適應(yīng)性設(shè)計

底層設(shè)計系統(tǒng)包括了交互和空間兩部分。每一個設(shè)備都能反映出同一底層系統(tǒng)的不同側(cè)面。每一設(shè)備的界面都會按照大小和交互進(jìn)行調(diào)整。

5、目錄用黑體和圖形設(shè)計，并帶有意圖

黑體能突出層次、意義，顯現(xiàn)焦點。深思熟慮的色彩選擇，層次分明的圖像，大范圍的鋪陳和有意的留白可以創(chuàng)造出浸入感和也能讓表達(dá)更清晰。

6、顏色、表面和圖標(biāo)都強(qiáng)調(diào)動作效果

用戶行為就是體驗設(shè)計的本質(zhì)?；緞幼餍Ч寝D(zhuǎn)折點，他們可以改變整個設(shè)計，可以讓核心功能變得更加明顯，更為用戶指明了“路標(biāo)”。

7、? 用戶發(fā)起變化

操作界面中的變化來自于用戶行為。用戶觸摸操作產(chǎn)生的效果要反應(yīng)和強(qiáng)化用戶的作用。

8、? 動畫效果要統(tǒng)一

所有動畫效果都在統(tǒng)一的環(huán)境下顯示。即使發(fā)生了變形或是重組，對對象的呈現(xiàn)也不能破壞用戶體驗的連續(xù)性。

9、動作富有情感和一致性

動作是有意義的，而且是恰當(dāng)?shù)?，動作有助于集中注意力和保持連續(xù)性。

總之，手機(jī)APP界面設(shè)計的重點無非就是兩個：一個是界面視覺設(shè)計，一個是考慮界面設(shè)計的用戶體驗。以上就是25學(xué)堂跟各位對如今最流行的三種APP設(shè)計風(fēng)格的對比分析。

扁平化、極簡、Material Design也是APP設(shè)計師目前常用的設(shè)計風(fēng)格。