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