技術的發展對審美潮流的影響從未停止。2016 年是 VR(虛擬現實)、AR(增強現實)的元年:相應技術迅猛發展,海量軟硬產品空降消費領域。從 Pokemon Go 到支付寶的「掃福」活動,低頭族們的視線終于開始回歸到三維世界(雖然這個世界依然不那么「現實」)。相應的,越來越多的界面設計作品風格開始從抽象感向真實感回潮。
在前面剖析漸變色應用的文章中我提到過,與追求極致現實感的「擬物化」風格不同的是,如今的設計作品多數選擇在扁平化的基礎上增添必要的縱深和層次,是一種折中的半扁平化(Semi Flat)設計。這在豐富視覺效果的同時,又避免了過分搶奪用戶對內容的注意力。
比大更大
在屏幕界面中要實現沉浸感并不容易,況且我們已經在減少主義(Minimalism)設計的道路上一去不復返了(笑)。
目前最簡單直接的方法,就是在各種界面中加入大幅的現實圖像。
和曾經的純靜態以及原生態的圖像時代不同,技術的發展給設計師們的擬真化的表達提供了更多的選擇。加入視差化動效的界面、循環播放的背景視頻/GIF,都能使現在的界面視覺效果更具強烈的「敘事性」。
不過,視差滾動 UI 雖然效果華麗,但這一來對開發有一定要求,二來用戶在使用時將比操作靜態 UI 耗費更多時間,尤其在國內網絡狀況經常不理想的情況下,面對視差滾動的網頁真的會讓人沒有脾氣 。這時,傳統的靜態大圖+文字+圖形元素的組合就省時省力多了。
文字的重頭戲
大圖+大字
在 2016 年我們就已看見界面設計中的字體越來越大、越來越強調分量感。雖然這種處理方法早就在平面廣告中爛大街了,但在界面設計中,傳達的主體不再只是圖片。因而標題文字可以變得更醒目,或者可將文字根據義群拆分形成獨立的視覺元素:
由于超大號字體本身已經形成了相對獨立的體塊,設計師可以毫無顧慮地突破傳統排版中使用的網格(Grid),形成更強烈的視覺沖擊:
大圖+小字
在大字橫行的同時,也不缺使用「全屏大圖+小字號/小字重字體」組合的案例:
這種界面設計一般滿足以下幾點:
1、背景圖片經過濾鏡或單色背景/色塊處理,保證小字號文字的可讀性;
2、適合文字較少的界面,如網頁主頁、APP 首屏等;
3、風格雅致柔和。
圖與文的「糾結」
除了單純地調整字體本身,越來越多的設計師已在界面設計中借鑒雜志封面與產品廣告的圖文處理手法——將文字與圖片有機結合起來。
圖中字
1、穿插法
將標題文字部分去除,形成「圖片主體遮擋了文字」的效果。這種方法原本常見于時尚雜志封面、硬件產品的平面廣告等:
在凸顯品牌/產品名稱的同時,又不遮擋產品的細節特征,更形成了產品「跳出」平面的空間感:
除了現成的照片,也有很多設計師在設計過程中使用原創的手繪與建模作品做背景:
為形成更逼真的效果,將文字「放置」于圖片中的要點有:
1、背景應使用細節豐富、真實感強烈的彩色照片、建模效果圖和手繪等;
2、圖片中物體與文字有交集的部分,最好在文字上的被遮擋部分邊緣疊加適當的陰影:
2、透視法
這種方法源自視頻制作及 AR(增強現實)中的信息標注:
這種方法的特點是:
字體形態跟隨圖片中物體,隨透視遠近變化,圖文緊密結合,層次清晰、錯落有致,比單純的文字穿插形成更為強烈的空間感與沉浸感。
字中圖
圖文結合的另外一種常見方法,就是將圖片甚至動態的視頻、顏色紋理也將添加到獨具特色的字體中。這種方法在創造出令人驚嘆的華麗視覺效果的同時,又保持了頁面的整潔度,適用場景非常廣泛。
「字中圖」的組合動靜皆宜,但有時不可避免地會出現文字輪廓殘缺的情況。這時只需適當調整背景色彩即可:
標題字體推薦
顯然,大圖界面中圖片與字體的品質高低在很大程度上決定了整體效果的好壞。一般設計師都會有自己的圖庫與字體庫,而我電腦里的中英文字體包大小能有好幾 G,可真正的精品字體其實只占很少的比例,適用于做大標題的就更少了。除了用在哪兒都不會錯的 Helvetica 和時尚時尚最時尚的 Didot,我個人特別喜歡的一款字體是 Ailerons:
Ailerons 字體的靈感來源于 1940 年代的飛機模型。字形干凈、優雅。它原先是為一款試驗飛機模型的項目設計而產生的。現在,巴西設計師 Adilson Gonzales de Oliveira 將這款字體進行再設計,分享給設計師作為個人使用。
還有 Alternate Gothic:
另外我個人常用的大標題字體還有 Impact、Univers Condensed、Akzidenz Grotesk 等,大家應該比較熟悉,就不一一展開了。
嗯?你說中文字體?能夠免費使用的就那幾樣,真 · 用不著浪費版面去推薦了。 ? 我將文中推薦的字體打包了一下,有需要的可私信問我拿,僅限個人學習使用,商用請自覺聯系字體公司購買授權。
小結
在脫離開傳統的網格排版法之后,設計師們對圖片與文字的處理多數就依靠只可意會不可言傳的經驗與感覺,如果剛剛開始接觸,很容易一頭霧水不得章法。希望本文能為大家的大圖界面排版提供更清晰的思路,有任何建議歡迎在留言區與我交流哦。[手動筆芯]
Linmas, 工業設計師,GAFA在讀碩士研究生。「 Learning by doing 」