天天看點

VC++程式員如何做好界面

本屌絲在新春放假期間閑來無事,在各大程式設計論壇溜達了一圈。發現年前的文章中,有VC++程式員在界面開發方面遇到了很多苦惱,有抱怨界面工作不好做的,有抱怨用錯了界面庫的,也有緊急求得技術問題幫助的。看到這些,想起了五年前的我。我那時正好在一家網際網路公司擔任技術總監一職,手下有三個人。那是一家剛創辦的公司,老闆是我國中同學,他在美國呆了幾年拿到EMBA後到國内創業。在一次同學聚會上了解到彼此工作方向。後面憑借對未來的向往一起創業,他負責營銷和資金,我負責技術研發。我們的目标是開發一款企業用的即時聊天軟體(IM),那時還沒有企業QQ和IMO。我們感覺市場是空白的,而企業需求則是非常剛性的。于是我們開始了美好的夢想之旅!

我之前一直是做伺服器背景底層編碼的,弄過阿裡巴巴的阿裡旺旺的背景,是以背景部分基本都是現成的技術和架構,不需要占用我太多的時間。老闆讓我招幾個技術人員以輔助我的工作。我在老闆的眼裡是技術牛人一個(也許我在他面前把自己吹的太高了),他經常以“大師”稱呼我。(雖然我表現的很謙虛,不過心理還是感覺良好,被别人認可的感覺真好!)。于是我就招了三個懂點MFC的程式員進來一起做IM的用戶端部分。

說實在的,那時我對VC++開發界面真沒有什麼經驗,這三位小弟好像與我挺投緣的,都一緻認為做界面嘛MFC就足夠了。當時,我關注過QT,雖然QT做出來的效果真不錯,但有兩個問題直接導緻我放棄了它。

第一、釋出出來的程式居然要帶上十幾兆的QT支援庫(QTCore.dll,QTGUI.dll等);第二、QT的調用真是奇怪,和MFC完全不一樣的,特别是事件響應,再加上三個小弟對QT也不太熟。是以最終大家都毫不猶豫地抛棄了它。

VC++程式員如何做好界面

MFC做界面很容易,在視窗資源上擺上一個一個控件是所見即所得的,很直覺的。大概做了三個月,登入界面、主界面、聊天界面和設定界面都相繼問世了。灰灰的視窗背景,雖然有點醜,但不影響功能的展示。我拿着這個版本向老闆彙報了。老闆看後感覺很滿意,他很高興地告訴我,再弄一個月,把體積搞小點,界面效果做到QQ的樣子就可以上線了。我信心百倍地表示,一定按時完成任務。我們立即開始了體積的縮小工作。發現WTL在界面和體積上都比MFC要有優勢的多。于是我們邊學邊改代碼。花了一周時間,把WTL都換上了。體積确實如期所願縮小了很多,依賴庫也少了幾個MFC*.dll。不過要把界面做成QQ那樣子,我們幾個不知道從何下手。從網絡上查了查有很多,有破解的,有免費的,有收費的。說實在的,老闆剛創業也沒有錢,有免費的肯定不會選擇收費的了(除非腦子“進水”了!!!)。看到網絡上的評價BCGControlBar挺不錯的,于是Down了一個9.0的版本,還帶源代碼,太令我激動了!

VC++程式員如何做好界面

研究了它的Demo和代碼,發現與我們聊天軟體不太一樣,也找不到用它做IM界面的例子。有個手下提醒我了,他說BCGControlBar是做管理型軟體比較适合,比如Office之類的軟體。現在想來他說的還真是對的。繼續Google上找,發現有一款SkinMagic的換膚軟體,還帶可視化的皮膚設計工具。

VC++程式員如何做好界面

不過小激動了幾下後發現,這個設計工具隻能編輯同一類型的控件外觀,用這個工具換膚出來效果是:所有同類型的控件都長成一個樣子。對聊天軟體來說,有很多控件都需要長不同的樣子。後來終于搞明白它是換膚類界面庫,而我們需要的是開發界面的工具。換膚類界面庫的意思是我們把界面用MFC先做好了,然後用它去換膚,相當于把軟體換層皮,但對自定義的控件和控件的各種布局都無法支援。經過這麼一段時間的摸索後,感覺網絡上界面庫初看上去還不錯,但真正用起來會發現很多問題。一晃一個月過去了,老闆來問我開發進度了,心中頓生很大的壓力,開始感覺到界面沒有我之前想象的那麼簡單!在界面上沒有大的進展,我讓老闆再給我一個月時間。雖說我之前沒有太多的界面開發經驗,但我感覺自己的技術功底是比較紮實的,加上這幾周對界面庫的調研後發現,界面庫的東西其實也蠻好了解的,而且也不存在什麼特别高深的東西,不就是繪制圖檔嘛,我心中有一種莫名的沖動:我也開發個界面庫出來,把這些網絡上的無能之輩統統“打倒”!想當年我參加全國計算機程式設計競賽還得過名次滴,我還不信搞不定它了!

在Windows上做界面,說白了就是做控件自繪。我安排手下三個人各做5個标準控件的自繪工作,我負責視窗标題欄、菜單欄和工具欄的自繪。剛接手做的時候,真的還挺麻煩的,看了不少的資料。

VC++程式員如何做好界面

幸好在CodeProject上面找到了很多控件的自繪的類,還找到了很多的文章,比如滾動條如何自繪等等。這些文章寫的都是非常有技術含量,後面用在程式中發現還比較穩定的。我們4個人經過1個月的奮鬥終于出了一個草稿版,視窗、控件都實作出了QQ的樣子,不過在某些程式互動操作上還存在一些瑕疵,但我們4個人看看還說的過去。老闆如期而至,用了一下我們的類QQ版IM。他體驗完後給我的評價是如果不操作界面感覺還行,但一操作就感覺有很多問題:界面卡、閃爍厲害、控件很别扭、位置錯亂…… 我向老闆解釋了其中的緣由,不過他好像并沒有聽進去。從一開始對我那麼高的期望,現在一下子有點失落的感覺。說實在的有種對不住老闆發的工資,還有種辜負他期望的感覺。回到家裡連續幾夜都沒有睡踏實。之前的豪言壯語都已經煙消雲散了。如果繼續沿着我們自己開發的這個界面庫,在短時間内解決掉這些問題是不太可能的,因為裡面有很多的界面細節,而且Windows控件自繪方式的界面要做到完全不閃爍是很難的。知道前路艱險,是以向老闆提出了離開的想法,老闆在幾次挽留後同意了我的請求。

之前的失敗教訓告訴我:第一、不做自己不擅長的,讓專業的人做專業的事;第二、不搞個人英雄主義,成也“英雄”,敗也“英雄”。

前兩年又找了一家網際網路公司,他們家之前就用了開源庫Duilib,效果要比我之前做的界面要好很多。

VC++程式員如何做好界面

不過他們也是遇到了界面更新難的問題。公司想要做自動化測試這塊,但是DUILib是DirectUI界面庫的一種,視窗上沒有控件的句柄,大家都不知道如何讓自動化測試工具找到視窗上的控件和他們的函數。另外Duilib在多主題、多語種和多色調上面都不支援,我們團隊沒有時間去開發這樣的新功能,我第一時間想到的就是找開源庫作者來增加這樣的功能。但是最後的結果是那個作者不願意配合我們做這項工作,不過後來想想也是,他沒有收我們的費用憑什麼為我們服務。但是公司的計劃不容拖延,我必須迎頭趕上。團隊有人提出我們自己修改Duilib的代碼,我否定了這個方案,因為界面的複雜度很高,弄不好又要重蹈覆轍,對公司對團隊都非常不好,而且我們自己的團隊更應該關注自己業務的開發,不能分散精力,讓專業的事情讓專業的人來做才對。後面我又了解到迅雷有一款Bolt的界面庫,效果真心地不錯,也讓我們迷戀了一段時間。

VC++程式員如何做好界面

最後放棄Bolt界面庫的原因有四個:

第一、Bolt界面庫沒有現成的控件,如果我們要做一個自定義的Listview則需要好多天的代碼編寫;

第二、Bolt的學習時間長,成本太高,還需要學習Lua腳本;

第三、Bolt不提供源代碼,對網際網路公司來說,如果用在軟體裡的界面庫沒有源代碼很容易被别人控制,雖然迅雷公司一再地聲稱信譽和商業道德。但對更多企業來說,這點沒有真正的限制作用;

第四、免費的方案,我們之前已經吃到DUILib庫的苦頭了,免費的東西别人就可以坐視不管,而Bolt在迅雷内部隻是一個部門工具而已,并不是一款獨立營運的産品,如果我們以後發現哪裡功能不滿足如何找到負責的人修改和維護呢?這點仔細想想是很可怕的:如果我們的産品已經釋出使用,突然有一天界面庫發生崩潰了,找誰去?哭也沒用了。這個風險太大!

VC++程式員如何做好界面

後面通過百度搜尋找到了幾家收費的界面庫,UIEasy的DSkinLite,UIPower的DirectUI,Bodsoft DirectUI Library。初步的映像是UIPower的價格是最貴的。

其他兩家的價格優勢是很明顯的。幾千到一萬之間。後來了解到UIEasy的DSkinLite與SkinMagic是差不多的,是以它被放棄了。

VC++程式員如何做好界面

UIEasy也有DirectUI,但試用下來感覺是個半成品,是以也不去考慮它了。和老闆商量後,最後采購了Bodsoft的DirectUI,最終以9700元拿到了産品和所有的源代碼。

VC++程式員如何做好界面

本以為找到了界面的娘家了,可惜後面的事情令我不堪回首。之前答應我的服務後面幾乎沒有怎麼兌現。界面庫中Bug非常多,每次找他們修改還找理由說是我們使用上的問題。我當初非常氣憤,決心要訴諸法律,但我轉念一想,如果這個事情鬧大了,對我自己也不好,至少也有失察之責,弄不好我又得離職,是以我後面就忍了下來。真想不到搞個界面這麼麻煩啊。我當時心裡在琢磨,Bodsoft應該是個小公司,否則不會這麼輕易地幹出如此拙劣的服務。我想以後有機會要過去看看,會會這些不講信用的人。這次的采購經曆又讓我知道了購買重要東西的時候必須上門視察一下,否則吃了苦頭隻能往自己肚子裡咽。

選擇Bodsoft有我對價格的考慮,現在發現不能因為價格而草率決定誰适合。作為使用者來說,說實在的,要從網站上去對比真的很難比出誰好誰壞,隻有來真格才行。能選擇的也隻有UIPower了,它當初因為價格太高第一個被我們排除出去的,現在又要重制拉回來重新評估,沖突複雜的心情難以言說。

這次老闆和我們開了一個會議,檢討了幾點:

第一、在界面開發上進度延誤的太嚴重了,必須以最短的時間追上來,市場不等人;

第二、采購東西要講究成本效益,而不是一味地追求便宜;

第三、界面方面之前的預算重新弄,根據市場行情來,不再自己搞一套心理預期。有了老闆這個底子,我心理有譜了。

正所謂吃一塹長一智,要讓我相信網絡上的誰現在都是不可能的了,必須通過技術和法律手段來確定合作的結果,我不想再失誤一次,這次必須成功!我讓手下把界面中遇到的問題和未來需要的功能都列了一張表,作為我們與UIPower溝通的主要内容了。我們自己制定了幾個合作原則:

第一、UIPower必須針對我們關系的問題提供可以運作的Demo;

第二、涉及到定制這塊的,必須有詳細的報價單;

第三、把所有的要求列入合同并确定具體的懲罰措施;

第四、必須拿到DirectUI的所有源代碼。

第五、必須到UIPower辦公現場實地考察一下,耳聽為虛,眼見為實。

以上的原則從技術和法律兩個層面上進行了未來結果的保證;

我們根據以上幾個原則與UIPower進行了接觸,最後達成了合作。合作過程還算順利,但也暴露出了一些問題,比如他們在客戶配置設定時間上有些令人不太滿意,但反過來想,人家客戶數量多忙不過來也很正常。我們希望他們能第一時間處理我們的問題,但很多時候不能如我們所願。不過他們承諾的三天時間解決問題,一般都能按時傳遞給我們。

現在回過頭來總結一下:

如果你對界面真的非常感興趣,并且有充足的時間,那麼我建議你多看一些開源庫,然後開發屬于“自己”的界面庫,這樣做的好處是,你對自己的界面庫了然于胸,最好不要拿免費的開源庫直接使用,因為免費的東西一般不會有完善的後期維護和及時的代碼更新,這樣的話一旦出現Bug,你就不知道如何迅速修改它。自己開發的界面庫畢竟是經過精心設計和思考的,是以每行代碼都是非常清晰的。這種方式的前提是你得對界面開發很在行,技術功底也不錯,有足夠的時間和非常平靜的内心,一般需要堅持1-2年。

如果你隻是使用界面庫的話,免費的東西首先我不建議你選擇,主要原因就是你沒有付費就得不到相應的技術服務,一旦出了問題(出問題的機率在90%以上)你會感受到孤立無助,徹底“崩潰”。至于收費的東西,也要擦亮眼睛仔細看看他們做過的成功客戶,最好實地考察現場拜訪,參觀一下現場的辦公環境。做界面庫的“皮包公司”特多(其實不光是界面庫方面,做軟體工具的很多都是這樣的,我之前接觸一個報表工具公司的也是如此。),在網絡上實在無法搞清楚公司實力如何。公司越大,售後服務相對會好些,公司太小或沒有公司,售後服務如何保證?這是吃到苦頭以後總結出來,希望能幫到與我差不多的屌絲們。

回複:weiym

呵呵, 支援下, 以前我個人也寫過一套界面庫 ,現在開源了:

http://www.cppblog.com/weiym/archive/2012/07/03/181307.aspx

寫界面庫要細心 + 耐心, 很多界面庫看起來很炫, 但是真正用起來問題就都暴露了, 不是閃爍就是不支援鍵盤操作, 支援MSAA/UIA的就更少了.

回複: zs8861

樓主,我這兩年一直在用VC,然後也找了很多很多的VC的界面庫,各種不好用,後來一個項目用上C#後,我找到了一個C#的界面庫DevCompenents.DotNetBar,國外的一套控件庫,特别好用,網址是http://www.devcomponents.com/,CSDN的下載下傳裡面也有很多破解版,可以Down下來用用看,我現在的開發模式是,底層用C/C++,上層UI用C#,C#開發界面特别友善,給你看看他們的其中一個Sample吧。

這是DotNetBar的可用控件,我使用的是CSDN中下載下傳的破解版,經過快一年的使用,感覺十分穩定。

不過也看了看他們的licence,貌似也不算貴。

回複:fryhunter

樓主,頂你。文章寫得很好。我不是說你對界面庫方面的經驗。我現在要麼flex繪制界面,要麼C#繪制,這方面已經真的成為了無壓力的問題了。

你文章中的經曆,讓人能深有感觸。我們做軟體的,總是會忍不住樂觀,忍不住去英雄主義,最後坑的都是自己。你在下家公司對于問題的解決就很到位。我們要的是解決問題,不是證明誰技術牛逼,如果盲目地去推倒重來,隻會壞事。

謝謝你分享

回複:LXZ_2008

别人都以為騰訊的UI很簡單,就像别人懷疑微軟的技術那樣。

就算Jquery的源碼擺在你面前你都不會去看那樣。

跟這樣的老闆混,實在沒意思。

回複:c10682

HTMLayout很不錯,完全免費的界面元件,官方提供了很多VC++的範例,

而且成功的案例也很多,例如諾頓、Realplay等,使用的又是傳統HTML + CSS + 部份CSS3, 原生支援jQuery相容的CSS選擇器文法。

仿iPad界面,點這裡下載下傳完整源碼

VC++程式員如何做好界面

仿360界面, [url=http://www.aau.cn/thread-8519-1-1.html]點這裡下載下傳完整源碼/url]

VC++程式員如何做好界面

回複:shendl

寫界面為什麼還要買第三方庫?

自己用現成的控件改改不行嗎? QT支援qss換膚。flex,swing也支援類css的文法換膚。

     自己用畫布繪制定制控件也很容易。

如果類QQ的界面都喊難,那讓寫遊戲的情何以堪???

    界面開發,就3個字:MVC模式!    很簡單的。

html頁面上的界面開發比VC受限更多。 jQuery不照樣能夠實作很多NB花哨的界面?   html5就不強了!

    都2013年,界面還是個事嗎?

回複:c10682

适用的目的不同,一般的共享軟體,1MB都是問題,更不要說10MB了,

這不象企業軟體,做的體積越大可以賣的更貴。

遊戲的界面與UI界面完全是不同的技術,

你看遊戲他的畫面做的很炫,可是做界面一樣難,

是以很多遊戲裡都用了HTMLayout做UI.

至于HTML5啥的,軟體界面與做網頁完全是兩回事。

除非軟體準備帶上20MB的webkit核心,不然至少XP上支援不了HTML5,

用JS來做傳統控件,看看dojo做出來的界面有多卡,jquery ui做出的的有多醜就知道了。

bolt的免費是有保留的,其他各種UI庫都是自家的專有文法,

本身就要投入相當的學習成本去别人特定的文法,而且還不能真正自由免費的使用。

做桌面軟體的話比較推薦HTMLayout,這個庫久經考驗,而且是真正的完全免費的。

使用的又是傳統的HTML,CSS文法,部份CSS3,寫個漂亮的界面非常快,而且運作速度也快,非常好用。體積也很小(不到1MB,打包後也就幾百KB)

官網的介紹:“HTMLayout被安裝在超過6,700,000 台電腦上,使用在不同的公司不同的産品中。這也意味着每天有大約43,000個使用者下載下傳并安裝以HTMLayout開發的産品”

回複:waterflier

久不上CSDN了,在Bolt的QQ群裡看到了這個文章的連結,作為Bolt的作者(目測本帖裡出現的第一個當事人),我有必要解釋和澄清一些樓主的疑問(其它庫話題我就忍住不說了)

1.Bolt的設計目标是一個可以開發各種UI的核心,是以目前對Bolt使用者的假設是“UI開發者”,而不是最終的産品項目經理。很顯然lz的團隊在UI開發上并無經驗,但有需要在短期内完成需求,是以肯定要傾向于選擇界面外包開發服務。這個例子裡,lz的界面外包服務開發商就是我們的目标使用者,使用Bolt可以極大的提高他們的生産力。

2.Bolt的使用門檻是不太适合"完全的新手",隻是想通過一個demo的學習,或者在已有的項目裡添加幾行代碼就做出"漂亮"的界面,Bolt 對他們來說确實太難的。關于為什麼Bolt會使用這樣的思路,我們的官網上有一篇文章(http://xldoc.xl7.xunlei.com/0000000018/00000000180001000020.html ),仔細的讨論了Bolt與傳統的提供一打控件的界面庫的不同。

3.一旦了解了第二點,對于樓主的困惑"Bolt不提供源代碼,對網際網路公司來說,如果用在軟體裡的界面庫沒有源代碼很容易被别人控制,雖然迅雷公司一再地聲稱信譽和商業道德。但對更多企業來說,這點沒有真正的限制作用"就有了邏輯上的一個類比答案: 做網站的同學需要關心浏覽器是否開源麼?(當然迅雷也有開源的計劃,隻是會從一些更基礎的項目開始)

4.lz擔心的第四點我的回答是:Bolt是迅雷所有用戶端産品依賴的核心,大可不必擔心無人維護和品質問題(現在bolt的文檔不能和msdn比,但也相當豐富了)。引擎的崩潰我們比你着急。。。 

最後很多人質疑Bolt的免費态度,我隻能說打消這種念頭最好的方法就是加入到Bolt的開發者社群來(bolt.xunlei.com/bbs),感受幾天就自然明白了。而且現在Bolt的授權申請,幾乎就是毫無限制的一個君子協定,隻對使用者有利。

P.S 對于所有嘗試過Bolt并在使用中提出過問題的人,我們都會及時回複,有意見和疑問請和我們聯系:) 再次感謝樓主對Bolt的意見和關注。

回複:eyerr

https://code.google.com/p/duilib/

duilib BSD許可開源的,很不錯的非常小巧,基于 viksoe 這個也是很不錯的。

不怕體積大那就用CEF( Chromium Embedded Framework ), 20MB,用 chrome的webkit核心做界面,支援HTML5,完全的真正的免費哦,這個爽,仔細看看現在很多軟體如QQ,有道都用到了這個庫,裡面能找到 libcef.dll

用HTML5,JS寫界面,通用的技術多好。

回複:Kaile

用html css 做桌面産品的桌面,對于我真的不習慣,個人還是習慣拖拉控件的方式,在IDE裡做。

html做界面,友善确實友善,不過,本人總擔心某些功能不好實作,可能還需要依靠JS。

比如工具欄上帶combobox,下拉菜單上帶公司的LOGO圖檔,這些功能用BCG很容易,HTML容易嗎?至少 我沒看過

回複:c10682

UI其實分為很多種:

1. 傳統UI、以及在此基礎上延伸出來的标準庫,例如BCG。

2. Direct UI 上面列出的已經很多了

3. Web UI 而這個裡面又分為很多種,有HTMLayout這樣使用了HTML,CSS的文法但本質還是Direct UI的引擎,也有使用IE核心等傳統浏覽器引擎的方法,如果使用CEF,或者IE10核心還可以支援HTML5。  

這幾種界面庫沒有互相替代的關系,而是根據不同的界面需求,知道他們的優點、缺點選擇不同的技術。

例如你做類似office的界面,那可能BCG非常适合. 而做QQ這樣的界面可能就是 Direct UI 更合适。

至于你說的隻是一個工具欄帶上combbox,那我告訴你,小小的HTMLayout可比BCG做出的的效果漂亮太多,而且比BCG的用法要簡單太多,即使是ribbon界面用HTMLayout也可以輕松搞出來,HTML排版的強悍是傳統UI難以望其項背的。

至于說HTML,CSS容不容易,能學會其他程式設計語言,這種東西頂多就是一周可以玩的爛熟的東西。

而且未來是web的世界,學這些技術肯定是很好的投資。

回複:Kaile

LZ的貼子如果一定要寫個中心思想的話那就是最後選擇的DIRECTUI界面庫最好,産自UIPOWER。

我特意去看了下UIPOWER的界面視訊,優點因為我沒有試用過,不清楚,缺點方面,感覺最大的缺陷是,開發必須要使用COM。 COM比較繁瑣,大家都知道。 BOOL型 要用VARIANT_BOOL, 建立一個按鈕還要帶一個全球唯一UID,長達32個字元。 

這個缺點不知道其他公司能不能接受,本人是很難接受。

現在希望能找到這樣的一個C++界面庫,既提供一些複雜的控件,類似于BCG這樣的,又能友善地添加一些特效,如半透明,透明,漸變, 反轉,發光,旋轉,簡單的動畫,滑動,淡入淡出,百葉窗等等。

最好還能跨平台。

這樣的界面庫不知道有沒有?

回複:waterflier

在開發bolt之前,我也仔細考慮過用html5來建構界面,但最後得到的結論是“這樣不行”(無意貶低htmllayout和CEF)

我的觀點是,html5這種技術曆史包袱太重,導緻解析器難以小型化和高性能化;另外html本身的設計目标是為内容展現進行優化的排版,用來做UI有一點“用老虎鉗子敲釘子”的感覺:能敲,但不太順手。

回複:

樓主,覺得金山開源界面bkwin庫如何呢?

回複:LiveALearn

看來樓主在這方面碰了不少的壁,花了很多心思,寫得不錯。

另外推薦一下dev的界面庫不錯,可以看看。

回複:fengsuiyingdong

剛用Codejock.Xtreme Toolkit開了了一個MFC的界面應用軟體

此文章來自于【http://bbs.csdn.net/topics/390379682】

繼續閱讀