30个UI设计师应该掌握的专业术语
每个领域都有自己的专有名词和术语，掌握它们才能更好地和工作伙伴沟通。作为一名资深UI设计师，我整理了以下30个UI设计师应该掌握的专业术语，希望能帮助大家更好地理解和运用这些概念。
这些术语包含三大类：基础名词、常用UI设计元素以及UI设计流程和方法。对于新手小白来说，了解这些是你入门UI设计的必经之路；对于“老司机”来说，也可以趁此机会查漏补缺，看看自己还有哪些概念没有掌握。话不多说，一起来看看吧~
1、UI（UserInterface，用户界面）
UI即用户界面，是指用户与产品进行交互的界面。UI设计主要通过合理的布局、清晰的导航和吸引人的视觉元素，提升用户体验，使用户能够直观、方便地使用产品。
比如，在设计一个APP的界面时，UI设计师需要考虑颜色、字体、图标、按钮等视觉元素，确保界面美观且易于使用。同时，还需要考虑屏幕大小、触摸交互和响应速度等因素，确保用户在不同设备上都有良好的使用体验。
常用的UI工具有：
1）Figma（）：不用多说，可以说是全球最火的UI设计工具，提供了全面的工具和功能来设计界面，同时还有丰富的插件生态系统，以及庞大的用户交流社区。在线使用，付费版$12/月起。但Figma对国内用户有一些老大难问题，比如无本地化支持、订阅价格贵等。
2）摹客DT（）：更适合国内设计师的UI设计工具，也是在线使用，完全免费，学习门槛极低，功能上覆盖了Figma的95%以上，全中文界面对英文不好的小伙伴来说不要太友好。
2、UX（UserExperience，用户体验）
UX（用户体验）是指用户在使用产品过程中所产生的整体感受和体验。它不仅包括用户界面的设计，还涵盖了用户与产品互动的全过程。UX设计的目标是提高用户满意度，通过优化可用性、易用性和愉悦性，使产品更符合用户需求。
需要注意的是，虽然UX和UI都涉及用户与产品的互动，但UI专注于视觉设计和交互元素，而UX则涵盖了更广泛的用户情感和行为体验。
3、GUI（GraphicalUserInterface,图形用户界面）
GUI（图形用户界面）是指通过图形元素（如窗口、图标、按钮）与用户进行交互的界面。GUI使用户能够通过视觉和交互元素直观地操作系统和应用程序，减少了对命令行输入的依赖。GUI设计主要是为了提高用户的操作效率和使用体验，使软件产品更加易用和友好。
4、设计系统（DesignSystem）
设计系统是一套标准化的设计规范和组件库，用于指导和统一产品的设计和开发。
设计系统包括颜色、字体、间距、图标、按钮等视觉元素的定义，以及这些元素在不同情况下的使用规范。建立设计系统是确保产品的一致性和可扩展性，提高设计和开发效率。
像苹果的人机界面设计指南非常出名，它为设计师提供了一系列的设计规范和建议，确保不同应用和平台上的产品都具有一致的外观和体验。
5、栅格系统（GridSystem）
栅格系统是一种用于网页设计和排版的布局系统，它通过将页面划分为等宽的列和行，使得设计师可以更方便地将内容放置在页面上，确保页面元素的合理布局。栅格系统是现代网页和应用设计中常用的工具，特别是在响应式设计中，栅格系统能够灵活适应不同屏幕尺寸。
6、像素（PX）
像素是图像显示的最小单位，通常用于描述数字图像的分辨率。在屏幕上，像素数量越多，图像越清晰。每个像素可以显示一种颜色，通过成千上万个像素的组合，形成我们在屏幕上看到的完整图像。UI设计师在设计时需要考虑像素的大小和分辨率，以确保图像在各种设备上都能清晰显示。
7、视觉层次（VisualHierarchy）
8、情绪板（MoodBoard）
情绪板是用于传达设计项目整体视觉风格和情感的工具。它通常由图片、颜色、字体、质感和其他视觉元素组成，帮助设计师在项目初期确定设计方向。
1、按钮（Button）
2、输入框
输入框主要用于用户输入和编辑文本信息，还包括填写表单、搜索内容、输入密码等操作。
在设计输入框时，要注意有清晰的边界和提示文本，帮助用户理解需要输入的内容。比如，在设计一个注册表单时，输入框的标签和占位符文本可以提示出需要输入的信息，如“用户名”、“邮箱地址”等。此外，输入框在获取焦点时应有视觉变化，如边框颜色改变，以提示用户当前的输入位置。
3、图标（Icon）
图标在UI中，是最基础也是很重要的设计元素，通常具有高度辨识度和简洁的设计风格，能够帮助用户快速理解当前的操作、内容或状态。
图标的设计需要考虑清晰可辨和一致性。也就是说，一个图标应该在不同尺寸下都能让用户一眼识别，并且与界面中的其他图标风格一致，比如图标的线条、填充和颜色风格等，以保持界面的整体协调。
4、导航栏
5、下拉菜单
一个好的下拉菜单应该有明确的触发元素和清晰的选项列表。设计师应确保选项列表在展开时不会遮挡其他重要内容，并且选项之间有足够的间距，避免误操作。同时，下拉菜单在展开和收起时应有流畅的动画效果，以提升用户体验。
6、面包屑
7、复选框
8、卡片
卡片用于将页面相关的信息和操作整合在一个独立的视觉容器中，通常包含标题、图片、文本和操作按钮，呈现简洁而有条理的内容块。
卡片的设计需要考虑内容组织和视觉层次。一个好的卡片应当清晰地展示关键信息，并通过合理的布局和间距提高可读性。比如，在设计一个内容网站时，每篇文章可以用一张卡片来展示，包括标题、摘要、图片和阅读按钮。设计师应确保卡片内部的元素排列有序，并使用阴影或边框来区分不同的卡片，提升界面的层次感。
9、进度条
进度条用于展示任务或过程的完成进度，通常以水平或垂直的条形图形式呈现，通过填充颜色或移动条块来表示进度的百分比。
10、模态框
模态框是用户界面中的弹出窗口，用于显示重要信息或要求用户进行操作。模态框通常覆盖当前页面的内容，用户必须与其交互才能返回到主界面。
一个好的模态框应引起用户的注意，同时又不干扰整体用户体验。比如，在设计一个确认删除操作的模态框时，模态框应包含明确的标题、描述信息和操作按钮（如“确认删除”和“取消”），帮助用户做出决定。设计师应确保模态框的大小适中，避免过多内容造成视觉负担，并使用半透明背景来突出模态框的重要性。
11、工具提示（Tooltip）
12、CTA（CalltoAction，用户行为召唤）
用户行为召唤是用于引导用户执行特定操作，如购买、注册、下载等，通常以按钮或链接的形式呈现，具有明确的指示性文字和突出的视觉设计。
1、可访问性（Accessibility）
可访问性是指在设计过程中考虑所有用户的需求，比如障碍人士的需求等，让各种用户更容易浏览和使用（电脑、手机、网页、UI等等），使得有障碍的用户更便捷地感知、理解、互动。
可访问性设计的方法包括给图像添加替代文本、使用高对比度颜色、确保键盘导航的可用性和为屏幕阅读器优化内容等。比如，在设计一个网站时，设计师应确保所有按钮和链接有明确的标签，使用足够大的字体，提供文本缩放功能，并避免依赖仅通过颜色传达信息。通过这些措施，设计师可以创建对用户更加友好的产品，提高整体用户体验和满意度。
2、响应式设计（Responsive）
响应式设计（Responsive）是指网页设计的一种技术，使得网页能够根据不同设备的屏幕尺寸和分辨率自适应地调整布局和内容，以达到最佳的用户体验。这种技术可以让网页在桌面电脑、平板电脑、手机等不同设备上都能够呈现出最佳的效果，而不需要为每个设备单独设计不同的网页。
比如，在设计一个博客网站时，设计师可以使用响应式网格系统，当用户在桌面电脑上浏览时，页面显示多栏布局，而在手机上浏览时，页面自动调整为单栏布局，便于阅读和导航。
3、自适应设计（Adaptive）
自适应（Adaptive）是一种设计方法，通过创建多个特定的布局版本，来适应不同设备和屏幕尺寸，从而提供优化的用户体验。与响应式设计不同，自适应设计根据设备类型加载预定义的布局，而不是通过调整同一个布局来适应不同屏幕。
4、A/B测试
A/B测试的实施通常涉及创建多个设计变体（如不同的按钮颜色、标题文案等），然后对用户进行分组。比如，在一个电商网站中，设计师可以测试两种不同的结算页面设计，观察哪一种能提高用户的完成购买率。通过这种测试方法，设计师可以基于实际数据做出优化决策，提高设计效果和用户体验。
5、5秒法则（Five-SecondRule）
5秒法则（Five-SecondRule）是UI设计中的一个原则，指用户在访问页面的前5秒内应能够理解页面的主要内容和功能，并决定是否继续浏览。该法则强调界面设计的清晰性和信息传达的效率，帮助设计师创建简洁而直观的用户体验。
实现5秒法则的方法包括优化页面的视觉层次、突出关键内容和简化导航。比如，在设计一个登陆页面时，设计师应确保品牌标识、主要标题和用户行为召唤（CTA）在页面上明显且易于识别。同时，避免过多的干扰元素，使用户能够快速抓住页面的核心信息。通过遵循5秒法则，设计师可以提高页面的吸引力和用户的留存率。
6、自动布局
通过定义元素之间的关系和约束，自动调整界面布局以适应不同屏幕尺寸和设备，这种设计方法就叫自动布局。自动布局可以减少手动调整布局的工作量，创建更灵活和适应性强的界面，提高用户体验和设计效率。
7、切图
切图是UI设计交付开发过程中的一个步骤，指将设计师创建的高保真原型中的图像和图形元素，切割成独立的资源文件，以便在网页或应用中使用。切图的目的是确保设计元素在实际产品中显示正确，并优化加载性能。
通过精确切图，开发人员可以确保在各种设备上都能准确显示设计元素，并且加载速度快、占用资源少。
8、可用性测试
可用性测试是UI设计过程中的一项关键方法，通过观察真实用户与产品的交互，评估界面的易用性和用户体验。可用性测试的目标是发现设计中的问题和改进机会，从而优化产品的功能和用户满意度。
9、视觉一致性（VisualConsistency）
视觉一致性（VisualConsistency）是UI设计中的一个重要原则，指在整个产品中保持统一的视觉风格和设计元素。这包括颜色、字体、图标、按钮样式和间距等。视觉一致性可以增强用户体验，使界面看起来协调、专业，并且易于用户理解和操作。
实现视觉一致性的方法包括制定并遵循设计系统或风格指南。比如，在设计一个企业级应用时，设计师应确保所有页面使用一致的配色方案、相同的字体和统一的按钮样式。通过保持视觉一致性，设计师可以增强品牌识别度，提高产品的可用性和用户满意度。
10、设计走查（DesignReview）
设计走查指设计师与团队成员共同审查设计方案，识别潜在问题并提出改进建议，目的是确保设计的质量和一致性，发现并解决设计中的问题，提高最终产品的用户体验。
进行设计走查的方法包括定期安排团队会议，逐步审查每个设计元素和界面布局等。比如，在开发一个新的移动应用时，设计师可以与产品经理、开发人员和用户体验专家一起审查每个页面的设计，讨论颜色、排版、交互方式等细节。通过这种协作，团队能够集思广益，发现问题并进行优化，确保设计方案在开发阶段之前达到最佳状态。
以上就是30个UI设计师应该掌握的专业术语，希望这些内容能帮助你更好地理解并应用这些概念，在成为优秀设计师的路上更进一步！
