UX与UI:这个动态DUO的差异

手机和线框的例证 

那里’Web设计和Web开发的好理由是如此热门话题。想想你在网上做的一切。购物,阅读,追赶新闻,娱乐,与朋友联系—列表继续。这些活动弥补了我们日常生活的一大部分,需要周到的设计和布局,以确保我们继续回归。 

使用手机应用程序,适应您设备尺寸的网站,以及一系列社交网络和交互式沟通方式,互联网比以往任何时候都更容易访问。用户可以在其触摸屏上订购食物,预订门票或购买产品,并在触摸屏上有一些水龙头。

考虑到这一点,横跨频谱的企业和组织都意识到他们的产品或服务需要易于了解,访问或在线访问或在线使用,以保持竞争力。 

对应用程序和移动互联网使用的这种痴迷已经为Web设计的全新职业利基铺平了道路。如今,用户体验(UX)和用户界面(UI)设计正在成为最优先事项。

你’VE可能听到这些术语在类似的对话中使用,但您真的了解UX与UI的区别吗?

UX与UI:它们是如何不同的?

利用这种类似的缩写,许多人认为术语UX和UI是可互换的。但是’不是这种情况。

“UX设计是整体,UI设计是UX设计的一部分,”Rachel Rose说,UX设计师 簇绒& Needle。她解释说,UX看到了完整的项目并理解每个步骤,包括业务目标,问题声明,用户研究,设计流程和接口,与开发一起工作,并迭代发布后和测试。

“UI是内容的视觉造型,使其成为一个凝聚力,干净的包装,” Rose says. “有些地方可以在技术上专注于一个或另一个,但大部分时间都重叠。”

UX和UI是在构建新应用程序或网站时扮演关键角色的不同概念。它’重要的是要明白他们不是竞争概念;相反,他们携手共进,创造直观,用户友好的体验。

什么是用户体验(UX)设计?

UX设计的目标是促进对产品,应用程序或网站的积极看法。如果用户在与应用程序或网站交互后,UX设计人员已经失败了感到沮丧或困惑。避免这种方法是创造一种体验’s尽可能简单,无缝和满足。

伟大的UX设计师可以预测用户将想到,感觉和做的是为了创造直观的体验。通过这种方式,UX设计人员可以根据其项目或产品具有完全不同的作业。网站,视频游戏,一双漂亮的耳机—实际上涉及用户交互呼叫UX设计的任何产品或平台。

玫瑰’通常涉及用户研究,可用性研究,与文章和开发团队合作,以及设计接口和用户流程。 自由职业者UX设计师 Che Harvey说,虽然他使用标题“UX designer,”现实是一个标题“数字产品设计师”可能更好地封装他的角色。

“我喜欢这个术语,因为我通过研究和测试迭代地创建对用户需求的解决方案—结果是产品,” Harvey says. “设计遵循一个过程,因此根据团队在设计周期中的位置,我的任务将改变。也就是说,我确实花了很多时间捕捉到藏在利益相关者内的知识和专业知识的特写’ heads.”

哈维运行设计研讨会并进行并综合用户访谈以收集有价值的信息。如果没有这些见解,最终产品的质量可能会受到影响。

“我真的很喜欢理解我们的客户是谁以及他们如何与我们的网站互动,” Rose says. “听取现实生活客户,然后迭代设计,以最好的服务是非常有益的。”

什么是用户界面(UI)设计?

如果UX是关于用户如何与产品互动’S的影响,美学和功能,UI专注于构成产品的特定元素(例如,颜色,图像,按钮等)。当UX Designers ob says的计划,一个网站,UI设计人员可以花时间确保想要找到产品页面并购买东西的游客可以在没有两次的情况下导航。

一旦创建了用户体验的愿景,用户界面设计人员可以确定详细信息,以帮助引出优选的用户体验。“我花费大部分时间为我们的开发人员记录UI更改,” says Blair McKee of Constellix..

“It’通常没有那么简单‘Add a button here’ or ‘Change a color.’大多数时候,我必须检查现有代码并弄清楚如何在其他屏幕上没有重写或弥补其他元素的其他实例,以实现我想要的更改,”麦基解释道。这部分工作可以非常技术性。

但硬币的另一边是有点抽象和直观的—用户测试。麦克伊说’迷人观看人们使用产品并讨论他们的过程,为什么他们做出了一定的决定,是什么让他们感到不舒服,他们的觉得是什么。“It’当您有一组没有以前的经验或aren的测试对象时,甚至更好’在与产品相同的行业中。”

让’使用真实生活榜样来带回它的家。想想你最喜欢在线购物的地方。 UI是整体布局,按钮的颜色,通过产品或价格过滤的能力等。UX是找到您在第二天快速和接收它的令人愉快的经验。这两个元素都鼓励您将来返回该网站。

你如何在UX和UI之间做出决定?

当您学习UX和UI时,您可能会倾向于更接近一个专业。艾琳娜卡尔加瓦,UX设计师 科学研究服务说,UX表示,对于喜欢持续学习的人,很多合作并将不同意见纳入他们的工作的人来说是一个伟大的方向。这是对面向用户的经验的整体热情。

“如果您对具有直观和精美的界面进行迷人的用户,请考虑关注UI,” Karpava says.

但是,我们的专家都同意—you shouldn’t专门限制自己到UX或UI。“尝试两者,两者都很伟大,” McKee says. “They can’没有彼此存在。即使您只设计UI,您也需要UX Mindset来预测您的用户想要做什么。 UX优点需要UI,所以他们可以了解设计的局限性。”

“我会告诉一个试图决定UI和UX之间的职业深呼吸和放松的人!” Harvey says. “当有人刚开始时,无论如何都会暴露在双方,他们对任务的自然反应将帮助他们选择他们想要深入挖掘的硬币的一侧。”

UX,UI和你

有一件事将变得清晰,因为你进一步探索UX世界和UI就是那里’S几乎无限的设计解决方案范围和可用的可能性。缩小它,你’LL需要一个独特的技能和镜头混合来查看世界。

“通过解决人们的挑战’S问题,为了提供以人为本的设计,您应该是一名心理学家,一次性和工程师,” Karpava says. “及时,找到优雅的解决方案不仅仅是一项工作任务,而是一个生命哲学。”

如果您可以在该描述中看到自己,也许UX或UI的职业是您自己的工作生活的理想优雅的解决方案。

A 图形设计学位 可以帮助您采取第一步,以试验这两个迷人的特色。但是’不是唯一可用的大道。详细了解您的文章中的选项,“你能用图形设计学位做什么?

编辑’S注意:本文最初于2015年发布。自更新以来,它已更新以包括与2019相关的信息。

Brianna Flavin

Brianna是Collegis教育的内容作家,他们代表拉斯穆森大学写了学生的重点文章。她在诗歌中获得了MFA,并教授英语教练。她喜欢写作,教导和谈论有效沟通的力量。

女性作家

Related Content

这篇广告内容是由Rasmussen大学创建的,以支持其教育计划。拉斯穆森大学不得为此内容中的所有职位做好准备。请拜访 www.rasmussen.edu/degrees. 有关提供的程序列表。 Rasmussen.edu上提供的外部链接仅供参考。 Rasmussen University不保证,批准,控制或专门支持网站链接的网站上提供的信息或产品,而不是由网站所有者,作者和/或选定的组织认可的。拉斯穆森大学是一个区域认可的私立大学。

徽标 - 认证 - acen Logo-Accreditation-CCNE 图表凭证 - 梯形 - 员工 - 学士学位 0学分90学分180学分48学分从这里开始高中毕业从这里开始转移学生从这里开始二级追求者在这里结束联系’S DEGREE从这里开始掌握’S DEGREE追求者在这里结束学士’S DEGREE在这里结束掌握’S DEGREE图表凭证 - 梯形队员 - 员工 - 学士学位 0学分从这里开始高中毕业从这里开始转移学生90学分从这里开始二级追求者在这里结束联系'S DEGREE180学分在这里结束学士'S DEGREE图表凭证梯形医疗保健管理 0学分90学分180学分48学分从这里开始高中毕业从这里开始转移学生从这里开始二级追求者在这里结束联系’S DEGREE从这里开始掌握’S DEGREE追求者在这里结束学士’S DEGREE在这里结束掌握’S DEGREE图表凭证梯形级-RSB 0学分从这里开始高中毕业从这里开始转移学生90学分从这里开始二级追求者在这里结束联系'S DEGREE180学分在这里结束学士'S DEGREE图表凭证梯形级-RSD 0学分从这里开始高中毕业从这里开始转移学生91学分从这里开始二级追求者在这里结束联系'S DEGREE181学分在这里结束学士'S DEGREE图表凭证梯形梯级 - RSJ 0学分从这里开始高中毕业从这里开始转移学生91学分从这里开始二级追求者在这里结束联系'S DEGREE180学分在这里结束学士'S DEGREE图表凭证梯形级-RSN 0学分从这里开始高中毕业从这里开始转移学生91学分从这里开始二级追求者在这里结束联系'S DEGREE181学分在这里结束学士'S DEGREE图标彩色大纲 - 银行 icon-colored-utline证书 图标彩色大纲 - 圆形美元符号 icon-colored-outline-folder-search 象色概述手心 图标彩色轮廓头块 图标彩色轮廓 - 头齿轮 图标彩色轮廓头心 icon-colored-utline-health-plus-seaves 图标彩色轮廓医院 图标彩色轮廓 - 终身学习 icon-colored-utline-light-blb-pandtics 图标彩色轮廓 - Maginify-Glass 图标彩色轮廓放大镜 icon-colored-utline-monitor-healthcare icon-colored-utine-monitor-paper-search 图标彩色轮廓 - 护士射线 图标彩色轮廓 - 挂锁屏蔽 图标彩色轮廓尺度 icon-camera icon-filter. icon-info-circle 映像向前 icon-play-solid icon-quote-mark-left icon-quote-mark-over icon-share-square-o icon-spinner. icon-tag. Logo-Rasu-rucnall Ras-Logo-Flame RAS-徽标 - 水平 ras-logo堆叠 icon-bank 图标概要图表 icon-general-connect 图标通用程度 图标通用讨论 图标通用电子邮件 icon-general-find 图标通用帽子 图标通用 图标一般 - 笔记本电脑建筑 图标一般 - 笔记本电脑 图标通用领导者 icon-general-map 图标一般钱 图标 - 一般文书工作 图标一般 - 人 icon-general-phone icon-alignal-speed-out icon icon-mglass. icon-scales. Rebrand-arrows. 图标 - 上色 图标彩色箭头交叉曲线 icon-colored-bridgecase-star 图标彩色构建 图标彩色灯泡分析 图标彩色证书 象色 - 持续开发 icon-colored-duo-chatbox icon-colored-folder-mortarboard 图标彩色地球钢笔 图标彩色生长 图标彩色手泡沫 图标彩色手恒星 图标彩色头部块 图标彩色头齿轮 图标彩色笔记本电脑 - CBE-摩天大楼 图标彩色笔记本电脑网页 图标彩色位置 - 地图 图标彩色位置引脚 图标彩色监视器纸张扫描 图标彩色灰泥板美元 图标彩色国家 图标彩色人白板 icon-colored-phone-chatbox 图标 - 彩色警察灯 图标彩色准备 icon-colored-photeer 图标彩色区域 图标彩色保存时间 图标彩色衬衫帽子 图标彩色摩天大楼 图标彩色状态 象色的学生以学生为中心 图标彩色支持 图标彩色世界体验 图标 - 简单聊天 图标 - 简单桌面 图标 - 简单查找 图标 - 简单汉堡包 图标 - 简单手机 icon-testimonial引号 icon-social-facebook - 广场彩色 icon-social-facebook-square icon-social-facebook 图标 - 社交 - Google-Plus-Square 图标 - 社交 - Google-Plus icon-social-instagram icon-social-linkedin-方形 icon-social-linkedin-square icon-social-linkedin icon-social-pinterest-p 图标 - 社交 - 推特 - 广场 图标 - 社交推特 icon-social-youtube-播放彩色 图标 - 社交 - youtube-play icon-util-checkbox-white icon-util-checkbox icon-ilmer-checked-white icon-util-checked icon-util-chevron-down icon-util-chevron-left icon-util-chevron - 右 icon-util-chevron-up icon-ilming-language-switch icon-util-loading icon-util-open-窗口按钮 icon-util-open-window-link icon-util-pdf-button icon-util-pdf-link icon-util-refresh icon-util-x