UI/UX设计基础知识：设计师转行需掌握的核心概念

近年来，UI/UX设计已成为设计行业最热门的细分领域之一。许多平面设计师开始转向UI/UX方向——更高的薪资、更广阔的职业发展空间、与互联网行业同步的节奏，都是吸引设计师转行的重要原因。

然而，平面设计和UI/UX设计的思维方式有本质不同。平面设计是"传达"，UI/UX设计是"交互"；平面设计关注"视觉美感"，UI/UX设计关注"用户体验"。本文将为转行设计师梳理UI/UX设计的核心知识体系，帮助建立数字化设计思维。

一、UI/UX基础概念区分

UX（User Experience，用户体验）：用户在使用产品过程中的整体体验和感受，包括情感、认知、行为等维度。UX设计关注的是"用户是否满意、是否流畅、是否完成任务"，不涉及具体界面元素，而是产品的整个使用流程和背后的逻辑架构。

UI（User Interface，用户界面）：用户与产品交互的视觉界面，包括布局、色彩、字体、图标、按钮等视觉元素。UI设计关注的是"界面是否美观、是否易用、是否一致"，是视觉设计师直接负责的部分。

简而言之：UX是"好不好用"，UI是"好不好看"。两者共同决定了产品的用户体验品质。一个优秀的产品需要UX和UI的紧密配合。

UI/UX设计的起点不是画界面，而是理解用户。不了解用户的设计就像蒙着眼睛画图。

用户画像（Persona）：基于真实用户数据创建的代表性用户档案，包含用户的基本信息、行为特征、目标、痛点和需求。用户画像让设计师在设计时有"具体的人"可以对话，而非面对抽象的用户群体。

用户旅程地图（User Journey Map）：可视化用户在使用产品过程中的完整路径，包括每个接触点、情绪变化和痛点。用户旅程地图帮助设计师发现用户体验中的问题环节，找到优化的机会点。

竞品分析：研究竞争对手产品的交互流程和界面设计，找到借鉴方向和差异化机会。

信息架构（Information Architecture）：组织、结构和标签化内容的方式，让用户能高效找到所需信息。信息架构决定了产品的导航结构、内容分类和页面层级，是UX设计的核心工作之一。

线框图（Wireframe）：低保真度的页面布局图，展示界面的功能区域和内容结构，不涉及视觉细节。线框图是UI设计的前置步骤，用于验证交互流程和布局逻辑，快速迭代。

交互原型（Interactive Prototype）：可点击的交互原型模拟真实产品的操作流程，用于用户测试和方案验证。原型工具（如Figma、Axure、Adobe XD）让设计师在代码编写之前就能测试交互方案。

设计系统（Design System）：一套包含设计原则、组件库、样式规范和代码组件的完整体系，确保产品各页面视觉一致。大厂的设计系统（如Google的Material Design、Apple的Human Interface Guidelines）是学习和参考的经典范本。

设计规范的建立：字体规范（标题、正文、标注的字号、字重、行距）、色彩规范（主色、辅助色、功能色、中性色）、组件规范（按钮、输入框、卡片、弹窗等组件的样式和状态）、图标规范（图标风格、尺寸、颜色）、间距规范（8px网格系统、间距标准等）。

第一步：工具学习 —— 掌握核心UI设计工具。Figma是目前最主流的选择（免费、在线协作、功能强大），建议至少掌握Figma的基本操作（组件、自动布局、原型制作）。同时了解Sketch和Adobe XD作为补充。

第二步：理论基础 —— 学习《设计心理学》（Don Norman）、《About Face》（Alan Cooper）、《交互设计精髓》等经典书籍，建立用户中心设计思维。

第三步：实践练习 —— 重新设计现有APP的某个页面，从用户调研到线框图到高保真设计，完整体验一次UI/UX设计流程。在Dribbble和Behance上发布作品，获取反馈并建立个人作品集。