前言：前面簡單的發(fā)了幾張項目的效果圖。接下來將美工參與設(shè)計的界面發(fā)出來分享。我會盡量分出時間將發(fā)表在TWaver中文社區(qū)里文章一個個挪過來。當(dāng)然里邊其他美文在這不方便拷貝，對UI技術(shù)感興趣的朋友可以進去看看。
對Swing的抱怨和批評從來就沒有停止過。不過從以前的鋪天蓋地，到后來的見怪不怪，到現(xiàn)在的冷冷清清。似乎人們早就已經(jīng)浸淫在無處不在的web和滿天飛的RIA之中，懶得去理會Swing這個老古董了。難道Swing真的到了日薄西山、窮途末路的地步？
大家對待Swing的態(tài)度從來就不缺乏偏見。作為Java的桌面UI技術(shù)，其實它和MFC、VCL、Winform、WPF以及Flex、Silverlight一樣，只是做界面的技術(shù)工具而已，本身并沒有什么不好。只要計算機還用屏幕、鍵盤、鼠標(biāo)來進行交互，這些UI技術(shù)（或其后續(xù)改良繼任者）就會始終存在。無論哪個UI技術(shù)，說到底都是在屏幕上畫圖，本質(zhì)上都是畫點、劃線而已，只是有的用起來復(fù)雜，有的簡單，有的功能強，有的功能弱。不過對于技藝高超者來說，給個郵票大的地方也能跳出激動人心的舞蹈，F(xiàn)lex不就是在Flash這塊郵票上面不停的折騰么？這又和腳下的空間有多少關(guān)系呢？相比Flash/Flex這張小郵票，Swing則給了我們一個巨大的足球場。如果我們還是不能在這個舞臺上吸引更多的觀眾，還是多反思一下自己的舞技吧，就算腳下的場地有點濕滑不平，我們也沒必要喋喋不休。
Swing的設(shè)計的確有點過于概念化，導(dǎo)致結(jié)構(gòu)比較抽象，對初學(xué)者來說確實比較費勁。記得最開始學(xué)習(xí)Swing時，弄個table還要創(chuàng)建什么TableModel，還有個AbstractTableModel，還有個DefaultTableModel…一頭霧水。為什么不是table.addRow(String[] row)就ok么？直到慢慢理解了MVC，理解了更多設(shè)計模式，理解了action和listener監(jiān)聽，renderer/editor機制，UI代理、事件派發(fā)線程…才慢慢理解和掌握了Swing，編程水平也有了很大提高。而回頭再看十年前用VB6寫程序，DIM一個ADO、連接ODBC、拖拽一個文本框、設(shè)置屬性綁定….簡直就是工具的奴隸，一點軟件設(shè)計的內(nèi)涵也沒學(xué)到，不客氣的說真是害了一代人。
人類能發(fā)展在于善用工具。要把各種UI技術(shù)比喻成工具刀，Swing是哪類刀呢？有人說Swing連個TreeTable、日期控件都沒有，真是原始社會（夸張點吧，怎么也算封建社會吧）！那么Swing就是這樣一把刀了？
這把刀實在是嚇壞了不少人。不過一些痛恨Swing的人會覺得很解氣。要說有偏見吧，確實偏見是無處不在的。就像美國人鄙視日本人，日本人鄙視韓國人，韓國人鄙視中國人，中國上海人鄙視北京人，北京人鄙視天津人，天津人鄙視河南人，河南人鄙視新疆人，新疆人鄙視所有人…………..扯遠(yuǎn)了。其實熟悉一段時間Swing后，只要掌握了一些基本的MVC設(shè)計思路和常用組件的使用方法，就會發(fā)現(xiàn)，這把刀可以很鋒利，可以說是“寶刀未老”，而不是“銹跡斑斑”：
不過對于很多非常簡單的UI任務(wù)來說，Swing會顯得很啰嗦、很繁瑣。API浩如煙海，文檔缺乏，一頭扎進去半天出不來。我們頭大，我們發(fā)狂：我要擰一個螺絲而已，你卻給我下面這把刀：
所以，你家里需要準(zhǔn)備一個單獨的螺絲刀，用來擰螺絲；準(zhǔn)備一把剪刀，用來剪紙張；一個刮胡刀，用來刮胡子；一把菜刀，用來切菜；還要一個指甲刀，用來剪指甲。雖然菜刀也能湊合割指甲，刮胡刀剁餃子餡也沒意見（瘋了），但是你顯然不想這么做。所以，別抱怨Flex這把剪刀功能不夠強，Silverlight這個螺絲刀功能不夠多，Swing太復(fù)雜。作為Java平臺的廠商，Sun除了推出Swing這樣的全功能工具刀，還能如何呢？現(xiàn)實世界需求很復(fù)雜，只能盡量全滿足。這就是生活。
雜刀.jpg)
所以，上戰(zhàn)場除了帶上沖鋒槍，扛上火箭筒的同時，挎上GPS，腿上還要再綁上一把刀。程序員也是一樣，多一項技能就是多一項武器，關(guān)鍵時刻一個都不能少，一個武器就多一個生存的機會。
工作原因，使用Swing好多年了。我很喜歡Swing。它復(fù)雜，它啰嗦，它功能強，它發(fā)展慢。不過我還是很喜歡，并在一些項目中使用。慢慢的，積累了一些在項目中使用Swing的經(jīng)驗。不這里先秀一個今天上午還在改的項目界面，希望大家喜歡。
首先說明一下，這是一個免費的ERP產(chǎn)品界面，只是一個原型和Demo，還沒有被最終確認(rèn)。圖上面的功能、模塊、數(shù)據(jù)都是假的，大家不要較真。由于ERP軟件的模塊和產(chǎn)品功能眾多、業(yè)務(wù)邏輯復(fù)雜，程序的界面需要體現(xiàn)“友好、方便、易用”的原則。再加上其“免費”的重要特性，這里選擇了綠色和灰色為基本色調(diào)，以橙色作為主要的輔助色，既不過于死板，也不過于花哨，體現(xiàn)了“綠色、環(huán)保、低碳（好像不太搭邊哦）”的軟件設(shè)計理念。
上圖是ERP軟件的主界面。窗口上下分別是菜單和狀態(tài)欄，左側(cè)是模塊樹，右側(cè)是快捷功能列表，中間是具體數(shù)據(jù)和內(nèi)容的顯示區(qū)域，用多tab方式顯示每個頁面。為了考慮到絕大多數(shù)用戶的屏幕尺寸，這里都以1024*768作為基本尺寸進行設(shè)計和抓圖。可以看到中間的數(shù)據(jù)顯示區(qū)域已經(jīng)不是很寬裕。所以，程序加了一個功能：雙擊中間的tab頭可以將左右閉合，增大中間內(nèi)容頁面的可見區(qū)域，如下圖效果。可以看到，左右區(qū)域閉合后，還會露出圖標(biāo)以及tooltip文字，不影響繼續(xù)使用：
中間的內(nèi)容頁可以顯示任意Swing組件，例如放一些銷售業(yè)績圖、報表、股票圖（ERP里頭不管股票吧，懂行的糾正一下下）之類，例如下圖：
當(dāng)然在ERP系統(tǒng)中，最多的還是各種枯燥的數(shù)據(jù)和報表，這時候表格還是最常見和重要的呈現(xiàn)方法。但是放在咱這里，表格也要做的清新、耐看一點，不能太審美疲勞：
或者，查找一下全球供應(yīng)商或者客戶分布及其業(yè)務(wù)情況：
好了，先上這幾張圖。如果大家喜歡，以后再上傳更多。
做了很多項目和界面，有幾個體會：
界面設(shè)計，一定要“美工先行”。也就是美術(shù)設(shè)計和效果圖的設(shè)計工作要先于軟件開發(fā)去做。在美工設(shè)計的階段，大家一定不要考慮技術(shù)上的問題，別沖上去第一眼就“哎呦，這個不好搞”，”這個圓角和漸變咋弄？“，這是我們程序員的職業(yè)通病。大家是否發(fā)現(xiàn)，光靠程序員自己，幾乎是無法做出真正好的UI？因為程序設(shè)計和藝術(shù)設(shè)計幾乎用不同的大腦部位（具體是前腦后腦左腦右腦我還真沒仔細(xì)研究），而我們程序員擅長的是邏輯思維，對發(fā)散思維的藝術(shù)設(shè)計則基本都“缺根弦”。比如我們寫程序時候，要突出一個數(shù)據(jù)，我們就直接給設(shè)置顏色，先上setColor(Color.red)；難看？換setColor(Color.green)；靠，還不行？你啰嗦不啊？干脆直接setColor(Color.black)了事。你說，這界面怎么能好看。
嚴(yán)格執(zhí)行美工的設(shè)計。一旦美工設(shè)計好了效果圖，程序員應(yīng)當(dāng)”一個像素不差“的把它實現(xiàn)出來，而不要自作聰明的隨意修改，或以”技術(shù)上不好搞“為借口退縮。要把界面設(shè)計當(dāng)做藝術(shù)品一樣對待。記住細(xì)節(jié)才是成敗的關(guān)鍵和真正出彩的地方。上面的抓圖，我們都是把運行結(jié)果抓圖放大后逐個邊框圓角甚至像素比對審核，做到”一絲不差”，這樣才能真正的出設(shè)計精品。
把握”以用為本“的原則。軟件是藝術(shù)，但不是藝術(shù)品，光看不碰；軟件之本在于用。如果脫離了”易用“和”以用戶體驗為中心“的設(shè)計宗旨，一味的追求華麗、花哨，忽視了用戶的使用體驗，則容易本末倒置，嘩眾取寵，結(jié)果自然是一敗涂地。
統(tǒng)一的風(fēng)格。軟件的整個界面設(shè)計要有鮮明的主題，甚至上升到其理念是什么。然后由專業(yè)的美工形成具體的色系，規(guī)定其使用方法，并體現(xiàn)到每個頁面、每個按鈕、每個像素中去。
相信通過這些手段，我們每個人每個團隊都可以制作出高質(zhì)量的軟件界面，讓使用者賞心悅目，讓開發(fā)者心曠神怡，讓老板心花怒放，讓競爭對手心驚膽戰(zhàn)！
后記：
如果大家對以上界面感興趣，我將在后續(xù)文章中介紹本項目的設(shè)計思路、功能、實現(xiàn)方法，以及相關(guān)源代碼。本項目主要用到的第三方的包有JGoodies和TWaver。同時希望通過這一系列文章，能夠讓大家重新認(rèn)識Swing這把刀，用好這把刀，一路披荊斬棘、砍瓜切菜、攻城拔寨、再創(chuàng)輝煌！