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

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

浏览记录: 68次日期:2022-11-17

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

问题背景

早期问题

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

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

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

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

新的问题

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

问题解决

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

实际操作

接下来我将实际演示一下使用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. 将准备好的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设计人员要关注):

结语

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

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

更多信息,请访问: http://www.leeqia.com/

 

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