后台界面設計之表單設計規范參考

本文轉載自查看原文 2021-10-14 11:24 1732 C#/ UI前端/ .NETCore/ Web前端/ 開發技術/ .NET技術/ RDIFramework.NET/ Jquery EasyUI/ 隨談/ 計算機常用知識/ 快速開發框架

前言

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

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

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個以內（這個是給產品同事看，有時候會拿到原型一個按鈕字數特別長。想想看一個正常的按鈕字數太多了用戶都需要花很長時間去讀取這個按鈕的功能然后再操作，非常影響用戶體驗）。

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

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