UI 设计的力量是如此之大，以至于它可能意味着一个非常成功的应用程序和一个未能产生影响的应用程序之间的区别——或者更糟糕的是，给用户留下了令人难忘的坏印象！在创建高质量的应用程序时，所有的小细节都至关重要。这就是为什么我想分享一些最常见的 UI 设计错误以及如何修复它们，或者完全避免它们。如果你刚刚开始你的设计生涯，意识到这些错误将证明是无价的。

每个应用程序都是不同的，没有创建完美界面的通用公式（如果你知道，请发邮件给我！），但下面的列表肯定会帮助你提供更好的设计。它还将作为您在设计界面时要避免的事情的“清单”。

所以不用多说，这里有10个 UI 设计错误，要不惜一切代价避免。

 

避免UI元素的不一致

为确保应用流畅简洁，请避免使用太多不同的样式。这将向您的用户发送混合信号！关键是随时重复模式和元素。外观一致的设计在与访问者建立信任和创造愉快的体验方面大有帮助。此外，它将帮助您的用户更快地了解您的应用程序。

为避免不一致，请注意以下元素：

• 对按钮、文本、链接、页眉、页脚、悬停状态等元素一致使用调色板。
• 标题、段落、链接等的一致字体样式。
• 对应用中的形状使用圆角或方角：图标、卡片、按钮等。
• 一致的线条粗细：用于图标、分隔线和您使用的任何其他线条。
• 每一个以任何方式偏离的元素都必须有这样做的理由。

2. 使用默认的阴影

在阴影方面，少即是多。我总是建议不要过度使用它们，否则你会以非常繁忙、嘈杂的设计结束。但是，如果您必须使用它们，请遵循以下提示：

• 不要使用默认的阴影，它是用来调整的。
• 让它非常微妙。不要使用黑色作为阴影，因为它是一种非常刺眼的颜色，而是使用较暗的背景颜色；这会看起来更自然。

3.主次按钮区别不大

使用应用程序时，您将有许多用户可以完成的操作。重要的是要赋予主要动作视觉上的重要性。所有导航都是通过按钮进行的​​，因此您必须通过使主按钮变得粗体和突出来让用户轻松识别主按钮。次要操作应该不那么突出，但如果用户正在寻找它们仍然可见。

以下是区分主要和次要按钮的方法：

• 对主要和次要按钮使用不同的视觉权重。具有最强视觉权重的按钮将获得更多关注。
• 因此，使用强烈的颜色、粗体文本和大小来为主要按钮赋予视觉重量。对次要动作做相反的事情。

4. 缺乏文本层次

文本是信息内容的主要单位，这正是它必须始终清晰易读的原因。格式正确的文本有利于用户对信息的感知。

作为设计师，我们的工作是以最易于理解和最全面的方式组织起来。以下是一些需要牢记的事项：

• 每个样式标题之间要有足够的对比：使用大小、重量和颜色来分隔每个样式。
• 为了使信息层次结构清晰可见，始终以大标题开头，这应该是页面最突出的元素。子标题和其他文本应该小得多，依此类推。
• 使用足够的间距和字距。
• 清晰地分隔文本块，使用少量空间连接相关信息，并使用大量空间在视觉上分隔不同的信息块。

5. 糟糕的肖像画

有时图标似乎是设计中“最简单”的部分。一些设计师甚至将它们视为“额外”的装饰元素，而实际上它们也是现代界面的基本组成部分。尤其是在图标等同于按钮的移动设备上（看看 Snapchat），您会发现一个主要由图标组成的界面。

这就是为什么选择正确的“符号”来清楚地传达元素的含义并在整个应用程序中保持图标样式的一致性如此重要。

当涉及到图像时，请遵循以下提示：

• 使用矢量/SVG 作为您的图标。这是确保您的图标在任何设备或分辨率下看起来都清晰的最简单方法。
• 使用一致的样式：首先，您的所有图标都应该有轮廓或填充。此外，确保一致的线条粗细和拐角半径。
• 确保您的图标信息清晰。

想从头开始设计自己的图标吗？按照此分步指南进行图标设计过程。

6. 未对齐的元素

我承认，我是一个对齐狂。但这只是因为一旦您发现对齐事物的力量，您就会意识到这是使任何布局看起来美观和平衡的关键。

有两种基本方法可以帮助您组织界面：12 列网格和基线网格。两者在最终设计中都是不可见的，但它们对于拥有平衡的界面至关重要。

许多设计师认为使用网格会限制你的创造力，在某种程度上，这是真的。不过，如果你刚开始做 UI 设计师，我认为有必要先了解规则，然后再打破它们。

这是我在 UI 设计中对齐的重要提示：

• 不要将相关项目对齐到不同的边。始终尝试将相关元素对齐到同一侧，因为它可以在视觉上将它们连接起来。

7. 低对比度

对比度是视觉构图上的一切。当界面元素之间的对比度较低时，所有元素都会合并在一起，最终会得到一个沉闷且难以阅读的界面，因为它们看起来都一样。低对比度等于低可用性。

当谈到 UI 设计中的对比时，请遵循以下提示：

• 使用对比来引导用户的注意力通过你的界面。例如：对号召性用语使用高对比度颜色。
• 使用对比度来清楚地分隔应用程序的不同部分。例如：使用不同的背景颜色来显示页眉、内容和页脚之间的明显区别。
• 使用对比度将元素与背景分开。示例：顶部带有文字的照片可能难以阅读，因此请通过照片和文字之间的高对比度来确保您的文字清晰易读。
• 如有疑问，请使用本网站检查两种颜色之间的对比度是否足够。

8. 令人困惑的表格

表单是用户旅程的关键部分；它们用于登录、注册、结帐等。因此，在提交表单之前和之后提供明确的指导非常重要。

以下是表单设计的一些提示：

• 避免仅使用颜色来表示错误。始终提供可操作的反馈，以简化正确输入的过程。
• 如果表单太长，请考虑将其分解为逻辑部分并显示进度条以指示用户所在的步骤。

9. 手机和平板电脑上的触摸目标不佳

小的触摸目标令人沮丧，因为它们会使用户难以完成他们想要的操作。我们都经历过在智能手机上点击错误按钮而不得不等待加载错误屏幕的挫败感！

因此，在设计可点击元素时，请记住用户配备了不同大小的手指：

• 记住成人食指的平均宽度为 1.6 到 2 厘米，从而创建手指友好的目标。
• 使您的触摸目标宽度至少为 45-57 像素。这将为用户提供足够的空间来击中目标，而不必担心准确性。

10.使用不相关或低质量的图像

界面中的照片将有助于讲述一个故事，因此请选择一个能与故事和应用外观相辅相成的强烈图像。

选择图像时请记住以下提示：

• 避免不相关的照片。显示与您的服务或产品相关的照片。
• 仅使用高质量图像。
• 选择创意和逼真的照片。避免伪造或上演的库存照片。

常见的 UI 设计错误：要点

UI 设计师的最终目标是制作直观且美观的界面。它必须产生信任，从而带来更多的转化。将所有这些错误牢记在心，作为设计时要避免的事情的清单，很快您可能会发现您已经主宰了这些设计原则，不再需要在您面前的清单。我真的希望您觉得本指南很有用，它可以帮助您创建更精美的设计。快乐设计！

作者： HANNAH NIEBLA