首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 其他教程 > 其他相关 >

客户端UI技术1点总结-PCMOM

2013-10-08 
客户端UI技术一点总结-PCMOM从出道写代码以来,多关注在前段开发,第一个EIC系统,给企业做内部IM系统,其界面

客户端UI技术一点总结-PCMOM

        从出道写代码以来,多关注在前段开发,第一个EIC系统,给企业做内部IM系统,其界面模仿MSN,当时稚嫩,技术不够成熟,邯郸学步的做一些MFC下控件的自绘。当时觉得自己挺厉害的,先后尝试Skin++,SkinMagic等界面库,也抄袭过一些开源的免费的界面库和控件代码。 现在想想,当时界面做的真丑。后来在金融公司做交易软件开发,接触了MFC的近亲库BCG,虽然的他的Edit控件不行,比不上Scintlla库的强大,但是整体很不错,包括换肤这些。商用多集中在多文档领域。DirectUI技术是我在开发视频聊天室程序时接触的,很不错的技术,网上有很多开源的库,不过我觉得他们都是来自于对Veboso的改装。DirectUI采用无句柄模式,结合DX可以做出非常炫的的东西,其特点是原生,性能好。后来出现过DirectUI的改良且比较官方的技术比如WFP。WPF这个东东属于一个夹生品,没有得到普及,很二的原因是开发出的东东,需要附带一个很大的Donet库。不可取。 虽然不写代码已经很久了, 但一直关注界面开发的各项技术。下面show一个去年用Duilib写的一个小玩意。 这么多年的经验来看,Duilib是我见过的最好的开源,免费,设计良好,性能强劲的UI库。我曾经和其作者聊过,我希望说服他可以专心做这个东西,服务于广大使用者。也可以理解作者为什么放弃维护的原因,在国内做开源,挺苦的。没有捐助,没有收入,很多作者都是开始一腔热情,最后被现实打压,最终放弃,坚持下来的人真心不多。但是还是为大牛们致敬。


具体说说Duilib的优点(中立不吹牛,非广告贴,且真实测过)

    基于Win32封装,效率很好。控件很多,常用的都有,提供的CControlUI接口扩展很方便。XML控制布局,界面设计很灵活,如果有志者,加一个中间层进去,业务和界面解耦将不是问题。原生态的支持换肤。非常的方便。提供了界面设计器,很方便,虽然有些小Bug对主体功能没什么影响。

先看看我去年做的PC妈妈软件的界面:

当时做这个的目的,花了一天多的时间,找图片设计logo和编码,初衷时我家小外甥不听话,每天泡电脑,荒废学业,写一个出来帮姐姐管孩子。花了一天时间编码做界面整出来的,基本布局模仿了360的软件管家,不得不说周教主在用户体验方面做得确实很好,这个界面确实有可借鉴之处,上面部分可以快速导航到每个功能的主题单元,右侧直接显示帮助,在用户习惯上也很有方便,左边显示功能内容。

主界面-模仿360系列软件。

客户端UI技术1点总结-PCMOM

换肤后的界面-点击标题栏右边的田字图标。

这里预制了九个皮肤,其实这种换肤的思维和QQ类似,也是目前市面上的主流思想,控件以不规则透明为主体,换肤其实换的是背景图片,这样风格柔顺,QQ早期的换肤思维是背景和控件位置同时换,这样给人感觉很个性,但是从用户体验的角度看,不是很合适,因为有破坏用户使用习惯的嫌疑。

客户端UI技术1点总结-PCMOM

图标的动态效果-毛玻璃效果很炫。

都用PNG,鼠标移动时切换很流畅。归功于DirectUI技术啊。如果用MFC原生控件绘制,很累,最终在界面大小改变时闪烁严重。

客户端UI技术1点总结-PCMOM

右边的动态提示-和界面上的重点元素关联,只要鼠标滑过,对应的条目都会高亮显示。这里是在C++直接和Javascript互操作。

客户端UI技术1点总结-PCMOM

版本发布时的结构- Skin目录存储所有的皮肤文件包,当然稍加修改可以做在线皮肤更换,DuiLib_u.dll指的是Unicode的Dll。剩下的就是主文件。最终的文件包很小,不到500k。

客户端UI技术1点总结-PCMOM


皮肤xml文件-这个好处在于分区控制,每个分区,page都有对应的XML控制。

客户端UI技术1点总结-PCMOM



吃饭去了,下一步我打算写以下两个主题:

代码实现介绍未来UI技术的一点思考-结合Node-Webkit做富客户端的开发程序下载


热点排行