UI筹划是甚么意思？详解UI筹划的绳尺
、流程及寄看事项

1 、UI筹划是甚意思详绳尺甚么意思

UI筹划（英文：User Inte***ce Design）又称为界面筹划或用户界面筹划，是解U及寄指对软件的人机交互、独霸逻辑、流程界面美不美不雅不雅不雅不雅不雅不雅的看事集团筹划 。UI筹划分为实体UI和虚构UI，筹划I筹互联网经常独霸的甚意思详绳尺UI筹划是虚构UI，UI即User Inte***ce(用户界面)的解U及寄简称。

2、流程UI筹划标的看事方针

UI是用户界面
，是筹划I筹英文User和inte***ce的缩写
。从字面上看是甚意思详绳尺用户与界面2个构成部分
 ，但理论上还包含用户与界面之间的解U及寄交互相干，所以多么可分为3个标的流程方针 ，他们分袂是看事：用户研究、交互筹划、界面筹划 。

1、用户研究

用户研究包含两个方面：

(1) 、可用性工程学（usability Engineering） ，研究若何进步产品的可用性，使得琐细的筹划更随便被人独霸
、进修和记忆；

(2)、经由过程可用性工程学研究，发掘用户的埋伏需求，为技能立异供给此外一条思路和编制。

用户研究是一个跨学科的专业，触及可用性工程学、人类下场学 、心思学、市场研究学 、经历学 、筹划学等等学科 。用户研究技能是站在人文学科的角度来研究产品，站在用户的角度介入到产品的斥地和筹划中 。

用户研究经由过程对用户的事气候象、产品的独霸习惯等研究 ，使得在产品斥地的后期可以把用户对产品下场的期看 、对筹划和外不美不雅不雅不雅不雅不雅不雅方面的请求融进到产品的斥地过程中往，从而辅佐企业完竣产品筹划或试探一个新产品定见 
。

他是掉落踪掉落踪用户需乞降回响的路途 ，也是考验界面与交互筹划可否公允的次要标准 
。

2 、交互筹划

这部分指人与机之间的交互工程，在畴昔交互筹划也由法度圭表类型员来做，真实法度圭表类型员善于编码 ，而不善于与幻想用户交互
。所以，良多的软件当然下场斗劲无缺，可是交互方面筹划很粗拙，繁琐难用
，进修艰苦
。独霸多么的软件后，不是令人机警与进步而是让人感应玩弄与真诚。良多人因为不克不及独霸电脑软件而下岗损掉落踪落业，多么的交互使电脑成为让人惊怕的科技怪兽。是以把交互筹划从法度圭表类型员的工作等分袂出来孤单成为一个学科，也就是人机交互筹划。他的方针在于加强软件的易用、易学 、易邃晓 ，使筹算机真正成为便外埠为人类处事的对象。

3、界面筹划

在漫长的软件展开中，界面筹划工作不时没有被正视起来。做界面筹划的人也被褒义的称为"美工"。真实软件界面筹划就像财富产品中的财富外型计整洁样  ，是产品的次要买点。一个亲善美不美不雅不雅不雅不雅不雅不雅的界面会给人带来温馨的视觉享用，拉近人与电脑的距离，为商家创作创作创造卖点 。界面筹划不是纯真的美术绘画，他需求定位独霸者 、独霸气候
、独霸编制并且为幻想用户而筹划
，是地道的科学性的艺术筹划 。考验一个界面的标准即不是某个项目斥地组带领的定见也不是项目成员投票的下场，而是幻想用户的感应感染。所以界面筹划要和用户研究严密连络 ，是一个不竭为幻想用户筹划知足视觉终局的过程  。

3 、UI筹划的次要产出物

UI筹划师幻想下场会产出一些具体的下场，供法度圭表类型员举办斥地 ：

1、高保真筹划图 ：和幻想下场产品视觉终局几近千篇一概的静态图片。

2、筹划圭表类型：一套具体的标准文档，端方全数的色彩 、字体  、间距、组件格式，确保全数产品气焰不合 。

3、切图 ：将筹划稿中的图标、图片等元素导出为斥地所需的格式。

4
、UI筹划绳尺

1  、复杂纯真性

界面的精练是要让用户便于独霸
、便于体味产品，并能促进用户产生发火偏向选择的大年夜大年夜约性 。值得寄看的是，筹划中不克不及让UI筹划过分惹人凝睇 ，而要弱化法度圭表类型本身的下场。需求均衡视觉筹划和下场，寻觅最好点 ，消弭华丽的装潢和不须要的元素，UI界面要复杂直接的页面逻辑和直不美不雅不雅不雅不雅不雅不雅必须的元素构成。

2、高效性

精细的UI筹划有个共通的特点
：高效 。汲引界面屈就最有效的编制是举办义务分化。熟谙用户的流程，体味用户的方针
，然后在此根本上尽大年夜大年夜约简化流程，使得用户可以便捷疾速的杀青方针。在此过程中，细心思虑每个下场细节 ，回避大年夜大年夜约存在的裂缝 ，辅佐用户疾速完成用户流程。

3 、记忆担当最小化

人脑不是电脑  ，在筹划界面时必须求思虑人类除夜脑措信赖息的限制。人类的短时辰记忆无穷且极不晃荡 ，24小时内存在约25%的遗忘率 。所以对用户来讲
 ，不雅不雅不雅不雅鉴赏信息要比记忆更随便。

4、齐截性

用户界面可视化筹划中最次要的绳尺是齐截性绳尺
。用户等待用本身的体验试探更多的内容，试探可否有效取决于筹划的齐截功用否充分好 。具体默示是为用户供给一个不合的界面 ，这意味着用户可以从一个界面独霸本身，从而促进独霸和进修的时分 。这个过程中的体验直接移植到此外一个界面
，使全数ui体验愈加流畅
。

5、了然

了然性理应是全数ui界面的根本属性。请记住
， UI界面是为了让用户更随便与琐细交互，因为它需求可以与用户了然地交互。贯穿连接一个了然的ui界面筹划真实不艰苦 。起首，要担保标签和标签文本的独霸了然指向，并准予信息的了然传递，多么用户才调疾速邃晓交互的标的方针性。尽大年夜大年夜约不要在ui中独霸烦复、宏壮、难以记住的文本标签 。它越宏壮
 ，对集团用户体验的影响就越除夜。

6、用户的熟谙程度

用户体验筹划的一个次要方针是要让用户可以仰仗直觉来独霸UI界面。用户要可以天然地邃晓个中的内容，独霸天然就不难了，也就是说 ，要让用户对你的界面产生发火"熟谙感" 。所以，要充分操感染户对UI筹划所熟谙的部分 。

当用户对UI界面抱有熟谙感的时辰
，但凡意味着他们对这个筹划有所体味 ，甚至晓得若何交互，他们除夜白独霸此后大年夜大年夜体味产生发火甚么，也晓得哪些工作不睬应做 。所以，假定你能独霸好用户对交互和界面编制的熟谙来举办筹划的话 ，能让用户更快上手独霸。

7、从用户习惯思虑

想用户所想，做用户所做 。用户老是屈就他们本身的编制邃晓和独霸
。经由过程斗劲真实与虚构的事物 ，完成更好的筹划。好的UI界面是隐形的，华丽的装潢和不须要的元素都已被剔除，复杂直接的页面逻辑和直不美不雅不雅不雅不雅不雅不雅需求的元素构成了多么的UI界面，专注于中心的用户体验。

8 、层次

UI界面的视觉层次黑色常次要且经常被忽视的一个属性，它可以辅佐用户专留心要的内容 。假定你想让界面中每个内容都看起来很次要，那么只会纯真地让信息过载，让每个元素都分摊用户的寄看力  ，幻想下场只会让全数筹划显得混乱不堪 。不合尺寸的字体、不合的色采和不合的控件幻想下场理应是彼此搭配，构成层次
 ，有轻重缓急地展示给用户 ，将宏壮的筹划复杂化 ，辅佐用户完成义务 。

9、矫捷性

复杂来讲就是要让用户利便的独霸，但不合于上述。即互动多重性，不局限于单一的对象(包含鼠标、键盘或手柄、界面) 。

10、安然性

用户能逍遥的作出选择，且全数选择都是可逆的。在用户作出毁伤的选择时有信息介入琐细的提示 。多么会让用户会感应感染很安然 
，本身的权益不会遭到丧损掉落踪落！

11、人道化

高效
、用户知足度是人道化的闪现。理应有一个专家和初级玩家琐细，即用户可以屈就本身的习惯自定义界面并保管设置。是以 ，一个好的界面筹划师 ，在身手方面，不单可以画图标 ，并且界面会有良多的互动常识 。

5 、UI筹划流程

1 、产品需求分化

当一个ui筹划师拿到项目或需求此后，正常气候是交互筹划师细化事前的交互文档，里面包含交互原型 。而作为ui筹划师所要做的就是邃晓并吃透文档 ，包含里面交互逻辑 ，具体的独霸编制 ，流程 ，回响等，需求不竭查对和确认。

2
、深层次的用户体验研究与分化

对已定义的方针用户群体及特点举办深层次的分化，包含方针用户群体的岁数
，性别及方针户群体的一些热忱习惯
，心思特点等，多么便可以有针对的对这个产品想象筹划出一个大年夜大年夜体的色系搭配及元素控件筹划 。

3、初稿筹划

连络产品筹划原型和本身对产品的体验研究分化连络起来筹划初稿。（大年夜大年夜体的色系搭配 ，框架筹划，元素控件，图标ICON等筹划都可以在这一步展示出来）

4、视觉圭表类型筹划及细节优化筹划

初稿筹划完成后，就是要做好视觉圭表类型筹划及细节优化筹划 。视觉圭表类型筹划就是要对全数产品的色彩
，字体，字号，元素控件 ，图标ICON，间距及交互终局做个不合的圭表类型，多么才可以做出一个成熟的产品，对前端建造也是有很除夜的益处的 。

5 、前端对接

确认完筹划稿后，进进ui筹划师与前端工程师对接的阶段 ，ui筹划师需求供给切图，标注，筹划声明文档和筹划图给到前端工程师 ，一样往经经常独霸的与斥地对接的对象有蓝湖，figma。这个阶段需求贯穿连接跟斥地频繁地类似，确保可以很好地恢复筹划稿（理论工作中很难苛求百分百恢复），不凡是需求筹划师本身要晓得一点前端代码常识，可以更好地举办类似 。

6  、测试与回响

产品进进到测试阶段，需求测试人员介入，一样往常这个时辰是先部非分非分不凡部举办可用性测试，然后扩除夜到全数公司 ，几回测试几轮此后确保没有很除夜的问题此后才可以发包给客户测试或上线，而ui筹划师这个时辰就要群集回响，群集定见 ，与产品一同构和改进筹划 。

6、UI筹划三除夜定律

三除夜绳尺定律包含
：格式塔绳尺、菲茨定律和剃刀律例。

1、格式塔绳尺

深化地说格式塔就是知觉的幻想下场下场
。是我们在不觉适意与没有引进反思的气候学外形时的知觉 。格式塔绳尺包含五个特点 ，分袂为：邻近性、近似性、封锁性、延续性和复杂性
。

(1)、邻近性：人们会将距离壁近的部分潜见识算作一个集团。例以下图所示 。右边距离都不异，人们会认为是一个集团
，右边三四列和一二列相隔较远，人们会认为这是两部分。

(2) 、近似性：人们会将近似的部分，算作一个分组集团。例以下图，一组圆形，人们会算作一个构成部分。一组矩形，人们会算作此外一组构成部分。

(3)
 、封锁性：元素处于一个封锁空间，人们会将各个部分趋于构成集团。比如圆形被线框包抄，人们会将这个算作一个集团。

(4) 、延续性 ：人们偏向于无缺的连成一个图形 ，而不是不雅不雅不雅不雅不雅不雅不雅不雅不雅不雅不雅不雅不雅不雅不雅不雅查询拜访无缺的线条或外形
。

(5)、复杂性：具有对称  、轨则的复杂图形特点各部分趋于构成集团。

2、菲兹绳尺（费茨律例）

肆意一点挪动到方针中心职位所需时分与该点到方针的距离和大年夜小有关，距离越除夜时分越长 ，方针越除夜时分越短。

掉落踪掉落踪结论 ：越是次要按钮 ，按钮要越除夜，多么独霸时分就越短，越利便 。职位距离用户独霸越近  ，多么用户越易点击
。

3 、奥卡姆剃刀律例

这个事理称为"如无需求，勿增实体"，即"复杂有效事理"。若无需求
，勿增实体。不须要的元素会招致筹划屈就的降低 ，并且会添加不成预期的下场。在筹划中我们可以往损掉落踪落不须要的烦扰元素，多么页面会斗劲地道
、精练 。

7、UI筹划经常独霸对象

1 、Adobe Photoshop

Adobe Photoshop是一种精细的网页筹划对象。它有良多选项来成立和编辑您的Web模板。它合用于图象 ，您可感应您的网页筹划成立图形
。经由过程无量的色彩和渐变选项，可以建造出最好的模板筹划
。它为您供给了一个空白的画布  ，让您的想象力活泼
。您可以屈就本身的编制附加图象，挪动元素，绘制框 ，裁剪边沿和编辑模板。它合用于图层 ，这使您的工作特别很是复杂。您可以展示/湮没图层以有效治理Web筹划元素。

2、Sketch

Sketch是合用于Mac设备的网页筹划软件  。它是专注于成立Web模板和筹划的专业对象。它合用于矢量图象
，是以您将掉落踪掉落踪最好，最高分辨率的下场
 。对象栏和选项特别很是复杂。Sketch供给了成立和治理Web筹划项方针无缺矫捷性 。它具有镜像下场 ，准予在多种设备（如手机或平板电脑）上测试您的网页筹划模板
，可以100％断定您的网页筹划将若安在不合的屏幕尺寸上展示 。

3 、Figma

Figma是一个多用户网页筹划软件
。它准予您与筹划团队联络以独霸不异的Web模板
。它是与客户共享项目并在模板筹划前程行及时变换的智能对象。Figma将网页筹划汲引到一个全新的程度，它的编辑面板中包含字体，色彩和其他设置 。用于成立图标或无缺的Web模板时 ，对象和选项特别很是棒。

4、Adobe Illustrator

Adobe Illustrator 供给了一个完竣的像素级筹划气候，您可以在个中成立矫捷且流畅的 Web 元素 。它为您供给了成立清爽脆落的 Web 筹划所需的实足，包含矢量图形 、照顾式媒体图标 、可伸缩组件
、CSS 生成、SVG 导出、线框和可几回独霸的标识表记标帜。

Adobe Illustrator

5
 、Adobe XD

adobe家打造的一款集页面筹划和交互原型为一体的筹划对象，支撑多人在线及时协作下场
。此内涵兼容性凹凸风最除夜，能跟全家桶产品举办联动；可是在成本和下场这两方面绝对后面两款就斗劲弱势了
。

6
、Canva

Canva是一款免费的筹划对象 。它不克不及被认为是一个成熟的网页筹划软件，但你可独霸Canva成立诙调和有吸引力的筹划来支撑你的网页模板。它特别很是契合构建可以添加到Web筹划中的图象
。

它设备了数百个模板，使您的工作更轻松。假定您没有任何筹划技能 ，可独霸Canva中的模板 ，轻松地为您的Web模板构建具有专业外不美不雅不雅不雅不雅不雅不雅的图象。

8 、UI筹划寄看事项

1、筹划要精练

非论是用户的不雅不雅不雅不雅鉴赏体验仍是独霸体验，UI筹划都理应尽大年夜大年夜约将集团的筹划筹划复杂化 ，让用户可以一览缺乏。

2、色采独霸

网页UI的色采独霸偏向于少而精，少代表了集团页面的色彩独霸；精代表了在配色的时辰尽大年夜大年夜约的调和
。

3、图片的独霸

网页 UI 中罕用素材图片，在某些信息展示中不克不及不必到什物图那另当别论
， 网页UI不须要除夜气超卓的banner。

4、寄看合用性

UI筹划师在筹划产品时，次要思虑的就是该产品的合用性 。只思虑筹划本身 ，而离开产品独霸，那产品注定是损掉落踪落败的 。

总结

优化猩SEO：UI筹划的独霸日渐普及
，已成为拉近消费者和商品距离的需求需求 ，UI筹划的身手程度已慢慢占据企业间彼此竞争的严惩法域
，成为与敌手拉开差距的次要竞争身手。

参考链接 ：

UI筹划（软件界面筹划）_百度百科

https://baike.百度.com/item/UI%E8%AE%BE%E8%AE%A1/750896

UI筹划的十除夜绳尺【UI筹划师必看】

https://www.itheima.com/news/20191016/120204.html

UI筹划流程（原创）_筹划菜鸟ww7-站酷ZCOOL

https://www.zcool.com.cn/article/ZMTQ3MjI0.html

UI筹划的寄看事项 - 知乎

https://zhuanlan.zhihu.com/p/448962966

改削于2025-09-22