江苏龙网

  1. 首页 > 资讯 > 科技 > >

|10张图让你明白UI和UX的区别


什么是UI、 UX？或者说它们之间有什么不同？说句实话早几年我连UI都不是很明白 ， 说出来都有一点不好意思了……
Ok…让我们用图片的形式来看一下UI与UX的不同之处吧 。
图一：倒过来的蕃茄酱瓶设计 ， 考虑到番茄酱快用完时很难倒出来的使用情境
|10张图让你明白UI和UX的区别
本文插图

图二：从定义来解释UI与 UX之间的差异 ， 两者定义有很大的不同 。
UI定义：UI是网站页面是如何物理布局 。 一个UI设计师会和你谈东西应该放哪里 ， 用什么颜色 。 UI是负责网站的创意和视觉作品 。
UX定义：UX专注于网站 ， 它的行为与互动 ， 比如一个盒子滑出 ， 以及人们如何与它进行交互 ， 比如他们会点击或输入进行交互 。 UX处理的内容和网站地图的结构 。
【|10张图让你明白UI和UX的区别】
|10张图让你明白UI和UX的区别
本文插图

图三：从专业分工的角度来说明差别 ， 可以看出负责的部份有哪些相同 ， 哪些不同 。
|10张图让你明白UI和UX的区别
本文插图

图四：这张图比较复杂 ， 但是基本上还是看得出差异 。 相同之处很明显 ， 都有大胡子 ， 但是装扮上就有很大的区别 。 为什么？你们可以根据定义思考一下……
|10张图让你明白UI和UX的区别
本文插图

下面的这张图跟上面的那张是同一张,只是风格不一样,从设计师的角色转变成很酷的时尚年轻人 。
图五：从工作职责来解释差异 ，UX的范围很广 ， 很少人可以精通全部 ， 可以说几乎没有 。
|10张图让你明白UI和UX的区别
本文插图

|10张图让你明白UI和UX的区别
本文插图
图六：这张图的表述可能并不全面或清晰 ， 但可以做为一个参考 。
|10张图让你明白UI和UX的区别
本文插图

图七：UI、 UX基本的工作项目来区分的话 ， UI没有品牌推广这个职位 。
图八：从产品的角度看UI与UX ， UI是产品的一部分 ， UX是使用产品的体验 。
|10张图让你明白UI和UX的区别
本文插图

图九：UI Design:功能；Usabilitydesign:动作；User Experiene Design:情感；
|10张图让你明白UI和UX的区别
本文插图

图十：UI是用来取内容的工具 ， 使用者使用UI吃完东西（内容）的体验是UX 。
|10张图让你明白UI和UX的区别
本文插图

总结：UI设计是展现视觉层面的（界面） ， 而UX是使用过程中的情感（互动与体验） 。
有人会说设计UI不就是在设计UX吗？
如果用户的体验只注重视觉界面的美观 ， 或许可以这么说 。
但是使用者手上拿的不是UI ， 而是产品 ， UI只是产品设计的一部分 ， 体验不仅受到产品的影响 ， 还会受到使用产品体验过程中的情境及使用者对品牌印像等等其它体验相关的事影响 。
文章内容来源于网络 ， 侵删


    推荐阅读


    上一篇：马路边老张|三星新机来袭：4200毫安+曲面屏+48W快充，将是颜值最高的5G手机

    下一篇：大哥大短讯|从3799跌至2218，麒麟990+5G双模+40W闪充，网友：真香