在 UI 设计领域,高效沟通和对术语体系的扎实掌握是成功的关键。无论你是资深设计师还是刚刚入行的新手,深入理解 UI 设计术语对于表达设计思路、与团队协作以及应对不断演进的设计趋势都至关重要。

在这份全面的 UI 术语手册中,我们梳理了所有你必须掌握的 UI 设计核心词汇,帮助你解锁以用户为中心的设计奥秘。深入阅读这份指南,丰富你的设计语言,让自己有能力打造出引人入胜且用户友好的数字产品体验。

跟随这份终极术语手册,一起走进美妙的用户界面设计世界。无论你是刚刚开启设计之旅,还是渴望精进技能,这份资料都为你量身打造。本术语手册的目标是成为一份秘密宝库,汇集了你成功驾驭产品设计领域所需的所有核心 UI 术语。

在你开始担心会遇到晦涩难懂的定义和机械化的专业术语之前,请放心!我们的 UI 术语手册将以有趣且富有信息量的方式,教你所需的一切知识。

我们深知迷失在 UI 概念迷宫中的感受——排版、交互设计、色彩理论、线框图等术语让人眼花缭乱。因此,我们编写了这份术语手册,用通俗易懂的方式解读那些看似晦涩难懂的设计术语。

从理解 UI 和 UX 的基础知识,到揭开色彩理论、布局和可用性原则的秘密,我们的 UI 术语手册涵盖了一切。我们还加入了一些基础术语——毕竟,每个人都是从零开始的。

所以,找个舒适的座位,泡上一杯茶(或拿起你最爱的饮品),踏上这场令人兴奋的 UI 设计之旅,让你的设计技能更上一层楼!

基础定义

本节将为你解读以用户为中心设计的核心要素。从理解用户界面和用户体验,到探索信息架构、线框图、原型设计、可用性、响应式设计以及无障碍设计,这一类别是你理解和创造直观数字体验的入门指南。

用户界面

用户界面是指数字产品中用户直接与之交互的视觉和交互元素,例如按钮、菜单和屏幕。其目标是通过提供直观的设计和便捷的导航,创造用户友好且引人入胜的使用体验。

如果你想系统学习入门,推荐阅读 UI 设计入门完全指南

用户体验

用户体验涵盖了用户在与产品或系统交互时的整体体验和满意度。它关注可用性、可访问性和情感反馈,确保用户获得积极且有意义的旅程。

如果你想深入了解 UX 领域,推荐阅读 UX 设计入门完全指南。同时,了解常见的 UX 误区也有助于避坑,可参考 五大常见 UX 设计错误

信息架构

信息架构是以逻辑清晰且用户友好的方式组织和构建内容,帮助用户在数字界面中轻松导航和查找信息,提升用户的理解效率和整体可用性。

了解信息架构的测试方法,可阅读 树形测试与卡片分类法

线框图

线框图是数字界面的简单视觉化呈现或蓝图。它勾勒出布局、结构和关键元素,不涉及具体的视觉细节,便于在设计早期阶段进行用户流程的可视化和评估。

原型

原型是数字产品的交互式模型或工作版本,允许设计师和相关方在大规模开发之前测试和验证功能、交互以及整体用户体验,为优化迭代提供宝贵的参考依据。

可用性

可用性是指产品或系统对于目标用户而言是否易于使用、直观且高效,涉及可学习性、效率、错误预防和用户满意度等多个维度。

关于可用性测试的详细方法,可参考 可用性测试全指南

响应式设计

响应式设计是一种确保数字界面在不同设备和屏幕尺寸上自适应布局、内容和交互的设计方法,为用户提供无缝且一致的体验。

无障碍设计

无障碍设计致力于打造包容性的数字产品,让不同能力水平的用户都能无障碍使用,涵盖屏幕阅读器兼容性、键盘导航和色彩对比度等方面的考量。

了解更多无障碍设计实践,可参考 无障碍设计完整指南

基础 UI 组件

本节将拆解用户界面的基本构成要素,探索按钮、导航栏、复选框、下拉菜单、工具提示等核心组件的功能、交互方式,以及它们如何为用户创造愉悦的体验。

让我们揭开它们的奥秘,了解它们如何为我们的数字体验赋予交互性。

按钮

按钮是用户界面中可点击的元素,用户点击或轻触后触发相应操作。常用于提交表单、导航至不同页面或启动应用程序或网站中的特定功能。

关于表单设计的完整指南,可参考 表单设计最佳实践

导航栏

导航栏是位于网页或应用程序顶部或侧边的菜单,提供链接或图标,帮助用户在不同页面或板块间轻松切换,实现直观导航和高效内容探索。

复选框

复选框是一种用户界面元素,允许用户从预定义列表中选择或取消选择一个选项。它提供二元选择,用户可以切换复选框来表示自己的选择。

下拉菜单

下拉菜单是当用户与指定区域或按钮交互时显示的一系列选项。它以紧凑有序的方式呈现多种选择,用户通过点击或轻触从列表中选择一项。

工具提示

工具提示是当用户悬停或点击某个元素时显示的小型提示信息,通常附带描述性文字。它为相关元素提供额外的上下文、解释或操作说明。

单选按钮

单选按钮是一种用户界面元素,允许用户从一组互斥选项中选择一个。它呈现一组选项,同一时间只能选择一项,通常以小圆点或按钮形式展示。

滑块

滑块是一种用户界面组件,用户通过拖动滑块手柄沿轨道移动,在预设范围内调整数值。它直观地展示数值的变化,常用于音量控制、图片轮播或数值输入等设置。

模态窗口

模态窗口是覆盖在主内容上方的临时浮层,通常由用户交互触发。它将用户注意力集中在特定任务上,要求用户先处理模态窗口中的内容,然后才能继续操作界面其他部分。

进度条

进度条是一种视觉指示器,展示任务的执行状态或完成进度。它为用户提供进度可视化反馈,让用户了解文件上传、表单提交或软件安装等进程的时间进度。

排版

本节将带你探索字体排印的艺术与科学,涵盖字体、字型、字体系列、字重、字号、行高、字距调整、字符间距等核心概念。

无论你是初学者还是希望精进排版技能的设计师,这部分内容将帮助你在 UI 设计中做出明智的排版决策,创造出视觉效果出众且易于阅读的文本元素。

想了解不同字体的分类方法,可阅读 字体分类全解析

字体

字体是指字型中字符的特定样式和设计。它包含大小、粗细和风格等变量,决定了用户界面中文本的视觉呈现效果。

字型

字型是具有一致设计风格的字符集合。它涵盖特定家族中的各种字体、样式和字重,为用户界面中的文本提供统一的视觉识别。

字型的选择对设计中排版的整体基调、个性和可读性有显著影响。

字体系列

字体系列指共享相似设计美学的一组字型。包括常规、粗体、斜体等变体,设计师可借此创建视觉层级并建立一致的排版风格。

字重

字重表示字型家族中字体的粗细程度。范围从细体到粗体,设计师可以通过字重对比突出重点或在文本中营造视觉层次感。

字号

字号决定了文本在界面中的相对大小,影响可读性和层级结构。通过调整字号,设计师可以引导读者的注意力并创建视觉重点。

字距调整

字距调整是对单词或文本中单个字母之间间距的微调。它优化特定字母组合之间的空间,确保字型一致、视觉愉悦,提升可读性和排版的整体和谐度。

字符间距

字符间距是指对一行文本中字符之间整体间距的调整。它有助于控制整体间距以优化可读性和视觉吸引力,确保字符均匀分布,避免文本显得过于拥挤或松散。

层级

排版中的层级是指基于重要性和显著性对文本元素进行的视觉排列和组织。通过字号、字重、颜色和位置的变化建立清晰的顺序,引导读者浏览内容,实现有效沟通和理解。

行高

行高是文本行之间的垂直间距,也称为行距。它通过确定基线之间的距离来影响可读性和美观性,确保舒适的阅读体验,防止文本显得过于拥挤或紧凑。

衬线体

衬线体是一种在字符末端带有装饰性细线或衬线的字型风格。衬线体通常与传统、正式的美学风格相关联,因其可读性常用于印刷品的正文。

无衬线体

无衬线体是一种在字符末端没有装饰性细线的字型风格。无衬线体外观简洁现代,常用于数字界面和标题,因其简洁、易读和现代感而备受青睐。

色彩理论

本节将帮助你理解色彩理论,探索用户界面中色彩选择与使用的核心原则。从色轮、色彩和谐与对比度的基础,到色彩心理学及其对用户体验的影响,这部分内容为初学者和经验丰富的设计师提供了宝贵的见解。

深入了解色彩搭配技巧,可参考 UI 界面色彩搭配全指南UX 设计中的色彩心理学

色相

色相是区分色谱上不同颜色的属性。它代表了红、蓝、绿等基本色系,在创造视觉愉悦的设计中至关重要,奠定了整体基调。

饱和度

饱和度是指色彩的强度或纯度。高饱和度的颜色显得鲜艳生动,而低饱和度的颜色则显得柔和或偏灰。

明度

明度表示颜色的明亮程度。明度越高,颜色越明亮;明度越低,颜色越暗,直至变为黑色。只有当饱和度也为零时,才能达到纯白色。

互补色

互补色是色轮上相对位置的颜色对。它们在一起使用时产生强烈的对比感,增强彼此的视觉冲击力,为设计方案带来平衡与和谐。

调色板

调色板是在整个设计项目中一致使用的精心挑选的色彩集合。它包括一系列和谐共存的色相、色调和明暗变化,创造统一的视觉体验。

对比度

对比度是指设计中元素之间视觉属性的差异。通过颜色、明度、大小或形状的差异来创造视觉趣味、层级和可读性。良好的对比度是让设计脱颖而出的秘诀。

RGB

RGB 代表红、绿、蓝——数字显示器中使用的三基色。通过组合这三种颜色的不同强度,可以在屏幕上呈现出丰富的色彩范围。

CMYK

CMYK 代表青、品红、黄、黑——印刷生产中使用的标准色彩模式。与数字显示使用的 RGB 不同,CMYK 用于印刷实体材料。在印刷领域,CMYK 是将设计呈现在纸张上的核心技术。

线框图与草图绘制

本节聚焦于设计过程的早期阶段——创意诞生并迈出第一步的地方。线框图和草图如同建筑的蓝图和速写,帮助奠定基础,将设计概念变为现实。

无论你是初学者还是希望精进技能的设计师,本节将为你提供线框图和草图绘制的实用技巧和见解,助你打造用户友好且视觉吸引人的界面。

线框图

线框图是用户界面的基本视觉呈现,勾勒出设计的结构和布局。它关注关键元素的放置和功能,为整体设计提供蓝图,不涉及具体的视觉细节。

草图

草图涉及创建粗略的手绘插图来表达设计想法和概念。这是一种快速灵活的方式,用于探索和沟通设计方案,帮助设计师生成创意、快速迭代,并在进入数字设计工具之前可视化整体构图。

原型设计

原型设计是创建设计的交互式模型或模拟,以测试和验证其功能和用户体验。它帮助设计师和利益相关方了解最终产品的行为方式,并基于用户反馈进行迭代改进。

了解完整的产品设计流程,可阅读 产品设计流程简化版

低保真

低保真是指在视觉细节和功能方面刻意保持简单和基础的原型或视觉稿。它们通常在设计过程的早期阶段使用,用于快速探索和验证想法,然后再投入更精细和详细的设计。

高保真

高保真是指在视觉设计、交互和功能上高度接近最终产品的原型或视觉稿。它们提供了更真实的用户体验呈现,允许在进入开发阶段之前进行详细的测试和反馈。

视觉稿

视觉稿是展示设计视觉元素、布局和内容的静态呈现。它预览了最终产品的外观,不包含交互或功能元素,常用于展示设计概念并在开发前收集反馈。

故事板

故事板是一种用于规划和可视化设计事件序列或交互流程的技术。它通过创建一系列示意性的画面或面板来描绘关键时刻,帮助设计师和利益相关方理解用户体验的流程和叙事。

原型设计与工具

本节将探索原型设计的世界以及将创意变为现实的强大设计工具。原型设计使我们能够创建设计的交互式功能模型,测试用户体验、收集有价值的反馈并优化概念。

我们还将深入探讨 Sketch、Adobe XD、Figma 和 InVision 等主流原型设计工具,了解它们如何帮助国内设计师创建出色的界面。

Sketch

Sketch 是一款在全球范围内广泛使用的界面设计工具,以其友好的操作界面和丰富的插件生态而备受青睐。它使设计师能够创建线框图、原型和视觉精美的设计,是 UI 设计项目的热门选择之一。

Adobe XD

Adobe XD 是 Adobe 公司推出的一款界面设计与原型工具,使设计师能够创建交互式且以用户为中心的体验。它提供广泛的设计工具、与其他 Adobe 系列产品的无缝衔接,以及团队协作功能,简化了从设计到交付的完整流程。

Figma

Figma 是一款基于云端的多功能界面设计工具,凭借其强大的实时协作能力和跨平台特性而广受欢迎。它允许团队成员在线同步创建、原型设计和迭代设计,是目前国内 UI 设计师使用率最高的工具之一。Figma 极大地简化了设计交付与团队协同的工作流程。

布局

布局部分将解释塑造用户界面视觉结构和组织的核心要素。从网格系统的精确性到留白的艺术性运用,我们将深入探讨为设计方案带来平衡与和谐的关键原则和技巧。

网格系统

网格系统是一种框架,通过将界面划分为列和行,帮助设计师创建一致且有序的布局。它为内容放置、对齐和视觉层级提供结构,产生视觉愉悦且平衡的设计。

留白

留白是指设计元素之间的空白区域。它在增强可读性、视觉清晰度和营造设计精致感方面发挥着关键作用,是设计中经常被低估但不可或缺的元素。

响应式设计

响应式设计是一种确保网站或应用在不同设备和屏幕尺寸上提供无缝用户体验的方法。它涉及创建动态布局、自适应图片和灵活的界面设计,让用户无论使用何种设备都能获得最佳的浏览和交互体验。

对齐

对齐是指设计元素沿共同轴线或参考线的排列方式。它有助于在设计创造秩序感、平衡感和视觉和谐度,提升可读性,使界面更直观易用。

固定布局

固定布局是一种设计方法,无论屏幕尺寸或设备如何,元素的尺寸和位置保持不变。这种方法适用于需要精确控制元素位置的设计,但可能无法很好地适应不同屏幕尺寸。

流式布局

流式布局是一种设计技术,使设计元素能够根据可用屏幕空间动态扩展或收缩。通过拥抱灵活性,流式布局确保设计能无缝适应各种屏幕尺寸,在不同设备上提供一致且用户友好的体验。

黄金比例

黄金比例是一种常用于设计的数学比例,用于创造视觉愉悦的比例和平衡。它约为 1.618,应用于设计元素的布局、间距和尺寸时,被认为能产生美学上令人愉悦的构图。

交互设计

在本部分中,你将了解让用户界面生动起来的动态和吸引人的方面。从流畅的用户流程导航到为产品增添个性的微交互,你将发现创造有意义的用户交互的关键要素。

用户流程

用户流程是用户在浏览网站、应用或系统时所遵循的路径。它涉及理解和设计用户为完成特定任务所采取的步骤序列,确保顺畅直观的体验。

微交互

微交互是微小的、微妙的动画或交互元素,用于提供反馈并增强用户参与度。它们可以简单到按钮动画或进度指示器,为整体用户体验增添个性和活力。

转化引导按钮 (CTA)

转化引导按钮是鼓励用户采取特定行动的提示或视觉元素,如注册、购买或订阅。有效的转化引导按钮通过有说服力的文案、设计和位置来引导用户并推动预期的转化。

关于转化表单的优化策略,可阅读 为什么需要优化获客表单

反馈

UI 设计中的反馈是指基于用户与系统的交互而提供给用户的信息或响应。它可以包括通知、确认、错误消息或视觉提示,旨在告知用户其操作结果,让用户保持知情和参与。

示能性

示能性是指设计元素的视觉线索和上下文如何暗示其功能或潜在操作。通过提供清晰的信号和提示,示能性引导用户与对象或界面进行交互,以直观且用户友好的方式提升整体用户体验。

进度指示器

进度指示器是向用户传达任务或处理过程的状态或进展的视觉元素。它们提供反馈,通过向用户保证其操作正在处理中来建立信心,并减少不确定性,确保用户充分了解进展情况,从而创造积极的用户体验。

错误状态

错误状态是突出显示出现问题或用户输入错误时的视觉或交互信号。它们告知用户错误的存在,呈现清晰的错误消息或指导,帮助用户理解和有效解决问题。通过增强界面的易用性,错误状态有助于更顺畅的用户体验。

关于错误提示的设计原则,可参考 错误提示设计指南

性能优化

性能优化部分将阐明优化用户界面性能和交互性的各种技术和策略。从图片压缩与优化开始,再到懒加载和缓存策略,最后探讨代码压缩与合并等技术。

图片压缩与优化

图片压缩与优化技术涉及在保持图像视觉质量的同时减小文件大小。这有助于改善网站或应用的加载时间,确保更快、更流畅的用户体验。

懒加载

懒加载是一种按需加载策略,优先加载当前可见内容,推迟加载次要或隐藏区域,仅在用户需要时才进行加载。通过这种方式,懒加载优化了页面加载速度并节省带宽。

缓存策略

缓存策略涉及将频繁访问的数据存储在临时存储中,以减少重复从服务器获取的需求。这通过向用户提供缓存数据来提高响应时间和整体性能,从而实现更快的加载和更高效的体验。

代码压缩与合并

代码压缩是指消除代码中的冗余字符(如空格和注释),而合并则是将多个文件整合为一个。这些策略通过优化代码交付和减小文件大小来提升加载速度并减少服务器请求次数。结果就是网页加载更快、更流畅,浏览体验更高效。

设计系统

这部分聚焦于为 UI 设计带来和谐、一致性和效率的得力助手——设计系统。设计系统是相互关联的设计元素、指南和原则的集合,建立统一的视觉语言并确保数字产品的一致性。

关于设计系统中的色彩体系构建,可阅读 设计系统中的色彩管理

组件库

组件库是预设计的用户界面元素和模式的资源库,促进一致性并简化设计流程。它们提供了一系列可复用的组件,可在不同项目中轻松实施,确保视觉一致性并节省设计和开发阶段的时间。

设计令牌

设计令牌作为设计系统中基本设计属性的占位符或容器,涵盖颜色、排版、间距等元素。通过将这些属性整合到设计令牌中,可以更轻松地在不同组件和项目间维护统一的视觉风格。设计令牌在促进视觉连贯性、简化更新和促进设计系统的可扩展发展方面发挥着关键作用。

设计系统文档

设计系统文档是一份综合指南,记录设计系统的原则、指南和使用说明。它提供有关组件、用法以及设计和实施指南的详细信息。设计系统文档作为设计师和开发人员的参考,确保项目中的所有相关人员理解并遵循设计系统的规则和标准。

设计系统治理

设计系统治理涉及通过既定的流程和结构来管理和维护设计系统。它包括定义角色、职责和决策框架,以确保系统的增长、更新和遵循准则。有效的治理促进协作、鼓励贡献,并确保设计系统的持续成功。

品牌

本节将揭示建立强大且令人难忘的品牌标识背后的秘密。从设计完美的标志到定义品牌指南,探索创造视觉一致性和为品牌注入独特声音的艺术。

品牌识别

品牌识别是一套将品牌与众不同的视觉和语言元素。它包括代表品牌价值观、个性和定位的视觉元素,是建立品牌认知和与目标受众建立联系的基础。

标志

标志是代表品牌的图形符号或标记。它作为品牌的脸面,易于识别且令人难忘。精心设计的标志能够捕捉品牌的本质,成为品牌的形象大使,给人留下持久印象。

品牌指南

品牌指南是一套全面的规则和说明,定义了品牌在各种渠道中的视觉和语言呈现方式。它们确保品牌沟通的一致性和连贯性,帮助维护统一且可识别的品牌形象。

视觉一致性

视觉一致性是指品牌在所有物料和平台上和谐统一的视觉外观。通过保持一致的设计元素,品牌创造出凝聚力和专业感,与受众产生共鸣。

品牌色彩

品牌色彩是经过精心挑选、代表品牌的颜色。它们有助于建立品牌认知并唤起特定的情感或联想。

品牌语调

品牌语调是品牌采用的独特个性、语气和沟通风格,用以与受众建立联系。它使品牌的声音与众不同,建立起与客户共鸣并建立关系的独特声线。

移动端设计

本节旨在定义创建卓越移动端用户体验所必需的核心要素。从确保设计无缝适应不同设备的移动端响应式,到支持直观交互的移动端手势,以及提供经过验证的设计方案的移动端模式。

移动端响应式

移动端响应式是指确保网站或应用在各种移动设备和屏幕尺寸上正常显示和运行的设计与开发方法。它涉及创建灵活的布局、适配内容并优化用户交互,以在移动端提供无缝体验。

移动端手势

移动端手势是在移动设备上执行的触摸交互,如滑动、点击、捏合或滚动。这些手势允许用户在移动界面上导航、交互和操作内容,提升可用性和参与度。

移动端模式

移动端模式是反复出现的、经过验证的设计解决方案,为用户指引方向避免混淆。这些经过验证的解决方案为设计师提供了创建流畅且令人愉悦的移动端体验的蓝图。

可用性原则

可用性原则部分将深入探讨让用户体验出色的核心概念。从以用户为中心的设计到可学习性和认知负荷,探索确保设计直观、易用且令人愉悦的基本原则。

了解格式塔原理在设计中的应用,可阅读 格式塔设计原则

以用户为中心的设计

以用户为中心的设计是在整个设计过程中优先考虑用户需求、偏好和行为的方法。通过理解和整合用户反馈和见解,以用户为中心的设计旨在创造直观、高效且满足目标受众特定需求的界面。

信息架构

信息架构是指数字产品中内容的组织与结构。它涉及以逻辑和直观的方式对信息进行分类和结构化,使用户更容易导航、找到所需内容并理解整体内容层级。

无障碍设计

无障碍设计是确保数字产品和服务在设计和开发中尽可能让更多用户无障碍使用,包括残障人士,通过提供包容性的设计实践和功能来满足多样化需求。

错误处理

错误处理是指以用户友好的方式设计和实施处理错误和异常的策略。它涉及提供清晰且信息丰富的错误消息,指导用户解决问题,并通过有效预防或从错误中恢复来减少挫败感。

一致性

设计中的一致性是指在界面中保持统一和连贯的体验,使用一致的视觉元素、交互模式和术语。这有助于用户建立熟悉感和理解度,减少混乱和认知负荷。

可学习性

可学习性着眼于设计易于用户理解和学习的界面,通过清晰直观的交互、指导和反馈,使用户能够快速掌握如何操作和与系统互动。

认知负荷

认知负荷是指用户处理和理解界面中呈现信息所需的心智努力和容量。设计师的目标是通过简化复杂任务、有效组织信息和减少不必要的干扰来最小化认知负荷,让用户专注于主要目标和任务。

用户研究

用户研究是 UI 设计过程中收集目标用户洞察的关键阶段。它帮助设计师了解用户需求、行为和偏好,以创建有效且以用户为中心的设计。

用户画像、用户测试、问卷调查与访谈以及卡片分类法是用户研究中收集有价值数据并为设计决策提供信息的关键方法。关于用户访谈的实操技巧,可参考 用户访谈全攻略

用户画像

用户画像是目标受众的虚构代表,概括了他们的特征、需求、目标和行为。它们帮助设计师与用户共情,并在设计中考虑用户特定偏好和动机的前提下做出明智的决策。

用户测试

用户测试涉及观察真实用户与设计或原型交互并收集反馈。它有助于识别可用性问题,验证设计假设,并基于用户见解进行改进。

问卷调查与访谈

问卷调查和访谈是直接从用户那里收集定性数据的研究方法。问卷调查涉及向较大群体提出结构化问题,而访谈涉及与个别用户进行深入对话。这些方法提供有关用户意见、体验和偏好的宝贵见解,帮助设计师理解用户需求并为设计决策提供信息。

卡片分类法

卡片分类法是设计师用来了解用户如何组织和分类信息的方法。它涉及要求用户将内容或主题分组,帮助设计师创建直观的信息架构和导航结构。卡片分类可以通过实体卡片或数字工具进行。

深入了解卡片分类法与树形测试的差异,可阅读 树形测试与卡片分类法

数据可视化

数据可视化部分探索以视觉化和引人入胜的方式呈现数据的强大方法。我们将深入探讨图表和信息图、数据驱动设计等关键要素,为如何提高数据驱动体验的理解力和影响力提供见解。

图表与图形

图表和图形是数据的可视化呈现,帮助用户理解模式、趋势和关系。它们以简洁易读的形式呈现复杂信息,使其更易于解读并从数据中获取有意义的洞察。

信息图

信息图结合文本、插图和图形,以视觉化的方式呈现信息和数据。它们是简洁且引人入胜的叙事工具,能够以易于理解和记忆的方式向广泛受众传达复杂概念和叙述。

数据驱动设计

数据驱动设计是一种利用数据洞察来指导设计过程的方法。通过分析用户行为、反馈和其他相关数据,设计师可以做出优先考虑用户需求并优化用户体验的明智决策。

图标设计

在本部分中,我们将审视传达意义和增强用户界面的视觉符号世界。探索图标设计原则、图标集和图标库的力量、可缩放矢量图标以及符号设计的艺术。

图标设计原则

图标设计涉及创建视觉上有意义的符号,代表操作、概念或对象。通过遵循清晰、简洁和一致等原则,设计师可以开发出直观且易于识别的图标,有效传达其预期信息。

图标集与图标库

图标集和图标库提供了一系列预设计的图标,可在 UI 设计项目中直接使用。这些综合性资源库提供了各种用途的图标,节省设计师从头创建自定义图标的时间和精力,并确保跨界面的视觉一致性。

可缩放矢量图标

可缩放矢量图标是可以在不损失质量或清晰度的情况下调整大小和缩放的图形。通过使用 SVG 等矢量格式,设计师可以创建在各种屏幕尺寸和分辨率下保持清晰和锐利的图标,确保在不同设备上获得无缝的用户体验。

符号设计

符号是代表物体、想法或操作的视觉元素,通常使用简化或抽象的形式。有效的符号设计涉及对形状、颜色和上下文的仔细考量,以创造出视觉吸引人、有意义且易于用户理解的图标。

其他 UI 技巧

恭喜——你已经到了本术语手册的最后,但并非最不重要的一节。本节将解释新手引导的世界和游戏化的力量,揭示微文案的影响,并教你 A/B 测试和热力图的重要性,帮助你做出明智的决策。最后,你将了解到渐进式呈现的概念,它有助于减少认知过载并保持界面简洁。

新手引导

新手引导是引导用户完成与产品或服务的初始交互阶段,为他们提供必要的帮助和信息以便顺利上手。其目标是让用户熟悉产品的功能、特性和价值,从一开始就确保积极顺畅的用户体验。

游戏化

游戏化是将挑战、奖励和排行榜等游戏元素融入非游戏场景中,以吸引和激励用户。通过利用心理学原理和人类对成就与竞争的自然渴望,游戏化增强了用户参与度,鼓励期望的行为,并创造更具互动性和愉悦感的体验。

微文案

微文案是策略性地分布在用户界面各处的小段文字,通常用于指导或解释目的。它在引导用户、提供清晰说明和以用户友好的方式传达重要信息方面发挥着关键作用,最终提升整体可用性和用户体验。

关于微文案的写作技巧,可阅读 UI 微文案写作指南

A/B 测试

A/B 测试是一种比较两个或多个设计方案变体的方法,用于确定哪个版本在用户参与度、转化率或其他期望指标方面表现更好。通过分析用户行为和偏好,A/B 测试有助于指导设计决策、优化用户体验并推动数据驱动的改进。

热力图

热力图是使用颜色编码模式来突出显示用户界面中感兴趣区域或活动区域的数据可视化呈现。通过分析用户交互和行为,热力图提供了用户如何参与设计的宝贵见解,使设计师能够识别热门或忽视的区域,并做出优化用户体验和界面性能的明智决策。

渐进式呈现

渐进式呈现是一种根据用户需求逐步展示信息或功能的设计技术。通过以结构化的方式逐步呈现信息,设计师可以引导用户按照流程一步步操作,增强可用性并防止认知过载,最终带来更直观和令人满意的用户体验。

结语

恭喜你读完了这份全面的 UI 术语手册!我们一起深入探索了 UI 设计的迷人领域,涵盖了丰富多样的术语和概念,这些知识将加速你的设计技能提升并增强用户体验。

从色彩理论和排版的基础原则,到布局和交互设计的细节,我们将复杂的理念化繁为简,让各个阶段的设计师都能轻松理解。我们还揭示了设计系统的力量、数据可视化的艺术,以及用户研究和可用性原则的重要性。

如今,你已经拥有了扎实的知识基础——从理解用户画像到利用微交互的魅力,再到创建视觉惊艳的信息图。