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

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

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

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

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

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

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

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

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

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

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 控件實現(xiàn)多文檔布局，其最終將以Tab方式進行展現(xiàn)。

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

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

你可能感興趣的文章

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