安装包UI美化之路-支持不同的DPI放大

今天记录一下使用nsNiuniuSkin+Nsis制作安装包过程中，如何解决安装包界面在DPI放大时引起的安装包界面模糊的问题，希望对大家有帮助！

问题背景

早期问题

nsNiuniuSkin作为一个安装包UI插件，在早期是并不支持DPI放大的，我们之前的实现方案是，让其自行跟随系统放大，而这带来了一系列问题：

• 字体随着DPI放大后会变的模糊不清
• 窗体的图片随着DPI放大后会变的模糊不清

而这严重影响影响了安装包的美感，与我们做安装包美化的初衷相悖！ 插入一张1.5倍自动跟随放大的图来看看效果：

能看出来还是比较模糊的，如果放大到了2倍，会更加明显。

在2020年的时候，我开始着手解决此问题，也取得了不错的效果。得益于Duilib_Ultimate所支持的DPI放大能力，我们也很轻松的支持了DPI放大；在此之后，我们支持了不放大和2倍放大场景，在大多数情况下都能满足应用需求。

新的问题

然而，变化总是来的太快，我们很快发现，随着显示器分辨率的持续提升，现在2K屏，4k屏使用的也非常多了，如果不做DPI适应，会出现窗口过小的问题，具体如下：

• 我们是在1.5倍放大以下时，统一采用不做放大适应处理，这将会导致在1.5倍DPI放大的情况下，窗口还是按原来的1倍显示着，会显得非常小
• 现在已经有人使用4K显示器，然后应用300%放大了，这已经超出了我们现有的放大适应能力，结果就是做不到，又显示得太小了

问题解决

知道了问题所在，接下来就是对症解决了，结合实际问题，同时考虑未来的扩展性，我想了以下几个注意的点：

• 增加支持1.5倍放大适应，避免造成脱节现象
• 调整后，调整至150%，200%，300%，400%等几种阶梯式的适应能力
• 不做125%和175%以及其他自定义倍数的支持（区间值取下限，比如175%，我们取1.5倍放大） 主要原因在于不规则的放大，会导致图片尺寸的难以控制，以及字体放大被取整后，造成字号不准确的可能。

实际操作

接下来我将实际演示一下使用nsNiuniuSkin+Nsis来实现不同DPI放大情况下的自适应功能实现：

1. 实现原理

核心的思想是首先我们要通过系统API，禁止我们程序的窗口跟随系统DPI放大而自动放大（前面已经说过自动放大会模糊）；然后在程序中读取当前的DPI放大参数，由我们的程序自己控制窗口及控件尺寸、字号大小、控件间距等等，同时控制在不同DPI下应用不同的图片，最终使得整个窗口的显示符合在相应的DPI放大情况下自然的显示。

具体实现大家可以参考Duilib_Ultimate，实现的很不错。

2. 资源准备

我在Duilib_Ultimate的基础上，调整了一下图片命名的控制规则，我更喜欢像Macos下的不同倍数图片的命名，如：

• bg.png
• [email protected]
• [email protected]
• [email protected]

在做安装包UI设计与切图时，就需要考虑好，接下来要做哪些放大情况的适应，并不一定所有的都要支持，一般常用的还是1倍，1.5倍，2倍即可，3倍及4倍的情况，默认可以不要，未来有需求时再扩展。

值得一提的是，这里选择支持哪些倍数，最主要的原因就是资源的体积，最终我们安装包的大小，除了要安装的文件外，影响最大的一部分便是图片资源的大小了。 切好图片后，建议对图片做好压缩，否则体积就很大了。

3. 配置流程

接下来，以我们的leeqia_senior的模板为例，介绍一下具体的支持配置流程（原来已经支持1倍图和2倍图，本次增加1.5倍图的支持）：

1. 将准备好的1.5倍的图片资源放到skin/images/目录下 增加后，每种图片都会有三张不同放大倍数的图片

1. 找到脚本文件ui_soft_setup.nsh，在其DuiPage函数中，在代码行nsNiuniuSkin::InitEngine下增加一行脚本：

nsNiuniuSkin::EnableDpi 1 1 0 0

此行代码的四个参数分别表示是否支持1.5倍、2倍、3倍、4倍放大，我们结合图片体积，以及我们目前的需要，暂时只开放1.5倍和2倍支持（大于2倍的会按两倍显示）。 以下展示高阶版1.5倍放大显示效果图：

高阶版2倍放大显示效果图：

此处我们能清晰的看到，不管是1.5倍DPI放大，还是2倍DPI放大，我们的窗口上的文字和图片始终是很清晰的，同时窗口的尺寸也是相应的变大了，非常完美的解决了DPI放大时的窗口显示问题。

4. 注意事项

在配置安装包的界面的时候，由于我们有1.5倍放大的场景存在，为了避免出现小数被取整时丢失精度（这也是我们不做125%和175%放大适应的原因所在），有几个注意事项（主要是UI设计人员要关注）：

• 注意字号不要用奇数，否则1.5倍后，无法取得准确的整数字号
• 在设计控件的大小、间距时，需要采用偶数，避免1.5倍后丢失精度
• 设计的图片的长和宽也需要是偶数

结语

在安装包安装过程中，精美的UI往往能让客户对所安装产品的印象更加深刻，更能体现出软件服务商在用户体验上的专注与用心！ 希望我们的努力，能够让安装包制作再容易一点，再快乐一点！

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