[畢業生的商業軟體開發之路]Windows表單設計概念及原則

來源:互聯網
上載者:User
   近期開始接觸到在校學生、高校實習生和畢業生,在此說一下筆者對這些徘徊在職場門口的學生一些建議,希望能給這些初學者進入軟體開發行業帶來一些協助,使得畢業生能更順利的進入軟體開發公司開始職場生涯,人生來一個完美的轉彎。
---------------------------------------------------------------------------
 

Windows表單設計概念及原則    本節介紹一下Windows表單設計中的一些概念和原則。 控制項的名稱    當開發人員在表單中新增一個控制項時,系統會給這個控制項設定預設名稱,比如對於Label控制項,其預設名稱可能為lable1、label2等,對於TextBox控制項其預設名稱可能為textBox1、textBox2等等。    如所示,筆者設計了一個“使用者資訊”表單,在預設情況下,各個控制項的名稱如所示。 

    這是一種非常糟糕的表單設計結果。在編寫該表單的C#代碼時,由於無法同時看到表單設計介面,因此很難記下各種控制項的名稱及其功能。當表單控制項比較多時,此時的程式碼的編寫和維護時相當困難的。[袁永福著作權]    因此開發人員應當養成在表單上建立控制項就立即修改控制項名稱的習慣。這樣能有效改進軟體的使用者介面的設計品質,也是表單後台代碼高品質的基礎。對於Label控制項,由於基本上不參與編程,只是在使用者介面上顯示一段不可改變的靜態文本,因此可以不設定Label控制項的名稱,但當在少數情況下,當表單後台代碼需要操作Label控制項的文本等屬性值時,為了提高代碼的品質也應當修改Label控制項的名稱。比如對於下面這個表單,各個資料輸入控制項的名稱設定如下。 

    跟代碼變數命名規則類型,表單控制項也有命名規則,業界主流的控制項命名規則可能有多種,各種規則之間差別不大,筆者採用的命名規則大致如下[袁永福著作權]    控制項名稱一般為表示控制項類型的首碼加上表示控制項作用的字元組成。常用控制項類型和首碼對應關係如下表所示
控制項類型 首碼
Button 按鈕 btn
CheckBox 複選框 chk
ColumnHeader 視圖列表頭 col
ComboBox 組合框 cbo
ContextMenu 捷徑功能表 ctm
DataGrid 資料格控制項 dg
DataGridView 資料格視圖控制項 dgv
DateTimePicker 時間輸入框 dtp
DomainUpDown 數值框 dud
Form 表單 frm
GroupBox 組合框 grp
HscrollBar 水平捲軸 hsb
ImageList 表徵圖列表 img
Label 文字標籤 lbl
LinkLabel 帶連結的文字標籤 lbl
ListBox 列表框 lst
ListView 視圖列表 lvw
Menu 菜單 menu
MenuItem 功能表項目 menu
NumericUpDown 數值框 nud
Panel 面板 pnl
PictureBox 圖片框 pic
ProgressBar 進度條 prg
RadioButton 單選框按鈕 rdo
Spliter 拆分條 spl
StatusBar 狀態列 stu
StatusBarPanel 狀態列地區 pnl
StatusStrip 狀態列 stu
TabControl 分頁控制項 tab
TabPage 分頁標籤頁面 page
TextBox 文字框 txt
Timer 定時器 tmr
ToolBar 工具條 tbr
ToolStrip 工具列 tsp
ToolStripButton 工具列按鈕 btn
ToolStripComboBox 工具列下拉式方塊 cbo
ToolStripDropDownButton 工具列下拉式清單 btn
ToolStripDropDownMenu 工具列功能表項目 menu
ToolStripLabel 工具列靜態文本 lbl
ToolStripProgressBar 工具列進度條 prg
ToolStripTextBox 工具列文字框 txt
TreeView 樹狀檢視列表 tvw
VScrollBar 垂直捲軸 vsb
WebBrowser 瀏覽器控制項 wb
    對於其他非常用的控制項類型的首碼讀者可以自己琢磨或者請教他人,控制項名稱首碼只是一個比較小的細節問題,即使有誤也無傷大雅。[袁永福著作權]    筆者一般使用英文或者縮寫來表示控制項的作用,若沒有合適的英文則採用漢語全拼音或者乾脆用中文漢字,但絕不會用中文漢語拼音首字母,因為漢語拼音首字母很難僅僅從字母上猜出其表示的漢字,而猜測英文縮寫相對容易得多。    如所示,可能有些人使用漢語拼音首字母來設定控制項的名稱,比如“姓名”文字框取名“txtXM”,這是一種不好的控制項命名方式,因為很多時候是實在是難於從拼音首字母中猜測控制項的作用,控制項名稱的低可讀性降低了程式碼的可讀性。 

    因此按照比較合理的命名方式,“姓名”文字框的名稱就採用TextBox控制項的首碼“txt”和表示姓名的英文“Name”組合而成為“txtName”。    一般來說商業軟體不是“一次開發,長期使用”,而是“一次開發,長期修改,長期使用”,因此開發商業軟體需要考慮到未來的修改和升級換代,此時程式碼不但要耐用,還需要耐看耐改,程式碼需要具備良好的可讀性,而給控制項設定合適的名稱就是一個基礎工作。其實除了控制項的名稱,其他的諸如資料庫表名欄位名,表單名稱,程式模組名稱等等都需要遵守一定的命名規範。[袁永福著作權] TabIndex屬性    首先的設定好控制項的TabIndex屬性值。在程式運行顯示表單時,使用者可以按下Tab鍵來切換輸入焦點,而切換順序就依照各個控制項的TabIndex屬性。一般的輸入焦點切換順序按照從左至右,從上到下。因此需要設定左上方位的控制項的TabIndex屬性值為小,右下方為的控制項的TabIndex屬性值為大。但實際開發中還是按照具體功能需求來安排輸入焦點切換順序。    在設定各個控制項的TabIndex屬性值時不應設定為連續的值,比如設定第一個控制項的TabIndex屬性值為1,第二個控制項為2,第三個控制項為3,等等等。採用這種設定時,當未來在輸入焦點順序中插入新的控制項,則會需要修改大量的控制項的TabIndex屬性值。為此筆者建議輸入的各個控制項的TabIndex屬性值不聯絡,比如有10的間隔,此時可以設定第一個控制項的TabIndex屬性值為10,第二個控制項為20,第三個控制項為30,等等等。這樣就為未來插入新的控制項留下TabIndex順序的空間。如所示 

    在這個“使用者資訊”表單設計的例[袁永福著作權]子中,當該表單運行顯示後,使用者可以按下Tab鍵從左至右從上到下的切換焦點。    有些控制項並不能接受輸入焦點,比如Label控制項,但仍然需要為這類控制項設定合適的TabIndex屬性值。因為Label控制項雖然不能接受輸入焦點,但仍然能接受快速鍵,比如在“使用者資訊”的表單設計中,筆者設定第一個Label控制項的文本為“姓名 (&N):”,則程式運行後顯示該表單時,使用者按下“Alt+N”按鍵組合時,Label控制項就感應到快速鍵並試圖設定輸入焦點到自己,由於Label控制項不能接受輸入焦點,因此系統就會將輸入焦點自動切換到Label控制項的下一個焦點順序的控制項上。也就是TabIndex值為20的文字框上。這樣使用者就使用快速鍵“Alt+U”就能快速切換焦點到“姓名”文字框了。    當使用者介面上資料輸入域很多時,這種快速切換輸入焦點的功能是很人性化的,方便使用者使用純鍵盤操作來高速輸入和修改資料,顯得使用者介面做的很專業。若沒有這種功能,則使用者需要頻繁的切換滑鼠和鍵盤來輸入資料,大大拖累的操作速度。    商業程式的使用者介面要求比較高,因為使用者可能好幾年天天面對相同的使用者介面,累計下來會重複進行幾萬次操作,此時使用者介面需要耐看耐用,這需要在很多細節上做好功夫,其中設定各[袁永福著作權]個控制項的TabIndex屬性值就是一個基礎工作,必須花點心思做好。 Z-Index    在WinForm表單設計中有一個Z-Index的概念。表單布局是採用絕對座標方式的,每一個控制項都有Left和Right屬性用於確定控制項的左上方在表單中的X-Y座標。    當表單有多個控制項時,控制項之間可能存在相互重疊的現象,這類似影像處理中層的概念。也就是說一個控制項單獨的佔有一個控制項布局層,多個控制項就會有多個布局層的疊加,而越靠近表單的控制項就越容易被覆蓋,於是從表單開始計算,每個控制項布局層都有一個從0開始計算的序號,這個序號就是Z-Index。    從另外一種方式理解,表單上的控制項布局是不僅僅是X-Y座標系那種二維的,而是三維的,第三維就是Z座標軸,它是從表單向使用者延伸的,控制項是分布在表單和使用者之間。此時可以說使用者是俯看使用者介面,若不注意是不會感覺到第三維的存在。而且控制項在第三維中的座標值就是Z-Index,這個值是從0開始的,不會重複;Z-Index值大的控制項可以覆蓋掉值小的控制項。    我們還可以從第三種方式看Z-Index值,表單對象有一個Controls的屬性,該屬性值可以看做一個控制項數組,表單上所有的控制項都在這個數組中。系統建立表單時,是從這個數組逆向遍曆獲得控制項對象,然後依次放置在表單上,很顯然在數組中靠前的控制項可以覆蓋掉靠後的控制項,於是控制項在這個數組中的逆向序號也可以看做Z-Index值。     實際上其他軟體開發技術中也有Z-Index屬性,比如VB,還有Web開發中才CSS樣式也支援Z-Index屬性值。    Z-Index與其他控制項相關,因此控制項本身不會有Z-Index屬性,而且根據控制項在表單中的布局動態計算出來的。    在VS.NET的表單設計器中,不能直接設定控制項的Z-Index值,但可以使用布局工具條上的“置於頂層”和“置於低層”按鈕來將控制項沿著Z座標軸置於最大值或最小值,也就是沿著Z座標軸行動控制項,使其最靠近使用者或者最靠近表單。    在表單設計中,設定控制項在Z軸上的先後順序也是有一些原則的,那就是重要的控制項需要置前,不能被不重要的控制項覆蓋掉。如所示 

    文字標籤的Z-Index值大於文字框的,這種使用者介面是很不好的,會遮擋文字框中的部分類型,而且也不美觀,因此需要調整為文字框靠前,也就是如的效果。 

    如果使用者介面排版時被迫發生一些重疊遮蓋,也必須保證重要的控制項不被遮蓋。一般來說,若設計人員心中已經知道使用者介面的設計,在表單上從左至右、從上到下的依次添加控制項,控制項的TabIndex和Z-Index值都是不斷增加的,此時做好之後大多就無需調整了。但在實際中設計好的表單經常會添加或刪除控制項,或者大幅行動控制項的位置,此時需要注意調整控制項的TabIndex和Z-Index值。[袁永福著作權]  統一的控制項對齊    在同一個軟體中,甚至同一家企業開發的所有的軟體中,對於表單控制項縱嚮應當採用相同的對齊,可以靠左對齊、置中對齊或者靠右對齊。不過筆者建議靠左對齊。如所示,對於“使用者資訊”表單,控制項設計時採用靠左對齊時表單的運行時使用者介面如下 

    而採用置中對齊時表單運行時的使用者介面如下 

    採用靠右對齊時表單運行時的使用者介面如下 

    對比這三種情況,應該是控制項靠左對齊排版最好,其次是靠右對齊,置中對齊最差。因此一般都是採用靠左對齊方式。[袁永福著作權]    不過不管採用哪種控制項對齊,一定要記住在同一個軟體中所有的使用者介面中採用統一的對齊,不能一個表單採用靠左對齊而另外一個表單採用靠右對齊,這是一種相當不專業的表現。    在VS.NET中統一控制項的對齊是比較簡單的,首先將控制項按照大致的位置布局好,然後選中所有要參與對齊操作的控制項,點擊工具條上的對齊功能按鈕就可。    就是VS.NET提供的對齊工具條。 

該工具條上常用的按鈕功能有

 靠左對齊

行動控制項,使得所有控制項的左邊緣對齊。

 置中對齊

行動控制項,使得所有的控制項的垂直中軸線重合。

 靠右對齊

行動控制項,使得所有控制項的右邊緣對齊。

 頂端對齊

行動控制項,使得所有控制項的頂邊緣對齊。

 中間對齊

行動控制項,使得所有控制項的水平中軸線重合。

 底端對齊

行動控制項,使得所有控制項的底邊緣對齊。

 使寬度相同

設定所有控制項的寬度值等於當前控制項的值。

 使高度相同

設定所有控制項的高度值等於當前控制項的值。

 使大小相同

設定所有控制項的寬度和高度等於當前控制項的值。

 使水平間距相等

適當的水平行動控制項,使得各個控制項水平方向的間距相等。

 增加水平間距

適當的水平行動控制項,使得各個控制項水平方向的間距增加一些,各個控制項的間距增加量相同。

 減小水平間距

適當的水平行動控制項,使得各個控制項水平方向的間距減少一些,各個控制項的間距減少量相同。

 移除水平間距

適當的水平行動控制項,使得各個控制項水平方面緊密的靠在一起,之間沒有間隙。

 使垂直間距相等

適當的上下行動控制項,使得各個控制項垂直方向的間距相等。

 增加垂直間距

適當的上下行動控制項,使得各個控制項垂直方向的間距增加一些。

 減小垂直間距

適當的上下行動控制項,使得各個控制項垂直方向的間距減小一些。

 移除垂直間距

適當的上下行動控制項,使得各個控制項垂直方向緊密的靠在一起,之間沒有間隙。

 置於頂層

使得控制項在Z順序方向變得靠前,不被其他控制項遮蓋。

 置於底層

使得控制項在Z順序方向變得靠後,不會覆蓋其他控制項。
    例如有幾個控制項的位置設計如下 

    此時需要選中這些控制項,然後點擊對齊工具條上的“ 中間對齊”和“ 移除水平間距”按鈕即可達到如所示的設計效果。[袁永福著作權] 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.