留白的力量
发布日期:2021-08-21 10:50:36 浏览次数:1 分类:技术文章

本文共 2158 字,大约阅读时间需要 7 分钟。

hot3.png

留白(或“负空间”)是一个页面元素之间的空白区域。尽管许多人认为这是在浪费宝贵的屏幕空间,但留白是设计中必不可少的元素。

“留白被视为一个活跃的元素,而不是被动的背景”- Jan Tschichold

今天,我将介绍如何在你的设计中使用留白来给人一种干净整洁的感觉。

留白和负空间

 

“负空间”一词源于传统艺术,它用来更精确地捕捉物体的外形。实际上,空间并不需要是有色的,任何与焦点内容无关的空白空间都可以被归类为“留白”。由于与实际的颜色没有真正的联系,术语“留白”和“负空间”可以互换。

                          翻译1.jpg

 ALT:构成至上主义: 飞行的飞机 。-梅尔魏契。“负空间”是组合元素之间的空间。

图形用户界面中的留白

与传统艺术一样,图形用户界面中的对象也需要负空间——文本、按钮、图标和其他对象需要有自己的一席之地。所有好的用户界面都会适当地留白且从上到下融合到所有页面元素中。GUI中的留白元素有:

  • 页边的空白,边框的填充及元素标签外部范围的区域
  • 图形和图像的距离
  • 文本内容中的行间距和字母间距,及列间距

页面上的留白与UI元素占用的空间一样重要,因为即使是留白也可以达到想要的效果,并支持视觉完整性的布局。留白有4个主要的功能:

1.易于理解

留白应该使扫视和阅读内容变得更容易及可预测。

优先考虑易读性和可读性

文本之间的留白很重要,因为它有助于定义页面内容本身。你应该优化你的内容使其易读(你能更好地分辨字母和单词)和可读(你能更好地扫视内容)。

威奇托州立大学的一项实验室研究证实,增加的留白实际上提高了阅读理解能力,尽管它可能会降低阅读速度。正如德米特里·法耶夫所指出的:

正确使用段落之间的留白及左边和右边的页边距可以提高对内容20%的理解力。

在优化文本内容时要注意的两件重要事情是段落间距和行间距(每行之间的留白)。行间距可以极大地提高正文的可读性。一般来说,间距越大,用户在阅读时就会有更好的体验,虽然间距太多会破坏统一,使设计不连贯。当然,你需要在两者之间进行权衡。

翻译2.png

   ALT:左:文本之间靠太近,缺乏留白让读者看起来不适。右:良好的间距有助于可读性。图片来源:苹果

2.明确关系

整个布局是由各小部分组成的。内容关系由周围的留白定义。留白作为一个视觉线索。

相关元素的分组

在观察人们如何组织视觉信息时,完形心理学家建立了近距离法则,该法则认为靠近彼此的对象看起来是相似的。

                       翻译3.jpg

ALT:近距离法则规定,近距离的对象将作为一个“单元”出现,即留白空间作为视觉线索。

在GUI的背景下,这意味着邻近的对象将显示为一个“单位”。例如,在Web表单的上下文中,将标签靠近相关字段放置以创建单个单元是一个好的想法。

翻译4.png

ALT:当标签被放在与他们相关的领域更近的时候,信息就会更加清晰地传达出来。

3.吸引注意

许多应用程序和网页在没有足够的展示空间的情况下,会有太多的元素和信息被夹在一起。

翻译5.png

ALT:凌乱的界面承载给用户太多的信息。尤其是在没有视觉层次的情况下,一个凌乱的页面对用户没有吸引力,也不会让用户想阅读内容。

如果凌乱的界面承载给用户太多的信息,那么减少凌乱会提高用户的理解能力。通过消除干扰,你会迫使用户只关注眼前的东西。

引导用户关注相关内容

距离和注意力之间有一种关系——距离越大,也就越吸引注意力。缺乏其他元素只会使现有元素更加显眼突出。利用留白来吸引你的眼睛进入某些页面元素。由于屏幕上没有其它东西可以吸引人们的注意,所以在某一特定的内容部分上额外的填充可以将用户的注意力转移到该区域。

一个对象周围的留白越多,它就越吸引人的眼睛。

翻译6.png

ALT:正如上图你所看到的,Mailchimp在他们的设计中是留白的主要倡导者。当快速在Mailchimp的主页浏览时,很明显,“免费注册”按钮几乎立即吸引了你的注意。

创建视觉层次结构

当适当地使用留白时,它允许页面创建一般的流程和平衡,这有助于传达设计的意图。

作为设计师,我们有责任创造可用的通讯工具。

留白可以支持整个层次结构。它可以是对称或不对称。对称留白创造了记忆和和谐,而不对称吸引了人们的注意。不对称留白非常适合于将人们的注意力吸引到页面上的某个特定区域或特定元素上。当一个元素使用不对称的留白时,它会比周围的其他元素显眼。

翻译7.png

ALT:当一个元素使用不对称的留白时,它会比周围的其他元素显眼。

4.创造奢侈的感觉

尽管留白通常被认为是提高用户体验的技术,但它也可以用于纯粹的审美目的。设计师使用留白来为高档品牌创造一种优雅的感觉。伴随着印刷和摄影的敏感使用,慷慨的留白在奢侈品市场上随处可见。通过创造一种感觉,即产品的价值比房地产更重要,在一个通用的页面中,留白可以增加高雅和奢侈的感觉。

让产品为自己代言

翻译8.png

ALT:时尚界在他们的营销材料中使用了大量的留白来告诉读者他们是复杂的,高质量的,而且通常是昂贵的。

结论:

留白不是一个空白的画布,它是一个强大的设计工具。留白可能很难掌握:它的应用是艺术和科学。真正了解应该使用多少留白来创建好的布局,需要大量实践。你设计得越多,学到的就会越多。

 

原文作者:

原文链接:

更多设计类相关干货(文章及经验教程),尽在:

转载于:https://my.oschina.net/u/3519468/blog/1486040

转载地址:https://blog.csdn.net/weixin_33716941/article/details/92390206 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:MongoDB查语句
下一篇:10条必知的网页导航菜单设计原则

发表评论

最新留言

做的很好,不错不错
[***.243.131.199]2024年03月04日 19时48分48秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

bootstrap 页面垂直居中_iframe中如何让layer提示框显示在垂直居中的位置 2019-04-21
肺部ct重建_胸片检查容易漏诊肺癌,去年正常今年晚期常发生,体检一定要做CT... 2019-04-21
3dmax如何拆分模型_3D建模大佬如何制作出惊艳四方的游戏建模,看完这篇文章我知道了... 2019-04-21
x86so文件装换成arm64位_64位系统正式发布说明及介绍!! 2019-04-21
for循环中取出最大最小 累加_LeetCode之长度最小的子数组 2019-04-21
如何打开老公人脸识别_【话题】南宁已有小区启用人脸识别门禁,有人点赞有人忧... 2019-04-21
makex机器人程序_机器人教育为相城青少年叩开科学世界大门 2019-04-21
一寸照纯红色底图片_Ella陈嘉桦也是“时髦精”,穿玫红色西装配拼色半身裙,高级洋气... 2019-04-21
米哈游客户端笔试题_Garena校招 游戏客户端开发通关面经 2019-04-21
airpodspro没有弹窗_使用AirPods Pro一天的主观感受 2019-04-21
创建物化视图commit_视图及范式 2019-04-21
函数传参字典_Python新手上车17:函数传递任意多个参数 2019-04-21
去掉数组最后一个元素_【一天一大 lee】在排序数组中查找元素的第一个和最后一个位置 (难度:中等) Day20201201... 2019-04-21
秦九韶算法递推公式_算法讲解之复杂度分析 2019-04-21
添加绝对路径_网站中如何添加绝对路径 2019-04-21
python房价数据分析波士顿代码数据_python数据分析-波士顿房价预测-Go语言中文社区... 2019-04-21
redis线程阻塞原因排插_Redis阻塞原因详解 2019-04-21
labview自动保存报表_基于LabVIEW的Excel报表的自动生成功能 2019-04-21
geotool 导出shp_Java 读取shape文件 2019-04-21
mysql 关联更新_MySQL UPDATE多表关联更新 2019-04-21