完整的 UI 术语表：所有设计师都应该知道的 100 个术语

时间：2023-09-10 13:00:02 | 来源：网站运营

时间：2023-09-10 13:00:02 来源：网站运营

完整的 UI 术语表：所有设计师都应该知道的 100 个术语：如果你想在 UI 中工作（或与 UI 设计师一起工作），你需要会说这些语言。在我们的 UI 词汇表中，下面汇编（并解释了）100 个所有设计师都应该知道的术语、短语和资源。

UI 设计本身就是一种语言。有很多有趣的术语和小众流行语。整理了100 个所有设计师都应该知道的最重要的 UI 术语、短语和资源。

1.无障碍设计

可访问性或可访问性设计可帮助具有各种能力的用户与产品进行交互。要实施无障碍设计，您必须为色盲、视觉障碍、聋哑或听力障碍者以及认知障碍者进行设计。

2. 手风琴

在 UI 设计中，折叠式菜单是一种垂直堆叠项目的菜单，可让用户展开和折叠内容。当用户单击标签时，该部分会展开以显示扩展内容。一次可以打开一个或多个标签，它可以帮助用户快速浏览大量信息。

3.Adobe XD

Adobe XD是最流行的UX 和 UI 设计工具之一。作为 Adob​​e Creative Cloud 套件的一部分，它是一个基于矢量的设计工具，用于创建线框、原型、动画和 UI 设计。

4.对齐

对齐是用于创建结构和可读性的设计原则。它建立秩序并帮助引导人们完成您的设计。

5.动画

在 UI 术语中，动画是向任何 UI 元素添加动作以改善产品交互性的行为。动画可用于标记进度条中的不同阶段，或者它们可以简单地用于为徽标添加有趣和运动的元素。

6. 上升者

在排版中（在下面第 90 中介绍），字母写在基线上。大多数字母会达到 x 高度，我们在第 100 中对此进行了解释，但超过该高度的字母称为上升高度。这些字母包括 b、d、f、h、i、j、k、l 和 t。

7. 基线

如数字 6 和 24 所述，基线是文本位于页面上的不可见线。在 UI 设计中，基线是文本和任何其他元素之间的重要测量工具。

8. 便当菜单

便当菜单以将饭菜打包成整齐的部分的日本午餐盒命名，是一种带有网格项目的菜单。它一次提供多个项目的概览。

9.面包屑

继续食物主题，面包屑是一个导航系统，它显示用户当前在网站中的位置。面包屑通常位于页面的顶部，让用户可以看到他们当前的位置以及他们到达那里所采取的步骤。由于这些是可点击的链接，用户可以返回阅读或编辑他们填写的任何信息。 例如，如果您正在浏览 ASOS 服装网站，您可能会看到显示您所在位置（以及您是如何获得的）的链接轨迹那里）如下： 首页 > 男装 > 运动装 > 鞋子

10.断点

断点是需要对布局进行特定更改的屏幕尺寸的预定范围。

11. 按钮

按钮通过文本、图像或两者来指示用户采取行动。

12. 号召性用语/CTA

号召性用语按钮（或 CTA）鼓励用户在网站或应用程序上执行特定操作。例如：注册、立即预订、订阅。CTA 按钮作为转换目标存在，鼓励用户购买、消费或注册产品或服务。

13. 卡片

卡片将相关内容并排分组，以便用户无需滚动列表即可找到他们正在寻找的信息。正方形或长方形，它们具有名片的外观，可以包括按钮、文本和图像。

14. 轮播/图片轮播

很多人都会熟悉图像轮播，因为 LinkedIn 和 Instagram 使用这种格式来显示多张图像。但是，这些图像是超链接的，因此用户可以浏览一组项目/图像并为特定操作选择一个。这是另一种节省屏幕空间的巧妙方法，因为它允许在一个部分中显示多个项目。

15. 复选框

复选框允许用户从屏幕上的框中“选中”或“取消选中”项目。每个项目单独操作，但用户通常可以检查多个项目。您通常会在申请表或调查表上看到一个复选框。

16. 分组

设计师使用分块将大块信息、图像或文本分解成更小的块，使其更容易理解。当项目或信息在网页或应用程序的同一区域中“分组”时，可以认为它们是相关的或连接的。

17.调色板

调色板是新设计的颜色的小组合。UI设计师将使用这些来直观地代表品牌，视觉上令人愉悦并传达不同的信息。例如，红色可用于警告或错误，绿色可用于成功。

18. 颜色模型

颜色模型是一种有助于使用数字或字母描述颜色的系统。最流行的 UI 设计颜色模型是：RGB – 红色、绿色、蓝色HSL – 色相、饱和度、亮度HSV/HSB – 色相、饱和度、值或亮度


HEX 是六个数字和字母的简写组合，用于表示 RGB 的许多不同值。例如，星巴克品牌中使用的绿色是#00704A，可口可乐品牌中使用的红色是#F40009。

19.评论框

评论框是当今大多数界面上的常见功能。它们用于显示用户的评论和反馈，按时间顺序或流行顺序运行。

20. 容器

容器是一种 UI 元素，旨在根据用户屏幕的大小包含一定宽度的页面元素。手风琴是容器的一个例子。

21. 柜台

在排版中，我们在下面的第 90 中进行了解释，计数器是字母的完全或部分被字母或符号包围的区域。该区域形成“碗”形。 封闭计数器是完全封闭的字母，它们包括：A、B、D、O、P、Q、R、a、b、d、e、g、o、p 和 q。打开的计数器是部分关闭的字母，它们包括但不限于：c、f、h、s 。

22. 评审

虽然有些人可能害怕任何形式的批评，但评审让设计师、研究人员和内容策略师走到一起，提供建设性的评审来改进产品。产品的创建者将与团队的其他成员讨论设计，然后他们会提出问题以进一步探索设计。两种最常见的评审形式是：沉默——在白板上使用便利贴，您的同事会将反馈写成问题。例如，如果有人对按钮的颜色不满意，他们可以写“我们可以试试其他颜色选项吗？” 在这种形式下，每个人都有机会发表自己的看法。常规的——在小组环境中，团队将坐下来讨论产品的设计过程。然而，这种评审有时会跑题，有些人可能没有机会发言。

23. 日期或时间选择器

日期或时间选择器允许用户从数字日历或时钟中选择日期和/或时间。然后将选定的日期或时间格式化并放入系统。这方面的一个日常示例是在餐厅预订餐桌。单击您选择的日期和时间后，您的请求将被发送到餐厅进行确认。

24. 后裔

第 6 的反面。在排版中，下降是位于 x 高度以下和基线以下的字母。这些字母包括 q、g、p、y 和 j。

25. 设计模式

UX 和 UI 设计模式是可重复、可重用的设计组件，用于解决用户经常遇到的可用性问题。例如，面包屑导航元素（我们的 UI 词汇表中的编号 9）是一种设计模式，用于向用户展示从主页到他们当前正在查看的页面的路径。

26. 设计系统

设计系统是设计团队的通用信息来源——在开始新设计项目时要遵守的设计资产、指南、约束和最佳实践的集合。 支付宝、微信、苹果、 Google都有自己的设计系统画布，人们可以访问和使用。

27. 设计思维

设计思维过程包括五个阶段：移情（与用户）、定义（问题）、构思（潜在解决方案）、原型和测试。设计思维用于解决特别棘手的 UI 问题。

28. 菜单图标

菜单图标类似于汉堡菜单，我们在第 43 号对其进行了更详细的解释。菜单由相互堆叠的三行组成，但每行的长度递减。最上面的线最长，中间的线更短，下面的第三条线更短。

29. 追波

Dribbble是一个社交媒体平台，专注于建立强大的设计师社区，无论是在寻找灵感还是合作。这是与其他设计师联系或寻找对自己工作的反馈的很好资源。

30.下拉/下拉列表

​​下拉列表类似于单选按钮，我们在 73 号中介绍过，但它们可以节省大量屏幕空间。当用户从列表中选择一个项目并且菜单下拉以显示更多信息时，会发生下拉操作。这些列表可能需要一个指令，例如“单击此处”，以帮助用户导航空间。

31. 下拉按钮

下拉按钮是下拉列表中用于显示项目列表的可点击按钮。

32. 缓和

缓动（或缓入缓出）是动画 UI 元素缓慢而渐进的移动。具体来说，缓动是指动画的运动以及它如何逐渐开始运动，而不是摇晃开始或突然结束。

33. PS

PS是Adobe公司开发的一款名叫Adobe photoshop的图片编辑软件的简称。PhotoShop可以进行图片美化，尺寸修改,界面设计等。

34. Figma

Figma是一个基于浏览器的界面设计工具，可实现快速设计和原型制作以及流畅的协作工作流程。它是最流行的设计工具之一，你很难找到不使用它的 UI 或 UX 设计师。

35. AE

AE是 After Effects的简称,是一款图形视频处理软件,我们可以用AE进行多种影像的合成,制作动画效果、制作出优美的视觉效果。

36. 字体

字体是字体或文本的特定大小、粗细和样式的名称。我们在下面的第 89 中更详细地介绍了字体，但它很容易与字体混淆。这是理解两者之间区别的简单方法：Helvetica 是一种字体，而 Helvetica Bold 或 Helvetica Italia 是字体。

37. 表格

表单是我们生活中的常规功能，但由于自动填充功能，表单的工作变得更加容易。与现实生活一样，表单由希望提交信息的用户填写。一个常见的例子是当您在线订购商品并在运输表格中填写您的地址时。

38. 表单域状态

数字表单应该改变它们的状态或外观，以便用户在遇到它们时知道该怎么做。字段状态可以有以下形式：原始- 这是用户与其交互之前的默认状态

On hover – 这是当用户的光标悬停在表单域上方时发生的状态。用户不会在移动、触摸或滑动设备上看到此选项

选中/聚焦- 当用户与表单交互时，此状态会告诉他们输入信息。它应该在视觉上与其他表单域状态不同。例如，让键盘出现在字段中或让屏幕完全聚焦在该字段上。

已禁用– 此状态让用户知道此元素当前不可用于交互。它会告诉用户他们要么需要先完成其他事情，要么这个选项不可用。例如，当您在网上订餐但未填写收货地址时，您可能无法填写付款详情。

内联验证- 如果用户已成功或未成功完成某个字段，此状态通常会显示为绿色勾号或红色 X。例如，如果您输入了信用卡详细信息但信息错误，则会提示您输入您的信息正确。

39. 全栈设计师

全栈设计师是指具有承担产品设计和开发过程的所有“堆栈”（或层）的技能和专业知识的设计师。虽然大多数设计师只专注于一个领域，例如 UX 设计或 UI 设计，但全栈设计师可以从事 UX 设计、UI 设计、交互设计甚至前端开发。

40.格式塔原则

格式塔原则是一组心理学定律，描述了我们的大脑如何组织和解释视觉数据。格式塔原则可用于为设计决策提供信息并塑造用户与产品的交互。例如，邻近法则指出，位置靠近的元素似乎比距离较远的元素更相关。如果您根据邻近法则设计网站，您会将相关元素更紧密地组合在一起。

接近度：彼此靠近的元素被认为比距离较远的元素更密切

相关：相似的元素被认为比不同的元素更相关。形状、比例、方向和颜色都有助于使元素看起来相似。连续性：当元素被放置在一条直线或软曲线中时，它们被认为比那些随机排列的元素更相关。当内容流向某个方向时，同样的概念也适用。

连接性：当我们在脱节或不完整的对象中看到连接时。一个很好的例子是在实际连接点之前识别连接点图片中的图像。

闭合：当我们查看复杂的视觉元素时，我们自然会寻找单一或可识别的模式。换句话说，我们填补了我们看不到的空白。我们不需要查看徽标中的每个元素来识别它属于哪个公司或品牌。这方面的例子包括星巴克、Adobe 或 NBC 的徽标。

41. 网格

在 UI 设计中，网格是一种布局约束，用于确定 UI 元素在屏幕或页面上的位置。作为有效设计系统的基础，它们使用列和行为布局带来秩序，并有助于保持一致性并消除任何错误空间。它使围绕尺寸和空间的决策过程变得更快、更容易。

这些是不同网格类型的标准数字： 台式机：12 列、平板电脑：8 列、移动设备：4 列、可穿戴设备：2 列

42. 排水沟

排水沟是网格中列之间的垂直条，用于防止元素相互碰撞。

43. 汉堡菜单

三个等长的水平线堆叠在一起，汉堡菜单看起来像 - 但尝起来不像 - 汉堡包。这个非常常用的图标通常位于应用程序的顶部角落。单击后，它会像抽屉一样打开，显示多个导航链接的列表。

44.层次结构

层次结构是一种 UI 设计原则，用于根据信息的重要性以不同的强调级别呈现信息。这样做有助于引导用户浏览网页或应用程序。

45. 图标

有许多图像可以作为普遍理解的符号。图标是原始图像的一个非常基本的版本，可帮助用户浏览网页或应用程序。通常超链接，它们在不使用任何文本的情况下传达内容或提示操作。一个明显的例子是购物车图标，它告诉您您在网上商店购买了哪些商品。

46. 信息组件

在 UI 设计中，信息组件是告诉用户正在发生什么的元素。虽然我们在词汇表的其他地方详细介绍了这些元素，但工具提示、图标、进度条、通知、消息框和模式窗口都是信息组件的示例。

47.输入控制

输入控件是在任何界面上使用的交互元素。这些包括复选框、单选按钮、下拉列表、列表框、按钮、切换、文本字段和日期字段。

48. 输入栏

相当不言自明，输入字段是用户可以将内容输入系统的地方。表单是最常见的示例，但搜索栏是我们每小时使用的输入字段的示例。

49. 站酷

站酷(http://www.zcool.com.cn),聚焦了非常多的优秀设计创意从业者、爱好者，提供学习、展示、交流、就业、交易的国内设计师平台。

50. 烤肉串菜单

UI 烤肉串菜单不仅仅是一个深夜菜单，它由三个垂直点组成，代表一组分组选项供用户导航。不要与我们在 58 号中解释的肉丸菜单混淆。

51. 行高

行高是文本行上方和下方的距离。当空间太多时，内容可能会显得不连贯，而空间太小，则可能很难阅读。

55. 安全间距

当人们谈论边距时，他们谈论的是位于网格左右两侧的区域，我们在上面的第 41 条中对此进行了解释。

56. UI中国

国内具有影响力的UI设计平台之一。

57. 肉丸菜单

与烤肉串菜单类似，肉丸菜单是一组三个水平点。当用户点击这些点时，会显示更多选项。

58.消息框

消息框是一个弹出的小窗口，向用户提供信息并要求他们在进入下一步之前采取行动。一个很好的例子是，如果您正在从手机中删除一个应用程序，并且会弹出一条小消息以确认您是否确实要删除它。

59. 模态

消息框也称为模式窗口，它们的工作方式相同。

60.情绪板

情绪板本质上是设计作品中图像、文本和对象样本的拼贴。它们是用于产品头脑风暴阶段的视觉呈现。

61. 导航组件

导航组件是允许用户与您的产品交互和使用的元素。面包屑、滑块、搜索字段、分页、滑块、标签和图标都是导航组件的示例。它们让用户知道他们在哪里，并帮助他们到达下一个想要的位置。

62. 通知

通知是我们生活中的常规功能。在应用程序或网页中使用时，通知会在用户看到新内容时提醒用户，例如新消息、已完成的任务或发生错误。它们可以显示为点、标志、感叹号——任何东西。

63. Axure

Axure是一款原型设计工具,可以用动画效果表现出清晰的内容。

64. 填充

填充是网格列内的间距，它就像边缘周围的垫子一样。填充物在设计中允许更多的呼吸空间——奢侈品牌利用这一点——但这样做，你可以减少内容。

65. 分页

通过在不同页面之间划分内容，分页让读者知道他们在哪里，同时允许他们在页面之间跳过或按顺序阅读。

66.加号按钮

通常形状像加号，加号按钮表示可以将新内容添加到数字产品中。例如，在您的电话通讯录中，加号按钮表示您可以将新人添加到您的电话簿中。在 Spotify 上，加号按钮意味着您可以将新歌曲添加到播放列表中。在某些情况下，单击加号按钮将打开一个模式窗口以创建新内容。

67.主要按钮和次要按钮

如果屏幕上有多个 CTA（在数字 12 中说明），主按钮会让我们知道哪个操作最重要。次要按钮仍然是一个重要的 CTA，但不如主要按钮重要。它应该在视觉上不占优势，并且不应该与主要的图像或外观发生冲突。

68. Principle

Principle for Mac是一款易于使用的设计软件，用于创建动画和交互元素。

69. 进度条

进度条用于直观地告诉用户他们在多步骤过程中的位置。它们通常用于在线商店的结账，告诉用户在他们完全购买商品之前还剩下多少阶段。

70. 原型

原型是最终产品将（或可能）看起来像的模拟或模型。UX 设计师创建原型以收集反馈并改进他们的设计，然后再将其推向开发。您可以在本指南中了解有关原型制作和一些最流行的原型制作工具的更多信息。

71.ProtoPie

ProtoPie是一款灵活而强大的原型制作工具，因其易于使用的界面和几乎不存在的学习曲线而受到设计界的好评。

72. 单选按钮

单选按钮是小的圆形按钮，用于允许用户一次选择一个项目。这些可能与复选框混淆，复选框允许用户一次单击多个项目。

73.响应式设计

响应式设计可确保您的设计在不同的屏幕尺寸上准确显示。无论是在台式电脑、平板电脑还是智能手机上查看，响应式设计的网站都会看起来很棒。

74. 扫描模式

在规划网页或应用程序的布局时，设计人员必须仔细选择重要文本或图像的位置，以适应读者的“扫描”风格。雅各布尼尔森根据眼球追踪数据进行了一项研究，得出的结论是人们通常不阅读网格，但他们会扫描它。要记住的两种扫描模式是：

F 模式– 通过水平扫描页面并从左到右、从后到左、从下到左到右阅读，用户以 F 形阅读。

Z 模式——通过从左到右、对角线向下、从左到右扫描页面，用户以锯齿形或 Z 形阅读。

75. 搜索栏

搜索字段允许用户键入关键字、短语或查询来搜索索引并找到最相关的结果。搜索字段通常是单行文本框——有时里面有一个放大镜图像——并且它们带有一个随附的搜索按钮。

76.分享按钮

共享按钮用于在外部向其他社交网络帐户共享页面或产品。每个社交网络帐户都由其自己易于识别的图标表示。

77. 侧边栏

侧边栏可以是可见的或隐藏的，它在网页或应用程序的一侧显示导航操作或内容的菜单。

78.Sketch

Sketch是一个矢量图形编辑器，用于绘图、线框图、原型制作和设计交接——基本上是您将设计变为现实所需的一切。它是一个强大而灵活的 UX 和 UI 设计平台，专为协作设计而构建。长期以来，它一直被认为是行业标准工具，非常适合初学者和高级设计师。

79. 滑块控件

滑块允许用户设置或更改值。一个非常常见的例子是，当您搜索度假住宿时，您可以设置您的价格范围。另一个示例是更改手机屏幕上的亮度级别。

80.步进器

步进器与滑块非常相似，因为它们允许用户调整值。但是，步进器仅允许用户更改预定义数量的值。

81. 标记

标签是用户在同一类别中查找内容（如博客文章）的一种简便方法。标签充当标签，使用相关关键字对内容进行分类，以便用户可以找到他们正在寻找的内容。

82. 标签栏

标签栏出现在移动应用程序的底部，它们使用易于区分的图标告诉用户他们在哪里。它还允许用户在应用程序的不同部分之间来回移动。

83. 文本字段

文本字段非常简单，允许用户输入文本。在表格或问卷中使用，用户可以输入单行或多行文本。

84. 拇指可达性

很容易记住作为经验法则。人们在使用手机时，通常只用拇指即可操作。人们无法将拇指伸到屏幕的顶部或中间，因此设计师需要考虑围绕此放置屏幕上的交互元素。

屏幕的左上角是拇指难以触及的，而左下角则容易。屏幕的右下角和中心是可行的，但并不理想。

85. 工具提示

当用户将鼠标悬停在某个项目上时，会出现一个工具提示来进一步解释它。例如，当在线商店询问您的 CVV 号码时，通常会出现一个工具提示，告诉您在哪里可以找到信用卡或借记卡上的 CVV 号码。

86. 切换

切换按钮就像一个开关，允许用户在两​​种状态之间更改设置。例如，可以在手机设置上使用拨动开关来打开或关闭 Wi-Fi 或蓝牙连接。

87.类型

类型是屏幕上任何文本或字母的基本描述。

88. 字体

字体是刻字的设计集。它可以在大小、重量、坡度、宽度等方面有所不同。Times、Arial 和 Sans Serif 都是字体的例子。

89. 排版

很容易与字体混淆，排版是刻字本身的艺术。它专门指字母的排列和样式。设计师必须选择对用户来说既清晰又具有视觉吸引力的排版。

90. 墨刀

墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等，能够搭建为产品原型，演示项目效果。

91. 用户界面

用户界面（UI）是人与计算机之间的交互点。它包含用户与数字产品交互所需的所有功能：输入控件 使用户能够输入信息N导航元素允许用户从一个点移动到下一个点 为用户提供有价值信息的 信息组件容器组将内容分成有意义的部分。UI设计师负责创建用户友好且美观的界面。

92. 用户界面设计

UI设计是设计用户界面的过程。用户界面是人与计算机之间的交互点。用户界面设计关注最终用户对数字产品的外观、感觉和行为方式。良好的 UI 是创造令人愉悦的用户体验的一部分，UX 和 UI 设计师紧密合作。

93. 用户界面元素

UI 元素是应用程序和网站设计中使用的构建块。当您使用网站或应用程序时，您会遇到按钮、表单、菜单、下拉列表、图像轮播等。这些都是 UI 元素的示例。

94. 用户体验

UX 代表“用户体验”，它基本上描述了用户在使用产品或服务时的感受。好的用户体验是轻松愉快的，而糟糕的用户体验是复杂的、令人困惑的和令人沮丧的。

95. 用户体验设计

UX 设计是设计上述第 95 条中解释的这些体验的过程。它涉及识别和理解特定的用户问题，并设计产品或服务以以用户为中心的方式解决问题。

96. 用户体验

UXPin是一种 UX 和 UI 工具，一个端到端平台，能够提供精美的交互式原型，无需编码技能。

97. 视觉设计

视觉设计考虑了应用程序或网站的美学。视觉设计和 UI 设计之间有很大的重叠，但一个常见的区别是视觉设计师会考虑整体视觉品牌和身份，而不是专注于个人设计。

98. 线框

线框图描绘了网站或应用程序的“基本骨架”，重点关注屏幕上不同元素的布局和定位。线框图允许您在将最初的概念开发成高保真设计并最终成为实时产品之前对其进行测试和验证。

99. X-高度

在决定字体及其大小时，设计师将使用小写 x 的高度来确定字体中所有小写字母的高度。如果任何字母超出 x 高度，则它们被称为上升字母。任何低于 x 高度的字母都称为下降字母。如果 x 高度较小，则需要增加字体大小以提高可读性。

100.蓝湖

蓝湖是一款基于云的软件，它在 UI 设计师和前端开发人员之间架起了一座桥梁。它提供了一个平台来发布设计并生成规范和代码片段，以保障与开发人员顺利交接。




——

谷和体验设计

杭州谷和设计有限公司专注智能终端、数字化产品UI/UX设计

http://www.goohoux.com