表單是中后臺系統最常見的元素模塊之一，承載了各個流程中信息數據的錄入使命。提高信息數據錄入的效率可以加速用戶達成目標的時間與降低操作成本。 一般要求在錄入前盡可能的使用戶理解信息錄入的目的與預測并判斷需要錄入的信息內容，在錄入過程中盡可能的減少輸錯概率并幫助用戶快速達成，在錄入后即時糾錯提示并避免繁復操作等。

前言

在后臺界面設計之表格設計規范參考一文中，我們對表格中內容的布局、數據的展示、操作項的羅列進行了詳細的講解，本文將對表單的設計規范做一個參考性的建議。

表單是中后臺系統最常見的元素模塊之一，承載了各個流程中信息數據的錄入使命。提高信息數據錄入的效率可以加速用戶達成目標的時間與降低操作成本。 一般要求在錄入前盡可能的使用戶理解信息錄入的目的與預測并判斷需要錄入的信息內容，在錄入過程中盡可能的減少輸錯概率并幫助用戶快速達成，在錄入后即時糾錯提示并避免繁復操作等。

1.基本樣式

1.1 顏色

使用色彩系統設定中的 10 個色值即可滿足樣式使用要求，包括主色/狀態色/中性灰色。其中中性灰色統一色相為 H:220。偏藍的灰色視覺上更清爽與討好眼球。

主色調的選擇，一般根據用戶群體、用戶使用場景以及產品的定位來進行思考和選取。當然對于后臺系統來說系統可做皮膚功能的擴展，給定用戶一個基礎的色調，然后做幾套配色好的皮膚，讓用戶可以自由選擇。對于公司來說一個項目可能會兼顧多個客戶，客戶都想要根據自己品牌色來做自己的系統，擁有多套可選擇的方案也給后續維護和銷售提供了便利。

1.2 常規樣式

默認文本標簽以右對齊方式位于輸入框左側，并將用戶使用過程中的各種狀態樣式考慮進來。各元素間距盡可能遵循以 8px 為增量單位的規則。

1.3 輸入框高度

設定三種高度輸入框以適應不同的設計空間與場景，高度分別為 28/32/40（高度值同樣適用于按鈕與下拉框），字號隨之為 12/14/16。其中 large 一般適用于展示型頁面，如首頁/功能介紹頁等。

1.4 文本標簽位置

a. 左對齊文本標簽居于輸入框左側

（考慮海外產品文本相對過長的情況，同時避免視覺上的參差不齊，不推薦使用 a ）

b. 左對齊文本標簽居于輸入框上方

c. 右對齊文本標簽居于輸入框左側

1.5 強調文本

a. 一般情況輸入框外文本標簽使用默認文本色。框內占位符文本使用淺文本色。

b. 單獨使用輸入框時，或需強調輸入框內文本標簽時，框內文本使用默認文本色，外部文本使用淺文本色。

c. 默認選中某個選項，或操作選中后，框內文本使用強調文本色。

1.6 標準字

后臺系統在字體選擇上都比較單一，中文：微軟雅黑、英文：Arial即可。只是注意在給前端開發培訓規范的時候重點提醒他們需要做字體樣式的重置，不然當你后期走查界面的時候一個頁面同時有宋體、有微軟雅黑強迫癥嚴重受不了啊，會非常影響看界面的心情。體會過走查這一步的設計師都懂。

1.7 圖標

圖標現在幾乎不用切圖的方式去做了，都在是制作完成后上傳到阿里巴巴的字體圖標庫中。前端調用方便調整大小和顏色也方便，關鍵是怎么處理都不會失真。

1.8 按鈕

最按鈕是交互設計中必備的元素，它在用戶和系統的交互中承擔著非常重要的作用。后臺中常見的按鈕類型分為線性按鈕、面狀按鈕、文字按鈕、圖標按鈕、文字+圖標按鈕。規范中要寫出按鈕的樣式包括寬高、圓角以及文字按鈕的字數一般限制6個以內（這個是給產品同事看，有時候會拿到原型一個按鈕字數特別長。想想看一個正常的按鈕字數太多了用戶都需要花很長時間去讀取這個按鈕的功能然后再操作，非常影響用戶體驗）。

按鈕的寬度給一個常規的寬度和高度，然后操作正常寬度文字離邊框的間間距是多少都需要寫清楚。

以及按鈕的各種狀態：默認狀態、鼠標懸停、焦點獲取、按住/激活、禁用

2.基礎表單

基礎表單一般表現為 10 個以內的錄入項，錄入形式較為簡單，且模塊區域寬度相對較窄，一般寬度小于 664px （以 modal small 寬度 664px 為區分值）滿足以上條件定義為基礎表單。一般用于登錄注冊模塊或小型模態彈窗等。

2.1 登錄注冊

無外部文本標簽，單獨使用輸入框時，可增加 icon 輔助內容感知

2.2 模態彈窗

固定 padding，不同寬度下輸入框寬度自適應。

3.高級表單

高級表單設計區域一般大或等于 664px 。并且為包含多于 10 個錄入項或多種形式操作組件，需要分步操作或分組和分模塊設計。僅以單列的形式排布，保證一致的縱線視覺瀏覽。

3.1. 視覺居中

· 一般默認單列視覺居中。為了在大寬度窗口下不至于模塊留白過多，內容布局采用百分比規則橫向自適應。

· 整個模塊自適應最小寬度為 1000。

· 內容區域比例為：標簽區 30% - 錄入區 50% - 留白區 20% 。( 錄入區自適應最大寬度為 700px ）

3.2. 視覺居左

· 根據上下模塊整體美觀度，或右側需要展示其他信息內容的情況使用。

· 內容區域比例為：標簽區 18% - 錄入區 50% - 留白區 32% 。( 錄入區自適應最大寬度為 700px ）

· 同樣的，整個模塊自適應最小寬度為 1000。

4.頁面交互

4.1 分步錄入

模塊最小高度為 500px ，保證錄入行過少時，模塊高度不至于過扁。

4.2 多模塊錄入

頁面向上滾動時，步驟條置頂，亦可同時置底提交按鈕。

5.結語

以上規范基于特有業務場景設定的，其中大部分規則設定亦通用于數據管理等類型的系統。

而往下更為細致的方面需要根據實際內容信息做特定的思考與設定。

比如：

· 輸入框去掉描邊是否使頁面更加清爽無過多線條？

· 是否需要多列展示表單從而充分利用屏幕空間？

· 錄入信息較多的情況如何分組或分塊展示？

· 頁面是否需要適配移動端？

即使各種業務表單內容功能不一，設計方式不同，但設計目標殊途同歸，

為了到達提高信息錄入的效率與降低用戶達成目標成本的目的，從而助力業務目標的達成。

因此所有場景需具體考量與不斷迭代演化...

• 后臺界面設計之表格設計規范參考
• .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），及時了解最新動態。

使用微信掃描二維碼立即關注