Windows程式畫面布局設計概念

這個布局部分有點多，所以可能的話會分幾次來講

基本上您會發現，相同應用的軟件，基本上畫面布局(Layout)都很像，佈局是指什麼，就是您在畫面上放置一些容器，讓框架內可以放置一些您的按鈕或者是輸入欄位，當然也可以是顯示圖片

大概長這樣

這是一個空白的Form

 如下，我加了一個Menu選單，一個狀態列，還有兩個Panel容器，其中Panel上面可以根據我的需要，放一些元件

其中用Panel或者是其他容器(例如ScrollBox，Notebook)，定出畫面的擺放，這叫做布局(Layout)

這裡就直接稱乎布局了

我們常常看到很多舊型的程式，都會有一些相似的布局

我們以C++ Builder為例(這是新版的)

最上方會有一個Menu，再來下面是一些快捷按鈕，左邊是屬性設計，右邊也是顯示一些資訊的地方，下方會有一個狀態列(其中他將狀態列換成自製的)，

基本上C++Builder他的視窗可以到處搬動，這已經是屬於進階部份了，不過基本樣式是固定的

因此就我剛剛提到的那些基本元素，我大概拉一個基本樣式

最上方有一個Menu，下面是一些快捷按鈕，例如按完可以做計算還是幹嘛，總之就是一些按鈕，再來是最下方的狀態列，而中間兩個則是自己設計的框架，我的框架式左右兩個Panel，右邊是放參數的，左邊是主要顯示Client視窗，

基本上您會在很多古早的應用程式，大約Windows XP那個年代，大概都長這個樣子

這是最最最基本的，也就是您完成一個應用程式，假設小到不行，您可以參考這總方式做基本畫面布局，

總之就是很古老的做法就是了，基本上您看到現在的一些應用程式很花俏，充滿了無數的設計，所以這簡單的畫面布局基本上也不算什麼秘密了，要做到像一些大型軟件那樣，其實是很多設計的，絕對不是就這樣弄一個Form，然後全部東西都弄在這裡，就結束了

大型軟件是指什麼，例如您打開近代的Word，C++ Builder，Visual Studio，他們會有一些框架，不同框架放不同的功能，其實您數一數可能也10~20種，您要在一個FHD的螢幕上，規劃10~20種框架，是不可能釘一釘Panel就處理完的，

因此這是一門學問也是一門藝術，但是基本上像這種大型軟件，框架可以到處釘，基本上這是模組化設計了(老實說我也不會)，這就不再我們討論範圍，這一般沒有10來個人同時寫一支程式不太可能完成，我這裡會介紹的比較偏向於一個人能獨自完成的應用程式

如上面您看到我弄的框架，基本上很死，框架都釘好了，基本上是無法做任何變化的，

我們這裡談到的設計，牽涉到UX(User experience design )，也就是使用者體驗，

說他簡單，也很簡單，其實一個重要意義就是您的畫面如何設計，可以讓使用者操作起來最舒服，最方便

但是說他難，也很難，我們一支程式通常是從無到有，一般您在公司裡接案子，客戶不會一次就將所有要做的功能都跟您說，因此您的介面會一直增加新的東西

您會發現做一做，需求一直進來，您就加入很多東西，最後都塞到同一個地方，例如剛剛的圖，只有6個欄位，那要您的欄位一直加一直加，加到了20多個，通常來說，欄位太多要設定，如果您沒做分類處理，或者做一些分業，使用者會用起來很不舒服

假設您一支程式有一個功能，有18個參數可以控制，您以一個程式設計師來說最簡單的就是將欄位照順序分在一起

這裡就不做命名了，總之就是不同參數的欄位，這一般有接過案子才能體會，我也不知如何表達，總之您就把他想成您有18個欄位可以控制就是了

基本上您沒做分類，要懂怎麼操作您的軟體看了就不想學了，

所以我們先做基本分類，好啦，就假設我這個程式可以用來設定動物身上的顏色，

假設相關的顏色欄位，狗有6個，貓有4個，鳥有8個，

我們做一個索引如圖

這樣做簡單歸類，操作員就知道假設他要設定狗相關顏色參數，就改納六個欄位就好了，依此類推，我們程式設計目的做一支好用的程式給使用者，而不是只是為了完成功能賺錢而添加新的功能，這在一些比較落後的公司都不注重這個，往往就要啥參數就加啥，然後放一大堆，基本上要是我是使用者，我看到就不想用了，更別說對您的軟體有興趣，

當然講這樣好像太淺了，很像我是白癡一樣，所以我就再衍伸出去

通常我們程式是可以縮放的，要是您把參數欄位放在Panel上面，您會發現縮小時，欄位被遮住了，如圖

雖然看起來很弱智，但是假設是初學者對元件不熟，一定做到後來就會發生這個錯誤，基本上我們就使用ScrollBox，他會有ScrollBar可以拖曳，就不會擋到您的欄位了

這樣其實還不夠，通常使用者再看欄位時，可能一次10個以上就會抱怨了，所以除了分類，我們還要做分頁，最簡單的Solution就是PageControl，當然有很多替代的，也可以自己設計，這裡就不講自己設計的部分(因為要寫Code)，其實自己設計的話會比較漂亮，所以我們將PageControl做三頁，將這些欄位分別放入PageControl的TabSheet裡面

您只要切換頁籤就可以設定不同的動物顏色，但是您會發現問題又來了，畫面縮小時又會欄位了

基本上就是

PageControl本身不會有ScrollBar，因此我們需要在它上面分別放上ScrollBox，再在ScrollBox上面放元件，這樣當縮小時就又會出現ScrollBar了

基本上您會發現ScrollBox很好用，他會幫您自動產生ScrollBar但是必須是元件跑到ScrollBox外面才會出現，

原則上如果您沒做畫面設計的話您大多時間會做我上面在做的事情，就是畫面布局，及參數分類管理，原則上可用的元件還是要熟拉，假設您沒有要深入，會到這裡就可以了

偷偷給您看經過畫面設計會有啥不一樣，我大概弄給您看，大概就是將PageControl改成自己用程式碼設定呼叫頁面顯示，往後教程我會弄一個範例給您下載研究，您會發現其實軟體是有很多技巧的，而不是就只是拉拉元件，兜兜功能，寫寫核心演算法就沒了

這裡只是先秀給您看一張圖

自製的PageControl，其中滑鼠放上去按鈕(其實他是Panel做的)他會變色，

這技術其實可以常常在網頁上看到，是一個模組化技巧(由於關鍵，就晚點再秀了(0 .0明年看有沒有機會)，只要您會模組化，這種東西可以千變萬化)

先到這了