基于DirectUI的界面库设计

合集下载

网站界面(UI)设计-国家开放大学电大学习网形考作业题目答案

网站界面（UI）设计实训3 完成App项目原型的制作（必做）实训目的通过制作App产品原型，将策划书的内容可视化，将每一个页面中的功能可视化，使设计出的UI符合App功能需求实训内容确定App产品应用的系统，确定UI页面的基本结构和布局，根据策划书和思维导图完成App功能页面的绘制，为相关页面建立超链接。

掌握原型制作软件的使用。

实训要求教师指导2学时，学生课后8学时或以上。

需完成二级页面原型，如下图。

实训过程记录步骤简述：01 框架搭建1. 新建页面底部导航分为5个部分，所以也对应着五个页面。

在制作时先不考虑登录等其他页面，只做主界面。

1. 在页面部分（注意不是概要部分）添加文件夹命名为主界面，放置主界面的页面。

2. 在文件夹下面添加页面，底部导航点击每个图标跳转后对应的页面。

由于该原型底部导航分为5个部分，所以在主界面下是五个子页面。

每个子页面可以继续添加子页面，类似下图中我——个人主页，代表页面内跳转的页面。

2. 页面布局实训日期：成绩：实训5 设计制作App项目图标组(必做)实训目的（1）通过图标组的绘制，确定App项目UI的风格。

（2）在熟练使用软件工具的同时，熟悉不同系统对图标制作的要求。

实训内容（1）完成底部标签栏图标的设计制作。

（2）完成App功能图标的设计制作。

（3）完成App导航栏上功能图标的设计制作。

实训要求教师指导2 学时，学生课后用8 学时或以上。

需给出图标组效果和图标组交互效果，如下图。

实训过程记录步骤简述：1.使用最简单的图形简单的形状可以组合成复杂的图标。

你只需要从不同的角度去观察他们。

将注意力放在每一个图标是如何通过简单元素组合而成的。

2.还有一种纯色的线性风格。

比如我们在阿里巴巴矢量图标库下载的所有图标大部分都是这种纯色的。

3.所谓的icon 图标，不是对照片和实物的重绘，它们带有特定的信息，所以你的工作是将这些信息通过图标的形式清晰的表达出来，图标是将复杂的信息通过小的象形图案展现出来。

界面设计名词解释

界面设计名词解释
界面设计（Interface Design，缩写IXD)，是人与机器交互的媒介，是计算机和用户之间沟通的桥梁。

界面设计通过对视觉元素的组织和排列，以简洁、清晰、直观的方式传达信息，使用户能够轻松地与计算机互动。

界面设计关注于用户在使用产品或服务时的体验，其目标是使操作过程变得简单、直观和愉快。

好的界面设计不仅可以提高产品的易用性，还能增强用户对产品的信任感和满意度。

在界面设计中，有几个关键元素需要特别注意：
1、布局：布局决定了元素在界面上的位置和排列方式，直接影响用户的视觉体验和操作流程。

2、色彩：色彩可以影响用户的情绪和感知，因此在界面设计中需要合理运用色彩，以营造舒适、和谐的视觉环境。

3、字体：字体的大小、形状和风格都会影响用户阅读和理解信息的效率。

4、图标：图标是界面设计中重要的视觉元素，能够直观地传达信息和功能。

5、动效：动效可以使界面更加生动有趣，提升用户体验。

此外，界面设计还需要考虑用户的使用习惯、文化背景、技术能力等因素，以确保设计的可用性和普适性。

随着科技的发展，界面设计也在不断进步和创新。

例如，响应式设计、无障碍设计等新的设计理念和方法，都在不断地提高界面设计的水平和用户体验。

D3D中UI界面的制作

D3D中UI界面的制作案例说明：本案例通过制作D3D中的UI界面，掌握如何在D3D中插入cegui图形界面库，并渲染出来。

首先，安装CEGui的SDK，安装完成后在项目设置中新增include和lib文件夹设置完成后，修改项目的属性：修改设置完成后，在项目中加入用于Gui渲染的头文件和文件接下来新建一个用于GUI渲染的类CD3DGui实现构造函数在cpp文件中实现InitGui函数如下：bool CD3DGui::InitGui(){//创建渲染器m_pRender = &CEGUI::Direct3D9Renderer::create(m_pD3DDevice);//创建CEGUI系统CEGUI::System::create(*m_pRender);CEGUI::DefaultResourceProvider* rp =static_cast<CEGUI::DefaultResourceProvider*>(CEGUI::System::getSingleton().getResourceProvider());//设置资源目录rp->setResourceGroupDirectory("schemes","cegui/datafiles/schemes/");rp->setResourceGroupDirectory("imagesets","cegui/datafiles/imagesets/");rp->setResourceGroupDirectory("fonts", "cegui/datafiles/fonts/");rp->setResourceGroupDirectory("layouts","cegui/datafiles/layouts/");rp->setResourceGroupDirectory("looknfeels","cegui/datafiles/looknfeel/");CEGUI::Logger::getSingleton().setLoggingLevel(CEGUI::Informative) ;CEGUI::Imageset::setDefaultResourceGroup("imagesets");CEGUI::Font::setDefaultResourceGroup("fonts");CEGUI::Scheme::setDefaultResourceGroup("schemes");CEGUI::WidgetLookManager::setDefaultResourceGroup("looknfeels");CEGUI::WindowManager::setDefaultResourceGroup("layouts");//取得窗体管理器CEGUI::WindowManager& winMgr =CEGUI::WindowManager::getSingleton();//读取字体CEGUI::SchemeManager::getSingleton().create("TaharezLook.scheme") ;CEGUI::System::getSingleton().setDefaultMouseCursor("TaharezLook", "MouseArrow");CEGUI::FontManager::getSingleton().create("DejaVuSans-10.font");//设置鼠标的图片CEGUI::MouseCursor::getSingleton().setImage("TaharezLook", "MouseArrow");//显示鼠标CEGUI::MouseCursor::getSingleton().show( );//创建一个根窗口，上面加载各种界面CEGUI::Window* root =winMgr.createWindow("DefaultWindow","root_wnd");root->setFont("DejaVuSans-10");//设置为默认的界面install this as the root GUI sheet CEGUI::System::getSingleton().setGUISheet(root);return true;}继续实现Render函数在D3DInit中创建CD3DInit的对象指针Init函数中初始化对象指针在D3D渲染开始之后先设置D3D渲染的状态Render函数中最后实现Gui的渲染将资源文件夹下的cegui文件夹复制到工程目录下，将dll文件夹中的文件全部复制到debug 目录下，运行测试。

C++界面库（十几种，很全）

C++界⾯库（⼗⼏种，很全）刚开始⽤C++做界⾯的时候，根本不知道怎么⽤简陋的MFC控件做出⽐较美观的界⾯，后来就开始逐渐接触到BCG Xtreme ToolkitProv15.0.1，Skin++,等界⾯库，以及⼀些⽹友⾃⼰写的界⾯库，开始对于C++软件界⾯美化有了⼀点点的⼼得。

不敢藏私，希望和⼀些新⼿朋友们分享交流。

⼀. 开源C++界⾯库1.RingSdkRingsdk是CSDN上⼀个前辈⾃⼰写的界⾯库，这个界⾯库很轻⽽易举实现QQ2009的界⾯效果。

链接见貌似Ringsdk和MFC⽆法进⾏交互，但是 RingSdk其中有很多的图形处理的代码都⾮常有参考价值。

2.redui的官⽅⽹站已经打不开了。

官⽅QQ群是 40729296CSDN地址是这是官⽅的说明REDUI，⼜名REDirectUI，全称是Rendering Engine for DirectUI，是⼀款基于XML描述的 DirectUI 渲染引擎，能将“控件”的交互和渲染过程分解成多种独⽴的要素，包括布局、视觉效果、样式、UI⾃动化、滤镜、脚本、事件、3D场景、3D模型、通⽤动画等。

通过这些要素的排列组合，可以呈现出各种不同效果的控件，甚⾄能在XML中直接⾃定义控件类型。

⽀持2D/3D⽆缝融合。

• REDUI⽀持GDI/GDI+/DirectDraw/D3D等渲染⽅式，并有⽀持OPENGL/ES的愿望3.Duilib 这个就⽐较⼤名⿍⿍了，不⽤多说了吧。

包括华为⽹盘在内的很多业内企业都在⽤这个界⾯库。

我⽤Duilib做了⼀个⼩型的界⾯。

贴出来献丑⼀个。

4.WGI-1.0.7-Demo-Project-for-windows 。

额。

时间太长，忘记了这个代码是什么，姑且先忽略它。

5.cj60lib 这个玩过Gh0st3.6⽊马的⼈都熟悉，是⼀款对MFC进⾏拓展的界⾯库6.⾦⼭界⾯库这个就不赘述了，可以直接上⾦⼭的论坛找源代码和资料7.skinTK_V0.20 ⼀款类似于Skin++的开源界⾯库8.FreeCL_Skin2.3 ⼀款不错的控件库扩展了常⽤的MFC控件。

博德软件DirectUI使用教程

昆山博德软件DirectUI界面库使用教程昆山博德软件有限公司2010年10月目录第1章DirectUI技术简单介绍 (3)1.1什么是D IRECT UI？ (3)1.2B ODSOFT D IREC T UI界面库有何优点？ (5)第2章快速使用Bodsoft Directui进行开发 (6)2.1下载 (6)2.2准备图片等资源文件 (6)2.3运用到工程 (6)2.3.1Win32工程 (6)2.3.2MFC工程 (10)第3章配置文件（config.xml）的编写 (17)3.1控件部分 (17)3.1.1plugin元素 (17)3.2资源样式部分 (17)3.2.1字体资源-- dsfont元素 (18)3.2.2图片资源– dsimage元素 (19)3.2.3指针资源– dscursor元素 (19)3.2.4不规则矩形（RGN）资源 (20)3.2.5样式 (22)3.3窗口部分 (37)3.3.1基类控件（Plugin） (37)3.3.2窗口（duWindow）元素 (40)3.3.3按钮（Button）控件 (40)3.3.4多选框（CheckBox）按钮 (41)3.3.5下拉框（ComboBox）控件 (41)3.3.6编辑框（Edit）控件 (42)3.3.7XP系统信息组合框（GroupPanel）控件 (42)3.3.8窗口句柄（HwndObj）控件 (43)3.3.9布局（Layout）控件 (43)3.3.10列表框（ListBox）控件 (43)3.3.11加强列表框（ListBoxEx）控件 (44)3.3.12菜单栏（MenuBar）控件 (44)3.3.13进度条（Progress）控件 (44)3.3.14单选按钮（Radio）控件 (45)3.3.15滚动条（ScrollBar）控件 (46)3.3.16滑块（Slider）控件 (46)3.3.17分割条（Splitter）控件 (47)3.3.18静态文本（Static）控件 (47)3.3.19Tab按钮（TabButton）控件 (47)第4章技术支持和服务 (48)第5章公司简介 (49)第1章DirectUI技术简单介绍1.1什么是DirectUI？DirectUI界面库取名自微软的一个窗口类名“DirectUIHWND”，意为Paint on parent dc directly。

REDUI体系结构和使用方法

运行态
数据接收模块
DOM属性/方法数据翻译/转换
事件处理模块
事件冒泡自定义事件
渲染模块
样式表/状态控件树
执行层
支持层
Inside REDUI
REDUI 扩展体系
扩展层 = CDuiExtension + 触发器
核心层 =
布局管理器
控件控制器
D3D管理器
Inside REDUI
REDUI 扩展之CDuiExtension
Inside REDUI
应用开发(C++)
创建REDUI应用的一般过程
包含头文件 #include “DirectUIWindow.h”
引用库文件 #pragma comment(lib, “redui.lib”)
创建REDUI容器窗口
给窗口传递XML界面描述数据（可包含外部JS、模型、资源、图片等）
Inside REDUI
REDUI目标开发参考
核心开发扩展开发
工具开发
DEMO开发
应用开发
Inside REDUI
REDUI开发和部署环境要求
• 开发使用不低于VS2005的IDE版本
– Redui.dll最适合在VS2008环境下编译 – 核心文件所需的VC编译器版本不低于VC2005 – 确保已安装DirectX SDK，不低于DX9版本
公开给外部扩展模块
REDUI 内部默认实现
CDuiExtension代表通用扩展标识，根据用途不同区分多种派生类别，实现不同类型的扩展。在redui.dll内部，这些类别都有默认实现且有多种具体扩展实现。
Inside REDUI
REDUI 扩展之 CDuiControl

常见mfc _ui(界面) 库

常见MFC UI界面库Xtrme toolkit，BCGControlBar，SkinMagic，AppFace，Skin++，Uskin++，SYGUI，LibUIDK，GuiToolkit，GardenUI等等，除了后两种一个是开源，一个是免费的外，其余的都是收费的。

The Ultimate Toolbox/KB/MFC/UltimateToolbox.aspxGuiToolkit(开源，mfc扩展框架,类似Visual Studio 2003风格)/default.htmGardenUI(免费，界面效果挺好的,XML，代码界面分离)/CJLib(开源，免费，UNICODE编码,是xtreme toolkit的前生，但xtreme toolkit收费了)/LibUIDK(部分免费，不开源，效果好,适合贴图)/download.htmBCGControlBar(收费，界面感觉和Office类似)SKin++(收费，界面很好看，从它的截图上可以看出)/SkinMagic(收费，看起来像Office)/html/download.htmlActiveSkin(未知)/software/develop/SYGUI(收费,mfc扩展框架,类似Office)/AppFace(收费，支持mfc ,VCL,ATL , WTL 框架)/chs/index.htmUSkin(收费，界面很好看)/一般到下面两个网站找自己需要的控件，可以参考一下：/code//GUIToolkit/KB/library/guitoolkit.aspx?display=PrintAll&fid= 4311&df=90&mpp=25&noise=3&sort=Position&view=Quick&fr=251∙Download demo project - 403 Kb∙Download full source code- 806 Kb/blog/p/20080804GUITOOLKITstaticlib.php/blog/p/20080804vcinterface.php上面网址总结了很多东西.GuiToolkitGuiToolkit, MFC界面扩展库, 个人作品, 非常棒的类库, 完全free.官方网站是/default.htm从预编译的二进制例子来看, GuiToolKit已经实现了一个完整而复杂界面的解决方案, 接近于很多商业的库, 如BCGControlBar. 可惜由于个人作品的关系, 几乎没有文档和技术支持(如果有的话, 岂非太完美了).从得到的完整的源码来看, 在VC6下编译稍需修改一下,1)头文件需要在VC中被检索到, 所以在VC Option中增加GuitoolKit/SourceCode/Personal/ExtLib/Header2)原有的工程依赖关系不对,全部去掉即可.3)import语句#import "Program FilesCommon FilesSystemADOmsado15.dll" 缺少驱动器符指示4)在GuiFramWnd.h中包含的系统文件AFXIMPL.H路径不对, 将之从系统的MFC/SRC 目录拷贝的ExtLib/Header即可.基本上这样处理后,就可以正确编译大部分的例子代码了.BCGControlBar专业版是MFC的一个扩展库，您可以用来构建类似于Microsoft Office、Microsoft Visual Studio和其他一些知名产品的高级用户界面。

delphidirectui做界面的一个例子

delphidirectui做界⾯的⼀个例⼦
现在很多CS系统或者软件界⾯都做的⾮常好看，⽐如：QQ⽪肤，迅雷下载，360杀毒界⾯等。

这些都是运⽤的流⾏的DIRECTUI 技术，基本上有的资料都是基于C++的，很少有同仁将C++下的DIRECT UI 转换到DELPHI, 这真是个悲哀，我最近也想美化⼀下界⾯，但厌倦了⽪肤控件。

在CSDN上搜索到了这个例⼦，不过需要积分下载，我也转载分享在这⾥。

directui, 其实有很多地⽅还是⽤到GDI，GDI+ 实现的，所以下⾯这个例⼦就是⽤的GDI+ 的DELPHI库完成的：
貌似样⼦还不错，⾥⾯的图⽚全部编译到资源⽂件，在delphi 2009,delphi 2010下调试是成功的，其他版本的DELPHI我没有安装，有兴趣的童鞋可以试试。

金山卫士界面源码解读及界面库分离(2)

金山卫士界面源码解读及界面库分离(2)
前面已经发布了分别后的Kui代码,我们继续,下面来说明该代码库的用法.
首先要说下Kui框架的一些基础概念:
一、
金山界面库不用法Windows的窗口布局,只是用法Windows的窗口作为一个载体,囫囵窗口都只是作为一个绘制面,
而Kui对窗口采取重新布局,取消了原窗口非客户区和客户区的概念.
而自己对窗口划分为上中下三个部分.
上部分为Header,普通作为窗口标题栏,可以放置缩小,最大化,关闭按钮,
中部分为Body,是窗口主要功能操作区域,
下部分为Footer,普通作为状态显示.
这部分解释主要是为了以后写XML时用法. 二、
Kui将用法到的诸片，布局定义xml等文件用法zip打包，并按资源名"kuires.dat",资源类别为"SKIN"，保存到运行程序的资源里
三、
Kui库用法xml格式定义控件及资源的布局，这也是通常DirectUI的做法（xml布局，脚本控制[Kui里面没用法]，windowless）。

有了以上的概念就可以用法Kui来举行界面开发了。

学生们可以参考第一个样例程序----该程序在客户区显示经典的hello world.并且对窗口外框举行了美化。

一、建立工程
首先用法向导建立一个Win32程序，对！是Win32程序，挑选了Kui，你将不能用法MFC编程了，由于没有了MFC的窗口概念。

你将应用微软的另一个库举行程序开发----WTL。

益处就是开发出来的程序不会那么臃肿了，缺点嘛，就是没有MFC那
第1页共10页。

金山卫士界面源码解读及界面库分离(4)

WS_VISIBLE | WS_BORDER ) ) m_ctlUserName.SetDlgCtrlID( 2 ); if( m_ctlUserPass.Create( GetRichWnd(), NULL, NULL, WS_CHILD | WS_VISIBLE | WS_BORDER | ES_PASSWORD ) ) m_ctlUserPass.SetDlgCtrlID( 3 ); SetTimer( 1, 80 ); return TRUE; } 怎么样，编译一下看看吧。由于只是一个示例代码就不上传到 CSDN 了，学生们可以挺直自己编辑一下，或用 SVN 到以下地址更新代码。
这个浮现在左下角。
realwnd 节点，这个节点比较特别，它事实上定义了一个与真切窗口
关键是 mainbody 部分，我们加入了几个新控件，同时应用了一些新的
相衔接的接口，链接的枢纽就是通过 ctrlid 与真切窗口的控件 ID 相
第3页共5页
联系。我们通过这两个窗口定义了两个编辑框。这两个窗口需要程序代码来协作创建，我们后面将提到。再下面定义的三个 check 按钮以及一个登陆按钮，我们前面文章已经介绍了。这里不再重复。最后看看是延续 5 个 link 控件，这个 link 控件可是好东西，它可以定义各种样式，并可以像一般按钮那样发送通知消息。所以你可以发觉要在标题栏那里放入一个[ 设置 ]字样，鼠标移到上面可以变色，并可以接受点击消息，是如此容易。金山就是那么做的。我们在这里可以定义五个超链接，就跟网页上面的超链接一样，点击后就到达相关网页，只要设置 href 为要到达的网址，就是如此容易。囫囵登陆界面的定义，说明出来就是如上所述而已。有没发觉其实也蛮容易的，其实世界上无数事只要手熟以后就发觉也不是很棘手的。百步穿杨和油壶不滴表面看来都是神乎奇技，其实唯手熟也。提到这个是想解释其实平常用惯了 MFC 的窗口布局，自然对其他的布局方式感觉

DirectUI界面技术

November 19, 2002: First version
{
...
m_wndDirectUI.InitFromMenu(IDR_DIRECT1);
m_wndDirectUI.SetToolbarImages(IDR_MAINFRAME);
...
}
为了使用超过16色的图像，你需要调用SetToolbarImages(uiToolbar, uiAlternateImages, nFlagColor, clBackground, nWidth)函数，参数说明如下：
uiAlternateImages: 高彩的图像资源id
nFlagColor: See for more info. Default is ILC_COLOR8 for 256 color images
clBackground: Background color used for maps (default is purple)
简介
在WindowsXP里，你Fra bibliotek否注意了类似于控制面板、我收藏的图片这样的特殊文件夹，他们有一个类似于上图的窗口用于显示用户最常用的操作，由于Windows帮助你思考了你可能想做什么，这就使得新手非常容易上手使用。我想这样的用户帮助也同样适用于我的程序，于是我就写了一个类来模拟这样的控件。
背景知识
版权和荣誉
只要你将如下信息加入到你的程序文档中，则可以把代码使用在任何类型的应用中（免费、共享甚至商业软件）：
Thanks a lot to Keith Rule for his CMemDC class!
Thanks to David Yuheng Zhao for his CVisualStylesXP class.

一种适合嵌入式系统的图形库DirectFB

随着消费类电子消费的兴起，越来越多的嵌入式，手持式设备不再满足于简单的图形画面，希望能有流畅的动画，影视播放功能和灵活的外设
设备输入处理。面对海量的多媒体数据的显示处理需求，单靠一颗中央处理器芯片是不够的，需要有图形处理芯片来专门处理图形图像相关的任
２ｌｅｔＢｄｗ４ＤｊｃＦＷｉｏｒｎ
上的多层显示。它是一个用软件封装当前硬件无法支持的图形算法来完成硬件加速的层。ＤｒｃＦ是为嵌入式系统而设计，能以最小的资源开销来ｉｅｔＢ
实现最高的硬件加速性能。
务，才能提高整体性能。本文介绍了一种开源库ＤｒｃＦ，能够以极小的ｉｅｔＢ
ＣＵ价提供一套完整的图形图像系统，并提供了各种硬件加速接口，可以Ｐ代充分利用硬件加速功能提高系统性能。
Ｓｒａｅ内存中一个图像以一种具体的像素格式被保存的一块保留ｕｆｃ是区域，一个Ｓｒａｅ以位于视频或系统内存中。在全屏模式下时，可以通ｕｆｃ可过创建ｐｉａｙｓｒａｅｒｍｒｕｆｃ来表达ｐｉａｙｌｙｒｒｍｒａｅ的可视区域。每个ｌｙｒａｅ的可
的超级接口，是唯一由全局函数ＤｒｃＦＣｅｔ０所创建的接口。其他的ｉｅｔＢｒａｅ

GUI用户界面设计PPT课件

.
26
PB中的GUI——数据输入
1）尽量减少用户输入动作的数量； 2）保持信息显示和数据输入的一致性； 3）交互应灵活，对键盘和鼠标输入提供灵活的支
持； 4）在当前动作的语境中使不合适的命令不起作用；让用户控制交互流，用户可以跳过不必要的动作、
改变所需动作的顺序（如果允许的话），以及在不退出系统的情况下从错误状态中恢复；为所有输入的动作提供帮助；消除冗余输入。可能的话提供缺省值、绝不要让用户提供程序中可以自动获取或计算出来的信息。
香皂被水淋了之后，需要排残水。
排水不干净。
水龙头的位置很尴尬，不说洗手不方便，如果想用盆子接点水估计只能斜着接，也只能接到一点，接满了也拿不下来。若水压开的很大，更不用说溅的满身都是。
商标在哪？
.
4
餐巾摆放的设计
？？
.
5
UI
UI的本意是用户界面，是英文User和 Interface的缩写。从字面上看是用户与界面2 个组成部分，但实际上还包括用户与界面之间的交互关系.
.
27
人机交互的主流技术
命令语言用户界面图形用户界面的广泛应用直接操纵用户界面技术的成熟多媒体用户界面及多通道用户界面的发展虚拟现实技术的应用
.
28
.
30
.
21
PB中的GUI——关于系统响应时间
响应时间长度 0-10秒 10-18秒 18秒以上一个长时间的处理
界面设计鼠标显示成为沙漏由微帮助来显示处理进度显示处理窗口，或显示进度条完成时应给予完成提示信息
.
22
PB中的GUI——帮助设施
进行系统交互时，提供部分帮助功能，即：提供主要工作的帮助

DirectUI技术详解

DirectUI技术详解释意：将所有的控件都绘制在一个窗口上，这些控件的逻辑和绘图方式都必须的自己进行编写和封装，所以这些控件都是无句柄的。

DirectUI技术的实现步骤和难点： 1、窗口的子类化，截获窗口的消息。

2、封装自己的控件，并将自己的控件绘制到该窗口上 3、封装窗口的消息，并分发到自己的控件上，让自己的控件根据消息进行相应和绘制 4、根据不同的行为发送自定义消息给窗口，以便程序进行调用。

5、一般窗口上控件的组织使用XML来描述。

一.介绍DirectUI技术说白了就是XML配置文件+图片+JavaScript控制界面。

这点与网页css+图片+JavaScript十分相似，就是如开发网页一般开发桌面程序界面，这个开发效率当然大大的提高。

将程序员从繁琐的界面绘制工作中解脱出来，专心开发逻辑代码。

还能大大减少代码量，因为据统计，传统MFC程序中，界面代码大约占总代码的1/3强！也就是说，这个1/3的代码都可以由xml+javascript替代！同理，如果网页开发时，每个图片都需要由web程序绘制，你能想象一个网页的代码量有多少吗？简直不能想象，而传统Window程序就是如此！DirectUI技术最早被用于window xp资源管理器左边栏，被称为task folder.而DirectUI被广为国人所知，还得感谢腾讯公司。

QQ2009的界面就是使用DirectUI技术开发的。

类似的有微软的MSN,OCS和百度Hi。

最近的Office2007 Ribbon界面，如果使用Spy++查看，可以见到一个名为"NetUI"的窗口，其实这也是微软内部DirectUI的一个变种。

不过无论是微软，腾讯，还是百度，都使用了DirectUI技术来开发自己的软件界面，却不肯将其公开。

本文将介绍如何使用DirectUI技术开发一个类似QQ的界面演示程序。

二.背景与DirectUI最相似的要数微软最近推出的WPF，其设计思想是相同的。

关于设计gui界面的参考文献

GUI界面设计是计算机界面设计的一种，它能够提供用户与操作系统和应用软件交互的方式。

受益于互联网和移动设备的迅猛发展，GUI界面设计已经成为了计算机界面设计的主要形式之一。

本文将介绍一些关于设计GUI界面的参考文献，希望能够对相关领域的研究者和设计师有所帮助。

1. 《用户界面设计模式》（Jennifer Tidwell，2005）本书是一本介绍用户界面设计模式的经典著作。

作者Jennifer Tidwell 系统地介绍了用户界面设计中常见的模式，以及这些模式在不同情境下的应用方法。

通过本书的学习，读者可以对用户界面设计的基本原则和方法有一个更加系统的理解，同时也可以从中汲取设计灵感，提升自己的设计水平。

2. 《GUI设计实战》（朱伟，2006）这本书是一本专门介绍GUI设计实战经验和技巧的著作。

作者朱伟通过自己多年的设计实践，总结出了许多实用的GUI设计方法和技巧，并且结合具体案例进行详细解析。

本书涵盖了GUI设计的各个方面，包括颜色搭配、布局设计、交互体验等内容，对于想要从事GUI设计工作的人员来说是一本很好的参考书籍。

3. 《GUI设计的艺术》（Steve Krug，2005）Steve Krug是一位资深的用户体验设计师，他在本书中共享了自己多年来在GUI设计领域的心得和经验。

本书涵盖了GUI设计的基本原则、交互设计、可用性测试等方面的内容，并且通过具体案例分析和实战经验进行讲解，对于想要提升自己GUI设计水平的人员来说是一本非常值得一读的书籍。

4. 《GUI设计精髓》（Alan Cooper，2007）Alan Cooper是一位著名的软件设计师，他在本书中对GUI设计的重要性进行了全面的阐述，并且提出了许多独到的设计理念和方法。

本书涵盖了GUI设计的基本原则、用户需求分析、设计流程等方面的内容，并且结合自己的实践经验进行讲解，对于想要系统了解GUI设计的原理和方法的人员来说是一本很好的参考书籍。

DUILIB界面库使用介绍

Duilib界面库使用介绍一、Duilib简介Duilib是以DirectUI为技术原理开发的一款轻量级Windows桌面UI库，具有入门简单，使用方便等特点，在国吸引了不少的开发者。

其开发原型为国外大神viksoe 的www.viksoe.dk/code/windowless1.htm 文章中提供的源码，国开源前辈以此为基础：修正Bug、优化程序结构、提高稳定性和易用性，是一款功能强大，使用方便的界面库。

界面库使用XML来描述界面风格，界面布局，可以很方便的构建高效，绚丽的，非常易于扩展的界面。

从而很好的将界面和逻辑分离，同时易于实现各种超炫的界面效果如换色，换肤，透明等。

Duilib界面库的出现解决了使用传统MFC界面库开发软件不美观、界面细节处理不好、使用硬编码、开发效率低下、生成程序体积大等问题。

国的以下客户端都曾经以此为基础拓展并使用了duilib：1.百度杀毒2.微信PC客户端3.爱奇艺客户端4. 酷我音乐其他基于Duilib的软件不完全列表：百度：PPS 百度卫士91助手腾讯：企业微信阿里：钉钉支付宝安全控件PP助手华为：华为网盘书生云：书生企业云盘微软：微软壁纸网易：易信云音乐荒野行动PC版金山：金山快盘京东：咚咚cctv：cbox蘑菇街：TeamTalk火绒：火绒安全软件盘古：盘古越狱工具顺网：网维大师91y网狐：网狐经典版墨迹风云：墨迹天气zoomcloud：Zoom视频会议搜狗：搜狗手机助手沃通：沃通代码签名工具驱动人生：驱动人生人生日历维棠：维棠市北斗智研科技：智能办公助手ERP管理系统二、Duilib原理DirectUI意为直接在父窗口上绘图(Paint on parent dc directly)。

即子窗口不以窗口句柄的形式创建(windowless)，只是逻辑上的窗口，绘制在父窗口之上。

通俗来说就是在窗口上指定一块区域（仅仅是一个区域，不是一个实体控件）通过各种消息模拟一个控件的功能。

Direct UI

Direct UI在界面开发中，目前DirectUI是个热门的技术名称，因为众多的知名公司都是用DirectUI方式作出了很炫丽的界面。

而对于大多数熟悉Win32控件，熟悉MFC开发的开发人员来说，我们应该做何选择？因为传统的Win32/ MFC大家都比较了解，所以首先我们分析DirectUI，看看DirectUI能完成哪些普通Win32控件难以实现的功能，同时实现一个完整的DirectUI有那些关键点。

基于DirectUI技术的界面库的优势以下是我们总结的一个完善的DirectUI库的优势，这些特性Win32控件方式难以实现的：1. 界面完全换肤这里的“界面完全换肤”，是指用户可完全定制化的换肤，软件界面控件大小，位置等都可能有变化等。

DirectUI界面库一般都是用XML定义界面虚拟控件并直接布局界面，因此可以实现此功能。

但实际上完全的换肤涉及到很多问题，目前很少有界面库产品可以实现这种完全换肤。

从界面设计的发展来看，目前已经不流行这种界面的完全换肤，因为这不仅对技术要求比较多，同时也对UI设计要求很高。

目前界面换肤大量采用的是更换色调，局部的背景更换（如MSN/QQ最新版本）。

2. 理论上更高的效率由于在DirectUI控件中，更多的控件为逻辑上的虚拟控件。

因此理论上来讲DirectUI运行效率会更高一些，但这个效率也与DirectUI界面库整体的软件架构及软件实现有密切关系。

在实际考虑时，效率问题应该不是关注的重点，因为目前设计及实现良好的Win32 界面库在效率方面也没有任何问题。

3. 容易实现更加炫丽的动态效果由于DirectUI的技术特点，使其更容易实现一些特效的动画效果，如菜单的动态徐徐展开和收缩，窗口的动态渐隐渐显的弹出和关闭，控件的动画展开和关闭。

当然以上这些特性也取决于开发团队的技术实力，同时也需要顶尖优秀的UI设计师配合，方能带来所期望的炫丽效果。

4. 防止软件被破解，防外挂关于这一点，可能是众多关注DirectUI的人没有考虑到的。

DUILIB界面库使用介绍

Duilib界面库使用介绍一、Duilib简介Duilib是以DirectUI为技术原理开发的一款轻量级Windows桌面UI库，具有入门简单，使用方便等特点，在国内吸引了不少的开发者。

其开发原型为国外大神viksoe的http://www.viksoe.dk/code/windowless1.htm 文章中提供的源码，国内开源前辈以此为基础：修正Bug、优化程序结构、提高稳定性和易用性，是一款功能强大，使用方便的界面库。

界面库使用XML来描述界面风格，界面布局，可以很方便的构建高效，绚丽的，非常易于扩展的界面。

从而很好的将界面和逻辑分离，同时易于实现各种超炫的界面效果如换色，换肤，透明等。

Duilib界面库的出现解决了使用传统MFC界面库开发软件不美观、界面细节处理不好、使用硬编码、开发效率低下、生成程序体积大等问题。

国内的以下客户端都曾经以此为基础拓展并使用了duilib：1.百度杀毒2.微信PC客户端3.爱奇艺客户端4. 酷我音乐其他基于Duilib的软件不完全列表：百度：PPS 百度卫士91助手腾讯：企业微信阿里：钉钉支付宝安全控件PP助手华为：华为网盘书生云：书生企业云盘微软：微软壁纸网易：易信云音乐荒野行动PC版金山：金山快盘京东：咚咚cctv：cbox蘑菇街：TeamTalk火绒：火绒安全软件盘古：盘古越狱工具顺网：网维大师91y网狐：网狐经典版墨迹风云：墨迹天气zoomcloud：Zoom视频会议搜狗：搜狗手机助手沃通：沃通代码签名工具驱动人生：驱动人生人生日历维棠：维棠深圳市北斗智研科技：智能办公助手ERP管理系统二、Duilib原理DirectUI意为直接在父窗口上绘图(Paint on parent dc directly)。

即子窗口不以窗口句柄的形式创建(windowless)，只是逻辑上的窗口，绘制在父窗口之上。

通俗来说就是在窗口上指定一块区域（仅仅是一个区域，不是一个实体控件）通过各种消息模拟一个控件的功能。

DirectUI的初步分析(转)

最近由于项目的需要学习了一下DirectUI方面的东西,主要借鉴的是一个国外程序员写的代码(见引用一),看了后发现它更多的是探讨一种实现的可能性和思路,和实际应用还是有距离的,不过其实现还是很有意思的。

在写此小结的时候又发现国内一个程序员将这个代码部分移植到WINCE下的代码(见引用二),因为平台的差异性要完全开发一个WINCE下的实际代码还是需要时间的。

由于本人GUI开发做得少,工作中有关这方面的东西主要是提供思路和方法,学习DirectUI的主要目的是为了更新知识学习思路,文章中难免出现错误。

一、核心1 、CWindowWnd: 窗口对象类(窗口实例对象父类)2 、CDialogBuilder: 创建控件类,分析脚本并用递归方式(_Parse函数)创建所有控件实例3 、CPaintManagerUI: 窗口消息及图形绘制管理器类4 、CGUIRenderEngineUI: 图形渲染引擎类,在离屏DC中生成最终显示的图形,可根据需要扩展多种图形效果显示。

5 、INotifyUI: 事件通知抽象类6 、IMessageFilterUI: 消息过滤抽象类二、控件CControlUI: 控件管理抽象父类,父类INotifyUI1 、buttonCButtonUI: 按钮控件COptionUI: 选择按钮控件2 、comboxCSingleLinePickUI:CDropDownUI: 下拉控件,父类另有CContainerUI和IListOwnerUI3 、decorationCTitleShadowUI: 阴影效果CListHeaderShadowUICSeparatorLineUICFadedLineUI4 、editCSingleLineEditUI: 单行编辑框控件CMultiLineEditUI: 多行编辑框控件5 、labelCLabelPanelUI: 可设置背景色和文字色的静态标签控件CGreyTextHeaderUI6 、list第一种:CListUI: 列表控件,包含以下几个子控件( 1 )CListHeaderItemUI: 列表头( 2 )CListExpandElementUI: 列表项第二种:用法不明CListHeaderUI: 列表头CListElementUI: 列表项,父类另有IListItemUICListLabelElementUI: 列表项,父类CListElementUICListTextElementUI: 列表项CListFooterUI: 列表尾7 、panelCTextPanelUI: 父类CLabelPanelUICTaskPanelUI:CNavigatorPanelUI: 导航面板,父类另有IListOwnerUI,包含CNavigatorButtonUI子控件CSearchTitlePanelUI:CImagePanelUI: 图片显示CWarningPanelUI: 警告提示,父类CTextPanelUICPaddingPanelUI: 填充栏8 、tabCTabFolderUI: 父类另有CContainerUI和IListOwnerUICTabPageUI: 父类另有CContainerUI9 、toolbarCToolbarUI: 工具栏,包含以下几个子控件( 1 )CToolButtonUI: 图形按钮( 2 )CToolSeparatorUI: 分隔符( 3 )CToolGripperUI: gripper10 、titleCToolbarTitlePanelUI:11 、statusbarCStatusbarUI: 状态栏,父类另有CContainerUI12 、animCAnimJobUI: 动画显示类13 、ActiveXCActiveXUI:三、容器：CContainerUI: 容器类,父类CControlUI和IContainerUI。