古語常說：去粗取精，去偽存真。從小到大念念不忘的句子，不僅是教會我談空們?yōu)槿颂幨赖牡览?，更是準確的揭示了事物的本質(zhì)和規(guī)律。自2013年興起的Flat設(shè)計趨勢，也恰恰好符合了這一規(guī)律。去除冗余、厚重和繁雜的裝飾效果，這是Flat設(shè)計的核心意義。道理仿佛異常簡單，但要做出優(yōu)秀的Flat設(shè)計，卻并不如此。如何盯待去除多余的透視、紋理、漸變以及能做出3D效果的元素，讓“信息”本身重新作為核心被凸顯出來？如何設(shè)計出抽象、極簡和符號化的設(shè)計元素？這些都是扁平化設(shè)計需要斟酌的問題，小到一個ICON，大到整體的設(shè)計理念和風(fēng)格，扁平化設(shè)計絕不是簡單的“簡單化設(shè)計”。

今天，我整理了20個優(yōu)秀的手機端扁平化設(shè)計案例，這些作品大多出自Behance和Dribbble上的設(shè)計達人之手，全當(dāng)拋磚引玉，如果你有更好的作品，歡迎分享哦。

1. WeDo

設(shè)計師：Fabio Basile

所用工具：Sketch, PS

亮點：我是真的很喜歡這只小狐貍，無論是集合形狀的元素，還是溫軟飽和的配色，都能達到舒適的視覺效果。單一背景色，幾乎以白色純色為主，配合集合圖形和簡單線條。襯線字體，凱坦色彩和大小形成對比，強化重要信息。

2. Vault financial app design

設(shè)計師：Higher

所用工具：Sketch, PS, AI

亮點：logo “V”的設(shè)計非常巧妙，凸顯主題Vault Financial app design，且配色簡單。純白背景色，留白空間。排版中的重點突出，標(biāo)題和二級標(biāo)題對比鮮明，信息層次分明。界面很干凈。

...（以下省略18個條目）

20. Eat Daily PROTOTYPE with MockPlus

設(shè)計師：Akash Khandavilli

所用工具：Mockplus, PS

亮點：白色純色背景和鮮紅搭配對比鮮明，紅色是美食APP的優(yōu)先色。

以上是20個優(yōu)秀的手機端扁平化設(shè)計界面，希望能給你的設(shè)計帶來靈感和啟發(fā)。相信在欣賞了這么多的優(yōu)秀設(shè)計后，不難發(fā)現(xiàn)，這些作品里的共同點。那么，在進行手機Flat界面設(shè)計的時候，究竟有哪些要點需要注意呢？

1. 簡約

任何出現(xiàn)在界面上的元素，都必須不脫離Flat設(shè)計的中心思想：簡約。比如可以使用含義明確且被大眾認知接受的圖標(biāo)。使用無襯線字體而不用過度花哨的字體。

2. 配色方案

使用純色和比較生動的色彩強調(diào)突出想要展示的重要信息。但值得注意的是，F(xiàn)lat設(shè)計的色彩選擇不一定總是依賴于明亮生動的色彩。

3. 文本排版

1）字體

使用無襯線字體，這種字體能呈現(xiàn)簡潔干脆的界面效果，可以和頁面的其他元素很好的配合，營造舒適的視覺。

2）文本標(biāo)題和文本主題

可通過字體大小和色彩產(chǎn)生對比效果，以突出中心信息。但不可夸張，對比要適度。

4. 交互設(shè)計

Flat設(shè)計的用戶體驗不僅是機遇其簡約干凈的視覺效果，還有其清晰簡潔的交互設(shè)計，不能導(dǎo)致用戶在使用過程中產(chǎn)生迷惑和不知所措。

5. 工具選擇

工欲善其事，必先利其器，基于以上20個flat設(shè)計以及我自身的經(jīng)驗，推薦一下工具希望能助您一臂之力，讓Flat設(shè)計更簡單方便。

1）原型設(shè)計工具——Mockplus

設(shè)計本身，而非學(xué)習(xí)一款工具，Mockplus是集簡單易學(xué)與功能性兼具的一款原型設(shè)計工具。其包含彈出面板，內(nèi)容面板，滾動區(qū)，抽屜等200多個高度封裝的組件和3000多個矢量圖標(biāo)，只需要簡單的拖拽就可以進行設(shè)計。Mockplus中的交互設(shè)計完全可視化，所見即所得。

2）矢量繪圖工具——Sketch

Sketch是一款專業(yè)的矢量圖工具，主要定位是UIS設(shè)計和Web，具有矢量編輯和完美像素功能。智能參考線能快速精確的兩個元素之間的尺寸，這對設(shè)計十分有利。Sketch具有優(yōu)秀的輸出功能，可以原生多倍多格式輸出，支持自帶后綴。

3）圖像處理軟件——Photoshop

PS的功能的強大相信大家非常清楚，但對于設(shè)計新手而言，要謹記Photoshop是一款強大的圖像處理工具，而不是圖形創(chuàng)作。還有很多有些的設(shè)計工具這里沒有一一列舉。但工具不在多，而在精通。尤其是找到最合適的工具，往往能事半功倍。比如用ps處理圖形創(chuàng)作就是不太合適的。

最后，推薦一些Flat界面設(shè)計的下載資源，希望能在設(shè)計中對您有所幫助：

1. UserInterface Mobile Design

2. Flat Mobile App UI Design

3. Flat Mobile User Interface

4. Idealogic Flat Mobile App UI Design

5. Elegance Flat Mobile UI Kit Free