如何在移动设计中使用空白
尽管在桌面上水平和垂直地处理着陆页图像，版式，线条和其他元素是一件相对简单的事情，但在移动平台上做到这一点却比较棘手。平板电脑和手机的屏幕尺寸不同，如果您不遵循现代设计原则和随之而来的图形设计工具，则很容易随意乱扔文字和图像。由于客户的电子商务成功取决于其页面的可显示性，因此很容易使您的业务潜在收入损失。
但是，平板电脑，移动电话和台式机通常要处理 一件事，这通常是理所当然的：空白。通常，所有这些都归结为无意间将空白视为被动的空白画布，需要填充文本，图像，线条等的所有内容元素。
“不过，与只是目标网页的被动组成部分相反，空白可能是目标网页难题中的关键部分。”
但是与空白只是登录页面的被动组成部分相反，空白可能是登录页面难题的关键部分。它可以将页面上的所有内容紧密结合在一起，从而创建一个引人注目的，引人注目的网站，从美学上令人满意并吸引客户的客户，从而创造一种使他们有充分理由回到客户网站的理由。空白在布局中与内容本身一样有效，并且有助于定义正向空间的边界并为布局带来平衡。
在本文中，我们将研究台式机和移动设备上不同类型的空白，并深入研究在移动设备上使用空白的最佳实践。
模板图标
成长第2卷：成为一名全面的Web设计自由职业者
获得免费的《成长第2卷：成为一名全栈Web设计自由职业者》副本，该副本已发送到您的收件箱。
电子邮件
输入您的电子邮件地址
输入您的电子邮件-我们还将向您发送与Shopify相关的营销电子邮件。您可以随时取消订阅。注意：该指南不会发送到基于角色的电子邮件，例如info @，developer @等。
我们的虚拟齿轮正在转动。
请注意，
我们的电子邮件最多可能需要15分钟
才能到达您的收件箱。
设计中的空白是什么？
空的网页是您的主要空白，是其他所有内容和设计元素都聚集在其上的画布：图标，全彩色图像，线条和几何形状以及您的文本。这些元素填满画布后，您将剩下故意留为空白的区域：装订线或小巷（列之间的空白），行高，句子和段落之间的间隔，顶部，底部，左侧和右侧的边距，填充—都是空白。请注意，它们位于设计元素之间或位于单个设计元素之内，例如您选择的印刷字形之间的空间。
用技术术语来说，设计者将空白称为负空间。该技术定义消除了对空白的常见误解：尽管使用了术语，但空白不必是白色的。它可以是黑色，棕色，黄色，红色（您选择的任何颜色），甚至可以满足您为网页增添功能的任何图案，纹理和背景图像。
白色空间设计
Mathieu Levesque的白色负空间。
白色空间设计院长布拉德肖
Dean Bradshaw的黑色负空间。
为什么空白很重要
空白在设计中可满足多种目的。它可以用于：
美学。当您考虑如何设计目标网页以精美地显示在移动屏幕上时，空白至关重要。
有效的沟通。空格是一种重要的工具，可以平衡您在页面上展示许多项目的需求与在考虑有效的视觉交流体验的同时放置内容的需求。
引导眼睛。我们的视觉能力只能如此集中，直到它被太多轰炸我们感官的因素所困扰。空白是使人平静的因素，这是允许读者消化要呈现给他们的东西的秘密。
您可能还会喜欢：关于空白需要了解的一切。
不同类型的空白
如果要通过移动屏幕优化页面的视觉效果，则需要了解空白在与内容元素保持适当平衡方面所起的作用。如果您的读者犹豫不决地继续阅读，却大吃一惊，找到了一个更具视觉吸引力的网站，您将无法出售。您需要了解微观空间或宏空间以及主动或被动空白如何协同工作，以使读者决定继续使用页面还是继续前进。
微小的空白
微小的空白是内容元素之间的小空间：行和段落之间的空间以及网格图像之间的空间，以便分隔菜单链接。微空白会直接影响您内容的可读性，用户的阅读速度和理解力。
宏空白
宏空白是您的大图空白，画布和所有页面内容元素的容器。这是围绕您的设计布局的空间。您可以在网站的右侧和左侧以及内容块之间找到它。
“如果要通过移动屏幕优化页面的视觉效果，则需要了解空白在使内容元素达到适当平衡方面所起的作用。”
大多数设计师会为您提供有关实施宏空白的Google课程。它的标志性主页非常简单，使用户免于分心，因此更容易集中精力放在用户为什么首先出现的地方：进行搜索。在没有任何大块内容的情况下，网页可以轻松，快速地加载-即使在遥远的过去，Internet速度通常令人沮丧地缓慢爬网。
白色空间设计Google
Google臭名昭著的空白使用。
设计师还将空白视为主动或被动：
活动空白：使用空白可以改善页面结构的布局，同时引导用户浏览内容。
被动空格：空格在不引导读者的情况下为版面增添了雅致。
空白设计样本
Slideplayer的“基本网站设计”中的主动和被动空白示例。
移动空白设计的7个最佳做法
诚然，在移动显示器上挤入太多内容的需要限制了您可以使用的空白空间。由于无法使用大量空白空间，因此，智能，平衡的方法是唯一的方法。使用空白，同时牢记一些最佳实践。
1.手指设计
为优化移动观看而设计时，首先要考虑的是将点击目标限制为至少30到40像素，这是MIT触摸实验室（PDF）进行的一项研究，这是触摸目标尺寸的理想范围。除了尺寸，当然，您还需要在触摸目标之间添加空白，以便用户能够达到他们想要的目标。
2.技术：分配≤15个用户关注点
当您被迫在页面上推送更多内容时，设计师Paul Boag建议您为自己分配15个用户关注点。让您添加到步伐成本中的每个项目1点。
如果一个屏幕比另一个屏幕更重要，则需要为其分配其他点以使其突出。由于只有有限的点可供使用，很明显您不能将空白排除在等式之外。
3.创造性地使用空白
您可以考虑使用对比鲜明的颜色，形状，字体大小和不对称的负空间来为布局提供更多功能。作为一个活跃的设计元素，空白空间与周围元素的感知息息相关。
4.重新排列导航菜单空白设计响应
在处理响应式设计时，您将需要为空白设置不同的断点，以便为客户提供持续的无缝体验。
如果您的网站支持多个链接，则别无选择，只能使用三栏式汉堡包图标选择隐藏菜单。不喜欢汉堡包图标，并觉得看不见了什么？然后转到标签栏，就像Facebook一样，放弃汉堡包，使用标签。请记住，Facebook的内容比那里的许多网站都要多，因此您很可能也不会因此而迷失。
“移到较小的屏幕空间时，您绝不能与吸引人的设计要素（易读性，简单性，设计基调和品牌）保持联系。”
如果您决定坚持使用汉堡包图标，则当浏览器到达某个断点时，您会注意到它弹出来，汉堡包会丢失您现在丢失的链接。当汉堡包接管时，请注意每个链接之间的空白：这是间隔链接的好时机，因此它们非常适合在移动设备上轻按手指。
如果您愿意的话，还可以在将其放置在汉堡包图标上之前重新排列导航菜单。例如，您可以定义一个断点，然后将导航面板从上到下重新配置。
您的导航甚至可能在特定断点下返回带有汉堡菜单的顶部。这是一种具有挑战性的方法，但会赢得您的客户的好评。
如果您的导航足够小，则甚至不需要三栏图标。
5.考虑垂直而不是水平
桌面为您提供了选择垂直和水平元素的便利。但是，移动设备的局限性使它们陷入了困境，而不是跨页面。同样，在这里，您需要勤奋地使用空格来拆分多个内容元素，即使它们相互之间也是如此。始终追求简洁，清晰，让读者呼吸。
同样要记住，如果您在网页设计中遵循良好的白色内务管理，则Shopify的响应式移动工具将这些呼吸空间平稳地过渡到您的移动界面，如这些令人惊叹的Shopify主题所示。
6.考虑响应式排版
始终在标题和正文段落之间找到适当的平衡，这样它们就不会看起来像放错了科学怪人的正文部分。使用一些自适应的排版帮助自己，并注意行高，字距，字距，文本块之间的边距，甚至字体的颜色。
您可能没有台式机版本的空白，但是在处理最适合移动设备的排版时，可以使用不同的组合，因此空白仍然是使读者保持专注于页面的积极因素。
7.移动响应图像？
诚然，这是一个要解决的难题，但是，如果您可以设法使自己的图像缩放以适应更好的垂直查看，并留有合理的空白空间，那么这可能是您成功实现电子商务的圣杯。您甚至可以决定在不牺牲读者对您的网站的期望的情况下，可以完全删除设计元素的哪些部分。
您可能还会喜欢：黑暗面的力量：黑暗用户界面。
空格可移动清晰
空白是网站设计不可或缺的一部分，尤其是在为移动受众群体设计时。转移到较小的屏幕空间时，您绝不能与引人注目的设计（易读，简单，设计基调和品牌）失去联系。如果您不用担心自己提供的服务，那么接下来的事情应该会吸引满意的付费客户，他们会毫不犹豫地返回到您的客户的网站来获取更多。
