什么是UI和UX?有什么区别?

发布者:刘辉凡

2021-01-19

阅读: 3035

相信大家常常听过UI和UX,也常看到国内公司开出UI Designer的职称,但其实对于UI UX确切定义并不太清楚。其实UX是  User Experience使用者经验的简称,而UI则是User Interface使用者介面的简称。今天我们一起来看看UI UX的确切定义、区别。

UI UX是什么?

UX (User Experience )使用者体验设计

UX (User Experience )主要的范畴为根据使用者的习惯设计优化用户体验,主要考虑的是「产品用起来的感觉」,也就是使用者介面设计。钻研如何妥善安排整个网站页面的内容规划,例如行动呼吁按钮(Call to Action )的位置应该摆在哪里、哪些区块的内容要先在网站上出现等等。

UX设计一般包含使用者的研究(User Research )和情境分析(Scenario ),一般有资源的公司会透过使用者历程追踪、问卷及实际访谈调查,或是内部资料库分析等等,分析潜在TA的使用习惯和行为,而后再三修饰创作出「最棒的」使用者体验。

若公司只开一个UX Designer职缺,那这位UX Designer主要是做网站的骨架设计,产出网站地图模板、网页Wireframe & Prototype ,以及配合行销数据去进行使用者研究报告。

UI (User Interface )使用者介面设计

UI主要是负责设计,将介面上的按钮、区块等等,主要考虑「产品怎么呈现」,以使用者便利性与整个设计的美学为出发点设计,依UX的理念和架构设计,包括整个网站产品的颜色、字型、字体大小,主要是根据PM或是UX设计师给的架构设计网页或是App介面,是产品的美学工程师。

而UI设计师和网页设计师的差别,一般网页设计师除设计网页的视觉呈现之外,也要求必须懂得前端切版,需要具备前端程式语言HTML+CSS甚至JS的能力;而UI设计师更重视使用者流程与使用者体验的细节,产出的网页比较偏向功能性网页,重视使用者流程。

UI UX设计与营销的关联

与一般传统商店相同,数位网站需要漂亮的门面、简单直觉的使用者介面及舒适的购物体验,吸引人的首页设计能让来到网站的客户能一眼看出你是卖什么、或是正在举办什么促销活动,以增加转换率。在UI UX设计中,会用顾客旅程地图来掌握消费体验与流程,进而找出改善方向。

而对于营销人员而言, UI UX设计的好坏会直接关乎到每个人员的KPI关键指标和成效,可以说是不得不重视的领域:

营销经理

营销经理被时间追着跑,可藉由评估UX 成本与效益的取舍,并给出最适合客户的建议。

SEO

网站体验会直接影响使用者的停留时间、浏览页数等网站分数,进而提升SEO 成效。进行SEO 规划时,从使用者的角度看待网站,安排好网站的视觉动线,在文案内容架构中曝光关键字,就能兼顾两者。

业务

在接洽或谈判时,可藉由客户网站优化情况,知己知彼百战百胜。

广告投手

好的UX 能提升 Landing page 体验,优化广告成效。

UI UX设计之间的关系?

一般UI UX设计为上下游关系,UX先透过研究分析使用者需求,思考哪些版面位置该放哪些内容及互动设计,在将网页的架构勾勒出来,接着才交棒给负责整体视觉呈现的UI设计师;UI设计师透过视觉安排与设计具体呈现,达成UX期望传达给使用者的逻辑与感觉。

 有些中小型的新创公司因为人员资源有限,会选择融合UI和UX设计这两个角色,并期许这位UI设计师可以兼具UX设计能力,最好还要会些前端程式语言,直接产出符合使用者体验+美感的网页。

相反,若大公司要将UI UX Designer职缺细分成更专业的分工,依种类可以再细分成视觉设计( Visual Design)、互动设计(Interaction Design),以及设计研究(Design Research)/使用者研究(User Research )。

视觉设计/图像设计 (Visual Design )

视觉设计跟我们一般认知的UI设计最相近,也最符合大众认为的「网页设计师」。视觉设计不需注意画面之间如何连接,也不必在乎网页互动性,视觉设计师最主要的工作是设计出美观且符合品牌直观概念的图示、控制钮、视觉元素和运用合适的字型,决定每个视觉元素应该呈现的样子,最常使用Photoshop 、Sketch等软体进行设计。

工作时,Visual Designer会根据Interaction Designer画好的流程及Wireframe进行视觉化的设计,他们必须在视觉上呈现想要给用户的感觉,较难用主观的条件论来评断成品好坏,毕竟每个人的美感不尽相同。

Visual Designer看中绘画能力及设计能力,对美感尤其要求,对学历的要求比较没那么多,想应征Visual Designer可以多著墨于自己的作品集以及设计的经验。

互动设计/动态设计(Interaction Design )

视觉设计擅长处理静止物件,而动态设计师主要设计动画呈现,也就是「使用者按了以后介面要有什么反应」,包含按钮&选单等元素,动画设计元素移进来&退出的转场效果,动态效果可以引导使用者的使用流程,提供使用产品的视觉线索,让介面更加完整,因此必须拥有动画设计能力。

Interaction Design需要将流程系统化且合乎逻辑的串起来,帮助使用者可以更顺利的使用产品,拿网页来说就是网页架构,因此非常考验设计者的逻辑能力。

工作上和工程师的合作会比其他角色来的更加紧密。许多分工没那么细的中小型公司不会将这个职位分出来,由PM和Visual Designer一起瓜分工作内容。

设计研究(Design Research )/使用者研究(User Research )

主要工作为设计题目,并且邀请使用者进行深度访谈,并从访谈中洞察使用行为,并判断出使用者轨迹,提出相对应的路径和按钮。身为设计研究需要相当的逻辑能力和观察力,深度了解使用者需求。

除了实体访谈,研究员通常也会研究目前的使用数据,用A/B test来得知哪个设计选项最适合使用者,根据需求不断重复更改设计。