CMS,SMO,SERP,OMG!男孩会喜欢科技行业的首字母缩写词。但是对于设计师和处理自己的数字设计的人们来说,UX和UI似乎是最令人困惑的,因为他们不仅是一个字母,而且是相关的概念。在查看UX与UI时,重要的是要知道哪个是因为,尽管存在重叠的问题,但每个人都有自己的特定问题,并且解决一个问题不会解决另一个问题。

TBC
插图Orangecrush

在本指南中,我们看一下UX与UI,以清除混乱并解释谁是谁,因此您可以为您的网站或应用程序优化。重要的是要了解UX和UI之间的区别,因为为了获得最佳结果,您不仅需要掌握一个或另一个,还需要两者都知道。

什么是UI设计?
-

UI代表什么?UI的意思是用户界面并指的是用于网站,应用程序和视频游戏的控件,按钮或任何用于交互性(例如麦克风或手势控件)的内容。因此,UI设计是您设计控件的方式,例如将心脏“喜欢”按钮放在图片的底部或让用户悬停在下拉列表上以打开它。

UX与UI设计:电影应用的示例接口
UI设计蒂克肖

UI设计对于任何交互式数字产品都是至关重要的。您想设计一个不言自明的界面,因此即使是新用户也可以弄清楚如何使用它。同时,您想使界面不引人注目,以使控件不会妨碍实际内容(想想仅在需要键入某些内容时弹出的智能手机键盘)。

为了帮助用户立即了解控件,大多数UI设计都取决于所谓的“图案”,这仅仅是站点,应用程序等之间的标准和共同点。最受欢迎的UI模式之一就是将放大玻璃图标用于搜索栏 - 一旦您看到图标,任何地方,你知道这意味着什么。

UI模式也可以与功能有关。您是否注意到大多数网站都将其徽标放在上左上角,如果您单击它,则返回主页?此UI模式可确保,即使您第一次在网站上,您仍然可以找到主页,如果您迷路了。UI模式只需复制常规控制选择,因此用户可以立即识别它们。

UI与UI设计:Wordplay的不同接口视觉效果手机游戏的示例
UI设计akira x3

关于界面的外观也有很多话要说,这也适合UI设计。设计师可以创建适合网站或应用程序心情的控件,例如使用品牌颜色或在必要时使用品牌的特征版式。

但是,如何影响人们使用该网站的设计选择,例如使用浮华的颜色或动画引起注意的按钮?这是UI开始进入UX领域的地方,当差异开始变得泥泞时……

什么是UX​​设计?
-

UX代表什么?UX的意思是用户体验并与人们在使用网站或应用程序时的感受有关。确实,UX可以适用于任何东西,甚至可以应用于非数字产品,但是对于本文,我们将坚持使用网站和应用程序。

UX设计更难理解,因为它更抽象。虽然UI设计涉及更具体和绝对的方面,但UX涉及事物的情感方面。使用此网站还是应用程序简单而直观?当用户找不到想要的东西时,他们会感到沮丧吗?

UX设计中最重要的部分之一是预测用户将做什么,并围绕该网站/应用程序设计。例如,像Instagram这样的社交媒体网站围绕用户与其他人的内容交互,因此更多的屏幕空间致力于查看图像。

在Instagram上查看此帖子

99Designs共享的帖子(@99Designs)


在社交媒体上看到大图像和小型控件是如此普遍,我们忘记了这是一个故意的设计决定。

同时,很少有屏幕空间专门用于不太受欢迎的操作,例如更改用户偏好,您只能通过浏览个人资料来做到这一点。核心之一UX设计原理是通过牺牲较少常见的动作来轻松采取一两次单击,使其轻松,您可以将其隐藏在其他菜单后面以节省空间。

换句话说,UX设计可以通过突出某些动作和减少其他动作来影响用户的工作。大多数商业网站都使用浮华的视觉效果来进行呼叫行动按钮(例如“在此处注册”),以吸引注意力并引起更多点击;同时,法律和版权信息通常被流放到页面的底部,并以朴素的小文本编写,因此不会分散用户的注意力。

UI与UI设计:使用UX进行CTA按钮的Web设计示例
UX设计师控制屏幕的哪一部分被看到,哪些部分没有看到。请注意,大单词和五颜六色的CTA按钮如何脱颖而出。网站设计由阿尼亚·罗伊(Ananya Roy)

当然,操纵控件的设计以促进某些动作涵盖UI和UX,因此您可以开始查看混淆的出现。

UI和UI有什么区别?
-

无视重叠的区域,UX和UI各自是一个独特的字段。即使他们处理相同的问题(例如控制措施),UX和UI都采用不同优先级的不同方法。

UI设计是两者中更具技术性的。尽管用户的偏好(属于UX)仍应影响这些方面,但它处理了控件的外观和位置。尽管如此,UI设计还是更关注定量元素,例如按钮的宽度是多少像素,或用于按钮的精确颜色代码。

UI与UI设计:UI按钮设计样品
UI设计的技术工作,作者:汤加

同样,UX设计涉及事物的情感方面,定性元素。UX Design的重点是根据用户所需的内容(或网站/应用程序经理想要突出显示)来简化使用情况。UX更多地参与了摘要,例如如何使互动尽可能无痛。

UX与UI设计:映射用户体验动画
映射园艺应用程序的UX任务流,设计Typelab d

设计方法也有所不同。UI设计更加简单;设计师创建了图标和控件的样本,并注意到动画等特殊功能或将它们藏起来。另一方面,UX Design更具回旋处。设计师必须计划多种方案和任务流,这使得UX素描一种流行的做法。

即使UI和UX处理同一区域,它们都有不同的担忧。例如,以设计按钮。如果UI设计选择按钮的像素宽度,则UX设计涵盖了按钮是否太小,无法看到,或者太大,无法阻碍更高优先级的内容。

现在,要了解按钮(UI设计)的完美像素大小,您需要了解用户的喜好(UX Design)。为了满足用户(UX设计)的需求,您必须仔细,主动地构建界面(UI设计)。这就是为什么,如您所见,UX和UI设计共同努力,而不是相互对抗的原因。

UI和UI如何一起工作
-

对于所有关于UX与UI仇恨的讨论,他们经常以合作伙伴的身份工作。UX设计的果实,例如知道用户喜欢的内容,决定了UI设计中的选择。了解控制的完美位置和外观,更不用说知道要隐藏或剥夺哪些控件,涉及了解UI和UX设计。

UX和UI重叠的地方是使界面尽可能方便 - 您不希望用户思考过于努力或不得不走得太多。最常用的控件应易于访问和不引人注目,并满足UI和UI的目标。最近的UX设计趋势指向这个方向。

UI与UI设计:设计方便的UI的插图
如何通过单手电话用户优化拇指控件Lukew

设计控件时,您应该考虑UI和UX的目标。例如,在电话应用程序和网站的移动版本上,按钮和控件通常放在底部。原因是因为握住手机时该区域最接近拇指,这使按钮更容易按下,从而使UX受益。这些按钮还必须设计以适合该区域,例如使它们足够小,以至于不妨碍您,或者将它们塞入可以在必要时提取的隐藏菜单,这是UI设计的决定。

上面提到的模式通常适用于两个字段。对于UX,用户不必学习任何新的控件或担心如何执行某些功能。对于UI而言,已经布置了控件的外观和功能的基础知识,但是具有足够的灵活性,使设计人员可以使其独特。

要满足UI和UX,请尝试了解最终用户。与往常一样,这对实际用户测试更有效,而不是使用猜测。拆分测试可以确定哪些布局或视觉效果与您的特定类型的用户更好地工作,而观察参与者使用原型可以提供有关用户思维方式或在哪里有改进空间的洞察力。

UX与UI设计:分裂测试的示例
两个单独的屏幕,几乎相同,除了一个变量:CTA按钮。通过拆分测试,我们可以看到哪个访问者喜欢哪个以及哪些将获得更多的转换。
UX与UI设计:分裂测试的示例

至少您可以与特定用户组进行对话,无论是正式安排面对面的坐下来还是随便在社交媒体上提出一个开放式问题。当涉及UX与UI设计时,如果您为用户设计,那么差异就会较小。

UX与UI回顾
-

要快速参考,这是UX与UI的回顾

  • UI代表用户界面。UI设计处理按钮,控件和其他任何内容的技术设计。
  • UX代表用户体验。UX Design可以处理用户交互时的感觉,例如他们的偏好和注意到的内容。
  • 接口的物理设计属于UI设计,但应受UX的影响,例如用户对接口设计的想法或感觉。
  • 预期用户的操作并促进它们属于UX设计,但在界面的外观和位置上本质上影响了UI。
  • 满足UX和UI设计的最佳方法是了解目标用户组:他们的偏好,行为,习惯和思维方式。通过用户测试,这是最有效的。
您的网站需要一些一流的UX或UI设计吗?
与我们才华横溢的设计师合作,以实现这一目标。