安装包UI美化之路-nsNiuniuSkin界面在线设计引擎

一年多前我们自己开发了一个用于编辑、预览、调试nsNiuniuSkin的UI界面工具越来越觉得好用忍不住想要分享出来今天我把这个工具重新整理了一下功能又完善了一些下面就介绍一下这个工具的功能和使用方法吧功能nsNiuniuSkin界面在线设计引擎是一个用于辅助nsNiuniuSkin的界面的预览与调试工具类似于chrome的开发者工具可以快速的查看各个界面效果极大的提升界面配置的效率主要功能与特点如下控件像素级定位快速准确的定位控件大小控件间的距离等可以1比1的对照蓝湖、磨刀等标查看各个控件的属性快速修改控件的字体、字号、颜色、大小、背景图等等各个属性实时查看变化效果实时显示当前选中的控件的XML配置信息与属性帮助定位控件在XML中的位置反之亦然在不需要打包安装的前提下预览所有的安装包子页面一次确认完成所有界面开发自动循环切换安装页面各个界面一次检查完1倍、1.5倍、2倍DPI放大效果图预览快速确认不同DPI放大下的界面是否完整实现安装过程中弹出的提示窗口、询问窗口的预览全程无死角UI查看Js绑定各个UI按钮事件完整模拟整个过程沉浸式感受安装流程界面效果说了那么多的好处咱们来看看效果吧。控件定位与属性查看询问窗口预览窗口滚动显示效果修改属性实时变化效果我们将进度条的进度由20%改成40%操作和UI变化如下不同倍数效果各种不同放大倍数的UI一如既往的清晰1效果图1.5倍效图2倍效果图使用方法nsNiuniuSkin界面在线设计引擎的使用方法非常简单下载引擎包登录后点击打开调试页面就可以开始了。打开并登录设计引擎根据界面提示打开调试页面利洽科技在线UI设计器 如果此处显示控件加载成功便表示我们已经能正常的开始界面调试与预览了将nsNiuniuSkin的安装包UI资源路径填入skin目录下一定是包含一个名叫install.xml文件的点击加载UI即可显示出来安装包的UI界面了然后点击安装配置、许可协议、安装中、安装完成、开始卸载、卸载中、卸载完成等按钮即可快速切换不同安装状态下的界面效果点击显示弹窗(确认)、显示弹窗(询问)按钮预览提示与询问窗口的界面在界面上选择不同的放大倍数再次点击加载UI按钮即可显示出来不同放大倍数的界面还可以点击流程预览按钮这个按钮将会依次显示各个安装界面并做大概3秒的停留以便查看每一个安装界面是不是很简单我在使用这个调试器辅助开发安装包UI时效率和质量上都是成倍的提升。原理介绍nsNiuniuSkin界面在线设计引擎功能看着简单实际上我们还是倾注了很多精力的一些比较核心的技术要点如下调试器对nsis插件的调用封装一般的情况下我们只会开发nsis插件然后集成到nsis中去使用此次为了开发这个设计引擎我们反其道而行对nsNiuniuSkin插件进行了调用以便使用与nsis中一样的插件接口也只有这样我们才能有底气的说预览的效果就是实际的效果也只有这样在界面上修改属性才能确保与安装过程中的行为一致。将nsNiuniuSkin的插件能力转化为浏览器上的Javascript的脚本能力我们希望做一个开放式的引擎调试平台只有做成为大众所熟知的脚本化的接口才能更加方便的加入交互式的功能比如在Javascript脚本中调用nsNiuniuSkin的接口。这部分我们设计引擎相当于做了一个桥梁将nsis插件的接口与回调事件都完整的与Javascript实现了对接最终实现在Javascript中控制整个界面的行为。Duilib的控件选中、Hover事件的处理控件位置与边距的可视化呈现这部分应该说是整个引擎的核心能力所在我们通过了极少的代码在对Duilib引入极小的侵入性的前提下能够实时的绘制出来鼠标选中的控件与当前Hover的控件的相对位置大小等等同时将选中控件的鼠标通过事件告知Javascript在界面上属性列表的形式呈现出来。这个功能我们认为是有一定的创新性在的未来我们可以扩展这个设计引擎作为一个通用的Duilib的界面调试器造福所有Duilib界面开发者。未来展望前文说过目前的nsNiuniuSkin界面在线设计引擎是一个类似于Chrome开发者工具的一个存在。也就是说可以在调试器界面上修改各个元素的属性实时的查看变化但却不能同步到界面配置的XML文件中真正的修改动作还需要在XML文件中进行修改。 未来我们要进一步做的事情如下预览与修改功能同步实现界面上修改的数据实时的变更到XML文件中不用再修改XML文件扩展调试器应用范围通过实现回调接口的方式支持众多外部的Duilib库让其他的的界面开发者也能使用更进一步的对接其他的界面库也在考虑中。结语在安装包安装过程中精美的UI往往能让客户对所安装产品的印象更加深刻更能体现出软件服务商在用户体验上的专注与用心 希望我们的努力能够让安装包制作再容易一点再快乐一点愿天下没有难做的安装包