▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们

本文共 5167 字，预计阅读 13 分钟

TCC 情报局的第 89 篇干货分享

2021 年的第 77 篇

TCC 推荐：大家好，这里是 TCC 翻译情报局，我是张聿彤。文章较为偏实战性，，其中包含界面设计中的规范间距、对齐元素、报错状态等内容，将我们日常工作中经常遇到的问题进行了汇总，并给予了相应的解决方案，本篇文章可以作为工具，便于我们在日常工作里，核对界面设计中的种种问题。

说到创造高质量的产品，所有的 小细节都至关重要。‍

很多人争论什么更重要，是好的用户体验还是好的用户界面呢？我总是倾向于说 —— 两者兼而有之。如果其中某一个失败，你就不能对你的用户产生影响。然而，用户通常不会考虑用户体验是什么，而是根据产品的外观来评价产品。

1.忽略范围/规划不当

1. Ignoring Scope/Bad Planning

你会经常看到包含 “Lorem ipsum” 占位字段的产品和库存照片吗？不会。

如果你想提高技能，设计一些是最终展示形态的产品。它实际上会展示什么图像，标题会有多长？完美的设计一旦被真正的内容填满，就会被打破。

具体来说，在开始进行 UI 设计之前，你需要知道页面的每个部分都会显示哪些内容。还需要知道内容尺寸的最大最小值。这些转折点被称为边缘情况，因为它们显示了界面何时以及如何变化。

1）选择图片

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

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

无论做什么，不要使用不需要的照片。如今，人们被海量的信息淹没了。额外一点无用的视觉信息只会让他们恼火。

2）了解重复模块

另一个极端情况与重复模块有关，例如，图像 + 文本、图标 + 文本、数字 + 文本等。应该考虑这些模块在两行文本和十行文本时的外观展示，以及它们是否会一一排列。

对于描述特征的小文本模块，可以轻松使用三栏布局。但是，如果有超过 5 行的文本，并且需要全部显示而不使用省略号省略，则必须想出另一种视觉解决方案。为什么？因为阅读长栏文本只对报纸有好处，对 Web 浏览不方便。解决方案可能包括使用水平滚动或两列布局。

3）规划扩展性

了解内容的边缘情况将帮助你更有效地使用屏幕空间并为界面的每个部分选择正确的 UI 解决方案。但请记住，边缘情况不仅与你目前所看到的有关，一个好的设计师应该总是主动思考，考虑到客户将来可能需要扩展 UI 的可能性。

2. 主次行动按钮没有区别

2. No difference between primary and secondary actions

使用应用程序时，用户可以完成许多操作。重要的是对主要行动按钮给予视觉上的引导性。所有的导航都是通过按钮来实现的，所以你必须让用户更容易识别主要的按钮，让它们变得粗体和突出。如果用户正在寻找辅助动作，则辅助动作应该不那么突出，但仍然可见。

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

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

3. 令人沮丧的错误状态

3. Frustrating error states

在设计用户界面时，不要忘记任何用户界面的主要目的：在用户和服务之间提供尽可能流畅的交互。界面不允许存疑、没有答案的问题或任何类型的不确定性。

设计者应该向用户提供关于状态的明确反馈，特别是在错误状态的情况下。因此，错误通知应满足以下简单规则：

它们应该是 可识别和引人注目的（例如，红色是表示错误的常见 UI 模式）。
他们应该清楚地解释发生了什么以及用户如何修复错误。
它们应该是上下文相关的。最好在与它们相关的元素附近显示错误消息。
他们不应该有刺激性。用户是否已经被错误激怒了？

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

1）仔细设计表单校验

在设计错误状态时，尽量不要惹恼你的用户。尤其要小心所有可能的表单校验规则。

例如，假设一个带有必填字段的表单。这意味着开发人员有一个相应的校验逻辑：“所有必填字段都不应该为空。” 假设用户尝试以随机顺序填写表单，当第一个必填字段失去焦点状态时，它返回一个错误：“请填写此字段。这是必填的！”

我们可怜的用户惊呼，“等等，伙计，我只是在表单字段之间点击，还没有点击‘提交’！” 事情甚至可能变得更糟。例如，假设你有另一个表单需要填写，“提交” 按钮将被禁用，直到所有必填字段不再为空。

想一想，可怜的用户什么也没做，也无法提交表单，但你已经将几个错误归咎于他。这肯定会惹恼任何人，所以最好避免这种情况。

2）权衡成本和价值

不要听那些试图告诉你以你想要的方式实现它将花费大量精力的开发人员的话。记住：不避免这个问题会让你付出代价，就是客户！没有人需要没有客户的服务或产品。即使开发成本很低。

4. 没有对齐

4. Poor alignment

我承认，我是一个对齐狂。但这仅仅是因为一旦你发现了调整对齐的力量，就会意识到这是使任何布局看起来漂亮和平衡的关键。

许多设计师认为使用网格会限制创造力，在某种程度上，这是真的。但是，如果你刚开始作为 UI 设计师，我认为有必要在打破规则之前先学习这些规则。适当的填充和间距使布局看起来干净有序，同时使读者更容易阅读和理解信息。

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

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

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

将标题 padding-bottom 设置为 40px，然后跟随一段文本。
将段落 padding-bottom 设置为 10px。
如果段落后有小标题，padding-top 30px（即段落与小标题顶部的间距为30px），padding-bottom 为 20px（即小标题底部与段落之间的间距将是 20px，这大于段落之间的空间）。

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

5. 低对比度

5. Low Contrast

设计一个产品类似于建造一座公共建筑，比如图书馆或学校 —— 它需要包容所有人。这包括盲人、色盲和视障用户。

问问 Domino，因为无法访问该公司的网站，他们被一个盲人起诉。不要像 Domino 那样，要为可访问性而设计。

通常，我们试图设计看起来不错的东西，而忽略了将与我们的产品进行交互的各类用户的考虑。随着我作为设计师日渐成熟，我已经接受了所有会破坏设计师对完美想法的各种限制。ADA 合规性就是此类限制之一。

将文本缩小到 8 像素，因为它更适合我们的水平空间，或者使用浅灰色，因为它看起来不错，这却忽略了我们视力受损的访客。当我们试图为 Dribbble 点赞时，我们可以避免这种情况，但在为真人开发产品时，这不是一个好习惯。Web 内容可访问性指南（WCAG）要求对比度至少为 4.5:1。还有针对运动、听觉和认知障碍的指南。为确保你符合这些标准，请下载 Stark，它会检查你的设计是否可访问。