技術(shù)的發(fā)展對審美潮流的影響從未停止。2016 年是 VR（虛擬現(xiàn)實）闷尿、AR（增強現(xiàn)實）的元年：相應(yīng)技術(shù)迅猛發(fā)展，海量軟硬產(chǎn)品空降消費領(lǐng)域劳景。從 Pokemon Go 到支付寶的「掃甘嗵」活動，低頭族們的視線終于開始回歸到三維世界（雖然這個世界依然不那么「現(xiàn)實」）骏庸。相應(yīng)的具被，越來越多的界面設(shè)計作品風(fēng)格開始從抽象感向真實感回潮一姿。
在前面剖析漸變色應(yīng)用的文章中我提到過叮叹，與追求極致現(xiàn)實感的「擬物化」風(fēng)格不同的是蛉顽，如今的設(shè)計作品多數(shù)選擇在扁平化的基礎(chǔ)上增添必要的縱深和層次携冤，是一種折中的半扁平化（Semi Flat）設(shè)計曾棕。這在豐富視覺效果的同時翘地，又避免了過分搶奪用戶對內(nèi)容的注意力子眶。
比大更大
在屏幕界面中要實現(xiàn)沉浸感并不容易臭杰，況且我們已經(jīng)在減少主義（Minimalism）設(shè)計的道路上一去不復(fù)返了（笑）渴杆。
目前最簡單直接的方法磁奖，就是在各種界面中加入大幅的現(xiàn)實圖像比搭。
和曾經(jīng)的純靜態(tài)以及原生態(tài)的圖像時代不同橄务，技術(shù)的發(fā)展給設(shè)計師們的擬真化的表達提供了更多的選擇蜂挪。加入視差化動效的界面棠涮、循環(huán)播放的背景視頻/GIF故爵，都能使現(xiàn)在的界面視覺效果更具強烈的「敘事性」诬垂。
不過很洋，視差滾動 UI 雖然效果華麗喉磁，但這一來對開發(fā)有一定要求协怒，二來用戶在使用時將比操作靜態(tài) UI 耗費更多時間孕暇，尤其在國內(nèi)網(wǎng)絡(luò)狀況經(jīng)常不理想的情況下妖滔，面對視差滾動的網(wǎng)頁真的會讓人沒有脾氣 座舍。這時曲秉，傳統(tǒng)的靜態(tài)大圖+文字+圖形元素的組合就省時省力多了岸浑。
文字的重頭戲
大圖+大字
在 2016 年我們就已看見界面設(shè)計中的字體越來越大、越來越強調(diào)分量感缩焦。雖然這種處理方法早就在平面廣告中爛大街了袁滥，但在界面設(shè)計中题翻，傳達的主體不再只是圖片塑荒。因而標(biāo)題文字可以變得更醒目齿税，或者可將文字根據(jù)義群拆分形成獨立的視覺元素：
由于超大號字體本身已經(jīng)形成了相對獨立的體塊，設(shè)計師可以毫無顧慮地突破傳統(tǒng)排版中使用的網(wǎng)格（Grid）词渤，形成更強烈的視覺沖擊：
大圖+小字
在大字橫行的同時，也不缺使用「全屏大圖+小字號/小字重字體」組合的案例：
這種界面設(shè)計一般滿足以下幾點：
1缺虐、背景圖片經(jīng)過濾鏡或單色背景/色塊處理仆葡，保證小字號文字的可讀性；
2志笼、適合文字較少的界面沿盅，如網(wǎng)頁主頁纫溃、APP 首屏等腰涧；
3、風(fēng)格雅致柔和紊浩。
圖與文的「糾結(jié)」
除了單純地調(diào)整字體本身窖铡，越來越多的設(shè)計師已在界面設(shè)計中借鑒雜志封面與產(chǎn)品廣告的圖文處理手法——將文字與圖片有機結(jié)合起來。
圖中字
1坊谁、穿插法
將標(biāo)題文字部分去除费彼，形成「圖片主體遮擋了文字」的效果。這種方法原本常見于時尚雜志封面、硬件產(chǎn)品的平面廣告等：
在凸顯品牌/產(chǎn)品名稱的同時斜脂，又不遮擋產(chǎn)品的細節(jié)特征拨齐，更形成了產(chǎn)品「跳出」平面的空間感：
除了現(xiàn)成的照片鲸睛，也有很多設(shè)計師在設(shè)計過程中使用原創(chuàng)的手繪與建模作品做背景：
為形成更逼真的效果颠猴，將文字「放置」于圖片中的要點有：
1关划、背景應(yīng)使用細節(jié)豐富、真實感強烈的彩色照片翘瓮、建模效果圖和手繪等贮折；
2、圖片中物體與文字有交集的部分资盅，最好在文字上的被遮擋部分邊緣疊加適當(dāng)?shù)年幱埃?/p>
2调榄、透視法
這種方法源自視頻制作及 AR（增強現(xiàn)實）中的信息標(biāo)注：
這種方法的特點是：
字體形態(tài)跟隨圖片中物體呵扛，隨透視遠近變化每庆，圖文緊密結(jié)合，層次清晰择份、錯落有致扣孟，比單純的文字穿插形成更為強烈的空間感與沉浸感。
字中圖
圖文結(jié)合的另外一種常見方法荣赶，就是將圖片甚至動態(tài)的視頻凤价、顏色紋理也將添加到獨具特色的字體中。這種方法在創(chuàng)造出令人驚嘆的華麗視覺效果的同時拔创，又保持了頁面的整潔度利诺，適用場景非常廣泛。
「字中圖」的組合動靜皆宜剩燥，但有時不可避免地會出現(xiàn)文字輪廓殘缺的情況慢逾。這時只需適當(dāng)調(diào)整背景色彩即可：
標(biāo)題字體推薦
顯然，大圖界面中圖片與字體的品質(zhì)高低在很大程度上決定了整體效果的好壞灭红。一般設(shè)計師都會有自己的圖庫與字體庫侣滩，而我電腦里的中英文字體包大小能有好幾 G，可真正的精品字體其實只占很少的比例变擒，適用于做大標(biāo)題的就更少了君珠。除了用在哪兒都不會錯的 Helvetica 和時尚時尚最時尚的 Didot，我個人特別喜歡的一款字體是 Ailerons：
Ailerons 字體的靈感來源于 1940 年代的飛機模型策添。字形干凈、優(yōu)雅毫缆。它原先是為一款試驗飛機模型的項目設(shè)計而產(chǎn)生的∥ㄖ瘢現(xiàn)在，巴西設(shè)計師 Adilson Gonzales de Oliveira 將這款字體進行再設(shè)計苦丁，分享給設(shè)計師作為個人使用浸颓。
還有 Alternate Gothic：
另外我個人常用的大標(biāo)題字體還有 Impact、Univers Condensed猾愿、Akzidenz Grotesk 等鹦聪，大家應(yīng)該比較熟悉账阻，就不一一展開了蒂秘。
嗯？你說中文字體淘太？能夠免費使用的就那幾樣姻僧，真 · 用不著浪費版面去推薦了。 ? 我將文中推薦的字體打包了一下蒲牧，有需要的可私信問我拿撇贺，僅限個人學(xué)習(xí)使用，商用請自覺聯(lián)系字體公司購買授權(quán)冰抢。
小結(jié)
在脫離開傳統(tǒng)的網(wǎng)格排版法之后松嘶，設(shè)計師們對圖片與文字的處理多數(shù)就依靠只可意會不可言傳的經(jīng)驗與感覺，如果剛剛開始接觸挎扰，很容易一頭霧水不得章法翠订。希望本文能為大家的大圖界面排版提供更清晰的思路，有任何建議歡迎在留言區(qū)與我交流哦遵倦。[手動筆芯]
Linmas, 工業(yè)設(shè)計師尽超，GAFA在讀碩士研究生∥嗵桑「 Learning by doing 」
