留白的力量

留白(也叫负形)是指页面内元素的空间。尽管有人认为留白是在浪费屏幕,但是留白在设计中是非常重要的。

留白是积极元素,而不是反面教材。

今天我们来讨论下如何使用留白让你的设计变得干净整洁。

留白和负形空间

“负形”这种说法是源于传统艺术,通常用于准确的掌握物体的形状。实际上,空间不一定非得是白色的,任何形式的留白都不如分层留白。由于留白和负形跟实际的白色不太相关,所以可以相互替换。

在图形用户界面的留白

正如传统的设计,在图形用户界面中也需要负形,文本、按钮、logo或者其他物体都需要呼吸空间。所有优秀的人机交互界面从头到底贯穿整个界面的元素间会保留一个适当的留白。在GUI中可以被当作留白的元素:

a.外间距(margins)、内间(padding )和水沟(gutters)
b.图形和图像之间的距离
c.文本内容的字间距和行间距

留白和其他元素所占的空间一样重要,即使是空间也可以达到某些目的并且支持整个视觉布局。留白主要有四个目的:

1.提高理解

留白应该让阅读和浏览内容变得更加简单,更加可以预知。

优先考清晰度和可读性

文本间的空间非常重要,有助于定义文本内容。优化内容的清晰度(是否能分辨出文字和单词)和可读性(是否能浏览内容)。

由Wichita State University的实验研究证明增大空间实际会提高对阅读的理解,尽管这可能会降低阅读速度。正如Dmitry Fadeyev指出:

正确的的使用段落的留白以及左右的间距能够将辨识度提高20%

当优化文本内容时,脑袋里记住两件重要的事情,段落间距和行间距。行间距可以很大程度提高文本的易读性。通常,空间值越大,用户的阅读体验就越好。尽管,太大的空间会破坏统一性,使设计不相关。再强调下,最好能找到平衡点。

2.明确关系

整个布局是部分布局的综合。文本之间的关系由周围的留白决定的。留白实际上是视觉层次。

组织相关的元素

当你观察用户如何组织视觉信息,格式塔心理学建立接近性原则,并指出接近的物体具有相似性。

在文本的GUI里意味着接近的物体是一个整体。比如,在网页形式的文本中,将标签放在相关的文本框里从而构建单独的单元。

3.吸引注意力

许多应用和网页都将太多的元素和信息一起塞进去,然而并没有足够的呼吸空间。

过于杂乱的界面会让用户接触到过多的信息,降低杂乱干会提高用户的理解:避免干扰,让你的用户只关注于那些立即可见的信息。

引导用户到相关内容

在距离和注意之间的关系:更长的距离更聚焦的注意力。减少部分元素会突出一些元素。使用留白突出重点,将用户的视线聚焦在页面内的某些元素。围绕在某些特定内容的额外的内间距聚焦用户的注意力,因为在这周围没有什么吸引用户注意力。

物体周围留白越多,视线越容易聚焦在物体上。

创建视线

如果留白使用合适的话,会让页面产生视觉流和平衡,同时有助于交流设计意图。

作为设计师,我们有责任创建可用的交流手段

留白可以产生全局的视线,既要对称又要不对称。对称便于记忆和统一,不对称会产生视觉吸引力。对称将注意力吸引到页面某些区域,或者页面中某个特殊元素。元素使用对称空间,会在周围的元素中跳脱出来。

4.打造奢侈的感觉

尽管留白被认为是提高用户体验的技巧,当然也可以用于美学目的。设计师使用留白为高端品牌创建优雅的感觉。同时使用用户文本和图片的敏感度,大量的留白在一些奢侈品牌中常见。留白能够增加普通页面的老练和奢侈感觉,从而创建产品比实际的更重要的感觉。

结论

留白不是空白的画板,他是有力的设计工具。留白可能很难掌握:留白的应用既是艺术也是科学。讲真,合理使用留白可以创建良好的布局需要练习。你设计越多,你会学得越多。


原文链接

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

推荐阅读更多精彩内容

  • 作者最大原文链接 如果你常听到产品设计师和工程师之间的设计QA会话,你可能会听到产品设计师的看法如下: “你可以在...
    Doria2016阅读 1,654评论 0 16
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 掌握空白的力量 Mastering the Power of Nothing 如何在界面设计中使用空 空白是界面设...
    Woody_Wu阅读 628评论 0 2
  • 当下的今天如果你觉得你活得很幸福,那是因为有许多人在你背后默默的付出!如果你觉得你活得很痛苦,那是你的要求和标准过...
    王语星阅读 110评论 0 1
  • 给血友病吧友带去诚挚的问候,昨夜凌晨醒来,百度了一下试题君,除了右边出现些沙子,其他一切链接还是正常的,才敢放心睡...
    冯恩君阅读 218评论 0 0