軟件包裝周邊製作一覽
作者：張麟
一說起軟件的漂亮和時尚，很多朋友就會聯想起軟件皮膚（Skin）。五光十色的WinAmp和QQ真可謂軟件時代的服裝大師，其“服飾”之多真是令人乍舌，就像走在繁華大街上的時尚靚妹，沒有一天穿得一樣。而就算我們古樸端莊的操作系統老大哥Windows98現在也緊跟時代步伐搖身一變，成了引領軟件“服裝業”的大哥大——Windows XP 了，好多人從Window 2000 升級到XP的唯一原因就是——XP比2000漂亮！等到新一代的Windows——Vista推出，我敢打賭，肯定有一批人爲了安裝這個“有史以來”界面“最酷”的操作系統而升級自己的計算機。
人的美麗可以分爲內在美和外在美兩種：內在美是氣質的體現，而外在美則是着裝和打扮。二者相輔相成，互爲影響。軟件也是一樣，沒有好的代碼和強大的功能當然是不行的，但是就如我們人一樣，如果忽視着裝和打扮也是不行的。就好像參加一個高級的舞會卻穿了一身新款耐克運動服，真的令人覺得不可思議。或許對於人來講這點着裝規則還都是知道的，可是在軟件製作上我們經常會犯這種有趣的錯誤卻不覺得自己到底做錯了什麼。
我是一名軟件工程師，也算是一名美工。可能我的特殊的身份讓我在這個方面體會的更多。在我們很多程序員的眼裏，軟件的“穿衣打扮”根本就是微不足道的事情，更有甚者乾脆就什麼都不穿就登場了。有人說要“憑一身的好功夫闖天下”，這話沒錯，但是我們注意到，合適的打扮總會給你的社交和工作帶來很多方便。比如，一身帥氣的西服，會讓你在談判桌上更容易和別人親和；籃球場上，一雙酷炫的耐克鞋，會引來無數隻眼睛盯着你，雖然你還沒有打球，可能很多人都會覺得你打得不錯。而一身量身打扮的軟件，也會讓人有更好的心情願意接觸和使用。
我想告訴你的是，其實美工並不是你想象那麼的難，也並不是非要有多好的美術底蘊；你總不能在沒有嘗試的情況下就說自己不懂美術吧，呵呵。說句心裏話吧，我覺得並不是我們真的不行，在大多數的情況下，往往在我們準備嘗試之前我們就已經放棄了。好了，如果你有興趣，如果你正在發愁你的軟件爲什麼不那麼受歡迎，如果你想知道一個好軟件還需要什麼，就跟我進行一次愉快的軟件“時尚”之旅吧。
最簡單卻又最有效的打扮方法：軟件美之簡潔美——窗口布局
其實就像很多男孩子喜歡不化妝的女孩子一樣，清純簡單也是一種美；但是有些人恰恰相反，我們總是喜歡在自己的臉上畫蛇添足的塗來抹去。軟件也一樣，明明我們可以通過簡單的方式讓用戶更喜歡這個窗口，卻非要用分辨率300像素，寬度800像素，高度600像素的
巨幅BMP圖片來去渲染。
或許你覺得對美術一竅不通，那麼我也不難爲你，我想第一個提供給你的是軟件外觀設計裏最簡單的又非常容易被人忽視的一種美術技巧——窗口布局。
窗口布局其實非常容易掌握，但是我們總是覺得這不算什麼。我在CodeProject網站上曾經結識了一個國外的軟件製作者，他的細心點撥使我在這個方面有了更多的認識，也瞭解到一個按鈕或者菜單項的移動會給我們的軟件帶來多大的影響。過去的DOS時代，用戶和程序的交互是在一個黑白的屏幕上你一言我一語的方式進行的，不需要什麼佈局，也根本沒什麼佈局可言。現在，隨着Windows系列操作系統的普及，用戶和程序的交互基本上體現在窗口上了。用戶爲了完成操作，都要不停的先打開窗口填入信息，再關閉窗口完成操作。這個過程是非常值得我們合理安排的。我們知道，沒有哪個用戶希望要輸入那麼多的信息，才能完成一個操作，那樣太麻煩了，因爲我們都很懶。^_^
如果開始意識到你在這個方面一點清晰的理解都沒有，那麼請你好好閱讀這幾套窗口布局簡單方法，或許你會逐漸找到你要找的東西。
方法1：讓用戶覺得這個界面似層相識在進行講解之前，首先，我們先看兩個有名的軟件：IE和Foxmail。
我想讀者一定早就發現了，這幾個軟件由是完全不同的公司製作的，但是他們設計的菜單，卻如出一轍。順序都是“文件”、“編輯”、“查看”、“工具”、“窗口”，而最後一個更是跑不了，必然是“幫助”。也許我們早就習慣了。但是請你想一想，這是爲什麼？爲什麼這些個八杆子打不着的公司卻都使用了這麼一致的方式編輯菜單？
其實，我們都是很懶的，用戶往往都習慣使用Windows的菜單和工具欄方式了，也就是大家有了這種依賴性，在接觸新的軟件的時候，不自覺的就會和“我的電腦”窗口對比。如果你的軟件的菜單佈局正好和Windows的“我的電腦”的菜單佈局一致，那麼用戶自然就省去了重新學習瞭解菜單佈局的過程，而且很容易就能上手，用戶自然非常滿意。我經常會接到一些朋友的電話，他們經常發愁如何把如此多的軟件功能井井有條地安排到菜單和工具欄上，有的朋友不想費這個腦筋，直接把各項功能地胡亂連接到菜單項和工具欄按鈕上就完事了。
其實我們是有一個非常好的菜單和工具欄模板來遵循的，那當然就是 “我的電腦”的窗口布局。
這裏有個菜單設計的方法，是那個老外給我講的，我把他給大家分享：首先要把你的軟件功能細分，在一張紙上羅列出這些功能；接着再在另外一張紙上寫上“文件、編輯、查看、工具、窗口、幫助、其他”七個菜單的名字；然後把第一張紙上寫的功能分類到這七個菜單中，同時把沒有子菜單的菜單去掉。
假如經過第一次篩選之後沒有“編輯”菜單，那麼我們將在“文件，查看，工具，窗口，幫助，其他”再進行細分。這一次細分我們主要要分類“其他”菜單了，這是我們軟件自己特色的菜單，分好之後再按照“文件，查看，特色菜單1..特色菜單n，工具，窗口，幫助”的順序重新寫好，這個時候我們就得到了和Windows我的電腦菜單佈局相一致的菜單排列了。
也許你覺得這樣的篩選並沒有用了多少時間，可實際上你卻給你的軟件帶來了一種親和感，用戶更會體會出這樣分類的好處，最終會因爲容易上手而願意使用你的軟件。
其實，這個方法沒什麼新鮮，我知道也許我不說你也會用。但是我想讓你知道，當你製作完一個軟件之後要去和那些地球人使用率最高的軟件的窗口去對比對比。
這個步驟會是非常有意義的，卻不用花很多時間。你的軟件佈局製作的越類似於它們，你的軟件就越具備用戶親和力，這是最簡單又最有效的。所以，工具欄也好，狀態欄也好，你都要不厭其煩的去和它們對比，只要你在這一步做出了認真的努力，好的回報絕對在等着你。
方法2：減少一個窗口裏出現大量的控件有時候，一個窗口裏出現大量的控件真的在所難免，這很可能跟我們的設計有關。但是，有時設計再怎麼優化也逃不了這個樣子。這個時候我們可以用兩種方法來解決問題，但總的前提是：界面控件確實很多，而讓用戶卻覺得好像沒有幾個控件，或者讓用戶很容易的看到自己要找的控件。Windows開發上給我們提供了兩個表面上看什麼意義都沒有，實際上卻非常有視圖價值的控件——多頁窗控件和框架控件。
我知道有很多程序員朋友都不大喜歡用這兩個控件，原因很簡單：沒有什麼實際意義。確實，在編程方面我們根本都不用給這兩個控件寫什麼代碼（當然VC＋＋裏多頁窗編程得寫些代碼）。其實，我們忽視了很重要的問題。編程本身並不是針對數據變化而言的，程序也不是光數據可以完成的。正如MVC（模型－視圖－控制器）結構提倡的，一個好的程序，不但要有好的代碼，還要有好的視圖去和用戶交互。這是至關重要的。而且應該和代碼編程同坐一把交椅。很可惜，它們在很多程序員的程序裏得到的是非常不同的待遇。
什麼時候應該用多頁窗？有個最好的例子，那就是Windows系統裏的文件屬性頁（如圖4），你經常使用的。
我問你一個問題：你覺得這個屬性頁的控件多嘛？呵呵，反正我從來沒有覺得這個窗口的控件多過。要是我告訴你這個小小的窗口有多達50多個控件的話，你是不是會嚇一跳？！這麼多的控件，我們卻並沒有因爲覺得控件多而產生反感，其主要原因就是屬性頁在視覺上的改變使得用戶覺得好像這個窗口控件並不是很多。而在操作的時候，由於很合理地分塊，用戶也能很快聯想到文件屬性的某一個方面會在哪個屬性頁上。如果你有興趣的話，可以試試把屬性頁的全部控件放到一個窗口上，那會是一個什麼樣的壯麗景象！
但是，我們要知道多頁窗是有缺點的，當讓用戶錄入信息的時候我們不宜使用。因爲每換一次多頁窗，用戶都得額外的點擊一次多頁窗，這無形讓用戶的輸入顯得麻煩了。而且用戶也不會把所有多頁窗都瀏覽一遍的，所以在輸入上我們應該使用“框架”控件。因爲，控件多了，難免用戶會找不到，框架可以在同一個窗口裏實現分類，這樣，用戶就會根據框架的名字分類找控件，這樣就使用戶找的速度快了很多。我們打個比方：假如用戶要輸入50個文本框信息，現在他想在某一個文本框上修改，如果沒有框架，那麼他要最多找50 次，最少1 次，平均是25 次。而如果有了5個分類框架，那麼他肯定第一步是從這五個框架裏找到符合的，最少1次，最多5次。下一步是在10（50÷5＝10 ）個控件裏找到那個控件，最少1次，最多10次。這樣，用戶搜索的次數就在2-15次之間裏，平均僅有8 次啊！
請看圖5，我曾經調查了我的用戶，他們對這個窗口的輸入是最滿意的。所以我到現在一直記着，要注意合理的分割控件過多的輸入型窗口。
綜上所述，在有大量的控件的輸入型窗體上，我們應該適當的使用框架控件；而有大量的控件的輸出型窗體上，我們使用多頁窗控件，真是再合適不過了！
方法3：多使用Wizard（嚮導）！
你使用VC＋＋編程嘛？如果你使用的話，你是不是覺得那個AppWizard使用起來非常地爽？你有沒有想過，AppWizard的六個步驟的問題明明可以一口氣讓你選擇好，卻爲什麼要把它設計成六頁？
Wizard可以說是屬性頁的變種，在VB編程裏有專門的控件可以實現， 而在VC++裏我們是使用CPropertyPage和CPropertySheet來實現。我發現，我們很多的國內共享軟件作者十分不喜歡使用這個叫做Wizard的東西。確實，和把所有控件放在一個窗口裏讓用戶輸入比起來，編Wizard確實是麻煩死了。但奇怪的事情發生在VC++和大多數安裝程序上，這些軟件裏Wizard簡直四處都是。
我想我們在使用一個控件之前應該先弄清楚這個控件之所以存在的意義。Wizard其實和上面講的兩個控件一樣，也沒有什麼代碼意義可言。但是它卻一直存在着！Wizard通過有步驟地一步一步收集用戶輸入信息可以使他覺得所要進行的可怕操作簡單了許多，這是非常有意義的。我們編程序的目的不正是如此嗎？那我們幹嗎不使用呢？難道一個窗口裏放了數十個按鈕和下拉菜單你願意一口氣輸入嘛？我不會，我經常會覺得太複雜而放棄使用。所以我們應該多多的使用Wizard。
我曾經和朋友給一些公司製作過報表系統，我的朋友是一個非常有經驗的傢伙，你看他編的報表輸出就是一個嚮導，怎麼看都讓人覺得舒服，簡單。
我想，你的軟件經常會有些功能要通過複雜的用戶交互來實現。請你記住，遇到這種情況不要還硬着頭皮在窗口裏沒頭沒腦地添控件，你應該用一張紙好好設計這個功能的嚮導過程！（尤其是報表軟件，憑我的經驗來講，大部分都應該使用嚮導，除非你不在乎用戶煩你的軟件。但實際上很多公司和個人的開發仍然喜歡把一大堆控件放在一起讓用戶挑）
其他要說的東西：
我們在編配窗體佈局的時候，還要知道窗體上的敏感區域。我們應該把直接和用戶有關的功能放在那裏，用戶只要打開窗口第一眼看到的地方大都在紅色區域，然後再依次去看菊黃色、粉黃色、淺粉色、藍色、綠色。我們抓住這個原則至關重要。
窗口布局有非常多的東西值得我們再去討論和注意，上面三個方法，也是一個引子，通過我的解釋，希望你至少能夠體會到窗體佈局的重要性，並瞭解了一些簡單的方法。
提個建議：每一次在你下載了別人的軟件的時候，你都可以好好的欣賞欣賞，看看它的窗口怎麼佈置的。
爲什麼有的軟件其貌不揚，卻讓你愛不釋手？而爲什麼有的軟件明明實現了功能，卻很少有人使用？總之，隨着你的注意，你的佈局本領就會不斷的提高，而當你漸漸的把這種本領使在了你的軟件上，那麼我相信你的軟件一定會漸漸得到用戶認可的，窗口布局就是這樣的簡
單卻那麼的有價值。軟件的時尚外衣：軟件美之外觀美——皮膚製作
就我所知，設計軟件皮膚好像從來不是程序員擅長乾的工作。不過我也調查過，很多程序員朋友對皮膚的製作還是滿有興趣的。在這個部分，我專門用我製作的一個軟件皮膚爲例，從頭到尾的給你講解一遍。其中包括皮膚的畫法，皮膚的定製和皮膚的嵌入。如果你有興
趣，那麼就跟着我來做一個皮膚試試吧！
工預善其事，必先利其器。我們先談談製作皮膚需要的工具吧。首先我使用的編程語言是VC＋＋，所以皮膚的嵌入軟件，自然也選定是專門製作給VC＋＋的了。我使用的這個軟件叫做SkinMagic，有很多朋友通過各種途徑得到過這個軟件。不過這個軟件是個共享軟件，而且每一個註冊碼對應一個軟件皮膚，收費高達89美元（我曾經買過幾個，吐血！），但是確實非常好使。其實就我所知，很多共享軟件的作者都使用這個軟件（而且也曾經跟我一樣吐過血～）。用它作爲皮膚的嵌入軟件的原因當然是非常地容易製作啦。不過值得慶幸的是這個SkinMagic1.0以前的Beta版本是免費的，這樣我們也是可以用的，你可以到http://www.mono cers.com/jon/SkinMagicSDK_beta.rar去下載。
有了這個工具之後我們還要面有PhotoShop7（以下簡稱PS）來進行皮膚主體的勾畫。
我還要說的是顏色搭配。在這個例子中，因爲我很喜歡橙色，所以自然選擇橙色作爲主體顏色，那麼什麼顏色能和橙色放在一起比較漂亮？這是問題的關鍵，我很幸運，著名的NIKE公司的LOGO爲我很好的解釋了這個原理。
不難看出灰色，黑色，還有白色都是和橙色很好的搭配在一起，所以我們就選擇這幾個顏色作爲皮膚的製作顏色！
好了，開始實戰！
第一步，輪廓與着色
首先，打開你的PS，新建一個文件，寬度爲495，高度爲406，分辨率爲72。然後點擊圖層菜單，新建圖層背景。接着在工具欄裏點擊油漆桶工具，選擇顏色爲R=255,B=0,G=255。用油漆桶工具填充背景。我們這樣做的目的是填充一個固定的背景色，你看過電影的特技拍攝吧，後面放了一幅大藍布，然後演員在那裏擺POSE，最後再用電腦合成。一個道理，我們也是這樣，只不過我們放的是一塊大粉布，哈哈。
下面，我們要繪製一個窗體。在工具欄裏點住矩形工具，會看到出現一個下拉菜單，選擇圓角矩形工具。在大粉布上畫上這個圓角矩形。取名就叫默認的形狀1。
再次使用圓角矩形工具，在剛纔的矩形前畫一個小一點的矩形，這次我們要拖動鼠標的同時按住減號，然後你會發現我們得到一個窗口外框子。
接着，我們點擊圖層窗口，右鍵選擇“形狀1”，點選“混和選項”，分別在“斜面和浮雕”，“顏色疊加”，和“描邊”上打勾。其中“斜面和浮雕”的參數“大小”爲21，“軟化”爲10。“顏色疊加”的顏色爲：R=241, G=112,B=18；“描邊”的顏色和剛纔的一樣，“大小”爲1，於是，得到了我們要的窗口外框！
接下來我們選擇工具欄的矩形工具（這次不是圓角矩形了！）畫一個長方形，這個長方形要比外框小，比內框大。並將新建的這個圖層拖到咱們剛纔的圓角矩形的下面，取名也就叫“形狀2”。
還用上面提到的方法，打開“形狀2”的“混和選項”，在“內陰影”和“顏色疊加”上打勾。其中“內陰影”的參數“距離”爲16，“大小”爲5，而“顏色疊加” 的顏色爲R=102,G=102,B=102，你瞧我們的窗口做好了！
好了，把它保存爲Orange.psd，然後再轉化成BMP格式，我們的窗口皮膚素材就已經做好了！嘿嘿。
第二步，製作SkinMagic格式皮膚！
首先，按我剛纔說的，到剛纔那個網址鏈接去下載一個SkinMagic，然後解壓到你的電腦裏。我們使用的是一個叫做“SkinMagicBuilder”的工具軟件。它在解壓後的SkinMagic的SkinMagicBuilder目錄下，是個可執行文件。
打開這個工具軟件後，我們在Object 菜單裏選擇“Load Image”把剛纔存的那個BMP文件裝載進來。
下一步，我們要把這個窗口做活，所謂“做活”就是使這個皮膚能用於任何窗口。這個過程可能有點麻煩。還是點擊Object 菜單，選擇“Window”的“Frame Window”。在SkinMagic的右側屬性框，把Name改爲“Dialog”。然後我們注意到右邊的Act iveFrame下有九個屬性，翻譯成中文他們是“左上方，中上方，右上方，左邊，中間，右邊，左下方，中下方，右下方”。我們先點擊“TopLeft”，在Image Files裏選擇我們的Orange.bmp。然後你看到，我們畫的窗口已經在這個窗口裏了。最後你在中間大窗口的左上方看到有一個可以拉動的紅點，把它拉開，覆蓋在我們的窗口圖片的左上方。
接下來我們按照和剛纔同樣的方法，把其他八個部分都做好，具體的各個方面參數你可見下表所示。
填好之後，在Tools菜單裏選擇“Test”可以測試你製作的皮膚的效果。一個非常非常簡單的窗口皮膚已經製作好了。我們把這個文件起名爲orange.smf保存起來。
第三步，在VC＋＋中使用皮膚
首先我想聲明，並不是非要有SkinMagic VC才能添加皮膚，本身VC就有皮膚的調用函數的，比如每一個控件都有一個相關消息映射叫做“DrawItem”，在這裏可以對指定的控件裝上皮膚。只不過這是非常麻煩的過程，我不推薦。但是如果沒有更好的辦法，那樣也是可以的。比如當你只想給某個按鈕加上個皮膚的時候，倒是可以考慮。其他情況下，我們最好採用第三方工具。
好了，言歸正傳。我們繼續皮膚製作的最後一步，我們先在VC裏按照MFC AppWizard建立一個基於Dialog的應用程序，取名爲Sample。完全按照嚮導的默認值就可以了。
接着我們把剛纔保存好的Orange.smf以資源的方式添加到項目中去，資源類型寫：“SKIN”，資源名稱爲：“IDR_SKIN”，注意寫的時候一定要加上雙引號哦！
然後我們再到那個SkinMagic包裏拷貝些東西，他們分別是：
把這三個文件拷貝到你的Sample應用程序的路徑下，然後再在VC的Project目錄下選擇“Add To Project” 菜單的“Files...”。把這三個文件添加到工程中。
下一步，我們打開Stdafx.h文件，在裏面添加上一句：
#include "SkinMagicLib.h"
接着，在CSampleApp 類裏添加一個函數，取名爲“InitSkin”。在函數裏寫入：
void CSampleApp::InitSkin()
{
//加載皮膚
VERIFY(1==InitSkinMagicLib(AfxGetInstanceHandle(), "Sample", NULL,NULL ) );
VERIFY (1==LoadSkinFromResource (
AfxGetInstanceHandle() , "IDR_SKIN" ,"SKIN") );
VERIFY( 1 == SetDialogSkin( "Dialog" ) );
}
最後在CSampleApp類的InitInstance函數裏添加上：
InitSkin();
按Ctrl+F5,你瞧，皮膚上上去了！哈哈， 厲害了你！並不是很難吧。
上面我們做的只不過是最簡單最簡單的上膚了。其實，仔細想想：按鈕，菜單，文本框，標籤，菜單，Combo等等一大堆的控件都需要上膚的。不過SkinMagic倒是都提供了，我們的做法也和上窗口皮膚大同小異，這裏我就不再多說廢話了。憑我的經驗來講，一般製作一個完整的皮膚，從PS描繪（有時還需要CorelDraw畫）到最後皮膚放到窗口上大約需要3天吧，主要的問題就是要選好搭配的顏色。如果你說你一點美術靈感都沒有，那我請你和我一樣，找一個非常不錯的廣告圖研究研究；如果你還說一點靈感也沒有找到，那隻能說明你實在懶得可以。^_^
我知道，我們都懶得麻煩，所以我把我在這個例子中做的軟件和皮膚都上傳到了網上，你可以到：http://
www.monocers.com/jon/TestSkin.rar去下載這個例子的全部代碼和圖片。
結束語
也許你覺得，很多東西我並沒有說的那麼讓你滿意，但是我想如果你看完這篇文章就開始覺得要去好好的整理一下你的軟件了，那麼這就是一個好的開端。其實一個好的軟件設計者也應同時是一個不算太差的美工；原因很簡單，就算你不打算製作皮膚，你至少也得能夠告訴人家你需要的風格同時又能看出來人家做的是不是很美觀。我曾經給一個朋友做過皮膚，他總覺得我作的不好（這個我倒沒什麼），後來他乾脆自己做了一個，結果過了兩天，他又來找我了，因爲他自己也不知道到底什麼叫做好看，什麼叫做不好看。
就像我們在不同的場合要注意不同的着裝一樣，我們的軟件也需要穿“漂亮的衣服"，出門前也要“打扮”。我希望你能養成每一次下載了別人的軟件都去欣賞欣賞它的外觀的習慣。不管是外觀也好，窗口布局也好，幫助文檔也好，都去簡單地欣賞一下，時間長了，你就會發現你漸漸地入門了，隨着這種能力的提高，你就慢慢的掌握瞭如何給你的軟件打扮了。我是在我的一個朋友的建議下寫這篇文章的，因爲他的軟件在我們倆的包裝後得到了成倍的下載數量，所以我也想把我這些僅有的經驗跟你分享，希望你因爲我的文章能夠有所幫助，如果真的能給你帶來些什麼，我將非常榮幸。