6000字长文！科普30个UI设计师应该掌握的专业术语

每个领域都有自己的专有名词和术语，掌握它们才能更好地和工作伙伴沟通。作为一名资深UI设计师，我整理了以下30个UI设计师应该掌握的专业术语，希望能帮助大家更好地理解和运用这些概念。

这些术语包含三大类：基础名词、常用UI设计元素以及UI设计流程和方法。对于新手小白来说，了解这些是你入门UI设计的必经之路；对于“老司机”来说，也可以趁此机会查漏补缺，看看自己还有哪些概念没有掌握。话不多说，一起来看看吧~

一、基础名词

1、UI（User Interface，用户界面）

UI即用户界面，是指用户与产品进行交互的界面。UI设计主要通过合理的布局、清晰的导航和吸引人的视觉元素，提升用户体验，使用户能够直观、方便地使用产品。

比如，在设计一个APP的界面时，UI设计师需要考虑颜色、字体、图标、按钮等视觉元素，确保界面美观且易于使用。同时，还需要考虑屏幕大小、触摸交互和响应速度等因素，确保用户在不同设备上都有良好的使用体验。

常用的UI工具有：

1）Figma：不用多说，可以说是全球最火的UI设计工具，提供了全面的工具和功能来设计界面，同时还有丰富的插件生态系统，以及庞大的用户交流社区。在线使用，付费版$12/月起。但Figma对国内用户有一些老大难问题，比如无本地化支持、订阅价格贵等。

2）摹客DT：更适合国内设计师的UI设计工具，也是在线使用，完全免费，学习门槛极低，功能上覆盖了Figma的95%以上，全中文界面对英文不好的小伙伴来说不要太友好。

2、UX（User Experience，用户体验）

UX（用户体验）是指用户在使用产品过程中所产生的整体感受和体验。它不仅包括用户界面的设计，还涵盖了用户与产品互动的全过程。UX设计的目标是提高用户满意度，通过优化可用性、易用性和愉悦性，使产品更符合用户需求。

比如，在设计一个电商网站时，设计师需要关注用户在浏览商品、添加购物车、结算支付等环节的流畅度和便捷性，从而提升整体购物体验。通过用户测试和反馈，设计师可以不断优化这些流程，确保用户能够轻松完成购买。

需要注意的是，虽然UX和UI都涉及用户与产品的互动，但UI专注于视觉设计和交互元素，而UX则涵盖了更广泛的用户情感和行为体验。

3、GUI（Graphical User Interface, 图形用户界面）

GUI（图形用户界面）是指通过图形元素（如窗口、图标、按钮）与用户进行交互的界面。GUI使用户能够通过视觉和交互元素直观地操作系统和应用程序，减少了对命令行输入的依赖。GUI设计主要是为了提高用户的操作效率和使用体验，使软件产品更加易用和友好。

4、设计系统（Design System）

设计系统是一套标准化的设计规范和组件库，用于指导和统一产品的设计和开发。

设计系统包括颜色、字体、间距、图标、按钮等视觉元素的定义，以及这些元素在不同情况下的使用规范。建立设计系统是确保产品的一致性和可扩展性，提高设计和开发效率。

像苹果的人机界面设计指南非常出名，它为设计师提供了一系列的设计规范和建议，确保不同应用和平台上的产品都具有一致的外观和体验。

5、栅格系统（Grid System）

栅格系统是一种用于网页设计和排版的布局系统，它通过将页面划分为等宽的列和行，使得设计师可以更方便地将内容放置在页面上，确保页面元素的合理布局。栅格系统是现代网页和应用设计中常用的工具，特别是在响应式设计中，栅格系统能够灵活适应不同屏幕尺寸。

6、像素（PX）

像素是图像显示的最小单位，通常用于描述数字图像的分辨率。在屏幕上，像素数量越多，图像越清晰。每个像素可以显示一种颜色，通过成千上万个像素的组合，形成我们在屏幕上看到的完整图像。UI设计师在设计时需要考虑像素的大小和分辨率，以确保图像在各种设备上都能清晰显示。

7、视觉层次（Visual Hierarchy）

视觉层次是通过将界面元素进行设计上的区分，引导用户的注意力，使用户能够优先关注最重要的信息。视觉层次不仅仅包含文字，还包含图片，视频按钮以及文字以外的所有视觉元素。

比如，在设计一个新闻网站的首页时，可以通过加大标题字体、使用醒目的颜色和放置在页面顶部等方法，突出最新和最重要的新闻。同时，次要新闻和其他内容则使用较小的字体和颜色，以次级位置显示，从而建立明确的视觉层次。

8、情绪板（Mood Board）

情绪板是用于传达设计项目整体视觉风格和情感的工具。它通常由图片、颜色、字体、质感和其他视觉元素组成，帮助设计师在项目初期确定设计方向。

比如，在为一家咖啡店设计品牌时，设计师可以创建一个情绪板，捕捉设计的灵感来源，包含温暖的咖啡色调、手绘风格的插图、舒适的室内环境图片，以及复古风格的字体等，以便传达项目的审美和感觉，为后续的设计工作提供参考。

二、常用UI设计元素

1、按钮（Button）

按钮（Button）是用户界面中最常见的交互元素之一，用于触发某种操作。按钮通常以矩形或圆形的形状呈现，包含文字或图标，通过点击或触摸激活相应的功能。

一个好的按钮应该有明确的视觉层次，通过颜色、大小和位置突出其重要性。比如，电商平台的“结算”按钮非常重要，设计师通常会使用对比鲜明的颜色和较大的尺寸，使其在页面中显眼，方便用户找到并点击。此外，按钮的状态变化（如悬停、点击）也应设计得当，要给用户提供明确的反馈。

2、输入框

输入框主要用于用户输入和编辑文本信息，还包括填写表单、搜索内容、输入密码等操作。

在设计输入框时，要注意有清晰的边界和提示文本，帮助用户理解需要输入的内容。比如，在设计一个注册表单时，输入框的标签和占位符文本可以提示出需要输入的信息，如“用户名”、“邮箱地址”等。此外，输入框在获取焦点时应有视觉变化，如边框颜色改变，以提示用户当前的输入位置。

3、图标（Icon）

图标在UI中，是最基础也是很重要的设计元素，通常具有高度辨识度和简洁的设计风格，能够帮助用户快速理解当前的操作、内容或状态。

图标的设计需要考虑清晰可辨和一致性。也就是说，一个图标应该在不同尺寸下都能让用户一眼识别，并且与界面中的其他图标风格一致，比如图标的线条、填充和颜色风格等，以保持界面的整体协调。

4、导航栏

导航栏。顾名思义，是用于提供页面或应用的导航功能。导航栏通常位于界面的顶部、底部或侧边，包含链接或按钮，帮助用户快速访问不同的页面或功能模块。

在设计导航栏时，一定要充分考虑它的易用性。比如，在设计一个电商网站时，导航栏可能包含“首页”、“产品分类”、“购物车”等选项。设计师应确保导航栏的布局简洁，避免选项过多导致的视觉混乱，并使用高对比度的颜色和适当的间距提高可读性。

5、下拉菜单

下拉菜单（Dropdown Menu）是用户界面中的常见控件，用于显示和选择多个选项中的一个。下拉菜单通常以按钮或文本框的形式呈现，当用户点击时，会展开显示可供选择的选项列表。

一个好的下拉菜单应该有明确的触发元素和清晰的选项列表。设计师应确保选项列表在展开时不会遮挡其他重要内容，并且选项之间有足够的间距，避免误操作。同时，下拉菜单在展开和收起时应有流畅的动画效果，以提升用户体验。

6、面包屑

面包屑是一种辅助导航元素，用于显示用户在网站或应用中的位置路径。面包屑导航通常以水平排列的链接形式呈现，每个链接代表用户当前位置的上一级页面，用户可以点击这些链接快速返回到之前的页面。

比如，在一个电商网站中，面包屑导航可以显示“首页 > 电子产品 > 手机 > 智能手机”，帮助用户了解他们所在的页面位置，并方便地返回到上一级目录。设计师应确保面包屑导航的层级关系清晰，并使用分隔符（如“>”）来区分不同层级，以提升用户的导航体验。

7、复选框

复选框用于表示多项选择中的一个或多个选项，通常以小方框的形式呈现，用户点击后会在方框内显示勾选标记，表示该选项被选择。

设计复选框时，要确保用户能够轻松点击和识别，并且在用户勾选或取消勾选时提供明确的视觉反馈，如颜色变化或勾选动画。

8、卡片

卡片用于将页面相关的信息和操作整合在一个独立的视觉容器中，通常包含标题、图片、文本和操作按钮，呈现简洁而有条理的内容块。

卡片的设计需要考虑内容组织和视觉层次。一个好的卡片应当清晰地展示关键信息，并通过合理的布局和间距提高可读性。比如，在设计一个内容网站时，每篇文章可以用一张卡片来展示，包括标题、摘要、图片和阅读按钮。设计师应确保卡片内部的元素排列有序，并使用阴影或边框来区分不同的卡片，提升界面的层次感。

9、进度条

进度条用于展示任务或过程的完成进度，通常以水平或垂直的条形图形式呈现，通过填充颜色或移动条块来表示进度的百分比。

进度条的设计需要考虑清晰性和及时反馈，要明确显示当前进度，并在任务进行过程中提供实时更新。比如，在设计一个文件上传界面时，进度条可以显示文件上传的完成百分比，帮助用户了解任务的进展情况。

10、模态框

模态框是用户界面中的弹出窗口，用于显示重要信息或要求用户进行操作。模态框通常覆盖当前页面的内容，用户必须与其交互才能返回到主界面。

一个好的模态框应引起用户的注意，同时又不干扰整体用户体验。比如，在设计一个确认删除操作的模态框时，模态框应包含明确的标题、描述信息和操作按钮（如“确认删除”和“取消”），帮助用户做出决定。设计师应确保模态框的大小适中，避免过多内容造成视觉负担，并使用半透明背景来突出模态框的重要性。

11、工具提示（Tooltip）

工具提示（Tooltip）算是一个小型弹窗，当用户悬停或点击某个元素时提供额外的说明或帮助。工具提示通常显示在目标元素的附近，包含简短的文本说明。工具提示的设计最重要的是简洁、易读，以便用户快速获取所需信息。

12、CTA（Call to Action，用户行为召唤）

用户行为召唤是用于引导用户执行特定操作，如购买、注册、下载等，通常以按钮或链接的形式呈现，具有明确的指示性文字和突出的视觉设计。

在设计CTA时，一定要使用醒目的颜色，并注意大小和位置，确保用户能够轻松找到并点击。比如，在设计一个产品销售页面时，“立即购买”或“添加到购物车”的CTA按钮应放置在显眼的位置，使用对比强烈的颜色、清晰直接的文本吸引用户注意并鼓励他们采取行动。

三、UI设计流程和方法

1、可访问性（Accessibility）

可访问性是指在设计过程中考虑所有用户的需求，比如障碍人士的需求等，让各种用户更容易浏览和使用（电脑、手机、网页、UI等等），使得有障碍的用户更便捷地感知、理解、互动。

可访问性设计的方法包括给图像添加替代文本、使用高对比度颜色、确保键盘导航的可用性和为屏幕阅读器优化内容等。比如，在设计一个网站时，设计师应确保所有按钮和链接有明确的标签，使用足够大的字体，提供文本缩放功能，并避免依赖仅通过颜色传达信息。通过这些措施，设计师可以创建对用户更加友好的产品，提高整体用户体验和满意度。

2、响应式设计（Responsive）

响应式设计（Responsive）是指网页设计的一种技术，使得网页能够根据不同设备的屏幕尺寸和分辨率自适应地调整布局和内容，以达到最佳的用户体验。这种技术可以让网页在桌面电脑、平板电脑、手机等不同设备上都能够呈现出最佳的效果，而不需要为每个设备单独设计不同的网页。

比如，在设计一个博客网站时，设计师可以使用响应式网格系统，当用户在桌面电脑上浏览时，页面显示多栏布局，而在手机上浏览时，页面自动调整为单栏布局，便于阅读和导航。

3、自适应设计（Adaptive）

自适应（Adaptive）是一种设计方法，通过创建多个特定的布局版本，来适应不同设备和屏幕尺寸，从而提供优化的用户体验。与响应式设计不同，自适应设计根据设备类型加载预定义的布局，而不是通过调整同一个布局来适应不同屏幕。

4、A/B 测试

A/B 测试是一种比较两种或多种设计版本效果的方法，用于确定哪种设计更能满足用户需求和实现预期目标。在A/B测试中，用户随机分配到不同的设计版本中，通过分析用户行为和反馈，评估各版本的性能差异。

A/B测试的实施通常涉及创建多个设计变体（如不同的按钮颜色、标题文案等），然后对用户进行分组。比如，在一个电商网站中，设计师可以测试两种不同的结算页面设计，观察哪一种能提高用户的完成购买率。通过这种测试方法，设计师可以基于实际数据做出优化决策，提高设计效果和用户体验。

5、5秒法则（Five-Second Rule）

5秒法则（Five-Second Rule）是UI设计中的一个原则，指用户在访问页面的前5秒内应能够理解页面的主要内容和功能，并决定是否继续浏览。该法则强调界面设计的清晰性和信息传达的效率，帮助设计师创建简洁而直观的用户体验。

实现5秒法则的方法包括优化页面的视觉层次、突出关键内容和简化导航。比如，在设计一个登陆页面时，设计师应确保品牌标识、主要标题和用户行为召唤（CTA）在页面上明显且易于识别。同时，避免过多的干扰元素，使用户能够快速抓住页面的核心信息。通过遵循5秒法则，设计师可以提高页面的吸引力和用户的留存率。

6、自动布局

通过定义元素之间的关系和约束，自动调整界面布局以适应不同屏幕尺寸和设备，这种设计方法就叫自动布局。自动布局可以减少手动调整布局的工作量，创建更灵活和适应性强的界面，提高用户体验和设计效率。

7、切图

切图是UI设计交付开发过程中的一个步骤，指将设计师创建的高保真原型中的图像和图形元素，切割成独立的资源文件，以便在网页或应用中使用。切图的目的是确保设计元素在实际产品中显示正确，并优化加载性能。

通过精确切图，开发人员可以确保在各种设备上都能准确显示设计元素，并且加载速度快、占用资源少。

8、可用性测试

可用性测试是UI设计过程中的一项关键方法，通过观察真实用户与产品的交互，评估界面的易用性和用户体验。可用性测试的目标是发现设计中的问题和改进机会，从而优化产品的功能和用户满意度。

实施可用性测试的方法包括邀请目标用户执行特定任务，并记录他们的操作过程和反馈。比如，在设计一个银行应用时，设计师可以安排用户完成任务，如“转账”或“查看账户余额”，并观察用户是否能顺利完成任务，以及遇到的困难和困惑。通过这些观察，设计师可以识别出界面中的问题，并根据用户的实际使用情况进行改进。

9、视觉一致性（Visual Consistency）

视觉一致性（Visual Consistency）是UI设计中的一个重要原则，指在整个产品中保持统一的视觉风格和设计元素。这包括颜色、字体、图标、按钮样式和间距等。视觉一致性可以增强用户体验，使界面看起来协调、专业，并且易于用户理解和操作。

实现视觉一致性的方法包括制定并遵循设计系统或风格指南。比如，在设计一个企业级应用时，设计师应确保所有页面使用一致的配色方案、相同的字体和统一的按钮样式。通过保持视觉一致性，设计师可以增强品牌识别度，提高产品的可用性和用户满意度。

10、设计走查（Design Review）

设计走查指设计师与团队成员共同审查设计方案，识别潜在问题并提出改进建议，目的是确保设计的质量和一致性，发现并解决设计中的问题，提高最终产品的用户体验。

进行设计走查的方法包括定期安排团队会议，逐步审查每个设计元素和界面布局等。比如，在开发一个新的移动应用时，设计师可以与产品经理、开发人员和用户体验专家一起审查每个页面的设计，讨论颜色、排版、交互方式等细节。通过这种协作，团队能够集思广益，发现问题并进行优化，确保设计方案在开发阶段之前达到最佳状态。

以上就是30个UI设计师应该掌握的专业术语，希望这些内容能帮助你更好地理解并应用这些概念，在成为优秀设计师的路上更进一步！