跟我们一起
玩转路由器

Cocos 引擎 UI 全新升级:进一步提升编辑器体验

cocos creator 3d 已经进入全面公测阶段,距离正式发布的日子越来越近。为了迎接这一重要时刻,我们对 cocos creator 的图标进行了全新升级,同时保持了 cocos 品牌的一致性。同时,为了提升产品的视觉体验,我们对 cocos creator 编辑器的 ui 也进行了多项改进。

新图标

Cocos Creator 新版本的图标是在原有图标的基础上进行的升级。设计团队保留了大部分的视觉元素,在玻璃质感的基础上添加了一层细腻的金属质感,使其看起来更加精致和成熟,立体感也有了显著提升,象征着 Cocos Creator 在3D 领域的发展。

值得一提的是,Cocos Creator 3D 的图标是 Cocos Creator 图标的变体:浅色底的代表 Cocos Creator,深色底的代表 Cocos Creator 3D。这种设计在保持品牌视觉一致性的同时,降低了用户的认知门槛,方便区分两款产品,提升了产品的辨识度。

新编辑器 UI

Cocos Creator v2.2.0 目前正在论坛进行公测,待版本稳定后将正式发布。新版本除了启用新版图标外,还将采用新的编辑器 UI,进行了多项改进,以提升视觉体验的协调性。

>> 输入控件:优化了各种输入控件的样式:

>> 属性检查器:我们为属性检查器增加了宽度调整功能,以解决某些组件上属性名显示不全的问题。现在用户无需大幅调整整个面板的尺寸,只需拖动属性名右侧的分割线即可自由调节分割比例。

>> Spin Button:我们改进了输入框的 Spin Button,使其能够自动隐藏,从而更好地展示 3D 坐标。

新的 UI 字体

在包含大量文字的 Cocos Creator 编辑器中,文字的精准呈现至关重要。确保在 Windows 和 Mac 上获得一致的体验是一项挑战,因为不同的操作系统对字体的解析和渲染方式不同。

为了确保优质的视觉效果,我们在 2.2 版本中升级了编辑器所使用的字体,并对文本样式进行了细致打磨,使新的字体在 Windows 和 Mac 上获得更加一致和精准的定位。

由于 Cocos Creator 有大量的国内用户,我们特别重视中文显示的支持。新的 UI 字体能够满足纯中文和中英文混排的需求,确保文本效果始终出色。

设计理念

此次改版延续了 Cocos Creator 从 1.10 版本以来的进化方向,我们的设计理念是:

高级感:我们希望为用户提供一流的编辑器使用体验,给人以精致、高端的感觉,与行业标准保持一致。

时尚感:Cocos Creator 自 2014 年立项以来,我们希望其 UI 风格能够与时俱进,与主流的桌面和移动操作系统保持协调,符合设计师的审美需求。

节约屏幕空间:由于使用 Cocos Creator 制作的大型项目越来越多,特别是 3D 开发者不断增加,我们需要为越来越复杂的使用场景优化屏幕空间,让编辑器能够展示更大的可视化区域,方便用户同时编辑更多的参数。

减少视觉干扰:作为用户每天都会频繁使用的生产工具,我们希望用户能够把宝贵的精力投入到内容创作上,而不用过于关注编辑器本身。因此我们认为“最理想的设计就是没有设计”,我们逐步去除了过于风格化的设计元素,打破了 Cocos Creator 和其他生产工具之间的界限,让用户在多任务切换的过程中更加放松、专注。

实际上,Cocos Creator 的多个版本都在朝着以上目标逐步优化。下面是两个例子,你能找出它们的变化吗?

标签栏设计演变:

>> 工具栏设计演变:

小结

自 2016 年正式发布以来,Cocos Creator 已迅速成长为全球瞩目的内容创作工具,拥有广泛的不同行业用户群体。作为一款强大的生产工具,保持优良的用户体验至关重要。在未来的发展中,我们将继续将重心从推出新功能转移到改善现有功能,优化核心交互和工作流程。

本文中介绍的 UX 改进成果,是 Cocos 各个团队共同努力的结果,包括编辑器团队、UX 团队、产品团队、品牌部门和 QA 团队。如果你对 Cocos Creator 的设计有任何反馈意见,欢迎留言,感谢!

赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Cocos 引擎 UI 全新升级:进一步提升编辑器体验》
文章链接:https://www.lu-you.com/settings/27836.html
本站资源来源于互联网整理,若有图片影像侵权,联系邮箱429682998@qq.com删除,谢谢。

评论 抢沙发

登录

找回密码

注册