安装包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,实现的很不错。

扫描二维码关注公众号,回复: 14731524 查看本文章

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设计人员要关注):

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

结语

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

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

猜你喜欢

转载自blog.csdn.net/TragicGuy/article/details/127817459
今日推荐