表單是中背景系統最常見的元素子產品之一，承載了各個流程中資訊資料的錄入使命。提高資訊資料錄入的效率可以加速使用者達成目标的時間與降低操作成本。 一般要求在錄入前盡可能的使使用者了解資訊錄入的目的與預測并判斷需要錄入的資訊内容，在錄入過程中盡可能的減少輸錯機率并幫助使用者快速達成，在錄入後即時糾錯提示并避免繁複操作等。
在背景界面設計之表格設計規範參考一文中，我們對表格中内容的布局、資料的展示、操作項的羅列進行了詳細的講解，本文将對表單的設計規範做一個參考性的建議。
使用色彩系統設定中的 10 個色值即可滿足樣式使用要求，包括主色/狀态色/中性灰色。其中中性灰色統一色相為 H:220。偏藍的灰色視覺上更清爽與讨好眼球。
主色調的選擇，一般根據使用者群體、使用者使用場景以及産品的定位來進行思考和選取。當然對于背景系統來說系統可做皮膚功能的擴充，給定使用者一個基礎的色調，然後做幾套配色好的皮膚，讓使用者可以自由選擇。對于公司來說一個項目可能會兼顧多個客戶，客戶都想要根據自己品牌色來做自己的系統，擁有多套可選擇的方案也給後續維護和銷售提供了便利。
預設文本标簽以右對齊方式位于輸入框左側，并将使用者使用過程中的各種狀态樣式考慮進來。各元素間距盡可能遵循以 8px 為增量機關的規則。
設定三種高度輸入框以适應不同的設計空間與場景，高度分别為 28/32/40（高度值同樣适用于按鈕與下拉框），字号随之為 12/14/16。其中 large 一般适用于展示型頁面，如首頁/功能介紹頁等。
a. 左對齊文本标簽居于輸入框左側
（考慮海外産品文本相對過長的情況，同時避免視覺上的參差不齊，不推薦使用 a ）
b. 左對齊文本标簽居于輸入框上方
c. 右對齊文本标簽居于輸入框左側
a. 一般情況輸入框外文本标簽使用預設文本色。框内占位符文本使用淺文本色。
b. 單獨使用輸入框時，或需強調輸入框内文本标簽時，框内文本使用預設文本色，外部文本使用淺文本色。
c. 預設選中某個選項，或操作選中後，框内文本使用強調文本色。
背景系統在字型選擇上都比較單一，中文：微軟雅黑、英文：Arial即可。隻是注意在給前端開發教育訓練規範的時候重點提醒他們需要做字型樣式的重置，不然當你後期走查界面的時候一個頁面同時有宋體、有微軟雅黑強迫症嚴重受不了啊，會非常影響看界面的心情。體會過走查這一步的設計師都懂。
圖示現在幾乎不用切圖的方式去做了，都在是制作完成後上傳到阿裡巴巴的字型圖示庫中。前端調用友善調整大小和顔色也友善，關鍵是怎麼處理都不會失真。
最按鈕是互動設計中必備的元素，它在使用者和系統的互動中承擔着非常重要的作用。背景中常見的按鈕類型分為線性按鈕、面狀按鈕、文字按鈕、圖示按鈕、文字+圖示按鈕。規範中要寫出按鈕的樣式包括寬高、圓角以及文字按鈕的字數一般限制6個以内（這個是給産品同僚看，有時候會拿到原型一個按鈕字數特别長。想想看一個正常的按鈕字數太多了使用者都需要花很長時間去讀取這個按鈕的功能然後再操作，非常影響使用者體驗）。
按鈕的寬度給一個正常的寬度和高度，然後操作正常寬度文字離邊框的間間距是多少都需要寫清楚。
以及按鈕的各種狀态：預設狀态、滑鼠懸停、焦點擷取、按住/激活、禁用
基礎表單一般表現為 10 個以内的錄入項，錄入形式較為簡單，且子產品區域寬度相對較窄，一般寬度小于 664px （以 modal small 寬度 664px 為區分值）滿足以上條件定義為基礎表單。一般用于登入注冊子產品或小型模态彈窗等。
無外部文本标簽，單獨使用輸入框時，可增加 icon 輔助内容感覺
固定 padding，不同寬度下輸入框寬度自适應。
進階表單設計區域一般大或等于 664px 。并且為包含多于 10 個錄入項或多種形式操作元件，需要分步操作或分組和分子產品設計。僅以單列的形式排布，保證一緻的縱線視覺浏覽。
· 一般預設單列視覺居中。為了在大寬度視窗下不至于子產品留白過多，内容布局采用百分比規則橫向自适應。
· 整個子產品自适應最小寬度為 1000。
· 内容區域比例為：标簽區 30% - 錄入區 50% - 留白區 20% 。( 錄入區自适應最大寬度為 700px ）
· 根據上下子產品整體美觀度，或右側需要展示其他資訊内容的情況使用。
· 内容區域比例為：标簽區 18% - 錄入區 50% - 留白區 32% 。( 錄入區自适應最大寬度為 700px ）
· 同樣的，整個子產品自适應最小寬度為 1000。
子產品最小高度為 500px ，保證錄入行過少時，子產品高度不至于過扁。
頁面向上滾動時，步驟條置頂，亦可同時置底送出按鈕。
以上規範基于特有業務場景設定的，其中大部分規則設定亦通用于資料管理等類型的系統。
而往下更為細緻的方面需要根據實際内容資訊做特定的思考與設定。
比如：
· 輸入框去掉描邊是否使頁面更加清爽無過多線條？
· 是否需要多列展示表單進而充分利用螢幕空間？
· 錄入資訊較多的情況如何分組或分塊展示？
· 頁面是否需要适配移動端？
即使各種業務表單内容功能不一，設計方式不同，但設計目标殊途同歸，
為了到達提高資訊錄入的效率與降低使用者達成目标成本的目的，進而助力業務目标的達成。
是以所有場景需具體考量與不斷疊代演化...
背景界面設計之表格設計規範參考
.NET靈活開發架構-RDIFramework.NET V5.1釋出(跨平台)
RDIFramework.NET開發架構編碼管理助力業務編碼的自動處理
RDIFramework.NET開發架構線上表單設計助力可視化快速開發
RDIFramework.NET開發架構線上表單設計整合工作流程的使用
RDIFramework.NET靈活開發架構助力企業BPM業務流程系統的開發與落地
通過SignalR技術整合即時通訊(IM)在.NET靈活開發架構中落地
RDIFramework.NET — 基于.NET的快速資訊化系統開發架構 — 系列目錄
RDIFramework.NET靈活開發架構 ━ 工作流程元件介紹
RDIFramework.NET靈活開發架構 ━ 工作流程元件Web業務平台
RDIFramework.NET靈活開發架構 ━ 工作流程元件WinForm業務平台
微信公衆号開發系列-玩轉微信開發-目錄彙總
.NET Core部署到linux(CentOS)最全解決方案，正常篇
.NET Core部署到linux(CentOS)最全解決方案，進階篇(Supervisor+Nginx)
.NET Core部署到linux(CentOS)最全解決方案，高階篇(Docker+Nginx 或 Jexus)
.NET Core部署到linux(CentOS)最全解決方案，入魔篇(使用Docker+Jenkins實作持續內建、自動化部署)
一網打盡，一文講通虛拟機VirtualBox及Linux使用
一文講通.NET Core部署到Windows IIS最全解決方案
常用linux指令，開發必備
一路走來數個年頭，感謝RDIFramework.NET架構的支援者與使用者，大家可以通過下面的位址了解詳情。
RDIFramework.NET官方網站：http://www.rdiframework.net/
RDIFramework.NET官方部落格：http://blog.rdiframework.net/
特别說明，架構相關的技術文章請以官方網站為準，歡迎大家收藏！
RDIFramework.NET架構由海南國思軟體科技有限公司專業團隊長期打造、一直在更新、一直在更新，請放心使用！
歡迎關注RDIFramework.NET架構官方微信公衆号（微信号：guosisoft），及時了解最新動态。
使用微信掃描二維碼立即關注
作者：
RDIFramework.NET
出處：http://www.cnblogs.com/huyong/
Email：[email protected]
QQ：406590790
微信：13005007127(同手機号)
架構官網：http://www.rdiframework.net/
架構官網部落格：http://blog.rdiframework.net/
架構其他部落格：http://blog.csdn.net/chinahuyong
http://www.cnblogs.com/huyong
RDIFramework.NET，基于全新.NET Framework與.NET Core的快速資訊化系統開發、整合架構，為企業快速建構垮平台、企業級的應用提供了強大支援。
關于作者：系統架構師、資訊系統項目管理師、DBA。專注于微軟平台項目架構、管理和企業解決方案，多年項目開發與管理經驗，曾多次組織并開發多個大型項目，在面向對象、面向服務以及資料庫領域有一定的造詣。現主要從事基于
架構的技術開發、咨詢工作，主要服務于金融、醫療衛生、鐵路、電信、物流、物聯網、制造、零售等行業。
如有問題或建議，請多多賜教！
本文版權歸作者和CNBLOGS部落格共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，如有問題，可以通過微信、郵箱、QQ等聯系我，非常感謝。