type
tags
category
icon
password
Multi-select
优先级
重要度
状态 2
预计结束时间
添加日期
URL
状态
分类（人工）
总结（AI 摘要）
status
/
一个循序渐进的用户界面设计案例研究，利用逻辑驱动的用户界面设计技巧快速修复一个用户界面示例。
用户界面设计很难。在布局、间距、排版和颜色方面有如此多的选项可供选择，做出设计决定可能会让人不知所措。如果再加上可用性、可访问性和心理学，那就更难了。
当然，艺术天赋会有所帮助，但构成直观、易用和美观的界面设计的许多要素是可以学习的。拥有一套符合逻辑的用户界面设计准则系统，可以帮助你高效地做出明智的设计决策。如果没有一个逻辑系统，你就只能凭感觉来移动东西，直到看起来漂亮为止。
学习的最快方法就是实践，所以让我们从用户界面设计技巧开始吧。
修复示例界面的用户界面设计技巧
下面的两个设计是一个短期物业租赁应用程序的物业详细信息页面。第一个是原始设计。第二个是快速应用一些 UI 设计技巧后的结果。
即使没有太多的视觉或交互设计经验，你也可能会注意到原始设计给人杂乱、复杂和难以使用的感觉。这是因为它包含了许多有问题的设计细节，给可用性带来了风险。也许你已经发现了一些问题？
让我们使用以下用户界面设计技巧来逐一解决原始设计中存在的问题：
1.使用空间对相关元素进行分组
将信息分割成更小的相关元素组，有助于结构化和组织界面。这样，人们可以更快、更容易地理解和记忆。
可以使用以下方法对相关元素进行分组：
- 将相关元素放在同一个容器中
- 将相关元素靠拢
- 使相关元素看起来相似
- 将相关元素对齐成一条连续的线
使用容器是对界面元素进行分组的最有力的视觉提示，但也会增加不必要的杂乱。寻找机会使用其他分组方法，这些方法通常更为巧妙，有助于简化设计。
尤其是使用空格来分组相关元素，是一种非常有效且简单的用户界面设计技巧。你还可以将分组方法结合起来，帮助更清晰地显示分组。
在我们的示例中，内容之间缺乏间距使设计看起来杂乱无章，难以理解。增加间距有助于清晰地对内容进行分组，使其更有条理，更易于理解。
2.保持一致
用户界面设计中的一致性是指相似元素的外观和工作方式相似。无论是在产品内部，还是与其他成熟产品相比，都应如此。这种可预测的功能提高了可用性并减少了错误，因为人们不需要不断学习如何工作。
在我们的示例中，图标样式并不一致，有些是填充的，有些则不是。这可能会让一些人感到困惑，因为填充图标通常表示元素已被选中。用 2pt 的笔画重量和圆角勾勒所有图标可以提高一致性，并使每个图标具有相似的视觉重量。如果你使用的是高质量的 免费图标集 ，一般不需要担心这个问题。
图标上还会添加文字标签，以帮助确保人们，尤其是使用屏幕阅读器（通过语音或盲文向看不见的人描述界面的软件）的人，理解图标的含义。
3.确保外观相似的元素功能相似
如果元素看起来相似，人们就会希望它们以相似的方式工作。因此，应尽量确保对具有相同功能的元素进行一致的视觉处理。反之，尽量确保功能不同的元素看起来也不同。
在我们的例子中，图标容器的视觉风格与 "立即预订 "按钮相似。这让它们看起来像是交互式的，尽管它们并不是。去掉图标上的蓝色和按钮样式有助于避免它们被误认为是交互式元素。
4.创建清晰的视觉层次
界面中并非所有信息的重要性都相同。通过让更重要的元素看起来更突出，按重要性顺序展示信息。
明确的重要性顺序或视觉层次有助于人们快速扫描信息并关注感兴趣的领域。它还能通过营造秩序感来提高美感。你可以利用大小、颜色、对比度、间距、位置和深度的变化来创建清晰的视觉层次。
下面是一个没有清晰视觉层次的网站英雄横幅的例子，随后是一个按重要性顺序清晰展示元素的网站英雄横幅。
使用 "眯眼测试"（The Squint Test）是一个快速简便的用户界面设计技巧，用于测试视觉层次是否清晰。只需眯起眼睛观察你的设计。或者，你也可以离屏幕更远一些，或者模糊你的设计。你应该仍然能够分辨出哪些是最重要的元素，并识别出界面的用途。
让我们将 "眯眼测试 "应用到我们的示例中。我们可以看到，有多个同样突出的元素在争夺注意力。与此同时，左下角的主要操作并不突出。
一般来说，主要操作应该是界面上最突出的元素。使用高对比度的背景颜色和粗体字有助于实现这一目标。这也解决了低对比度按钮的可访问性问题，我们稍后将讨论这个问题。
在更新后的设计中应用斜视测试，主要操作显然是最突出的元素。
视觉层次现在更加清晰，但仍有改进的余地。例如，相对于正文的重要程度而言，正文块仍然过于突出。我们很快就会学到一些快速排版指南，这将有助于纠正视觉层次。
5.删除不必要的样式
不必要的信息和视觉样式会分散注意力，并增加认知负荷（使用界面所需的脑力）。避免不必要的线条、颜色、背景和动画，创建一个更简单、更集中的界面。
在我们的例子中，图片周围的留白和边框增加了不必要的视觉复杂性。它们不需要用来传达信息或组合元素，因此我们可以放心地将它们移除，以简化设计。
6.有目的地使用色彩
有目的、有节制地使用色彩。尽量避免纯粹为了装饰而使用色彩，因为这会造成混乱和分散注意力。从黑白两色开始，在能表达含义的地方引入色彩。
一种简单而有效的方法是将品牌色彩应用到文本链接和按钮等互动元素上。这有助于告诉人们什么是互动的，什么不是。尽量避免在非互动元素上使用品牌色。
你不需要为所有互动元素添加颜色，因为有些元素已经有视觉提示表明它们是互动的。例如，不管有没有蓝色链接，下面示例中的卡片仍然具有互动感。
在我们原来的例子中，蓝色标题可能看起来不错，但它让文本看起来像是交互式的。为了避免混淆，我们去掉了标题中的蓝色，因为它不具有交互性。
同时，我们也去掉了其他非交互元素（如星级）上的蓝色。这样就更容易看出哪些是互动的，哪些不是。
7.确保界面元素的对比度为 3:1
对比度是衡量两种颜色之间感知亮度差异的一个指标。它的比例范围从 1:1 到 21:1。例如，黑色背景上的黑色文字具有最低的 1:1 对比度，而白色背景上的黑色文字具有最高的 21:1 对比度。有很多工具和 Figma 插件 可以帮助您测量色彩对比度，我最喜欢的是 Web AIM 在线对比度检查工具 和 对比度 Figma 插件。
为了帮助确保有视力障碍的人能够清楚地看到界面细节，至少要达到《 网页内容可访问性指南》（WCAG） 2.1 AA 级色彩对比度要求。这意味着表单字段、图标和按钮等用户界面元素的对比度至少要达到 3:1。
在我们的示例中，照片上箭头图标的对比度太低。使用灰色作为图标的颜色，并添加纯白色背景，这样无论图标位于哪张照片上，都能达到 3:1 的对比度。这也降低了交互成本，因为图标的点击区域更大且清晰可见。
原始示例中的主按钮对比度也过低。我们之前在处理视觉层次时已经解决了这个问题，但在这里也值得一提。
低对比度按钮的风险在于，低视力者可能会因为看不到按钮的形状而无法将其识别为按钮。将按钮对比度提高到 3:1 以上，不仅可以使按钮变得易于使用，还有助于纠正视觉层次。了解更多 按钮设计技巧 ，避免常见错误。
将箭头图标和按钮的对比度提高到 3:1 以上，我们就能得到下面的设计。我们正在逐步实现这一目标，但仍有更多问题需要解决。
8.确保文字对比度为 4.5:1
为了帮助确保视力障碍人士能够清晰地阅读文字，文字需要满足以下 WCAG 2.1 AA 级对比度要求：
- 小文本（18px 及以下）的对比度至少为 4.5:1。
- 大文字（18px 以上为粗体或 24px 以上为普通字体）的对比度至少为 3:1。
在我们的示例中，照片计数元素中的小文本对比度不足。我们通过增加灰色容器的不透明度和添加文字阴影，将对比度提高到 4.5:1 以上。
位置文本的对比度也太低。较细的字体使其更加难以阅读。使用更深的灰色有助于使文字更易于阅读。我们将在短期内对文字进行进一步更新，以改善其效果。
9.不要只依赖颜色作为指标
色盲有很多种，主要影响男性。一般来说，色盲者很难区分红色和绿色，但有些人根本看不到任何颜色。
要确保色盲者也能使用界面，就不能仅仅依靠颜色来表达含义或区分视觉元素。你需要使用额外的视觉提示来区分界面元素。
在我们的示例中，"评论 "文本使用了蓝色来表示它是一个链接。如果去掉颜色，链接文本看起来就和其他文本一样，色盲者就无法分辨出这是一个链接。在没有颜色的情况下，用下划线将链接文字与其他文字明显区分开来。
10.使用单一无衬线字体
字体是一组具有相似风格或美感的相关字体。Helvetica 就是一种字体。字体是一种字体内部的变化，如重量或大小。例如，黑体 Helvetica 和正体 Helvetica 是 Helvetica 字体中的两种不同字体。
在我们的例子中，标题使用了一种细致的衬线字体，这种字体有点难读，可能会让某些人分心。此外，它的个性也可能与这款房产租赁应用程序中的某些照片不匹配。将其简化为无衬线字体（如正文所使用的字体）有助于提高可用性和美观度。
11.使用小写字母较高的字体
寻找小写字母较高、字母间距较大的字体，因为它们在小尺寸下通常更容易辨认。字体中小写字母的高度称为 x-高度。
我们的示例使用的是联盟斯巴达字体，其 x 高度相对较低。换成 x 高度较大的字体（如 Inter）有助于提高可读性。
下面是我们的示例将字体从 League Spartan 升级到 Inter 后的效果。我们在应用用户界面设计技巧方面取得了不错的进展，但还有一些问题需要解决。
12.限制使用大写字母
除非你是在对别人大喊大叫，否则使用大写字母的正当理由并不多。它声音大，难以阅读。
阅读时，你要看单词的形状，而不是每个字母。形状可以帮助你更快地识别单词。大写单词的形状都是一样的长方形。这就迫使你逐个阅读每个字母。
在我们的例子中，位置文本使用大写。将其改为句子大小写，即只有第一个单词和专有名词（人名、地名或事物名）大写，有助于提高可读性。
13.只使用正体和粗体
虽然一种字体有很多字号，但这并不意味着你需要在用户界面设计中使用所有的字号。使用大量不同权重的字体会给界面增加噪音和杂乱感。同时，这也增加了统一使用每种字体权重的难度。
快速使用技巧：
- 标题使用粗体，以突出标题。
- 其他较小的文字使用普通字号。
- 如果决定使用很细或很粗的字号，请将它们保留给标题和较大的文本，因为它们在较小的尺寸下可能难以阅读。
在我们的示例中，位置文本使用了浅色字体。尽管我们已将对比度提高到要求的 4.5:1 对比度以上，但对于某些人来说，较细的字符仍然难以阅读。将字体重量增加到普通字体有助于提高可读性并简化设计。
14.避免纯黑色文本
在用户界面设计中，通常最安全的做法是避免使用纯黑色，因为它与白色的对比度非常高。这种高对比度会导致阅读文本时眼睛疲劳。
黑色的色彩亮度为 0%，而白色的色彩亮度为 100%。色彩亮度的巨大差异会使我们的眼睛更加费力。最安全的做法是避免纯黑色与白色的对比，而是选择深灰色。
在我们的例子中，多个元素都使用了纯黑色。将其改为深灰色有助于提高可读性。之前在查看视觉层次时，我们注意到属性描述文字过于突出。为了确保界面元素按重要性顺序排列，我们在属性描述文本中使用了浅灰色，以降低其突出度。
15.文本左对齐
英语的阅读方式是从左向右，呈 "F "型向下排列。因此最好保持文本左对齐，以获得最佳的可读性。对于长篇正文，最安全的做法是避免居中对齐或对齐文本。这样更难阅读，尤其是对于有认知障碍的人来说。
居中对齐方式适用于标题和较短的文本，因为它可以快速阅读。但是，居中对齐方式会使较长的正文更难阅读，因为每一行的起点都在不断变化。你的眼睛需要更加努力才能找到每一行的起点。
在我们的示例中，属性描述文本是居中对齐的。左对齐可以提高文本的可读性，同时也与上方左对齐的文本保持一致。
16.正文文本至少使用 1.5 行高
行高是指两行文字之间的垂直距离。行间距有助于防止人们重读同一行文字。它还能让文字看起来更舒服，读起来更舒服。
为了提高可读性和易读性，尤其是对于长篇正文，应确保行高至少为 1.5（150%）。一般来说，行高保持在 1.5 到 2 之间效果较好。
在我们的例子中，正文的行高只有 1（100%）。增加到 1.5（150%）有助于提高可读性，看起来也更美观。
我们修复了它！
通过一些简单而强大的用户界面设计技巧，我们很快就发现并修复了示例用户界面设计中的一大堆问题。如有需要，您还可以进一步定制装饰性视觉风格，以匹配特定的品牌氛围。不过，在这个示例中，我们的重点是做好基础工作。
我希望你开始明白，用户界面设计并不难。它可能看起来是一种神奇的艺术形式，但其中的很多内容都是由我们刚刚学到的逻辑准则构成的。使用客观逻辑，而不是主观意见，可以更快、更容易地设计出直观、易用和美观的界面。
你应用这些用户界面设计技巧越多，它们就会越自然地成为你设计工作流程的一部分。把它们当作一个坚实的基础，你可以在此基础上探索新的想法，尝试不同的方法，发挥你的创造力。
想要了解更多 UI 设计技巧吗？
- 作者:xingyan
- 链接:http://blog.xingyan.me/article/22064cad-d821-8036-a138-d545277912a3
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
