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

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

1. WeDo

設(shè)計(jì)師：Fabio Basile

所用工具：Sketch, PS

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

2. Vault financial app design

設(shè)計(jì)師：Higher

所用工具：Sketch, PS, AI

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

...（以下省略18個(gè)條目）

20. Eat Daily PROTOTYPE with MockPlus

設(shè)計(jì)師：Akash Khandavilli

所用工具：Mockplus, PS

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

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

1. 簡約

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

2. 配色方案

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

3. 文本排版

1）字體

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

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

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

4. 交互設(shè)計(jì)

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

5. 工具選擇

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

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

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

2）矢量繪圖工具——Sketch

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

3）圖像處理軟件——Photoshop

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

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

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