Egret Pro是白鹭科技于2020年开发的一站式 HTML5 游戏开发工具，具有3D渲染、可视化开发、原生支持对战游戏等特点。在此负责Egret Pro界面及局部体验设计
Egret Pro
Egret Pro is a one-stop HTML5 game development tool developed by Egret Technology in 2020. It features 3D rendering, visual development, and native support for competitive games, among other characteristics. I was responsible for the interface and partial experience design of Egret Pro here.
Egret Pro的全新界面带给人现代的感觉。为用户提供一个具有现代感的专业编辑器体验，给人以精致、可靠，并且能够启发灵感的感觉。
作为一款使用频繁的创作工具，易用性和高效性就是一切。Egret Pro的用户界面应让不同专业水平的用户都易于使用，提供优化而简洁的用户界面，方便解决常见任务和工作流程，从而让用户更高效地进行创作并完成任务。
为了增加 UI 的辨识度。视觉上使用了更加简洁的界面外观，移除了不必要的渐变和线条，同时根据用户反馈留下了UI中的层次感，确保各种操作易于分辨，能够准确表达行为和功能，使用户能够聚焦到内容和工作流程上。
Brand-new Interface Appearance
The Brand-new Interface of Egret Pro brings a modern feel. It provides users with a modern professional editor experience that is exquisite, reliable, and inspiring.
As a frequently used creation tool, usability and efficiency are paramount. The user interface of Egret Pro should be easy to use for users of varying professional levels. It offers an optimized and concise interface, facilitating the handling of common tasks and workflows, thereby enabling users to create and complete tasks more efficiently.
To enhance the recognizability of the UI, a cleaner interface design is adopted visually, with unnecessary gradients and lines removed. Meanwhile, based on user feedback, the sense of hierarchy in the UI is retained, ensuring that various operations are easy to distinguish, accurately conveying behaviors and functions, and allowing users to focus on content and workflows.
作为 Egret Pro 编辑器用户体验改善的一部分，我们对编辑器引入了全新的图标系统。图标是 Egret Pro 编辑器 UI 的重要组成部分，能够直观地表现出对象，动作和概念。它们的好处有很多，例如：节省屏幕空间，让人一目了然，加快用户对UI的理解，并提升整体美感。
在此通过一套图标绘制规则，将 Egret Pro 编辑器与 Egret Hub 及其它 Egret 网站的图标风格进行统一，他是系统化且严谨的，并且可以轻松绘制出新的图标。新图标将让 Egret Pro 的外观辨识度更加明显，每个图标都有不同的规格，能够在不同显示类型和分辨率中实现最优渲染效果，并在任何屏幕上都清晰可见。
Icons
As part of the user experience improvement for the Egret Pro editor, we have introduced a brand-new icon system to the editor. Icons are an important component of the Egret Pro editor's UI, capable of intuitively representing objects, actions, and concepts. They offer numerous benefits, such as saving screen space, providing clear visual cues at a glance, accelerating users' understanding of the UI, and enhancing the overall aesthetic appeal. Here, through a set of icon drawing rules, the icon styles of the Egret Pro editor, Egret Hub, and other Egret websites are unified. This system is systematic and rigorous, making it easy to draw new icons. The new icons will make the appearance of Egret Pro more distinguishable. Each icon has different specifications, enabling optimal rendering effects in various display types and resolutions, and ensuring clear visibility on any screen.
在任何用户界面中，文本都举足轻重，而在信息密集的Egret Pro编辑器中，UI 文本就更为关键了，准确的易读性必不可少。在不同平台上让文本实现一致的质量和可读性是一项挑战，因为不同的操作系统会用不同的方法渲染字体。
Egret Pro 编辑器很长时间以来都使用同样的字体，但是经常会遇到显示和渲染问题，所以我们使用了新的字体以提升可读性，并完善新的UI。
经过深思熟虑后选择了 Inter 字体，这是一款专为电脑屏幕设计的现代字体。它有着极高的可读性，能够减轻眼部疲劳。在各种DPI情况下，它的渲染效果在所有操作系统和屏幕类型上都很出色。
在易用性方面，我们对UI文本做了进一步改进。此前，下拉菜单和文本字段中的字体非常小，所以我们提高了最小文字大小，为更大范围用户群体提高 UI 的包容性和可用性。
New UI Font
Text plays a pivotal role in any user interface, and within the information-dense Egret Pro editor, UI text is even more critical—accurate readability is essential. Achieving consistent quality and legibility across platforms is challenging, as different operating systems render fonts in distinct ways. The Egret Pro editor has long used the same font, but we frequently encountered display and rendering issues. Therefore, we adopted a new font to enhance readability and refine the new UI.
After careful consideration, we selected the Inter font—a modern typeface specifically designed for computer screens. It offers exceptional readability and reduces eye strain. It renders exceptionally well across all operating systems and screen types at various DPI settings.
For usability, we've further refined UI text. Previously, font sizes in dropdown menus and text fields were too small, so we increased the minimum text size to improve UI inclusivity and accessibility for a broader user base.
这些图标作为应用的入口，一般在Windows任务栏及MacOS Dock上。新应用图标来自 Egret 品牌语言的演绎，由一个“点”衍生出的图形系统。
Egret Pro 编辑器在各种工作流程中有许多常用的核心交互，又称“微互动”和操作。因此，改善这部分将极大提升高效性和易用性。
如下图所示，以下是我们已实现的部分改进内容。
1 . 窗口聚焦：Egret Pro的编辑器是一个信息密集的环境，许多不同窗口会同时打开使用，聚焦正在使用的窗口则会变得困难。所以我们引入了一条蓝线作为可视化指示器，清晰地标出正在接受用户输入的活动窗口。我们希望通过增强上下文联系感，来帮助用户专注于工作流程。
2 . “＋”按钮。添加内容是所有创作软件的核心操作：“+”按钮已成为现代UI中标志性的要素，用户在开始创作时会主动去寻找这个按钮。我们在编辑器中改进了这个元素，节省了部分空间，同时为创作者们提供熟悉的创作体验。
如果我们让用户每天多次执行的任务节省一部分时间，即使是很小的一部分，这样的效果逐渐积累，也会有效地提升效率。这仅仅是一个开始，帮助用户以最少的工作完成目标是 Egret Pro 用户体验设计的使命，通过改善用户工作流程，努力让工作流程直观、高效、以用户为中心，努力达成让用户轻松创作的愿景。