UX&UI的介绍区别

在Web设计的世界中,一直充斥着各种诸如UX、UI这样的专业名词。然而他们到底是什么意思呢?
  在传递一个非凡的网站使用体验给终端用户的过程中,UX(User Experience 用户体验)设计和UI(User Interface 用户界面)设计两者皆是其中重要的组成部分,但又并不相同。我们将快速的分解出两者之间的关键差异,并接着讨论他们又是如何关联在一起的。


  配图来源:UX Movement

UI (用户界面) 设计主要包括Web设计的视觉部分。它呈现了展示层和互动层的不同层次,赋予产品一个整体的外观观感和感受。
  Usability.gov 是一个面向Web设计最佳实践和指南的重要资源网站,其中将不同的UI元素分类为:
- 输入类(Input) --- 文本字段表单(Text field forms)、日期字段表单(date field forms)、下拉列表(dropdown lists)、复选框(checkboxes)、列表框(list boxes)、可点击按钮,等等。
- 导航类(Navigation) --- 滑动条(Sliders)、搜索字段表单(search field forms)、分页元素(pagination)、侧边栏(siderbars)、标签(tags)、图标(icons)等等。
- 分享类(Sharing) --- 好友列表(Friend lists)、关注按钮(follow buttons)、赞/顶(like/promote)、分享按钮、邀请好友,等等。
- 信息类(Information)--- 文本内容(Text content)、提示信息(tooltips)、消息框(message boxes)、通知提醒(notifications)、图标、进度条(progress bar),等。

  UI设计不仅仅包含第一次访问某个页面时所看到内容,还包括当用户与这些页面元素互动时元素如何反馈的设计。下面这个天气预报的App 就是一个UI设计的互动部分的典型范例展示:

  配图来源:Dribbble

如果UI把这些内容都涵盖了,那还剩下什么给UX呢?
UX(用户体验)设计被定义为:通过改善用户和产品互动过程中的可用性(usability)、易用性(ease of use)、乐用性(pleasure)来提升用户满意度和忠诚度(粘性)的过程。
  为了在企业和用户之间创建这样的高质量体验,用户体验设计师聚焦于研究、可用性测试、以及其他可以深入理解用户的各个方面。例如,许多UX研究人员使用A/B 测试方法来帮助判断两个设计方案中哪个更受终端用户的青睐。

So,他们两者是如何关联的呢?有效的UI和UX设计会紧密配合,为用户创造一个全面愉悦的体验。如果其中之一没有达标,将会大大的影响整个网站的表现。例如,一个网站的UI设计很棒,但UX设计很糟糕,就会感觉不对劲。因为它看来美的令人惊叹,但是却又非常难以驾驭。另一方面,有些东西很实用但很不好看,就是UX设计很棒,UI设计很糟糕的典型例子。

时间: 2024-08-07 16:35:29

UX&UI的介绍区别的相关文章

UX/UI设计工具的选择:对设计师的重要选择标准

原作者信息:Tom Koszyk    资深设计师,自由的产品设计师, Pixology 艺术总监 . 音乐爱好者. 游戏爱好者. 原作者Medium地址:Tom Koszy的Medium 原文地址:The Perfect UX/UI design tool. 译者:UI设计爱好者一只,欢迎交流.第一次试译,欢迎指错. ||  Adobe Photoshop, Affinity Designer Sketch 3?-?UI设计三工具 多年之前,不管是做简单的网页,还是做复杂的原生APP,Phot

使用UI框架和不使用UI框架的区别

使用UI框架和不使用UI框架的区别?很多朋友想这个问题很简单,使用UI框架就能够快速完成项目开发,不使用UI框架就自己造轮子,开发速度慢只是其中之一.这样说并不是不对,不过我想多数人应该和我想的一样,需要考虑的是开发一个什么样的项目,项目费用规划等因素结合才能决定. 首先我们来聊一下什么情况下不适用UI框架? 考虑到项目成本,很多人就会招几个程序员一起研发一个项目,可能在1-3个月就能完成一个项目,预估工资成本在5-10万左右,如果你买一套UI框架就十几万,这样的情况就没必要使用UI框架. 有人

国内外人气UX/UI/PD设计社区推荐,纯干货

对于很多人尤其新手而言,要把握最新的设计动态及发展趋势,似乎不是一件轻松的事情.如果你也像我一样是个设计小白,而且正在担心自己设计的作品是否符合客户需求.烦恼找不到设计解决方案.得不到有效的用户反馈,那么你可以看看这里推荐的UX/UI/PD设计社区及论坛,也许可以得到一些启发. 1.Dribbble Dribbble是国外一个很出名的社区以及社交网络平台,它致力于帮助设计师建立团队和品牌.你可以从它的首页捕捉到当下流行的设计作品,但不是任何人都可以发布在线作品的.这里有很多网页设计师.平面达人.

微信公众号 几种移动端UI框架介绍

微信公众号开发,主要是移动端网页的页面开发,在这里推荐3个移动端UI框架:WeUI.SUI和Mint UI. 1. WeUI 1.1 WeUI WeUI是微信官方设计团队为微信 Web 开发量身设计,可以令用户在HTML5应用中的使用感知更加统一. 组件包含button.cell.dialog. progress, toast.article.icon等等. 资源 官方Demo:https://weui.io/ Github:https://Github.com/weui/weui (★1340

UX/UI使你的产品拥有病毒式传播力

正好受用,非常感谢作者,分享给大家,希望大家从中受益 什么样的理想化的ux流程,能够使产品具有病毒式传播力?我们通常避免谈论什么理想化,因为这是相当矛盾的范畴.不过,我们非常热切地想分享关于在UI/UX阶段让产品具备病毒传播力的想法.今天我们就跟Medium读者分享这些观点. 病毒式营销的本质 病毒式营销概念的背后,是能让用户快速理解,以及在用户体验过程和传播过程中,拥有简单的产品自我升级功能.像一种传染性的疾病,它从一个人传染到另一个,并且不需要对这个过程有特别的干预,而是一个顺其自然的过程.

UI、UE和UX三者之间的区别?

UI:User Interface 用户界面 用户界面其实是一个比较广泛的概念,指人和机器互动过程中的界面,以车为例子,方向盘.仪表盘.换档器等都属于用户界面.现在一般把屏幕上显示的图形用户界面(GUI :Graphic User Interface)都简单称为UI.可能是UI这个概念比较难以被一般人理解,所以现在一般所说的UI设计师,也即是指GUI设计师.也就是图形界面设计师.主要是负责产品或是网站的图形图标色彩搭配,总之是负责网站看起来是一个什么风格什么气质. UE or UX: User

iOS开发UI—UIWindow介绍

一.简单介绍 UIWindow是一种特殊的UIView,通常在一个app中只会有一个UIWindow iOS程序启动完毕后,创建的第一个视图控件就是UIWindow,接着创建控制器的view,最后将控制器的view添加到UIWindow上,于是控制器的view就显示在屏幕上了 一个iOS程序之所以能显示到屏幕上,完全是因为它有UIWindow.也就说,没有UIWindow,就看不见任何UI界面 补充:UIWindow是创建的第一个视图控件(创建的第一个对象是UIapplication)如下图:

2019.9.27 Unity中Sprite和UI Image的区别

来源:https://blog.csdn.net/coffeecato/article/details/78536488 coffeecato写在前面:本文确实不错,作者用以说明自动生成网格的示图非常具有代表性,从drawcall的生成过程分析性能开销的重点,引出了overdraw和达到GPU像素填充率限制的原因,从中也可以看出作者对这个主题的理解颇有深度.查看作者的个人自述,居然是个2012年毕业的小伙子,后生可畏啊!翻译本文对自己也是个考验.英文水平捉急,如果错误请多多指正. 原文:UNIT

Ligg.EasyWinApp-100-Ligg.EasyWinForm:一款Winform应用编程框架和UI库介绍

本项目是一个Winform应用编程框架和UI库.通过这个该框架,不需任何代码,通过XML配置文件,搭建任意复杂的Windows应用界面,以类似Execel公式的方式实现基本的过程控制(赋值.条件判断.循环.跳转)和功能(字符处理.文件处理.Windows脚本执行.逻辑运算.数学运算.数据输入输出-支持String.Jonson.DataTable类型的数据):动态加载“即插即用“的.Net组件实现特定的业务处理功能:支持多线程.多语言. 程序启动运行示意图: **说明:SeqExec.exe是一