UI 设计最佳实践和常见错误

收听本文的音频版本

尽管标题 UI 设计师暗示了与传统平面设计师的不同，但 UI 设计仍然是视觉设计学科历史传统的一部分。

对于每一种运动或媒介，该学科都引入了新的图形语言、布局和设计流程。 几代人之间，设计师跨越了从印刷机到施乐，或纸张到像素的过渡。 在这几代人中，平面设计承担着代表每个时代视觉语言的责任。

随着 UI 设计从起步阶段过渡，我们可以期待开发什么样的图形世界？ 根据目前的轨迹，未来看起来很暗淡。 今天的大部分 UI 设计已经变得标准化和可重复。 在线设计讨论专注于学习规则，以使设计安全工作，而不是挑战极限或想象新事物。

UI设计师诉诸模式和趋势的趋势不仅创造了一个平淡的视觉环境，而且随着流程变得越来越公式化，它也降低了设计师的价值。

当我们回顾 UI 最佳实践和常见错误时，最紧迫的问题不是技术熟练程度，而是避免重复和视觉上乏味的设计的冲击。

最常见的五个 UI 设计错误是：

1. UI 设计师已经变得痴迷于规则。
2. 网格限制了 UI 设计师的创作过程。
3. UI 设计已经通过模式标准化。
4. 可悲的是，字体被误解了。
5. 对比并不是万能的设计。

常见错误 #1：UI 设计师变得沉迷于规则

平面设计的世界一直遵循一套规则和标准。 在设计学科中，常见错误与已被打破的标准规则非常吻合。 从这个角度来看，设计规则似乎是值得信赖的指南。

然而，在每一个设计学科中，新的运动和创造性的创新都是有意识地打破规则的结果。 这是可能的，因为设计是有条件的，并且需要设计师的判断力。 设计不是一个答案有限的过程。 因此，设计规则应被视为指导方针，而不是冷酷的事实。 经验丰富的设计师了解并尊重规则手册，足以打破常规。

在线讨论设计的方式通常围绕着做和不做的列表展开。 掌握设计完美的 10 个简单步骤！ 不幸的是，设计需要对原则和趋势有更深入的理解。 通往良好设计的道路并非通过系统地遵守清单来实现。

有趣的是，如果设计师不再打破规则，那么就不可能有创造性的突破。 如果 UI 设计师只培养遵循指导方针的能力而不是磨练他们的决策能力，他们可能很快就会变得无关紧要。 我们还有什么理由认为我们的工作比现成的模板增加了更大的价值？

警惕“十大”设计规则

当今 UI 设计世界中设计规则的问题在于它们的丰富性。 如果设计师需要解决问题，他们可以简单地查看现有的 UI 社区和他们的解决方案集。 然而，这些指南和规则的丰富性削弱了它们的可信度。

谷歌搜索“Top UI Design Mistakes”会产生 50 万条结果。 这些作者中的大多数（如果有的话）彼此同意的几率是多少？ 提供的每个设计技巧与读者的设计问题准确一致的可能性有多大？

通常，在线教育文章讨论的是尖锐问题，而不是问题背后的指导设计原则。 结果是新设计师永远不会明白为什么设计会如此运作。 相反，他们变得依赖于之前发生的事情。 这些文章中很少有人鼓励设计实验或游戏，这难道不是一个问题吗？

设计师应该借鉴指导原则的工具包，而不是预定规则和设计模板的书。 “按 x 进行视差滚动，按 y 进行轮播。 在选择之前，请参阅有关导航工具趋势的最新博客文章。” 无聊的-！

提示和“前 10 名”列表遵循可预测的趋势

趋势对于设计师来说就像垃圾食品。 追随他们会产生廉价的解决方案，这些解决方案可以提供一些初始回报，但从长远来看几乎没有价值。 紧跟潮流的设计师会很快与自己约会。 跟随别人的设计路径的回报？ 一种刺骨的职业空虚感。

确实，努力发明自己的风格和系统是一项艰苦的工作，但绝对值得付出努力。 每天的收获和突破都是你自己的。 复制似乎永远无法满足设计师的灵魂。

常见错误 #2：网格限制了 UI 设计师的创作过程

尽管我反对规则，这里有一个：UI 设计师不可能在没有网格的情况下工作。 Web 和移动界面基本上是基于逐像素组织的——没有办法绕过它。

然而，这并不意味着 UI 设计师应该只追求以网格为中心的外观。 同样，没有理由让所有与设计相关的决策都基于网格。

避免将网格用作时尚工具

一般来说，根据趋势进行设计会导致设计不佳。 充其量，趋势会带来令人满意的结果，但总体影响几乎可以肯定是平淡无奇。 时髦就是平凡。

因此，在设计中使用网格时，请了解网格作为工具必须提供的内容以及它可能传达的内容。 网格通常代表中立性，因为网格约束内的一切看起来都是平等的。

网格还允许无偏见的导航体验。 用户可以从一个项目跳到另一个项目，而不受设计师策展手的任何干扰。 使用其他导航结构，设计者可能能够更有意地对内容进行分组并建立所需的序列。

不要默认将网格作为工作流程

罗德岛设计学院 (RISD) 的教员兼 PIN-UP 杂志的主任 Dylan Fracareta 指出，“大多数人从 12 列网格开始……因为你可以从中得到 3 和 4。” 这里的危险是设计师会立即预先确定他们的工作。

为了防止这种情况，Fracareta 只使用设置数量的移动工具，而不是物理地将东西放在网格线上。 这具有建立秩序和打开意外结果可能性的双重效果。

为浏览器设计过去意味着我们将输入代码并等待看看会发生什么。 如今，网页设计类似于传统的布局设计，其过程“更像是调整两张透明纸”。 作为设计师，我们如何从这个过程中受益？

尽管网格可能具有限制性，但它们是我们最传统的组织形式之一。 网格很直观。 电网是中性的，不张扬的。 网格允许内容自己说话，用户可以轻松导航界面。 尽管我对网格的限制性提出了警告，但不同的阵列允许不同程度的指导或自由。

常见错误 #3：UI 设计已通过模式标准化

标准化设计元素的概念早于 UI 设计。 几个世纪以来，建筑细节被重复并应用于类似的设计环境。 这种做法对于人们很少感知的建筑物的部分是有意义的。

然而，一旦建筑师标准化了家具尺寸和扶手高度等常见元素，人们开始对由此产生的米色物理环境表示不感兴趣。

不仅如此，标准化的尺寸也被证明是无效的。 根据统计平均值，它们通常无法为大部分人口提供服务。 可重复的细节有其位置，但不应不加批判地使用它们。

设计师不应该将模式用作产品

许多 UI 设计师将模式视为比简单的省时工具更重要的东西。 他们将它们视为复杂设计问题的现成解决方案。 模式旨在标准化重复性任务和工件，以使设计人员的工作更轻松。 遗憾的是，某些模式，如轮播、分页和 F 模式已经成为我们许多界面的整个结构。

模式使用合理吗？

设计师告诉自己，F 模式的存在是人们在网络上阅读方式的结果。 Espen Brunborg 指出，也许人们以这种方式阅读是因为我们过度使用了 F 模式。 “如果网页设计师所做的只是遵循配方，那么他们有什么意义呢？” 布伦堡问道。

常见错误 #4：字体被悲惨地误解

许多“快速提示”设计列表建议了字体的硬性和快速规则。 每一条规则都被虔诚地喊着：“只有一个字体家族！ 等宽字体已死！ 不惜一切代价避免使用细字体！” 这只不过是热空气。

关于类型、文本和字体的唯一合法规则集中在强制易读性和传达适当的含义上。 只要文本清晰易读，就有机会使用各种字体。 UI 设计师必须负责了解界面中实现的每种字体的历史、用途和设计意图。

字体易读性至高无上

字体传达含义并影响易读性。 随着围绕设备易读性规则的所有讨论，设计师们忘记了这种类型旨在为文本体注入美感。 易读性是至关重要的——这是无可争议的——但它确实应该是一个明显的目标。 否则，为什么我们需要 Helvetica 或 Highway Gothic 之外的任何东西？

要记住的重要一点是，字体不仅仅是为不同的易读性环境而设计的。 它们对于传达意义和赋予文本体微妙的情绪也是必不可少的。

不惜一切代价避免使用细字体是不明智的

现在这种趋势已经过去了，一个常见的设计批评主张完全避免使用细字体。 但是我们需要更多的法规吗？ 目标不应该是更深入地理解支持字体的设计原则吗？

一些设计师确信，细字体在设备之间无法阅读或不可信。 合法点。 然而，这代表了当前 UI 设计讨论中的一种情况，即字体仅被理解为与易读性相关的技术选择。 如果易读性是唯一的设计问题，为什么不完全摒弃细字体呢？

更全面的方法首先要了解为什么细字体可能是有利的，以及在什么情况下。 粗体、厚文本实际上比细文本更难阅读。 然而，由于粗体字体具有更多的视觉重量，它们更适合标题或文本很少的内容。

细字体通常使用衬线，使其适合正文。 为何如此？ 当快速连续查看时，衬线字符会一起流动，使它们更适合长时间阅读。

此外，通常选择细字体，因为它们传达优雅。 如果聘请设计师为要求视觉复杂性的客户创建界面，那么很难找到更重的字体来完成这项工作。

字体需要变化来建立层次结构

一个常见的 UI 设计错误是未能在字体之间提供足够的变化。 更改字体是一种很好的导航工具，有助于在界面中建立视觉层次结构。 一般来说，最大的项目（或最粗的字体）是最重要的，并且具有最大的视觉重量。 视觉意义帮助用户识别内容标题和常用功能。

太多的变化会破坏等级制度

使每种字体选择都独一无二，尤其是当界面包含许多字体时，问题在于没有什么真正突出。 如果每种字体都不同，用户就很难识别重要内容或建立视觉秩序感。

常见错误#5：对比不是万能的设计

许多“Top Mistakes”列表中出现的一个共同点鼓励 UI 设计人员避免使用低对比度的界面。 确实，在许多情况下，低对比度设计难以辨认且无效。 然而，与我对细字体的观点类似，我担心的是绝对语言的使用会导致同质化、高对比度的设计文化。

默认使用高对比度是粗心的

高对比度的视觉效果无疑是刺激和令人兴奋的。 然而，在人类的情感范围内，还有更多的状态值得传达。 视觉刺激也可能是视觉安全的。

以当代科幻电影的整个行业为例。 似乎每部作品都采用黑色和霓虹蓝的视觉效果来诱使观众兴奋。 将高对比度图像和低对比度图像交织在一起，引发更广泛的情绪反应，这不是更有效吗？

从功能上讲，如果界面中的每个元素都与另一个元素形成鲜明对比，那么就没有什么特别突出的了。 这破坏了对比度作为分层工具的潜在价值。 将不同的设计动作视为工具而不是规则，对于避免停滞不前的时尚设计至关重要。

结论

充其量，设计规则是指南。 它们提供了决策安全性，并警告设计师轻率选择的危险。

相反，设计规则不是法律。 它们并非牢不可破，当然也不值得我们毫无争议地投降。 事实上，如果不顾一切地遵循设计规则，可能会成为严重的拐杖，削弱我们创造性地解决问题的能力。

设计师不是科学家。 我们不一定要为我们做出的每一个审美决定提供经验证据。 诚然，我们的职业是一种过程和深思熟虑的判断，但也有本能和独创性的空间。 事实上，我们帮助客户在杂乱无章的时尚内容世界中脱颖而出的能力取决于我们是否愿意想象新的可能性。

我们必须进行实验。 我们必须玩。

设计规则的存在是为了获得视觉优势。 它们可能弯曲，甚至折断，但决不能盲目跟随。