在UI设计中巧用留白的8个式例
时间：2023-09-05 07:12:01 | 来源：网站运营
时间：2023-09-05 07:12:01 来源：网站运营
在UI设计中巧用留白的8个式例：良好的UI设计是在界面的各个方面（从组件到页面，从微观到宏观）的周到的留白运用。 如果正确使用空白，则结果是一个和谐，清晰易懂的界面，最重要的是，该界面有效且易于使用。
有关构建自己的UX作品集的更多提示和建议，请关注我的专栏，持续输出干货，或查看文末的文章哦～
1 /遵循邻近法则。
UI中元素之间的空白量指示元素之间如何关联。该
感应定律表明：
- 相关元素应更近地隔开。相反，不相关的元素应进一步隔开。
- 相同“类型”的元素应均匀间隔。
请遵循这些基本规则，以帮助用户轻松组织和感知UI中的逻辑分组。
空白与文本的大小，粗细和颜色紧密配合，以传达界面中元素的层次结构。2 /从大量空白的基线开始。
让你的设计呼吸。改善接口可用性的可靠方法是确保所有元素之间都有足够的空白空间。
此处的表单控件之间的距离太近。此处的表单控件间隔适当，因此在眼睛上更舒适。当然也有例外（请参阅下面的最后一个技巧），但是对于大多数UI来说，拥有大量的空白通常比拥有过少的空白更好。
3 /使用空格将注意力集中在特定的设计元素上。
页面上的信息较少和元素较少可以帮助使内容更清晰，更集中，并吸引人们注意页面上的信息和元素。
空格也可以是一种强调文本的有效方法。 它可以与提高文本大小或更改文本的颜色，大小写或粗细结合使用，甚至可以替代。
̇
̇
̇
这句话被空白包围，就是一个很好的例子。̣
̣
̣
̣
变大或变亮不是吸引人们注意的唯一方法。 考虑到当一切变得更大，更明亮，更重要时，实际上什么都没有。
4 /在设计和实现中使用相同的方法来测量空间。
可以使用以下两种方法之一来测量相邻文本元素之间的间隔。
在相邻的“边界框”之间
大多数UI渲染引擎（例如，网页上的文档对象模型）都是通过这种方法来测量空间的。但是，此方法不是特别精确，因为每个边界框的顶部和底部都存在“无法解决”的多余空间。
测量相邻“边界框”之间的空间。在相邻瓶盖高度之间
此方法更精确，但可能会使实现复杂化。
测量相邻瓶盖高度之间的空间。两种方法都是合理的，但是要权衡取舍。这里重要的是
在设计和实现中都使用相同的空间测量方法。这是为了确保可以将设计准确地转换为代码。
5 /使用间距系统。
间距系统指定在设计中使用的一组可能的间距值。使用间距系统可以帮助给UI带来一致性和和谐感。
在间隔系统中只需要几个值。在此，使用四个不同的间距值，即12、16、32和56。间距系统是为了给空白空间设置调色板所要着色的颜色。 就像调色板一样，间距系统会迫使您从一组受约束的选项中做出UI设计决策。 有了间距系统后，你只需在UI设计过程中考虑系统中的少数间距值。 这使设计迭代更快，更系统。
6 /避免使用看起来过于相似的间距值。
当间距值在数学上不同但在视觉上过于相似时，用户在UI中感知逻辑分组的方式可能会变得模棱两可。对比很重要。如果你要使两个间距值不同，则可以很明显地看出它们实际上是不同的。
每个“动作行”上方和下方的空间过于相似，因此尚不清楚每个动作行应与哪个视频相关联。每个“动作行”下方都有足够的空间，有助于弄清每个视频及其相关动作之间的关系。考虑在间距系统中具有更大的“分布”值，相邻间距值之间在视觉上有明显的差异。
这是一个非线性间隔系统，具有从一个间隔值到下一个间隔值的逐渐增大的增量。7 /随着文本大小的增加，减小行高（即行距）。
在保持相同的比例行高的同时增加文本大小将导致每行文本之间的空白过多。相对于文本大小，标题的比例行高通常应小于正文的行高。
这两行文字彼此相距太远。当使用较小的行高时，两行文本被视为一个视觉组。8 /在信息密集的UI中，除了空白以外，还需要依靠其他技术来传达UI中的元素如何相互关联。
- 在一组相关元素周围添加微妙的填充或边框。
- 使用一条线将垂直密集排列的相邻元素分开。或者，使用点间字符（“·”）分隔水平排列的相邻元素。
- 更改文本的大小，大小写，粗细或颜色，以关联或区分UI元素。
通过减少空格，减小文本大小以及添加细微的水平线来确保相邻行在视觉上彼此不同，从而提高信息密度。使接口的信息更加密集可以帮助提高其使用效率。请记住，信息密集的界面不一定需要变得混乱或不堪重负。
了解空白的一种有效方法（乃至一般而言，通常是UI设计）是创建“主副本”：使用您喜欢的界面从任何应用程序或网站中选择一个或多个屏幕，然后完整地重新创建它， 从头开始。您将深入了解已做出的许多小型设计决策，发现有趣的模式，并了解上述有关空白的技巧如何在精心设计的UI中实际发挥作用。
为什么界面“看起来正确”是有原因的。通过经验和实践，你可以磨练关于如何在设计中应用空白的视觉感和直觉。你的用户将对此表示感谢。
译自 Yuan Qing Lim https://uxdesign.cc/whitespace-in-ui-design-44e332c8e4a
有关构建自己的UX作品集的更多提示和建议，请查看以下文章：- 20+优质作品集范例，艺术设计留学求职必看，收藏的都拿到offer啦
- 16个最佳UI / UX设计，以及可以从中可以学到什么？
- 用户界面设计的一致性原理和标准
- UI设计的四个黄金法则
- 交互设计（用户界面）10大可用性原则详解
- 关于交互设计：学习和就业，边看边整理
- UX中视觉设计的5条原则
- 1篇搞定UI/UX设计中的颜色使用｜实用工具推荐
- 空间内存：为什么它对UX设计很重要
- 6步创建UI设计新趋势：玻璃拟态卡片 Glassmorphic Card
- UX（用户体验）宝典：如何正确设计和传达错误消息
学长学姐成功申请经验：- Pratt全球最高奖Calarts,SAIC, OCAD（专业选择、作品集准备）
- 交互设计ACCD&CCA每年1.3w美元奖学金（专业选择、作品集准备、灵感来源）
最靠谱的作品集制作方案：
在线咨询
