古語(yǔ)常說(shuō)：去粗取精，去偽存真潮剪。自小念念不忘的句子涣楷，不僅是教會(huì)我們?yōu)槿颂幨赖牡览矸滞伲菧?zhǔn)確的揭示了事物的本質(zhì)和規(guī)律。自13年興起的Flat設(shè)計(jì)趨勢(shì)总棵，也恰恰好符合了這一規(guī)律航瞭。去除冗余龄广、厚重和繁雜的裝飾效果秘案，這是Flat設(shè)計(jì)的核心意義蓖墅。
道理仿佛異常簡(jiǎn)單铣墨，但要做出優(yōu)秀的Flat設(shè)計(jì)座硕，卻并不如此莱没。如何去掉多余的透視胁编、紋理鹃觉、漸變以及能做出3D效果的元素讓“信息”本身重新作為核心被凸顯出來(lái)专酗？如何設(shè)計(jì)出抽象、極簡(jiǎn)和符號(hào)化的設(shè)計(jì)元素盗扇？這些都是扁平化設(shè)計(jì)需要斟酌的問(wèn)題祷肯，小到一個(gè)ICON，大到整體的設(shè)計(jì)理念和風(fēng)格疗隶，扁平化設(shè)計(jì)絕不是簡(jiǎn)單的“簡(jiǎn)單化設(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)：我是真的很喜歡這只小狐貍，無(wú)論是集合形狀的元素荒叶，還是溫軟飽和的配色碾阁，都能達(dá)到舒適的視覺(jué)效果。
單一背景色些楣，幾乎以白色純色為主脂凶，配合集合圖形和簡(jiǎn)單線條。
襯線字體戈毒，色彩和大小形成對(duì)比艰猬，強(qiáng)化重要信息。
設(shè)計(jì)師：Higher
所用工具：Sketch, PS, AI
亮點(diǎn)：logo “ V ” 的設(shè)計(jì)非常巧妙埋市，凸顯主題Vault Financial app design冠桃，且配色簡(jiǎn)單。
純白背景色道宅，留白空間食听。
排版中的重點(diǎn)突出胸蛛，標(biāo)題和二級(jí)標(biāo)題對(duì)比鮮明，信息層次分明樱报。
界面很干凈葬项。
3.Intimate
設(shè)計(jì)師：Mockplus
所用工具：Mockplus, PS
亮點(diǎn)：純白背景留白，空間點(diǎn)十足迹蛤。
文本排版合理民珍，字體大小對(duì)比鮮明且不突兀，突出主要信息盗飒。
配圖簡(jiǎn)潔嚷量，風(fēng)格一致，整體界面和諧干凈逆趣。
交互合理蝶溶，不會(huì)讓用戶產(chǎn)生誤解。
設(shè)計(jì)師：nest Asanov, Andrey Drobovich, Vlad Taran and Sergey Valiukh
所用工具: PS, AE, Sketch APP
亮點(diǎn)：色彩宣渗，紅黑白三種色彩抖所，對(duì)比鮮明，明快鮮亮痕囱，且所占比例符合6：3：1的UI配色黃金比例田轧。
字體色彩選擇與其背景形成對(duì)比，突出文本信息咐蝇，不會(huì)產(chǎn)生閱讀障礙涯鲁。
設(shè)計(jì)師：Sergey Valiukh & Tubik Studio
所用工具：PS, AI,AE
亮點(diǎn)：采用梯度式漸變高光，這是扁平化設(shè)計(jì)的一個(gè)特征有序，梯度式漸變比過(guò)度式漸變更具有扁平感抹腿。
配色溫和，給人溫和平靜的感覺(jué)旭寿。
設(shè)計(jì)師：Khenkin, Sergey Valiukh, Tubik Studio
所用工具：Mac OS X, Axure, InVision, Flinto, PS, AI, AE
亮點(diǎn)：采用UI安全色藍(lán)色為純色背景警绩，易于接近用戶，界面簡(jiǎn)潔盅称。
界面元素為藍(lán)色背景的顏?zhàn)兩缦椋耘f采用梯度式漸變。
設(shè)計(jì)師：Alexandr Oleynikov
所用工具：PS,AI, AE
亮點(diǎn)：紫色純色背景色缩膝，界面整齊統(tǒng)一
icon簡(jiǎn)單流暢
創(chuàng)作者：Jakub Antalík
所用工具：AI, Sketch App
亮點(diǎn)：元素簡(jiǎn)潔混狠，文本排突出重要信息，不會(huì)給用戶造成視覺(jué)疲勞疾层。
圖標(biāo)簡(jiǎn)潔将饺，線條干凈。
設(shè)計(jì)師：George Railean
所用工具：PS, AE, Sketch App
亮點(diǎn)：logo為兩個(gè)F的變體，符合Foster your passion的主題予弧，且色彩對(duì)比合理刮吧，給人干凈的感覺(jué)。
純色背景掖蛤。
10.Accurun - An iOS running tracker app
設(shè)計(jì)師： Grégoire Vella
所用工具：PS, AI, AE
亮點(diǎn)：圓形幾何圖標(biāo)元素杀捻。
純黑背景色，原色色彩明快蚓庭，與背景形成很好對(duì)比致讥。
文本信息突出。
11.Mileage Tracker - Website & Application Design
設(shè)計(jì)師：Stanislav Hristov, DTAIL STUDIO
所用工具：Wacom Cintiq, PS, AI
亮點(diǎn)：界面干凈簡(jiǎn)潔彪置，色彩運(yùn)用少卻對(duì)比鮮明拄踪。
文本信息突出。
設(shè)計(jì)師：Ramotion
所用工具：Adobe Illustrator Draw, PS
亮點(diǎn)：色彩簡(jiǎn)潔樸素拳魁，界面干凈。
交互新穎流暢撮弧。
13.Travello App Concept - Plan a new travel adventure
設(shè)計(jì)師：Karol Cichoń, Adam Kalinowski, inFullMobile Team, Tobiasz Usewicz
所用工具：AE, Sketch APP
亮點(diǎn)：白色純色背景潘懊，界面簡(jiǎn)潔。
交互設(shè)置巧妙贿衍。
文本排版突出主要信息授舟。
設(shè)計(jì)師：Lilit Harutyunyan, Sergey Muradyan
所用工具：Wacom Intuos, AI, PS
亮點(diǎn)：logo設(shè)置簡(jiǎn)潔貼合主題，且色彩對(duì)比鮮明贸辈。
神色純色背景释树，具有高級(jí)感。
界面元素色彩和背景色對(duì)比鮮明擎淤。
15.Map Chat App
設(shè)計(jì)師：Vadim Gromov
所用工具：Sketch APP
亮點(diǎn)：白色純色背景和藍(lán)色界面色彩創(chuàng)造干凈簡(jiǎn)潔的界面奢啥。
圖標(biāo)元素簡(jiǎn)潔美觀。
設(shè)計(jì)師：Sunny UI
所用工具：PS, Sketch App
亮點(diǎn)：淺色純色背景嘴拢，綠色給人舒適愉悅的體驗(yàn)桩盲。
圖標(biāo)是亮點(diǎn)，元素生動(dòng)簡(jiǎn)潔席吴。
17.Weather app
設(shè)計(jì)師：Sein Baru?ija
所用工具：PS
亮點(diǎn)：深紫色配色大膽時(shí)尚赌结。
幾何元素的使用引人注目。
18.The air conditioning control interface
設(shè)計(jì)師：Jude TU
所用工具：PS
亮點(diǎn)：純色背景界面清新孝冒。
icon簡(jiǎn)潔柬姚，信息突出。
設(shè)計(jì)師：Sergey Valiukh & Tubik Studio
所用工具：PS. AI. AE
亮點(diǎn)：圖標(biāo)是聚焦點(diǎn)庄涡，生動(dòng)可愛(ài)量承。
界面全部劃分為矩形色塊，對(duì)比干凈鮮明。
動(dòng)畫(huà)新穎宴合。
20.Eat Daily PROTOTYPE with MockPlus
設(shè)計(jì)師：Akash Khandavilli
所用工具：Mockplus, PS
亮點(diǎn)：白色純色背景和鮮紅搭配對(duì)比鮮明焕梅，紅色是美食APP的優(yōu)先色。
以上是20?個(gè)優(yōu)秀的手機(jī)端扁平化設(shè)計(jì)界面卦洽，希望能給你的設(shè)計(jì)帶來(lái)靈感和啟發(fā)贞言。相信在欣賞了這么多的優(yōu)秀設(shè)計(jì)后，不難發(fā)現(xiàn)阀蒂，這些作品里的共同點(diǎn)该窗。那么，在進(jìn)行手機(jī)Flat界面設(shè)計(jì)的時(shí)候蚤霞，究竟有那些要點(diǎn)選需要注意呢酗失？
1.?簡(jiǎn)約
任何出現(xiàn)在界面上的元素，都必須不脫離Flat設(shè)計(jì)的中心思想：簡(jiǎn)約昧绣。比如可以使用含義明確且被大眾認(rèn)知接受的圖標(biāo)规肴。使用無(wú)襯線字體而不用過(guò)度花哨的字體。
2.?配色方案
使用純色和比較生動(dòng)的色彩強(qiáng)調(diào)突出想要展示的重要信息夜畴。但值得注意的是拖刃，F(xiàn)lat設(shè)計(jì)的色彩選擇不一定總是依賴于明亮生動(dòng)的色彩。比如下面這個(gè)例子：
3.?文本排版
1）字體
使用無(wú)襯線字體贪绘，這種字體能呈現(xiàn)簡(jiǎn)潔干脆的界面效果兑牡，可以和頁(yè)面的其他元素很好的配合，營(yíng)造舒適的視覺(jué)税灌。
2）文本
標(biāo)題和文本主題可通過(guò)字體大小和色彩產(chǎn)生對(duì)比效果均函，以突出中心信息。但不可夸張菱涤，對(duì)比要適度苞也。
4.?交互設(shè)計(jì)
Flat設(shè)計(jì)的用戶體驗(yàn)不僅是機(jī)遇其簡(jiǎn)約干凈的視覺(jué)效果，還有其清晰簡(jiǎn)潔的交互設(shè)計(jì)狸窘，不能導(dǎo)致用戶在使用過(guò)程中產(chǎn)生迷惑和不知所措墩朦。
5.?工具選擇
工欲善其事，必先利其器翻擒，基于以上20個(gè)flat設(shè)計(jì)以及我自身的經(jīng)驗(yàn)氓涣，推薦一下工具希望能助您一臂之力，讓Flat設(shè)計(jì)更簡(jiǎn)單方便陋气。
1）原型設(shè)計(jì)工具——Mockplus
關(guān)注設(shè)計(jì)本身劳吠，而非學(xué)習(xí)一款工具，Mockplus是集簡(jiǎn)單易學(xué)與功能性兼具的一款原型設(shè)計(jì)工具巩趁。其包包含彈出面板痒玩，內(nèi)容面板淳附，滾動(dòng)區(qū)，抽屜等200多個(gè)高度封裝的組件和3000多個(gè)矢量圖標(biāo)蠢古，只需要簡(jiǎn)單的拖拽就可以進(jìn)行設(shè)計(jì)奴曙。Mockplus中的交互設(shè)計(jì)完全可視化，所見(jiàn)即所得草讶。
2）矢量繪圖工具——Sketch
Sketch是一款專業(yè)的矢量圖工具洽糟，主要定位是UIS設(shè)計(jì)和Web，具有矢量編輯和完美像素功能堕战。智能參考線能快速精確的兩個(gè)元素之間的尺寸坤溃，這對(duì)設(shè)計(jì)十分有利。Sketch具有優(yōu)秀的輸出功能嘱丢，可以原生多倍多格式輸出薪介，支持自帶后綴。
3）圖像處理軟件——Photoshop
PS的功能的強(qiáng)大相信大家非常清楚越驻，但對(duì)于設(shè)計(jì)新手而言汁政，要謹(jǐn)記Photoshop是一款強(qiáng)大的圖像處理工具，而不是圖形創(chuàng)作缀旁。還有很多有些的設(shè)計(jì)工具這里沒(méi)有一一列舉烂完。但工具不在多，而在精通诵棵。尤其是找到最合適的工具，往往能事半功倍祝旷。比如用ps處理圖形創(chuàng)作就是不太合適的履澳。
最后，推薦一些Flat界面設(shè)計(jì)的下載資源怀跛，希望能在設(shè)計(jì)中對(duì)您有所幫助：
1.User Interface Mobile Design
4.Idealogic Flat Mobile App UI Design
5.Elegance Flat Mobile UI Kit Free
扁平化設(shè)計(jì)尤其是在移動(dòng)端上可以充分發(fā)揮其優(yōu)勢(shì)距贷，可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來(lái)，減少用戶認(rèn)知障礙的產(chǎn)生吻谋。此外忠蝗，隨著網(wǎng)站和應(yīng)用程序在許多平臺(tái)涵蓋了越來(lái)越多不同的屏幕尺寸，創(chuàng)建多個(gè)屏幕尺寸和分辨率skeuomorphic設(shè)計(jì)既繁瑣又費(fèi)時(shí)漓拾，而扁平化的設(shè)計(jì)基本可以保證設(shè)計(jì)在所有的屏幕尺寸上它會(huì)很好看阁最。所以，未來(lái)扁平化設(shè)計(jì)骇两，尤其是移動(dòng)端的扁平化設(shè)計(jì)必將更受歡迎速种，每位設(shè)計(jì)師都要引起重視。
