#### **3.1.1 扁平化電腦端視圖制作** 如今的互聯網時代，扁平化的頁面視圖日漸流行。要制作出扁平化的電腦端視圖頁面，對于表單設計器而言并無難度。 **1.?頁面布局** 使用表格布局，插入的表格通常為**24、30、36列**，每列均為**36像素**，視圖寬度分別為864、1080、1296像素。 表格行數則根據需要增減，標題欄行高**24像素**，其余行高均為**36像素**。 **2\. 頁面樣式** * 單元格邊距：表格內單元格的上下左右邊距一般為**0像素**，部分頂部對齊的單元格需要設置上邊距，部分單元格需要設置左邊距（如存放復選框的單元格、部分存放特定文字的單元格）。 * 字體字號：通常表單標題為**微軟雅黑\*\*\*\*24像素**（視需要可加粗），表格中標題欄（劃分區塊）為**微軟雅黑14像素**（視需要加粗），表格中的文字內容為**微軟雅黑12像素**。 * 文字顏色：表單標題和標題欄為**黑色**（建議#000000），表格中的控件左側標簽文字為**灰色**（#999999），填寫提示類文字為**淺綠色**（#008000），警示性文字為**紅色**（#ff0000）。 * 文字對齊：表單標題單元格**左對齊**與**垂直\*\*\*\*居中對齊**，控件（文本域和流程處理意見除外）左側的標簽文字單元格**右對齊**與**垂直居中對齊**，文本域和流程處理意見控件及其左側的標簽文字單元格**右對齊**與**頂部對齊**（單元格上邊距為8像素），其余存放控件或文字的單元格一般左對齊與垂直居中對齊。 * 背景色：頁面整體可不著色或著淺色，標題欄著**淺藍色**（#ddefff）且與整體背景色進行區分。 * 表格邊框：通常**無邊框線**，專門用于打印的視圖可根據需要設置必要的邊框線。 **3\. 單元格合并與拆分** 在每一行中，根據實際需要合并單元格來存放相關的文字內容和控件。文字大小為12像素時，合并2個單元格可存放5-6個漢字與全角標點，或者存放8－10個數字、英文字母與半角標點，以此類推。 **4\. 明細表樣式** 明細表單獨占位，不內嵌到表格布局中。列數根據需要確定，表頭一般存放列的標題文字，通常是一行；明細區主要存放控件；表尾一般也存放控件，主要用戶對明細區的數值進行匯總，通常是一行。明細表的樣式除下述內容外，其余與頁面樣式相同。 * 單元格邊距：表格內所有單元格的上下邊距均為**0像素**，存放控件（序號控件除外）的單元格左右邊距為**6像素**或**3像素**（列較多時可選擇3像素），不存放控件的單元格和存放序號的單元格左右邊距為**0像素**。 * 表頭顏色：**淺灰色**（#f8f8f8）。 * 列寬：根據需要設置，當左右邊距為6像素時，寬度計算公式為**12X＋14像素**；當左右邊距為3像素時，寬度計算公式為**12X＋8像素**，其中X為該列顯示的最少漢字數量。 * 行高：表頭行高為**24像素**，明細區、表尾視具體情況可以為**24像素**或**36像素**（行數很多且單元格中的數據不換行時才使用24像素）。 **5.?控件標簽文字** 為了方便頁面展示，一般在控件左側顯示控件標簽文字（復選框除外），該標簽文字的作用與控件標題相同，但排版更加靈活、樣式更容易調整。控件的標簽提示通常使用2－4個漢字以全角冒號結尾（需合并相鄰的兩個單元格存放），這樣顯示更整齊劃一。對于超過4個漢字的標簽提示，則需合并更多的單元格來存放。 在一個視圖頁面中，通常左側的第2、3列的單元格均合并用于存放標簽文字，其后的標簽文字存放本著夠用、美觀的原則，盡可能地將控件標簽提示縱向有序陳列，按冒號對齊。標簽文字左側一般預留一個空白的單元格。 **6\. 控件樣式** (1) 字體字號：通常為**微軟雅黑12像素**（視需要ke 加粗）。 (2) 文字顏色：通常可不設置，必要時根據需要設置（如紅色，可提示使用者）。 (3) 文字對齊：通常為左對齊，明細表中的文本控件可設置所在單元格居中對齊（如計量單位），明細表中的數字控件可設置所在單元格右對齊（便于小數點對齊）。 (4) 標題顯示：均設置“無標題”。 (5) 邊框：通常選擇“下邊框”，必要時根據需要設置。 (6) 寬度：根據存放的文字內容、大小、數量，通過合并相鄰的單元格來確定。一般標準如下。 * 文本、文本域控件按文字數量，量多時可占用1行（合并第3-24列）； * 數字控件按大小（含小數位），每3位合并1個相鄰單元格； * 下拉控件按枚舉內容中最大的文字數量； * 單選控件按選擇項的多少； * 復選框只需1個單元格存放即可，其右側的單元格合并適當的數量存放提示性標簽文字； * 日期、日期時間控件在默認顯示格式下分別合并3個、4個相鄰單元格，其他顯示格式下酌加； * 流程處理意見控件通常占用1行； * 組織機構控件中，一般選人控件需合并3－5個相鄰單元格，選崗位、選部門、選職務級別礦建需合并4－6個相鄰單元格，選單位控件需可并7－9個相鄰單元格，多選的則根據需要處理。 實例如下。