廢話:
好久沒寫文章缓艳,一方面是業(yè)務(wù)繁重校摩,第二方面是發(fā)現(xiàn)自己的專業(yè)知識一直都是混沌的,知道了很多阶淘,接收了很多秧耗,都一股豆腐花地漿在大腦里面。趁著最近在做交互設(shè)計規(guī)范舶治,開始研究起每個細(xì)小組件的時候分井,發(fā)現(xiàn)一個下拉彈出框的細(xì)節(jié),足夠?qū)懸黄撐牡难芯苛嗣姑停螞r是一個表單這么復(fù)雜的交互元素尺锚。
先一部分慢慢來整合吧。今天梳理關(guān)于Form的布局的一些研究惜浅。
一瘫辩、Form的布局類型
大家都知道,表單的布局常規(guī)的分為三大類,上下布局伐厌,左右布局承绸,還有一種是文本內(nèi)置布局。
二、上下布局
下面幾種場景荡澎,會比較建議用上下模式
1.當(dāng)表單作為搜索條件的情況
2.輸入框數(shù)量比較少的情況
3.整個頁面比較依賴左對齊的情況
4.多列(一般兩列或三列)的表單
下面的圖鞭铆,表單作為兩列(多列表單的情況)的搜索條件车遂,在這里就不適合用左右布局了澄港。因為既要保持輸入框的左對齊(頁面title左對齊回梧,搜索button左對齊,嚴(yán)重依賴左對齊模式)详囤,文本字段有長有短,要頁面看起來整齊,而且要提升用戶的瀏覽效率兜材,那么糠爬,在這個場景下用上下模式是比較合適的。
下面這個案例是對于多列表單的模式添祸,用上上下布局也是更加清晰明了刃泌,雖然這里因為文字在上,輸入框在下曹体,使得縱向的長度長了接近一倍铜幽,但是因為雙(多)列使得表單橫向的空間得到更充分的利用除抛。
三、左右布局
左右布局也很常見喘漏,一般適用于下面的場景:
1.整個頁面布局趨于居中對齊
2.超過一屏的長表單(非常多的輸入項)的填寫
頁面布局趨于居中對齊的情況下,只要輸入框的左邊對齊搅方,右邊的字段長短不一吧慢,不會影響整體的信息展示視覺效果检诗。這時候畢竟常見的場景是在彈出框的時候匈仗。彈出框一般是居于頁面的中央位置。盡管在彈出框中逢慌,標(biāo)題置于左上角悠轩,操作按鈕在右下角,此時form的布局是左右結(jié)構(gòu)攻泼,從視覺展示層面看來也是會比上下機構(gòu)和諧火架。
長頁面表單輸入的場景下,表單輸入框的長度可以橫向拉得更長忙菠,以及左右結(jié)構(gòu)在用戶瀏覽的過程中何鸡,不會占浪費掉標(biāo)題字段文本這一行的空間。
四骡男、總結(jié)
那么有沒有一個比較簡單的判斷標(biāo)準(zhǔn),可以像拋硬幣一樣去決定到底用哪種形式呢傍睹?
根據(jù)個人大量研究表單設(shè)計周會洞翩,個人會這樣建議:
在一個單一場景下面,如果上面的場景都考慮過但還是糾結(jié)是上下結(jié)構(gòu)或者左右結(jié)構(gòu)的時候焰望,當(dāng)縱向空間充裕骚亿,橫向空間受限的情況下,首選(左對齊)上下結(jié)構(gòu)熊赖;當(dāng)橫向空間寬裕来屠,縱向空間受限時,優(yōu)先選擇用左右結(jié)構(gòu)震鹉。
僅供參考俱笛。
五、后續(xù)
上面僅僅是研究了關(guān)于表單中传趾,「輸入項標(biāo)題」跟「輸入框」的布局迎膜。關(guān)于文本內(nèi)置的布局,分別有以下三種形式浆兰,接下來有時間可以研究這三種形式的使用場景磕仅。
--------------
1.text作為提示內(nèi)容珊豹,直接被輸入內(nèi)容覆蓋(Hint txet)
2.text作為提示字段,固定在輸入框內(nèi)不被覆蓋
3.text作為提示內(nèi)容榕订,采用floating label text的形式
---------------