今天记录一下使用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下的不同倍数图片的命名,如:
在做安装包UI设计与切图时,就需要考虑好,接下来要做哪些放大情况的适应,并不一定所有的都要支持,一般常用的还是1倍,1.5倍,2倍即可,3倍及4倍的情况,默认可以不要,未来有需求时再扩展。
值得一提的是,这里选择支持哪些倍数,最主要的原因就是资源的体积,最终我们安装包的大小,除了要安装的文件外,影响最大的一部分便是图片资源的大小了。 切好图片后,建议对图片做好压缩,否则体积就很大了。
3. 配置流程
接下来,以我们的leeqia_senior的模板为例,介绍一下具体的支持配置流程(原来已经支持1倍图和2倍图,本次增加1.5倍图的支持):
- 将准备好的1.5倍的图片资源放到skin/images/目录下 增加后,每种图片都会有三张不同放大倍数的图片
- 找到脚本文件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往往能让客户对所安装产品的印象更加深刻,更能体现出软件服务商在用户体验上的专注与用心! 希望我们的努力,能够让安装包制作再容易一点,再快乐一点!
愿天下没有难做的安装包!