“安装界面太丑了,不堪入目!”
“这界面应该属于20年代初的旧产物……”
“难看!”
每每听到设计师和产品经理这样的吐槽时,心中难免会有一点失落。细看一下,咱们软件的安装包界面的确还是比较古老,仍然带有xp系统自带的界面边框。于是趁着这次新版软件发布之际,专门花了时间去研究界面设计。
目标要求:
1、 界面border去掉原本windows自带的对话框格式,采取扁平化设计;
2、 简化安装流程,不要弹出那么多安装向导页,不要让用户一直点“下一步”,简洁人性化;
3、 安装界面可加载漂亮的背景图片;
4、 优化安装包安装时间。
原型设计:
开发工具:
因为之前采用Inno setup设计,而且它拥有Pascal脚本引擎,功能算强大,故采用Inno setup。
主要流程:
由图中可以清晰地看出,所有向导页之间都是通过“下一步”或者“上一步”进行驱动更换的。
概要分析:
这里需要调用两个美化插件动态库:botva2.dll和InnoCallback.dll,用于界面的美化和功能完善。这里就不全部把代码贴出来了,只针对其中的要点进行分析概括。
在开始之前,先了解一下inno setup基本的过程和函数。
//该过程在开始的时候改变向导或者向导页,不要指望使用InitializeSetup函数实现改变向导页的功能,因为InitializeSetup函数触发时向导窗口并不存在。
procedure InitializeWizard();
//该函数在安装程序初始化时调用,返回False 将中断安装,True则继续安装.
function InitializeSetup(): Boolean;
//该过程在安装终止时被调用,注意及时在用户没有安装任何文件之前退出也会被调用。
procedure DeinitializeSetup();
//该过程提供用户完成预安装和安装之后的任务,更多的是提供了安装过程中的状态。参数CurStep=ssInstall是在程序实际安装前,CurStep=ssPostInstall是实际安装完成后,而CurStep=ssDone是在一次成功的安装完成后、安装程序终止前(即点击finish按钮后执行)。
procedure CurStepChanged(CurStep: TSetupStep);
//当用户单击下一步按钮时调用。如果返回True,向导将移到下一页;如果返回False,它仍保留在当前页。
function NextButtonClick(CurPageID: Integer): Boolean;
//向导调用这个事件函数确定是否在所有页或不在一个特殊页 (用PageID 指定) 显示。如果返回True,将跳过该页;如果你返回False,该页被显示。注意: 这个事件函数不被wpWelcome、wpPreparing 和wpInstalling 页调用,还有安装程序已经确定要跳过的页也不会调用 (例如,没有包含组件安装程序的wpSelectComponents)。
function ShouldSkipPage(PageID: Integer): Boolean;
//在新向导页 (由Cur