好的留白,让你的设计会呼吸!

留白,是在视觉设计中很容易被忽视的元素之一。如果你是一个初学者或者我们口中的“甲方爸爸”,你一定会想法设法的把页面中的最后一点点留白填满。

其实合理的利用留白,是设计理论之一,它能够帮助我们创建视觉焦点。没有留白的设计会导致视觉噪音,好的留白可以让作品更好的“呼吸”。我们把留白分为两种——微空白和宏空白。

微空间是用于描述特定设计中较小的元素(文本、图标)之间的空白,这是组内元素中的空白。调整最小元素之间的空白将有助于它们变得更加明显和有组织,产生视觉和谐感。

在最底端,左图空白是平均的,缺乏视觉重点。右图,你可以看到元素是如何相互关联的。

宏空白是介于主要版面元素(文本、图片等元素)之间的空白,和围绕在设计版式之外的空白空间。宏空白能够给人产生简约的视觉感受,当然,如果使用不当,也会给人空洞无物的感觉。

虽然只是简单的图文排版,背景中的色系渐变与几何形状的使用也起到很好的填充作用,使得留白不是特别突兀,同时,背景中的几何形状有一个向内的收敛作用,也有一定的视觉聚焦作用,让用户的视觉焦点最后落于文字之上。

无论哪种留白,它都应该是用于强调内容,并引起对网页最重要信息的关注。留白可以帮助用户发觉页面中的视觉层次结构、增强可读性,甚至可以创造一个风格的视觉感受。

确定内容的优先级

我们可以试想,如何让一幅画在一面墙的展览中脱颖而出,一是可以让它自身有不一样的风格,区别于其他;第二种办法让它于其他的画有一定的距离,也就是我们这里所说的“留白”。

如果你想让你最重要的内容被给予更多的关注,就必须把它孤立出来,留白可以帮你把用户的转移从一个部分引导到另外一个部分,一切看起来都一样,你就不能挑选出重要的内容。

在这两幅图中,下图中留白更能体现层次感、对比感和秩序感,让人觉得眼睛有重点可看。上图虽然也通过字体的粗细、大小进行对比,但通篇的排列依旧是弱化了这些对比,让人无从下眼。

增强可读性

2004年的一项研究发现,在段落和左右边缘之间适当的使用留白区域将提高20%左右的理解率,用户也将更容易专注于内容和重点,也只有用户读懂了内容才会停留在页面更久的时间。

你一定见过类似这种的宣传单页,满满的内容填斥其中,压的人喘不上气的感觉。

同样的商品页面,加了留白之后,一切变得清晰、易读,图片间隔适当,文本也具有理解所需要的空间。提高用户体验的另外一个方面是页面上所有的可视元素都是可点击的,留白在此也发挥一定的作用。

提高作品的精致感和设计感

留白可以奠定整个设计的基调,极简美学会让用户更加自由的想象出内容的价值,当你的网站在整体设计中使用大量留白,可以使设计显得简洁、奢华,产生品牌感。

极简与黑色的搭配让整个页面更富含张力,增加用户的点击欲望,提高网站的转化率。这也是如今很多淘宝店铺走向极简风格、使用大量留白的原因之一。

By AlterNative

是的,留白多数都会导致设计师与甲方之间意见相左。我们所认为最重要的留白在他们看来是浪费的空间,他们认为可以利用这些留白,安排更多的信息给用户。

我想说的是,首先也是最重要的不要讨厌这些客户,优秀的设计师与特别优秀的设计师之间的区别就是谦虚,我们需要忘记自我,并试图理解客户。

客户通常并不具备优秀设计师的审美与知识,我们的角色除了是设计作品,也应该有解释作品的义务,并不只是一味的展示作品,可以通过PPT、视频、图片来解释你的设计过程。

By FedeCook

如果这样也讲不通,不知道你还记得荷兰设计师在接受优设专访时曾经教我们的小妙招么?做成两稿供客户选择,第一个概念稿会尽力满足客户的理想化需求。第二个方案基于我自己的想法,试着把第二个做的比第一个更加具有吸引力。然后你会安全过稿的。

最后,让我们学会更自由的“呼吸”。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,362评论 25 707
  • 这是转载的文章。文章来源:http://www.woshipm.com/ucd/717840.html 留白不只是...
    时茶阅读 630评论 0 1
  • 全然不顾的人,万劫不复的心。不知十年以后?眉眼如初,人如故。是否? 听说,你很想我。我也很想你啊。我想你,想到心在...
    英雄洛安阅读 344评论 0 0
  • 当光环戴在一个成功者的头上,众人的羡慕,嫉妒,议论和众说纷纭,使得成功者变得那么的不可视人,那么的卑鄙。 我曾一度...
    初夏的解忧杂货铺阅读 3,154评论 0 3