UI/UX是什么？一篇搞懂UI与UX的差异，掌握设计流程与专业术语
UI/UX是什么？一篇搞懂UI与UX的差异，掌握设计流程与专业术语
随着各行各业逐渐迈向数字化，品牌纷纷推出自己的网站、移动应用等，带动了用户体验与界面设计的庞大需求，吸引许多人才转行做UI/UX设计师。不过，到底UI/UX是什么？两者的区别是什么？想要转行做UI/UX设计师又该从何开始学起？本文将分别为您介绍UI与UX的定义与5个常见专业名词，并带您认识UI/UX的设计流程，帮助您了解UI/UX的各项基本概念。
UX是什么？根据用户习惯创造出良好的"用户体验"
UX的全名是User Experience，中文为"用户体验"，顾名思义就是针对用户的习惯，设计出符合用户需求的流程。举个例子，您是否曾在品牌官网上选购某项产品时，却因为需要太多付款步骤而放弃下单呢？不直观的购物体验，就是UX设计师致力于解决的问题之一。UX设计师通常需要通过问卷调查、人物志（Persona）、客户旅程地图（Customer Journey Map）等工具，找出消费者的痛点并一一改善，给予消费者良好的使用体验。
UI是什么？从用户角度打造出美观且直观的产品界面
UI的全名是User Interface，中文为"用户界面"，用户界面更强调用户在浏览网页、APP等界面时的总体感受。从界面路径、按钮位置、点击后动画、阅读文字的感受，到整体的网页风格，都是UI设计师需要考量的重点。
UI/UX的区别是什么？
由上述内容可知，UI与UX都是基于用户角度，提升产品使用体验，两者的分工虽然不同，但却是相辅相成的。为了打造出既美观又实用的产品，UI设计师与UX设计师会在设计过程中互相给予专业意见。一般而言，一个产品的开发流程通常要先经过UX设计师归纳出用户需求，给予产品的基本框架，再交由UI设计师打造出引人注目的产品界面，进而提升用户对产品的好感度。
UI/UX入门须知｜5大常见UI/UX专业名词介绍
在踏入UI/UX领域前，事先熟知这两个领域的基础概念是非常必要的。以下是5种常见的UI/UX专业名词：
UI/UX专业名词1：Persona
Persona中文称为"人物志"，通过描绘人物志，可以帮助UX设计师了解受众的问题与需求，进而设计出更贴切的用户体验。人物志的内容包含用户的基本背景、年龄、收入、个性、兴趣、使用上的挑战等多方面细节，让UX设计师可以在构思过程中，逐步分析出值得优化的重点。
UI/UX专业名词2：Information Architecture
Information Architecture（IA）中文称为"信息架构"。用户在使用产品界面时需要接触的资讯相当庞大，而通过归纳信息架构，整理、分类这些内容，可以帮助UX设计师将整个过程一目了然，结合早前的用户体验研究结果，逐步打造出符合用户体验的成品。
UI/UX专业名词3：Wireframe
Wireframe中文称为"线框图"，就像影片拍摄需要画出分镜一样，在设计产品界面时也需要以线框图呈现页面排版与架构，将设计概念以线条草稿可视化呈现，方便团队讨论并即时调整。
UI/UX专业名词4：Mockup
Mockup中文称为"视觉模型"，当线框图大致定型，UI设计师便开始依照架构加入设计元素，构建出产品视觉。
UI/UX专业名词5：Prototype
Prototype中文称为"原型设计"，在进入最终成品前，UI设计师会制作出产品的原型，将静态设计稿所无法呈现的动态细节表现出来，避免在工程师实际开发时还需要反复确认所有细节。
解释完上述专业名词后，您是否对UI/UX设计更加感兴趣了呢？接下来，我们来介绍UI与UX的设计流程。
UX设计师如何优化用户体验？
一般而言，UX设计师的设计流程包含以下4个步骤：
- 确定产品需求：与客户讨论产品的需求，并确认整个计划的时间表。
- 用户研究：进行定性与定量访谈，并使用双钻石模型、人物志等研究工具找出用户的痛点。
- 创建产品流程与信息架构：结合用户研究所得出的信息，创建信息架构，确定产品的雏形。
- 设计Prototype：将新的设计以线框图呈现，并撰写交互文档，以便顺利与UI设计师、工程师对接。
UI设计师如何打造用户界面？
如果团队中有UX设计师合作，UI设计师便会接手UX设计师的项目，加入视觉化设计元素，以Mockup或Prototype呈现，确定每一项细节后才会交由产品经理或工程师继续下一阶段的开发步骤。如果是由UI设计师从头构思，会经历以下步骤：
- 确定产品需求：与客户讨论产品的需求，并确认整个计划的时间表。
- 制作User story：根据用户需求整理产品界面设计中需包含的信息。
- 整理Flow chart：模拟用户的操作过程，绘制出Flow chart。
- 绘制UI flow：根据Flow chart绘制出可视化的概念呈现。
- 绘制Wireframe：将每个页面所需的信息绘制成线框图，以便与客户或团队讨论。
- 绘制Mockup：将线框图加入视觉设计元素，呈现静态的视觉设计稿。
- 制作Prototype：制作Prototype以完整呈现静态与动态的视觉效果。