表單是一個包含了若干表單控件、組件的合集,其中包含的所有表單都具有一定的聯系和共性。那么如何才能做好表單的具體設計?這篇文章詳細分析了關于表單設計框架、輸入框控件、按鈕和標簽、單選和多選、下拉菜單類控件、復雜的表單組件這六個部分的設計方法,推薦給設計行業的童鞋們閱讀。
表單是一個包含了若干表單控件、組件的合集,其中包含的所有表單都具有一定的聯系和共性。所以當我們展開表單內容的設計時,就要先構建整體的框架,確定表單間聯系和共性,再進行細節的設計。
首先,我們要先完成標題、內容、操作區域的布局,標題和操作欄通常高度尺寸是固定的,內容的高度待定,但要確定內間距的數值。
然后,再構思內容區域內的數據項布局形式。常規的數據項布局形式有兩種,一種是單列,一種是多列。
它們有各自的應用場景,如果表單內容的收集有連續性,比如個人資料、商品信息、產品數據,具備從第一個開始逐一向后輸入的邏輯,那么主要使用單列設計。
每行填寫單一或同0類數據項,則填寫的過程會更流暢、清晰,這在成熟產品設計中隨處可見。
而多列布局,主要應用在填寫內容是無序、隨機的,具有高度不確定性的表單中,那么這類表單就傾向于將數據項更密集的羅列出來,讓用戶可以更快找到目標對象,常見于篩選模塊中。
至于表單是否支持響應式也盡量在這個階段確認,單列式的表單很少會完整支持響應式的場景,因為輸入項所需空間一般都很小,只需要設計合適的尺寸,就沒有去拉伸、縮放它們的必要。
而多列式的則可能根據頁面的寬度,采用流體的邏輯進行列數的變更,讓顯示效果更緊湊合理。
之后,就要設計單個數據項的基本布局形內容了,包含數據項區域的內間距,標題的文本區域的布局和對齊形式,內容排版區域等。
包含以下三種常見的形式:
數據項的高度是由內容和內邊距相加而成,在后續排列中可以使用0間距緊貼,也可以增加固定的間距。這才是表單項布局的正確方法,而不是每個數據項設計后再 “憑感覺” 排列。
完成上面工作后,就可以展開對單個數據項的設計了。
上文提到,輸入框就是表單控件設計的 “錨點”,除了它自身的使用數量多以外,還有大量的表單控件是結合輸入框設計的,所以每次開始項目表單的設計,優先從輸入框開始。
輸入框設計的基本原則 ——
使用4的倍數基礎先定高,再定寬
。
而應該定什么高的數值合適,這個并沒有絕對準確的答案。Ant、TDesign、Arco 都給出了不同檔位的高度,分別是:
設計師首先要確定一個常規的輸入框高度作為標準,這個數值通常在 32、36、40 之間選擇,這種選擇依據主要是輸入文本字號通常在 13-16之間,這幾個高度可以保證比較適中的留白,不會覺得太空曠或者太局促。
之后在其它特殊場景中,再根據場景權重進行增大或者縮小,也就是多定幾個規格出來。而不論是什么高度數值的輸入框,它的寬度制定都需要根據顯示內容的數量決定。盡量也使用4的倍數,同時也多預留一些空間出來(即使同字符數寬度也會不一致)。
除了高度的設置,還有圓角的設置也是重點,一個穩重、專業的B端項目,圓角尺寸的應用通常在1、2、4px之間選擇,大于4px的圓角就會讓它看起來過于圓潤,不是風格化特別強的SAAS我都建議大家直接忽略4px以上的數值。
有了基本輸入框的尺寸,同時建議以它作為標準,定義表單數據項的最小高度,后續單選多選視圖也使用相同的高度數值。
除了表單操作欄內的全局按鈕,表單內部也會有使用按鈕的需求,如查詢、清空、重置輸出框內容,上傳附件,或者添加新的數據項等。
而在表單內的這些按鈕,可以設計成兩種尺寸,一種是和輸入框同級同高,另一種是包含在輸入框中比輸入框小的尺寸。而標簽也可以使用相同的設計來完成。
表單內只需要這兩種尺寸就可以覆蓋絕大多數場景,而在表單內,按鈕寬度很少會制定定寬的,通常根據內容進行適配。所以,我們分別為兩個按鈕制定好左右內邊距即可。
單選和多選項,最常用的樣式上圖所示的圓形或矩形加上文字的設計。
在這里單選和多選可以使用相同的尺寸,寬高控制在 16、18、20 幾個參數之內。然后再設置圖形和文字間的間距,通常也就 8、10、12三個數值可選。
因為包含多個選項,我們還要確定選項間的布局,主要形式就兩種,橫排或者豎排。確定好排列形式,然后再給出對應的間距即可。
這里要強調一點,橫排模式下,主要以選項信息的長度加間距排列,而不是使用等寬模式。只有極少數情況,如填問卷的場景下才會使用等寬布局。
類似下拉選擇、日期、時間、集聯等控件,都是在下拉菜單中展示主要內容信息,它們的設計方式遵循相同的邏輯,所以我們一起介紹。
在表單中的多數下拉菜單會有一個觸發對象,即長得像輸入框一樣的矩形控件。當我們完成輸入框設計后,它的基本規格就和矩形框一致,但是要在右側增加可展開的提示圖標。
然后再制定下方菜單的相關參數,包括距離觸發控件的距離,以及相同的圓角,合適的內間距。
正確的下拉菜單設計并不是依靠直接指定尺寸的,而是根據內容長寬加內間距得出的。如果內容過多,就會設置一個最大的寬或高,再使用滾輪滑動。
然后, 再完成里面的內容設計,不管是普通列表、日期、時間還是集聯,都在完成設計后置入到窗口內,通過增加內間距完成最后的樣式輸出。
只要理解以上設計邏輯,這些基礎的細節內容設計我就不展開了,大家查考下各框架的源文件即可。
掌握以上基礎控件設計以后,再去設計一些復雜的組件也就相當容易了,因為他們都是由這些最基礎的元素組合而成的。
比如穿梭框,選項就是由縱向的多選框和衍生而來,參數基本一致。
再看看一些千牛中真實的表單數據項案例,之所以做的效果不好,原因就是每個數據項的設計各自為戰,而沒有根據我們前面所說的定義方式實現。
復雜表單組件的主要設計門檻在于對交互方法的制定上,只要確定交互方式和布局,就可以依據基礎的設計進行組合和拓展。
遵循這樣的設計方法,不管遇到什么樣的特殊組件,還是不同的表單頁面,我們都能確保它處于同一套設計系統之內,保證系統的基礎用戶體驗不被破壞。
評論（0）