寫在前面
表單是中後台系統最常見的元素模組之一，承載了各個流程中資訊資料的錄入使命。提高資訊資料錄入的效率可以加速使用者達成目標的時間與降低操作成本。一般要求在錄入前盡可能的使使用者理解資訊錄入的目的與**並判斷需要錄入的資訊內容，在錄入過程中盡可能的減少輸錯概率並幫助使用者快速達成，在錄入後即時糾錯提示並避免繁複操作等。
目錄
1. 基本樣式
2. 基礎表單
3. 高階表單
4. 頁面互動
5. 結語
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. 預設選中某個選項，或操作選中後，框內文字使用強調文本色。
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.結語
以上規範基於特有業務場景設定的，其中大部分規則設定亦通用於資料管理等型別的系統。
而往下更為細緻的方面需要根據實際內容資訊做特定的思考與設定。
比如：· 輸入框去掉描邊是否使頁面更加清爽無過多線條？
· 是否需要多列展示表單從而充分利用螢幕空間？
· 錄入資訊較多的情況如何分組或分塊展示？
· 頁面是否需要適配移動端？
即使各種業務表單內容功能不一，設計方式不同，但設計目標殊途同歸，
為了到達提高資訊錄入的效率與降低使用者達成目標成本的目的，從而助力業務目標的達成。
因此所有場景需具體考量與不斷迭代演化...
謝謝閱讀！￣o￣)ノ
# next update [ 中後台**設計規範 ]
網頁設計中的常用表單設計技巧
輸入框 input 應當符合邏輯地劃分為小組，這樣大腦就可以很好的處理大堆區域間的關係。html權威指南 web應用程式總是利用表單來處理資料錄入和配置，但並不是所有的表單都保持一致。輸入區域的對齊方式，各自的標籤 label 操作方式，以及周圍的視覺元素都會或多或少影響使用者的行為。表單布局 考慮...
4表單驗證 使用者體驗 表單設計中的注意事項
在下面的這篇文章中，我們來看看有助於你設計不同可用性表單的10個最佳實踐。希望它對設計人員和開發人員都有用。玩得開心 好吧，讓我們開始吧！通常，表單是乙個帶有標籤和字段的框，其中包含乙個號召性用語按鈕。那麼，如何設計乙個使用者友好的表單？一般來說，表單設計為使用者端隱藏了許多困難和痛苦的地方。因此，...
企業資訊開發平台 4 表單設計 中
2 建立流程 2.1 表單設定 2.1.1 基本屬性設定 在管理平台中新增表單，第一步便是設定表單基本屬性，此時除了表單名 類名 和標題外，還需設定所使用的資料表 將來在流程中會用到 表單所使用的模板型別。此處詳細說明一下模板 前面已經提到，目前管理平台已經內建了十四種模板，這些模板可分為四類 1 ...