什么是设计中的白色空间?
您的空白网页是您的主要空白区域,即所有其他内容和设计元素汇集在一起的画布:图标,全彩色图像,线条和几何形状以及文本。一旦这些元素填满你的画布,你将留下有意留空的区域:阴沟或胡同(列之间的空白区域),线高,句子和段落之间的空格,顶部,底部,左右边距,填充 – 都是白色空间。请注意,它们位于设计元素之间或单个设计元素之间,例如您选择的排版字形之间的空格。
在技术方面,设计师将白色空间称为负空间。这个技术定义消除了对白色空间的常见误解:尽管有这个术语,但白色空间不一定是白色的。它可以是黑色,棕色,黄色,红色 – 您选择的任何颜色 – 甚至任何图案或纹理和背景图像,满足您为网页添加电源的要求。
为什么白色空间很重要
白色空间在设计中有多种用途。它可以用于:
- 美学。当您考虑如何设计着陆页以在移动屏幕上精美显示时,空白区域至关重要。
- 有效的沟通。空白区域是一个重要的工具,可以平衡您在页面上展示许多项目的需求,以及为内容提供有效的视觉交流体验的需求。
- 引导眼睛。我们的视觉能力只能集中在那么多,直到它被轰击我们的感官的太多元素拉紧。白色空间是平静因素,是允许读者消化您想要呈现给他们的东西的秘诀。
不同类型的白色空间
如果您想通过移动屏幕优化页面的视觉效果,您需要了解空白区域在与内容元素达成恰当平衡时所起的作用。如果您的读者对于阅读并犹豫不决,寻找更具视觉吸引力的网站,您就无法出售。您需要了解微观或宏观空间以及主动或被动白色空间如何协同工作,以使您的读者决定坚持使用您的页面或继续前进。
微白空间
微白空间是内容元素之间的小空间:线条和段落之间的空间以及网格图像之间的空间,以便分离菜单链接。微白空间直接影响您的内容易读性,用户的阅读速度和理解力。
宏白色空间
宏白色空间是您的大图片白色空间,所有页面内容元素的画布和容器。这是您的设计布局周围的空间。您可以在网站的右侧和左侧以及内容块之间找到它。
“如果您想通过移动屏幕优化页面的视觉效果,您需要了解空白区域在与内容元素达成恰当平衡方面所起的作用。”
大多数设计师都会向您指出Google在实现宏空白空间方面的教训。它标志性的主页非常简单,消除了用户的注意力,因此更容易关注用户为什么在那里:做一些搜索。由于丢失了任何大块内容,网页可以轻松快速地加载 – 即使在远程过去,当互联网速度通常令人沮丧地缓慢爬行时。
设计师还将白色空间视为主动或被动:
- 活动空白区:应用空白区域以改善页面结构的布局,同时引导用户浏览内容。
- 被动白色空间:白色空间为布局增添了优雅,而不会引导读者。
7移动白色空间设计的最佳实践
不可否认,需要在移动显示屏上挤入如此多的内容,这限制了您可以使用的空白区域。由于大量的空白空间不受影响,因此智能,平衡的方法是唯一的方法。使用白色空间,同时牢记该领域的一些最佳实践。
1.手指设计
在设计优化移动观看时,您首先需要考虑的是将点击目标限制在最小30到40像素,这是MIT Touch Lab(PDF)研究的触摸目标尺寸的理想范围。当然,除了大小之外,您还需要在触摸目标之间添加空白区域,以便用户达到他们所要达到的目标。
2.技术性:分配≤15分的用户注意力
当您感到有兴趣在页面上推送更多内容时,设计师Paul Boag建议为自己分配15点用户注意力。让你添加到步伐的每个项目花费1点。
如果一个屏幕比另一个屏幕更重要,您需要为其分配额外的点以使其脱颖而出。只有有限的点可供您使用,很明显您不能将空白推出等式。
3.创造性地使用空白区域
您可以考虑使用对比色,形状,字体大小和不对称负空间来为您的布局提供更多动力。作为一个活跃的设计元素,白色空间与周围元素的感知相关。
4.重新排列导航菜单
当您处理响应式设计时,您需要为您的空白区域设置不同的断点,以便为您的客户提供持续无缝的体验。
如果您的网站偏好多个链接,您别无选择,只能使用三栏汉堡图标查看隐藏菜单。不喜欢汉堡图标,觉得看不见的东西不在乎?然后去找一个标签栏,就像Facebook一样,摆脱了汉堡包而偏向于标签。请记住,Facebook的内容比许多网站更多,所以你很可能也不会失去那个。