10个常见的设计错误......以及如何避免它们

译者：奥创空间

链接：https://www.zcool.com.cn/article/ZOTM0MzA4.html

设计工作是一项复杂的业务。搞得太容易了。

为了创造高质量的产品，所有细节都至关重要。必须考虑每个细节。它很容易迷失在细节中，而忽略了大局。这就是为什么有几个令人难以置信的常见用户界面（UI）设计错误和缺点。

那你怎么能避免这些常见的错误呢？继续阅读一些提示和建议，重点是帮助您避免这些过于普遍的陷阱。

是的，所有这些都是基于我作为设计师的痛苦经历。是的，任何与实际事件的相似之处纯属巧合。

1.缺乏对边缘案例的规划（对Lorem Ipsum说不）

使用lorem ipsum和库存照片，您可以轻松创建一个美丽，和谐的设计......这将很快与现实无关。一旦被真实内容填满，你的美丽设计就会被打破。

为了防止出现这种情况并避免客户对最终产品感到沮丧，这些产品看起来与您无关，您需要获取信息。尽可能收集有关已存在的内容或将要生成的内容的最多信息。

具体来说，在开始处理UI设计之前，您需要知道将在页面的每个部分中显示哪种内容。您还需要知道内容的最小和最大大小（即文本行数，图像大小）。这些转折点称为边缘情况，因为它们显示界面何时以及如何变化。

选择图像

您还需要调查图像限制。如果您的客户没有任何自定义照片或者不打算购买任何照片，那么使用Unsplash中漂亮但毫无意义的照片是没有意义的。

为什么？照片往往是概念性的。使用漂亮的东西是不够的。相反，您需要选择创建叙事或暗示更深层含义的图像。

无论你做什么，都不要使用不需要的照片。如今，人们被大量信息所淹没。一点点无用的视觉信息只会激怒他们。

了解重复块

另一个边缘情况与重复块有关 - 例如，图像+文本，图标+文本，数字+文本等。您应该考虑这些块如何使用两行文本和十行，以及它们是否会逐一展示。

对于描述功能的小文本块，您可以轻松使用三列布局。但是，如果您有超过五行文本并且需要在没有省略号的情况下显示所有文本，则必须提出另一种可视化解决方案。为什么？因为阅读长列文本只适用于报纸，不方便网络。可能的解决方案可能包括使用水平滚动或两列布局的幻灯片。

规划扩展

了解内容的边缘情况将有助于您更有效地使用屏幕空间，并为每个界面选择正确的UI处理。但请记住，边缘情况不仅仅与您目前的情况有关。一个好的设计师应该总是主动思考，允许客户可能需要在未来扩展UI。

2.屏幕注释不足

最好避免的下一个重大错误是设计中缺少注释。

您的整个团队 - 项目经理，QA专家以及前端和后端开发人员 - 以静态形式看待您的设计屏幕，就像一组漂亮的图像。他们无法知道您为每个界面元素所采取的行为。他们无法预测你在脑海中如何设计它。对于您和您的设计师来说，显而易见的事情对所有团队成员来说都不会是显而易见的。

这就是为什么包含关于每个元素的行为，链接的地址，动画和屏幕交互的注释是至关重要的。当您跳过此步骤时，您可能会产生误解。当很多工作以完全错误的方式完成时，你也会冒很多不必要的事后混淆的风险。

很容易看出像屏幕注释这样的小东西会浪费大量的开发时间。它甚至可以影响整个项目范围并增加开发成本。

3.令人沮丧的错误状态

在设计用户界面时，不要忘记任何用户界面的主要目的：尽可能顺畅地提供用户与服务之间的交互。接口不是怀疑的地方，没有答案的问题或任何不确定性。

设计人员应向用户提供有关状态的明确反馈，尤其是在错误状态的情况下。因此，错误通知应满足以下简单规则：

它们应该是可识别且明显的（例如，红色是指示错误的常见UI模式）。

他们应该清楚地解释发生了什么以及用户如何修复错误。

它们应该是上下文的。最好在它们相关的元素附近显示错误消息。

他们不应该是刺激性的。您的用户是否已经因错误而烦躁不已？

设计人员还应该注意意外错误（例如服务器错误，找不到页面）。任何错误消息都是用户流程的障碍。这就是为什么我们需要帮助用户处理它，提供任何可能的解决方案，并尝试消除糟糕的体验 - 特别是如果这不是用户的错误。例如，一个好的解决方案可能是设计404和500页的插图或动画。

小心表格检查

在设计错误状态时，请尽量不要惹恼您的用户。特别要注意所有可能的表格检查。

例如，假设您有一个包含必填字段的表单。这意味着开发人员有一个相应的检查，“所有必填字段不应为空。”假设用户试图填写表格，但是按随机顺序。当第一个必填字段失去焦点状态时，它会返回错误：“请填写此字段。这是必须的！”

我们的糟糕用户惊呼：“坚持，交配，我只是在表单字段之间点击，甚至没有点击'提交'！”事情甚至会变得更糟。例如，假设您有另一项检查，“提交”按钮将被禁用，直到所有必填字段不再为空。

试想一下吧。你的可怜的用户没有做任何事情，也无法提交表格，但你已经把几个错误归咎于他。这绝对会让任何人感到沮丧，所以最好避免这种情况。

权衡成本和价值

不要听那些试图告诉你它会花费大量精力以便按照你想要的方式实现的开发人员。请记住：不避免这个问题将花费您的客户！没有客户，没有人需要服务或产品。即使开发成本低廉。

4.空状态

本主题涉及前一个 - 错误状态 - 并且还与边缘情况相关联。空状态是绝对边缘情况，因此您需要主动思考避免它们。

当每个页面或部分没有数据时，您的UI将如何显示？它会友好还是令人沮丧？它看起来不错，还是会看起来破碎？用户会了解他们的位置以及州的含义吗？

这里的最佳做法是提供包含信息内容的精美视觉效果。它可以是一个插图，一个图标，或者只是一个文本块，其中排版很好，可以解释这种情况。

5.缺乏排版层次结构

接下来，更好地避免了导致许多设计错误的另一个主题 - 排版。

文本是信息内容的主要单位。这就是为什么它必须是可读的，可识别的，组织良好的。格式正确的文本有助于用户对信息的感知，使他们专注于真正重要的事情。

使用字体和字体样式

玩字体可能很有趣。但是，如果有人试图在段落中阅读十次更改字体的内容，那么很快就会感到疲惫和烦恼。

为避免这种字体疲劳，我建议在任何单一布局中使用不超过三种字体。也就是说，记住字体和字体样式之间的区别。每种字体都有自己的一组样式：常规，中等，粗体，黑色，斜体，粗体斜体等。当您将所有这些字体样式与大写和小写相结合时，两个或三个字体足以创建一个有吸引力的排版系统。

注意Kerning

在考虑排版时，不要忘记字距。如果您以前从未听说过字距调整，请不要担心; 这很简单。字距调整是排版中的一个过程，通过该过程可以手动或自动调整字符之间的间距。

字距调整非常重要，因为在某些情况下，调整字符之间的空间可以使字体更清晰易读。但是，滥用字距调整 - 或者不密切注意它 - 可能会导致严重问题。它可能会导致误解或无意中破坏设计的凝聚力。

维护可视层次结构

始终尝试在页面上的字体样式之间保持视觉层次结构。使用对比排版可以在视觉上划分不同级别的文本并建立严格的层次结构。要使信息层次在页面上清晰可见，主要标题应在页面上最突出。副标题应该小得多，但仍然清晰可见。

相同的原理适用于逻辑块内的可视层次结构。标题应该是页面上最大的设计元素，然后是较小的，不太突出的子标题。接下来，随后的任何功能标题应明显小于标题，并且重量相同。最小的字体应该用于描述功能，等等。这种视觉层次结构有助于网站访问者区分更多和更不重要的信息。

6.填充和间距不足

适当的填充和间距使您的布局看起来整洁有序，同时使读者更容易阅读和理解信息。

应在逻辑块周围设置相同大小的空格（例如，在顶部和底部，以及在左侧和右侧）。如果空格不均匀，您的页面看起来会很混乱，用户可能无法对每个部分给予同等的考虑。

填充太小意味着用户无法将内容分解为逻辑块。为了防止逻辑部分混合在一起，请将它们分开并在它们之间插入一个大空间。

维护可视化层次结构的一种简单方法是遵循以下简单规则：不同逻辑块之间的填充应大于每个块内标题和文本之间的填充。例如，假设您有一长串文本，其中包含标题，小标题和段落：

将标题padding-bottom设置为40px，然后使用一段文本跟随它。

将段落填充底部设置为10px。

如果在段落后面有一个小标题，则为padding-top指定30px（即，段落与小标题顶部之间的空间为30px）和填充底部为20px（即子标题底部与段落之间的空间）将是20px，这比段落之间的空间大）。

这将把所需的重点放在最重要和最重要的元素上。最大的文本 - 标题 - 周围有更大的空间。但是这个空间应该更接近它后面的相关元素。

7.凌乱的图像

当您需要通过小符号表达意义或简要说明描述时，图标非常有用。它们也是现代界面的基本组成部分，尤其是在移动界面上。

在应用程序中，图标通常相当于按钮。看看Instagram：你只会看到图标和文字。

这就是为什么选择正确的视觉图像以对应元素的意义非常重要的原因。听起来很简单吧？不。世界上每一位设计师都知道找到正确的图标是多么痛苦。

您需要使用非常简单和常见的图像讲述故事，这些图像对每个人都是可以理解的。您需要将这些图标与UI的整体风格相匹配。然后，您需要以SVG格式向开发人员提供它们。

也许你已经搜索过免费图标了，当你为每个元素找到一个漂亮的图像时，你很激动。你想，他们彼此之间有多完美对应！他们对每个人都是可以理解的！可悲的是，不知何故，您选择的图标集的整体印象感觉相当混乱和不整洁。你怎么能避免这种混乱？这是一份简短的清单：

线宽 - 调整大小后，所有图标的线宽应相等。否则，它们会非常明显。

拐角半径 - 如果图标包含一些矩形形状，请比较集合中每个图标的拐角半径。如果不同的图标不同，你最好修复它。

线帽形状（用于轮廓图标） - 可以是矩形或圆角。

角落连接形状（用于轮廓图标） - 它可以是矩形或圆形。

确实，不熟练的用户可能没有特别注意到不同的线宽或角半径。尽管如此，整体印象仍然是错误的，用户会感受到它。

换句话说，虽然使用免费图标并没有错，但最好还是放松一下。使用免费图标使项目看起来便宜，在某些情况下，不专业。此外，还有大量免费图标供人们立即识别。为什么？他们已经看到它们随处可见。

这就是为什么我的建议是严格选择免费图标，或者 - 甚至更好 - 自己设计图标。自定义图标始终提供卓越的体验。

8.低对比度

对比图形设计的基本原则。我们的眼睛喜欢对比。对比度是设计师用来管理用户注意力的工具。

当页面上的两个元素不同时会发生对比。例如，对比度可能来自于为文本和背景颜色使用不同的颜色。它可以是一个大的，大胆的，低俗的字体设置的标题，与正文的优雅的无衬线字体一起使用。它可能是大图形和小图形之间的差异，也可能是粗糙的纹理与光滑的纹理相结合。

对比的重要一点是对比元素应该是完全不同的。不仅仅是一点点不同 - 一个明显的，大胆的区别。

使用白色空间

也就是说，如果您将两个完全不同的元素彼此非常接近，则用户将无法理解哪个元素是“主要”元素。这就是为什么我们可以说对比不仅仅是将不同的视觉风格应用于元素，而且还涉及使用白色空间的艺术。这是因为，有时，为了使元素对比，您需要将它们与空白区域分开。

空白区域对于让用户轻松阅读内容非常重要。当然，可以不正确地使用空白区域：空间太大或将太多内容塞入小区域。许多过度广告的网站也缺乏足够的空白。

确保文本和图像之间的充分对比

避免放置在图像上的文本副本的低对比度。文本和背景之间应该有足够的对比。要使副本突出，请在图像上放置对比度过滤器。黑色是一种流行的颜色，但你也可以使用鲜艳的颜色，混合和匹配它们。

另一种选择是从一开始就使用对比图像。在这种情况下，您可以将副本放在照片或图像的暗部分之上。

避免对比剂过量

避免在一个页面上使用太多样式。单个页面上的排版和设计样式太多，使其看起来不专业 - 而且难以阅读。要避免这种情况，请将自己限制为单个字体和两个饱和度选项（例如，正常和粗体）。

避免使用颜色强调窄页面元素。它看起来不太好看。例如，由于标题的大小，类型饱和度和填充，标题已经很好地标记。您想突出显示页面上的特定点吗？使用整个块的颜色背景，包括相关的标题和文本副本。

9.没有思考跨平台

是的，理想情况下，这应该不再是当今世界的问题。我们都知道大多数用户从移动设备访问Web服务。不幸的是，许多设计师仍然倾向于忘记这一事实。（或者也许客户不想花钱来创建移动优化设计？）

然而，对于设计专业人员而言，不应该出现不针对多个设备进行优化的问题。在创建用户界面时，您应始终牢记受到广泛称赞的“移动优先”方法。专注于每种类型的用户将在每个页面上看到的内容。然后，问问自己，“我选择用于显示此特定内容的UI控件是否方便？”

您可以选择一个很好的UI元素，它可以在桌面设备上完美运行 - 但对智能手机用户来说并不是很好。或相反亦然。这就是为什么始终牢记我们现在必须设计的各种设备非常重要的原因。

10.太多设计

仅仅因为你可以为你的设计添加一些东西并不意味着你应该。简约提供充足的额外津贴。所以要小心疯狂的风格。虽然过度设计不是一个重大错误，但它可能会导致一些严重的问题。

例如，在页面上使用太多颜色会让人感到困惑; 不清楚哪些比特更重要。一种或两种颜色足以让视觉突出显示真正重要的东西。

我们可以对字体样式说同样的话。它足以强调头条新闻和小标题，并使用对比短语的对比度。

你填入设计的“东西”越多，用户就越难以想到提取它所呈现的信息。设计需要自己呼吸和生活。所以请记住：拥有空白并不一定是坏事。在许多情况下，它比填充每平方英寸的空白区更好。

原文链接： https://medium.com/@distillerytech/10-common-design-mistakes-and-how-to-avoid-them-4dc862ae3aa8

关注『网页设计精选』

看更多精选网页设计文章

↓↓↓

好文章，我在看❤️