古語常說：去粗取精，去偽存真。自小念念不忘的句子，不僅是教會我們為人處世的道理，更是準確的揭示了事物的本質和規律。自13年興起的Flat設計趨勢，也恰恰好符合了這一規律。去除冗餘、厚重和繁雜的裝飾效果，這是Flat設計的核心意義。
道理彷彿異常簡單，但要做出優秀的Flat設計，卻並不如此。如何去掉多餘的透視、紋理、漸變以及能做出3D效果的元素讓“資訊”本身重新作為核心被凸顯出來？如何設計出抽象、極簡和符號化的設計元素？這些都是扁平化設計需要斟酌的問題，小到一個ICON，大到整體的設計理念和風格，扁平化設計絕不是簡單的“簡單化設計”。
今天，我整理了20個優秀的手機端扁平化設計案例，這些作品大多出自Behance和Dribbble上的設計達人之手，全當拋磚引玉，如果你有更好的作品，歡迎分享哦。
1. WeDo
設計師：Fabio Basile
所用工具：Sketch, PS
亮點：我是真的很喜歡這隻小狐狸，無論是集合形狀的元素，還是溫軟飽和的配色，都能達到舒適的視覺效果。
單一背景色，幾乎以白色純色為主，配合集合圖形和簡單線條。
襯線字型，色彩和大小形成對比，強化重要資訊。
設計師：Higher
所用工具：Sketch, PS, AI
亮點：logo “ V ” 的設計非常巧妙，凸顯主題Vault Financial app design，且配色簡單。
純白背景色，留白空間。
排版中的重點突出，標題和二級標題對比鮮明，資訊層次分明。
介面很乾淨。
3. Intimate
設計師：Mockplus
所用工具：Mockplus, PS
亮點：純白背景留白，空間點十足。
文字排版合理，字型大小對比鮮明且不突兀，突出主要資訊。
配圖簡潔，風格一致，整體介面和諧乾淨。
互動合理，不會讓使用者產生誤解。
4. Upper APP
設計師：nest Asanov, Andrey Drobovich, Vlad Taran and Sergey Valiukh
所用工具: PS, AE, Sketch APP
亮點：色彩，紅黑白三種色彩，對比鮮明，明快鮮亮，且所佔比例符合6：3：1的UI配色黃金比例。
字型色彩選擇與其背景形成對比，突出文字資訊，不會產生閱讀障礙。
5. Weather App
設計師：Sergey Valiukh & Tubik Studio
所用工具：PS, AI,AE
亮點：採用梯度式漸變高光，這是扁平化設計的一個特徵，梯度式漸變比過度式漸變更具有扁平感。
配色溫和，給人溫和平靜的感覺。
設計師：Khenkin, Sergey Valiukh, Tubik Studio
所用工具：Mac OS X, Axure, InVision, Flinto, PS, AI, AE
亮點：採用UI安全色藍色為純色背景，易於接近使用者，介面簡潔。
介面元素為藍色背景的顏變色，但仍舊採用梯度式漸變。
設計師：Alexandr Oleynikov
所用工具：PS,AI, AE
亮點：紫色純色背景色，介面整齊統一
icon簡單流暢
創作者：Jakub Antalík
所用工具：AI, Sketch App
亮點：元素簡潔，文字排突出重要資訊，不會給使用者造成視覺疲勞。
圖示簡潔，線條幹淨。
設計師：George Railean
所用工具：PS, AE, Sketch App
亮點：logo為兩個F的變體，符合Foster your passion的主題，且色彩對比合理，給人乾淨的感覺。
純色背景。
10. Accurun - An iOS running tracker app
設計師： Grégoire Vella
所用工具：PS, AI, AE
亮點：圓形幾何圖示元素。
純黑背景色，原色色彩明快，與背景形成很好對比。
文字資訊突出。
11. Mileage Tracker - Website & Application Design
設計師：Stanislav Hristov, DTAIL STUDIO
所用工具：Wacom Cintiq, PS, AI
亮點：介面乾淨簡潔，色彩運用少卻對比鮮明。
文字資訊突出。
12. UI Development
設計師：Ramotion
所用工具：Adobe Illustrator Draw, PS
亮點：色彩簡潔樸素，介面乾淨。
互動新穎流暢。
13. Travello App Concept - Plan a new travel adventure
設計師：Karol Cichoń, Adam Kalinowski, inFullMobile Team, Tobiasz Usewicz
所用工具：AE, Sketch APP
亮點：白色純色背景，介面簡潔。
互動設定巧妙。
文字排版突出主要資訊。
14. Foly Mobile App
設計師：Lilit Harutyunyan, Sergey Muradyan
所用工具：Wacom Intuos, AI, PS
亮點：logo設定簡潔貼合主題，且色彩對比鮮明。
神色純色背景，具有高階感。
介面元素色彩和背景色對比鮮明。
15. Map Chat App
設計師：Vadim Gromov
所用工具：Sketch APP
亮點：白色純色背景和藍色介面色彩創造乾淨簡潔的介面。
圖示元素簡潔美觀。
設計師：Sunny UI
所用工具：PS, Sketch App
亮點：淺色純色背景，綠色給人舒適愉悅的體驗。
圖示是亮點，元素生動簡潔。
17. Weather app
設計師：Sein Baručija
所用工具：PS
亮點：深紫色配色大膽時尚。
幾何元素的使用引人注目。
18. The air conditioning control interface
設計師：Jude TU
所用工具：PS
亮點：純色背景介面清新。
icon簡潔，資訊突出。
設計師：Sergey Valiukh & Tubik Studio
所用工具：PS. AI. AE
亮點：圖示是聚焦點，生動可愛。
介面全部劃分為矩形色塊，對比干淨鮮明。
動畫新穎。
20. Eat Daily PROTOTYPE with MockPlus
設計師：Akash Khandavilli
所用工具：Mockplus, PS
亮點：白色純色背景和鮮紅搭配對比鮮明，紅色是美食APP的優先色。
以上是20 個優秀的手機端扁平化設計介面，希望能給你的設計帶來靈感和啟發。相信在欣賞了這麼多的優秀設計後，不難發現，這些作品裡的共同點。那麼，在進行手機Flat介面設計的時候，究竟有那些要點選需要注意呢？
1. 簡約
任何出現在介面上的元素，都必須不脫離Flat設計的中心思想：簡約。比如可以使用含義明確且被大眾認知接受的圖示。使用無襯線字型而不用過度花哨的字型。
2. 配色方案
使用純色和比較生動的色彩強調突出想要展示的重要資訊。但值得注意的是，Flat設計的色彩選擇不一定總是依賴於明亮生動的色彩。比如下面這個例子：
3. 文字排版
1）字型
使用無襯線字型，這種字型能呈現簡潔乾脆的介面效果，可以和頁面的其他元素很好的配合，營造舒適的視覺。
2）文字
標題和文字主題可通過字型大小和色彩產生對比效果，以突出中心資訊。但不可誇張，對比要適度。
4. 互動設計
Flat設計的使用者體驗不僅是機遇其簡約乾淨的視覺效果，還有其清晰簡潔的互動設計，不能導致使用者在使用過程中產生迷惑和不知所措。
5. 工具選擇
工欲善其事，必先利其器，基於以上20個flat設計以及我自身的經驗，推薦一下工具希望能助您一臂之力，讓Flat設計更簡單方便。
1）原型設計工具——Mockplus
關注設計本身，而非學習一款工具，Mockplus是集簡單易學與功能性兼具的一款原型設計工具。其包包含彈出皮膚，內容皮膚，滾動區，抽屜等200多個高度封裝的元件和3000多個向量圖示，只需要簡單的拖拽就可以進行設計。Mockplus中的互動設計完全視覺化，所見即所得。
2）向量繪圖工具——Sketch
Sketch是一款專業的向量圖工具，主要定位是UIS設計和Web，具有向量編輯和完美畫素功能。智慧參考線能快速精確的兩個元素之間的尺寸，這對設計十分有利。Sketch具有優秀的輸出功能，可以原生多倍多格式輸出，支援自帶字尾。
3）影象處理軟體——Photoshop
PS的功能的強大相信大家非常清楚，但對於設計新手而言，要謹記Photoshop是一款強大的影象處理工具，而不是圖形創作。還有很多有些的設計工具這裡沒有一一列舉。但工具不在多，而在精通。尤其是找到最合適的工具，往往能事半功倍。比如用ps處理圖形創作就是不太合適的。
最後，推薦一些Flat介面設計的下載資源，希望能在設計中對您有所幫助：
1. User Interface Mobile Design
4. Idealogic Flat Mobile App UI Design
5. Elegance Flat Mobile UI Kit Free
扁平化設計尤其是在移動端上可以充分發揮其優勢，可以更加簡單直接的將資訊和事物的工作方式展示出來，減少使用者認知障礙的產生。此外，隨著網站和應用程式在許多平臺涵蓋了越來越多不同的螢幕尺寸，建立多個螢幕尺寸和解析度skeuomorphic設計既繁瑣又費時，而扁平化的設計基本可以保證設計在所有的螢幕尺寸上它會很好看。所以，未來扁平化設計，尤其是移動端的扁平化設計必將更受歡迎，每位設計師都要引起重視。
