于UI开发人员和前端开发人员有一个常见的误解，即他们基本上在做相同的工作。我已经听过很多次了，不仅是从普通人口中，而且是从IT行业的从业人员口中。为了解决这个问题，我决定在这两个同样重要、同样有趣、但却截然不同的职业之间划清界限。具体区别哪里，下面和千锋广州小编一起来看看吧！

让我们从用户界面（UI）的定义开始。在数字行业中，用户界面意味着用户可以跨各种设备(台式机、笔记本电脑、平板电脑和手机)控制或交互的每个细节(屏幕、键盘、鼠标、附加控制器等)。

界面开发，无论是应用程序、网站、游戏还是模拟器(事实上，尤其是模拟器)，都是一个包含设计、工程和心理学元素的复杂过程。

界面开发人员的主要目标是创建方便的界面，以满足用户的需求。要做到这一点，您必须理解并识别用户的努力、目标、行为模式和用户交互的模型场景。你精通的跨行业领域越多(分析、心理学、市场营销、用户体验)，你就能创造出更好的解决方案。

UI开发人员的工作

对于UI开发人员，主要的工作工具是adobeillustrator或类似的软件。它需要绘制草图和准备图形材料。Illustrator擅长使用矢量图形，它可以根据不同的屏幕分辨率缩放和调整概念界面。

对于辅助工具，UI开发人员也可以使用MicrosoftExpressionDesign和ExpressionBlend。最后设计人员必须深入研究相关操作系统的UI指导原则，他们希望根据这些指导原则调整界面(WindowsUI指导原则、MacOS指导原则)。

UI开发人员的关键特征是逻辑思维，这就是为什么这些人从来不是纯粹的艺术家。UI设计师是100%的技术人员，只有人文素养。为了解决项目的问题，必须采用数学方法来结合标准工具。至于备受赞赏的创造力——只有在标准工具不能提供令人满意的解决方案时才允许。

UI开发人员心中有一组明确的优先级。

1.首先，接口必须是功能性的。

2.其次，它必须方便，在不刺激用户的频繁工作。

3.最后，它必须是“美丽的”，也就是“美丽”得足够吸引眼球。

一个好的UI开发人员是设计技能和技术知识的结合，他们的职责是可视化理解用户界面。

那么Web前端开发人员呢?

前端是开发Web界面的客户端。前端开发人员负责运行和操作界面，而不是由UI专家设计的可视化外观。

如果我们要将其与打印媒体进行比较，那么UI开发人员将创建总布局，而前端开发人员将进行页面校对，以便实际打印布局。

​

与前端开发相关的挑战是用于创建网站前端的工具和技术不断变化，因此开发人员需要不断了解该领域是如何发展的。前端通常构建在三个支柱上。它们是HTML、CSS和JavaScript。作为一名程序员，前端开发人员还必须接受算法、数据结构、编码模式、面向对象编程和函数方法方面的培训。（推荐相关视频教程：《HTML教程》、《CSS教程》、《Javascript教程》）

通常，前端开发人员必须在产品开发阶段找到UI/UX问题的解决方案。这就是为什么拥有一些基本的UI开发人员技能对他们来说是一个巨大的优势。

以上就是前端和UI的联系与区别，这次你懂了吗？

evExpress WinForm拥有180+组件和UI库，能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForm能完美构建流畅、美观且易于使用的应用程序，无论是Office风格的界面，还是分析处理大批量的业务数据，它都能轻松胜任！

注意：目前基于HTML & CSS的控件正在积极研发中，可以作为技术预览提供，如果需要使用请下载最新版组件体验哦~

DevExpress WinForms Subscription官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下载-慧都网

一组控件和组件允许开发人员构建HTML格式的UI，并使用CSS样式自定义UI元素的外观设置、大小、填充和布局选项，不再需要处理自定义绘制事件或更改大量属性来修改控件以匹配UI规范，可以使用HTML和CSS标记的知识为桌面应用程序构建布局。

在上文中（点击这里回顾：用DevExpress实现基于HTML&CSS的桌面应用程序的UI（二）)，我们为大家介绍了HTML-CSS标记的动态自定义项目、数据绑定等，本文将继续为大家介绍如何使用外部控件和就地编辑器、按钮的使用等，欢迎持续关注这个系列的文章哦~

HTML-CSS标记

外部控件和就地编辑器

<input>标记允许开发者向基于HTML的UI添加就地编辑器或外部控件，标签支持以下控件：

HtmlContentControl

使用<input>标记作为想要在布局中显示的外部控件和存储库项(就地编辑器)的占位符。

Data Grid Views (ItemsView, TileView和 WinExplorerView)

使用<input>标记作为Repository Items(就地编辑器)的占位符，不能使用此标记在数据网格视图中显示外部控件。

HTML

<input name="textEditEmail" class="field-input"/>
<input name="repositoryItemPictureEdit1" value="${ImageData}" class="editor"/>

按钮

按照下面的步骤渲染一个按钮：

• 定义一个呈现按钮的HTML元素，指定元素的类(例如，将类名设置为“button”)。
• 在CSS代码中，定义“button”类来指定元素的显示属性。
• 还为按钮类定义悬停状态，以便在元素悬停时突出显示元素。

下面的示例使用<div> 标记来定义一个按钮：

HTML

<div id="uploadBtn" class="centered button">Upload</div>
<div id="removeBtn" class="centered button">Remove</div>

CSS

.centered{
align-self:center;
}
.button {
width: 70px;
height: 20px;
min-width: 20px;
padding: 8px;
margin-left: 2px;
opacity: 0.5;
}
.button:hover {
border-radius: 4px;
background-color: #F2F2F2;
}

UI元素鼠标操作

开发者可以再控制级、HTML标记级和使用Fluent API时响应HTML UI元素上的鼠标操作。

控件的鼠标事件

支持HTML的控件公开可以处理的事件，以响应HTML UI元素上的鼠标动作，这些事件通常被称为：

• ElementMouseClick
• ElementMouseDown
• ElementMouseMove
• ElementMouseOut
• ElementMouseOver
• ElementMouseUp

C#

void htmlContentControl1_ElementMouseClick(object sender, DevExpress.Utils.Html.DxHtmlElementMouseEventArgs e) {
if(e.ElementId == "btnSend") {
//...
}
}

VB.NET

Sub HtmlContentControl1_ElementMouseClick(sender As Object, e As DevExpress.Utils.Html.DxHtmlElementMouseEventArgs) Handles HtmlContentControl1.ElementMouseClick
If e.ElementId = "btnSend" Then
'...
End If
End Sub

HTML鼠标事件

HTML标记中支持以下鼠标事件：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove和onmouseout，开发者可以通过以下方式订阅这些事件：

• 用下面的签名在代码后面定义一个方法：

C#

void <MethodName>(object sender, DxHtmlElementMouseEventArgs args)

VB.NET

Sub <MethodName>(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)

• 在HTML代码中，将元素的事件设置为已定义方法的名称。

HTML

<img onclick="<MethodName>" ... />

示例:

C#

void OnPhoneClick(object sender, DxHtmlElementMouseEventArgs args) {
XtraMessageBox.Show("Phone!");
}

VB.NET

Sub OnPhoneClick(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)
XtraMessageBox.Show("Phone!")
End Sub

HTML

<div class='buttonPanel'>
<img onclick="OnPhoneClick" src="PhoneCall" class="button" />
</div>

Fluent API

开发者可以使用Fluent API订阅元素的鼠标单击事件。

C#

var fluent = context.OfType<ViewModel>();
fluent.BindCommandToElement(htmlContentControl, "btnPhone", x => x.Phone);
//...
public class ViewModel {
public void Phone() {
//...
}
//...
}

VB.NET

Dim fluent = context.OfType(Of ViewModel)()
fluent.BindCommandToElement(htmlContentControl, "btnPhone", Sub(x) x.Phone())
'...
Public Class ViewModel
Public Sub Phone()
'...
End Sub
End Class
'...

HTML

<img id="btnPhone" src="PhoneCall" class="button" />

在程序员开发软件界面系统也都是有多种多样，每种开发语言基本上都有一种或多种界面引擎如：C skin, Direct UI , 还有金山、迅雷等厂商的界面SDK。

今天推荐一个轻量级、自由度高、使用方便的界面库 Htmlayout/Sciter。HTMLayout是一个免费的开源界面库（核心未开源），以DLL的方式运行，并提供一个API的调用接口和一系列的C++封装和sample例程。HTMLayout: 快速，轻量、嵌入式的，基于HTML/CSS渲染技术和布局管理的界面引擎组件，可以高效地解析和渲染HTML网页。其几乎支持所有的HTML元素和CSS3标准，并根据界面库的特征，做了很多有用的功能性扩展。

这里着重地说一下在 aardio 软件中的使用，作者把 HTMLayout和 Sciter 制作成了扩展库, 并且免费开源, 通过这个扩展库你知道会一点点 HTML 和 CSS 知识就可以方便地制作各种漂亮的 ui。通过作者的努力你还可以直接在界面上使用现在最流行的字体图标，还使扩展库支持了模板功能，你可以像写PHP一样写桌面软件的界面HTML，虽然看起来简单的代码，但用起来会非常方便。

言归正传, 我们用aardio一步步来制作一个最简单的界面。

1、打开软件》新建工程》选择web界面》选择HTMLayout》创建工程

aardio 里查看 main.aardio 源码

 import win.ui;
/*DSG{{*/
var winform = win.form(text="htmlayout";right=761;bottom=609;border="none")
winform.add()
/*}}*/

import web.layout; 
import web.layout.behavior.windowCommand;
import web.layout.behavior.tabs;
// 加载网页
var wbLayout = web.layout( winform );
wbLayout.go("\layout\ui.html");

if(_STUDIO_INVOKED){
	import web.layout.debug;
	wbLayout.attachEventHandler( web.layout.debug );
} 

//添加阴影边框
import win.ui.shadow;
win.ui.shadow( winform,50,3 );

winform.show() 
win.loopMessage();

从上面我们可以看出，软件的主要界面是由 ui.html，ui.css，tabs.css 这几个文件组成的。然后你可以根据自己软件界面的需要进行调整。

以下是我自己这二天搭建的一个软件的界面，就是一个简单的软件基本框架。

如果你对htmlayout感兴趣，可以查看 https://bbs.aardio.com/forum.php?mod=forumdisplay&fid=128&page=1 了解更多更详细的教程。