一、插件简介

Evo UI 是一套基于 Unity 原生 uGUI(Unity UI)构建的现代化 UI 框架,提供了完整的 UI 组件体系、动画效果系统以及高度集成的编辑器工具链。它不仅仅是一个 UI 资源包,更是一套围绕“效率 + 统一性 + 可扩展性”设计的 UI 解决方案。

该框架通过模块化设计,将 UI 元素、交互逻辑、视觉样式以及动画效果进行解耦,使开发者能够在复杂项目中快速构建高质量 UI,并保持整体风格一致。

需要注意的是,Evo UI 完全基于 uGUI 构建,目前并不支持 Unity 的 UI Toolkit。

打开网易新闻 查看精彩图片

二、整体架构设计

从技术实现角度来看,Evo UI 可以拆分为四大核心模块:

  1. UI组件层(UI Elements)

  2. 样式系统(Styler)

  3. 动画与效果系统(Animation & Effects)

  4. 编辑器扩展工具(Editor Tools)

这四部分共同构成了一个完整的 UI 框架生态。

三、核心实现原理解析 1. 基于 uGUI 的组件封装机制

Evo UI 的所有 UI 元素本质上都是对 Unity 原生组件(如 Image、TextMeshProUGUI、Button 等)的高级封装。

其核心实现思路:

  • 组合优于继承

  • 使用 MonoBehaviour 组合多个基础组件

  • 提供统一接口封装交互逻辑

例如一个 Button 组件,通常内部结构为:

  • Image(背景)

  • TextMeshProUGUI(文本)

  • Animator / Tween 控制(动画)

  • 自定义脚本(状态控制)

通过这种方式,Evo UI 实现了:

  • 可视化结构清晰(Hierarchy清晰)

  • 易扩展(可以随意替换子节点)

  • 高复用(组件模块化)

本质:Prefab + 脚本驱动的组件化 UI 架构

2. Styler 样式系统(核心亮点)

Styler 是 Evo UI 的核心系统之一,它解决的是 UI 开发中最常见的问题:如何统一管理 UI 风格。

实现上,Styler 类似一个“全局样式配置中心”,其结构通常由 ScriptableObject + 引用系统 + 刷新机制组成。

核心结构如下:

StylerPreset(ScriptableObject) 包含颜色、字体、音效、样式规则

StylerObject(挂在 UI 上) 引用 StylerPreset,并负责将样式应用到具体组件

工作流程:

  1. UI 元素绑定 StylerObject

  2. StylerObject 引用全局 StylerPreset

  3. 当样式修改时,系统触发刷新逻辑

  4. 所有 UI 自动更新视觉表现

技术关键点:

  • 使用 ScriptableObject 实现全局共享数据

  • 利用 Unity 序列化实现可视化配置

  • 通过统一 Apply 流程实现批量刷新

本质:类似 CSS 的 UI 样式管理系统

3. 动画系统实现(UI Animator)

Evo UI 提供了丰富的动画组件,如 Animated Container、Counter、Spinner、Popover 等。

其核心实现方式主要包括:

(1)Tween 插值动画 通过 Lerp 或时间曲线控制 UI 过渡,例如位置、缩放、透明度变化

(2)状态驱动动画 根据 UI 状态切换不同动画表现,如 Normal、Hover、Pressed

(3)CanvasGroup 控制 实现淡入淡出、交互控制

(4)RectTransform 控制 实现 UI 的移动、缩放、旋转

本质:轻量级 UI Tween 动画系统

4. UI效果系统(Effects)

Evo UI 内置多种视觉效果,如 Blur Overlay、Ripple、Soft Mask、Gradient 等。

实现原理主要分为三类:

(1)Shader 实现 模糊、渐变、描边等效果通常基于自定义 Shader

(2)Mask / Stencil 用于裁剪与遮罩效果,如 Soft Mask

(3)Mesh 修改 通过修改顶点或自定义 Graphic 实现特殊视觉效果

本质:Shader + UI Mesh 扩展技术

5. 布局系统(Layout System)

Evo UI 提供多种高级布局组件,如环形布局、分页系统、可重排列表等。

核心实现方式:

  • 继承 Unity 的 LayoutGroup

  • 重写布局计算函数

  • 动态排列子节点

例如 Radial Layout(环形布局):

通过计算角度和半径,将子元素分布在圆周上

关键点:

  • 自定义布局算法

  • 支持动态内容

  • 与 Scroll / Animation 配合

本质:自定义 LayoutGroup 布局系统

6. 导航与交互系统

包括 Tab Navigation、Selection Box、UI Navigation Container 等。

实现原理:

  • 基于 Unity EventSystem

  • 使用接口如 IPointerClickHandler、ISelectHandler

  • 结合状态机管理 UI 状态

支持:

  • 鼠标交互

  • 键盘 / 手柄导航

  • 焦点切换

本质:事件驱动的 UI 交互系统

7. 编辑器扩展工具(效率核心)

Evo UI 提供了完整的编辑器工具链,例如:

  • Icon Browser

  • Styler Browser

  • 样式预设系统

实现方式:

  • 基于 EditorWindow 构建工具面板

  • 自定义 Inspector 提升操作效率

  • 提供批量修改能力

核心价值:

  • 减少重复操作

  • 提升 UI 搭建效率

  • 提供可视化工作流

本质:Editor 工具驱动的 UI 开发流程优化

四、系统设计亮点总结 1. 模块化架构

UI组件、样式、动画完全解耦,结构清晰,易于维护与扩展

2. 类 CSS 样式系统

通过 Styler 实现全局统一管理,支持实时预览与快速修改

3. 高度工具化

借助编辑器扩展,大幅提升 UI 开发效率

4. 完整 UI 生态

不仅提供组件,还提供完整工作流解决方案

五、使用场景

Evo UI 适用于以下类型项目:

  • 中大型游戏 UI 系统

  • 需要统一视觉风格的项目

  • 工具类或管理后台 UI

  • 快速原型开发

六、总结

Evo UI 的核心价值不在于单一功能,而在于构建了一套完整的 UI 工程体系:

  • 通过组件化提升复用性

  • 通过 Styler 实现视觉统一

  • 通过动画系统增强表现力

  • 通过工具链提升开发效率

从底层实现来看,它本质上是:

基于 uGUI 的 UI 工程化解决方案

对于 UI 复杂度较高的项目来说,Evo UI 不仅能提升开发效率,还能显著提高整体 UI 质量和一致性,是一款偏“架构级”的 UI 插件