【翻译】网页设计中如何科学留白?

How to Effectively Use Whitespace in Web Design

April 30, 2015

byTomer Lerner

你是不是经常盯着你刚刚完成的设计,想着“好像缺了点儿啥”?再具体点儿,你是不是曾得到过这个设计“太空了”或者“太满了”的结论?对我们设计师来说,这些场景总能轻松的让我们在设计中花去大量的时间。

这确实也没什么意外的。毕竟,我们工作的最本质工作都围绕着如何创造性地“填补空白”。然而,尽管这是我们工作的核心部分,它也是设计中的重要方面之一。如何有效地利用空白?

Effective Use of Whitespace:Webydo.com.

空白真的“空”吗?

你是不是曾经认为空白是“设计之间的空间”?这是个完全错误的观点,尽管这是面对我们设计中一些荒凉之处时,我们普遍存有的一个想法。空白区域并不只是设计元素之间的填充,人家自己也是个很重要的设计元素呢,好嘛!

空白就像砖块之间的砂浆,或者彩色玻璃马赛克拼贴中的粘合剂一样。尽管我们的眼睛被训练得善于欣赏内容——砖块和彩色玻璃——但是真正承载它们并帮助形成整体设计流的却是这些空白。

Effective Use of Whitespace:Beatbox Academy.

就像马赛克拼贴没有胶水一样,我们的设计如果没有空白就是一堆彩色垃圾。一旦你认识到了这些你设计中所谓的“空白元素”的重要性,那时你就能更好的将空白的使用能力提升到极致。

聚焦

现在我们已经确立了留白的重要性,那么我们该如何使用它?

我们先来做个小练习。在你最新换的浏览器里打开一个新的标签页并让它转到Google.com。你第一眼看见了什么?我敢打赌一定是色彩鲜艳的谷歌标识,对吧?这个标识在哪儿?它当然没有在你视线自然开始的地方——窗口顶端。那么,你的注意力是怎么被吸引过去的呢?

Effective Use of Whitespace: Google.

猜对了——留白。谷歌用大量的空白区域自然地把你的焦点调整到了页面中央,那个它极简化的设计主体部分所在。留白是引导用户视线的最基本的方式之一。

我们可以用这一设计工具在布局中创造自然的焦点区域。用户的注意力和焦点被吸引到了这个区域,然后我们就可以把重要内容放在里面来更高效地传达我们的信息了。

组织

与能够调动用户焦点一样,留白还为设计师们提供了一种简单的方式,使不同的设计元素更有条理。和我们用空白把整片的文字分割成更容易理解的段落一样,它在为我们的设计构建清晰的组织时也极为有效。

Effective Use of Whitespace:Bagigia.

利用留白来组织内容是,一个有用的小技巧就是要统一。采用这种方法时,考虑好内容分组的问题很有用。尽量对页边距、分区、文字和图片等元素使用一套统一的空白尺寸。

利用留白进行组织的一个好处就是,它既方便调整,又会对设计有深远的影响。所以,尽情尝试吧!

强调

还是因为在引导用户视线上的显著效果,留白可以使你设计中的一些元素更突出。在我们先前讨论组织中的统一性主题的基础上,巧妙地打破这种连贯性可以迅速引起用户的注意。

Effective Use of Whitespace:Cultured Code.

当你在设计时创建了一套稳定的空白使用原则时,用户的眼睛立刻就会习惯这个规则。在用户继续浏览你的设计时,这种连贯性上的一点点打断,即使非常微小,也会马上凸显出来。

有个很棒的例子——你可以试一下,很容易——非常细微地调整一下你想强调的标题的字间距。掌握了这个技能,试着在你的设计中的区域间用更细微的变化应用它。

不一定是留“白”

上面的技巧全都围绕着引导用户的视线。毕竟,这是留白最擅长做的。也就是说,尽管我们说“留白”,但它不一定非得是“白色”的。没有什么不成文的设计法则规定你设计中的主要元素之间的空间是什么颜色。

Effective Use of Whitespace:Huge Inc.

一个可以在实践中看到的例子就是单页设计趋势。当你被限制于只能用一个页面承载内容时,有效的空白利用可以将吸引焦点、清晰组织和强调主体发挥到最大限度。

大块的内容通常在这些情境中被设计成贯穿、流通的。在这些情况下,只要把这些内容块中的颜色换掉,就会在帮助我们维持上面所说的设计中三个方面的同时,也为在有限空间内的内容设计提供了突破点。

读了这些方法,希望你能用一个新鲜的视角看待你的设计中的空白。

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

推荐阅读更多精彩内容