每个领域都有自己的专业术语UI设计也一样这些术语是设计师、产品经理、开发之间沟通的共同语言把它们搞懂之后新手小白再去看教程、画线框图、做项目才会顺很多。下面我整理了20个UI设计师应该掌握的专业术语新手小白可以先收藏慢慢看~一、设计基础1、UI设计UI是User Interface的缩写中文是“用户界面”。UI设计就是围绕用户看到和操作的界面进行设计比如App页面、网页界面、后台系统、按钮、图标、弹窗、导航栏等。很多新手会把UI设计理解成“把页面做漂亮”这只说对了一半。UI设计不仅要好看还要清晰、易用、符合产品目标。一个好的UI界面应该让用户知道自己在哪里、能做什么、下一步该点哪里。2、UX设计UX是User Experience的缩写中文叫“用户体验”。如果说UI更关注“界面长什么样”UX更关注“用户用起来感觉怎么样”。比如一个登录页面UI设计师会关注按钮颜色、输入框样式、图标是否统一UX设计师会更关注用户能不能快速登录、忘记密码入口好不好找、错误提示是否清楚、流程是否顺畅。当然在现实工作中UI和UX并不是完全割裂的大部分设计师既要做界面也要考虑用户体验。3、原型设计原型设计是产品正式开发前用来表达页面结构、功能流程和交互逻辑的设计方式。它不一定要特别精美但要能说明产品大概怎么用、页面之间怎么跳转、用户完成任务需要经过哪些步骤。对新手来说原型设计是非常重要的基础能力。因为很多时候团队讨论的不是“这个页面好不好看”而是“这个流程能不能跑通”。另外这里也科普下相关设计工具目前市面上UI设计、UX设计以及原型设计工具之间的差异越来越小。比如国内老牌原型设计工具Mockplus最近新出的产品摹客3就是一款支持原型设计、UI设计和UX设计为一体的产品设计平台。产品经理可以用它快速画线框图、页面结构和交互流程UI设计师也可以继续完善高保真设计减少在不同工具之间来回切换的麻烦。使用地址https://www.mockplus.cn/m3?hmsrmango624如果你是刚入门的新手还不知道页面从哪里开始画也可以尝试它。因为摹客3内置了小摹AI可以根据自然语言生成高保真设计稿生成后还能继续编辑和协作修改。对新手来说这种AI设计AI能力并不是让你偷懒而是帮你更快看到产品界面方案把更多时间花在产品定位、架构等更重要的事上。4、线框图线框图可以理解为页面的“骨架图”。它通常不强调颜色、图片和精细视觉效果而是用简单的线条、方块、文字占位展示页面里有哪些内容、模块怎么排布、用户大概怎么操作。比如一个电商详情页的线框图可能只会画出商品图区域、标题、价格、规格选择、评价、购买按钮等模块。至于按钮是什么颜色、图片用哪张、字体多大这些不是线框图阶段的重点。线框图的作用是帮助团队先确认结构不要一上来就纠结视觉细节。就像装修房子前先看户型图别急着选窗帘颜色。5、高保真设计稿高保真设计稿就是接近最终上线效果的设计稿。它会包含完整的颜色、字体、图片、图标、按钮、组件、间距和视觉细节看起来已经非常接近真实产品页面。如果说线框图是“毛坯房”高保真设计稿就是“精装修效果图”。高保真设计稿通常用于正式评审、开发交付和最终确认。开发会根据它还原界面产品和业务方也会通过它判断最终效果是否符合预期。新手要注意高保真不是单纯“做得更漂亮”而是要在结构清晰的基础上让界面更完整、更统一、更接近真实使用状态。二、界面元素6、组件组件是UI设计里可以重复使用的界面元素比如按钮、输入框、弹窗、标签、导航栏、下拉菜单、卡片、表格等。你可以把组件理解成“设计积木”。做页面时不是每次都重新画一个按钮而是从组件里拿一个标准按钮出来根据场景调整文案和状态。比如一个产品里有很多“确认”“保存”“提交”按钮如果每个按钮都单独画很容易出现大小不一样、颜色不一样、圆角不一样的问题。有了组件就能保证页面一致性也能大大提高效率。7、组件库组件库就是集中管理组件的地方。它里面会放各种常用组件比如按钮、输入框、弹窗、表格、导航、卡片等并且规定好每个组件的样式和使用方式。对团队来说组件库非常重要。因为一个产品通常不是一个设计师做完所有页面也不是一天就做完。如果没有组件库不同页面很容易变得像“不同人装修的房间”风格不统一。有了组件库设计师可以复用已有组件开发也能按照统一标准实现页面。这样既能提高效率也能减少返工。8、图标图标是界面中用于辅助识别功能的小型视觉元素比如搜索图标、首页图标、消息图标、删除图标、设置图标等。图标的作用不是单纯装饰而是帮助用户更快理解功能。比如一个放大镜图标用户一看就知道是搜索一个垃圾桶图标通常代表删除。新手做图标时要注意两点第一图标风格要统一不能有的线条粗、有的线条细第二图标含义要清楚不要为了追求特别而让用户看不懂。9、按钮按钮是界面中最常见的操作元素用来触发某个动作比如提交、保存、购买、登录、下一步、取消等。一个按钮看起来很简单但里面有很多细节。比如按钮颜色代表重要程度按钮文案要说明动作按钮位置要符合用户操作习惯按钮状态也要完整。常见按钮状态包括默认状态、悬停状态、点击状态、禁用状态、加载状态等。比如“提交”按钮在用户没有填写必填项时可能是禁用状态点击提交后可能显示加载中提交成功后进入成功页面。这些都属于按钮设计需要考虑的内容。10、表单表单是让用户填写、选择和提交信息的界面元素常见于登录、注册、搜索、筛选、下单、预约、资料填写等场景。表单看似简单其实非常考验体验设计。一个好的表单应该让用户知道要填什么、怎么填、哪里填错了、提交后会发生什么。新手设计表单时不要只画输入框还要考虑提示文案、错误状态、校验规则和提交反馈。三、设计规范11、设计规范设计规范是一套统一的设计规则用来规定产品里的颜色、字体、间距、图标、按钮、表单、弹窗、页面布局等应该怎么使用。它的作用是让整个产品保持一致。比如主按钮用什么颜色标题用多大字号页面左右边距是多少错误提示用什么样式这些都可以写进设计规范。没有设计规范的产品很容易出现“这一页像蓝色系那一页像绿色系这里按钮圆角8px那里按钮圆角16px”的情况。用户可能说不出哪里不对但会觉得产品不够专业。12、设计系统设计系统比设计规范更完整。它不仅包括颜色、字体、组件这些基础内容还包括设计原则、组件规则、交互模式、内容规范、协作流程甚至开发实现方式。如果说设计规范是一份“使用说明书”设计系统更像一套“产品设计操作系统”。大型产品和团队通常都需要设计系统。因为页面越来越多角色越来越多如果没有统一体系很容易乱。新手刚开始不一定要立刻搭建设计系统但要先有设计系统思维不要只看一个页面要想这个按钮、这个弹窗、这个表单以后能不能复用能不能在其他页面保持一致。13、栅格系统栅格系统是用来帮助页面排版和对齐的布局规则。它通常由列、间距、边距组成可以让页面内容排列得更整齐。听起来有点抽象其实可以把它理解成设计里的“隐形尺子”。页面看起来舒服很多时候不是因为元素随便放得好而是因为背后有栅格在控制秩序。在网页设计中常见的是12列栅格。设计师可以根据栅格来安排内容宽度、模块位置和响应式变化。移动端也会有自己的边距和布局规则。新手如果觉得页面总是“不够整齐”可以先从栅格和对齐开始练。14、间距间距就是元素之间的距离比如标题和正文之间的距离、按钮和输入框之间的距离、卡片和卡片之间的距离。间距看起来不起眼但它会直接影响页面是否清爽、信息是否好读、层级是否清楚。如果间距太小页面会显得拥挤间距太大信息又会显得松散。好的间距能让用户自然理解哪些内容属于一组哪些内容是不同模块。15、对齐对齐是UI设计中最基础也最重要的规则之一。简单来说就是让页面元素在视觉上有共同的边界或中心线。比如标题、正文、按钮左边缘对齐卡片之间等宽排列图标和文字垂直居中这些都是对齐。页面不对齐时用户不一定能准确说出问题但会觉得“乱”“不舒服”“不专业”。新手作品里最常见的问题之一就是元素看起来都差不多但细看全都没对齐。做设计时可以多问自己一句这些元素有没有站在同一条线上如果没有页面大概率会显得松散。四、体验与交互16、视觉层级视觉层级是指页面中不同信息的重要程度和阅读顺序。它决定了用户第一眼看哪里第二眼看哪里最后点击哪里。常见的层级手段包括字号大小、颜色深浅、粗细、留白、位置、图标、背景块等。新手要记住页面不是把信息都放上去就行而是要帮用户排好优先级。17、交互状态交互状态指的是界面元素在不同操作情况下的表现。比如按钮有默认状态、悬停状态、点击状态、禁用状态、加载状态输入框有正常状态、聚焦状态、错误状态、成功状态。这些状态很容易被新手忽略但真实产品一定会遇到。比如用户点击“提交”后如果按钮没有加载状态用户可能会以为没点上然后疯狂连点表单填错了如果没有错误提示用户就不知道该改哪里按钮不能点时如果没有禁用状态用户会怀疑是不是系统坏了。交互状态就是产品和用户之间的“回应”。用户做了动作界面要给反馈。18、响应式设计响应式设计是指同一个页面可以根据不同屏幕尺寸自动调整布局让它在电脑、平板、手机等设备上都能正常显示和使用。比如一个网页在电脑上可能是三列布局在平板上变成两列在手机上变成单列。内容没有变但展示方式会根据屏幕宽度调整。响应式设计在Web端尤其重要。因为用户可能用大屏显示器打开也可能用手机浏览。如果页面只适配一种屏幕换个设备就可能出现内容挤压、按钮错位、文字过小等问题。新手可以先理解一个原则响应式不是简单把页面缩小而是根据屏幕重新组织内容。19、空状态空状态是指页面没有内容时的展示比如没有订单、没有消息、没有搜索结果、购物车为空、收藏列表为空等。很多新手只会设计“有内容”的页面却忘了真实产品里经常会遇到“什么都没有”的情况。好的空状态不只是告诉用户“这里没东西”还要引导用户下一步做什么。比如购物车为空时可以提示“去逛逛”搜索无结果时可以建议更换关键词项目列表为空时可以引导用户“新建项目”。20、设计交付设计交付是指设计师把设计稿交给开发落地的过程。它通常包括标注、切图、资源导出、交互说明、状态说明、组件说明等内容。很多新手以为设计稿画完就结束了其实交付才是让设计真正变成产品的重要一步。如果设计稿没有标注清楚开发可能不知道字体多大、间距多少、颜色是什么如果交互状态没说明开发可能只做了默认页面如果切图资源缺失页面还原就会出问题。所以设计交付不是“把文件发给开发”这么简单而是要让开发能准确理解并实现你的设计。新手越早理解设计交付越能意识到UI设计不是画完图就万事大吉而是要对最终落地效果负责。以上就是UI设计师工作中常常能用到的也是新手小白必须掌握的关键术语希望能对你有所帮助~