[交互設(shè)計]表單-Form的布局研究(上下我擂、左右、內(nèi)置)

廢話:

好久沒寫文章缓艳,一方面是業(yè)務(wù)繁重校摩,第二方面是發(fā)現(xiàn)自己的專業(yè)知識一直都是混沌的,知道了很多阶淘,接收了很多秧耗,都一股豆腐花地漿在大腦里面。趁著最近在做交互設(shè)計規(guī)范舶治,開始研究起每個細(xì)小組件的時候分井,發(fā)現(xiàn)一個下拉彈出框的細(xì)節(jié),足夠?qū)懸黄撐牡难芯苛嗣姑停螞r是一個表單這么復(fù)雜的交互元素尺锚。

先一部分慢慢來整合吧。今天梳理關(guān)于Form的布局的一些研究惜浅。

一瘫辩、Form的布局類型

大家都知道,表單的布局常規(guī)的分為三大類,上下布局伐厌,左右布局承绸,還有一種是文本內(nèi)置布局。


上下布局


左右布局


文本內(nèi)置的布局

二、上下布局

下面幾種場景荡澎,會比較建議用上下模式

1.當(dāng)表單作為搜索條件的情況

2.輸入框數(shù)量比較少的情況

3.整個頁面比較依賴左對齊的情況

4.多列(一般兩列或三列)的表單

下面的圖鞭铆,表單作為兩列(多列表單的情況)的搜索條件车遂,在這里就不適合用左右布局了澄港。因為既要保持輸入框的左對齊(頁面title左對齊回梧,搜索button左對齊,嚴(yán)重依賴左對齊模式)详囤,文本字段有長有短,要頁面看起來整齊,而且要提升用戶的瀏覽效率兜材,那么糠爬,在這個場景下用上下模式是比較合適的。


上下布局會比左右布局更優(yōu)

下面這個案例是對于多列表單的模式添祸,用上上下布局也是更加清晰明了刃泌,雖然這里因為文字在上,輸入框在下曹体,使得縱向的長度長了接近一倍铜幽,但是因為雙(多)列使得表單橫向的空間得到更充分的利用除抛。

三、左右布局

左右布局也很常見喘漏,一般適用于下面的場景:

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的形式

---------------

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末店茶,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子劫恒,更是在濱河造成了極大的恐慌贩幻,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件两嘴,死亡現(xiàn)場離奇詭異丛楚,居然都是意外死亡,警方通過查閱死者的電腦和手機憔辫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門趣些,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人螺垢,你說我怎么就攤上這事喧务±蹈瑁” “怎么了枉圃?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長庐冯。 經(jīng)常有香客問我孽亲,道長,這世上最難降的妖魔是什么展父? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任返劲,我火速辦了婚禮,結(jié)果婚禮上栖茉,老公的妹妹穿的比我還像新娘篮绿。我一直安慰自己,他們只是感情好吕漂,可當(dāng)我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布亲配。 她就那樣靜靜地躺著,像睡著了一般惶凝。 火紅的嫁衣襯著肌膚如雪吼虎。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天苍鲜,我揣著相機與錄音思灰,去河邊找鬼。 笑死混滔,一個胖子當(dāng)著我的面吹牛洒疚,可吹牛的內(nèi)容都是我干的歹颓。 我是一名探鬼主播,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼拳亿,長吁一口氣:“原來是場噩夢啊……” “哼晴股!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起肺魁,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤电湘,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后鹅经,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體寂呛,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年瘾晃,在試婚紗的時候發(fā)現(xiàn)自己被綠了贷痪。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡蹦误,死狀恐怖劫拢,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情强胰,我是刑警寧澤舱沧,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站偶洋,受9級特大地震影響熟吏,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜玄窝,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一牵寺、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧恩脂,春花似錦帽氓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至典阵,卻和暖如春奋渔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背壮啊。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工嫉鲸, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人歹啼。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓玄渗,卻偏偏與公主長得像座菠,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子藤树,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫浴滴、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,024評論 4 62
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,506評論 25 707
  • 我曾大膽的猜想,是不是每個人心里都住著一個秘密屡限。一個相愛卻沒有在一起的人品嚣。這個人可能會永遠(yuǎn)存在,但也許你們之間早就...
    笑容女王閱讀 588評論 4 4
  • 今天兒子的臉上始終都帶著微笑钧大。我好奇地問:你怎么這么高興昂渤拧!兒子在我耳邊悄悄地說:媽媽因為明天要開學(xué)了啊央,所以我特別...
    家和萬事興_dbbc閱讀 168評論 0 0
  • 題記不想做瓜饥,就走人逝撬,做想做的事;如果沒有能力压固,就去學(xué)球拦。 20出頭的年紀(jì)靠闭,好像不知道自己喜歡做什么帐我,也沒有培養(yǎng)自己什...
    飯飯a閱讀 201評論 2 5