大圖時代的排版:關于界面背景與標題關系的梳理

技術的發展對審美潮流的影響從未停止。2016 年是 VR(虛擬現實)、AR(增強現實)的元年:相應技術迅猛發展,海量軟硬產品空降消費領域。從 Pokemon Go 到支付寶的「掃福」活動,低頭族們的視線終于開始回歸到三維世界(雖然這個世界依然不那么「現實」)。相應的,越來越多的界面設計作品風格開始從抽象感向真實感回潮。

在前面剖析漸變色應用的文章中我提到過,與追求極致現實感的「擬物化」風格不同的是,如今的設計作品多數選擇在扁平化的基礎上增添必要的縱深和層次,是一種折中的半扁平化(Semi Flat)設計。這在豐富視覺效果的同時,又避免了過分搶奪用戶對內容的注意力。


比大更大

在屏幕界面中要實現沉浸感并不容易,況且我們已經在減少主義(Minimalism)設計的道路上一去不復返了(笑)。

目前最簡單直接的方法,就是在各種界面中加入大幅的現實圖像。

大圖內容為主體的新 Instagram 界面設計,by Google Search
Inty
Nike
Victoryjournal


和曾經的純靜態以及原生態的圖像時代不同,技術的發展給設計師們的擬真化的表達提供了更多的選擇。加入視差化動效的界面、循環播放的背景視頻/GIF,都能使現在的界面視覺效果更具強烈的「敘事性」。

視差化動效界面,by Google Search

不過,視差滾動 UI 雖然效果華麗,但這一來對開發有一定要求,二來用戶在使用時將比操作靜態 UI 耗費更多時間,尤其在國內網絡狀況經常不理想的情況下,面對視差滾動的網頁真的會讓人沒有脾氣 。這時,傳統的靜態大圖+文字+圖形元素的組合就省時省力多了。


文字的重頭戲

大圖+大字

在 2016 年我們就已看見界面設計中的字體越來越大、越來越強調分量感。雖然這種處理方法早就在平面廣告中爛大街了,但在界面設計中,傳達的主體不再只是圖片。因而標題文字可以變得更醒目,或者可將文字根據義群拆分形成獨立的視覺元素:

Tignes
Red Collar Digital
Canalsat

由于超大號字體本身已經形成了相對獨立的體塊,設計師可以毫無顧慮地突破傳統排版中使用的網格(Grid),形成更強烈的視覺沖擊:

Epicurrence,自由網格 UI

大圖+小字

在大字橫行的同時,也不缺使用「全屏大圖+小字號/小字重字體」組合的案例:

Campos Coffee


Google Search

這種界面設計一般滿足以下幾點:

1、背景圖片經過濾鏡或單色背景/色塊處理,保證小字號文字的可讀性;

2、適合文字較少的界面,如網頁主頁、APP 首屏等;

3、風格雅致柔和。

小字號標題添加色塊背景前后對比


圖與文的「糾結」

除了單純地調整字體本身,越來越多的設計師已在界面設計中借鑒雜志封面與產品廣告的圖文處理手法——將文字與圖片有機結合起來。

圖中字

1、穿插法

將標題文字部分去除,形成「圖片主體遮擋了文字」的效果。這種方法原本常見于時尚雜志封面、硬件產品的平面廣告等:

LandRover
SONOS
Fendi
Apple

在凸顯品牌/產品名稱的同時,又不遮擋產品的細節特征,更形成了產品「跳出」平面的空間感:

文字被產品「遮擋」與普通排版的效果對比

除了現成的照片,也有很多設計師在設計過程中使用原創的手繪與建模作品做背景:

Chatchaok Wong
Chatchanok Wongvachara

為形成更逼真的效果,將文字「放置」于圖片中的要點有:

1、背景應使用細節豐富、真實感強烈的彩色照片、建模效果圖和手繪等;

2、圖片中物體與文字有交集的部分,最好在文字上的被遮擋部分邊緣疊加適當的陰影:

在文字上添加陰影前后效果對比

2、透視法

這種方法源自視頻制作及 AR(增強現實)中的信息標注:

AR 界面,by Google Search
NYT 的《中國如何改變互聯網》視頻畫面

這種方法的特點是:

字體形態跟隨圖片中物體,隨透視遠近變化,圖文緊密結合,層次清晰、錯落有致,比單純的文字穿插形成更為強烈的空間感與沉浸感。

Tignes

字中圖

圖文結合的另外一種常見方法,就是將圖片甚至動態的視頻、顏色紋理也將添加到獨具特色的字體中。這種方法在創造出令人驚嘆的華麗視覺效果的同時,又保持了頁面的整潔度,適用場景非常廣泛。

Behance
Vadim Sherbakov

ifly50.com

「字中圖」的組合動靜皆宜,但有時不可避免地會出現文字輪廓殘缺的情況。這時只需適當調整背景色彩即可:

背景色彩調整前后對比


標題字體推薦

顯然,大圖界面中圖片與字體的品質高低在很大程度上決定了整體效果的好壞。一般設計師都會有自己的圖庫與字體庫,而我電腦里的中英文字體包大小能有好幾 G,可真正的精品字體其實只占很少的比例,適用于做大標題的就更少了。除了用在哪兒都不會錯的 Helvetica 和時尚時尚最時尚的 Didot,我個人特別喜歡的一款字體是 Ailerons:

Ailerons,Picture by Joao de Almeida

Ailerons 字體的靈感來源于 1940 年代的飛機模型。字形干凈、優雅。它原先是為一款試驗飛機模型的項目設計而產生的。現在,巴西設計師 Adilson Gonzales de Oliveira 將這款字體進行再設計,分享給設計師作為個人使用。

還有 Alternate Gothic:

Alternate Gothic,Picture by Epicurrence


另外我個人常用的大標題字體還有 Impact、Univers Condensed、Akzidenz Grotesk 等,大家應該比較熟悉,就不一一展開了。

嗯?你說中文字體?能夠免費使用的就那幾樣,真 · 用不著浪費版面去推薦了。 ? 我將文中推薦的字體打包了一下,有需要的可私信問我拿,僅限個人學習使用,商用請自覺聯系字體公司購買授權


小結

在脫離開傳統的網格排版法之后,設計師們對圖片與文字的處理多數就依靠只可意會不可言傳的經驗與感覺,如果剛剛開始接觸,很容易一頭霧水不得章法。希望本文能為大家的大圖界面排版提供更清晰的思路,有任何建議歡迎在留言區與我交流哦。[手動筆芯]

Linmas, 工業設計師,GAFA在讀碩士研究生。「 Learning by doing 」

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容