快速提升 UI 设计效果的 6 个小技巧你学会了吗？文章来源：优设

你学会了吗？
文章来源：优设
ID：uisdcer
作者：优设
编辑：卝生
编者按：在进行UI设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自MarkAndrew的文章梳理了6个实用性很强的UI效果提升小技巧，是系列文章的八篇，原文最早发布于marcandrew.me 。
在创建实用、可访问性良好且视觉效果颇为出彩的UI界面的时候，我们大多只需要进行有限度的微调，即可达到颇为不错的效果。在之前，我已经撰写了很多实用的UI&UX优化小贴士（看完文章在文末获取），这篇文章继续增加6条实用的建议，一起来看看吧！
01
留白应被视为最常见/实用的设计元素

文章图片
不要把你的整个页面都用信息给填满，让你的设计尽量更有呼吸感，而不会显得拥挤。
留白其实和文本、图片、配色一样，应当视作为一个排版的元素，无论是在网页还是在APP的UI界面当中，它们都是一起协同来构成版面，传递信息，给用户带来更好的体验。
而屏幕空间足够充裕并不意味着你需要用信息填满整个空间，使用留白合理地将信息划分出优先级，这一点在几乎所有的设计里面都是通用的规则。
02
保持文本和图像之间合适的对比度

文章图片
在涉及到图文混排或者图文叠加的地方，前景的文本和背景的图片之间的对比度控制也是一个常见的问题。尤其是在图片的视觉信息比较多和混杂的时候，前景的文字很难确保整体的可读性。
这个/时候，在文本和图片之间添加一个深色半透明的叠加层，就能够让图片和文本之间保持良好的对比度。
另外，这种设计还可以在更换图片和文本情况下，合理地在深色和浅色之间切换，确保不同情况下的对比度。
03
控制好文本段落在垂直方向上的节奏感

文章图片
文本内容在垂直方向上其实也是有讲究的，合理的节奏能够让标题、副标题、段落标题、文本之间的各自的归属关系、层级结构，呈现的更加清晰。
我见过最常见的一种情况，所有的行间距和段间距都是一样的，边距和间距也都非常粗暴地完全一样，这种排版设计之下，视觉上无法让人清晰地了解到底标题和上下段落之间的归属关系。
【快速提升 UI 设计效果的 6 个小技巧】其实这个时候，我通常会让段落标题和上有正文段落之间的间距拉开，这样能够让标题和下方段落之间有更加清晰的关系，保留更好的垂直节奏感。这种思路延伸开来，可以根据需求做的更细致，但是总体上，就是为了提供更好的视觉层次结构。
04
请使用x高度或Il1来进行测试文本可读性

文章图片
我之前曾今介绍过类似的技巧，这次主要是迭代升级了这一测试方法。感谢JessicaHische提供的Il1测试法，这个方法能够让字体可读性测试更加准确。
在进行西文字体设计的时候，小写x通常是作为字体设计的基准，它和大写字母的尺寸对比比例直接影响着字体的可读性。
如果你选的字体的x高度特别高，那么在长篇文章当中，这样的字体通常会有着更好的可读性。
但是这种测试方法有点粗略。
而Il1测试方法也非常有用。