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
亮點：純白背景留白，空間點十足。
文本排版合理，字體大小對比鮮明且不突兀，突出主要信息。
配圖簡潔，風格一致，整體界面和諧幹凈。
交互合理，不會讓用戶產生誤解。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="930"></svg>)
4. Upper APP
設計師：nest Asanov, Andrey Drobovich, Vlad Taran and Sergey Valiukh
所用工具: PS, AE, Sketch APP
亮點：色彩，紅黑白三種色彩，對比鮮明，明快鮮亮，且所占比例符合6：3：1的UI配色黃金比例。
字體色彩選擇與其背景形成對比，突出文本信息，不會產生閱讀障礙。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="502"></svg>)
5. Weather App
設計師：Sergey Valiukh & Tubik Studio
所用工具：PS, AI,AE
亮點：采用梯度式漸變高光，這是扁平化設計的一個特征，梯度式漸變比過度式漸變更具有扁平感。
配色溫和，給人溫和平靜的感覺。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="482"></svg>)
6. Sea Schedule App
設計師：Khenkin, Sergey Valiukh, Tubik Studio
所用工具：Mac OS X, Axure, InVision, Flinto, PS, AI, AE
亮點：采用UI安全色藍色為純色背景，易於接近用戶，界面簡潔。
界面元素為藍色背景的顏變色，但仍舊采用梯度式漸變。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="510"></svg>)
7.Analytics
設計師：Alexandr Oleynikov
所用工具：PS,AI, AE
亮點：紫色純色背景色，界面整齊統一
icon簡單流暢
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="611"></svg>)
8. Lines activity tracker
創作者：Jakub Antalík
所用工具：AI, Sketch App
亮點：元素簡潔，文本排突出重要信息，不會給用戶造成視覺疲勞。
圖標簡潔，線條幹凈。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="508"></svg>)
9. Foster Friends
設計師：George Railean
所用工具：PS, AE, Sketch App
亮點：logo為兩個F的變體，符合Foster your passion的主題，且色彩對比合理，給人幹凈的感覺。
純色背景。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="495"></svg>)
10. Accurun - An iOS running tracker app
設計師： Grégoire Vella
所用工具：PS, AI, AE
亮點：圓形幾何圖標元素。
純黑背景色，原色色彩明快，與背景形成很好對比。
文本信息突出。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="507"></svg>)
11. Mileage Tracker - Website & Application Design
設計師：Stanislav Hristov, DTAIL STUDIO
所用工具：Wacom Cintiq, PS, AI
亮點：界面幹凈簡潔，色彩運用少卻對比鮮明。
文本信息突出。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="501"></svg>)
12. UI Development
設計師：Ramotion
所用工具：Adobe Illustrator Draw, PS
亮點：色彩簡潔樸素，界面幹凈。
交互新穎流暢。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="863" height="630"></svg>)
13. Travello App Concept - Plan a new travel adventure
設計師：Karol Cichoń, Adam Kalinowski, inFullMobile Team, Tobiasz Usewicz
所用工具：AE, Sketch APP
亮點：白色純色背景，界面簡潔。
交互設置巧妙。
文本排版突出主要信息。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="574"></svg>)
14. Foly Mobile App
設計師：Lilit Harutyunyan, Sergey Muradyan
所用工具：Wacom Intuos, AI, PS
亮點：logo設置簡潔貼合主題，且色彩對比鮮明。
神色純色背景，具有高級感。
界面元素色彩和背景色對比鮮明。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="907" height="508"></svg>)
15. Map Chat App
設計師：Vadim Gromov
所用工具：Sketch APP
亮點：白色純色背景和藍色界面色彩創造幹凈簡潔的界面。
圖標元素簡潔美觀。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="577"></svg>)
16. Smart Home App - iPhone X
設計師：Sunny UI
所用工具：PS, Sketch App
亮點：淺色純色背景，綠色給人舒適愉悅的體驗。
圖標是亮點，元素生動簡潔。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="645"></svg>)
17. Weather app
設計師：Sein Baru?ija
所用工具：PS
亮點：深紫色配色大膽時尚。
幾何元素的使用引人註目。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="452"></svg>)
18. The air conditioning control interface
設計師：Jude TU
所用工具：PS
亮點：純色背景界面清新。
icon簡潔，信息突出。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="571"></svg>)
19. Animation Set 2015 v1.0
設計師：Sergey Valiukh & Tubik Studio
所用工具：PS. AI. AE
亮點：圖標是聚焦點，生動可愛。
界面全部劃分為矩形色塊，對比幹凈鮮明。
動畫新穎。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="800"></svg>)
20. Eat Daily PROTOTYPE with MockPlus
設計師：Akash Khandavilli
所用工具：Mockplus, PS
亮點：白色純色背景和鮮紅搭配對比鮮明，紅色是美食APP的優先色。
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="905" height="483"></svg>)
以上是20 個優秀的手機端扁平化設計界面，希望能給你的設計帶來靈感和啟發。相信在欣賞了這麽多的優秀設計後，不難發現，這些作品裏的共同點。那麽，在進行手機Flat界面設計的時候，究竟有那些要點選需要註意呢？
1. 簡約
任何出現在界面上的元素，都必須不脫離Flat設計的中心思想：簡約。比如可以使用含義明確且被大眾認知接受的圖標。使用無襯線字體而不用過度花哨的字體。
2. 配色方案
使用純色和比較生動的色彩強調突出想要展示的重要信息。但值得註意的是，Flat設計的色彩選擇不一定總是依賴於明亮生動的色彩。比如下面這個例子：
![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="908" height="480"></svg>)
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設計既繁瑣又費時，而扁平化的設計基本可以保證設計在所有的屏幕尺寸上它會很好看。所以，未來扁平化設計，尤其是移動端的扁平化設計必將更受歡迎，每位設計師都要引起重視。
作者：jongde
鏈接：https://juejin.im/post/5a24e3086fb9a04509095617
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
20個優秀手機界面扁平化設計，讓你一秒看懂扁平化