失蹤人口暫時(shí)回歸~  今天教一個(gè)如何跟著蘋果爸爸走，設(shè)計(jì)出2017最流行最省事還最有B格的UI風(fēng)格，這就是：“大白風(fēng)格”（名字瞎起的，大家有沒有想起那個(gè)又胖又可愛的大白機(jī)器人呢）快來跟著我學(xué)習(xí)如何設(shè)計(jì)這種風(fēng)格的技巧吧 (*^__^*)）

上面這幾個(gè)圖分別是蘋果應(yīng)用商店和Airbnb APP的部分UI界面截圖，看完后大家注意到了共同點(diǎn)沒有？沒錯(cuò)，他們統(tǒng)一的特點(diǎn)就是文字大，留白多，看著很舒服

下面再放幾個(gè)用了大白風(fēng)格設(shè)計(jì)的APP：

這就是本教程要分享給大家的最近今年最流行的：“大白風(fēng)格”。相信大家早就見到過類似這些風(fēng)格的APP了，但你們真的嘗試設(shè)計(jì)過嗎？

下面打開PS來隨著我開始設(shè)計(jì)吧，首先拿鄙人最近的一個(gè)羞羞案例來做示范（因?yàn)槭鞘纠?，我把界面風(fēng)格設(shè)計(jì)的更簡單了些）：

第一要素：大字號(hào)

大家PS新建個(gè)750*1334寬高的標(biāo)準(zhǔn)iPhone6分辨率畫布，然后輸入標(biāo)題文字，設(shè)字號(hào)：90；字體：平方 粗體；左間距50px；頂部間距100px;

（注意這里的字體要用平方粗體，直接加粗完事的話從態(tài)度和細(xì)節(jié)上就已經(jīng)OUT了，這可能也是為什么你臨摹別人作品，最后卻總沒原版好看的原因）

第二要素：大留白（可以理解成大間距）

大家可以參考我截圖中的間距來設(shè)置，文末我也傳了含iPhne X模板的PSD給大家下載（我一般常用的尺寸有：左右間距50；上下間距最少20；其它的話一般是10的倍數(shù)，絕不要出現(xiàn)11，13這些奇數(shù)數(shù)值）

足夠的留白能使頁面看起來更加的舒服，更佳的干凈清爽。但自己心理一定要有套各情況下的留白間距尺寸規(guī)范，否則一套APP幾十個(gè)頁面沒有規(guī)范會(huì)越設(shè)計(jì)越困難。

第三要素：大配圖

新建一個(gè)寬650，高390的矩形，左右間距50。然后網(wǎng)上找個(gè)高質(zhì)量的圖片插入圖片剪切蒙版進(jìn)去。達(dá)啦~ 恭喜你已經(jīng)完成了第一個(gè)大白風(fēng)格的APP界面。

所謂大配圖，其實(shí)就是不吝嗇空間，因?yàn)榇罅舭滓呀?jīng)為你準(zhǔn)備好了空間，勇敢的使用大圖片來作為展示，盡可能的讓圖片成為頁面的主視覺點(diǎn)，你會(huì)發(fā)現(xiàn)界面的檔次和美觀程度又有了進(jìn)一步提升

依此類推，我們可以發(fā)揮創(chuàng)意，運(yùn)用大白風(fēng)格設(shè)計(jì)出更完善更高B格的頁面，并且完美運(yùn)用到實(shí)際項(xiàng)目中，比如下面這些~~

總結(jié)：

本文只是希望帶大家入個(gè)門，掌握大白風(fēng)格的設(shè)計(jì)要素總結(jié)來說就三個(gè)關(guān)鍵詞：大字號(hào)！大留白！大配圖！

（文中圖片部份是網(wǎng)上找的，部份是我自己的，如果善用了您的作品請(qǐng)聯(lián)系刪除( ^_^ )/~~）

另外再說幾個(gè)要素：

1. 用色要慎重，大白風(fēng)格中主色不再是主色，基本是用來畫龍點(diǎn)睛，當(dāng)配色點(diǎn)綴用的（如果您實(shí)力夠，那么任意揮灑也沒問題的）。

2. 為了方便大家理解所以我一直在說大字號(hào)，但別以為是加大加粗就行了。專業(yè)的說法是“重” ，用字體加粗，顏色加深來達(dá)到壓住頁面，撐得住場面的作用。

3.減少或淡化分割線的使用，改用留白來代替TA，現(xiàn)在的手機(jī)屏幕都已經(jīng)很大了，不要舍不得留白。嘗試平常設(shè)計(jì)時(shí)加一兩倍的留白會(huì)使瀏覽效果出奇的好。

下一期分享預(yù)告：UI設(shè)計(jì)師需要注意的微信小程序與原生APP的設(shè)計(jì)區(qū)別 ↓

如果客官覺得本教程還行，看在大白的面子上 歡迎關(guān)注并幫忙推薦哦 ↓

本教程中優(yōu)選APP案例名稱如下：APP Store，Airbnb，OFO，馬蜂窩，VUE，客路旅行，One兔，自如。（文中圖片部份是網(wǎng)上找的，部份是我自己的，如果善用了您的作品請(qǐng)聯(lián)系刪除( ^_^ )/~~）