当前位置:主页 > 公司动态 >

安装包UI美化之路-nsNiuniuSkin全新UI引擎,让安装过程动起来

浏览记录: 636次日期:2026-09-15

一只鹈鹕,闲下来时沿着海边慢慢骑车,开始安装后便加速骑行;换个场景,它又翘着腿悠闲地等你,安装一开始,就一边喝水一边陪你完成安装。瓶中的水一点点减少,实际安装进度也在同步前进。

这些有趣的小细节,现在可以出现在你的安装包里。今天给大家介绍利洽 nsNiuniuSkin 全新的安装包 UI 引擎:像开发前端页面一样制作安装界面,让 HTML、JS 和 AI 一起把创意带进安装过程。

一、传统安装包,为什么容易做得千篇一律?

说起安装包,我们很容易想到一张背景图、几个按钮,再加上一条缓缓向前的进度条。这套界面能够完成安装任务,但想让它更有个性、更有动感,事情就没那么简单了。

传统方案往往围绕固定控件和布局来组织界面。换一张图片、改几个颜色比较容易;一旦想让角色动起来、让界面随操作切换状态,或者让动画与真实安装进度联动,就需要处理更多控件、资源和脚本之间的关系。

设计稿里一个看似自然的动作,落到安装包中,可能就变成一串复杂的实现工作。UI 实现困难,带来的结果就是制作成本高,效果上限又容易受限。 很多灵动的想法,最后只能停留在设计稿里。

我们一直希望,把制作安装界面的门槛再降一些,让大家愿意尝试,也能更轻松地把想法做出来。

二、我们的解法:从配置界面,到让 AI 帮忙,再到全新 UI 引擎

1. XML + 图片,先把界面制作变简单

在旧版安装包 UI 方案中,我们已经大幅降低了界面的制作成本。通过配置 XML 和图片资源,就可以组织界面、调整控件、替换产品素材,制作自己的安装包外观。

这种方式让安装包美化变得更容易上手,也让同一套方案可以服务于不同产品。对于常规界面,它已经能省下不少重复工作。

2. 引入 AGENTS.md,让 AI 帮你制作安装包

接下来,我们在解决方案中引入了 AGENTS.md,给 AI 一份理解项目的工作说明:目录如何组织,修改界面和安装逻辑时该参考哪些文档,以及完成后怎样验证。

使用时,让 AI 先读这份说明,再把产品资料和制作要求交给它。原本需要手工查找、逐项修改的配置,就可以让 AI 结合现有模板和文档协助完成。大家把更多精力放在“希望安装包是什么样、应该怎样工作”上,让 AI 分担具体的配置与编码工作,进一步解放双手。

具体使用方法,可以参考我们之前的文章:借助 AI 快速使用 nsNiuniuSkin 制作安装包。

3. 全新 UI 引擎,像写前端一样制作安装界面

沿着这个方向,我们又向前走了一步:引入全新的 UI 引擎,让大家能够像进行前端 HTML 开发一样,制作安装包界面。

界面的组织、视觉呈现、动画变化和交互逻辑,都有了更熟悉、更灵活的表达方式。结合 AI 编程能力,从描述想法、生成界面,到调整动作与交互,可以更顺畅地衔接起来。

从“配置出一套界面”,到“写出一个有表现力的安装过程”,这是新引擎想带来的变化。

三、新引擎的优势:更快实现创意,把效果做得更有意思

1. 更短的制作时间,更丰富的视觉效果

角色动作、状态切换、动态反馈,都可以成为安装界面的一部分。用熟悉的前端开发方式组织这些效果,能够减少为实现某个动作而反复适配固定控件的工作,让创意更快落地。

同样是在等待安装完成,界面可以是一段轻松的海边骑行,也可以是一次悠闲的喝水小憩。产品的风格,从第一次安装时就能被用户感受到。

2. 与 AI 更友好地结合,让想法更快变成界面

有了 AGENTS.md 提供项目说明,再加上 HTML 与 JS 这样的前端表达方式,就可以更充分地利用 AI 的代码生成和修改能力。

你可以描述希望呈现的画面、动作和状态变化,让 AI 帮忙搭建界面,再围绕实际效果继续调整。例如,把“角色平时慢骑,安装时加速”拆成待安装和安装中两种状态,逐步实现对应的动作。需求越具体,越容易把 AI 的能力用到实处。

3. 安装行为与 UI 交互,直接在 HTML、JS 中编写

这是我们特别想分享的一个亮点:新引擎支持直接在 HTML 与 JS 中编写安装包的行为以及 UI 交互。

按钮点击后要做什么、进入安装状态后界面怎样变化、收到安装进度后动画如何响应,都可以在这套开发方式中组织起来。界面与安装过程的关联更直接,实现起来也更轻松。

比如下面的喝水安装包,喝水进度就与实际安装进度实时联动。用户看到瓶中的水逐渐减少,也就直观地感受到安装正在推进,动画有了明确的反馈作用。

4. 启动入口与操作流程,完全兼容旧版

新引擎带来了新的界面制作方式,同时,启动入口与操作流程完全兼容旧版。对于已经使用利洽安装包方案的朋友,熟悉的使用习惯可以继续沿用,也能逐步尝试新的界面表达。

四、效果展示:让鹈鹕陪你完成安装

接下来,直接看两套安装包的实际效果。两套示例都提供了界面截图、演示视频和安装包下载,可以先看演示,再下载体验。

1. 鹈鹕骑车安装包:闲时慢骑,安装时加速

这套界面把安装过程放进了一段轻松的海边骑行中:浅绿色的背景、迎风的围巾,还有一只骑着自行车的鹈鹕。右侧保留清晰的安装操作区域,画面活泼,操作入口也一目了然。

等待操作时,鹈鹕悠闲慢骑;进入安装过程后,骑行动作加快,用节奏的变化表现“正在安装”。从准备出发到加速前进,安装状态也变得更有画面感。

安装界面如下:

鹈鹕骑车安装包界面:左侧为海边骑行场景,右侧为快速安装、自定义选项和用户许可协议

骑车演示一:


播放鹈鹕骑车安装演示一(ride2.mp4)

骑车演示二:


播放鹈鹕骑车安装演示二(tihu_final.mp4)

下载体验: 鹈鹕骑车安装包(Pelican2_PC_Setup_v2.5.0.exe)

2. 鹈鹕喝水安装包:喝掉一瓶水,装好一个程序

第二套界面更悠闲一些。鹈鹕坐在小凳子上,面前摆着一瓶水,等待操作时会轻松地翘腿、摇头。

安装开始后,它便一边喝水,一边陪你完成安装。喝水进度与实际安装进度实时联动,随着安装推进,瓶中的水逐渐减少。原本需要盯着数字和进度条才能感知的变化,现在也能通过这个小场景直观地看见。

让“等待”多一点趣味,也让安装进度多一种表达方式,这正是新引擎能够带来的体验。

安装界面如下:

鹈鹕喝水安装包界面:鹈鹕坐在凳子上翘腿等待,旁边为带吸管和水量刻度的水瓶,右侧为安装操作区域

喝水安装演示:


播放鹈鹕喝水安装演示(pelican_drink.mp4)

下载体验: 鹈鹕喝水安装包(Drink_PC_Setup_v2.5.0.exe)

五、结语

安装包是用户认识产品的第一步,这一步也可以做得生动、有趣。

从 XML 与图片配置,到 AGENTS.md 辅助 AI 制作,再到全新的 HTML、JS UI 引擎,我们希望持续减少实现创意时的阻力,让大家用更短的时间,做出更有特色的安装体验。

欢迎下载上面的两套示例,亲自感受一下:当安装过程也能骑车、喝水,你的产品还可以拥有怎样的开场?

愿天下没有难做的安装包!

更多产品介绍与使用资料,欢迎访问:

Copyright © 2015 - 2026 深圳市利洽科技有限公司 All Rights Reserved 粤ICP备15043258号-2