[交互设计]表单-Form的布局研究(上下、左右、内置)

废话:

好久没写文章,一方面是业务繁重,第二方面是发现自己的专业知识一直都是混沌的,知道了很多,接收了很多,都一股豆腐花地浆在大脑里面。趁着最近在做交互设计规范,开始研究起每个细小组件的时候,发现一个下拉弹出框的细节,足够写一片论文的研究了,更何况是一个表单这么复杂的交互元素。

先一部分慢慢来整合吧。今天梳理关于Form的布局的一些研究。

一、Form的布局类型

大家都知道,表单的布局常规的分为三大类,上下布局,左右布局,还有一种是文本内置布局。


上下布局


左右布局


文本内置的布局

二、上下布局

下面几种场景,会比较建议用上下模式

1.当表单作为搜索条件的情况

2.输入框数量比较少的情况

3.整个页面比较依赖左对齐的情况

4.多列(一般两列或三列)的表单

下面的图,表单作为两列(多列表单的情况)的搜索条件,在这里就不适合用左右布局了。因为既要保持输入框的左对齐(页面title左对齐,搜索button左对齐,严重依赖左对齐模式),文本字段有长有短,要页面看起来整齐,而且要提升用户的浏览效率,那么,在这个场景下用上下模式是比较合适的。


上下布局会比左右布局更优

下面这个案例是对于多列表单的模式,用上上下布局也是更加清晰明了,虽然这里因为文字在上,输入框在下,使得纵向的长度长了接近一倍,但是因为双(多)列使得表单横向的空间得到更充分的利用。

三、左右布局

左右布局也很常见,一般适用于下面的场景:

1.整个页面布局趋于居中对齐

2.超过一屏的长表单(非常多的输入项)的填写

页面布局趋于居中对齐的情况下,只要输入框的左边对齐,右边的字段长短不一,不会影响整体的信息展示视觉效果。这时候毕竟常见的场景是在弹出框的时候。弹出框一般是居于页面的中央位置。尽管在弹出框中,标题置于左上角,操作按钮在右下角,此时form的布局是左右结构,从视觉展示层面看来也是会比上下机构和谐。

弹出框

长页面表单输入的场景下,表单输入框的长度可以横向拉得更长,以及左右结构在用户浏览的过程中,不会占浪费掉标题字段文本这一行的空间。


长表单-建议左右形式


长表单,不建议上下布局

四、总结

那么有没有一个比较简单的判断标准,可以像抛硬币一样去决定到底用哪种形式呢?

根据个人大量研究表单设计周会,个人会这样建议:

在一个单一场景下面,如果上面的场景都考虑过但还是纠结是上下结构或者左右结构的时候,当纵向空间充裕,横向空间受限的情况下,首选(左对齐)上下结构;当横向空间宽裕,纵向空间受限时,优先选择用左右结构。

仅供参考。


五、后续

上面仅仅是研究了关于表单中,「输入项标题」跟「输入框」的布局。关于文本内置的布局,分别有以下三种形式,接下来有时间可以研究这三种形式的使用场景。

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

1.text作为提示内容,直接被输入内容覆盖(Hint txet)

2.text作为提示字段,固定在输入框内不被覆盖

3.text作为提示内容,采用floating label text的形式

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,064评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,606评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,011评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,550评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,465评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,919评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,428评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,075评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,208评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,914评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,482评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2 339

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,973评论 4 60
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,234评论 25 707
  • 我曾大胆的猜想,是不是每个人心里都住着一个秘密。一个相爱却没有在一起的人。这个人可能会永远存在,但也许你们之间早就...
    笑容女王阅读 582评论 4 4
  • 今天儿子的脸上始终都带着微笑。我好奇地问:你怎么这么高兴啊!儿子在我耳边悄悄地说:妈妈因为明天要开学了,所以我特别...
    家和万事兴_dbbc阅读 165评论 0 0
  • 题记不想做,就走人,做想做的事;如果没有能力,就去学。 20出头的年纪,好像不知道自己喜欢做什么,也没有培养自己什...
    饭饭a阅读 199评论 2 5