1. 使用留白和分组来划分元素 把信息分成几组相关元素可以帮助构建一个有条理的界面，更易于组织和阅读信息。这样做可以让人更快更容易地理解和记住界面的内容。 你可以使用这些方法来对信息分组： 使用容器是将界面元素分组的最强视觉表现方式，但它可能会增加不必要的杂乱感。寻找使用其他分组方法的机会，它们通常更微妙，可以帮助简化设计。 使用留白是一个非常有效的元素分组方式，你可以同时使用这些方法用以更好的将信息组织起来。 比如在下面的例子中，留白空间不够，让信息显得挤在一起难以阅读，通过增加留白，能帮助更好的对信息进行分组，让整个排版显得更舒服，更利于阅读。 2. 保持一致性 在 UI 设计中，一致性的意思是相似的元素，在外观和行为上保持相似。这种一致性不仅在你自己设计的产品中保持，也应该与其他已有的产品相类似，以保证用户的心智统一。这样可以提高可用性并减少错误，用户不再需要重新学习如何使用。 在下面的例子中，图标的风格是不统一的，一些图标是填充的一些是描边的。这会让用户感到困惑，填充图标通常会让用户觉得是已经选择了。当所有图标都用描边的形式，统一描边 2pt 的粗细和统一的圆角，并设计相似的视觉重量，那么就可以很好的提高一致性。 文本用来提升图标的易读性，以帮助用户更好的理解它的意思。特别是当一些用户使用读屏时（屏幕阅读器是一种软件，用于描述界面，并通过语音或盲文向看不到它的人进行描述）。 3. 确保看起来相似的元素功能也相似 如果元素看起来是类似的，用户会觉得它们在功能上也是类似的。因此，尝试确保对于具有相同功能的元素使用一致的视觉设计。相反，尝试确保具有不同功能的元素看起来也是不同的。 在我们的例子中，图标区域的样式与“Book now”按钮的样式非常类似。这使得它们看起来是可以点击的，但实际上是不可以的。把底部的蓝色背景区域去掉，避免用户的误解。 4. 创建一个清晰的层次结构 不是所有在界面上的信息都同等重要，为了让信息更容易理解，要让更重要的信息被设计的更突出一些。 一个清晰的层次关系，能帮助用户更快的阅读内容，并能把焦点放到他感兴趣的地方。同时，它还可以通过创造秩序来提高美学效果。你可以通过大小、颜色、对比、间距、位置和深度进行优化，打造一个清晰的视觉层级。 下面的例子是一个视觉层次不清晰的网站 banner 示例，在它下面是一个明确的层次结构的案例。 一个非常快且容易的检查你的视觉设计层次是否清晰的方法是采用“眯眼测试（ Squint Test）”。只需眯起眼睛观察你的设计，或者远离屏幕或使设计模糊。你仍应该能够看出哪些元素最重要，知道界面的用途。 用“眯眼测试”看下面的例子，我们可以发现多个具有类似视觉强度的元素在争抢用户的注意力。同时，左下角的主要操作反而没有凸显出来。 主要按钮在界面中通常是最突出的元素。通过给它一个与背景强对比的颜色，并把字体加粗可以实现这一点。这样做也解决了可读性的问题，后面会详细研究。 再次用上“眯眼测试”，主要按钮这次成了页面中最突出的元素了。 视觉层次现在终于清晰了，但依然还有提升的空间。例如，正文相对于它的层级来说，还是有点太突出了。 5. 删除不必要的样式 不必要的信息和视觉样式可能会分散注意力，增加认知负荷。避免使用不必要的线条、颜色、背景和动画，目的是创建一个更简单、更专注的界面。 在我们的例子中，图片周围的留白和描边是没必要的，会增加视觉复杂度。这些样式不需要来传达信息或对元素进行分组，因此我们可以安全地将它们删减以简化设计。 6. Read more…