後臺介面設計之表單設計規範參考

前言

在後臺介面設計之表格設計規範參考一文中，我們對錶格中內容的佈局、資料的展示、操作項的羅列進行了詳細的講解，本文將對錶單的設計規範做一個參考性的建議。

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

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.結語

以上規範基於特有業務場景設定的，其中大部分規則設定亦通用於資料管理等型別的系統。

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

比如：

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

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

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

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

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

為了到達提高資訊錄入的效率與降低使用者達成目標成本的目的，從而助力業務目標的達成。

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

往期推薦

一路走來數個年頭，感謝RDIFramework.NET框架的支持者與使用者，大家可以通過下面的地址瞭解詳情。

RDIFramework.NET官方網站：http://www.rdiframework.net/

RDIFramework.NET官方部落格：http://blog.rdiframework.net/

特別說明，框架相關的技術文章請以官方網站為準，歡迎大家收藏！

RDIFramework.NET框架由海南國思軟體科技有限公司專業團隊長期打造、一直在更新、一直在升級，請放心使用！

歡迎關注RDIFramework.NET框架官方微信公眾號（微訊號：guosisoft），及時瞭解最新動態。

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

微信掃描二維碼