20個優秀手機界面扁平化設計，讓你一秒看懂扁平化

古語常說：去粗取精，去僞存真。自小念念不忘的句子，不只是教會咱們爲人處世的道理，更是準確的揭示了事物的本質和規律。自13年興起的Flat設計趨勢，也偏偏好符合了這一規律。去除冗餘、厚重和繁雜的裝飾效果，這是Flat設計的核心意義。

道理彷彿異常簡單，但要作出優秀的Flat設計，卻並不如此。如何去掉多餘的透視、紋理、漸變以及能作出3D效果的元素讓「信息」自己從新做爲核心被凸顯出來？如何設計出抽象、極簡和符號化的設計元素？這些都是扁平化設計須要斟酌的問題，小到一個ICON，大到總體的設計理念和風格，扁平化設計毫不是簡單的「簡單化設計」。

今天，我整理了20個優秀的手機端扁平化設計案例，這些做品大多出自Behance和Dribbble上的設計達人之手，全當拋磚引玉，若是你有更好的做品，歡迎分享哦。

1. WeDo

設計師：Fabio Basile

所用工具：Sketch, PS

亮點：我是真的很喜歡這隻小狐狸，不管是集合形狀的元素，仍是溫軟飽和的配色，都能達到溫馨的視覺效果。

單一背景色，幾乎以白色純色爲主，配合集合圖形和簡單線條。

襯線字體，色彩和大小造成對比，強化重要信息。

2. Vault financial app design

設計師：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

亮點：採用梯度式漸變高光，這是扁平化設計的一個特徵，梯度式漸變比過分式漸變動具備扁平感。

配色溫和，給人溫和平靜的感受。

6. Sea Schedule App

設計師：Khenkin, Sergey Valiukh, Tubik Studio

所用工具：Mac OS X, Axure, InVision, Flinto, PS, AI, AE

亮點：採用UI安全色藍色爲純色背景，易於接近用戶，界面簡潔。

界面元素爲藍色背景的顏變色，但仍舊採用梯度式漸變。

7.Analytics

設計師：Alexandr Oleynikov

所用工具：PS,AI, AE

亮點：紫色純色背景色，界面整齊統一

icon簡單流暢

8. Lines activity tracker

創做者：Jakub Antalík

所用工具：AI, Sketch App

亮點：元素簡潔，文本排突出重要信息，不會給用戶形成視覺疲勞。

圖標簡潔，線條幹淨。

9. Foster Friends

設計師：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

亮點：白色純色背景和藍色界面色彩創造乾淨簡潔的界面。

圖標元素簡潔美觀。

16. Smart Home App - iPhone X

設計師：Sunny UI

所用工具：PS, Sketch App

亮點：淺色純色背景，綠色給人溫馨愉悅的體驗。

圖標是亮點，元素生動簡潔。

17. Weather app

設計師：Sein Baručija

所用工具：PS

亮點：深紫色配色大膽時尚。

幾何元素的使用引人注目。

18. The air conditioning control interface

設計師：Jude TU

所用工具：PS

亮點：純色背景界面清新。

icon簡潔，信息突出。

19. Animation Set 2015 v1.0

設計師：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

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

扁平化設計尤爲是在移動端上能夠充分發揮其優點，能夠更加簡單直接的將信息和事物的工做方式展現出來，減小用戶認知障礙的產生。此外，隨着網站和應用程序在許多平臺涵蓋了愈來愈多不一樣的屏幕尺寸，建立多個屏幕尺寸和分辨率skeuomorphic設計既繁瑣又費時，而扁平化的設計基本能夠保證設計在全部的屏幕尺寸上它會很好看。因此，將來扁平化設計，尤爲是移動端的扁平化設計必將更受歡迎，每位設計師都要引發重視。