從事Winform開發很多年了，由于項目的需要，設計過各種各樣的界面效果。一般來說，運用傳統的界面控件元素，合理設計布局，能夠設計出比較中規中矩的標準界面；利用一些換膚的控件或者部分界面組件，能夠設計出相對好看一些的界面效果，如以前很盛行的ActiveSkin、IrisSkin和DotNetSkin等，這些能夠對傳統的界面元素進行換膚，確實比標準灰色的界面控件好看了很多。不過隨著界面控件的組件發展，目前一般傾向于是用較為大型的控件組，他們除了提供設計得體的界面控件外，還提供了非常多種絢麗多彩的界面樣式供選擇，如、NetAdvantage、DevExpress等大型界面控件組。

無論界面設計如何變化，一般基本原則都是為客戶提供直觀、易用、體驗效果較好的界面效果哦，從Office的發展歷程我們也可以看到整體的界面效果趨向，從開始的標準控件到目前的Ribbon窗體，從單色調變化到絢麗多彩的界面樣式，都給我們提供很好的界面設計參考，大型的界面組件也是模仿這一趨勢。言歸正傳，我們來談談詳細一點的東西，目前我趨向于采用一種基于Ribbon樣式的界面，以及一種基于傳統界面結合OutLook樣式的界面設計。

一、基于Ribbon樣式的界面設計

以上的界面樣式，是一種比較大氣、符合Office界面效果的界面布局，通過把不同的功能塊集中在不同的面板上顯示，確實簡潔、美觀很多，本文不重復介紹該界面效果的優劣，我們主要來集中看看下面的另外一種界面效果。

二、基于OutLook樣式的界面設計

其實OutLook樣式很早就有，也可以在很多公開的控件組中看到，如果僅僅是追求部分的OutLook界面效果，而不是整體性的方案，那么CodeProject上的這款開源Outlook組件，估計是其中的佼佼者。不過由于需求的是整體性效果，而且還要考慮更多控件界面樣式的一致性及美觀性，因此我們還是基于DevExpress界面組來設計這樣的OutLook界面效果，會顯得更加美觀大方一點。界面效果如下所示。

以上通過把一個系統很多相關的功能模塊放到一顆樹上進行分類展示，對于一個比較復雜的人力資源管理系統或者其他復雜功能的系統，也是一個比較合理的布局方式，另外OutLook工具條還是可以隱藏起來，節省右邊多文檔界面的數據展示空間，這樣整體還是比較合理及美觀的。其中右邊的布局，還可以通過SplitContainer方式把它分成多個模塊，然后客戶想哪個數據顯示面板大一點，拖動一下就可以了，這樣不至于數據比較多的時候，導致顯示布局不好的情況。下面我們來介紹下如何實現以上的界面布局效果。

1、創建一個基于DevExpress.XtraEditors.XtraForm基類的窗體。如下代碼所示

public partial class MainForm : DevExpress.XtraEditors.XtraForm
    {
        public MainForm()
        {
            InitializeComponent();
        }
    }

2、在界面設計中，在DevExpress工具箱Navigation & Layout里面拖動添加一個BarManager控件到窗體中，并刪除默認的工具欄Tools，并添加一些菜單項和狀態條數據。如下所示。

3、添加PanelControl和NavBarControl，添加一些測試功能按鈕。

由于我們需要使用MDI多文檔界面效果，因此先設置Mainform的IsMdiContainer屬性為True。

然后添加一個PanelControl，設置其Dock為Top布局，為該控件ContentImage設置一個背景圖片（事先用ＰＳ設計好，保存為png格式即可），添加幾個小Lable，設置其的圖片和文字。

最后拖入一個NavBarControl控件到界面中，設置其Dock為Left布局，通過控件的右鍵菜單上的“Run Designer"進入設計界面，先隨便添加一些NavBarGroup和NavBarItem項目，粗略設置得到界面效果如下所示。

注意，在NavBarcontrol里面，默認是沒有一個Panel可以添加一些特殊的控件，如樹、按鈕等，默認只有BarItem對象可以添加進入。為了在一個NavBarGroup里面添加這樣的控件，需要修改NavBarGroup的屬性才行，如下所示。

4、添加DockManager和XtraTabbedMdiManager 控件實現多文檔布局，其最終將以Tab方式進行展現。

繼續在上面的窗體中添加DockManager控件和XTraTabbedMdiManager控件，這兩個控件可以實現在右邊以Tab方式展現多文檔布局，這樣對用戶操作來說，可以一次性打開多個窗體進行操作，方便很多，也必將美觀，是一種常見的布局展現。為了在窗體激活的時候，在頂部顯示關閉按鈕，其他的不顯示，那么需要設置XTraTabbedMdiManager控件的ClosePageButtonShowMode=InActiveTabPageHeader即可實現了。最終Tab效果如下所示。

以上就是我設計的一個系統界面的具體操作流程，其實很多時候，介紹總是很快，摸索總是很慢，這個就是知識積累的效率提升。當然，要設計好一個系統界面，除了考慮界面的布局美觀性、還要考慮圖標的協調性、還有就是整體的框架，要可以比較好的適應這些布局控件的操作，不能太過臃腫或者難以閱讀。

你可能感興趣的文章

• 軟件界面設計三大流程
• 界面設計基礎原則總結
• 10款最佳用戶界面設計/網站線框圖工具介紹和比較
• 20個經典iOS界面設計案例激發iPhone應用UI設計靈感