整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
于UI開(kāi)發(fā)人員和前端開(kāi)發(fā)人員有一個(gè)常見(jiàn)的誤解，即他們基本上在做相同的工作。我已經(jīng)聽(tīng)過(guò)很多次了，不僅是從普通人口中，而且是從IT行業(yè)的從業(yè)人員口中。為了解決這個(gè)問(wèn)題，我決定在這兩個(gè)同樣重要、同樣有趣、但卻截然不同的職業(yè)之間劃清界限。具體區(qū)別哪里，下面和千鋒廣州小編一起來(lái)看看吧！
讓我們從用戶界面（UI）的定義開(kāi)始。在數(shù)字行業(yè)中，用戶界面意味著用戶可以跨各種設(shè)備(臺(tái)式機(jī)、筆記本電腦、平板電腦和手機(jī))控制或交互的每個(gè)細(xì)節(jié)(屏幕、鍵盤(pán)、鼠標(biāo)、附加控制器等)。
界面開(kāi)發(fā)，無(wú)論是應(yīng)用程序、網(wǎng)站、游戲還是模擬器(事實(shí)上，尤其是模擬器)，都是一個(gè)包含設(shè)計(jì)、工程和心理學(xué)元素的復(fù)雜過(guò)程。
界面開(kāi)發(fā)人員的主要目標(biāo)是創(chuàng)建方便的界面，以滿足用戶的需求。要做到這一點(diǎn)，您必須理解并識(shí)別用戶的努力、目標(biāo)、行為模式和用戶交互的模型場(chǎng)景。你精通的跨行業(yè)領(lǐng)域越多(分析、心理學(xué)、市場(chǎng)營(yíng)銷(xiāo)、用戶體驗(yàn))，你就能創(chuàng)造出更好的解決方案。
UI開(kāi)發(fā)人員的工作
對(duì)于UI開(kāi)發(fā)人員，主要的工作工具是adobeillustrator或類(lèi)似的軟件。它需要繪制草圖和準(zhǔn)備圖形材料。Illustrator擅長(zhǎng)使用矢量圖形，它可以根據(jù)不同的屏幕分辨率縮放和調(diào)整概念界面。
對(duì)于輔助工具，UI開(kāi)發(fā)人員也可以使用MicrosoftExpressionDesign和ExpressionBlend。最后設(shè)計(jì)人員必須深入研究相關(guān)操作系統(tǒng)的UI指導(dǎo)原則，他們希望根據(jù)這些指導(dǎo)原則調(diào)整界面(WindowsUI指導(dǎo)原則、MacOS指導(dǎo)原則)。
UI開(kāi)發(fā)人員的關(guān)鍵特征是邏輯思維，這就是為什么這些人從來(lái)不是純粹的藝術(shù)家。UI設(shè)計(jì)師是100%的技術(shù)人員，只有人文素養(yǎng)。為了解決項(xiàng)目的問(wèn)題，必須采用數(shù)學(xué)方法來(lái)結(jié)合標(biāo)準(zhǔn)工具。至于備受贊賞的創(chuàng)造力——只有在標(biāo)準(zhǔn)工具不能提供令人滿意的解決方案時(shí)才允許。
UI開(kāi)發(fā)人員心中有一組明確的優(yōu)先級(jí)。
1.首先，接口必須是功能性的。
2.其次，它必須方便，在不刺激用戶的頻繁工作。
3.最后，它必須是“美麗的”，也就是“美麗”得足夠吸引眼球。
一個(gè)好的UI開(kāi)發(fā)人員是設(shè)計(jì)技能和技術(shù)知識(shí)的結(jié)合，他們的職責(zé)是可視化理解用戶界面。
那么Web前端開(kāi)發(fā)人員呢?
前端是開(kāi)發(fā)Web界面的客戶端。前端開(kāi)發(fā)人員負(fù)責(zé)運(yùn)行和操作界面，而不是由UI專家設(shè)計(jì)的可視化外觀。
如果我們要將其與打印媒體進(jìn)行比較，那么UI開(kāi)發(fā)人員將創(chuàng)建總布局，而前端開(kāi)發(fā)人員將進(jìn)行頁(yè)面校對(duì)，以便實(shí)際打印布局。
?
與前端開(kāi)發(fā)相關(guān)的挑戰(zhàn)是用于創(chuàng)建網(wǎng)站前端的工具和技術(shù)不斷變化，因此開(kāi)發(fā)人員需要不斷了解該領(lǐng)域是如何發(fā)展的。前端通常構(gòu)建在三個(gè)支柱上。它們是HTML、CSS和JavaScript。作為一名程序員，前端開(kāi)發(fā)人員還必須接受算法、數(shù)據(jù)結(jié)構(gòu)、編碼模式、面向?qū)ο缶幊毯秃瘮?shù)方法方面的培訓(xùn)。（推薦相關(guān)視頻教程：《HTML教程》、《CSS教程》、《Javascript教程》）
通常，前端開(kāi)發(fā)人員必須在產(chǎn)品開(kāi)發(fā)階段找到UI/UX問(wèn)題的解決方案。這就是為什么擁有一些基本的UI開(kāi)發(fā)人員技能對(duì)他們來(lái)說(shuō)是一個(gè)巨大的優(yōu)勢(shì)。
以上就是前端和UI的聯(lián)系與區(qū)別，這次你懂了嗎？
evExpress WinForm擁有180+組件和UI庫(kù)，能為Windows Forms平臺(tái)創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForm能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無(wú)論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！
注意：目前基于HTML & CSS的控件正在積極研發(fā)中，可以作為技術(shù)預(yù)覽提供，如果需要使用請(qǐng)下載最新版組件體驗(yàn)哦~
DevExpress WinForms Subscription官方最新版免費(fèi)下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)
一組控件和組件允許開(kāi)發(fā)人員構(gòu)建HTML格式的UI，并使用CSS樣式自定義UI元素的外觀設(shè)置、大小、填充和布局選項(xiàng)，不再需要處理自定義繪制事件或更改大量屬性來(lái)修改控件以匹配UI規(guī)范，可以使用HTML和CSS標(biāo)記的知識(shí)為桌面應(yīng)用程序構(gòu)建布局。
在上文中（點(diǎn)擊這里回顧：用DevExpress實(shí)現(xiàn)基于HTML&CSS的桌面應(yīng)用程序的UI（二）)，我們?yōu)榇蠹医榻B了HTML-CSS標(biāo)記的動(dòng)態(tài)自定義項(xiàng)目、數(shù)據(jù)綁定等，本文將繼續(xù)為大家介紹如何使用外部控件和就地編輯器、按鈕的使用等，歡迎持續(xù)關(guān)注這個(gè)系列的文章哦~
<input>標(biāo)記允許開(kāi)發(fā)者向基于HTML的UI添加就地編輯器或外部控件，標(biāo)簽支持以下控件：
HtmlContentControl
使用<input>標(biāo)記作為想要在布局中顯示的外部控件和存儲(chǔ)庫(kù)項(xiàng)(就地編輯器)的占位符。
Data Grid Views (ItemsView, TileView和 WinExplorerView)
使用<input>標(biāo)記作為Repository Items(就地編輯器)的占位符，不能使用此標(biāo)記在數(shù)據(jù)網(wǎng)格視圖中顯示外部控件。
HTML
<input name="textEditEmail" class="field-input"/>
<input name="repositoryItemPictureEdit1" value="${ImageData}" class="editor"/>按照下面的步驟渲染一個(gè)按鈕：
下面的示例使用<div> 標(biāo)記來(lái)定義一個(gè)按鈕：
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;
}開(kāi)發(fā)者可以再控制級(jí)、HTML標(biāo)記級(jí)和使用Fluent API時(shí)響應(yīng)HTML UI元素上的鼠標(biāo)操作。
控件的鼠標(biāo)事件
支持HTML的控件公開(kāi)可以處理的事件，以響應(yīng)HTML UI元素上的鼠標(biāo)動(dòng)作，這些事件通常被稱為：
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 SubHTML鼠標(biāo)事件
HTML標(biāo)記中支持以下鼠標(biāo)事件：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove和onmouseout，開(kāi)發(fā)者可以通過(guò)以下方式訂閱這些事件：
C#
void <MethodName>(object sender, DxHtmlElementMouseEventArgs args)VB.NET
Sub <MethodName>(ByVal sender As Object, ByVal args As DxHtmlElementMouseEventArgs)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 SubHTML
<div class='buttonPanel'>
<img onclick="OnPhoneClick" src="PhoneCall" class="button" />
</div>Fluent API
開(kāi)發(fā)者可以使用Fluent API訂閱元素的鼠標(biāo)單擊事件。
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" />在程序員開(kāi)發(fā)軟件界面系統(tǒng)也都是有多種多樣，每種開(kāi)發(fā)語(yǔ)言基本上都有一種或多種界面引擎如：C skin, Direct UI , 還有金山、迅雷等廠商的界面SDK。
今天推薦一個(gè)輕量級(jí)、自由度高、使用方便的界面庫(kù) Htmlayout/Sciter。HTMLayout是一個(gè)免費(fèi)的開(kāi)源界面庫(kù)（核心未開(kāi)源），以DLL的方式運(yùn)行，并提供一個(gè)API的調(diào)用接口和一系列的C++封裝和sample例程。HTMLayout: 快速，輕量、嵌入式的，基于HTML/CSS渲染技術(shù)和布局管理的界面引擎組件，可以高效地解析和渲染HTML網(wǎng)頁(yè)。其幾乎支持所有的HTML元素和CSS3標(biāo)準(zhǔn)，并根據(jù)界面庫(kù)的特征，做了很多有用的功能性擴(kuò)展。
界面預(yù)覽
這里著重地說(shuō)一下在 aardio 軟件中的使用，作者把 HTMLayout和 Sciter 制作成了擴(kuò)展庫(kù), 并且免費(fèi)開(kāi)源, 通過(guò)這個(gè)擴(kuò)展庫(kù)你知道會(huì)一點(diǎn)點(diǎn) HTML 和 CSS 知識(shí)就可以方便地制作各種漂亮的 ui。通過(guò)作者的努力你還可以直接在界面上使用現(xiàn)在最流行的字體圖標(biāo)，還使擴(kuò)展庫(kù)支持了模板功能，你可以像寫(xiě)PHP一樣寫(xiě)桌面軟件的界面HTML，雖然看起來(lái)簡(jiǎn)單的代碼，但用起來(lái)會(huì)非常方便。
效果圖
效果圖
言歸正傳, 我們用aardio一步步來(lái)制作一個(gè)最簡(jiǎn)單的界面。
1、打開(kāi)軟件》新建工程》選擇web界面》選擇HTMLayout》創(chuàng)建工程
字體圖標(biāo)
效果圖
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;
// 加載網(wǎng)頁(yè)
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 這幾個(gè)文件組成的。然后你可以根據(jù)自己軟件界面的需要進(jìn)行調(diào)整。
工程項(xiàng)目
以下是我自己這二天搭建的一個(gè)軟件的界面，就是一個(gè)簡(jiǎn)單的軟件基本框架。
演示圖上
工程項(xiàng)目目錄結(jié)構(gòu)
如果你對(duì)htmlayout感興趣，可以查看 https://bbs.aardio.com/forum.php?mod=forumdisplay&fid=128&page=1 了解更多更詳細(xì)的教程。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
