後台界面設計之表單設計規範參考

前言

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

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

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官方網站://www.rdiframework.net/

RDIFramework.NET官方博客://blog.rdiframework.net/

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

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

歡迎關注RDIFramework.NET框架官方微信公眾號(微信號:guosisoft),及時了解最新動態。

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

微信掃描二維碼