大图时代的排版:关于界面背景与标题关系的梳理

技术的发展对审美潮流的影响从未停止。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阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容