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

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

以上就是全部?jī)?nèi)容了。扁平化設(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ì)師都要引起重視。