每个设计都从空白画布开始。无论您设计网站还是移动应用程序,您都会从空白页面或屏幕开始,然后添加文本、照片、按钮、菜单等元素。用内容填充整个空间可能很丰满,但这样做可能会使用户界面 (UI) 看起来混乱且没有吸引力。 这是在北京大型网站建设中应该着重注意的事情。
清晰度是良好设计的一个不可或缺的属性,因为 UI 应该清晰,以便所有用户都可以有效地与产品交互。当设计师从上到下将充足的空白融入到所有页面元素中时,就会发生这种情况。
本文将讨论空白的概念,并分享五个实际示例,说明如何使用它来创建整洁的外观。
设计中的留白是什么?
空白,也称为“负空间”,是页面内容和功能元素周围的空白空间。空白的基本作用是通过减少用户立即看到的文本和功能元素的数量来让您的设计呼吸。
尽管被称为“白色”,但这个空间实际上并不需要是白色的。用作内容或功能元素背景的任何类型的空间都可以被视为空白。
用户界面中的空白元素包括:
文本的行间距和字母间距。
按钮等功能元素周围的边距和填充。
留白设计:5个实际例子
现在您知道什么是空白以及如何在设计中识别它,以下是一些有关如何应用空白的实用技巧:
1. 使文本更具可读性
我们在网络和移动应用程序中拥有的大部分信息都是书面形式。因此,必须以一种让用户更轻松地阅读您的内容的方式进行设计。空白可以让您更轻松地跟踪内容和查看页面上的元素,从而增强可读性。
如果您想使用空格使书写内容更具可读性,则需要调整行高(文本行之间的垂直距离)。当行高太紧时,用户阅读文本就会变得困难,因为副本没有足够的喘息空间。同时,行与行之间的空白过多可能会破坏阅读流程,因为文本中的行会断开连接。
那么,如何找到理想的行距呢?建议选择与字体大小成比例的行高。正文的最佳行高是字体大小的 120% 到 145%之间。
适当的行高有助于使文本更具可读性。图片来源尼克·巴比奇。
2. 吸引用户对特定对象的注意力
良好的设计引导用户完成页面上的交互,而空白在这个过程中发挥着重要作用。可以定义空白量和用户注意力之间的关系——我们在特定对象附近添加的空白越多,它受到用户的关注就越多。当物体附近的区域没有任何东西分散注意力时,就会发生这种情况。
使用空白来吸引用户注意力的技术对于促销登陆页面非常有效。使用空白可以将用户的注意力引导到特定的内容或功能元素(例如号召性用语按钮)。
设计人员可以使用简单的五秒测试来衡量页面上哪些元素受到更多用户关注。为此,请查看页面五秒钟,闭上眼睛,然后说出您记得的内容。如果您命名了正确的元素(您希望用户看到的元素),那么您就正确使用了空白。
3. 在页面上创建视觉层次结构
视觉层次结构是关于组织内容以帮助用户轻松处理页面上的信息。当访问者打开新页面时,他们会扫描而不是阅读。良好的视觉层次结构可以显着提高网站的可浏览性。
空白允许设计者创建用户在扫描页面时眼睛会跟随的一般流程。在网页设计网格上放置元素有两种基本方法:对称和不对称。
对称布局可以更美观。由于对称设计具有内在的秩序和稳定性,因此大脑更容易理解信息。
另一方面,不对称是指缺乏对称性。在设计中,不对称常被用来制造视觉张力。设计师通常会创建不对称布局,以引起人们对页面上特定区域或元素的关注。
不对称布局,左侧为白色文本,右侧为灰色背景图像。
重要的是要记住,对称和不对称布局都应该平衡。为了掌握平衡,您需要测量构图中每个元素的视觉重量。视觉权重取决于元素的大小(较小的物体比较大的物体轻)和视觉属性,例如对比度(对比元素比中性元素更吸引注意力)。
5.传达优雅的感觉
空白对您的设计如何被感知有着重大影响——它在品牌定位中发挥着至关重要的作用。与清晰的版式和强大的摄影相结合,充足的空白可以轻松让您的设计看起来奢华。它将您想要推广的产品置于聚光灯下,并向用户发出明确的信号:该产品是页面最关键的部分。
留白从来都不是浪费空间
留白是设计师工具箱中的一个强大工具。如果应用得当,它会成为视觉设计不可或缺的一部分,充当将页面上的不同元素粘合在一起的粘合剂,同时提高界面的可用性。请记住从项目一开始就考虑 UI 空白,并创建一个间距系统来指定一组可能的间距值。随着白色间距系统成为用户体验 (UX) 设计系统的一部分,它会迫使您从预定义值列表中进行选择,这使您能够生成更一致的设计。
这是关于北京大型网站建设中《什么是留白空间设计?》的前篇,请关注下一篇。