桌面程序界面設計分享

這幾年專注於Web開發，Web界面設計的心得在這篇文章中已經與大家分享 
做項目時，如何做比較美觀大方的數據輸入窗體 

今天分享一些做桌面應用的界面設計心得體會。 
費話少說，一圖勝過千言萬語。一邊上圖，一邊分析，有些分析可能不恰當，歡迎批評指正。 
1 對於常見的小工具，界面一般是這樣的模式 

如上圖，這是一個自動生成分頁存儲過程的工具。 
最上面是Banner,標明當前窗體的名字，是做什么用的。窗體的工作區用GroupBox把相似的控件圍起來，以強調他們的相關性。 
有時候會給整個窗體加一個背景圖片，使之看起來美觀一些。 
這種模式的窗體在MS的的產品也很常見，如下圖 
 
既然MS推出它的產品在先，我的小工具在后，可以說是在模仿MS的界面風格。 

2  SDI/MDI風格的界面及其演化 
這種風格是受VC++的影響. 在學習VC++時，文檔/視圖結構的單文檔/多文檔界面非常普遍，MS自己的很多小工具也是這種風格。 
如下圖，自己折騰的源代碼編輯器。按理說，源代碼編輯器是需要語法高亮功能的，這個工具確實沒有加語法高亮的功能，不過這不是討論的重點。 

如今，這種風格的界面不再流行。我認為，SDI/MDI最大的問題是不能保證前后窗體操作的邏輯性，而且窗體前后重疊，不方便同時操作多個文檔界面。 
這種界面的改進之處是使用Tab控件來取代多文檔風格，如下圖 

這個工具的路徑是C:\Program Files\Microsoft SDKs\Windows\v6.0A\Bin\mageui.exe 
或者改成浮動式的窗體布局，如下圖 
 
這個程序是一個代碼生成器，左邊的窗體是可以浮動的，可停靠在主窗體的左邊，幾乎不占用空間，讓用戶操作時的活動區域最大化。 

3  比較復雜的工具程序的界面 
這種類型的程序，提供的功能比較多。但它不把功能大量的的放在菜單中，也不把它放在工具欄中，而是采用一顆樹控件，按照功能的區分，直接放在用戶操作面板的旁邊，可以隨時看到，減少查找。 
下圖是MS的WCF編輯器的界面，按照左邊的樹，可以很快的查看和操作配置文件中的WCF相關的選項。
還有企業庫的配置文件編輯器，如下圖,也是相當的方便。 

扯句閑話，如果.net Remoting技術也提供類似於WCF一樣的配置編輯器的就更好了。盡管VS IDE有智能提示，
還是有些不方便，每次編輯remoting的配置文件時，總免不了要查閱MSDN。 

受上面界面的啟發，我的一個小程序的界面是設計成這樣的  

這是一個客戶管理的小軟件。左邊的樹控件按照功能分類，菜單中沒有放太多的功能，大部分功能的操作向導都放在這顆樹中，簡單直觀。 

4  Ribbon風格的影響 
Office 2007發布以后，這種風格的界面開始流行。連老外開發的UI庫，也大肆宣傳這種風格。 
  
如圖，這也是一個文本編輯器。這種風格的界面看起來很清爽，而且現在網上有很多免費的Ribbon庫。 
對於在Win Forms使用Ribbon控件，我一直有個問題沒解決。只要是啟動帶有Ribbon控件Win Forms窗體，這個窗體會變得很慢很慢，有時移動一下窗體都可以看見移動的痕跡。導致我很少使用這種風格的界面。曾嘗試過MS的WPF界面框架，它也支持Ribbon風格，實現起來比Win Forms簡單，性能也不錯。 
另外，Outlook 2003的界面也是經常被模仿的對象，上面那個客戶管理的小軟件，多少也有模仿Outlook的嫌疑，它和Outlook 2003界面的的區別不大。  

5  向導式的主界面 
如下圖，該軟件界面是金蝶KIS的主控台的界面 
   
如果一個系統的功能很多，怎樣設計一個友好方便的導航就顯得特別重要。 
以Office 2003中的EXCEL，WORD為例，功能太多了，這些功能都分布在菜單和工具欄中，找起來不容易。
即使是熟練操作WORD的用戶，有時候也會為一個功能在哪里，死活都找不到而苦惱。
WORD 2007意識到這個問題，Ribbon風格的界面以功能為主，把相近的功能都放在一個RibbonListItem 集合中，
里面再嵌套具體的控件，如下面的代碼所示 
RibbonListItem listItem = new RibbonListItem(new RibbonLabel("Recent Documents")); 
rightPaneItems.Add(listItem); 
rightPaneItems.Add(new RibbonListItem(new RibbonSeparator())); 

為了讓你對這種模式的界面有更深刻的體會，我再舉幾個例子。 
這些界面是我平時上網時收集的，不是我們公司的系統。 

很明顯的左中右三欄結構，操作起來是不感覺得心應手呢？ 
再來看一下業界著名的殺毒軟件，諾頓系統的界面 (修正，網友反映這個軟件不是諾頓，我查到它的管方網站在http://www.eset.com.cn)

和上面的是不是相似呢？ 

說到殺毒軟件，看看同行金山殺毒的主界面,這是2001年的版本 

經過一年的演化，看看下面的變化 

再經過一年的變化，如下圖 

經過兩年多的演化，這個界面很明顯，比上面兩個用起來要舒服很多. 

也許您的電腦中用的是卡巴斯基。我也上一個圖，和上面的作個比較，體會一下界面設計的演變。 

話題扯遠了，最后上一個數據庫管理系統的主界面，這種界面模式被大量的借鑒，堪稱經典。 

每做一個工具或程序，我會把AssemblyInfo.cs寫好，用圖標提取器（如下圖）為我的軟件配上一個漂亮的圖標。
可以放icon的地方，盡量放icon，再配上tooltip，這種小技巧使界面增色不少。 

如果是做桌面開發，強烈推薦下面的工具，用它可以找到Windows系統附帶的很漂亮專業的圖標，
也可以直接從原生的Win32格式（相對於不是.NET PE格式）中提取圖標格式的文件 

  
使用這個工具提取別人的程序的圖標，可以算得上是一種破解(hack)技術。做商業應用的時候，還要考慮好版權的問題。